Merge pull request #17898 from storybookjs/future/sb-start-build

CLI: Add dev/build commands
storybookjs · Apr 26, 2022 · e6ccfd1 · e6ccfd1
2 parents 4acf6c0 + 69eec05
commit e6ccfd1
Show file tree

Hide file tree

Showing 68 changed files with 1,888 additions and 466 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -122,7 +122,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 17
+    parallelism: 16
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,5 +1,8 @@
 <h1>Migration</h1>
 
+- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
+  - [Breaking changes](#breaking-changes)
+    - [Framework field mandatory](#framework-field-mandatory)
 - [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)
@@ -198,6 +201,14 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 6.5.x to 7.0.0
+
+### Breaking changes
+
+#### Framework field mandatory
+
+In 6.4 we introduced a new `main.js` field called [`framework`](#mainjs-framework-field). Starting in 7.0, this field is mandatory.
+
 ## From version 6.4.x to 6.5.0
 
 ### React18 new root API

diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
@@ -38,10 +38,10 @@
     "*.d.ts"
   ],
   "scripts": {
-    "build-storybook": "build-storybook",
+    "build-storybook": "sb build",
     "example": "jest storyshot.test",
     "prepare": "node ../../../scripts/prepare.js",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "yarn sb dev -p 6006"
   },
   "dependencies": {
     "@jest/transform": "^26.6.2",

diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
@@ -42,5 +42,7 @@ module.exports = {
   staticDirs: ['../src/assets'],
   features: {
     buildStoriesJson: true,
+    breakingChangesV7: true,
   },
+  framework: '@storybook/angular',
 };
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
@@ -67,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",

diff --git a/...es/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/...es/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
@@ -29,60 +29,7 @@ exports[`Storyshots Core / Parameters / All parameters All parameters passed to
     "globalParameter": "globalParameter",
     "chapterParameter": "chapterParameter",
     "storyParameter": "storyParameter",
-    "__isArgsStory": true,
-    "__id": "core-parameters-all-parameters--passed-to-story",
-    "globalTypes": {
-      "theme": {
-        "name": "Theme",
-        "description": "Global theme for components",
-        "defaultValue": "light",
-        "toolbar": {
-          "icon": "paintbrush",
-          "items": [
-            {
-              "value": "light",
-              "title": "Light theme"
-            },
-            {
-              "value": "dark",
-              "title": "Dark theme"
-            }
-          ]
-        }
-      },
-      "locale": {
-        "name": "Locale",
-        "description": "Internationalization locale",
-        "defaultValue": "en",
-        "toolbar": {
-          "icon": "globe",
-          "items": [
-            {
-              "value": "en",
-              "right": "🇺🇸",
-              "title": "English"
-            },
-            {
-              "value": "es",
-              "right": "🇪🇸",
-              "title": "Español"
-            },
-            {
-              "value": "zh",
-              "right": "🇨🇳",
-              "title": "中文"
-            },
-            {
-              "value": "kr",
-              "right": "🇰🇷",
-              "title": "한국어"
-            }
-          ]
-        }
-      }
-    },
-    "args": {},
-    "argTypes": {}
+    "__isArgsStory": true
   }
     </button>
   </storybook-button-component>

diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.js
@@ -36,5 +36,7 @@ module.exports = {
   staticDirs: ['../public'],
   features: {
     buildStoriesJson: true,
+    breakingChangesV7: true,
   },
+  framework: '@storybook/react',
 };
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook",
+    "build-storybook": "sb build",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9010 --no-manager-cache",
+    "storybook": "sb dev -p 9010 --no-manager-cache",
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
@@ -34,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": {

diff --git a/examples/cra-react15/.storybook/main.js b/examples/cra-react15/.storybook/main.js
@@ -22,4 +22,5 @@ module.exports = {
     builder: 'webpack4',
   },
   staticDirs: ['../public'],
+  framework: '@storybook/react',
 };
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook",
+    "build-storybook": "sb build",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 --no-manager-cache",
+    "storybook": "sb dev -p 9009 --no-manager-cache",
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
@@ -29,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": {

diff --git a/examples/cra-ts-essentials/.storybook/main.ts b/examples/cra-ts-essentials/.storybook/main.ts
@@ -30,7 +30,8 @@ const mainConfig: StorybookConfig = {
   staticDirs: ['../public'],
   features: {
     buildStoriesJson: true,
+    breakingChangesV7: true,
   },
+  framework: '@storybook/react',
 };
-
 module.exports = mainConfig;
diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook",
+    "build-storybook": "sb build",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 --no-manager-cache",
+    "storybook": "sb dev -p 9009 --no-manager-cache",
     "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test"
   },
   "browserslist": {
@@ -44,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": {

diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts
@@ -32,5 +32,7 @@ module.exports = {
   staticDirs: ['../public'],
   features: {
     buildStoriesJson: true,
+    breakingChangesV7: true,
   },
+  framework: '@storybook/react',
 };
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "scripts": {
     "build": "react-scripts build",
-    "build-storybook": "build-storybook",
+    "build-storybook": "sb build",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
-    "storybook": "start-storybook -p 9009 --no-manager-cache",
+    "storybook": "sb dev -p 9009 --no-manager-cache",
     "test": "react-scripts test"
   },
   "browserslist": {
@@ -49,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"
   },

diff --git a/examples/ember-cli/.storybook/main.js b/examples/ember-cli/.storybook/main.js
@@ -1,4 +1,5 @@
 const path = require('path');
+
 const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin');
 
 module.exports = {
@@ -32,5 +33,7 @@ module.exports = {
   staticDirs: ['../ember-output'],
   features: {
     buildStoriesJson: true,
+    breakingChangesV7: true,
   },
+  framework: '@storybook/ember',
 };
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
@@ -4,11 +4,11 @@
   "private": true,
   "scripts": {
     "build": "ember build --output-path ember-output",
-    "build-storybook": "yarn storybook-prebuild && build-storybook",
+    "build-storybook": "yarn storybook-prebuild && sb build",
     "dev": "ember serve",
-    "storybook": "yarn build && start-storybook -p 9009 --no-manager-cache",
+    "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 & start-storybook -p 9009"
+    "storybook:dev": "yarn dev & sb dev -p 9009"
   },
   "dependencies": {
     "ember-named-blocks-polyfill": "^0.2.3",
@@ -45,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"

diff --git 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 build-storybook -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 start-storybook -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"
   }

diff --git a/examples/html-kitchen-sink/.storybook/main.js b/examples/html-kitchen-sink/.storybook/main.js
@@ -26,8 +26,8 @@ module.exports = {
   },
   features: {
     buildStoriesJson: true,
-  },
-  // Test code for built-in stories.json extraction
+    breakingChangesV7: true,
+  }, // Test code for built-in stories.json extraction
   //
   // refs: {
   //   'react-ts': {
@@ -38,4 +38,5 @@ module.exports = {
   //     // url: 'http://localhost:8080',
   //   },
   // },
+  framework: '@storybook/html',
 };
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
@@ -8,9 +8,9 @@
   "author": "",
   "main": "index.js",
   "scripts": {
-    "build-storybook": "build-storybook",
+    "build-storybook": "sb build",
     "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
-    "storybook": "start-storybook -p 9006 --no-manager-cache"
+    "storybook": "sb dev -p 9006 --no-manager-cache"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "6.5.0-beta.0",
@@ -35,7 +35,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": {

diff --git a/examples/official-storybook/main.ts b/examples/official-storybook/main.ts
@@ -1,5 +1,4 @@
 /// <reference types="node" />
-
 import type { StorybookConfig } from '@storybook/react/types';
 
 const config: StorybookConfig = {
@@ -39,12 +38,19 @@ const config: StorybookConfig = {
   features: {
     modernInlineRender: true,
     interactionsDebugger: true,
+    breakingChangesV7: true,
   },
   staticDirs: [
     './statics/public',
-    { from: './statics/examples/example1', to: '/example1' },
-    { from: './statics/examples/example2', to: '/example2' },
+    {
+      from: './statics/examples/example1',
+      to: '/example1',
+    },
+    {
+      from: './statics/examples/example2',
+      to: '/example2',
+    },
   ],
+  framework: '@storybook/react',
 };
-
 module.exports = config;
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
@@ -3,12 +3,12 @@
   "version": "6.5.0-beta.0",
   "private": true,
   "scripts": {
-    "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
-    "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./",
+    "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 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",
-    "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache",
-    "storyshots-puppeteer": "yarn run build-storybook && 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",
@@ -53,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"

diff --git a/examples/preact-kitchen-sink/.storybook/main.js b/examples/preact-kitchen-sink/.storybook/main.js
@@ -27,5 +27,7 @@ module.exports = {
   staticDirs: ['../public'],
   features: {
     buildStoriesJson: true,
+    breakingChangesV7: true,
   },
+  framework: '@storybook/preact',
 };