Merge branch 'next' into test/addon-controls-infer-and-e2e

.circleci/config.yml

@@ -218,8 +218,8 @@ jobs:
           command: yarn wait-on http://localhost:6000
       - run:
           name: Run E2E tests
-          # Do not test CRA here because it's done in PnP part and add `angular` as soon as SB will support Angular 12
+          # Do not test CRA here because it's done in PnP part
-          command: yarn test:e2e-framework vue3 angular11 web_components_typescript
+          command: yarn test:e2e-framework vue3 angular angular11 web_components_typescript
       - store_artifacts:
           path: /tmp/storybook/cypress
           destination: cypress

MIGRATION.md

@@ -167,7 +167,7 @@ Storybook 6.3 supports Angular 12 out of the box when you install it fresh. Howe
 npm install @storybook/builder-webpack5 --save-dev # or yarn
 ```
 
-The edit your `.storybook/main.js` config:
+Then edit your `.storybook/main.js` config:
 
 ```js
 module.exports = {

addons/docs/docs/docspage.md

@@ -59,15 +59,15 @@ If you're coming from the `storiesOf` format, there's [a codemod that adds it fo
 
 ## Subcomponents parameter
 
-Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `List` and `ListItem` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
+Sometimes it's useful to document multiple components on the same page. For example, suppose your component library contains `Button` and `ButtonGroup` components that don't make sense without one another. `DocsPage` has the concept of a "primary" component with the [`component` parameter](#component-parameter), and can also accept one or more "subcomponents":
 
 ```js
-import { List, ListHeading, ListItem } from './List';
+import { Button, ButtonGroup } from '../ButtonGroup';
 
 export default {
-  title: 'Path/to/List',
+  title: 'Path/to/ButtonGroup',
-  component: List,
+  component: ButtonGroup,
-  subcomponents: { ListHeading, ListItem },
+  subcomponents: { Button },
 };
 ```
 
@@ -79,7 +79,7 @@ If you want organize your documentation differently for groups of components, we
 
 ## Replacing DocsPage
 
-What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story?
+What if you don't want a `DocsPage` for your Storybook, for a specific component, or even for a specific story?
 
 You can replace DocsPage at any level by overriding the `docs.page` parameter:
 

docs/frameworks.js

@@ -111,12 +111,12 @@ module.exports = {
         },
         {
           name: 'Dynamic source',
-          supported: ['react'],
+          supported: ['react', 'vue', 'angular', 'svelte'],
           path: 'writing-docs/doc-blocks#source',
         },
         {
           name: 'Args Table',
-          supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components'],
+          supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
           path: 'writing-docs/doc-blocks#argstable',
         },
         {
@@ -126,7 +126,7 @@ module.exports = {
         },
         {
           name: 'Inline stories',
-          supported: ['react', 'vue', 'web-components', 'html', 'svelte'],
+          supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
           path: 'writing-docs/doc-blocks#inline-rendering',
         },
       ],

docs/snippets/common/badge-story.mdx.mdx

@@ -40,7 +40,7 @@ with unique URLs, which is great for review and testing.
 
 <Canvas>
   <Story name="warning" args={{
-    status: warning,
+    status: 'warning',
     label: 'Warning' 
   }}>
     {Template.bind({})}
@@ -58,7 +58,7 @@ with unique URLs, which is great for review and testing.
     {Template.bind({})}
   </Story>
   <Story name="with icon" args={{
-    status: warning, 
+    status: 'warning', 
     label: (<Icon icon="check" inline /> with icon)
   )}}>
     {Template.bind({})}

lib/cli/src/generators/ANGULAR/index.ts

@@ -33,7 +33,9 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
       'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.'
     );
   }
-  const angularVersion = semver.coerce(await packageManager.getVersion('@angular/core'))?.version;
+  const angularVersion = semver.coerce(
+    packageManager.retrievePackageJson().dependencies['@angular/core']
+  )?.version;
   const isWebpack5 = semver.gte(angularVersion, '12.0.0');
   const updatedOptions = isWebpack5 ? { ...options, builder: CoreBuilder.Webpack5 } : options;
 

lib/cli/src/js-package-manager/JsPackageManager.ts

@@ -55,6 +55,10 @@ export abstract class JsPackageManager {
     done();
   }
 
+  /**
+   * Read the `package.json` file available in the directory the command was call from
+   * If there is no `package.json` it will create one.
+   */
   public retrievePackageJson(): PackageJsonWithDepsAndDevDeps {
     let packageJson = readPackageJson();
     if (!packageJson) {
@@ -151,6 +155,15 @@ export abstract class JsPackageManager {
     return Promise.all(packageNames.map((packageName) => this.getVersion(packageName)));
   }
 
+  /**
+   * Return the latest version of the input package available on npmjs registry.
+   * If constraint are provided it return the latest version matching the constraints.
+   *
+   * For `@storybook/*` packages the latest version is retrieved from `cli/src/versions.json` file directly
+   *
+   * @param packageName The name of the package
+   * @param constraint A valid semver constraint, example: '1.x || >=2.5.0 || 5.0.0 - 7.2.3'
+   */
   public async getVersion(packageName: string, constraint?: string): Promise<string> {
     let current: string;