diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 2b74e6d0dcf8..ab9b81c9a756 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -1,40 +1,40 @@ body: -- type: markdown - id: intro - attributes: - value: | - Thanks for taking the time to start a new discussion! - - ### Before you post - Check if someone has already asked/answered your question in a previous discussion. - - ### When you're ready to post - Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users. + - type: markdown + id: intro + attributes: + value: | + Thanks for taking the time to start a new discussion! -- type: textarea - id: summary - attributes: - label: Summary - description: How can we help? - validations: - required: true - -- type: textarea - id: additional-info - attributes: - label: Additional information - description: | - Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong. + ### Before you post + Check if someone has already asked/answered your question in a previous discussion. - P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster. - validations: - required: false - -- type: input - id: reproduction - attributes: - label: Create a reproduction - description: | - Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). Learn more about creating a reproduction [here](https://storybook.js.org/docs/react/contribute/how-to-reproduce). - validations: - required: false + ### When you're ready to post + Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users. + + - type: textarea + id: summary + attributes: + label: Summary + description: How can we help? + validations: + required: true + + - type: textarea + id: additional-info + attributes: + label: Additional information + description: | + Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong. + + P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster. + validations: + required: false + + - type: input + id: reproduction + attributes: + label: Create a reproduction + description: | + Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). Learn more about creating a reproduction [here](https://storybook.js.org/docs/react/contribute/how-to-reproduce/). + validations: + required: false diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index a31684580dca..19f7e75ca8d3 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -19,7 +19,7 @@ body: attributes: label: Reproduction link description: >- - Please provide a link to a reproduction of the issue. We accept reproductions hosted on GitHub, CodeSandbox, and StackBlitz. Due to the high volume of reports, we prioritize those with clear reproductions. The easiest way to create a reproduction is to use [storybook.new](https://storybook.new). For detailed guidance, please refer to our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce). + Please provide a link to a reproduction of the issue. We accept reproductions hosted on GitHub, CodeSandbox, and StackBlitz. Due to the high volume of reports, we prioritize those with clear reproductions. The easiest way to create a reproduction is to use [storybook.new](https://storybook.new). For detailed guidance, please refer to our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce/). Important: If the provided URL is invalid (e.g., 404 error or private repository), we may close the issue. Thank you for your understanding! validations: diff --git a/.github.amrom.workers.devments/good-first-issue.md b/.github.amrom.workers.devments/good-first-issue.md index ff2aa8c0873f..44d050c7457d 100644 --- a/.github.amrom.workers.devments/good-first-issue.md +++ b/.github.amrom.workers.devments/good-first-issue.md @@ -2,7 +2,7 @@ The issue was marked with the `good first issue` label by a maintainer. This means that it is a good candidate for someone interested in contributing to the project, but does not know where to start. -To get started, read the [Contributing Guide](https://storybook.js.org/docs/contribute/how-to-contribute). When you are ready, open a PR and link back to this issue in the form of adding `Fixes #1234` to the PR description, where `1234` is the issue number. This will automatically close the issue when the PR gets merged, making it easier for us to keep track of what has been fixed. +To get started, read the [Contributing Guide](https://storybook.js.org/docs/contribute/how-to-contribute/). When you are ready, open a PR and link back to this issue in the form of adding `Fixes #1234` to the PR description, where `1234` is the issue number. This will automatically close the issue when the PR gets merged, making it easier for us to keep track of what has been fixed. Please remember to add tests to confirm your code changes will fix the issue and we do not regress in the future. diff --git a/.github.amrom.workers.devments/invalid-link.md b/.github.amrom.workers.devments/invalid-link.md index 51b084dfe35d..58435bc07867 100644 --- a/.github.amrom.workers.devments/invalid-link.md +++ b/.github.amrom.workers.devments/invalid-link.md @@ -45,6 +45,6 @@ Upvoting issues to show your interest will help us prioritize and address them a ### Useful Resources -- [Create a Storybook reproduction](https://storybook.js.org/docs/react/contribute/how-to-reproduce) +- [Create a Storybook reproduction](https://storybook.js.org/docs/react/contribute/how-to-reproduce/) - [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) -- [Contributing to Storybook](https://storybook.js.org/docs/contribute/how-to-contribute) +- [Contributing to Storybook](https://storybook.js.org/docs/contribute/how-to-contribute/) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 034296f85bf4..9d902664acba 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,16 +1,16 @@ # Contributors Guide -> Tip: If you want to make a fast contribution, check the “good first issue” label in the Issues tab for small frontend and docs tasks that are easy to fix directly on GitHub. +> Tip: If you want to make a fast contribution, check the “good first issue” label in the Issues tab for small frontend and docs tasks that are easy to fix directly on GitHub. We welcome contributions of any type and skill level. As an open-source project, we believe in the power of community and welcome any contributions that help us improve Storybook. Whether you are a developer, designer, writer, or someone who wants to help, we'd love to have you on board. If you are interested in contributing, please read the following guidelines. -Whether you're new to open source or a seasoned contributor, we welcome all contributions. Here are a few ways you can contribute to Storybook: +Whether you're new to open source or a seasoned contributor, we welcome all contributions. Here are a few ways you can contribute to Storybook: -- [Create an RFC](https://storybook.js.org/docs/contribute/RFC) for feature requests -- Update our [documentation](https://storybook.js.org/docs/contribute/documentation/documentation-updates) with fixes, improvements, or clarifications -- Add [new examples](https://storybook.js.org/docs/contribute/documentation/new-snippets) of code snippets for using Storybook with a JS framework -- [Integrate Storybook with a JS framework](https://storybook.js.org/docs/contribute/framework) or improve support of existing frameworks -- [Write an addon](https://storybook.js.org/docs/addons) to extend Storybook's functionality +- [Create an RFC](https://storybook.js.org/docs/contribute/RFC/) for feature requests +- Update our [documentation](https://storybook.js.org/docs/contribute/documentation/documentation-updates/) with fixes, improvements, or clarifications +- Add [new examples](https://storybook.js.org/docs/contribute/documentation/new-snippets/) of code snippets for using Storybook with a JS framework +- [Integrate Storybook with a JS framework](https://storybook.js.org/docs/contribute/framework/) or improve support of existing frameworks +- [Write an addon](https://storybook.js.org/docs/addons/) to extend Storybook's functionality If you're not sure where to start, you can always help us by: @@ -20,26 +20,26 @@ If you're not sure where to start, you can always help us by: > **Note**: Before you start contributing, please read the [Code of Conduct](./CODE_OF_CONDUCT.md) and reach out to the maintainers if you have any questions or concerns about the project or the contribution process on the [`#contributing`](https://discord.com/channels/486522875931656193/839297503446695956) channel on Discord. -## Quick guide +## Quick guide -### Prerequisites +### Prerequisites Storybook is developed against a specific Node.js version specified in the `.nvmrc` file. You can use any version manager to install the correct version of Node.js. We recommend using [fnm](https://github.com/Schniz/fnm). 1. Check if you have the correct version of Node.js installed by running the following command: - - ```shell - # Check which version you're using - node --version - # node version manager - nvm use 22 - # pnpm - pnpm env use --global 22 - ``` + +```shell +# Check which version you're using +node --version +# node version manager +nvm use 22 +# pnpm +pnpm env use --global 22 +``` 2. Install [fnm](https://github.com/Schniz/fnm/tree/master?tab=readme-ov-file#installation) and adjust your shell configuration to include the following parameters: `fnm env`, `use-on-cd`, `corepack-enabled`, and `version-file-strategy recursive`. - + ```shell eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)" ``` @@ -129,7 +129,7 @@ Here's a highlight of notable directories and files: └── yarn.lock ``` -### Fork the repository +### Fork the repository If you plan to contribute to Storybook's codebase, you should fork the repository to your GitHub account. This will allow you to make changes to the codebase and submit a pull request to the main repository when you're ready to contribute your changes. @@ -141,52 +141,52 @@ git fetch upstream git branch --set-upstream-to upstream/main main ``` -### Running the local development environment +### Running the local development environment If you're interested in contributing to Storybook's codebase, you can run it locally to get a feel for the codebase and the development environment. To get started with the development environment, you should always run `yarn start` from the root directory. Running `yarn start` will install the required dependencies, build the project, including the packages, and generate a sandbox environment using React with TypeScript with a set of test stories to help you get started. ```shell -# Navigate to the root directory of the Storybook repository -cd path/to/your/storybook/fork +# Navigate to the root directory of the Storybook repository +cd path/to/your/storybook/fork -# Install the required dependencies and start the development environment +# Install the required dependencies and start the development environment yarn start ``` You don't need to install the dependencies manually to get the project running. The `yarn start` command will install the required dependencies for you. -### Making code changes +### Making code changes -If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following: +If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following: 1. In a second terminal, run `yarn build --watch ` in the `code/` directory. -For example, if you want to build the `@storybook/react`, `@storybook/core-server`, `@storybook/api`, and `@storybook/addon-docs` packages, you would run: +For example, if you want to build the `@storybook/react`, `@storybook/core-server`, `@storybook/api`, and `@storybook/addon-docs` packages, you would run: -```shell -# Navigate to the code directory -cd path/to/your/storybook/fork/code +````shell +# Navigate to the code directory +cd path/to/your/storybook/fork/code -# Build the specified packages in watch mode -yarn build --watch react core-server api addon-docs +# Build the specified packages in watch mode +yarn build --watch react core-server api addon-docs Most package names can be found after `@storybook/` in the published package. For instance, to build the `@storybook/react @storybook/core-server @storybook/api @storybook/addon-docs` packages at the same time in watch mode: -```shell -cd code yarn build --watch react core-server api addon-docs -``` +```shell +cd code yarn build --watch react core-server api addon-docs +```` -2. If you are running the sandbox in ["linked"](https://yarnpkg.com/cli/link) mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages) +2. If you are running the sandbox in ["linked"](https://yarnpkg.com/cli/link) mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages) -3. If you are running the sandbox in "unlinked" mode, you'll need to rerun the sandbox from the `publish` step to see the changes: +3. If you are running the sandbox in "unlinked" mode, you'll need to rerun the sandbox from the `publish` step to see the changes: -```shell -yarn task --task dev --template --start-from=publish -``` +```shell +yarn task --task dev --template --start-from=publish +``` -4. If you have made any changes inside `/code` or other packages, remember to run `yarn test` inside the package to ensure that your changes do not break any tests. +4. If you have made any changes inside `/code` or other packages, remember to run `yarn test` inside the package to ensure that your changes do not break any tests. ### Angular-specific code @@ -202,30 +202,30 @@ yarn task --prod yarn build --prod --watch angular core addon-docs ``` -### Running against different sandbox templates +### Running against different sandbox templates You can pick a specific template to use as your sandbox by running `yarn task`, which will prompt you to make further choices about which template you want and which task you want to run. -## Troubleshooting +## Troubleshooting -### The initialization process throws an error +### The initialization process throws an error -If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time: +If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time: -```shell -> NX ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json' +```shell +> NX ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json' ``` -### Storybook doesn't detect changes in the codebase +### Storybook doesn't detect changes in the codebase -If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command: +If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command: -```shell -git clean -dx --dry-run -``` +```shell +git clean -dx --dry-run +``` By executing this command, you can see which untracked or ignored files and directories will be removed from your working directory if you run it with the `--force` flag. Before running the command with the `--force` flag, please commit any local changes you want to keep. Otherwise, they will be lost. -## Contributing to Storybook +## Contributing to Storybook -For further advice on contributing, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute). +For further advice on contributing, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute/). diff --git a/MIGRATION.md b/MIGRATION.md index ba81b2731579..93c0b51fb52f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -518,7 +518,6 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) - ## From version 10.0.0 to 10.1.0 ### API and Component Changes @@ -526,6 +525,7 @@ #### Button Component API Changes ##### Added: ariaLabel + The Button component now has an `ariaLabel` prop, to ensure that Storybook UI code is accessible to screenreader users. The prop will become mandatory in Storybook 11. When buttons have text content as children, and when that text content does not rely on visual context to be understood, you may pass `false` to the `ariaLabel` prop to indicate that an ARIA label is not necessary. @@ -557,15 +557,16 @@ IconButton will be removed in future versions. The `Bar` component's internal layout has changed, to fix a height bug in scrollable bars. It now applies flex positioning and applies a default item gap, that can be controlled with the `innerStyle` prop. You may see slight changes in default padding as a result of this change. ##### Added: innerStyle + When `scrollable` is set to `true`, `Bar` now adds an inner container that is used to ensure the scrollbar size does not impact the height of the bar. This inner container displays as 'flex' and has the following default style: ```css - width: 100%; - min-height: 40; - display: flex; - align-items: center; - gap: 6px; - padding-inline: 6px; +width: 100%; +min-height: 40; +display: flex; +align-items: center; +gap: 6px; +padding-inline: 6px; ``` The inner container's style can be overridden by passing CSS properties to `innerStyle`. @@ -597,18 +598,23 @@ The `TabBar` component, a styled bar used inside `Tabs` and not intended to be p #### Modal Component API Changes ##### Deprecated: onInteractOutside + The `onInteractOutside` prop is deprecated in favor of `dismissOnClickOutside`, because it was only used to close the modal when clicking outside. Use `dismissOnClickOutside` to control whether clicking outside the modal should close it or not. ##### Deprecated: onEscapeKeyDown + The `onEscapeKeyDown` prop is deprecated in favor of `dismissOnEscape`, because it was only used to close the modal when pressing Escape. Use `dismissOnEscape` to control whether pressing Escape should close it or not. ##### Added: `ariaLabel` + Modal elements must have a title to be accessible. Set that title through the `ariaLabel` prop. It will become mandatory in Storybook 11. ##### Renamed: Modal.Dialog.Close and Modal.CloseButton + The `Modal.Dialog.Close` component and `Modal.CloseButton` components are replaced by `Modal.Close` for consistency with other components. Those names are deprecated and will be removed in Storybook 11. You may call `` for a default close button, or `...` to wrap your own custom button. The `Modal.Close` component no longer requires an `onClick` handler to close the modal. It will automatically close the modal when clicked. If you need to perform additional actions when the close button is clicked, you can still provide an `onClick` handler, and it will be called in addition to closing the modal. + #### ListItem, TooltipLinkList and TooltipMessage are deprecated The ListItem and TooltipLinkList components were used in Storybook to make menus, and TooltipMessage to make message popovers. However, WithTooltip does not support keyboard interactions, so these components were not accessible. @@ -626,34 +632,41 @@ PopoverProvider is based on react-aria. It must have a single child that acts as The WithTooltip component has been reimplemented from the ground up, under the new name `TooltipProvider`. The new implementation will replace `WithTooltip` entirely in Storybook 11. Below is a summary of the changes between both APIs, which will take full effect in Storybook 11. ##### Removed: trigger + The `trigger` prop was removed to enforce better accessibility compliance. WithTooltip must not be triggered on click, as it is not reachable by keyboard. Buttons that open a popover, menu or select must use appropriate components instead. #### Added: triggerOnFocusOnly + The `triggerOnFocusOnly` prop was added. When set, tooltips will only show on focus. Use this to provide keyboard navigation hints to keyboard users. Do not use it for other purposes. #### Renamed: startOpen + The `startOpen` prop was renamed `defaultVisible` to match naming in other components that expose both controlled and uncontrolled visibility. The `startOpen` prop will be removed in future versions. #### Removed: svg, strategy, withArrows, mutationObserverOptions + These prop were not used inside Storybook and have been removed. #### Removed: hasChrome + The `hasChrome` prop was removed because it should be handled by the tooltip being shown instead. Popover and Tooltip both have a `hasChrome` prop. TooltipNote never needs this prop and does not have it. #### Removed: closeOnTriggerHidden, followCursor, closeOnOutsideClick + The `closeOnTriggerHidden`, `followCursor` and `closeOnOutsideClick` prop has been removed. WithTooltip will now authoritatively decide when and where to show or hide its tooltip. It will always close on clicks outside the tooltip, because tooltips should never be modal. #### Removed: interactive + Thed `interactive` prop has been removed as it does not align with our vision for accessible components with a well-defined role. Use PopoverProvider instead of WithTooltip to show interactive overlays. ##### Other changes + The underlying implementation was switched from Popper.js to react-aria. Due to these changes, WithTooltip must now have a single child that has a focusable role and that can receive React refs. Wrap your trigger component in `forwardRef` if you notice placement issues for your tooltip. #### WithTooltipPure and WithTooltipState are deprecated Instead, use `WithTooltipNew` in Storybook 10, or `WithTooltip` in Storybook 11 or newer. For a controlled tooltip, use the `onVisibleChange` and `visible` props. For an uncontrolled tooltip with a default open state, use the `defaultVisible` prop. - ## From version 9.x to 10.0.0 ### Core Changes @@ -728,20 +741,23 @@ A `main.ts` file that's CJS is no longer supported. The same applies to any cust Additionally, **extensionless relative imports are no longer supported** in JavaScript-based configuration files (`.storybook/main.js`) and custom presets. All relative imports must now include explicit file extensions. **Before (no longer works):** + ```js // .storybook/main.js -import myPreset from './my-file'; +import myPreset from "./my-file"; ``` **After:** + ```js // .storybook/main.js -import myPreset from './my-file.js'; +import myPreset from "./my-file.js"; ``` This change aligns with Node.js ESM requirements, where relative imports must specify the full file extension. This applies to `.storybook/main.js` and any custom preset files. While TypeScript-based files (`.storybook/main.ts`) will continue to work with extensionless imports for now through automatic resolution, we recommend migrating to explicit extensions for consistency and better compatibility. **Recommended approach for all files:** + - Use `.js` for JavaScript files - Use `.mjs` for ES modules - Use `.ts` for TypeScript files @@ -799,8 +815,9 @@ export const core = { ``` #### Removed x-only builtin tags -During development of Storybook [Tags](https://storybook.js.org/docs/writing-stories/tags), we created `dev-only`, `docs-only`, and `test-only` built-in tags. These tags were never documented and superseded by the currently-documented `dev`, `autodocs`, and `test` tags which provide more precise control. The outdated `x-only` tags are removed in 10.0. -During development of Storybook [Tags](https://storybook.js.org/docs/writing-stories/tags), we created `dev-only`, `docs-only`, and `test-only` built-in tags. These tags were never documented and superceded by the currently-documented `dev`, `autodocs`, and `test` tags which provide more precise control. The outdated `x-only` tags are removed in 10.0. + +During development of Storybook [Tags](https://storybook.js.org/docs/writing-stories/tags/), we created `dev-only`, `docs-only`, and `test-only` built-in tags. These tags were never documented and superseded by the currently-documented `dev`, `autodocs`, and `test` tags which provide more precise control. The outdated `x-only` tags are removed in 10.0. +During development of Storybook [Tags](https://storybook.js.org/docs/writing-stories/tags/), we created `dev-only`, `docs-only`, and `test-only` built-in tags. These tags were never documented and superceded by the currently-documented `dev`, `autodocs`, and `test` tags which provide more precise control. The outdated `x-only` tags are removed in 10.0. ## From version 8.x to 9.0.0 @@ -1409,7 +1426,7 @@ export default { }; ``` -For more details, please refer to the [Svelte & Vite documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-vite). +For more details, please refer to the [Svelte & Vite documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-vite/). #### Svelte: Dropped automatic docgen for events and slots @@ -1621,7 +1638,7 @@ export default { ### Added source code panel to docs -Storybook Docs (`@storybook/addon-docs`) now can automatically add a new addon panel to stories that displays a source snippet beneath each story. This is an experimental feature that works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource). +Storybook Docs (`@storybook/addon-docs`) now can automatically add a new addon panel to stories that displays a source snippet beneath each story. This is an experimental feature that works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks/#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource/). To enable this globally, add the following line to your project configuration. You can also configure at the component/story level. @@ -1638,9 +1655,9 @@ export default { ### Addon-a11y: Component test integration -In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook. +In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon/) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook. -In Storybook 8.5, we revamped the [Accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing) (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests. +In Storybook 8.5, we revamped the [Accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing/) (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests. If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the Test addon installed, adjust your configuration as follows: @@ -2179,7 +2196,7 @@ If you were using the [legacy MDX1 format](#legacy-mdx1-support), you will have Alongside with this change, the `jsxOptions` configuration was removed as it is not used anymore. -[More info here](https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf). +[More info here](https://storybook.js.org/docs/migration-guide/#storiesmdx-to-mdxcsf). #### Dropping support for id, name and story in Story block @@ -2286,7 +2303,7 @@ In Storybook 8, we have dropped Node.js 16 support since it reached end-of-life #### Autotitle breaking fixes -In Storybook 7, the file name `path/to/foo.bar.stories.js` would result in the [autotitle](https://storybook.js.org/docs/react/configure/overview#configure-story-loading) `path/to/foo`. In 8.0, this has been changed to generate `path/to/foo.bar`. We consider this a bugfix but it is also a breaking change if you depended on the old behavior. To get the old titles, you can manually specify the desired title in the default export of your story file. For example: +In Storybook 7, the file name `path/to/foo.bar.stories.js` would result in the [autotitle](https://storybook.js.org/docs/configure/overview/#configure-story-loading) `path/to/foo`. In 8.0, this has been changed to generate `path/to/foo.bar`. We consider this a bugfix but it is also a breaking change if you depended on the old behavior. To get the old titles, you can manually specify the desired title in the default export of your story file. For example: ```js export default { @@ -2294,7 +2311,7 @@ export default { }; ``` -Alternatively, if you need to achieve a different behavior for a large number of files, you can provide a [custom indexer](https://storybook.js.org/docs/7.0/vue/configure/sidebar-and-urls#processing-custom-titles) to generate the titles dynamically. +Alternatively, if you need to achieve a different behavior for a large number of files, you can provide a [custom indexer](https://storybook.js.org/docs/7/vue/configure/sidebar-and-urls/#processing-custom-titles) to generate the titles dynamically. #### Storyshots has been removed @@ -2315,11 +2332,11 @@ Finally, storyStoreV7: true (the default and only option in Storybook 8), was no By removing Storyshots, the Storybook team was unblocked from moving (eventually) to an ESM-only Storybook, which is a big step towards a more modern Storybook. -Please check the [migration guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) that we prepared. +Please check the [migration guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide/) that we prepared. #### UI layout state has changed shape -In Storybook 7 it was possible to use `addons.setConfig({...});` to configure Storybook UI features and behavior as documented [here (v7)](https://storybook.js.org/docs/7.3/react/configure/features-and-behavior), [(latest)](https://storybook.js.org/docs/react/configure/features-and-behavior). The state and API for the UI layout has changed: +In Storybook 7 it was possible to use `addons.setConfig({...});` to configure Storybook UI features and behavior as documented [here (v7)](https://storybook.js.org/docs/7.3/react/configure/features-and-behavior/), [(latest)](https://storybook.js.org/docs/react/configure/features-and-behavior/). The state and API for the UI layout has changed: - `showNav: boolean` is now `navSize: number`, where the number represents the size of the sidebar in pixels. - `showPanel: boolean` is now split into `bottomPanelHeight: number` and `rightPanelWidth: number`, where the numbers represents the size of the panel in pixels. @@ -2588,7 +2605,7 @@ const preview: Preview = { export default preview; ``` -To learn more about the available icons and their names, see the [Storybook documentation](https://storybook.js.org/docs/8.0/faq#what-icons-are-available-for-my-toolbar-or-my-addon). +To learn more about the available icons and their names, see the [Storybook documentation](https://storybook.js.org/docs/8/faq/#what-icons-are-available-for-my-toolbar-or-my-addon). #### Removals in @storybook/types @@ -2927,13 +2944,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/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. #### `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. -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/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. That means you can convert an existing story indexer like this: @@ -3531,7 +3548,7 @@ Please follow up the [Configure your Storybook project](https://storybook.js.org #### 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/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. #### Deploying build artifacts @@ -3541,7 +3558,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/react/faq/#i-see-a-no-preview-error-with-a-storybook-production-build) will not work. ##### Dropped support for file URLs @@ -3634,7 +3651,7 @@ Storybook 7 uses `prefers-color-scheme` to detects your system's dark mode prefe Earlier versions used the light theme by default, so if you don't set a theme and your system's settings are in dark mode, this could surprise you. -To learn more about theming, read our [documentation](https://storybook.js.org/docs/react/configure/theming). +To learn more about theming, read our [documentation](https://storybook.js.org/docs/react/configure/theming/). #### `addons.setConfig` should now be imported from `@storybook/manager-api`. @@ -3705,14 +3722,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 @@ -3854,7 +3871,7 @@ In Storybook 7.0 we introduced a convenient package that provides an out of the #### SvelteKit: needs the `@storybook/sveltekit` framework -In Storybook 7.0 we introduced a convenient package that provides an out of the box experience for SvelteKit projects: `@storybook/sveltekit`. Please see the [following resource](https://storybook.js.org/docs/get-started/frameworks/sveltekit?renderer=svelte) to get started with it. +In Storybook 7.0 we introduced a convenient package that provides an out of the box experience for SvelteKit projects: `@storybook/sveltekit`. Please see the [following resource](https://storybook.js.org/docs/get-started/frameworks/sveltekit/?renderer=svelte) to get started with it. For existing users, SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case. @@ -3903,7 +3920,7 @@ Since v7 [drops webpack4 support](#webpack4-support-discontinued), it no longer The `@storybook/html` renderer doesn't dedent the source code when displayed in the "Show Code" source viewer any more. -You can get the same result by setting [the parameter `parameters.docs.source.format = "dedent"`](https://storybook.js.org/docs/7.0/html/api/doc-block-source#format) either on a story level or globally in `preview.js`. +You can get the same result by setting [the parameter `parameters.docs.source.format = "dedent"`](https://storybook.js.org/docs/7.0/html/api/doc-block-source/#format) either on a story level or globally in `preview.js`. ### 7.0 Addon authors changes @@ -5032,7 +5049,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/react/writing-stories/naming-components-and-hierarchy/#sorting-stories). #### v7 Store API changes for addon authors @@ -5113,7 +5130,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/angular/get-started/install/). If you want to know all the available options, please checks the builders' validation schemas : @@ -5407,7 +5424,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/angular/writing-stories/parameters/). To opt out of the new renderer, add the following to `.storybook/preview.ts`: ```ts export const parameters = { @@ -5571,7 +5588,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 @@ -5653,7 +5670,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 @@ -5699,7 +5716,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 superseded 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/react/configure/typescript/). ### Correct globs in main.js @@ -5745,7 +5762,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. @@ -6663,7 +6680,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/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. ## From version 4.1.x to 5.0.x @@ -6704,11 +6721,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/react/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/react/configure/theming/) to learn about the new API. ### Story hierarchy defaults @@ -6740,7 +6757,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/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). Here's an old configuration: @@ -7101,7 +7118,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/react/configure/webpack/), make sure that all the loaders and plugins you use support webpack 4. ### Babel 7 @@ -7213,7 +7230,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 @@ -7283,7 +7300,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 8ace05705106..1cbebabad99b 100644 --- a/README.md +++ b/README.md @@ -78,15 +78,15 @@ Visit [Storybook's website](https://storybook.js.org/?ref=readme) to learn more ### Documentation -Documentation can be found on [Storybook's docs site](https://storybook.js.org/docs?ref=readme). +Documentation can be found on [Storybook's docs site](https://storybook.js.org/docs/?ref=readme). ### Examples -View [Component Encyclopedia](https://storybook.js.org/showcase?ref=readme) to see how leading teams use Storybook. +View [Component Encyclopedia](https://storybook.js.org/showcase/?ref=readme) to see how leading teams use Storybook. 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/configure/user-interface/storybook-addons?ref=readme) 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/user-interface/storybook-addons/?ref=readme) 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 @@ -131,7 +131,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ | [query params](https://github.com/storybookjs/addon-queryparams) | Mock query params | | [viewport](code/core/src/viewport/) | Change display sizes and layouts for responsive components using Storybook | -See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme) +See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support/?ref=readme) To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools. @@ -139,7 +139,7 @@ If you're using info/notes, we highly recommend you migrate to [docs](code/addon If you're using contexts, we highly recommend you migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you. -If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide?ref=readme) to help you. +If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide/?ref=readme) to help you. ## Badges & Presentation materials diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md index deb43df6f3d2..1bbfa9a06819 100755 --- a/code/addons/a11y/README.md +++ b/code/addons/a11y/README.md @@ -10,6 +10,6 @@ The @storybook/addon-a11y package provides accessibility testing for Storybook s npx storybook add @storybook/addon-a11y ``` -[More on getting started with the accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing#accessibility-checks-with-a11y-addon?ref=readme) +[More on getting started with the accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing/#accessibility-checks-with-a11y-addon?ref=readme) Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme). diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 1fbebfb1e446..6b15c842bc56 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/configure/integration/frameworks-feature-support?ref=readme) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support/?ref=readme) **Note:** `#` = WIP support @@ -139,11 +139,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/api/doc-blocks/doc-block-markdown?ref=readme) 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-blocks/doc-block-markdown/?ref=readme) Doc Block for importing Markdown files into your Storybook documentation. ## TypeScript configuration -As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript?ref=readme) 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/integration/typescript/?ref=readme) 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 6fbc55b643ba..4991f04a3c91 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/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 735be0164b8f..5710e84e77c9 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/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/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 to 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`. +These controls are implemented to 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: @@ -82,7 +82,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/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,20 +187,20 @@ 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/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: -| Field | Description | -| ---------------------------- | ---------------------------------------------------------------------------------------------- | -| `name` | The name of the property | -| `type.required` | Whether or not the property is required | -| `description` | A markdown description for the property | -| `table.type.summary` | A short version of the type | -| `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/essentials/controls#configuration) | +| Field | Description | +| ---------------------------- | ----------------------------------------------------------------------------------------------- | +| `name` | The name of the property | +| `type.required` | Whether or not the property is required | +| `description` | A markdown description for the property | +| `table.type.summary` | A short version of the type | +| `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/essentials/controls/#configuration) | ## Reporting a bug diff --git a/code/addons/docs/docs/recipes.md b/code/addons/docs/docs/recipes.md index 4085123e0b7b..7c60632477d4 100644 --- a/code/addons/docs/docs/recipes.md +++ b/code/addons/docs/docs/recipes.md @@ -282,7 +282,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/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 f68f55c67c9e..4eadd613d827 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/configure/user-interface/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/user-interface/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/docs/src/blocks/blocks/Canvas.stories.tsx b/code/addons/docs/src/blocks/blocks/Canvas.stories.tsx index b44d6c82d8b7..a05c61cbc066 100644 --- a/code/addons/docs/src/blocks/blocks/Canvas.stories.tsx +++ b/code/addons/docs/src/blocks/blocks/Canvas.stories.tsx @@ -92,7 +92,7 @@ export const PropAdditionalActions: Story = { { title: 'Go to documentation', onClick: () => { - window.open('https://storybook.js.org/docs/essentials/controls#annotation', '_blank'); + window.open('https://storybook.js.org/docs/essentials/controls/#annotation', '_blank'); }, }, ], diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx index dd6f7a997544..af36a8d0eb3b 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx @@ -72,7 +72,7 @@ export const ArgControl: FC = ({ row, arg, updateArgs, isHovere const canBeSetup = control?.disable !== true && row?.type?.name !== 'function'; return isHovered && canBeSetup ? ( diff --git a/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx b/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx index b8e0b8fbd11e..8f5f44721795 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx @@ -67,7 +67,7 @@ export const Empty: FC = ({ inAddonPanel }) => { {inAddonPanel && ( <> @@ -77,7 +77,7 @@ export const Empty: FC = ({ inAddonPanel }) => { )} {!inAddonPanel && ( diff --git a/code/addons/docs/src/blocks/components/Story.tsx b/code/addons/docs/src/blocks/components/Story.tsx index 5af081fce655..948e1fa5f43b 100644 --- a/code/addons/docs/src/blocks/components/Story.tsx +++ b/code/addons/docs/src/blocks/components/Story.tsx @@ -126,7 +126,7 @@ const Story: FunctionComponent = (props) => { return ( This story mounts inside of play. Set{' '} - + autoplay {' '} to true to view this story. diff --git a/code/addons/docs/src/blocks/examples/CanvasParameters.stories.tsx b/code/addons/docs/src/blocks/examples/CanvasParameters.stories.tsx index c286e07e7bbc..d2371ad7ca7a 100644 --- a/code/addons/docs/src/blocks/examples/CanvasParameters.stories.tsx +++ b/code/addons/docs/src/blocks/examples/CanvasParameters.stories.tsx @@ -30,7 +30,10 @@ export const AdditionalActions: Story = { { title: 'Go to documentation', onClick: () => { - window.open('https://storybook.js.org/docs/essentials/controls#annotation', '_blank'); + window.open( + 'https://storybook.js.org/docs/essentials/controls/#annotation', + '_blank' + ); }, }, ], diff --git a/code/addons/links/README.md b/code/addons/links/README.md index a2c398c3f2bb..d6ca52deb8fb 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?ref=readme). -[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support/?ref=readme) ## Getting Started diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md index 02897915cd06..1430fc2c96dc 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/configure#configure-your-storybook-project?ref=readme): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure/#configure-your-storybook-project?ref=readme): ```js export default { diff --git a/code/addons/vitest/src/components/GlobalErrorModal.stories.tsx b/code/addons/vitest/src/components/GlobalErrorModal.stories.tsx index 394e9e052dcb..0f63efe7e755 100644 --- a/code/addons/vitest/src/components/GlobalErrorModal.stories.tsx +++ b/code/addons/vitest/src/components/GlobalErrorModal.stories.tsx @@ -14,7 +14,7 @@ type Story = StoryObj; const managerContext: any = { state: {}, api: { - getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}`).mockName( + getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}/`).mockName( 'api::getDocsUrl' ), }, diff --git a/code/addons/vitest/src/components/TestProviderRender.stories.tsx b/code/addons/vitest/src/components/TestProviderRender.stories.tsx index bf7c6671f734..249f1294d9a9 100644 --- a/code/addons/vitest/src/components/TestProviderRender.stories.tsx +++ b/code/addons/vitest/src/components/TestProviderRender.stories.tsx @@ -15,7 +15,7 @@ import { TestProviderRender } from './TestProviderRender'; const managerContext: any = { api: { - getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}`).mockName( + getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}/`).mockName( 'api::getDocsUrl' ), findAllLeafStoryIds: fn((entryId) => [entryId]), diff --git a/code/addons/vitest/src/preset.ts b/code/addons/vitest/src/preset.ts index ab32aca082b5..e41c96bdc683 100644 --- a/code/addons/vitest/src/preset.ts +++ b/code/addons/vitest/src/preset.ts @@ -71,7 +71,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti log(dedent` You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/nextjs-vite', a high performance Vite-based equivalent. - Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs?ref=upgrade#with-vite')}\n + Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs/?ref=upgrade#with-vite')}\n `); } return channel; diff --git a/code/builders/builder-vite/README.md b/code/builders/builder-vite/README.md index 8eb696c6a46d..62d8e45b1b06 100644 --- a/code/builders/builder-vite/README.md +++ b/code/builders/builder-vite/README.md @@ -135,7 +135,7 @@ See [Customize Vite config](#customize-vite-config) for details about using `vit ### React Docgen -Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React. React docgen is configurable via the [`typescript.reactDocgen`](https://storybook.js.org/docs/api/main-config-typescript#reactdocgen?ref=readme) setting in `.storybook/main.js`. +Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React. React docgen is configurable via the [`typescript.reactDocgen`](https://storybook.js.org/docs/api/main-config-typescript/#reactdocgen?ref=readme) setting in `.storybook/main.js`. ```javascript export default { @@ -151,7 +151,7 @@ If you're using TypeScript, we encourage you to experiment and see which option The builder will by default enable Vite's [server.fs.strict](https://vitejs.dev/config/#server-fs-strict) option, for increased security. The default project `root` is set to the parent directory of the -Storybook configuration directory. This can be overridden in [viteFinal](https://storybook.js.org/docs/api/main-config-vite-final?ref=readme). +Storybook configuration directory. This can be overridden in [viteFinal](https://storybook.js.org/docs/api/main-config-vite-final/?ref=readme). ## Known issues diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html index 1637f04eb9e8..b6a52bc8b3eb 100644 --- a/code/builders/builder-vite/input/iframe.html +++ b/code/builders/builder-vite/input/iframe.html @@ -75,8 +75,8 @@ See:`; const docs = [ - 'https://storybook.js.org/docs/api/cli-options#dev', - 'https://storybook.js.org/docs/api/main-config/main-config-vite-final', + 'https://storybook.js.org/docs/api/cli-options/#dev', + 'https://storybook.js.org/docs/api/main-config/main-config-vite-final/', 'https://vite.dev/config/server-options.html#server-allowedhosts', ]; console.error(`${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`); diff --git a/code/core/assets/server/base-preview-body.html b/code/core/assets/server/base-preview-body.html index adbe363c2b5a..bf530790cca7 100644 --- a/code/core/assets/server/base-preview-body.html +++ b/code/core/assets/server/base-preview-body.html @@ -93,7 +93,7 @@

Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the - Decorators documentation. @@ -101,15 +101,15 @@

Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring - Webpack or - Vite + Webpack or + Vite with Storybook.
  • Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the - Environment Variables documentation.
    • diff --git a/code/core/src/__tests/storybook-error.test.ts b/code/core/src/__tests/storybook-error.test.ts index 62399ffd81f7..52989ae48c7a 100644 --- a/code/core/src/__tests/storybook-error.test.ts +++ b/code/core/src/__tests/storybook-error.test.ts @@ -46,7 +46,7 @@ describe('StorybookError', () => { it('should generate the correct message with multiple external documentation links', () => { const error = new TestError([ 'https://example.com/docs/first-error', - 'https://storybook.js.org/docs/second-error', + 'https://storybook.js.org/docs/second-error/', ]); expect(error.message).toMatchInlineSnapshot(` "This is a test error. @@ -66,33 +66,33 @@ describe('StorybookError', () => { describe('appendErrorRef', () => { it('should append ref=error to storybook.js.org URLs without query parameters', () => { - const url = 'https://storybook.js.org/docs/example'; + const url = 'https://storybook.js.org/docs/example/'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?ref=error'); + expect(result).toBe('https://storybook.js.org/docs/example/?ref=error'); }); it('should append ref=error to storybook.js.org URLs with existing query parameters', () => { const url = 'https://storybook.js.org/docs/example?foo=bar'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?foo=bar&ref=error'); + expect(result).toBe('https://storybook.js.org/docs/example/?foo=bar&ref=error'); }); it('should append ref=error to storybook.js.org URLs with multiple existing query parameters', () => { const url = 'https://storybook.js.org/docs/example?foo=bar&baz=qux'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?foo=bar&baz=qux&ref=error'); + expect(result).toBe('https://storybook.js.org/docs/example/?foo=bar&baz=qux&ref=error'); }); it('should handle storybook.js.org URLs with hash fragments', () => { const url = 'https://storybook.js.org/docs/example#section'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?ref=error#section'); + expect(result).toBe('https://storybook.js.org/docs/example/?ref=error#section'); }); it('should handle storybook.js.org URLs with query parameters and hash fragments', () => { const url = 'https://storybook.js.org/docs/example?foo=bar#section'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?foo=bar&ref=error#section'); + expect(result).toBe('https://storybook.js.org/docs/example/?foo=bar&ref=error#section'); }); it('should not modify non-storybook.js.org URLs', () => { @@ -120,26 +120,26 @@ describe('appendErrorRef', () => { }); it('should not append ref=error if it already exists in the URL', () => { - const url = 'https://storybook.js.org/docs/example?ref=error'; + const url = 'https://storybook.js.org/docs/example/?ref=error'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?ref=error'); + expect(result).toBe('https://storybook.js.org/docs/example/?ref=error'); }); it('should not append ref=error if it already exists with other parameters', () => { - const url = 'https://storybook.js.org/docs/example?foo=bar&ref=error&baz=qux'; + const url = 'https://storybook.js.org/docs/example/?foo=bar&ref=error&baz=qux'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?foo=bar&ref=error&baz=qux'); + expect(result).toBe('https://storybook.js.org/docs/example/?foo=bar&ref=error&baz=qux'); }); it('should not append ref=error if it already exists in URL with hash fragment', () => { - const url = 'https://storybook.js.org/docs/example?ref=error#target'; + const url = 'https://storybook.js.org/docs/example/?ref=error#target'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?ref=error#target'); + expect(result).toBe('https://storybook.js.org/docs/example/?ref=error#target'); }); it('should append ref=error before hash fragment when no existing ref parameter', () => { - const url = 'https://storybook.js.org/docs/example#target'; + const url = 'https://storybook.js.org/docs/example/#target'; const result = appendErrorRef(url); - expect(result).toBe('https://storybook.js.org/docs/example?ref=error#target'); + expect(result).toBe('https://storybook.js.org/docs/example/?ref=error#target'); }); }); diff --git a/code/core/src/actions/README.md b/code/core/src/actions/README.md index 54f1771254cf..86d084b44e71 100644 --- a/code/core/src/actions/README.md +++ b/code/core/src/actions/README.md @@ -1,3 +1,3 @@ # Storybook Actions -The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions) +The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions/) diff --git a/code/core/src/channels/README.md b/code/core/src/channels/README.md index 0076f33230bf..a45d8b7fc9b1 100644 --- a/code/core/src/channels/README.md +++ b/code/core/src/channels/README.md @@ -29,4 +29,4 @@ class Transport { } ``` -For more information visit: [storybook.js.org](https://storybook.js.org) +For more information visit: [storybook.js.org](https://storybook.js.org/) diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts index 665c4fc84419..11478ee850d3 100644 --- a/code/core/src/cli/eslintPlugin.ts +++ b/code/core/src/cli/eslintPlugin.ts @@ -259,7 +259,7 @@ export const suggestESLintPlugin = async (): Promise => { const shouldInstall = await prompt.confirm({ message: dedent` We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${picocolors.yellow( - 'https://storybook.js.org/docs/9/configure/integration/eslint-plugin' + 'https://storybook.js.org/docs/9/configure/integration/eslint-plugin/' )} Would you like to install it? diff --git a/code/core/src/client-logger/README.md b/code/core/src/client-logger/README.md index 5f04a63e34e5..d0e3659c473a 100644 --- a/code/core/src/client-logger/README.md +++ b/code/core/src/client-logger/README.md @@ -12,4 +12,4 @@ logger.warn('Warning message'); logger.error('Error message'); ``` -For more information visit: [storybook.js.org](https://storybook.js.org) +For more information visit: [storybook.js.org](https://storybook.js.org/) diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts index 72ceb343de58..537936c00a37 100644 --- a/code/core/src/core-server/utils/StoryIndexGenerator.ts +++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts @@ -24,7 +24,6 @@ import type { import * as find from 'empathic/find'; import picocolors from 'picocolors'; -// eslint-disable-next-line depend/ban-dependencies import slash from 'slash'; import invariant from 'tiny-invariant'; import { dedent } from 'ts-dedent'; @@ -616,7 +615,7 @@ export class StoryIndexGenerator { if (err && (err as { source: any }).source?.match(/mdast-util-mdx-jsx/g)) { logger.warn( `💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${picocolors.yellow( - 'https://storybook.js.org/docs/7/migration-guide?ref=error' + 'https://storybook.js.org/docs/7/migration-guide/?ref=error' )}` ); } diff --git a/code/core/src/core-server/utils/whats-new.ts b/code/core/src/core-server/utils/whats-new.ts index c63bf60086cc..54cc58ba458e 100644 --- a/code/core/src/core-server/utils/whats-new.ts +++ b/code/core/src/core-server/utils/whats-new.ts @@ -31,7 +31,7 @@ export type WhatsNewResponse = { }; const WHATS_NEW_CACHE = 'whats-new-cache'; -const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1'; +const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1/'; export function initializeWhatsNew( channel: Channel, diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts index 0a128a1670a2..22c0252d4bc6 100644 --- a/code/core/src/csf/story.ts +++ b/code/core/src/csf/story.ts @@ -331,7 +331,7 @@ export interface BaseAnnotations>[] @@ -340,7 +340,7 @@ export interface BaseAnnotations; @@ -356,14 +356,14 @@ export interface BaseAnnotations>; /** * Asynchronous functions which provide data for a story. * - * @see [Loaders](https://storybook.js.org/docs/writing-stories/loaders) + * @see [Loaders](https://storybook.js.org/docs/writing-stories/loaders/) */ loaders?: LoaderFunction[] | LoaderFunction; @@ -439,7 +439,7 @@ export interface ComponentAnnotations { // mockReturnValue(edgecaseLocations[0]) expect(getSourceType('https://storybook.js.org/storybook/iframe.html')).toEqual([ 'local', - 'https://storybook.js.org/storybook', + 'https://storybook.js.org/storybook/', ]); }); it('returns "correct url" when source does not match location', () => { @@ -158,7 +158,7 @@ describe('Refs API', () => { it('returns "local" when source matches location', () => { expect(getSourceType('https://storybook.js.org/storybook/iframe.html')).toEqual([ 'local', - 'https://storybook.js.org/storybook', + 'https://storybook.js.org/storybook/', ]); }); it('returns "external" when source does not match location', () => { diff --git a/code/core/src/manager/README.md b/code/core/src/manager/README.md index ff55e2830fdf..043df2d6754a 100644 --- a/code/core/src/manager/README.md +++ b/code/core/src/manager/README.md @@ -1,6 +1,6 @@

    Storybook manager's UI

    -Storybook manager is the core UI of [Storybook](https://storybook.js.org). +Storybook manager is the core UI of [Storybook](https://storybook.js.org/). It's a React based UI which you can initialize with a function. You can configure it by providing a provider API. diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.tsx index 8ef534e73ab8..b007359440f6 100644 --- a/code/core/src/manager/components/mobile/about/MobileAbout.tsx +++ b/code/core/src/manager/components/mobile/about/MobileAbout.tsx @@ -61,7 +61,7 @@ export const MobileAbout: FC = () => { diff --git a/code/core/src/manager/components/panel/Panel.tsx b/code/core/src/manager/components/panel/Panel.tsx index a41c2b38ae3d..7e787af67b45 100644 --- a/code/core/src/manager/components/panel/Panel.tsx +++ b/code/core/src/manager/components/panel/Panel.tsx @@ -93,7 +93,7 @@ export const AddonPanel = React.memo<{ <>Integrate your tools with Storybook to connect workflows and unlock advanced features. } footer={ - + Explore integrations catalog } diff --git a/code/core/src/manager/components/sidebar/RefBlocks.tsx b/code/core/src/manager/components/sidebar/RefBlocks.tsx index e908249eb068..089186dc3eda 100644 --- a/code/core/src/manager/components/sidebar/RefBlocks.tsx +++ b/code/core/src/manager/components/sidebar/RefBlocks.tsx @@ -140,7 +140,7 @@ export const ErrorBlock: FC<{ error: Error }> = ({ error }) => { View error {' '} - + View docs @@ -172,7 +172,7 @@ export const EmptyBlock = ({ isMain, hasEntries }: { isMain: boolean; hasEntries
  • Your{' '} @@ -183,7 +183,7 @@ export const EmptyBlock = ({ isMain, hasEntries }: { isMain: boolean; hasEntries
  • You have{' '} diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx index 6292b475622d..87a554dac067 100644 --- a/code/core/src/manager/components/sidebar/RefIndicator.tsx +++ b/code/core/src/manager/components/sidebar/RefIndicator.tsx @@ -294,7 +294,7 @@ const ReadDocsMessage: FC = () => { const theme = useTheme(); return ( - +
    Read Composition docs @@ -337,7 +337,7 @@ const PerformanceDegradedMessage: FC = () => { const theme = useTheme(); return ( - +
    Reduce lag diff --git a/code/core/src/manager/settings/About.tsx b/code/core/src/manager/settings/About.tsx index 63e8fa526552..bb992ce16d90 100644 --- a/code/core/src/manager/settings/About.tsx +++ b/code/core/src/manager/settings/About.tsx @@ -73,7 +73,7 @@ const AboutScreen: FC<{ onNavigateToWhatsNew?: () => void }> = ({ onNavigateToWh