diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 871971bac231..9bf65226b831 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -21,7 +21,7 @@ body: description: >- We prioritize bug reports that have a reproduction. You can create a reproduction using [storybook.new](https://storybook.new), or by running `npx sb@next sandbox` and following the instructions. Read our - [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce) + [documentation](https://storybook.js.org/docs/contribute/how-to-reproduce) to learn more about creating reproductions. placeholder: >- Paste a link to your reproduction here. We prioritize issues with reproductions over those without. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index ba472744a8f1..eb662fb9c8ab 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -4,11 +4,10 @@ Closes # - ## What I did @@ -20,6 +19,7 @@ Thank you for contributing to Storybook! Please submit all PRs to the `next` bra #### The changes in this PR are covered in the following automated tests: + - [ ] stories - [ ] unit tests - [ ] integration tests @@ -52,16 +52,16 @@ _This section is mandatory for all contributions. If you believe no manual test
Available labels - - `bug`: Internal changes that fixes incorrect behavior. - - `maintenance`: User-facing maintenance tasks. - - `dependencies`: Upgrading (sometimes downgrading) dependencies. - - `build`: Internal-facing build tooling & test updates. Will not show up in release changelog. - - `cleanup`: Minor cleanup style change. Will not show up in release changelog. - - `documentation`: Documentation **only** changes. Will not show up in release changelog. - - `feature request`: Introducing a new feature. - - `BREAKING CHANGE`: Changes that break compatibility in some way with current major version. - - `other`: Changes that don't fit in the above categories. - + - `bug`: Internal changes that fixes incorrect behavior. + - `maintenance`: User-facing maintenance tasks. + - `dependencies`: Upgrading (sometimes downgrading) dependencies. + - `build`: Internal-facing build tooling & test updates. Will not show up in release changelog. + - `cleanup`: Minor cleanup style change. Will not show up in release changelog. + - `documentation`: Documentation **only** changes. Will not show up in release changelog. + - `feature request`: Introducing a new feature. + - `BREAKING CHANGE`: Changes that break compatibility in some way with current major version. + - `other`: Changes that don't fit in the above categories. +
### πŸ¦‹ Canary release diff --git a/CHANGELOG.v6.md b/CHANGELOG.v6.md index 391f14fed6ed..bad28ce92d21 100644 --- a/CHANGELOG.v6.md +++ b/CHANGELOG.v6.md @@ -4942,7 +4942,7 @@ Storybook 6.0 is here! - 🧬 [Args: Next-generation, dynamic story format](https://medium.com/storybookjs/introducing-storybook-args-2dadcdb777cc) - πŸŽ› [Controls: Live edit component examples](https://medium.com/storybookjs/storybook-controls-ce82af93e430) - 🌐 [Composition: Combine multiple Storybooks](https://medium.com/storybookjs/storybook-composition-af0da9084fba) -- πŸ“š [Documentation: Complete project overhaul](https://storybook.js.org/docs/react/get-started/introduction) +- πŸ“š [Documentation: Complete project overhaul](https://storybook.js.org/docs/get-started) 6.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `6.0.0-alpha.*`, `6.0.0-beta.*`, and `6.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.3` or earlier. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 78993afd8386..314f5dcc1dd2 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -55,4 +55,4 @@ yarn task --task dev --template --start-from=publish # Contributing to Storybook -For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/react/contribute/how-to-contribute). +For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute/how-to-contribute). diff --git a/MAINTAINERS.md b/MAINTAINERS.md index 191dc42d5b90..e7640a31d10e 100644 --- a/MAINTAINERS.md +++ b/MAINTAINERS.md @@ -25,7 +25,7 @@ This document outlines some of the processes that the maintainers should adhere | compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) | | components | Issue, bug, or pull request related to Storybook's internal components | | composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) | -| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md) | +| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/index.md) | | core | Issue, bug, or pull request related to Storybook's Core | | cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/)) | | CSF | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.md) | diff --git a/MIGRATION.md b/MIGRATION.md index ca14c266b621..3d432ffb35ed 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,13 +1,13 @@

Migration

- [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -33,7 +33,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -45,7 +45,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -95,7 +95,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -357,13 +357,13 @@ npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx They won't do a perfect migration so we recommend that you manually go through each file afterwards. -Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](https://storybook.js.org/docs/react/api/main-config-indexers), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation. +Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](https://storybook.js.org/docs/api/main-config-indexers), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation. #### `storyIndexers` is replaced with `experimental_indexers` Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0. -The new experimental indexers are documented [here](https://storybook.js.org/docs/react/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter. +The new experimental indexers are documented [here](https://storybook.js.org/docs/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter. That means you can convert an existing story indexer like this: @@ -926,11 +926,11 @@ import ReadMe from './README.md?raw'; #### Stories field in .storybook/main.js is mandatory In 6.x, the `stories` key field in `.storybook/main.js` was optional. In 7.0, it is mandatory. -Please follow up the [Configure your Storybook project](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project) section to configure your Storybook project. +Please follow up the [Configure your Storybook project](https://storybook.js.org/docs/configure/#configure-your-storybook-project) section to configure your Storybook project. #### Stricter global types -In 6.x, you could declare and use [`globals`](https://storybook.js.org/docs/react/essentials/toolbars-and-globals) without declaring their corresponding `globalTypes`. We've made this more strict in 7.0, so that the `globalTypes` declaration is required, and undeclared globals will be ignored. +In 6.x, you could declare and use [`globals`](https://storybook.js.org/docs/essentials/toolbars-and-globals) without declaring their corresponding `globalTypes`. We've made this more strict in 7.0, so that the `globalTypes` declaration is required, and undeclared globals will be ignored. #### Deploying build artifacts @@ -940,7 +940,7 @@ Those end up as `.mjs` files in your static Storybook artifact and need to be se For a simple HTTP server to view a Storybook build, you can run `npx http-server storybook-static`. -Note that [using the serve package](https://storybook.js.org/docs/react/faq#i-see-a-no-preview-error-with-a-storybook-production-build) will not work. +Note that [using the serve package](https://storybook.js.org/docs/faq#i-see-a-no-preview-error-with-a-storybook-production-build) will not work. ##### Dropped support for file URLs @@ -1083,14 +1083,14 @@ export default config; #### Vite builder uses Vite config automatically When using a [Vite-based framework](#framework-field-mandatory), Storybook will automatically use your `vite.config.(ctm)js` config file starting in 7.0. -Some settings will be overridden by Storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)). +Some settings will be overridden by Storybook so that it can function properly, and the merged settings can be modified using `viteFinal` in `.storybook/main.js` (see the [Storybook Vite configuration docs](https://storybook.js.org/docs/builders/vite#configuration)). If you were using `viteFinal` in 6.5 to simply merge in your project's standard Vite config, you can now remove it. For Svelte projects this means that the `svelteOptions` property in the `main.js` config should be omitted, as it will be loaded automatically via the project's `vite.config.js`. #### Vite cache moved to node_modules/.cache/.vite-storybook -Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)). +Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/builders/vite#configuration)). ### 7.0 Webpack changes @@ -2373,7 +2373,7 @@ storySort: { } ``` -This would sort `*/Introduction` first, but not `Introduction` or `Very/Nested/Introduction`. If you want to target `Introduction` stories/docs anywhere in the hierarchy, you can do this with a [custom sort function](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories). +This would sort `*/Introduction` first, but not `Introduction` or `Very/Nested/Introduction`. If you want to target `Introduction` stories/docs anywhere in the hierarchy, you can do this with a [custom sort function](https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#sorting-stories). #### v7 Store API changes for addon authors @@ -2454,7 +2454,7 @@ In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders #### SB Angular builder -Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. An example builder configuration is now part of the [get started documentation page](https://storybook.js.org/docs/angular/get-started/install). +Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. An example builder configuration is now part of the [get started documentation page](https://storybook.js.org/docs/get-started/install). If you want to know all the available options, please checks the builders' validation schemas : @@ -2744,7 +2744,7 @@ The new convention is consistent with how other frameworks and addons work in St #### New Angular renderer -We've rewritten the Angular renderer in Storybook 6.2. It's meant to be entirely backwards compatible, but if you need to use the legacy renderer it's still available via a [parameter](https://storybook.js.org/docs/angular/writing-stories/parameters). To opt out of the new renderer, add the following to `.storybook/preview.ts`: +We've rewritten the Angular renderer in Storybook 6.2. It's meant to be entirely backwards compatible, but if you need to use the legacy renderer it's still available via a [parameter](https://storybook.js.org/docs/writing-stories/parameters). To opt out of the new renderer, add the following to `.storybook/preview.ts`: ```ts export const parameters = { @@ -2908,7 +2908,7 @@ DESIGN SYSTEM [root] - Checkbox [story] ``` -See [Naming components and hierarchy](https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting) for details. +See [Naming components and hierarchy](https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#single-story-hoisting) for details. ### React peer dependencies @@ -2990,7 +2990,7 @@ Basic.parameters: { Like [Deprecated disabled parameter](#deprecated-disabled-parameter). The `disabled` parameter has been deprecated, please use `disable` instead. -For more information, see the [the related documentation](https://storybook.js.org/docs/react/workflows/package-composition#configuring). +For more information, see the [the related documentation](https://storybook.js.org/docs/workflows/package-composition#configuring). ## From version 5.3.x to 6.0.x @@ -3036,7 +3036,7 @@ Storybook has built-in Typescript support in 6.0. That means you should remove y To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. You should also remove `@storybook/preset-typescript`, which is superceded by the built-in configuration. -If you want to override the defaults, see the [typescript configuration docs](https://storybook.js.org/docs/react/configure/typescript). +If you want to override the defaults, see the [typescript configuration docs](https://storybook.js.org/docs/configure/typescript). ### Correct globs in main.js @@ -3082,7 +3082,7 @@ npm install core-js@^3.0.1 --save-dev ### Args passed as first argument to story -Starting in 6.0, the first argument to a story function is an [Args object](https://storybook.js.org/docs/react/api/csf#args-story-inputs). In 5.3 and earlier, the first argument was a [StoryContext](https://github.com/storybookjs/storybook/blob/release/5.3/lib/addons/src/types.ts#L24-L31), and that context is now passed as the second argument by default. +Starting in 6.0, the first argument to a story function is an [Args object](https://storybook.js.org/docs/api/csf#args-story-inputs). In 5.3 and earlier, the first argument was a [StoryContext](https://github.com/storybookjs/storybook/blob/release/5.3/lib/addons/src/types.ts#L24-L31), and that context is now passed as the second argument by default. This breaking change only affects you if your stories actually use the context, which is not common. If you have any stories that use the context, you can either (1) update your stories, or (2) set a flag to opt-out of new behavior. @@ -3992,7 +3992,7 @@ module.exports = ({ config }) => ({ }); ``` -Please refer to the [current custom webpack documentation](https://storybook.js.org/docs/react/configure/webpack) for more information on custom webpack config and to [Issue #6081](https://github.com/storybookjs/storybook/issues/6081) for more information about the change. +Please refer to the [current custom webpack documentation](https://storybook.js.org/docs/configure/webpack) for more information on custom webpack config and to [Issue #6081](https://github.com/storybookjs/storybook/issues/6081) for more information about the change. ## From version 4.1.x to 5.0.x @@ -4033,11 +4033,11 @@ module.exports = ({ config, mode }) => { config.module.rules.push(...); return c In contrast, the 4.x configuration function accepted either two or three arguments (`(baseConfig, mode)`, or `(baseConfig, mode, defaultConfig)`). The `config` object in the 5.x signature is equivalent to 4.x's `defaultConfig`. -Please see the [current custom webpack documentation](https://storybook.js.org/docs/react/configure/webpack) for more information on custom webpack config. +Please see the [current custom webpack documentation](https://storybook.js.org/docs/configure/webpack) for more information on custom webpack config. ### Theming overhaul -Theming has been rewritten in v5. If you used theming in v4, please consult the [theming docs](https://storybook.js.org/docs/react/configure/theming) to learn about the new API. +Theming has been rewritten in v5. If you used theming in v4, please consult the [theming docs](https://storybook.js.org/docs/configure/theming) to learn about the new API. ### Story hierarchy defaults @@ -4069,7 +4069,7 @@ addParameters({ ### Options addon deprecated -In 4.x we added story parameters. In 5.x we've deprecated the options addon in favor of [global parameters](https://storybook.js.org/docs/react/configure/features-and-behavior), and we've also renamed some of the options in the process (though we're maintaining backwards compatibility until 6.0). +In 4.x we added story parameters. In 5.x we've deprecated the options addon in favor of [global parameters](https://storybook.js.org/docs/configure/features-and-behavior), and we've also renamed some of the options in the process (though we're maintaining backwards compatibility until 6.0). Here's an old configuration: @@ -4430,7 +4430,7 @@ The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-li ### Webpack 4 -Storybook now uses webpack 4. If you have a [custom webpack config](https://storybook.js.org/docs/react/configure/webpack), make sure that all the loaders and plugins you use support webpack 4. +Storybook now uses webpack 4. If you have a [custom webpack config](https://storybook.js.org/docs/configure/webpack), make sure that all the loaders and plugins you use support webpack 4. ### Babel 7 @@ -4542,7 +4542,7 @@ This was done to support different major versions of babel. ### Base webpack config now contains vital plugins #1775 -This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/docs/react/configure/webpack#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement. +This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/docs/configure/webpack#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement. ### Refactored Knobs @@ -4612,7 +4612,7 @@ Now we use: - `preview-head.html` for including extra content into the preview pane. - `manager-head.html` for including extra content into the manager window. -[Read our docs](https://storybook.js.org/docs/react/configure/story-rendering#adding-to-head) for more details. +[Read our docs](https://storybook.js.org/docs/configure/story-rendering#adding-to-head) for more details. ## From version 2.x.x to 3.x.x diff --git a/README.md b/README.md index 69fe2fb71cfa..130be9346feb 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ View [Component Encyclopedia](https://storybook.js.org/showcase) to see how lead Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz. -Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. +Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. ### Community @@ -135,7 +135,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story | [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI | | [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook | -See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support) +See [Addon / Framework Support Table](https://storybook.js.org/docs/api/frameworks-feature-support) ### Deprecated Addons diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md index 7ff0d885ec0a..9d8a9c17884a 100755 --- a/code/addons/a11y/README.md +++ b/code/addons/a11y/README.md @@ -2,7 +2,7 @@ This Storybook addon can be helpful to make your UI components more accessible. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/a11y/docs/screenshot.png) @@ -164,7 +164,7 @@ MyNonCheckedStory.parameters = { ## Parameters For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure). -You can override these options [at story level too](https://storybook.js.org/docs/react/configure/features-and-behavior#per-story-options). +You can override these options [at story level too](https://storybook.js.org/docs/configure/features-and-behavior#per-story-options). ```js import React from 'react'; diff --git a/code/addons/actions/ADVANCED.md b/code/addons/actions/ADVANCED.md index 7cca56342dee..d71320209288 100644 --- a/code/addons/actions/ADVANCED.md +++ b/code/addons/actions/ADVANCED.md @@ -1,6 +1,6 @@ ## Advanced/Legacy Actions usage -For basic usage, see the [documentation](https://storybook.js.org/docs/react/essentials/actions). +For basic usage, see the [documentation](https://storybook.js.org/docs/essentials/actions). This document describes the pre-6.0 usage of the addon, and as such is no longer recommended (although it will be supported until at least 7.0). diff --git a/code/addons/actions/README.md b/code/addons/actions/README.md index 71bf4a2f53d6..edd8891387b2 100644 --- a/code/addons/actions/README.md +++ b/code/addons/actions/README.md @@ -2,19 +2,19 @@ Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/actions/docs/screenshot.png) ## Installation -Actions is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-actions ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project): ```js export default { @@ -24,4 +24,4 @@ export default { ## Usage -The basic usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md). +The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md). diff --git a/code/addons/backgrounds/README.md b/code/addons/backgrounds/README.md index 62c88e19a7e7..1d509b0b6d9f 100644 --- a/code/addons/backgrounds/README.md +++ b/code/addons/backgrounds/README.md @@ -2,13 +2,13 @@ Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif) ## Installation -Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-backgrounds @@ -16,7 +16,7 @@ npm i -D @storybook/addon-backgrounds ## Configuration -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project): ```js export default { @@ -26,4 +26,4 @@ export default { ## Usage -The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/backgrounds). +The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/backgrounds). diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md index cb37957a0766..6ca8d4e9554b 100644 --- a/code/addons/controls/README.md +++ b/code/addons/controls/README.md @@ -2,19 +2,19 @@ [Storybook](https://storybook.js.org) Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/controls/docs/media/addon-controls-hero.gif) ## Installation -Controls is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Controls is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-controls ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project): ```js export default { @@ -24,7 +24,7 @@ export default { ## Usage -The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/controls). +The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/controls). ## FAQs @@ -92,7 +92,7 @@ export const Reflow = () => { }; ``` -And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args): +And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/essentials/controls#fully-custom-args): ```jsx export const Reflow = ({ count, label, ...args }) => ( @@ -123,7 +123,7 @@ Reflow.argTypes = { There are a few known cases where controls can't be auto-generated: -- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/react/api/frameworks-feature-support) +- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/api/frameworks-feature-support) - You're trying to generate controls for a component defined in an external library With a little manual work you can still use controls in such cases. Consider the following example: @@ -147,7 +147,7 @@ Basic.args = { }; ``` -The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/react/essentials/controls#annotation) for a full list of control types. +The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/essentials/controls#annotation) for a full list of control types. It's also possible that your Storybook is misconfigured. If you think this might be the case, please search through Storybook's [Github issues](https://github.com/storybookjs/storybook/issues), and file a new issue if you don't find one that matches your use case. @@ -172,7 +172,7 @@ CustomControls.argTypes = { }; ``` -Like [story parameters](https://storybook.js.org/docs/react/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations. +Like [story parameters](https://storybook.js.org/docs/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations. ### How do controls work with MDX? diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 9a9a3debad2a..0d59feff4505 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -76,7 +76,7 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support: -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) **Note:** `#` = WIP support @@ -156,11 +156,11 @@ export default { `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`. -> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. +> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. ## TypeScript configuration -As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md). +As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md). ## More resources diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md index 8a8da1fc773a..a4b1d584b2fa 100644 --- a/code/addons/docs/docs/docspage.md +++ b/code/addons/docs/docs/docspage.md @@ -34,7 +34,7 @@ However, `DocsPage` brings the following improvements: Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories. -Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf): +Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf): ```js import { Badge } from './Badge'; diff --git a/code/addons/docs/docs/mdx.md b/code/addons/docs/docs/mdx.md index 50039fd7fa6e..cc871d1cd2aa 100644 --- a/code/addons/docs/docs/mdx.md +++ b/code/addons/docs/docs/mdx.md @@ -149,7 +149,7 @@ You can also use the rest of the MDX features in conjunction with embedding. Tha ## Decorators and parameters -To add [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) in MDX: +To add [decorators](https://storybook.js.org/docs/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/writing-stories/parameters) in MDX: ```md -These controls are implemented appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`. +These controls are implemented appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`. **DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column: @@ -83,7 +83,7 @@ export const WithControls = (args) => ; ``` -For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/react/essentials/controls). +For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/essentials/controls). ## Customization @@ -187,7 +187,7 @@ This would render a row with a modified description, a type display with a dropd > - `type: 'number'` is shorthand for `type: { name: 'number' }` > - `control: 'radio'` is shorthand for `control: { type: 'radio' }` -Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/react/essentials/controls#configuration). +Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/essentials/controls#configuration). Here are the possible customizations for the rest of the prop table: @@ -200,7 +200,7 @@ Here are the possible customizations for the rest of the prop table: | `table.type.detail` | A longer version of the type (if it's a complex type) | | `table.defaultValue.summary` | A short version of the default value | | `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) | -| `control` | See [`addon-controls` README](https://storybook.js.org/docs/react/essentials/controls#configuration) | +| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) | ### Custom ArgTypes in MDX diff --git a/code/addons/docs/docs/recipes.md b/code/addons/docs/docs/recipes.md index df2892df89e4..c8e939fa96e1 100644 --- a/code/addons/docs/docs/recipes.md +++ b/code/addons/docs/docs/recipes.md @@ -279,7 +279,7 @@ These two methods are complementary. The former is useful for story-specific, an What happens if you want to add some wrapper for your MDX page, or add some other kind of React context? -When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `` block, decorators no longer apply, and you need to use the `docs.container` parameter. +When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `` block, decorators no longer apply, and you need to use the `docs.container` parameter. The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page: diff --git a/code/addons/docs/docs/theming.md b/code/addons/docs/docs/theming.md index a570ba61073a..5f190a584988 100644 --- a/code/addons/docs/docs/theming.md +++ b/code/addons/docs/docs/theming.md @@ -9,7 +9,7 @@ ## Storybook theming -Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/react/configure/theming), but is themed independently from the main UI. +Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/configure/theming), but is themed independently from the main UI. Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`: diff --git a/code/addons/essentials/README.md b/code/addons/essentials/README.md index bdc351de5b74..4050ce64d57c 100644 --- a/code/addons/essentials/README.md +++ b/code/addons/essentials/README.md @@ -2,7 +2,7 @@ Storybook Essentials is a curated collection of addons to bring out the best of Storybook. -Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/react/api/frameworks-feature-support) for all of the officially supported frameworks. +Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/api/frameworks-feature-support) for all of the officially supported frameworks. ## Contents diff --git a/code/addons/gfm/README.md b/code/addons/gfm/README.md index 038d46c44d40..7397d2f345b8 100644 --- a/code/addons/gfm/README.md +++ b/code/addons/gfm/README.md @@ -6,6 +6,6 @@ The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Story > This addon will likely be removed in a future version. It's recommended you read this document and follow its instructions instead: -https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm +https://storybook.js.org/docs/writing-docs/mdx#lack-of-github-flavored-markdown-gfm Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. diff --git a/code/addons/gfm/src/index.ts b/code/addons/gfm/src/index.ts index ecfc725fc231..b6a056ea4d0a 100644 --- a/code/addons/gfm/src/index.ts +++ b/code/addons/gfm/src/index.ts @@ -13,7 +13,7 @@ export const mdxLoaderOptions = async (config: any) => { deprecate(dedent` The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version. It's recommended you read this document: - https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm + https://storybook.js.org/docs/writing-docs/mdx#lack-of-github-flavored-markdown-gfm Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. `); diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md index e4b245acc5fd..94e2ceea098e 100644 --- a/code/addons/highlight/README.md +++ b/code/addons/highlight/README.md @@ -8,7 +8,7 @@ Use it to call attention to particular parts of the story. Or use it to enhance ## Usage -This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command: +This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command: yarn: diff --git a/code/addons/interactions/README.md b/code/addons/interactions/README.md index 6167242008f9..c0b462b0b39d 100644 --- a/code/addons/interactions/README.md +++ b/code/addons/interactions/README.md @@ -58,4 +58,4 @@ message when a DOM element can't be found, it will also ensure your play functio Any `args` that are marked as an `action` (typically via `argTypes` or `argTypesRegex`) will be automatically wrapped in a [Jest mock function](https://jestjs.io/docs/jest-object#jestfnimplementation) so you can assert invocations. See -[addon-actions](https://storybook.js.org/docs/react/essentials/actions) for how to setup actions. +[addon-actions](https://storybook.js.org/docs/essentials/actions) for how to setup actions. diff --git a/code/addons/interactions/src/components/InteractionsPanel.tsx b/code/addons/interactions/src/components/InteractionsPanel.tsx index 6fad03daaf48..8f8647faeeb1 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.tsx @@ -138,7 +138,7 @@ export const InteractionsPanel: React.FC = React.memo( No interactions found diff --git a/code/addons/jest/README.md b/code/addons/jest/README.md index 50678d636094..9ce3a7835f86 100644 --- a/code/addons/jest/README.md +++ b/code/addons/jest/README.md @@ -2,7 +2,7 @@ Storybook addon for inspecting Jest unit test results. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) [![Storybook Jest Addon Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/jest/docs/storybook-addon-jest.gif)](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel) @@ -20,7 +20,7 @@ Or if you're using yarn as a package manager: ## Configuration -Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project): ```js export default { @@ -84,7 +84,7 @@ Assuming that you have already created a test file for your component (e.g., `My ### Story-level -In your story file, add a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) to your story's default export to display the results: +In your story file, add a [decorator](https://storybook.js.org/docs/writing-stories/decorators) to your story's default export to display the results: ```js // MyComponent.stories.js|jsx @@ -102,7 +102,7 @@ export default { }; ``` -You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters), for example: +You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/writing-stories/parameters), for example: ```js // MyComponent.stories.js|jsx @@ -133,7 +133,7 @@ Default.parameters = { ### Global level To avoid importing the results of the tests in each story, you can update -your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: +your [`.storybook/preview.js`](https://storybook.js.org/docs/configure/#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: ```js // .storybook/preview.js diff --git a/code/addons/links/README.md b/code/addons/links/README.md index 8b8d94afff28..c4f4cb3ac6a4 100644 --- a/code/addons/links/README.md +++ b/code/addons/links/README.md @@ -2,7 +2,7 @@ The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ## Getting Started diff --git a/code/addons/measure/README.md b/code/addons/measure/README.md index ca1387d474c8..985e4a72342d 100644 --- a/code/addons/measure/README.md +++ b/code/addons/measure/README.md @@ -12,7 +12,7 @@ Storybook addon for inspecting layouts and visualizing the box model. ## Usage -This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-measure diff --git a/code/addons/outline/README.md b/code/addons/outline/README.md index 301c140c3cff..c694fd947303 100644 --- a/code/addons/outline/README.md +++ b/code/addons/outline/README.md @@ -6,13 +6,13 @@ Storybook Addon Outline can be used for visually debugging CSS layout and alignm ## Usage -Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-outline ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/storyshots-core/README.md b/code/addons/storyshots-core/README.md index 8a20edd2c7f3..88a4b831e98e 100644 --- a/code/addons/storyshots-core/README.md +++ b/code/addons/storyshots-core/README.md @@ -2,7 +2,7 @@ StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storybook.js.org/). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ![StoryShots In Action](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storyshots/storyshots-core/docs/storyshots-fail.png) @@ -470,7 +470,7 @@ Whenever you change your data requirements by adding (and rendering) or (acciden ## Using a custom directory -Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/writing-tests/snapshot-testing). +Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/writing-tests/snapshot-testing). ## Options @@ -718,7 +718,7 @@ Like the default, but allows you to specify a set of options for the renderer, j ### `multiSnapshotWithOptions(options)` Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, you can pass an empty object. -If you use [Component Story Format](https://storybook.js.org/docs/react/api/csf), you may also need to add an additional Jest transform to automate detecting story file names: +If you use [Component Story Format](https://storybook.js.org/docs/api/csf), you may also need to add an additional Jest transform to automate detecting story file names: ```js // jest.config.js diff --git a/code/addons/storysource/README.md b/code/addons/storysource/README.md index e460cc6ac058..43e0e962f3c6 100644 --- a/code/addons/storysource/README.md +++ b/code/addons/storysource/README.md @@ -2,7 +2,7 @@ This addon is used to show stories source in the addon panel. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ![Storysource Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/demo.gif) @@ -56,7 +56,7 @@ To customize the `source-loader`, pass `loaderOptions`. Valid configurations are ## Theming -Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/react/configure/theming) for more information. +Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/configure/theming) for more information. ![Storysource Light/Dark Themes](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/theming-light-dark.png) diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md index 5ed36f2c4050..073011a59358 100644 --- a/code/addons/themes/README.md +++ b/code/addons/themes/README.md @@ -12,7 +12,7 @@ Requires Storybook 7.0 or later. If you need to add it to your Storybook, you ca npm i -D @storybook/addon-themes ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project): ```js export default { diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md index b6cf730ab141..487376e57949 100644 --- a/code/addons/toolbars/README.md +++ b/code/addons/toolbars/README.md @@ -6,19 +6,19 @@ The Toolbars addon controls global story rendering options from [Storybook's](ht - set your components' internationalization (i18n) locale - configure just about anything in Storybook that makes use of a global variable -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/toolbars/docs/hero.gif) ## Installation -Toolbars is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Toolbars is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-toolbars ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project): ```js export default { @@ -28,7 +28,7 @@ export default { ## Usage -The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/toolbars-and-globals). +The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/toolbars-and-globals). ## FAQs @@ -40,6 +40,6 @@ The primary difference between the two packages is that `addon-toolbars` makes u - **Standardization**. Args are built into Storybook in 6.x. Since `addon-toolbars` is based on args, you don't need to learn any addon-specific APIs to use it. -- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons. +- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons. * **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon. diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md index 196c5e0b0aa5..9a43bc10456a 100644 --- a/code/addons/viewport/README.md +++ b/code/addons/viewport/README.md @@ -2,19 +2,19 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/api/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/viewport/docs/viewport.png) ## Installation -Viewport is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Viewport is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-viewport ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project): ```js export default { @@ -26,4 +26,4 @@ You should now be able to see the viewport addon icon in the the toolbar at the ## Usage -The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/viewport). +The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/viewport). diff --git a/code/frameworks/angular/README.md b/code/frameworks/angular/README.md index d97e1ab93f2a..5fab422b76ad 100644 --- a/code/frameworks/angular/README.md +++ b/code/frameworks/angular/README.md @@ -316,9 +316,9 @@ In this case you have to adjust your `angular.json` and `package.json` as descri You can run `npx sb init` sequentially for each project to setup Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`. -You can then use [Storybook composition](https://storybook.js.org/docs/angular/sharing/storybook-composition) to composite multiple Storybooks into one. +You can then use [Storybook composition](https://storybook.js.org/docs/sharing/storybook-composition) to composite multiple Storybooks into one. --- Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/angular/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. +You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json index 6b614e574172..b56cda373376 100644 --- a/code/frameworks/angular/src/builders/build-storybook/schema.json +++ b/code/frameworks/angular/src/builders/build-storybook/schema.json @@ -46,7 +46,7 @@ }, "docs": { "type": "boolean", - "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.", + "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/writing-docs/build-documentation#preview-storybooks-documentation.", "default": false }, "test": { diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json index 2b98bab9039c..74d4eba49ad5 100644 --- a/code/frameworks/angular/src/builders/start-storybook/schema.json +++ b/code/frameworks/angular/src/builders/start-storybook/schema.json @@ -78,7 +78,7 @@ }, "docs": { "type": "boolean", - "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.", + "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/writing-docs/build-documentation#preview-storybooks-documentation.", "default": false }, "compodoc": { diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts index 8f280fb0c763..3809c0e3dd19 100644 --- a/code/frameworks/angular/template/cli/Button.stories.ts +++ b/code/frameworks/angular/template/cli/Button.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; import Button from './button.component'; -// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories const meta: Meta