diff --git a/.circleci/config.yml b/.circleci/config.yml index cd947ee9c6e0..6dcb72899d0d 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -265,32 +265,31 @@ jobs: steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' - # TODO: we disabled this one because it keeps failing, we should fix it, and enable it again! - # - attach_workspace: - # at: . - # - run: - # name: Running local registry - # command: yarn local-registry --port 6000 --open - # background: true - # - run: - # name: Wait for registry - # command: yarn wait-on http://localhost:6000 - # - run: - # name: run e2e tests cra - # command: yarn test:e2e-framework --pnp cra + - attach_workspace: + at: . + - run: + name: Running local registry + command: yarn local-registry --port 6000 --open + background: true + - run: + name: Wait for registry + command: yarn wait-on http://localhost:6000 + - run: + name: run e2e tests cra + command: yarn test:e2e-framework --pnp cra # - run: # name: run e2e tests vue # command: yarn test:e2e-framework --pnp sfcVue - # - run: - # name: prep artifacts - # when: always - # command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing - # - store_artifacts: - # path: /tmp/cypress-record - # destination: cypress - # - store_artifacts: - # path: /tmp/storybook-e2e-testing-out.zip - # destination: e2e + - run: + name: prep artifacts + when: always + command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing + - store_artifacts: + path: /tmp/cypress-record + destination: cypress + - store_artifacts: + path: /tmp/storybook-e2e-testing-out.zip + destination: e2e e2e-tests-examples: executor: class: small 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 diff --git a/SECURITY.md b/SECURITY.md index 721021f54540..04845f5bf4a8 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -2,9 +2,9 @@ ## Supported Versions -| Version | Supported | -| ---------- | ------------------ | -| 6.3, 6.4 | :white_check_mark: | +| Version | Supported | +| --------------- | ------------------ | +| 6.3, 6.4, 6.5 | :white_check_mark: | ## Reporting a Vulnerability diff --git a/app/angular/src/client/preview/angular-beta/StorybookModule.ts b/app/angular/src/client/preview/angular-beta/StorybookModule.ts index 68c443375a83..275b490c18bc 100644 --- a/app/angular/src/client/preview/angular-beta/StorybookModule.ts +++ b/app/angular/src/client/preview/angular-beta/StorybookModule.ts @@ -7,7 +7,7 @@ import deprecate from 'util-deprecate'; import { ICollection, StoryFnAngularReturnType } from '../types'; import { storyPropsProvider } from './StorybookProvider'; import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer'; -import { isDeclarable } from './utils/NgComponentAnalyzer'; +import { isDeclarable, isStandaloneComponent } from './utils/NgComponentAnalyzer'; import { createStorybookWrapperComponent } from './StorybookWrapperComponent'; import { computesTemplateFromComponent } from './ComputesTemplateFromComponent'; @@ -61,6 +61,7 @@ export const getStorybookModuleMetadata = ( props ); + const isStandalone = isStandaloneComponent(component); // Look recursively (deep) if the component is not already declared by an import module const requiresComponentDeclaration = isDeclarable(component) && @@ -68,7 +69,8 @@ export const getStorybookModuleMetadata = ( component, moduleMetadata.declarations, moduleMetadata.imports - ); + ) && + !isStandalone; return { declarations: [ @@ -76,7 +78,11 @@ export const getStorybookModuleMetadata = ( ComponentToInject, ...(moduleMetadata.declarations ?? []), ], - imports: [BrowserModule, ...(moduleMetadata.imports ?? [])], + imports: [ + BrowserModule, + ...(isStandalone ? [component] : []), + ...(moduleMetadata.imports ?? []), + ], providers: [storyPropsProvider(storyProps$), ...(moduleMetadata.providers ?? [])], entryComponents: [...(moduleMetadata.entryComponents ?? [])], schemas: [...(moduleMetadata.schemas ?? [])], diff --git a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts index 03eba18a7236..faa7cdce09ff 100644 --- a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts +++ b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts @@ -19,6 +19,7 @@ import { isComponent, isDeclarable, getComponentDecoratorMetadata, + isStandaloneComponent, } from './NgComponentAnalyzer'; describe('getComponentInputsOutputs', () => { @@ -235,6 +236,46 @@ describe('isComponent', () => { }); }); +describe('isStandaloneComponent', () => { + it('should return true with a Component with "standalone: true"', () => { + // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once + // Angular deps are updated to v14.x.x. + @Component({ standalone: true } as any) + class FooComponent {} + + expect(isStandaloneComponent(FooComponent)).toEqual(true); + }); + + it('should return false with a Component with "standalone: false"', () => { + // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once + // Angular deps are updated to v14.x.x. + @Component({ standalone: false } as any) + class FooComponent {} + + expect(isStandaloneComponent(FooComponent)).toEqual(false); + }); + + it('should return false with a Component without the "standalone" property', () => { + @Component({}) + class FooComponent {} + + expect(isStandaloneComponent(FooComponent)).toEqual(false); + }); + + it('should return false with simple class', () => { + class FooPipe {} + + expect(isStandaloneComponent(FooPipe)).toEqual(false); + }); + + it('should return false with Directive', () => { + @Directive() + class FooDirective {} + + expect(isStandaloneComponent(FooDirective)).toEqual(false); + }); +}); + describe('getComponentDecoratorMetadata', () => { it('should return Component with a Component', () => { @Component({ selector: 'foo' }) diff --git a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts index ae88972dfe26..36bd036631e3 100644 --- a/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts +++ b/app/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts @@ -108,6 +108,18 @@ export const isComponent = (component: any): component is Type => { return (decorators || []).some((d) => d instanceof Component); }; +export const isStandaloneComponent = (component: any): component is Type => { + if (!component) { + return false; + } + + const decorators = reflectionCapabilities.annotations(component); + + // TODO: `standalone` is only available in Angular v14. Remove cast to `any` once + // Angular deps are updated to v14.x.x. + return (decorators || []).some((d) => d instanceof Component && (d as any).standalone); +}; + /** * Returns all component decorator properties * is used to get all `@Input` and `@Output` Decorator 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' }; 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' }; diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index 7b3079ad94a0..071ac289e240 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 dependencies: -```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 ``` @@ -246,4 +255,4 @@ To dive deeper, we recommend Storybook's [creating an addon](https://storybook.j ### Addon kit -To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon. \ No newline at end of file +To help you jumpstart the addon development, the Storybook maintainers created an [`addon-kit`](https://github.com/storybookjs/addon-kit), use it to bootstrap your next addon. 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/configure/environment-variables.md b/docs/configure/environment-variables.md index d6439226bb4d..1109db35c15b 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -9,6 +9,12 @@ If you supply an environment variable prefixed with `STORYBOOK_`, it will be ava STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook ``` +
+ + 💡 Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files. + +
+ Then we can access these environment variables anywhere inside our preview JavaScript code like below: diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 83eed8505c43..c2a7fa44c02c 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -178,7 +178,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` | | `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs:['../public']` | -| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | +| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook
`addons:['@storybook/addon-essentials']` | | `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | | `framework` | Configures Storybook based on a set of framework-specific settings
`framework:'@storybook/svelte'` | | `core` | Configures Storybook's internal features.
`core: { builder: 'webpack5' }` | @@ -186,6 +186,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde | `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | | `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | | `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | ## Configure story rendering diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 9a1f4fada5b6..8b55caa63fe4 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -6,18 +6,21 @@ 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 -Once you've completed the [initial setup](#run-tests-&-examples), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples. +Once you've completed the [initial setup](#initial-setup), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples. Run the following command to execute the tests: @@ -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/faq.md b/docs/faq.md index 766f29ed4adf..f05062edf05e 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -475,4 +475,13 @@ export default { ### Why isn't Storybook's test runner working? -There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information. \ No newline at end of file +There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information. + + +### How does Storybook handles enviroment variables? + +Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook. + +To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file. + +Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)). \ No newline at end of file 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) 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/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' }; 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: 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'), }, }; 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/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 { } -