From 0c0a21b030ebf1329448a25d0a043a5c728de6a3 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 30 May 2022 09:42:03 +0200 Subject: [PATCH 01/26] chore: clean verdaccio cache when running locally --- scripts/run-registry.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts index 1c4a38078229..313c828afda8 100755 --- a/scripts/run-registry.ts +++ b/scripts/run-registry.ts @@ -1,4 +1,5 @@ import { exec } from 'child_process'; +import { remove, pathExists } from 'fs-extra'; import chalk from 'chalk'; import path from 'path'; import program from 'commander'; @@ -176,6 +177,16 @@ const run = async () => { logger.log(`📐 reading version of storybook`); logger.log(`🚛 listing storybook packages`); + + if (!process.env.CI) { + // when running e2e locally, clear cache to avoid EPUBLISHCONFLICT errors + const verdaccioCache = path.resolve(__dirname, '..', '.verdaccio-cache'); + if (await pathExists(verdaccioCache)) { + logger.log(`🗑 cleaning up cache`); + await remove(verdaccioCache); + } + } + logger.log(`🎬 starting verdaccio (this takes ±5 seconds, so be patient)`); const [verdaccioServer, packages, version] = await Promise.all([ From 0facbafafc12ff72630f3414ba111d4b6f9dd2dc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 30 May 2022 18:19:40 +0200 Subject: [PATCH 02/26] docs(README): update version badges --- README.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 0472ab5a1acf..df9b875b9e3f 100644 --- a/README.md +++ b/README.md @@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c

View README for:
- latest - next + latest + next

## Table of contents @@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story ### Supported Frameworks -| Framework | Demo | | -| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react) | -| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue) | -| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular) | -| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components.svg)](app/web-components) | -| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](https://github.com/storybookjs/react-native) | -| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html) | -| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember) | -| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte) | -| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact) | -| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](https://github.com/storybookjs/marionette) | -| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) | +| Framework | Demo | | +| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| [React](app/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](app/react) | +| [Vue](app/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](app/vue) | +| [Angular](app/angular) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](app/angular) | +| [Web components](app/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](app/web-components) | +| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) | +| [HTML](app/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](app/html) | +| [Ember](app/ember) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](app/ember) | +| [Svelte](app/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](app/svelte) | +| [Preact](app/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](app/preact) | +| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) | +| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | ### Sub Projects From 3f0ebf670252a910a2bea9377c1f83315a7142f9 Mon Sep 17 00:00:00 2001 From: joshwooding <12938082+joshwooding@users.noreply.github.com> Date: Tue, 31 May 2022 00:37:48 +0100 Subject: [PATCH 03/26] Fix prebundle script on Windows --- scripts/bundle-package.ts | 6 +----- scripts/dts-localize.ts | 5 +++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/scripts/bundle-package.ts b/scripts/bundle-package.ts index 6ac070fc99bf..2c5c24c950f0 100644 --- a/scripts/bundle-package.ts +++ b/scripts/bundle-package.ts @@ -169,11 +169,7 @@ async function dts({ input, externals, cwd, ...options }: Options) { // await fs.remove(path.join(cwd, 'dist/ts-tmp')); - await execa('node', [ - path.join(__dirname, '../node_modules/.bin/downlevel-dts'), - 'dist/ts3.9', - 'dist/ts3.4', - ]); + await execa.command('yarn run -T downlevel-dts dist/ts3.9 dist/ts3.4'); } } diff --git a/scripts/dts-localize.ts b/scripts/dts-localize.ts index 09ca664d7ffc..f3b558903147 100644 --- a/scripts/dts-localize.ts +++ b/scripts/dts-localize.ts @@ -2,6 +2,7 @@ import path from 'path'; import fs from 'fs-extra'; import { sync } from 'read-pkg-up'; +import slash from 'slash'; import * as ts from 'typescript'; @@ -81,7 +82,7 @@ export const run = async (entrySourceFiles: string[], outputPath: string, option const replaceRemapping = new Map(); entrySourceFiles.forEach((file) => { - const sourceFile = sourceFiles.find((f) => f.fileName === file); + const sourceFile = sourceFiles.find((f) => f.fileName === slash(file)); actOnSourceFile(sourceFile); }); @@ -103,7 +104,7 @@ export const run = async (entrySourceFiles: string[], outputPath: string, option ../../node_modules/packagename/node_modules/b/dist/dir/file.ts => _modules/packagename-node_modules-b-dist-dir-file.ts ./node_modules/packagename/dist/dir/file.ts => _modules/packagename-dist-dir-file.ts ./dist/ts-tmp/file.ts => file.ts - + */ if (relative.includes('node_modules/')) { From 294b1cc8eddc8c234939eb678d5a4c61c610d671 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 31 May 2022 13:06:09 +0200 Subject: [PATCH 04/26] Vue: export applyDecorators for storyStoreV7 --- app/vue/src/client/preview/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/vue/src/client/preview/config.ts b/app/vue/src/client/preview/config.ts index 036f51eba182..759c77b9abeb 100644 --- a/app/vue/src/client/preview/config.ts +++ b/app/vue/src/client/preview/config.ts @@ -1,4 +1,4 @@ export { render, renderToDOM } from './render'; -export { decorateStory } from './decorateStory'; +export { decorateStory as applyDecorators } from './decorateStory'; export const parameters = { framework: 'vue' }; From fcb61e10a3fb0ef5c59137c09c7766699a309b14 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 31 May 2022 13:06:35 +0200 Subject: [PATCH 05/26] Vue3: export applyDecorators for storyStoreV7 --- app/vue3/src/client/preview/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/vue3/src/client/preview/config.ts b/app/vue3/src/client/preview/config.ts index 69f6b3b8683e..589efca6a13f 100644 --- a/app/vue3/src/client/preview/config.ts +++ b/app/vue3/src/client/preview/config.ts @@ -1,4 +1,4 @@ export { render, renderToDOM } from './render'; -export { decorateStory } from './decorateStory'; +export { decorateStory as applyDecorators } from './decorateStory'; export const parameters = { framework: 'vue3' }; From 68458171bffc4824c358fc242f4d2c721de16a06 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 31 May 2022 13:52:38 +0200 Subject: [PATCH 06/26] chore(storybook): upgrade vue examples to use storyStoreV7 --- examples/vue-3-cli/.storybook/main.js | 1 + examples/vue-cli/.storybook/main.js | 1 + examples/vue-kitchen-sink/.storybook/main.js | 1 + 3 files changed, 3 insertions(+) diff --git a/examples/vue-3-cli/.storybook/main.js b/examples/vue-3-cli/.storybook/main.js index 5858049fd74c..0699c40dfc40 100644 --- a/examples/vue-3-cli/.storybook/main.js +++ b/examples/vue-3-cli/.storybook/main.js @@ -10,6 +10,7 @@ module.exports = { disableTelemetry: true, }, features: { + storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'), buildStoriesJson: true, channelOptions: { allowFunction: false, maxDepth: 10 }, }, diff --git a/examples/vue-cli/.storybook/main.js b/examples/vue-cli/.storybook/main.js index 742a7b1d5ab4..e80616cd0d8f 100644 --- a/examples/vue-cli/.storybook/main.js +++ b/examples/vue-cli/.storybook/main.js @@ -13,6 +13,7 @@ module.exports = { disableTelemetry: true, }, features: { + storyStoreV7: true, buildStoriesJson: true, }, }; diff --git a/examples/vue-kitchen-sink/.storybook/main.js b/examples/vue-kitchen-sink/.storybook/main.js index eb7979f07f20..6068e3c04089 100644 --- a/examples/vue-kitchen-sink/.storybook/main.js +++ b/examples/vue-kitchen-sink/.storybook/main.js @@ -20,5 +20,6 @@ module.exports = { staticDirs: ['../public'], features: { buildStoriesJson: true, + storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'), }, }; From 22fff177ae67952263afbc8c6c6430e7f76b4b27 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 31 May 2022 16:09:45 +0200 Subject: [PATCH 07/26] chore(vue-kitchen-sink): update example with older syntax --- examples/vue-kitchen-sink/.storybook/preview.js | 1 + examples/vue-kitchen-sink/src/stories/core.stories.js | 9 ++------- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/examples/vue-kitchen-sink/.storybook/preview.js b/examples/vue-kitchen-sink/.storybook/preview.js index 65ca5b85929d..9f879a2bad57 100644 --- a/examples/vue-kitchen-sink/.storybook/preview.js +++ b/examples/vue-kitchen-sink/.storybook/preview.js @@ -10,4 +10,5 @@ export const parameters = { docs: { iframeHeight: '60px', }, + globalParameter: 'globalParameter', }; diff --git a/examples/vue-kitchen-sink/src/stories/core.stories.js b/examples/vue-kitchen-sink/src/stories/core.stories.js index 7f328fe356ed..ab20c8286818 100644 --- a/examples/vue-kitchen-sink/src/stories/core.stories.js +++ b/examples/vue-kitchen-sink/src/stories/core.stories.js @@ -1,15 +1,10 @@ -import { addParameters } from '@storybook/vue'; - -const globalParameter = 'globalParameter'; -const chapterParameter = 'chapterParameter'; +const componentParameter = 'componentParameter'; const storyParameter = 'storyParameter'; -addParameters({ globalParameter }); - export default { title: 'Core/Parameters', parameters: { - chapterParameter, + componentParameter, }, }; From ea2a136d4db5af0c1e508a72db1d897ab58e5909 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 31 May 2022 17:34:12 +0200 Subject: [PATCH 08/26] update snapshots --- .../src/stories/__snapshots__/core.stories.storyshot | 4 ++-- .../stories/__snapshots__/custom-decorators.stories.storyshot | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot index c6f10f6e74ef..79adbe9aa5b8 100644 --- a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot @@ -8,9 +8,9 @@ exports[`Storyshots Core/Parameters passed to story 1`] = ` "docs": { "iframeHeight": "60px" }, - "framework": "vue", "globalParameter": "globalParameter", - "chapterParameter": "chapterParameter", + "framework": "vue", + "componentParameter": "componentParameter", "storyParameter": "storyParameter", "__isArgsStory": true, "__id": "core-parameters--passed-to-story", diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot index 037ca9020eee..0be37ed065fa 100644 --- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot +++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot @@ -53,8 +53,8 @@ exports[`Storyshots Custom/Decorator for Vue With Data 1`] = ` "docs": { "iframeHeight": "60px" }, - "framework": "vue", "globalParameter": "globalParameter", + "framework": "vue", "__isArgsStory": true, "__id": "custom-decorator-for-vue--with-data", "args": {}, From 2a3ef9a3d20f69c8dd449f6a5a45aab236d27f79 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 31 May 2022 18:19:16 +0100 Subject: [PATCH 09/26] Updates to docs for better UX --- docs/addons/writing-addons.md | 19 ++++++++--- docs/builders/webpack.md | 34 ++++++++++++++----- docs/contribute/code.md | 20 ++++++----- docs/contribute/new-snippets.md | 8 +++-- docs/essentials/interactions.md | 15 ++++---- docs/essentials/introduction.md | 29 +++++++++------- docs/sharing/publish-storybook.md | 18 ++++++---- .../build-storybook-production-mode.js.mdx | 7 ---- ...build-storybook-production-mode.npm.js.mdx | 3 ++ ...uild-storybook-production-mode.yarn.js.mdx | 3 ++ .../common/chromatic-install.npm.js.mdx | 3 ++ .../common/chromatic-install.yarn.js.mdx | 3 ++ ...storybook-addon-actions-install.npm.js.mdx | 3 ++ ...torybook-addon-actions-install.yarn.js.mdx | 3 ++ ...rybook-addon-essentials-install.npm.js.mdx | 3 ++ ...ybook-addon-essentials-install.yarn.js.mdx | 3 ++ ...rybook-addon-storyshots-install.npm.js.mdx | 3 ++ ...ybook-addon-storyshots-install.yarn.js.mdx | 3 ++ .../storybook-debug-webpack-dev.npm.js.mdx | 3 ++ .../storybook-debug-webpack-dev.yarn.js.mdx | 3 ++ .../storybook-debug-webpack-prod.npm.js.mdx | 3 ++ .../storybook-debug-webpack-prod.yarn.js.mdx | 3 ++ ...rite-addon-install-dependencies.npm.js.mdx | 3 ++ ...ite-addon-install-dependencies.yarn.js.mdx | 3 ++ docs/writing-stories/play-function.md | 15 ++++---- docs/writing-tests/snapshot-testing.md | 15 ++++---- docs/writing-tests/visual-testing.md | 17 ++++++---- 27 files changed, 171 insertions(+), 74 deletions(-) delete mode 100644 docs/snippets/common/build-storybook-production-mode.js.mdx create mode 100644 docs/snippets/common/build-storybook-production-mode.npm.js.mdx create mode 100644 docs/snippets/common/build-storybook-production-mode.yarn.js.mdx create mode 100644 docs/snippets/common/chromatic-install.npm.js.mdx create mode 100644 docs/snippets/common/chromatic-install.yarn.js.mdx create mode 100644 docs/snippets/common/storybook-addon-actions-install.npm.js.mdx create mode 100644 docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx create mode 100644 docs/snippets/common/storybook-addon-essentials-install.npm.js.mdx create mode 100644 docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx create mode 100644 docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx create mode 100644 docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx create mode 100644 docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx create mode 100644 docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx create mode 100644 docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx create mode 100644 docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx create mode 100644 docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx create mode 100644 docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index 7b3079ad94a0..1be4af5d4454 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -50,13 +50,22 @@ Once you've gone through the prompts, your `package.json` should look like: ### Build system -We'll need to add the necessary dependencies and make some adjustments. Run the following commands: +We'll need to add the necessary dependencies and make some adjustments. Run the following command to install the required depedencies: -```shell -# Installs React and Babel CLI -yarn add react react-dom @babel/cli + -# Adds Storybook: + + + + +Initialize a local Storybook instance to allow you to test your addon. + +```shell npx sb init ``` diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md index 768b4ab2ee9d..fa5568bb6c52 100644 --- a/docs/builders/webpack.md +++ b/docs/builders/webpack.md @@ -40,16 +40,34 @@ You can import `.json` files and have them expanded to a JavaScript object: -If you want to know the exact details of the Webpack config, the best way is to run either of the following: +If you want to know the exact details of the Webpack config, the best way is to run either of the following commands: -```shell +For development mode: -## Development mode -yarn start-storybook --debug-webpack + + + + + + +For production mode: -## Production mode -yarn build-storybook --debug-webpack -``` + + + + + + ### Code splitting @@ -199,5 +217,5 @@ When working with TypeScript projects, the default Webpack configuration may fai #### Learn more about builders - [Vite builder](./vite.md) for bundling with Vite -- [Webpack builder](./webpack.md) for bundling with Webpack +- Webpack builder for bundling with Webpack - [Builder API](./builder-api.md) for building a Storybook builder diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 9a1f4fada5b6..f25714e4e713 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -6,13 +6,16 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com ## Initial setup -First [fork](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook repository then clone and build your fork locally. Run the following commands: +Start by [forking](https://docs.github.com/en/github/getting-started-with-github/quickstart/fork-a-repo) the Storybook monorepo and cloning it locally. ```shell git clone https://github.com/your-username/storybook.git -cd storybook -yarn -yarn bootstrap --core +``` + +Navigate to the `storybook` directory and install the required dependencies with the following commands: + +```shell +yarn && yarn bootstrap --core ``` ## Run tests & examples @@ -28,8 +31,7 @@ yarn test Once the tests finish, check if the examples are working with the following commands: ```shell -cd examples/cra-ts-essentials -yarn storybook +cd examples/cra-ts-essentials && yarn storybook ```
@@ -106,7 +108,7 @@ Storybook's monorepo is set up to rely on end-to-end testing with [Cypress](http Before submitting your contribution, run the test suite one last time with: -```sh +```shell yarn test ``` @@ -133,7 +135,7 @@ We encourage bug reports to include reproductions. In the same way that it's pos To do so, run the following command in the root of the monorepo: -```sh +```shell npx sb@next link https://github.com/your-username/your-project.git ``` @@ -141,7 +143,7 @@ This command creates a project `../storybook-repros/your-project`, and automatic If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag: -```sh +```shell npx sb@next link --local /path/to/local-repro-directory ``` diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md index 84e4a91439b2..35a88ea36834 100644 --- a/docs/contribute/new-snippets.md +++ b/docs/contribute/new-snippets.md @@ -89,11 +89,15 @@ Go through the rest of the documentation and repeat the process. Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue. -Start by forking [frontpage repo](https://github.com/storybookjs/frontpage). Then, clone and install the dependencies with the following commands: +Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally. ```shell git clone https://github.com/your-username/frontpage.git -cd frontpage +``` + +Navigate to the `frontpage` directory and install the required dependencies with the following command: + +```shell yarn ``` diff --git a/docs/essentials/interactions.md b/docs/essentials/interactions.md index 4e1ca5099177..a46bcc13b11a 100644 --- a/docs/essentials/interactions.md +++ b/docs/essentials/interactions.md @@ -18,13 +18,16 @@ The interactions are written using a Storybook-instrumented version of [Testing Since Interactions is still experimental, it doesn't yet ship with Storybook by default. As such, you'll have to install it. You may also want to add our wrappers for Testing Library and Jest. -```shell -# With npm -npm install @storybook/addon-interactions @storybook/jest @storybook/testing-library --save-dev + -# With yarn -yarn add --dev @storybook/addon-interactions @storybook/jest @storybook/testing-library -``` + + + Next, update [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) to the following: diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md index ea508ccb5411..bd2b6661e24d 100644 --- a/docs/essentials/introduction.md +++ b/docs/essentials/introduction.md @@ -18,13 +18,16 @@ If you ran `sb init` to include Storybook in your project, the Essentials addon If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal: -```shell -#With npm -npm install -D @storybook/addon-essentials + -#With yarn -yarn add -D @storybook/addon-essentials -``` + + + Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon. @@ -44,14 +47,16 @@ Essentials is "zero-config”. It comes with a recommended configuration out of If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example: -```shell -#With npm -npm install -D @storybook/addon-actions + + -#With yarn -yarn add -D @storybook/addon-actions -``` + diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md index f260dc6f99aa..2e6794a0a923 100644 --- a/docs/sharing/publish-storybook.md +++ b/docs/sharing/publish-storybook.md @@ -21,7 +21,8 @@ First, we'll need to build Storybook as a static web application. The functional paths={[ 'angular/custom-build-script-production.script-for-builder.js.mdx', 'angular/build-storybook-production-mode.with-builder.js.mdx', - 'common/build-storybook-production-mode.js.mdx', + 'common/build-storybook-production-mode.yarn.js.mdx', + 'common/build-storybook-production-mode.npm.js.mdx', ]} /> @@ -49,13 +50,16 @@ To get started, sign up with your GitHub, GitLab, Bitbucket, or email and genera Next, install the [Chromatic CLI](https://www.npmjs.com/package/chromatic) package from npm: -```shell -# With npm -npm install --save-dev chromatic + -# With yarn -yarn add --dev chromatic -``` + + + Run the following command after the package finishes installing. Make sure that you replace `your-project-token` with your own project token. diff --git a/docs/snippets/common/build-storybook-production-mode.js.mdx b/docs/snippets/common/build-storybook-production-mode.js.mdx deleted file mode 100644 index 9bd298812fa9..000000000000 --- a/docs/snippets/common/build-storybook-production-mode.js.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```shell -# With yarn -yarn build-storybook - -# With npm -npm run build-storybook -``` \ No newline at end of file diff --git a/docs/snippets/common/build-storybook-production-mode.npm.js.mdx b/docs/snippets/common/build-storybook-production-mode.npm.js.mdx new file mode 100644 index 000000000000..15ee902eae48 --- /dev/null +++ b/docs/snippets/common/build-storybook-production-mode.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm run build-storybook +``` \ No newline at end of file diff --git a/docs/snippets/common/build-storybook-production-mode.yarn.js.mdx b/docs/snippets/common/build-storybook-production-mode.yarn.js.mdx new file mode 100644 index 000000000000..eda3dbd3ad90 --- /dev/null +++ b/docs/snippets/common/build-storybook-production-mode.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn build-storybook +``` \ No newline at end of file diff --git a/docs/snippets/common/chromatic-install.npm.js.mdx b/docs/snippets/common/chromatic-install.npm.js.mdx new file mode 100644 index 000000000000..08f68adbfcc0 --- /dev/null +++ b/docs/snippets/common/chromatic-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install chromatic --save-dev +``` \ No newline at end of file diff --git a/docs/snippets/common/chromatic-install.yarn.js.mdx b/docs/snippets/common/chromatic-install.yarn.js.mdx new file mode 100644 index 000000000000..ef2232eb8816 --- /dev/null +++ b/docs/snippets/common/chromatic-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev chromatic +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-actions-install.npm.js.mdx b/docs/snippets/common/storybook-addon-actions-install.npm.js.mdx new file mode 100644 index 000000000000..a693fd458d6b --- /dev/null +++ b/docs/snippets/common/storybook-addon-actions-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install @storybook/addon-actions --save-dev +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx new file mode 100644 index 000000000000..b1e52357c623 --- /dev/null +++ b/docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/addon-actions +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-essentials-install.npm.js.mdx b/docs/snippets/common/storybook-addon-essentials-install.npm.js.mdx new file mode 100644 index 000000000000..a693fd458d6b --- /dev/null +++ b/docs/snippets/common/storybook-addon-essentials-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install @storybook/addon-actions --save-dev +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx new file mode 100644 index 000000000000..7bc9cf52e948 --- /dev/null +++ b/docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/addon-essentials +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx b/docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx new file mode 100644 index 000000000000..1d4b6caf3acc --- /dev/null +++ b/docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install @storybook/addon-storyshots --save-dev +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx new file mode 100644 index 000000000000..c847016ced68 --- /dev/null +++ b/docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/addon-storyshots +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx new file mode 100644 index 000000000000..080af4a1debf --- /dev/null +++ b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm run storybook -- --debug-webpack +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx new file mode 100644 index 000000000000..8dbc7b2b49e4 --- /dev/null +++ b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn storybook --debug-webpack +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx new file mode 100644 index 000000000000..5ca3edbb934f --- /dev/null +++ b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm run build-storybook -- --debug-webpack +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx new file mode 100644 index 000000000000..1b2c9df57924 --- /dev/null +++ b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn build-storybook --debug-webpack +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx b/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx new file mode 100644 index 000000000000..e196ab444371 --- /dev/null +++ b/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install react react-dom @babel/cli +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx b/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx new file mode 100644 index 000000000000..e81984d3e2a2 --- /dev/null +++ b/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add react react-dom @babel/cli +``` \ No newline at end of file diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md index cef5c1be9920..0923ee57a2c3 100644 --- a/docs/writing-stories/play-function.md +++ b/docs/writing-stories/play-function.md @@ -10,13 +10,16 @@ We recommend installing Storybook's [`addon-interactions`](https://storybook.js. Run the following command to install the addon and the required dependencies. -```shell -# With npm -npm install @storybook/addon-interactions @storybook/testing-library --save-dev + -# With yarn -yarn add --dev @storybook/addon-interactions @storybook/testing-library -``` + + + Update your Storybook configuration (in `.storybook/main.js`) to include the interactions addon. diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md index 242c1f00885f..1b90a05dfec7 100644 --- a/docs/writing-tests/snapshot-testing.md +++ b/docs/writing-tests/snapshot-testing.md @@ -14,13 +14,16 @@ Storybook is a helpful tool for snapshot testing because every story is essentia Run the following command to install Storyshots: -```shell -# With npm -npm install @storybook/addon-storyshots --save-dev + -# With yarn -yarn add --dev @storybook/addon-storyshots -``` + + + Add a test file to your environment with the following contents to configure Storyshots: diff --git a/docs/writing-tests/visual-testing.md b/docs/writing-tests/visual-testing.md index a5336a3854a0..bed00fbfcffb 100644 --- a/docs/writing-tests/visual-testing.md +++ b/docs/writing-tests/visual-testing.md @@ -20,13 +20,18 @@ To get started, sign up with your [GitHub](https://github.com/), [GitLab](https: Next, install the [chromatic](https://www.npmjs.com/package/chromatic) CLI package from npm: -```shell -# With npm -npm install chromatic --save-dev + + + + + + -# With yarn -yarn add --dev chromatic -``` Run the following command after the package finishes installing: From 6020acdeba0c4b01a02752a14e0d275e8575878b Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 31 May 2022 18:36:56 +0100 Subject: [PATCH 10/26] Adds spacing to prevent issues with the link --- docs/get-started/install.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/get-started/install.md b/docs/get-started/install.md index be09b6b2a85f..8c5fe9ae609d 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -90,7 +90,9 @@ Below are some of the most common installation issues and instructions on how to
+ Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information. +
If all else fails, try asking for [help](https://storybook.js.org/support) From 2317e6e43f31462288f240cf69d1ebf12f865082 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 31 May 2022 13:51:46 -0400 Subject: [PATCH 11/26] Fix global argTypes definition docs --- docs/snippets/common/button-story-project-args-theme.js.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/common/button-story-project-args-theme.js.mdx b/docs/snippets/common/button-story-project-args-theme.js.mdx index da897c5a7829..c3fd8bd5e666 100644 --- a/docs/snippets/common/button-story-project-args-theme.js.mdx +++ b/docs/snippets/common/button-story-project-args-theme.js.mdx @@ -2,7 +2,7 @@ // preview.js // All stories expect a theme arg -export const argTypes = { theme: { control: { options: ['light', 'dark'] } } }; +export const argTypes = { theme: { control: 'select', options: ['light', 'dark'] } }; // The default value of the theme arg to all stories export const args = { theme: 'light' }; From e5841e4210c0d641ccbcdd453b0b842694ac5ffe Mon Sep 17 00:00:00 2001 From: Stefanos Lignos Zivver Date: Thu, 26 May 2022 15:35:32 +0200 Subject: [PATCH 12/26] feat(cli): Add support for angular/cli@14.0.0 --- .../src/generators/ANGULAR/angular-helpers.ts | 32 ++++++++++++++++--- lib/cli/src/generators/ANGULAR/index.ts | 9 ++---- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/lib/cli/src/generators/ANGULAR/angular-helpers.ts b/lib/cli/src/generators/ANGULAR/angular-helpers.ts index bd9eecfa2bab..a1ab6d8f9221 100644 --- a/lib/cli/src/generators/ANGULAR/angular-helpers.ts +++ b/lib/cli/src/generators/ANGULAR/angular-helpers.ts @@ -10,7 +10,7 @@ type TsConfig = { export function getAngularAppTsConfigPath() { const angularJson = readFileAsJson('angular.json', true); - const { defaultProject } = angularJson; + const defaultProject = getDefaultProjectName(angularJson); const tsConfigPath = angularJson.projects[defaultProject].architect.build.options.tsConfig; if (!tsConfigPath || !fs.existsSync(path.resolve(tsConfigPath))) { @@ -50,9 +50,33 @@ export function editStorybookTsConfig(tsconfigPath: string) { writeFileAsJson(tsconfigPath, tsConfigJson); } -export function isDefaultProjectSet() { - const angularJson = readFileAsJson('angular.json', true); - return angularJson && !!angularJson.defaultProject; +export function getDefaultProjectName(angularJson: any): string | undefined { + const { defaultProject, projects } = angularJson; + + if (projects?.storybook) { + return 'storybook'; + } + + if (defaultProject) { + return defaultProject; + } + + const firstProjectName = projects ? Object.keys(projects)[0] : undefined; + if (firstProjectName) { + return firstProjectName; + } + + return undefined; +} + +export function checkForProjects() { + const { projects } = readFileAsJson('angular.json', true); + + if (!projects || Object.keys(projects).length === 0) { + throw new Error( + 'Could not find a project in your Angular workspace. \nAdd a project and re-run the installation' + ); + } } export async function getBaseTsConfigName() { diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts index 934ceb6295d5..3ff3b1b4d852 100644 --- a/lib/cli/src/generators/ANGULAR/index.ts +++ b/lib/cli/src/generators/ANGULAR/index.ts @@ -1,7 +1,7 @@ import path from 'path'; import semver from '@storybook/semver'; import { - isDefaultProjectSet, + checkForProjects, editStorybookTsConfig, getAngularAppTsConfigJson, getAngularAppTsConfigPath, @@ -28,11 +28,8 @@ function editAngularAppTsConfig() { } const generator: Generator = async (packageManager, npmOptions, options) => { - if (!isDefaultProjectSet()) { - throw new Error( - 'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.' - ); - } + checkForProjects(); + const angularVersion = semver.coerce( packageManager.retrievePackageJson().dependencies['@angular/core'] )?.version; From fc2edfaa40485af9fe8d9cb59cb99ca4553a7798 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 1 Jun 2022 11:05:24 +0200 Subject: [PATCH 13/26] chore(vue-kitchen-sink): scope styles in App.vue --- examples/vue-kitchen-sink/src/App.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/vue-kitchen-sink/src/App.vue b/examples/vue-kitchen-sink/src/App.vue index 06f14e40a8ca..7695b522c011 100644 --- a/examples/vue-kitchen-sink/src/App.vue +++ b/examples/vue-kitchen-sink/src/App.vue @@ -30,7 +30,7 @@ export default { } -