Merge branch 'future/base' into future/add-renderers

2025-04-05 16:11:33 +08:00 · 2022-04-26 17:56:14 +08:00 · 2022-04-26 17:56:14 +08:00 · 94272ed44b
commit 94272ed44b
parent 29dec7872f 1801a2556c
33 changed files with 1648 additions and 289 deletions
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -3,6 +3,7 @@
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
  - [Breaking changes](#breaking-changes)
    - [Framework field mandatory](#framework-field-mandatory)
+    - [frameworkOptions renamed](#frameworkoptions-renamed)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
  - [React18 new root API](#react18-new-root-api)
  - [Deprecated register.js](#deprecated-registerjs)
@ -209,6 +210,19 @@

 In 6.4 we introduced a new `main.js` field called [`framework`](#mainjs-framework-field). Starting in 7.0, this field is mandatory.

+#### frameworkOptions renamed
+
+In 7.0, the `main.js` fields `reactOptions` and `angularOptions` have been renamed. They are now options on the `framework` field:
+
+```js
+module.exports = {
+  framework: {
+    name: '@storybook/react',
+    options: { fastRefresh: true };
+  }
+}
+```
+
 ## From version 6.4.x to 6.5.0

 ### React18 new root API
--- a/app/angular/src/server/framework-preset-angular-ivy.ts
+++ b/app/angular/src/server/framework-preset-angular-ivy.ts
@ -1,7 +1,9 @@
 import { Configuration } from 'webpack';
 import * as path from 'path';
+import type { Preset } from '@storybook/core-common';

 import type { PresetOptions } from './preset-options';
+import type { AngularOptions } from '../types';

 /**
 * Source : https://github.com/angular/angular-cli/blob/ebccb5de4a455af813c5e82483db6af20666bdbd/packages/angular_devkit/build_angular/src/utils/load-esm.ts#L23
@ -48,13 +50,8 @@ export const runNgcc = async () => {
 };

 export const webpack = async (webpackConfig: Configuration, options: PresetOptions) => {
-  const angularOptions = await options.presets.apply(
-    'angularOptions',
-    {} as {
-      enableIvy?: boolean;
-    },
-    options
-  );
+  const framework = await options.presets.apply<Preset>('framework');
+  const angularOptions = (typeof framework === 'object' ? framework.options : {}) as AngularOptions;

  // Default to true, if undefined
  if (angularOptions.enableIvy === false) {
--- a/app/angular/src/types/index.ts
+++ b/app/angular/src/types/index.ts
@ -1,7 +1,17 @@
 import type { StorybookConfig as BaseConfig } from '@storybook/core-common';

-export interface StorybookConfig extends BaseConfig {
-  angularOptions?: {
-    enableIvy: boolean;
-  };
+export interface AngularOptions {
+  enableIvy: boolean;
+}
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export interface StorybookConfig extends BaseConfig {
+  framework:
+    | string
+    | {
+        name: '@storybook/angular';
+        options: AngularOptions;
+      };
 }
--- a/app/react/src/server/framework-preset-react.test.ts
+++ b/app/react/src/server/framework-preset-react.test.ts
@ -25,7 +25,10 @@ describe('framework-preset-react', () => {
    presets: {
      // @ts-ignore
      apply: async () => ({
-        fastRefresh: true,
+        name: '@storybook/react',
+        options: {
+          fastRefresh: true,
+        },
      }),
    },
    presetsList: [],
@ -36,7 +39,10 @@ describe('framework-preset-react', () => {
    presets: {
      // @ts-ignore
      apply: async () => ({
-        fastRefresh: false,
+        name: '@storybook/react',
+        options: {
+          fastRefresh: false,
+        },
      }),
    },
  };
--- a/app/react/src/server/framework-preset-react.ts
+++ b/app/react/src/server/framework-preset-react.ts
@ -4,23 +4,18 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import type { Configuration } from 'webpack';

 import { logger } from '@storybook/node-logger';
-import type { Options } from '@storybook/core-common';
+import type { Options, Preset } from '@storybook/core-common';
+import type { ReactOptions } from '../types';
+
+const useFastRefresh = async (options: Options) => {
+  const isDevelopment = options.configType === 'DEVELOPMENT';
+  const framework = await options.presets.apply<Preset>('framework');
+  const reactOptions = (typeof framework === 'object' ? framework.options : {}) as ReactOptions;
+  return isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
+};

 export async function babel(config: TransformOptions, options: Options) {
-  const isDevelopment = options.configType === 'DEVELOPMENT';
-  const reactOptions = await options.presets.apply(
-    'reactOptions',
-    {} as {
-      fastRefresh?: boolean;
-    },
-    options
-  );
-  const fastRefreshEnabled =
-    isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
-
-  if (!fastRefreshEnabled) {
-    return config;
-  }
+  if (!(await useFastRefresh(options))) return config;

  return {
    ...config,
@ -59,20 +54,8 @@ export async function babelDefault(config: TransformOptions): Promise<TransformO
 }

 export async function webpackFinal(config: Configuration, options: Options) {
-  const isDevelopment = options.configType === 'DEVELOPMENT';
-  const reactOptions = await options.presets.apply(
-    'reactOptions',
-    {} as {
-      fastRefresh?: boolean;
-    },
-    options
-  );
-  const fastRefreshEnabled =
-    isDevelopment && (reactOptions.fastRefresh || process.env.FAST_REFRESH === 'true');
+  if (!(await useFastRefresh(options))) return config;

-  if (!fastRefreshEnabled) {
-    return config;
-  }
  // matches the name of the plugin in CRA.
  const hasReactRefresh = config.plugins.find((p) => p.constructor.name === 'ReactRefreshPlugin');

--- a/app/react/src/types/index.ts
+++ b/app/react/src/types/index.ts
@ -0,0 +1,26 @@
+import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
+
+export interface ReactOptions {
+  fastRefresh?: boolean;
+  strictMode?: boolean;
+  /**
+   * Use React's legacy root API to mount components
+   * @description
+   * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. concurrent features)
+   * If this flag is true, the legacy Root API is used to mount components to make it easier to migrate step by step to React 18.
+   * @default false
+   */
+  legacyRootApi?: boolean;
+}
+
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+export interface StorybookConfig extends BaseConfig {
+  framework:
+    | string
+    | {
+        name: '@storybook/react';
+        options: ReactOptions;
+      };
+}
--- a/app/react/types.d.ts
+++ b/app/react/types.d.ts
@ -0,0 +1 @@
+export * from './dist/ts3.9/types/index.d';
--- a/app/react/types/index.ts
+++ b/app/react/types/index.ts
@ -1,19 +0,0 @@
-import type { StorybookConfig as BaseConfig } from '@storybook/core-common';
-
-/**
- * The interface for Storybook configuration in `main.ts` files.
- */
-export interface StorybookConfig extends BaseConfig {
-  reactOptions?: {
-    fastRefresh?: boolean;
-    strictMode?: boolean;
-    /**
-     * Use React's legacy root API to mount components
-     * @description
-     * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. concurrent features)
-     * If this flag is true, the legacy Root API is used to mount components to make it easier to migrate step by step to React 18.
-     * @default false
-     */
-    legacyRootApi?: boolean;
-  };
-}
--- a/app/vue3/package.json
+++ b/app/vue3/package.json
@ -30,7 +30,6 @@
    }
  },
  "files": [
-    "bin/**/*",
    "dist/**/*",
    "README.md",
    "*.js",
--- a/docs/faq.md
+++ b/docs/faq.md
@ -16,8 +16,11 @@ module.exports = {
  addons: [
    /* ... */
  ],
-  angularOptions: {
-    enableIvy: false,
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableIvy: false,
+    },
  },
 };
 ```
@ -73,8 +76,11 @@ FAST_REFRESH=true

 ```js
 module.exports = {
-  reactOptions: {
-    fastRefresh: true,
+  framework: {
+    name: '@storybook/react',
+    options: {
+      fastRefresh: true,
+    },
  },
 };
 ```
@ -145,8 +151,8 @@ With the release of version 6.0, we updated our documentation as well. That does

 We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.

-| Section          | Page                                      | Current Location                                                                   | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
-|------------------|-------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Section          | Page                                      | Current Location                                                                  | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
+| ---------------- | ----------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Get started      | Install                                   | [See current documentation](./get-started/install.md)                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide)                         |
 |                  | What's a story                            | [See current documentation](./get-started/whats-a-story.md)                       | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
 |                  | Browse Stories                            | [See current documentation](./get-started/browse-stories.md)                      | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
@ -161,7 +167,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
 |                  | MDX                                       | [See current documentation](./writing-docs/mdx.md)                                | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Argstable                      | [See current documentation](./writing-docs/doc-block-argstable.md)                | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Canvas                         | [See current documentation](./writing-docs/doc-block-canvas.md)                   | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Color Palette                  | [See current documentation](./writing-docs/doc-block-colorpalette.md)                          | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Color Palette                  | [See current documentation](./writing-docs/doc-block-colorpalette.md)             | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Description                    | [See current documentation](./writing-docs/doc-block-description.md)              | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Icon Gallery                   | [See current documentation](./writing-docs/doc-block-icongallery.md)              | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
 |                  | Doc Blocks/Source                         | [See current documentation](./writing-docs/doc-block-source.md)                   | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
@ -203,9 +209,10 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
 |                  | Addons API                                | [See current documentation](./addons/addons-api.md)                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api)                                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api)                                       |
 | API              | Stories/Component Story Format            | [See current documentation](./api/csf.md)                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format)                                                                                                                               | Non existing feature or undocumented                                                                                                                     |
 |                  | Stories/MDX syntax                        | [See current documentation](./api/mdx.md)                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax)                                                                                                                                           | Non existing feature or undocumented                                                                                                                     |
-|                  | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md)                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api)                                                                                                                                        | Non existing feature or undocumented                                                                                                                     |
+|                  | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md)                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api)                                                                                                                                        | Non existing feature or undocumented                                                                                                                     |
 |                  | Frameworks                                | [See current documentation](./api/new-frameworks.md)                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
 |                  | CLI options                               | [See current documentation](./api/cli-options.md)                                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |
+
 <div class="aside">
 With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
 </div>
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@ -17,9 +17,6 @@ module.exports = {
  core: {
    builder: 'webpack4',
  },
-  angularOptions: {
-    enableIvy: true,
-  },
  // These are just here to test composition. They could be added to any storybook example project
  refs: {
    react: {
@ -44,5 +41,10 @@ module.exports = {
    buildStoriesJson: true,
    breakingChangesV7: true,
  },
-  framework: '@storybook/angular',
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableIvy: true,
+    },
+  },
 };
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@ -10,7 +10,6 @@
    "e2e": "ng e2e",
    "postinstall": "ngcc --source ../../node_modules",
    "ng": "ng",
-    "sb": "node ../../lib/cli/bin/index.js",
    "start": "ng serve",
    "storybook": "yarn storybook-prebuild && ng run angular-cli:storybook",
    "storybook-prebuild": "yarn test:generate-output",
@ -68,6 +67,7 @@
    "jest": "^26.6.3",
    "jest-preset-angular": "^8.3.2",
    "protractor": "~7.0.0",
+    "sb": "6.5.0-beta.0",
    "storybook-addon-angular-ivy": "^0.0.1",
    "ts-jest": "^26.4.4",
    "ts-node": "^9.1.0",
--- a/examples/cra-kitchen-sink/.storybook/main.js
+++ b/examples/cra-kitchen-sink/.storybook/main.js
@ -3,9 +3,6 @@ const path = require('path');
 module.exports = {
  stories: ['../src/stories/**/*.stories.@(js|mdx)'],
  logLevel: 'debug',
-  reactOptions: {
-    fastRefresh: true,
-  },
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-ie11',
@ -38,5 +35,8 @@ module.exports = {
    buildStoriesJson: true,
    breakingChangesV7: true,
  },
-  framework: '@storybook/react',
+  framework: {
+    name: '@storybook/react',
+    options: { fastRefresh: true },
+  },
 };
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@ -6,9 +6,8 @@
    "build": "react-scripts build",
    "build-storybook": "sb build",
    "eject": "react-scripts eject",
-    "sb": "node ../../lib/cli/bin/index.js",
    "start": "react-scripts start",
-    "storybook": "yarn sb dev -p 9010 --no-manager-cache",
+    "storybook": "sb dev -p 9010 --no-manager-cache",
    "test": "react-scripts test --env=jsdom"
  },
  "dependencies": {
@ -35,6 +34,7 @@
    "@storybook/preset-create-react-app": "^3.1.6",
    "@storybook/react": "6.5.0-beta.0",
    "@storybook/theming": "6.5.0-beta.0",
+    "sb": "6.5.0-beta.0",
    "webpack": "4"
  },
  "storybook": {
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@ -6,9 +6,8 @@
    "build": "react-scripts build",
    "build-storybook": "sb build",
    "eject": "react-scripts eject",
-    "sb": "node ../../lib/cli/bin/index.js",
    "start": "react-scripts start",
-    "storybook": "yarn sb dev -p 9009 --no-manager-cache",
+    "storybook": "sb dev -p 9009 --no-manager-cache",
    "test": "react-scripts test --env=jsdom"
  },
  "dependencies": {
@ -30,6 +29,7 @@
    "@storybook/theming": "6.5.0-beta.0",
    "babel-core": "6",
    "babel-runtime": "6",
+    "sb": "6.5.0-beta.0",
    "webpack": "4"
  },
  "storybook": {
--- a/examples/cra-ts-essentials/package.json
+++ b/examples/cra-ts-essentials/package.json
@ -6,9 +6,8 @@
    "build": "react-scripts build",
    "build-storybook": "sb build",
    "eject": "react-scripts eject",
-    "sb": "node ../../lib/cli/bin/index.js",
    "start": "react-scripts start",
-    "storybook": "yarn sb dev -p 9009 --no-manager-cache",
+    "storybook": "sb dev -p 9009 --no-manager-cache",
    "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test"
  },
  "browserslist": {
@ -45,6 +44,7 @@
    "@storybook/preset-create-react-app": "^3.1.6",
    "@storybook/react": "6.5.0-beta.0",
    "@storybook/testing-library": "^0.0.9",
+    "sb": "6.5.0-beta.0",
    "webpack": "4"
  },
  "storybook": {
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@ -6,9 +6,8 @@
    "build": "react-scripts build",
    "build-storybook": "sb build",
    "eject": "react-scripts eject",
-    "sb": "node ../../lib/cli/bin/index.js",
    "start": "react-scripts start",
-    "storybook": "yarn sb dev -p 9009 --no-manager-cache",
+    "storybook": "sb dev -p 9009 --no-manager-cache",
    "test": "react-scripts test"
  },
  "browserslist": {
@ -50,6 +49,7 @@
    "enzyme-to-json": "^3.6.1",
    "fork-ts-checker-webpack-plugin": "^6.0.4",
    "react-moment-proptypes": "^1.7.0",
+    "sb": "6.5.0-beta.0",
    "ts-node": "^9.1.0",
    "webpack": "4"
  },
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@ -6,10 +6,9 @@
    "build": "ember build --output-path ember-output",
    "build-storybook": "yarn storybook-prebuild && sb build",
    "dev": "ember serve",
-    "sb": "node ../../lib/cli/bin/index.js",
    "storybook": "yarn build && yarn sb dev -p 9009 --no-manager-cache",
    "storybook-prebuild": "yarn build && shx cp -r public/* ember-output",
-    "storybook:dev": "yarn dev & yarn sb dev -p 9009"
+    "storybook:dev": "yarn dev & sb dev -p 9009"
  },
  "dependencies": {
    "ember-named-blocks-polyfill": "^0.2.3",
@ -46,6 +45,7 @@
    "ember-resolver": "^7.0.0",
    "ember-source": "~3.24.0",
    "loader.js": "^4.7.0",
+    "sb": "6.5.0-beta.0",
    "shx": "^0.3.2",
    "webpack": "4",
    "webpack-cli": "^4.2.0"
--- a/examples/external-docs/package.json
+++ b/examples/external-docs/package.json
@ -3,11 +3,10 @@
  "version": "6.5.0-beta.0",
  "private": true,
  "scripts": {
-    "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb build -c ./src/.storybook",
+    "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build -c ./src/.storybook",
    "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011",
-    "sb": "node ../../lib/cli/bin/index.js",
    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb dev -p 9011 --no-manager-cache -c ./src/.storybook"
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev -p 9011 --no-manager-cache -c ./src/.storybook"
  },
  "dependencies": {
    "@storybook/addon-essentials": "6.5.0-beta.0",
@ -33,6 +32,7 @@
    "@types/react": "^16.14.23",
    "@types/react-dom": "^16.9.14",
    "cross-env": "^7.0.3",
+    "sb": "6.5.0-beta.0",
    "typescript": "^3.9.7",
    "webpack": "4"
  }
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@ -10,8 +10,7 @@
  "scripts": {
    "build-storybook": "sb build",
    "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
-    "sb": "node ../../lib/cli/bin/index.js",
-    "storybook": "yarn sb dev -p 9006 --no-manager-cache"
+    "storybook": "sb dev -p 9006 --no-manager-cache"
  },
  "devDependencies": {
    "@storybook/addon-a11y": "6.5.0-beta.0",
@ -35,7 +34,8 @@
    "format-json": "^1.0.3",
    "global": "^4.4.0",
    "postcss": "^8.2.4",
-    "postcss-color-rebeccapurple": "^6.0.0"
+    "postcss-color-rebeccapurple": "^6.0.0",
+    "sb": "6.5.0-beta.0"
  },
  "storybook": {
    "chromatic": {
--- a/examples/official-storybook/main.ts
+++ b/examples/official-storybook/main.ts
@ -10,10 +10,6 @@ const config: StorybookConfig = {
    './../../addons/docs/**/*.stories.tsx',
    './../../addons/interactions/**/*.stories.(tsx|mdx)',
  ],
-  reactOptions: {
-    fastRefresh: true,
-    strictMode: true,
-  },
  addons: [
    {
      name: '@storybook/addon-docs',
@ -51,6 +47,12 @@ const config: StorybookConfig = {
      to: '/example2',
    },
  ],
-  framework: '@storybook/react',
+  framework: {
+    name: '@storybook/react',
+    options: {
+      fastRefresh: true,
+      strictMode: true,
+    },
+  },
 };
 module.exports = config;
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@ -4,12 +4,11 @@
  "private": true,
  "scripts": {
    "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build -c ./",
-    "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb dev -p 9011 -c ./",
+    "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev -p 9011 -c ./",
    "do-storyshots-puppeteer": "../../node_modules/.bin/jest --projects=./storyshots-puppeteer",
    "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
-    "sb": "node ../../lib/cli/bin/index.js",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb dev -p 9011 -c ./ --no-manager-cache",
-    "storyshots-puppeteer": "yarn run sb build && yarn run do-storyshots-puppeteer"
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev -p 9011 -c ./ --no-manager-cache",
+    "storyshots-puppeteer": "sb build && yarn run do-storyshots-puppeteer"
  },
  "devDependencies": {
    "@emotion/jest": "^11.8.0",
@ -54,6 +53,7 @@
    "prop-types": "^15.7.2",
    "react": "16.14.0",
    "react-dom": "16.14.0",
+    "sb": "6.5.0-beta.0",
    "terser-webpack-plugin": "^5.0.3",
    "uuid-browser": "^3.1.0",
    "webpack": "4"
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@ -6,8 +6,7 @@
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "build-storybook": "sb build",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "sb": "node ../../lib/cli/bin/index.js",
-    "storybook": "yarn sb dev -p 9009 --no-manager-cache"
+    "storybook": "sb dev -p 9009 --no-manager-cache"
  },
  "dependencies": {
    "global": "^4.4.0",
@ -38,6 +37,7 @@
    "raw-loader": "^4.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "sb": "6.5.0-beta.0",
    "svg-url-loader": "^7.1.1",
    "webpack": "4",
    "webpack-dev-server": "^3.11.2"
--- a/examples/react-ts/package.json
+++ b/examples/react-ts/package.json
@ -5,8 +5,7 @@
  "scripts": {
    "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build",
    "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb dev -p 9011",
-    "sb": "node ../../lib/cli/bin/index.js",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb dev --no-manager-cache"
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev --no-manager-cache"
  },
  "dependencies": {
    "formik": "^2.2.9",
@ -32,6 +31,7 @@
    "@types/react": "^16.14.23",
    "@types/react-dom": "^16.9.14",
    "cross-env": "^7.0.3",
+    "sb": "6.5.0-beta.0",
    "typescript": "^3.9.7",
    "webpack": "4"
  }
--- a/examples/server-kitchen-sink/package.json
+++ b/examples/server-kitchen-sink/package.json
@ -9,10 +9,9 @@
  "main": "index.js",
  "scripts": {
    "build-storybook": "sb build",
-    "sb": "node ../../lib/cli/bin/index.js",
    "server": "PORT=1337 nodemon server.js",
    "start": "concurrently \"yarn server\" \"yarn storybook\"",
-    "storybook": "SERVER_PORT=1137 yarn sb dev -p 9006 --quiet"
+    "storybook": "SERVER_PORT=1137 sb dev -p 9006 --quiet"
  },
  "devDependencies": {
    "@storybook/addon-a11y": "6.5.0-beta.0",
@ -28,6 +27,7 @@
    "morgan": "^1.10.0",
    "nodemon": "^2.0.7",
    "pug": "^3.0.0",
-    "safe-identifier": "^0.4.1"
+    "safe-identifier": "^0.4.1",
+    "sb": "6.5.0-beta.0"
  }
 }
--- a/examples/standalone-preview/package.json
+++ b/examples/standalone-preview/package.json
@ -3,8 +3,7 @@
  "version": "6.5.0-beta.0",
  "private": true,
  "scripts": {
-    "sb": "node ../../lib/cli/bin/index.js",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true yarn sb dev -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
+    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
    "storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
  },
  "devDependencies": {
@ -14,6 +13,7 @@
    "cross-env": "^7.0.3",
    "parcel": "2.0.1",
    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react-dom": "16.14.0",
+    "sb": "6.5.0-beta.0"
  }
 }
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@ -4,8 +4,7 @@
  "private": true,
  "scripts": {
    "build-storybook": "sb build",
-    "sb": "node ../../lib/cli/bin/index.js",
-    "storybook": "yarn sb dev -p 9009 --no-manager-cache"
+    "storybook": "sb dev -p 9009 --no-manager-cache"
  },
  "dependencies": {
    "global": "^4.4.0"
@ -26,6 +25,7 @@
    "@storybook/source-loader": "6.5.0-beta.0",
    "@storybook/svelte": "6.5.0-beta.0",
    "@storybook/testing-library": "^0.0.7",
+    "sb": "6.5.0-beta.0",
    "svelte-jester": "1.3.0",
    "svelte-preprocess": "4.6.8"
  },
--- a/examples/vue-3-cli/package.json
+++ b/examples/vue-3-cli/package.json
@ -5,9 +5,8 @@
  "scripts": {
    "build": "vue-cli-service build",
    "build-storybook": "sb build",
-    "sb": "node ../../lib/cli/bin/index.js",
    "serve": "vue-cli-service serve",
-    "storybook": "yarn sb dev -p 6006 --no-manager-cache"
+    "storybook": "sb dev -p 6006 --no-manager-cache"
  },
  "dependencies": {
    "core-js": "^3.8.2",
@ -28,6 +27,7 @@
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-loader": "^8.0.0",
+    "sb": "6.5.0-beta.0",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-alpha.8",
    "vue-loader": "^16.1.2"
--- a/examples/vue-cli/package.json
+++ b/examples/vue-cli/package.json
@ -5,9 +5,8 @@
  "scripts": {
    "build": "vue-cli-service build",
    "build-storybook": "sb build",
-    "sb": "node ../../lib/cli/bin/index.js",
    "serve": "vue-cli-service serve",
-    "storybook": "yarn sb dev -p 9009 --no-manager-cache"
+    "storybook": "sb dev -p 9009 --no-manager-cache"
  },
  "dependencies": {
    "core-js": "^3.8.2",
@ -24,6 +23,7 @@
    "@vue/cli-plugin-babel": "~4.3.1",
    "@vue/cli-plugin-typescript": "~4.3.1",
    "@vue/cli-service": "~4.3.1",
+    "sb": "6.5.0-beta.0",
    "typescript": "^3.9.7",
    "vue-template-compiler": "^2.6.12"
  }
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@ -6,8 +6,7 @@
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "build-storybook": "sb build",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "sb": "node ../../lib/cli/bin/index.js",
-    "storybook": "yarn sb dev -p 9009 --no-manager-cache"
+    "storybook": "sb dev -p 9009 --no-manager-cache"
  },
  "dependencies": {
    "vue": "^2.6.12",
@ -35,6 +34,7 @@
    "cross-env": "^7.0.3",
    "file-loader": "^6.2.0",
    "prop-types": "^15.7.2",
+    "sb": "6.5.0-beta.0",
    "svg-url-loader": "^7.1.1",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
--- a/examples/web-components-kitchen-sink/package.json
+++ b/examples/web-components-kitchen-sink/package.json
@ -10,8 +10,7 @@
  "scripts": {
    "build-storybook": "sb build",
    "generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\" --exclude \"./storybook-static\"",
-    "sb": "node ../../lib/cli/bin/index.js",
-    "storybook": "yarn sb dev -p 9006 --no-manager-cache"
+    "storybook": "sb dev -p 9006 --no-manager-cache"
  },
  "resolutions": {
    "@storybook/addon-a11y": "portal:../../addons/a11y",
@ -57,6 +56,7 @@
    "@storybook/web-components": "portal:../../app/web-components",
    "babel-plugin-macros": "3.1.0",
    "fork-ts-checker-webpack-plugin": "6.2.13",
+    "sb": "portal:../../lib/cli-sb",
    "typescript": "4.2.4"
  },
  "dependencies": {
@ -77,6 +77,7 @@
    "@storybook/web-components": "*",
    "global": "^4.4.0",
    "jest": "^27.3.1",
+    "sb": "*",
    "typescript": "4.2.4"
  },
  "customElements": "custom-elements.json",
--- a/examples/web-components-kitchen-sink/yarn.lock
+++ b/examples/web-components-kitchen-sink/yarn.lock
--- a/yarn.lock
+++ b/yarn.lock
@ -8010,6 +8010,7 @@ __metadata:
    prop-types: 15.7.2
    react: 16.14.0
    react-dom: 16.14.0
+    sb: 6.5.0-beta.0
    typescript: ^3.9.7
    webpack: 4
  languageName: unknown
@ -8049,6 +8050,7 @@ __metadata:
    react: 16.14.0
    react-dom: 16.14.0
    react-scripts: ^4.0.2
+    sb: 6.5.0-beta.0
    typescript: ^3.9.7
    webpack: 4
  languageName: unknown
@ -13159,6 +13161,7 @@ __metadata:
    protractor: ~7.0.0
    rxjs: ^6.6.3
    sass: ^1.43.4
+    sb: 6.5.0-beta.0
    storybook-addon-angular-ivy: ^0.0.1
    telejson: ^5.3.3
    ts-jest: ^26.4.4
@ -18225,6 +18228,7 @@ __metadata:
    react-dom: 16.14.0
    react-lifecycles-compat: ^3.0.4
    react-scripts: ^4.0.2
+    sb: 6.5.0-beta.0
    webpack: 4
  languageName: unknown
  linkType: soft
@ -18249,6 +18253,7 @@ __metadata:
    react: ^15.7.0
    react-dom: ^15.7.0
    react-scripts: 3.4.4
+    sb: 6.5.0-beta.0
    webpack: 4
  languageName: unknown
  linkType: soft
@ -18275,6 +18280,7 @@ __metadata:
    react: 16.14.0
    react-dom: 16.14.0
    react-scripts: ^4.0.2
+    sb: 6.5.0-beta.0
    typescript: ^3.9.7
    webpack: 4
  languageName: unknown
@ -18307,6 +18313,7 @@ __metadata:
    react-dom: 16.14.0
    react-moment-proptypes: ^1.7.0
    react-scripts: ^4.0.2
+    sb: 6.5.0-beta.0
    ts-node: ^9.1.0
    typescript: ^3.9.7
    webpack: 4
@ -20726,6 +20733,7 @@ __metadata:
    ember-source: ~3.24.0
    ember-template-compiler: ^1.9.0-alpha
    loader.js: ^4.7.0
+    sb: 6.5.0-beta.0
    shx: ^0.3.2
    webpack: 4
    webpack-cli: ^4.2.0
@ -25420,6 +25428,7 @@ __metadata:
    global: ^4.4.0
    postcss: ^8.2.4
    postcss-color-rebeccapurple: ^6.0.0
+    sb: 6.5.0-beta.0
  languageName: unknown
  linkType: soft

@ -34129,6 +34138,7 @@ __metadata:
    prop-types: ^15.7.2
    react: 16.14.0
    react-dom: 16.14.0
+    sb: 6.5.0-beta.0
    terser-webpack-plugin: ^5.0.3
    uuid-browser: ^3.1.0
    webpack: 4
@ -36912,6 +36922,7 @@ __metadata:
    raw-loader: ^4.0.2
    react: ^17.0.2
    react-dom: ^17.0.2
+    sb: 6.5.0-beta.0
    svg-url-loader: ^7.1.1
    webpack: 4
    webpack-dev-server: ^3.11.2
@ -40900,7 +40911,7 @@ __metadata:
  languageName: node
  linkType: hard

-"sb@workspace:lib/cli-sb":
+"sb@6.5.0-beta.0, sb@workspace:lib/cli-sb":
  version: 0.0.0-use.local
  resolution: "sb@workspace:lib/cli-sb"
  dependencies:
@ -41242,6 +41253,7 @@ __metadata:
    nodemon: ^2.0.7
    pug: ^3.0.0
    safe-identifier: ^0.4.1
+    sb: 6.5.0-beta.0
  languageName: unknown
  linkType: soft

@ -42199,6 +42211,7 @@ __metadata:
    parcel: 2.0.1
    react: 16.14.0
    react-dom: 16.14.0
+    sb: 6.5.0-beta.0
  languageName: unknown
  linkType: soft

@ -43027,6 +43040,7 @@ __metadata:
    "@storybook/svelte": 6.5.0-beta.0
    "@storybook/testing-library": ^0.0.7
    global: ^4.4.0
+    sb: 6.5.0-beta.0
    svelte-jester: 1.3.0
    svelte-preprocess: 4.6.8
  languageName: unknown
@ -45944,6 +45958,7 @@ __metadata:
    "@vue/compiler-sfc": ^3.0.0
    babel-loader: ^8.0.0
    core-js: ^3.8.2
+    sb: 6.5.0-beta.0
    typescript: ~3.9.3
    vue: ^3.0.0
    vue-jest: ^5.0.0-alpha.8
@ -45973,6 +45988,7 @@ __metadata:
    "@vue/cli-plugin-typescript": ~4.3.1
    "@vue/cli-service": ~4.3.1
    core-js: ^3.8.2
+    sb: 6.5.0-beta.0
    typescript: ^3.9.7
    vue: ^2.6.12
    vue-class-component: ^7.2.6
@ -46040,6 +46056,7 @@ __metadata:
    cross-env: ^7.0.3
    file-loader: ^6.2.0
    prop-types: ^15.7.2
+    sb: 6.5.0-beta.0
    svg-url-loader: ^7.1.1
    vue: ^2.6.12
    vue-loader: ^15.9.6