From 975ad7604b8236bad273d6498362b50af40975ee Mon Sep 17 00:00:00 2001
From: Kyle Gach
Date: Mon, 20 Nov 2023 16:02:35 -0700
Subject: [PATCH] Update TOC to use `heading` type
- Rename `introduction.md`, `overview.md`, `how-to-contribute.md` pages -> `index.md` pages
- Add all-new `index.md` pages for Sharing and API
- Find/replace `introduction.md`/`overview.md` -> `index.md`
- Find/replace `/introduction`/`/overview` -> `/`
- Add `hideRendererSelector: true` to frontmatter of (some) pages that aren't conditional on renderer
---
.github/PULL_REQUEST_TEMPLATE.md | 3 +-
CHANGELOG.v6.md | 2 +-
CONTRIBUTING.md | 2 +-
MAINTAINERS.md | 2 +-
MIGRATION.md | 2 +-
code/addons/actions/README.md | 4 +-
code/addons/backgrounds/README.md | 4 +-
code/addons/controls/README.md | 4 +-
code/addons/highlight/README.md | 2 +-
code/addons/jest/README.md | 4 +-
code/addons/measure/README.md | 2 +-
code/addons/outline/README.md | 4 +-
code/addons/themes/README.md | 2 +-
code/addons/toolbars/README.md | 4 +-
code/addons/viewport/README.md | 4 +-
.../angular/template/cli/Button.stories.ts | 2 +-
code/frameworks/ember/README.md | 4 +-
code/frameworks/nextjs/README.md | 8 +-
.../nextjs/template/cli/js/Button.stories.js | 2 +-
.../nextjs/template/cli/js/Configure.mdx | 2 +-
.../template/cli/ts-3-8/Button.stories.ts | 2 +-
.../nextjs/template/cli/ts-3-8/Configure.mdx | 2 +-
.../template/cli/ts-4-9/Button.stories.ts | 2 +-
.../nextjs/template/cli/ts-4-9/Configure.mdx | 2 +-
code/frameworks/preact-webpack5/README.md | 4 +-
code/frameworks/react-webpack5/README.md | 4 +-
code/frameworks/sveltekit/README.md | 2 +-
.../cli/rendererAssets/common/Configure.mdx | 2 +-
code/lib/csf-tools/src/CsfFile.ts | 4 +-
code/lib/types/src/modules/addons.ts | 2 +-
code/presets/html-webpack/README.md | 2 +-
code/presets/preact-webpack/README.md | 2 +-
code/presets/react-webpack/README.md | 2 +-
code/presets/svelte-webpack/README.md | 2 +-
code/presets/vue-webpack/README.md | 2 +-
code/presets/vue3-webpack/README.md | 2 +-
code/presets/web-components-webpack/README.md | 2 +-
.../html/template/cli/js/Button.stories.js | 2 +-
.../template/cli/ts-3-8/Button.stories.ts | 2 +-
.../template/cli/ts-4-9/Button.stories.ts | 2 +-
.../preact/template/cli/Button.stories.jsx | 2 +-
.../react/template/cli/js/Button.stories.js | 2 +-
.../template/cli/ts-3-8/Button.stories.ts | 2 +-
.../template/cli/ts-4-9/Button.stories.ts | 2 +-
.../svelte/template/cli/js/Button.stories.js | 2 +-
.../template/cli/ts-3-8/Button.stories.ts | 2 +-
.../template/cli/ts-4-9/Button.stories.ts | 2 +-
.../vue/template/cli/Button.stories.js | 2 +-
.../vue3/template/cli/js/Button.stories.js | 2 +-
.../template/cli/ts-3-8/Button.stories.ts | 2 +-
.../template/cli/ts-3-8/Header.stories.ts | 2 +-
.../template/cli/ts-4-9/Button.stories.ts | 2 +-
.../template/cli/ts-4-9/Header.stories.ts | 2 +-
.../template/cli/js/Button.stories.js | 2 +-
.../template/cli/ts-3-8/Button.stories.ts | 2 +-
.../template/cli/ts-4-9/Button.stories.ts | 2 +-
docs/addons/addon-types.md | 2 +-
docs/addons/{introduction.md => index.md} | 5 +-
docs/addons/install-addons.md | 6 +-
docs/addons/writing-presets.md | 2 +-
docs/api/arg-types.md | 6 +-
docs/api/csf.md | 10 +-
docs/api/doc-block-controls.md | 2 +-
docs/api/index.md | 103 ++++++++++++++++++
docs/api/main-config-preview-annotations.md | 2 +-
docs/api/new-frameworks.md | 2 +-
docs/builders/builder-api.md | 6 +-
docs/builders/{overview.md => index.md} | 1 +
docs/builders/webpack.md | 2 +-
docs/configure/environment-variables.md | 2 +-
docs/configure/frameworks.md | 2 +-
docs/configure/{overview.md => index.md} | 0
docs/configure/sidebar-and-urls.md | 2 +-
docs/configure/story-layout.md | 2 +-
docs/configure/story-rendering.md | 2 +-
docs/configure/storybook-addons.md | 2 +-
docs/configure/styling-and-css.md | 2 +-
docs/configure/telemetry.md | 4 +-
docs/configure/theming.md | 6 +-
docs/configure/webpack.md | 8 +-
docs/contribute/code.md | 2 +-
docs/contribute/framework.md | 4 +-
docs/contribute/how-to-reproduce.md | 2 +-
.../{how-to-contribute.md => index.md} | 3 +-
docs/essentials/actions.md | 2 +-
docs/essentials/backgrounds.md | 2 +-
docs/essentials/controls.md | 2 +-
docs/essentials/{introduction.md => index.md} | 9 +-
docs/essentials/interactions.md | 4 +-
docs/essentials/toolbars-and-globals.md | 14 +--
docs/essentials/viewport.md | 16 +--
docs/faq.md | 10 +-
docs/frameworks.js | 2 +-
docs/get-started/browse-stories.md | 6 +-
docs/get-started/conclusion.md | 5 +-
docs/get-started/setup.md | 4 +-
docs/get-started/whats-a-story.md | 2 +-
docs/get-started/why-storybook.md | 4 +-
docs/migration-guide.md | 4 +-
docs/sharing/design-integrations.md | 2 +-
docs/sharing/index.md | 12 ++
docs/sharing/package-composition.md | 2 +-
docs/sharing/storybook-composition.md | 2 +-
.../button-story-default-export.ts.mdx | 2 +-
.../angular/button-story-grouped.ts.mdx | 2 +-
.../angular/button-story-hoisted.ts.mdx | 2 +-
.../button-story-with-addon-example.ts.mdx | 2 +-
.../button-story-with-parameters.ts.mdx | 2 +-
.../angular/checkbox-story-grouped.ts.mdx | 2 +-
.../component-story-figma-integration.ts.mdx | 2 +-
.../snippets/angular/foo-bar-baz-story.ts.mdx | 2 +-
.../angular/list-story-template.ts.mdx | 2 +-
.../angular/list-story-unchecked.ts.mdx | 2 +-
...my-component-story-mandatory-export.ts.mdx | 2 +-
.../angular/other-foo-bar-story.ts.mdx | 2 +-
...torybook-csf-3-auto-title-redundant.ts.mdx | 2 +-
.../common/button-story-default-export.js.mdx | 2 +-
.../button-story-default-export.ts-4-9.mdx | 2 +-
.../common/button-story-default-export.ts.mdx | 2 +-
.../common/button-story-disable-addon.js.mdx | 2 +-
.../button-story-disable-addon.ts-4-9.mdx | 2 +-
.../common/button-story-disable-addon.ts.mdx | 2 +-
.../common/button-story-grouped.js.mdx | 2 +-
.../common/button-story-grouped.ts-4-9.mdx | 2 +-
.../common/button-story-grouped.ts.mdx | 2 +-
.../common/button-story-hoisted.js.mdx | 2 +-
.../common/button-story-hoisted.ts-4-9.mdx | 2 +-
.../common/button-story-hoisted.ts.mdx | 2 +-
.../button-story-with-parameters.js.mdx | 2 +-
.../common/checkbox-story-grouped.js.mdx | 2 +-
.../common/checkbox-story-grouped.ts-4-9.mdx | 2 +-
.../common/checkbox-story-grouped.ts.mdx | 2 +-
docs/snippets/common/foo-bar-baz-story.js.mdx | 2 +-
.../common/foo-bar-baz-story.ts-4-9.mdx | 2 +-
docs/snippets/common/foo-bar-baz-story.ts.mdx | 2 +-
...my-component-story-mandatory-export.js.mdx | 2 +-
...omponent-story-mandatory-export.ts-4-9.mdx | 2 +-
...my-component-story-mandatory-export.ts.mdx | 2 +-
.../snippets/common/my-component-story.js.mdx | 2 +-
.../common/other-foo-bar-story.js.mdx | 2 +-
.../common/other-foo-bar-story.ts-4-9.mdx | 2 +-
.../common/other-foo-bar-story.ts.mdx | 2 +-
...book-csf-3-auto-title-redundant.ts-4-9.mdx | 2 +-
...torybook-csf-3-auto-title-redundant.ts.mdx | 2 +-
...ybook-fix-imports-autodocs-monorepo.js.mdx | 2 +-
...k-fix-imports-autodocs-monorepo.ts-4-9.mdx | 2 +-
...ybook-fix-imports-autodocs-monorepo.ts.mdx | 2 +-
.../button-story-component-decorator.js.mdx | 2 +-
.../button-story-component-decorator.ts.mdx | 2 +-
.../html/button-story-default-exports.js.mdx | 2 +-
.../html/button-story-default-exports.ts.mdx | 2 +-
.../html/button-story-rename-story.js.mdx | 2 +-
.../html/button-story-rename-story.ts.mdx | 2 +-
.../html/button-story-using-args.js.mdx | 2 +-
.../html/button-story-using-args.ts.mdx | 2 +-
.../html/button-story-with-args.js.mdx | 2 +-
.../html/button-story-with-args.ts.mdx | 2 +-
.../html/button-story-with-blue-args.js.mdx | 2 +-
.../html/button-story-with-blue-args.ts.mdx | 2 +-
.../html/button-story-with-emojis.js.mdx | 2 +-
.../html/button-story-with-emojis.ts.mdx | 2 +-
docs/snippets/html/button-story.js.mdx | 2 +-
docs/snippets/html/button-story.ts.mdx | 2 +-
docs/snippets/html/histogram-story.js.mdx | 2 +-
docs/snippets/html/histogram-story.ts.mdx | 2 +-
docs/snippets/html/list-story-expanded.js.mdx | 2 +-
.../html/list-story-reuse-data.js.mdx | 2 +-
.../html/list-story-reuse-data.ts.mdx | 2 +-
docs/snippets/html/list-story-starter.js.mdx | 2 +-
docs/snippets/html/list-story-starter.ts.mdx | 2 +-
docs/snippets/html/your-component.js.mdx | 2 +-
docs/snippets/html/your-component.ts.mdx | 2 +-
.../button-story-with-addon-example.js.mdx | 2 +-
...button-story-with-addon-example.ts-4-9.mdx | 2 +-
.../button-story-with-addon-example.ts.mdx | 2 +-
.../react/button-story-with-parameters.js.mdx | 2 +-
.../button-story-with-parameters.ts-4-9.mdx | 2 +-
.../react/button-story-with-parameters.ts.mdx | 2 +-
.../component-story-figma-integration.js.mdx | 2 +-
...mponent-story-figma-integration.ts-4-9.mdx | 2 +-
.../component-story-figma-integration.ts.mdx | 2 +-
.../snippets/react/list-story-template.js.mdx | 2 +-
.../react/list-story-template.ts-4-9.mdx | 2 +-
.../snippets/react/list-story-template.ts.mdx | 2 +-
.../react/list-story-unchecked.js.mdx | 2 +-
.../react/list-story-unchecked.ts-4-9.mdx | 2 +-
.../react/list-story-unchecked.ts.mdx | 2 +-
.../list-story-with-unchecked-children.js.mdx | 2 +-
...t-story-with-unchecked-children.ts-4-9.mdx | 2 +-
.../list-story-with-unchecked-children.ts.mdx | 2 +-
.../button-story-with-addon-example.js.mdx | 2 +-
...button-story-with-addon-example.ts-4-9.mdx | 2 +-
.../button-story-with-addon-example.ts.mdx | 2 +-
.../snippets/solid/list-story-template.js.mdx | 2 +-
.../solid/list-story-template.ts-4-9.mdx | 2 +-
.../snippets/solid/list-story-template.ts.mdx | 2 +-
.../solid/list-story-unchecked.js.mdx | 2 +-
.../solid/list-story-unchecked.ts-4-9.mdx | 2 +-
.../solid/list-story-unchecked.ts.mdx | 2 +-
.../list-story-with-subcomponents.js.mdx | 2 +-
.../list-story-with-subcomponents.ts-4-9.mdx | 2 +-
.../list-story-with-subcomponents.ts.mdx | 2 +-
.../list-story-with-unchecked-children.js.mdx | 2 +-
...t-story-with-unchecked-children.ts-4-9.mdx | 2 +-
.../list-story-with-unchecked-children.ts.mdx | 2 +-
.../button-story-default-docs-code.js.mdx | 2 +-
.../button-story-with-addon-example.js.mdx | 2 +-
.../component-story-figma-integration.js.mdx | 2 +-
.../button-story-with-addon-example.js.mdx | 2 +-
...button-story-with-addon-example.ts-4-9.mdx | 2 +-
.../button-story-with-addon-example.ts.mdx | 2 +-
.../component-story-figma-integration.js.mdx | 2 +-
...mponent-story-figma-integration.ts-4-9.mdx | 2 +-
.../component-story-figma-integration.ts.mdx | 2 +-
.../snippets/vue/list-story-template.2.js.mdx | 2 +-
.../vue/list-story-template.2.ts-4-9.mdx | 2 +-
.../snippets/vue/list-story-template.2.ts.mdx | 2 +-
.../snippets/vue/list-story-template.3.js.mdx | 2 +-
.../vue/list-story-template.3.ts-4-9.mdx | 2 +-
.../snippets/vue/list-story-template.3.ts.mdx | 2 +-
.../vue/list-story-unchecked.2.js.mdx | 2 +-
.../vue/list-story-unchecked.2.ts-4-9.mdx | 2 +-
.../vue/list-story-unchecked.2.ts.mdx | 2 +-
.../vue/list-story-unchecked.3.js.mdx | 2 +-
.../vue/list-story-unchecked.3.ts-4-9.mdx | 2 +-
.../vue/list-story-unchecked.3.ts.mdx | 2 +-
docs/toc.js | 85 ++++-----------
docs/writing-docs/build-documentation.md | 4 +-
.../{introduction.md => index.md} | 1 +
docs/writing-docs/mdx.md | 2 +-
docs/writing-stories/args.md | 4 +-
.../build-pages-with-storybook.md | 4 +-
docs/writing-stories/decorators.md | 4 +-
.../{introduction.md => index.md} | 22 ++--
docs/writing-stories/loaders.md | 2 +-
docs/writing-stories/parameters.md | 4 +-
.../stories-for-multiple-components.md | 2 +-
docs/writing-stories/typescript.md | 2 +-
docs/writing-tests/accessibility-testing.md | 2 +-
.../{introduction.md => index.md} | 1 +
docs/writing-tests/interaction-testing.md | 2 +-
docs/writing-tests/stories-in-unit-tests.md | 2 +-
docs/writing-tests/test-runner.md | 6 +-
243 files changed, 457 insertions(+), 375 deletions(-)
rename docs/addons/{introduction.md => index.md} (84%)
create mode 100644 docs/api/index.md
rename docs/builders/{overview.md => index.md} (97%)
rename docs/configure/{overview.md => index.md} (100%)
rename docs/contribute/{how-to-contribute.md => index.md} (94%)
rename docs/essentials/{introduction.md => index.md} (94%)
create mode 100644 docs/sharing/index.md
rename docs/writing-docs/{introduction.md => index.md} (97%)
rename docs/writing-stories/{introduction.md => index.md} (95%)
rename docs/writing-tests/{introduction.md => index.md} (98%)
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index ba472744a8f1..954092e8d2e2 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,11 +4,10 @@ Closes #
-
## What I did
diff --git a/CHANGELOG.v6.md b/CHANGELOG.v6.md
index 391f14fed6ed..8501b232d289 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/react/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..d90fef7e5ee5 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).
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 4495d71096a8..226781aa5391 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -988,7 +988,7 @@ 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/react/configure/#configure-your-storybook-project) section to configure your Storybook project.
#### Stricter global types
diff --git a/code/addons/actions/README.md b/code/addons/actions/README.md
index 71bf4a2f53d6..80d2bd5d746c 100644
--- a/code/addons/actions/README.md
+++ b/code/addons/actions/README.md
@@ -8,13 +8,13 @@ Storybook Addon Actions can be used to display data received by event handlers i
## 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/react/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/react/configure/#configure-your-storybook-project):
```js
export default {
diff --git a/code/addons/backgrounds/README.md b/code/addons/backgrounds/README.md
index 62c88e19a7e7..481ba54bcd2f 100644
--- a/code/addons/backgrounds/README.md
+++ b/code/addons/backgrounds/README.md
@@ -8,7 +8,7 @@ Storybook Addon Backgrounds can be used to change background colors inside the p
## 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/react/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/react/configure/#configure-your-storybook-project):
```js
export default {
diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md
index cb37957a0766..0622e23a302c 100644
--- a/code/addons/controls/README.md
+++ b/code/addons/controls/README.md
@@ -8,13 +8,13 @@
## 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/react/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/react/configure/#configure-your-storybook-project):
```js
export default {
diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md
index e4b245acc5fd..5f7ffbe0c3a9 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/react/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/jest/README.md b/code/addons/jest/README.md
index 50678d636094..ec2cc8a34c6c 100644
--- a/code/addons/jest/README.md
+++ b/code/addons/jest/README.md
@@ -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/react/configure/#configure-your-storybook-project):
```js
export default {
@@ -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/react/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/measure/README.md b/code/addons/measure/README.md
index ca1387d474c8..8e280f150124 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/react/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..e73da501a3f6 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/react/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/react/configure/#configure-your-storybook-project):
```js
export default {
diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md
index 5ed36f2c4050..55bc748fd48f 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/react/configure/#configure-your-storybook-project):
```js
export default {
diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md
index b6cf730ab141..560966c094ce 100644
--- a/code/addons/toolbars/README.md
+++ b/code/addons/toolbars/README.md
@@ -12,13 +12,13 @@ The Toolbars addon controls global story rendering options from [Storybook's](ht
## 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/react/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/react/configure/#configure-your-storybook-project):
```js
export default {
diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md
index 196c5e0b0aa5..3766d555f8b3 100644
--- a/code/addons/viewport/README.md
+++ b/code/addons/viewport/README.md
@@ -8,13 +8,13 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes
## 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/react/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/react/configure/#configure-your-storybook-project):
```js
export default {
diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts
index 3eeb645929a3..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/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta: Meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/frameworks/ember/README.md b/code/frameworks/ember/README.md
index f1ed9be67304..774862f546e4 100644
--- a/code/frameworks/ember/README.md
+++ b/code/frameworks/ember/README.md
@@ -24,8 +24,8 @@ You can also build a [static version](https://storybook.js.org/docs/ember/sharin
## Docs
-- [Basics](https://storybook.js.org/docs/ember/get-started/introduction)
-- [Configurations](https://storybook.js.org/docs/ember/configure/overview)
+- [Basics](https://storybook.js.org/docs/ember/get-started)
+- [Configurations](https://storybook.js.org/docs/ember/configure)
- [Addons](https://storybook.js.org/docs/ember/configure/storybook-addons)
## Working with polyfills
diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md
index 2a834fb7ee4a..252fb329167d 100644
--- a/code/frameworks/nextjs/README.md
+++ b/code/frameworks/nextjs/README.md
@@ -354,7 +354,7 @@ export const Example = {
#### Global Defaults
-Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and will be shallowly merged with the default router.
+Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/#configure-story-rendering) and will be shallowly merged with the default router.
```js
// .storybook/preview.js
@@ -489,7 +489,7 @@ export const Example = {
},
```
-If your Next.js project uses the `app` directory for every page (in other words, it does not have a `pages` directory), you can set the parameter `nextjs.appDirectory` to `true` in the [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) file to apply it to all stories.
+If your Next.js project uses the `app` directory for every page (in other words, it does not have a `pages` directory), you can set the parameter `nextjs.appDirectory` to `true` in the [preview.js](https://storybook.js.org/docs/react/configure/#configure-story-rendering) file to apply it to all stories.
```js
// .storybook/preview.js
@@ -534,7 +534,7 @@ export const Example = {
#### Global Defaults
-Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and will be shallowly merged with the default router.
+Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/#configure-story-rendering) and will be shallowly merged with the default router.
```js
// .storybook/preview.js
@@ -694,7 +694,7 @@ export const parameters = {
### Sass/Scss
-[Global sass/scss stylesheets](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) are supported without any additional configuration as well. Just import them into [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering)
+[Global sass/scss stylesheets](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) are supported without any additional configuration as well. Just import them into [preview.js](https://storybook.js.org/docs/react/configure/#configure-story-rendering)
```js
import '../styles/globals.scss';
diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.js b/code/frameworks/nextjs/template/cli/js/Button.stories.js
index 91c2e07ebf62..3a3f67ec8fb4 100644
--- a/code/frameworks/nextjs/template/cli/js/Button.stories.js
+++ b/code/frameworks/nextjs/template/cli/js/Button.stories.js
@@ -1,6 +1,6 @@
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
export default {
title: 'Example/Button',
component: Button,
diff --git a/code/frameworks/nextjs/template/cli/js/Configure.mdx b/code/frameworks/nextjs/template/cli/js/Configure.mdx
index a0e938f053b7..055a3c564efc 100644
--- a/code/frameworks/nextjs/template/cli/js/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/js/Configure.mdx
@@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts
index c8d595982b78..b65080126a44 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta: Meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
index a0e938f053b7..055a3c564efc 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
@@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts
index e1fcc8c553b5..742c3aa7b029 100644
--- a/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts-4-9/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
index a0e938f053b7..055a3c564efc 100644
--- a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
@@ -160,7 +160,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
diff --git a/code/frameworks/preact-webpack5/README.md b/code/frameworks/preact-webpack5/README.md
index 0402d392c40b..eda406d5509e 100644
--- a/code/frameworks/preact-webpack5/README.md
+++ b/code/frameworks/preact-webpack5/README.md
@@ -24,6 +24,6 @@ You can also build a [static version](https://storybook.js.org/docs/preact/shari
## Docs
-- [Basics](https://storybook.js.org/docs/preact/get-started/introduction)
-- [Configurations](https://storybook.js.org/docs/preact/configure/overview)
+- [Basics](https://storybook.js.org/docs/preact/get-started)
+- [Configurations](https://storybook.js.org/docs/preact/configure)
- [Addons](https://storybook.js.org/docs/preact/configure/storybook-addons)
diff --git a/code/frameworks/react-webpack5/README.md b/code/frameworks/react-webpack5/README.md
index 68e2ff7255c4..b3b1d877eaa2 100644
--- a/code/frameworks/react-webpack5/README.md
+++ b/code/frameworks/react-webpack5/README.md
@@ -42,6 +42,6 @@ But you probably also need to use types from `@types/node @types/react`.
## Docs
-- [Basics](https://storybook.js.org/docs/react/get-started/introduction)
-- [Configurations](https://storybook.js.org/docs/react/configure/overview)
+- [Basics](https://storybook.js.org/docs/react/get-started)
+- [Configurations](https://storybook.js.org/docs/react/configure)
- [Addons](https://storybook.js.org/docs/react/configure/storybook-addons)
diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md
index 20248ce0d3f3..02f43b117710 100644
--- a/code/frameworks/sveltekit/README.md
+++ b/code/frameworks/sveltekit/README.md
@@ -40,7 +40,7 @@ However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/mo
| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | β Not supported | They are only meant to be used in service workers |
| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | β
Supported | |
-This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/svelte/writing-stories/introduction), [test](https://storybook.js.org/docs/svelte/writing-tests/introduction) and [document](https://storybook.js.org/docs/svelte/writing-docs/introduction) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.
+This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/svelte/writing-stories), [test](https://storybook.js.org/docs/svelte/writing-tests) and [document](https://storybook.js.org/docs/svelte/writing-docs) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.
## Requirements
diff --git a/code/lib/cli/rendererAssets/common/Configure.mdx b/code/lib/cli/rendererAssets/common/Configure.mdx
index 40b04abb105a..a3d3c80985fb 100644
--- a/code/lib/cli/rendererAssets/common/Configure.mdx
+++ b/code/lib/cli/rendererAssets/common/Configure.mdx
@@ -123,7 +123,7 @@ export const RightArrow = () => Use stories to test a component in all its variations, no matter how
complex.
Learn more
diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts
index 15ab39abdc45..897f6b2e0b0d 100644
--- a/code/lib/csf-tools/src/CsfFile.ts
+++ b/code/lib/csf-tools/src/CsfFile.ts
@@ -117,7 +117,7 @@ export class NoMetaError extends Error {
super(dedent`
CSF: ${message} ${formatLocation(ast, fileName)}
- More info: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+ More info: https://storybook.js.org/docs/react/writing-stories#default-export
`);
this.name = this.constructor.name;
}
@@ -481,7 +481,7 @@ export class CsfFile {
throw new Error(dedent`
CSF: missing title/component ${formatLocation(self._ast, self._fileName)}
- More info: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+ More info: https://storybook.js.org/docs/react/writing-stories#default-export
`);
}
diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index ef76feb2560c..859b160e16d2 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -204,7 +204,7 @@ export interface Addon_BaseAnnotations<
* Wrapper components or Storybook decorators that wrap a story.
*
* Decorators defined in Meta will be applied to every story variation.
- * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
+ * @see [Decorators](https://storybook.js.org/docs/addons/#1-decorators)
*/
decorators?: Addon_BaseDecorators;
diff --git a/code/presets/html-webpack/README.md b/code/presets/html-webpack/README.md
index dd70fe593868..3fa497407563 100644
--- a/code/presets/html-webpack/README.md
+++ b/code/presets/html-webpack/README.md
@@ -3,4 +3,4 @@
This package is a [preset](https://storybook.js.org/docs/html/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling HTML.
It's an internal package that's not intended to be used directly by users.
-- More info on [Storybook for HTML](https://storybook.js.org/docs/html/get-started/introduction)
+- More info on [Storybook for HTML](https://storybook.js.org/docs/html/get-started)
diff --git a/code/presets/preact-webpack/README.md b/code/presets/preact-webpack/README.md
index 3afe613128d0..5ac103fdd029 100644
--- a/code/presets/preact-webpack/README.md
+++ b/code/presets/preact-webpack/README.md
@@ -3,4 +3,4 @@
This package is a [preset](https://storybook.js.org/docs/preact/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Preact.
It's an internal package that's not intended to be used directly by users.
-- More info on [Storybook for Preact](https://storybook.js.org/docs/preact/get-started/introduction)
+- More info on [Storybook for Preact](https://storybook.js.org/docs/preact/get-started)
diff --git a/code/presets/react-webpack/README.md b/code/presets/react-webpack/README.md
index 43fa9210cdee..74e2ad35024f 100644
--- a/code/presets/react-webpack/README.md
+++ b/code/presets/react-webpack/README.md
@@ -3,4 +3,4 @@
This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React.
It's an internal package that's not intended to be used directly by users.
-- More info on [Storybook for React](https://storybook.js.org/docs/react/get-started/introduction)
+- More info on [Storybook for React](https://storybook.js.org/docs/react/get-started)
diff --git a/code/presets/svelte-webpack/README.md b/code/presets/svelte-webpack/README.md
index 2cf2606a3b91..b2d6cd5e9035 100644
--- a/code/presets/svelte-webpack/README.md
+++ b/code/presets/svelte-webpack/README.md
@@ -3,4 +3,4 @@
This package is a [preset](https://storybook.js.org/docs/svelte/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Svelte.
It's an internal package that's not intended to be used directly by users.
-- More info on [Storybook for Svelte](https://storybook.js.org/docs/svelte/get-started/introduction)
+- More info on [Storybook for Svelte](https://storybook.js.org/docs/svelte/get-started)
diff --git a/code/presets/vue-webpack/README.md b/code/presets/vue-webpack/README.md
index 17acb9801107..1e301b010570 100644
--- a/code/presets/vue-webpack/README.md
+++ b/code/presets/vue-webpack/README.md
@@ -3,4 +3,4 @@
This package is a [preset](https://storybook.js.org/docs/vue/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue.
It's an internal package that's not intended to be used directly by users.
-- More info on [Storybook for Vue](https://storybook.js.org/docs/vue/get-started/introduction)
+- More info on [Storybook for Vue](https://storybook.js.org/docs/vue/get-started)
diff --git a/code/presets/vue3-webpack/README.md b/code/presets/vue3-webpack/README.md
index aee6a93bb9fb..d600b0fa0eab 100644
--- a/code/presets/vue3-webpack/README.md
+++ b/code/presets/vue3-webpack/README.md
@@ -3,4 +3,4 @@
This package is a [preset](https://storybook.js.org/docs/vue/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue3.
It's an internal package that's not intended to be used directly by users.
-- More info on [Storybook for Vue3](https://storybook.js.org/docs/vue/get-started/introduction)
+- More info on [Storybook for Vue3](https://storybook.js.org/docs/vue/get-started)
diff --git a/code/presets/web-components-webpack/README.md b/code/presets/web-components-webpack/README.md
index d2da44b36356..b3d65a886224 100644
--- a/code/presets/web-components-webpack/README.md
+++ b/code/presets/web-components-webpack/README.md
@@ -3,4 +3,4 @@
This package is a [preset](https://storybook.js.org/docs/web-components/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Web components.
It's an internal package that's not intended to be used directly by users.
-- More info on [Storybook for Web components](https://storybook.js.org/docs/web-components/get-started/introduction)
+- More info on [Storybook for Web components](https://storybook.js.org/docs/web-components/get-started)
diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js
index 2fdaee940f1d..81d0ba1fb150 100644
--- a/code/renderers/html/template/cli/js/Button.stories.js
+++ b/code/renderers/html/template/cli/js/Button.stories.js
@@ -1,6 +1,6 @@
import { createButton } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
export default {
title: 'Example/Button',
tags: ['autodocs'],
diff --git a/code/renderers/html/template/cli/ts-3-8/Button.stories.ts b/code/renderers/html/template/cli/ts-3-8/Button.stories.ts
index 94acb8bad142..f91d91ae731e 100644
--- a/code/renderers/html/template/cli/ts-3-8/Button.stories.ts
+++ b/code/renderers/html/template/cli/ts-3-8/Button.stories.ts
@@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/html';
import type { ButtonProps } from './Button';
import { createButton } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta: Meta = {
title: 'Example/Button',
tags: ['autodocs'],
diff --git a/code/renderers/html/template/cli/ts-4-9/Button.stories.ts b/code/renderers/html/template/cli/ts-4-9/Button.stories.ts
index 35be60e2e0a7..2a86ecbec3b0 100644
--- a/code/renderers/html/template/cli/ts-4-9/Button.stories.ts
+++ b/code/renderers/html/template/cli/ts-4-9/Button.stories.ts
@@ -2,7 +2,7 @@ import type { StoryObj, Meta } from '@storybook/html';
import type { ButtonProps } from './Button';
import { createButton } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
title: 'Example/Button',
tags: ['autodocs'],
diff --git a/code/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx
index 528bd68d63fa..53ce0d71dd44 100644
--- a/code/renderers/preact/template/cli/Button.stories.jsx
+++ b/code/renderers/preact/template/cli/Button.stories.jsx
@@ -1,6 +1,6 @@
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
export default {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/react/template/cli/js/Button.stories.js b/code/renderers/react/template/cli/js/Button.stories.js
index 91c2e07ebf62..3a3f67ec8fb4 100644
--- a/code/renderers/react/template/cli/js/Button.stories.js
+++ b/code/renderers/react/template/cli/js/Button.stories.js
@@ -1,6 +1,6 @@
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
export default {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/react/template/cli/ts-3-8/Button.stories.ts b/code/renderers/react/template/cli/ts-3-8/Button.stories.ts
index c8d595982b78..b65080126a44 100644
--- a/code/renderers/react/template/cli/ts-3-8/Button.stories.ts
+++ b/code/renderers/react/template/cli/ts-3-8/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta: Meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/react/template/cli/ts-4-9/Button.stories.ts b/code/renderers/react/template/cli/ts-4-9/Button.stories.ts
index e1fcc8c553b5..742c3aa7b029 100644
--- a/code/renderers/react/template/cli/ts-4-9/Button.stories.ts
+++ b/code/renderers/react/template/cli/ts-4-9/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/svelte/template/cli/js/Button.stories.js b/code/renderers/svelte/template/cli/js/Button.stories.js
index ab4c1d27f701..c5c88776d6b5 100644
--- a/code/renderers/svelte/template/cli/js/Button.stories.js
+++ b/code/renderers/svelte/template/cli/js/Button.stories.js
@@ -1,6 +1,6 @@
import Button from './Button.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
export default {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts
index 2778f1779168..55f3b1c8e50a 100644
--- a/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-3-8/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/svelte';
import Button from './Button.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta: Meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/svelte/template/cli/ts-4-9/Button.stories.ts b/code/renderers/svelte/template/cli/ts-4-9/Button.stories.ts
index 0ca1472281db..119cb87f61d5 100644
--- a/code/renderers/svelte/template/cli/ts-4-9/Button.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-4-9/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/svelte';
import Button from './Button.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/vue/template/cli/Button.stories.js b/code/renderers/vue/template/cli/Button.stories.js
index c11632fe1ffe..ac1fe487803b 100644
--- a/code/renderers/vue/template/cli/Button.stories.js
+++ b/code/renderers/vue/template/cli/Button.stories.js
@@ -1,6 +1,6 @@
import MyButton from './Button.vue';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
export default {
title: 'Example/Button',
component: MyButton,
diff --git a/code/renderers/vue3/template/cli/js/Button.stories.js b/code/renderers/vue3/template/cli/js/Button.stories.js
index efb4987fc23a..5dc3bbc92b12 100644
--- a/code/renderers/vue3/template/cli/js/Button.stories.js
+++ b/code/renderers/vue3/template/cli/js/Button.stories.js
@@ -1,6 +1,6 @@
import MyButton from './Button.vue';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
export default {
title: 'Example/Button',
component: MyButton,
diff --git a/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts b/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts
index d9b2bd808fbb..c368a36d078d 100644
--- a/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts
+++ b/code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3';
import Button from './Button.vue';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta: Meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/vue3/template/cli/ts-3-8/Header.stories.ts b/code/renderers/vue3/template/cli/ts-3-8/Header.stories.ts
index 7a04abea44ae..fd0ba06e9c5d 100644
--- a/code/renderers/vue3/template/cli/ts-3-8/Header.stories.ts
+++ b/code/renderers/vue3/template/cli/ts-3-8/Header.stories.ts
@@ -4,7 +4,7 @@ import MyHeader from './Header.vue';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Example/Header',
diff --git a/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts b/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts
index 4740451f0cdf..39013172fbe6 100644
--- a/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts
+++ b/code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3';
import Button from './Button.vue';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta = {
title: 'Example/Button',
component: Button,
diff --git a/code/renderers/vue3/template/cli/ts-4-9/Header.stories.ts b/code/renderers/vue3/template/cli/ts-4-9/Header.stories.ts
index 69a0f02df272..eb8fc1fcee56 100644
--- a/code/renderers/vue3/template/cli/ts-4-9/Header.stories.ts
+++ b/code/renderers/vue3/template/cli/ts-4-9/Header.stories.ts
@@ -4,7 +4,7 @@ import MyHeader from './Header.vue';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Example/Header',
diff --git a/code/renderers/web-components/template/cli/js/Button.stories.js b/code/renderers/web-components/template/cli/js/Button.stories.js
index f163c31c0093..d406b990ff7b 100644
--- a/code/renderers/web-components/template/cli/js/Button.stories.js
+++ b/code/renderers/web-components/template/cli/js/Button.stories.js
@@ -1,6 +1,6 @@
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
export default {
title: 'Example/Button',
tags: ['autodocs'],
diff --git a/code/renderers/web-components/template/cli/ts-3-8/Button.stories.ts b/code/renderers/web-components/template/cli/ts-3-8/Button.stories.ts
index 61725216cdf7..62d561636779 100644
--- a/code/renderers/web-components/template/cli/ts-3-8/Button.stories.ts
+++ b/code/renderers/web-components/template/cli/ts-3-8/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
import type { ButtonProps } from './Button';
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta: Meta = {
title: 'Example/Button',
tags: ['autodocs'],
diff --git a/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts b/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts
index ccc8fe31785a..03516d6c1abf 100644
--- a/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts
+++ b/code/renderers/web-components/template/cli/ts-4-9/Button.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
import type { ButtonProps } from './Button';
import { Button } from './Button';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories/introduction
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const meta = {
title: 'Example/Button',
tags: ['autodocs'],
diff --git a/docs/addons/addon-types.md b/docs/addons/addon-types.md
index 10be1afd1c9b..c189c090d815 100644
--- a/docs/addons/addon-types.md
+++ b/docs/addons/addon-types.md
@@ -52,7 +52,7 @@ The `icon` element used in the example loads the icons from the `@storybook/comp
### Tabs
-Tab addons allow you to create your own custom tabs in Storybook. For example, the official [@storybook/addon-docs](../writing-docs/introduction.md) uses this pattern.
+Tab addons allow you to create your own custom tabs in Storybook. For example, the official [@storybook/addon-docs](../writing-docs/index.md) uses this pattern.
![Storybook tab addon](./storybook-tab.png)
diff --git a/docs/addons/introduction.md b/docs/addons/index.md
similarity index 84%
rename from docs/addons/introduction.md
rename to docs/addons/index.md
index 1550bf8c7567..349090fb5f80 100644
--- a/docs/addons/introduction.md
+++ b/docs/addons/index.md
@@ -1,8 +1,9 @@
---
title: 'Introduction to addons'
+hideRendererSelector: true
---
-Addons extend Storybook with features and integrations that are not built into the core. Most Storybook features are implemented as addons. For instance: [documentation](../writing-docs/introduction.md), [accessibility testing](https://github.com/storybookjs/storybook/tree/master/addons/a11y), [interactive controls](../essentials/controls.md), among others.
+Addons extend Storybook with features and integrations that are not built into the core. Most Storybook features are implemented as addons. For instance: [documentation](../writing-docs/index.md), [accessibility testing](https://github.com/storybookjs/storybook/tree/master/addons/a11y), [interactive controls](../essentials/controls.md), among others.
The [addon API](./addons-api.md) makes it easy for you to configure and customize Storybook in new ways. There are countless addons made by the community that unlocks time-saving workflows.
Browse our [addon catalog](https://storybook.js.org/addons) to install an existing addon or as inspiration for your own addon.
@@ -30,7 +31,7 @@ Storybook addons allow you to extend what's already possible with Storybook, eve
### UI-based addons
-[UI-based addons](./addon-types.md#ui-based-addons) focus on customizing Storybook's user interface to extend your development workflow. Examples of UI-based addons include: [Controls](../essentials/controls.md), [Docs](../writing-docs/introduction.md) and [Accessibility](https://github.com/storybookjs/storybook/tree/master/addons/a11y).
+[UI-based addons](./addon-types.md#ui-based-addons) focus on customizing Storybook's user interface to extend your development workflow. Examples of UI-based addons include: [Controls](../essentials/controls.md), [Docs](../writing-docs/index.md) and [Accessibility](https://github.com/storybookjs/storybook/tree/master/addons/a11y).
[Learn how to write an addon Β»](./writing-addons.md)
diff --git a/docs/addons/install-addons.md b/docs/addons/install-addons.md
index 0990f3022ce2..33859546e2ea 100644
--- a/docs/addons/install-addons.md
+++ b/docs/addons/install-addons.md
@@ -22,7 +22,7 @@ For example, to include accessibility testing in Storybook, run the following co
-Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
+Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) to the following:
@@ -64,11 +64,11 @@ For example, to use SCSS styling, run the following command to install the addon
-Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet.
+Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet.
-Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
+Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) to the following:
diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md
index 57d243ac74b3..658efea74cf9 100644
--- a/docs/addons/writing-presets.md
+++ b/docs/addons/writing-presets.md
@@ -10,7 +10,7 @@ Preset addons allow developers to compose various configuration options and plug
### Local presets
-This type of preset allows you to encapsulate and organize configurations specific to the addon, including [builder](../builders/overview.md) support, [Babel](https://babeljs.io/), or third-party integrations. For example:
+This type of preset allows you to encapsulate and organize configurations specific to the addon, including [builder](../builders/index.md) support, [Babel](https://babeljs.io/), or third-party integrations. For example:
diff --git a/docs/api/arg-types.md b/docs/api/arg-types.md
index 5cf1a9006355..e70678c9877e 100644
--- a/docs/api/arg-types.md
+++ b/docs/api/arg-types.md
@@ -12,7 +12,7 @@ The most concrete realization of argTypes is the [`ArgTypes` doc block](./doc-bl
## Automatic argType inference
-If you are using the Storybook [docs](../writing-docs/introduction.md) addon (installed by default as part of [essentials](../essentials/introduction.md)), then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](../writing-stories/introduction#default-export) of the CSF file.
+If you are using the Storybook [docs](../writing-docs/index.md) addon (installed by default as part of [essentials](../essentials/index.md)), then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](../writing-stories/index.md#default-export) of the CSF file.
To do so, Storybook uses various static analysis tools depending on your framework.
@@ -30,7 +30,7 @@ The data structure of `argTypes` is designed to match the output of the these to
For most Storybook projects, argTypes are [automatically inferred](#automatic-argtype-inference) from your components. Any argTypes specified manually will override the inferred values.
-ArgTypes are most often specified at the meta (component) level, in the [default export](../writing-stories/introduction#default-export) of the CSF file:
+ArgTypes are most often specified at the meta (component) level, in the [default export](../writing-stories/index.md#default-export) of the CSF file:
@@ -59,7 +59,7 @@ They can apply to all stories when specified at the project (global) level, in t
-Or they can apply only to a [specific story](../writing-stories/introduction#defining-stories):
+Or they can apply only to a [specific story](../writing-stories/index.md#defining-stories):
diff --git a/docs/api/csf.md b/docs/api/csf.md
index 60c9ba5e4355..9e494e151a7a 100644
--- a/docs/api/csf.md
+++ b/docs/api/csf.md
@@ -4,7 +4,7 @@ title: 'Component Story Format (CSF)'
-Component Story Format (CSF) is the recommended way to [write stories](../writing-stories/introduction.md). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook.
+Component Story Format (CSF) is the recommended way to [write stories](../writing-stories/index.md). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook.
@@ -36,7 +36,7 @@ The `component` field is required and used by addons for automatic prop table ge
-For more examples, see [writing stories](../writing-stories/introduction.md).
+For more examples, see [writing stories](../writing-stories/index.md).
## Named story exports
@@ -99,7 +99,7 @@ Storybook's `name` configuration element is helpful in specific circumstances. C
Starting in SB 6.0, stories accept named inputs called Args. Args are dynamic data that are provided (and possibly updated by) Storybook and its addons.
-Consider Storybookβs ["Button" example](../writing-stories/introduction.md#defining-stories) of a text button that logs its click events:
+Consider Storybookβs ["Button" example](../writing-stories/index.md#defining-stories) of a text button that logs its click events:
@@ -173,7 +173,7 @@ Or even more simply:
Not only are these versions shorter and more accessible to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically.
-For more information on setting up [Docs](../writing-docs/introduction.md) and [Actions](../essentials/actions.md), see their respective documentation.
+For more information on setting up [Docs](../writing-docs/index.md) and [Actions](../essentials/actions.md), see their respective documentation.
## Play function
@@ -468,4 +468,4 @@ Finally, CSF 3 can automatically generate titles.
-You can still specify a title like in CSF 2, but if you don't specify one, it can be inferred from the story's path on disk. For more information, see the section on [configuring story loading](../configure/overview#configure-story-loading).
+You can still specify a title like in CSF 2, but if you don't specify one, it can be inferred from the story's path on disk. For more information, see the section on [configuring story loading](../configure/index.md#configure-story-loading).
diff --git a/docs/api/doc-block-controls.md b/docs/api/doc-block-controls.md
index 7079a6a43831..d199c1f3ec99 100644
--- a/docs/api/doc-block-controls.md
+++ b/docs/api/doc-block-controls.md
@@ -31,7 +31,7 @@ import * as ButtonStories from './Button.stories'
-The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.md) (included in [`@storybook/addon-essentials`](../essentials/introduction.md)).
+The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.md) (included in [`@storybook/addon-essentials`](../essentials/index.md)).
diff --git a/docs/api/index.md b/docs/api/index.md
new file mode 100644
index 000000000000..e49768d52a69
--- /dev/null
+++ b/docs/api/index.md
@@ -0,0 +1,103 @@
+---
+title: 'API references'
+hideRendererSelector: true
+---
+
+
+
+An overview of all available API references for Storybook.
+
+## Configuration
+
+
+
+
+ Name
+ Description
+
+
+
+
+ main.js|ts
+
+ Storybook's primary configuration file, which specifies your Storybook project's behavior,
+ including the location of your stories, the addons you use, feature flags and other
+ project-specific settings.
+
+
+
+ preview.js|jsx|ts|tsx
+
+ This configuration file controls the way stories are rendered. You can also use it to run
+ code that applies to all stories.
+
+
+
+ manager.js|ts
+
+ This configuration file controls the behavior of Storybook's UI, the manager.
+
+
+
+ CLI
+
+ Storybook is a CLI tool. You can start Storybook in development mode or build a static
+ version of your Storybook.
+
+
+
+
+
+## Stories
+
+
+
+
+ Name
+ Description
+
+
+
+
+ CSF
+
+ Component Story Format (CSF) is the API for writing stories. It's an
+ open standard based on ES6 modules that
+ is portable beyond Storybook.
+
+
+
+ ArgTypes
+
+ ArgTypes specify the behavior of args . By specifying
+ the type of an arg, you constrain the values that it can accept and provide information
+ about args that are not explicitly set.
+
+
+
+
+
+## Docs
+
+
+
+
+ Name
+ Description
+
+
+
+
+ Doc blocks
+
+ Storybook offers several doc blocks to help document your components and other aspects of
+ your project.
+
+
+
+
diff --git a/docs/api/main-config-preview-annotations.md b/docs/api/main-config-preview-annotations.md
index 8e69ae265645..d5a4f91298d9 100644
--- a/docs/api/main-config-preview-annotations.md
+++ b/docs/api/main-config-preview-annotations.md
@@ -10,7 +10,7 @@ Add additional scripts to run in the story preview.
-Mostly used by [frameworks](../contribute/framework.md#previewjs-example). Storybook users and [addon authors](../addons/writing-presets.md) should add scripts to [`preview.js`](../configure/overview.md#configure-story-rendering) instead.
+Mostly used by [frameworks](../contribute/framework.md#previewjs-example). Storybook users and [addon authors](../addons/writing-presets.md) should add scripts to [`preview.js`](../configure/index.md#configure-story-rendering) instead.
diff --git a/docs/api/new-frameworks.md b/docs/api/new-frameworks.md
index 7321cb3b2b19..1e3f87fe5e88 100644
--- a/docs/api/new-frameworks.md
+++ b/docs/api/new-frameworks.md
@@ -150,7 +150,7 @@ The framework's render function is the entity responsible for converting the ren
### Package structure
-On the client side, the key file is [`src/client/preview.js`](../configure/overview.md#configure-story-rendering):
+On the client side, the key file is [`src/client/preview.js`](../configure/index.md#configure-story-rendering):
diff --git a/docs/builders/builder-api.md b/docs/builders/builder-api.md
index 056a96144a78..5d21370b5100 100644
--- a/docs/builders/builder-api.md
+++ b/docs/builders/builder-api.md
@@ -55,7 +55,7 @@ In production, the `build` API call is responsible for generating a static Story
## Implementation
-Under the hood, a builder is responsible for serving/building the preview `iframe`, which has its own set of requirements. To fully support Storybook, including the [Essential addons](../writing-stories/introduction.md) that ship with Storybook, it must consider the following.
+Under the hood, a builder is responsible for serving/building the preview `iframe`, which has its own set of requirements. To fully support Storybook, including the [Essential addons](../writing-stories/index.md) that ship with Storybook, it must consider the following.
### Import stories
@@ -77,7 +77,7 @@ By default, Storybook's configuration is handled in a dedicated file (`storybook
### Handle preview.js exports
-The [`preview.js`](../configure/overview.md#configure-story-rendering) configuration file allows users to control how the story renders in the UI. This is provided via the [decorators](../writing-stories/decorators.md) named export. When Storybook starts, it converts these named exports into internal API calls via virtual module entry, for example, `addDecorator()`. The builder must also provide a similar implementation. For example:
+The [`preview.js`](../configure/index.md#configure-story-rendering) configuration file allows users to control how the story renders in the UI. This is provided via the [decorators](../writing-stories/decorators.md) named export. When Storybook starts, it converts these named exports into internal API calls via virtual module entry, for example, `addDecorator()`. The builder must also provide a similar implementation. For example:
@@ -91,7 +91,7 @@ The [`preview.js`](../configure/overview.md#configure-story-rendering) configura
### MDX support
-[Storybook's Docs](../writing-docs/introduction.md) includes the ability to author stories/documentation in MDX using a Webpack loader. The builder must also know how to interpret MDX and invoke Storybook's special extensions. For example:
+[Storybook's Docs](../writing-docs/index.md) includes the ability to author stories/documentation in MDX using a Webpack loader. The builder must also know how to interpret MDX and invoke Storybook's special extensions. For example:
diff --git a/docs/builders/overview.md b/docs/builders/index.md
similarity index 97%
rename from docs/builders/overview.md
rename to docs/builders/index.md
index f0dbee77eeea..ed1309da02cb 100644
--- a/docs/builders/overview.md
+++ b/docs/builders/index.md
@@ -1,5 +1,6 @@
---
title: 'Builders'
+hideRendererSelector: true
---
Storybook, at its core, is powered by builders such as Webpack and Vite. These builders spin up a development environment, compile your codeβJavascript, CSS, and MDXβinto an executable bundle and update the browser in real-time.
diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md
index 74964ff1c368..703459da2e4f 100644
--- a/docs/builders/webpack.md
+++ b/docs/builders/webpack.md
@@ -27,7 +27,7 @@ By default, Storybook provides zero-config support for Webpack and automatically
### Override the default configuration
-Storybook's Webpack configuration is based on [Webpack 5](https://webpack.js.org/), allowing it to be extended to fit your project's needs. If you need to add a loader or a plugin, you can provide the `webpackFinal` configuration element in your [`.storybook/main.js|ts`](../configure/overview.md#configure-your-storybook-project) file. The configuration element should export a function that receives the baseline configuration as the first argument and Storybook's options object as the second argument. For example:
+Storybook's Webpack configuration is based on [Webpack 5](https://webpack.js.org/), allowing it to be extended to fit your project's needs. If you need to add a loader or a plugin, you can provide the `webpackFinal` configuration element in your [`.storybook/main.js|ts`](../configure/index.md#configure-your-storybook-project) file. The configuration element should export a function that receives the baseline configuration as the first argument and Storybook's options object as the second argument. For example:
diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
index d4ba9252c58c..e2948c3027b6 100644
--- a/docs/configure/environment-variables.md
+++ b/docs/configure/environment-variables.md
@@ -111,7 +111,7 @@ Then they'll be hardcoded to the static version of your Storybook.
### Using Storybook configuration
-Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/overview.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:
+Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/index.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:
diff --git a/docs/configure/frameworks.md b/docs/configure/frameworks.md
index 3bf9045d8541..3602138dab30 100644
--- a/docs/configure/frameworks.md
+++ b/docs/configure/frameworks.md
@@ -56,7 +56,7 @@ With the release of Next.js [version 13](https://nextjs.org/blog/next-13), it in
### My framework doesn't work with Storybook
-Out of the box, most frameworks work seamlessly with Storybook. However, some frameworks (e.g., [CRACO](https://craco.js.org/)) provide their own configuration that Storybook isn't prepared to handle without additional steps, either [via addon](../addons/writing-presets.md) or integration. To learn more, read our [addons guide](../addons/introduction.md).
+Out of the box, most frameworks work seamlessly with Storybook. However, some frameworks (e.g., [CRACO](https://craco.js.org/)) provide their own configuration that Storybook isn't prepared to handle without additional steps, either [via addon](../addons/writing-presets.md) or integration. To learn more, read our [addons guide](../addons/index.md).
### How do I build a Storybook framework?
diff --git a/docs/configure/overview.md b/docs/configure/index.md
similarity index 100%
rename from docs/configure/overview.md
rename to docs/configure/index.md
diff --git a/docs/configure/sidebar-and-urls.md b/docs/configure/sidebar-and-urls.md
index ab5f3afe509e..4e03f93be782 100644
--- a/docs/configure/sidebar-and-urls.md
+++ b/docs/configure/sidebar-and-urls.md
@@ -145,7 +145,7 @@ If you need to preserve the naming scheme, you can add the `title` element to th
### Auto-title prefixes
-Additionally, if you customize your Storybook to load your stories based on a [configuration object](./overview.md#with-a-configuration-object), including a `titlePrefix`, Storybook automatically prefixes all titles to matching stories. For example, assuming you have the following configuration:
+Additionally, if you customize your Storybook to load your stories based on a [configuration object](./index.md#with-a-configuration-object), including a `titlePrefix`, Storybook automatically prefixes all titles to matching stories. For example, assuming you have the following configuration:
diff --git a/docs/configure/story-layout.md b/docs/configure/story-layout.md
index 5adad91aebea..07236f9cbab4 100644
--- a/docs/configure/story-layout.md
+++ b/docs/configure/story-layout.md
@@ -6,7 +6,7 @@ The `layout` [parameter](../writing-stories/parameters.md) allows you to configu
## Global layout
-You can add the parameter to your [`./storybook/preview.js`](./overview.md#configure-story-rendering), like so:
+You can add the parameter to your [`./storybook/preview.js`](./index.md#configure-story-rendering), like so:
diff --git a/docs/configure/story-rendering.md b/docs/configure/story-rendering.md
index ae98bac3d9f3..fff549e8ef4c 100644
--- a/docs/configure/story-rendering.md
+++ b/docs/configure/story-rendering.md
@@ -6,7 +6,7 @@ In Storybook, your stories render in a particular βpreviewβ iframe (Canvas t
## Adding to <head>
-If you need to add extra elements to the `head` of the preview iframe, for instance, to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./overview.md#configure-story-rendering) and add tags like this:
+If you need to add extra elements to the `head` of the preview iframe, for instance, to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./index.md#configure-story-rendering) and add tags like this:
diff --git a/docs/configure/storybook-addons.md b/docs/configure/storybook-addons.md
index 48315969243c..697e0884889a 100644
--- a/docs/configure/storybook-addons.md
+++ b/docs/configure/storybook-addons.md
@@ -4,7 +4,7 @@ title: 'Storybook Addons'
A key strength of Storybook is its extensibility. Use addons to extend and customize Storybook to fit your teamβs development workflow.
-Addons are integral to the way Storybook works. Many of Storybook's core features are implemented as addons! These addons are installed out of the box with [essentials](../essentials/introduction.md).
+Addons are integral to the way Storybook works. Many of Storybook's core features are implemented as addons! These addons are installed out of the box with [essentials](../essentials/index.md).
## Addon features
diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index 2f847b80935d..f2e70a9b6729 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -10,7 +10,7 @@ If you're using Vite to build your Storybook, you're covered! Storybook will use
## Importing CSS files
-Storybook is pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering).
+Storybook is pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in [`.storybook/preview.js`](./index.md#configure-story-rendering).
diff --git a/docs/configure/telemetry.md b/docs/configure/telemetry.md
index 1d1af24046c1..f239c86a7247 100644
--- a/docs/configure/telemetry.md
+++ b/docs/configure/telemetry.md
@@ -34,8 +34,8 @@ Specifically, we track the following information in our telemetry events:
- Supported view layers (e.g., React, Vue, Angular, Svelte).
- Builder (e.g., Webpack5, Vite).
- Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)).
- - [Addons](https://storybook.js.org/integrations) (e.g., [Essentials](../essentials/introduction.md), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
- - [Feature flags](./overview.md#feature-flags) (e.g., `buildStoriesJson`).
+ - [Addons](https://storybook.js.org/integrations) (e.g., [Essentials](../essentials/index.md), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
+ - [Feature flags](./index.md#feature-flags) (e.g., `buildStoriesJson`).
- Package manager information (e.g., `npm`, `yarn`).
- Monorepo information (e.g., [NX](https://nx.dev/), [Turborepo](https://turborepo.org/)).
- In-app events (e.g., [Storybook guided tour](https://github.com/storybookjs/addon-onboarding)).
diff --git a/docs/configure/theming.md b/docs/configure/theming.md
index 73cc315f5fc6..5ac07a9b5a61 100644
--- a/docs/configure/theming.md
+++ b/docs/configure/theming.md
@@ -42,7 +42,7 @@ When setting a theme, set a complete theme object. The theme is replaced, not co
## Theming docs
-[Storybook Docs](../writing-docs/introduction.md) uses the same theme system as Storybookβs UI but is themed independently from the main UI.
+[Storybook Docs](../writing-docs/index.md) uses the same theme system as Storybookβs UI but is themed independently from the main UI.
Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](./features-and-behavior.md):
@@ -56,7 +56,7 @@ Supposing you have a Storybook theme defined for the main UI in [`.storybook/man
-Here's how you'd specify the same theme for docs in [`.storybook/preview.js`](./overview.md#configure-story-rendering):
+Here's how you'd specify the same theme for docs in [`.storybook/preview.js`](./index.md#configure-story-rendering):
@@ -164,7 +164,7 @@ The same way as you can adjust your [previewβs head tag](../configure/story-re
If you're using MDX for docs, there's one more level of "themability". MDX allows you to completely override the rendered components from Markdown using a `components` parameter. It's an advanced usage that we don't officially support in Storybook, but it's a powerful construct if you need it.
-Here's how you might insert a custom code renderer for `code` blocks on the page, in [`.storybook/preview.js`](./overview.md#configure-story-rendering):
+Here's how you might insert a custom code renderer for `code` blocks on the page, in [`.storybook/preview.js`](./index.md#configure-story-rendering):
diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md
index 61073d7b4374..41537c576f70 100644
--- a/docs/configure/webpack.md
+++ b/docs/configure/webpack.md
@@ -4,7 +4,7 @@ title: 'Webpack'
Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](https://storybook.js.org/addons/) are also available that extend the configuration for other everyday use cases.
-You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./overview.md#configure-your-storybook-project) file.
+You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./index.md#configure-your-storybook-project) file.
The value should be an async function that receives a webpack config and eventually returns a webpack config.
@@ -65,7 +65,7 @@ Starting with Storybook 6.4, [bundle splitting](https://v4.webpack.js.org/guides
-When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./overview.md#on-demand-story-loading).
+When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./index.md#on-demand-story-loading).
### Webpack 5
@@ -117,7 +117,7 @@ This feature will mean build output is cached between runs of Storybook, speedin
### Extending Storybookβs webpack config
-To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](./overview.md#configure-story-rendering).
+To extend the above configuration, use the `webpackFinal` field of [`.storybook/main.js`](./index.md#configure-story-rendering).
The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, and this will have information about where config came from, whether we're in production or development mode, etc.
@@ -159,7 +159,7 @@ If you're using a non-standard Storybook config directory, you should put `main.
### Using your existing config
-Suppose you have an existing webpack config for your project and want to reuse this app's configuration. In that case, you can import your main webpack config into Storybook's [`.storybook/main.js`](./overview.md#configure-story-rendering) and merge both:
+Suppose you have an existing webpack config for your project and want to reuse this app's configuration. In that case, you can import your main webpack config into Storybook's [`.storybook/main.js`](./index.md#configure-story-rendering) and merge both:
The following code snippet shows how you can replace the loaders from Storybook with the ones from your app's `webpack.config.js`:
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index 1ce7726caf3e..b30f3fe72aa9 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -106,7 +106,7 @@ When you're done coding, add documentation and tests as appropriate. That simpli
Adding a story or set of generic stories to our suite helps you test your work.
-Assuming you're working on one of the [Essential addons](../essentials/introduction.md), there's a chance that a complete set of stories already exists. Check the addon's `template/stories` directory that documents how it's supposed to work and add your stories there.
+Assuming you're working on one of the [Essential addons](../essentials/index.md), there's a chance that a complete set of stories already exists. Check the addon's `template/stories` directory that documents how it's supposed to work and add your stories there.
If you're modifying something related to a specific renderer (e.g., React, Vue, etc.), it will also have a similar `template/stories` directory in which you'll need to add your stories.
diff --git a/docs/contribute/framework.md b/docs/contribute/framework.md
index f3125080a4b9..a29ab99abc3b 100644
--- a/docs/contribute/framework.md
+++ b/docs/contribute/framework.md
@@ -2,7 +2,7 @@
title: 'Contributing a Storybook framework'
---
-A Storybook framework is a node package that enables out-of-the-box support for either a metaframework (Next.js, NuxtJS, SvelteKit) or a combination of [builder](../builders/overview) (Webpack, Vite) plus renderer (React, Angular, Vue, web components, etc).
+A Storybook framework is a node package that enables out-of-the-box support for either a metaframework (Next.js, NuxtJS, SvelteKit) or a combination of [builder](../builders/index.md) (Webpack, Vite) plus renderer (React, Angular, Vue, web components, etc).
For metaframeworks, the Storybook framework also takes care of additional configuration necessary to make Storybook behave similarly to apps generated by the metaframework. For example, `@storybook/nextjs` [recreates or mocks a number of features of Next.js apps](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#supported-features) inside Storybook.
@@ -130,7 +130,7 @@ The [preset API](../addons/writing-presets) is where you will configure the Stor
#### `preview.js` ([example](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/preview.tsx))
-The (optional) [preview API](../configure/overview#configure-story-rendering) is where you configure the rendering of stories, such as global decorators or initializing some runtime config needed for your framework to behave as expected. If your framework requires this file, note that you also need to [configure the `previewAnnotations` in `preset.js`](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/preset.ts#L71-L74).
+The (optional) [preview API](../configure/index.md#configure-story-rendering) is where you configure the rendering of stories, such as global decorators or initializing some runtime config needed for your framework to behave as expected. If your framework requires this file, note that you also need to [configure the `previewAnnotations` in `preset.js`](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/preset.ts#L71-L74).
#### `types.ts` ([example](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/types.ts))
diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md
index 90036ca37e89..95d81b691903 100644
--- a/docs/contribute/how-to-reproduce.md
+++ b/docs/contribute/how-to-reproduce.md
@@ -54,7 +54,7 @@ Install and configure any Storybook [addons](https://storybook.js.org/addons/) t
## Add stories
-Any Storybook reproduction wouldn't be complete without [stories](../writing-stories/introduction.md). To help fix your issue faster, we encourage you to include the minimum amount of stories that will replicate your issue.
+Any Storybook reproduction wouldn't be complete without [stories](../writing-stories/index.md). To help fix your issue faster, we encourage you to include the minimum amount of stories that will replicate your issue.
## Host
diff --git a/docs/contribute/how-to-contribute.md b/docs/contribute/index.md
similarity index 94%
rename from docs/contribute/how-to-contribute.md
rename to docs/contribute/index.md
index 35faaa534d55..a49fbeb2fc1a 100644
--- a/docs/contribute/how-to-contribute.md
+++ b/docs/contribute/index.md
@@ -1,5 +1,6 @@
---
title: 'How to contribute'
+hideRendererSelector: true
---
Storybook is a community-oriented open source project that welcomes contributions. Some of our most popular features started with a developer wanting to solve a problem for themselves.
@@ -15,7 +16,7 @@ In the interest of fostering an open and welcoming environment, we as contributo
- [**Frameworks**](./framework.md) to get started with a new framework
- [**Documentation**](./documentation-updates.md) for documentation improvements, typos, and clarifications
- [**Examples**](./new-snippets.md) for new snippets and examples
-- [**Addons**](./../addons/introduction.md) for new addons
+- [**Addons**](./../addons/index.md) for new addons
## Not sure how to get started?
diff --git a/docs/essentials/actions.md b/docs/essentials/actions.md
index 70a7496f9ee3..31ae0f5d5c60 100644
--- a/docs/essentials/actions.md
+++ b/docs/essentials/actions.md
@@ -72,7 +72,7 @@ If you need more granular control over which `argTypes` are matched, you can adj
-If you're generating argTypes with another addon (like [docs](../writing-docs/introduction.md), which is the common behavior), ensure the actions addon **AFTER** the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering). This is default in [essentials](./introduction.md).
+If you're generating argTypes with another addon (like [docs](../writing-docs/index.md), which is the common behavior), ensure the actions addon **AFTER** the other addon. You can do this by listing it later in the addons registration code in [`.storybook/main.js`](../configure/index.md#configure-story-rendering). This is default in [essentials](./index.md).
diff --git a/docs/essentials/backgrounds.md b/docs/essentials/backgrounds.md
index f6b286ec350b..3c295a12b360 100644
--- a/docs/essentials/backgrounds.md
+++ b/docs/essentials/backgrounds.md
@@ -15,7 +15,7 @@ The backgrounds toolbar addon allows you to set the background color in which th
By default, the backgrounds toolbar includes a light and dark background.
-But you're not restricted to these backgrounds, you can configure your own set of colors with the `parameters.backgrounds` [parameter](../writing-stories/parameters.md) in your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
+But you're not restricted to these backgrounds, you can configure your own set of colors with the `parameters.backgrounds` [parameter](../writing-stories/parameters.md) in your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering):
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 7f8da1974127..131a38be6b8c 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -264,7 +264,7 @@ Controls supports the following configuration [parameters](../writing-stories/pa
Since Controls is built on the same engine as Storybook Docs, it can also show property documentation alongside your controls using the expanded parameter (defaults to false). This means you embed a complete [`Controls`](../api/doc-block-controls.md) doc block in the controls panel. The description and default value rendering can be [customized](#fully-custom-args) in the same way as the doc block.
-To enable expanded mode globally, add the following to [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
+To enable expanded mode globally, add the following to [`.storybook/preview.js`](../configure/index.md#configure-story-rendering):
diff --git a/docs/essentials/introduction.md b/docs/essentials/index.md
similarity index 94%
rename from docs/essentials/introduction.md
rename to docs/essentials/index.md
index 4e89178bad28..4cddae864fee 100644
--- a/docs/essentials/introduction.md
+++ b/docs/essentials/index.md
@@ -1,5 +1,6 @@
---
title: 'Essential addons'
+hideRendererSelector: true
---
A major strength of Storybook are [addons](https://storybook.js.org/addons) that extend Storybookβs UI and behavior. Storybook ships by default with a set of βessentialβ addons that add to the initial user experience. There are many third-party addons as well as βofficialβ addons developed by the Storybook core team.
@@ -7,7 +8,7 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that
- [Actions](./actions.md)
- [Backgrounds](./backgrounds.md)
- [Controls](./controls.md)
-- [Docs](../writing-docs/introduction.md)
+- [Docs](../writing-docs/index.md)
- [Highlight](./highlight.md)
- [Measure & outline](./measure-and-outline.md)
- [Toolbars & globals](./toolbars-and-globals.md)
@@ -31,7 +32,7 @@ However, if you intend to install the Essentials addon manually into an existing
-Update your Storybook configuration (in [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
+Update your Storybook configuration (in [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering)) to include the Essentials addon.
@@ -48,7 +49,7 @@ Update your Storybook configuration (in [`.storybook/main.js|ts`](../configure/o
Essentials is "zero-configβ. It comes with a recommended configuration out of the box.
-If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, and depending on the method of choice, register them in your Storybook configuration file (i.e., [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
+If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, and depending on the method of choice, register them in your Storybook configuration file (i.e., [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
@@ -102,7 +103,7 @@ When you start Storybook, your custom configuration will override the default.
### Disabling addons
-If you need to disable any of the Essential's addons, you can do it by changing your [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) file.
+If you need to disable any of the Essential's addons, you can do it by changing your [`.storybook/main.js`](../configure/index.md#configure-story-rendering) file.
For example, if you wanted to disable the [backgrounds addon](./backgrounds.md), you would apply the following change to your Storybook configuration:
diff --git a/docs/essentials/interactions.md b/docs/essentials/interactions.md
index bbc1207e7cca..dc86f7b94f9a 100644
--- a/docs/essentials/interactions.md
+++ b/docs/essentials/interactions.md
@@ -32,7 +32,7 @@ Run the following command to install the interactions addon and related dependen
-Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering) to the following:
+Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) to the following:
@@ -47,7 +47,7 @@ Next, update [`.storybook/main.js|ts`](../configure/overview.md#configure-story-
-Make sure to list `@storybook/addon-interactions` **after** the [`@storybook/addon-essentials`](./introduction.md) addon (or the [`@storybook/addon-actions`](./actions.md) if you've installed it individually).
+Make sure to list `@storybook/addon-interactions` **after** the [`@storybook/addon-essentials`](./index.md) addon (or the [`@storybook/addon-actions`](./actions.md) if you've installed it individually).
diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
index 6f7e2916daa0..ff169ff91aa8 100644
--- a/docs/essentials/toolbars-and-globals.md
+++ b/docs/essentials/toolbars-and-globals.md
@@ -16,7 +16,7 @@ When the globals change, the story re-renders, and the decorators rerun with the
## Global types and the toolbar annotation
-Storybook has a simple, declarative syntax for configuring toolbar menus. In your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering), you can add your own toolbars by creating `globalTypes` with a `toolbar` annotation:
+Storybook has a simple, declarative syntax for configuring toolbar menus. In your [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering), you can add your own toolbars by creating `globalTypes` with a `toolbar` annotation:
@@ -31,7 +31,7 @@ Storybook has a simple, declarative syntax for configuring toolbar menus. In you
-As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering).
+As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering).
@@ -43,7 +43,7 @@ We have a `global` implemented. Let's wire it up! We can consume our new `theme`
-For example, suppose you are using [`styled-components`](https://styled-components.com/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
+For example, suppose you are using [`styled-components`](https://styled-components.com/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering) config:
@@ -60,7 +60,7 @@ For example, suppose you are using [`styled-components`](https://styled-componen
-For example, suppose you are using [`Vuetify`](https://vuetifyjs.com/en/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
+For example, suppose you are using [`Vuetify`](https://vuetifyjs.com/en/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering) config:
@@ -77,7 +77,7 @@ For example, suppose you are using [`Vuetify`](https://vuetifyjs.com/en/). You c
-For example, suppose you are using [`Angular Material`](https://material.angular.io/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
+For example, suppose you are using [`Angular Material`](https://material.angular.io/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering) config:
@@ -93,7 +93,7 @@ For example, suppose you are using [`Angular Material`](https://material.angular
-Depending on your framework and theming library, you can extend your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) and provide a decorator to load the theme. For example:
+Depending on your framework and theming library, you can extend your [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering) and provide a decorator to load the theme. For example:
@@ -114,7 +114,7 @@ So far, we've managed to create and consume a global inside Storybook.
Now let's take a look at a more complex example. Let's suppose we wanted to implement a new global called **locale** for internationalization, which shows a flag on the right side of the toolbar.
-In your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering), add the following:
+In your [`.storybook/preview.js|ts`](../configure/index.md#configure-story-rendering), add the following:
diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md
index d2742b73b81b..dd321d9f30ec 100644
--- a/docs/essentials/viewport.md
+++ b/docs/essentials/viewport.md
@@ -17,7 +17,7 @@ The Viewport toolbar item allows you to adjust the dimensions of the iframe your
Out of the box, the Viewport addon offers you a standard set of viewports that you can use.
-If you want to change the default set of viewports, you can set the global `parameters.viewport` [parameter](../writing-stories/parameters.md) in your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
+If you want to change the default set of viewports, you can set the global `parameters.viewport` [parameter](../writing-stories/parameters.md) in your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering):
@@ -32,12 +32,12 @@ If you want to change the default set of viewports, you can set the global `para
The viewport global can take an object with the following keys:
-| Field | Type | Description | Default Value |
+| Field | Type | Description | Default Value |
| ---------------------- | :-----: | :-------------------------------------------------------: | :------------: |
-| **defaultViewport** | String | Sets the default viewport | `'responsive'` |
-| **defaultOrientation** | String | Sets the default orientation (e.g. portrait or landscape) | `'portrait'` |
-| **disable** | Boolean | Disables the viewport | N/A |
-| **viewports** | Object | The configuration object for the viewport | `{}` |
+| **defaultViewport** | String | Sets the default viewport | `'responsive'` |
+| **defaultOrientation** | String | Sets the default orientation (e.g. portrait or landscape) | `'portrait'` |
+| **disable** | Boolean | Disables the viewport | N/A |
+| **viewports** | Object | The configuration object for the viewport | `{}` |
The viewports object needs the following keys:
@@ -51,7 +51,7 @@ The viewports object needs the following keys:
By default, Storybook uses a [minimal set of viewports](https://github.com/storybookjs/storybook/blob/next/code/addons/viewport/src/defaults.ts#L167) to get you started. But you're not restricted to these. The addon offers a more granular list of devices that you can use.
-Change your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) to the following:
+Change your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) to the following:
@@ -70,7 +70,7 @@ See [here](https://github.com/storybookjs/storybook/blob/master/addons/viewport/
### Add new devices
-If you have either a specific viewport or a list of viewports that you need to use, you can modify your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file and include them:
+If you have either a specific viewport or a list of viewports that you need to use, you can modify your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) file and include them:
diff --git a/docs/faq.md b/docs/faq.md
index 0935097c3006..580501e8ecd3 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -276,7 +276,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
| | Setup | [See current documentation](./get-started/setup.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
-| Write stories | Introduction | [See current documentation](./writing-stories/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
+| Write stories | Introduction | [See current documentation](./writing-stories/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Parameters | [See current documentation](./writing-stories/parameters.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented |
| | Decorators | [See current documentation](./writing-stories/decorators.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
@@ -301,7 +301,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | Viewport | [See current documentation](./essentials/viewport.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) |
| | Backgrounds | [See current documentation](./essentials/backgrounds.md) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) |
| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented |
-| Configure | Overview | [See current documentation](./configure/overview.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
+| Configure | Overview | [See current documentation](./configure/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) |
| | Integration/Frameworks | [See current documentation](./configure/frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Integration/Framework support for frameworks | [See current documentation](./configure/frameworks-feature-support.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Integration/Compilers | [See current documentation](./configure/compilers.md) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
@@ -314,11 +314,11 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | User Interface/Theming | [See current documentation](./configure/theming.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) |
| | User Interface/Sidebar & URLS | [See current documentation](./configure/sidebar-and-urls.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) |
| | Environment variables | [See current documentation](./configure/environment-variables.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) |
-| Builders | Introduction | [See current documentation](./builders/overview.md) | Non existing feature or undocumented | Non existing feature or undocumented |
+| Builders | Introduction | [See current documentation](./builders/index.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Vite | [See current documentation](./builders/vite.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | Webpack | [See current documentation](./builders/webpack.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md) |
| | Builder API | [See current documentation](./builders/builder-api.md) | Non existing feature or undocumented | Non existing feature or undocumented |
-| Addons | Introduction | [See current documentation](./addons/introduction.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
+| Addons | Introduction | [See current documentation](./addons/index.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Install addons | [See current documentation](./addons/install-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) |
| | Writing Addons | [See current documentation](./addons/writing-addons.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) |
| | Writing Presets | [See current documentation](./addons/writing-presets.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented |
@@ -507,7 +507,7 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
const StoryMeta: ComponentMeta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/frameworks.js b/docs/frameworks.js
index ed7483a3b273..4732c9cde203 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -18,7 +18,7 @@ module.exports = {
{
name: 'Docs',
unsupported: [],
- path: 'writing-docs/introduction',
+ path: 'writing-docs',
},
{
name: 'Viewport',
diff --git a/docs/get-started/browse-stories.md b/docs/get-started/browse-stories.md
index 391da5320dad..618c444e46ae 100644
--- a/docs/get-started/browse-stories.md
+++ b/docs/get-started/browse-stories.md
@@ -1,5 +1,6 @@
---
title: 'Browse Stories'
+hideRendererSelector: true
---
Last chapter, we learned that stories correspond with discrete component states. This chapter demonstrates how to use Storybook as a workshop for building components.
@@ -19,7 +20,6 @@ Navigate between stories by clicking on them in the sidebar. Try the sidebar sea
Or use keyboard shortcuts. Click on the Storybook's menu to see the list of shortcuts available.
-
![Storybook keyboard shortcuts examples](./storybook-keyboard-shortcuts.png)
## Toolbar
@@ -40,7 +40,7 @@ Storybook ships with time-saving tools built-in. The toolbar contains tools that
/>
-The [βDocsβ](../writing-docs/introduction.md) page displays auto-generated documentation for components (inferred from the source code). Usage documentation is helpful when sharing reusable components with your team, for example, in an application.
+The [βDocsβ](../writing-docs/index.md) page displays auto-generated documentation for components (inferred from the source code). Usage documentation is helpful when sharing reusable components with your team, for example, in an application.
![Storybook keyboard shortcuts examples](./mdx-example.png)
@@ -63,7 +63,7 @@ Addons are plugins that extend Storybook's core functionality. You can find them
/>
-Storybook is extensible. Our rich ecosystem of addons helps you test, document, and optimize your stories. You can also create an addon to satisfy your workflow requirements. Read more in the [addons section](../addons/introduction.md).
+Storybook is extensible. Our rich ecosystem of addons helps you test, document, and optimize your stories. You can also create an addon to satisfy your workflow requirements. Read more in the [addons section](../addons/index.md).
In the next chapter, we'll get your components rendering in Storybook so you can use it to supercharge component development.
diff --git a/docs/get-started/conclusion.md b/docs/get-started/conclusion.md
index 074d4dd09a48..83880dbc11bb 100644
--- a/docs/get-started/conclusion.md
+++ b/docs/get-started/conclusion.md
@@ -1,11 +1,12 @@
---
title: 'Conclusion'
+hideRendererSelector: true
---
Congratulations! You learned the basics. Storybook is the most popular tool for UI component development and documentation. Youβll be able to transfer these skills to thousands of companies that use Storybook to build UIs including GitHub, Airbnb, and Stripe.
If youβd like to learn workflows for building app UIs with Storybook, check out our in-depth guides over at the [tutorials](https://storybook.js.org/tutorials/) page. Continue reading for detailed information on how to use Storybook APIs.
-- [How to write stories](../writing-stories/introduction.md)
-- [How to document components and design systems](../writing-docs/introduction.md)
+- [How to write stories](../writing-stories/index.md)
+- [How to document components and design systems](../writing-docs/index.md)
- [View example Storybooks from leading companies](https://storybook.js.org/showcase)
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index 0f20f2c16496..5bc7d986e822 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -57,7 +57,7 @@ Don't see the tool that you're looking for? Check out the [styling and css](../c
## Configure Storybook for your stack
-Storybook comes with a permissive [default configuration](../configure/overview.md). It attempts to customize itself to fit your setup. But itβs not foolproof.
+Storybook comes with a permissive [default configuration](../configure/index.md). It attempts to customize itself to fit your setup. But itβs not foolproof.
Your project may have additional requirements before components can be rendered in isolation. This warrants customizing configuration further. There are three broad categories of configuration you might need.
@@ -86,7 +86,7 @@ If a particular story has a problem rendering, often it means your component exp
A common frontend pattern is for components to assume that they render in a specific βcontextβ with parent components higher up the rendering hierarchy (for instance, theme providers).
-Use [decorators](../writing-stories/decorators.md) to βwrapβ every story in the necessary context providers. The [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
+Use [decorators](../writing-stories/decorators.md) to βwrapβ every story in the necessary context providers. The [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 5adfded2f947..0416e3a2809e 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -97,6 +97,6 @@ Stories are also helpful for checking that UI continues to look correct as you m
/>
-Checking componentβs stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/introduction.md) for you.
+Checking componentβs stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/index.md) for you.
Now that weβve seen the basic anatomy of a story letβs see how we use Storybookβs UI to develop stories.
diff --git a/docs/get-started/why-storybook.md b/docs/get-started/why-storybook.md
index 7322d2d57c2e..efc231d34d75 100644
--- a/docs/get-started/why-storybook.md
+++ b/docs/get-started/why-storybook.md
@@ -111,7 +111,7 @@ When you write stories for components, you get a bunch of additional benefits fo
#### π Develop UIs that are more durable
-Isolate components and pages and track their use cases as [stories](../writing-stories/introduction.md). Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needsβcontext, API requests, device features, etc.
+Isolate components and pages and track their use cases as [stories](../writing-stories/index.md). Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needsβcontext, API requests, device features, etc.
#### β
Test UIs with less effort and no flakes
@@ -119,7 +119,7 @@ Stories are a pragmatic, reproducible way of tracking UI states. Use them to spo
#### π Document UI for your team to reuse
-Storybook is the single source of truth for your UI. Stories index all your components and their various states, making it easy for your team to find and reuse existing UI patterns. Storybook also auto-generates [documentation](../writing-docs/introduction.md) from those stories.
+Storybook is the single source of truth for your UI. Stories index all your components and their various states, making it easy for your team to find and reuse existing UI patterns. Storybook also auto-generates [documentation](../writing-docs/index.md) from those stories.
#### π€ Share how the UI actually works
diff --git a/docs/migration-guide.md b/docs/migration-guide.md
index ddd2d8faeab0..6f075c9904f2 100644
--- a/docs/migration-guide.md
+++ b/docs/migration-guide.md
@@ -69,7 +69,7 @@ In addition to the automated upgrades above, there are manual migrations that mi
### Upgrade MDX1 to MDX2
-Storybook 7 uses MDX2 by default for rendering [docs](./writing-docs/introduction.md). The upgrade from MDX1 to MDX2 is not fully automated, due to the large number of changes between versions. Fortunately, we have some tips to help make it a lot easier.
+Storybook 7 uses MDX2 by default for rendering [docs](./writing-docs/index.md). The upgrade from MDX1 to MDX2 is not fully automated, due to the large number of changes between versions. Fortunately, we have some tips to help make it a lot easier.
#### Automatically detect MDX2 errors with a CLI tool
@@ -183,7 +183,7 @@ npx storybook@latest migrate storiesof-to-csf --glob="src/**/*.stories.tsx"
### .stories.mdx to MDX+CSF
-Storybook 7 provides a cleaner [docs](./writing-docs/introduction.md) that defines manual documentation in pure MDX and stories in CSF, rather than the previous `.stories.mdx` hybrid approach, which is now deprecated. You can automatically convert your files using the following codemod (make sure to update the glob to fit your files):
+Storybook 7 provides a cleaner [docs](./writing-docs/index.md) that defines manual documentation in pure MDX and stories in CSF, rather than the previous `.stories.mdx` hybrid approach, which is now deprecated. You can automatically convert your files using the following codemod (make sure to update the glob to fit your files):
```sh
npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
index ca0842f18b10..d85530557e9c 100644
--- a/docs/sharing/design-integrations.md
+++ b/docs/sharing/design-integrations.md
@@ -176,5 +176,5 @@ Integrate Adobe XD with Storybook using the [design addon](https://storybook.js.
Extend and customize Storybook by building an integration. Integrate with lower-level Storybook APIs or bootstrap an addon to customize Storybook's UI and behavior.
-- [Addon documentation](../addons/introduction.md)
+- [Addon documentation](../addons/index.md)
- [Create an addon tutorial](https://storybook.js.org/tutorials/create-an-addon/)
diff --git a/docs/sharing/index.md b/docs/sharing/index.md
new file mode 100644
index 000000000000..93377730e482
--- /dev/null
+++ b/docs/sharing/index.md
@@ -0,0 +1,12 @@
+---
+title: 'Sharing'
+hideRendererSelector: true
+---
+
+You have your components ready and tested. That's great! Now you want to make your component library available to your team or community to help them understand how they work. There's mupliple ways you can do that. You can publish your Storybook to services like Chromatic, embed some of your stories in your own website, or use third party services like Figma.
+
+- [Publish](./publish-storybook.md)
+- [Embed](./embed.md)
+- [Design integrations](./design-integrations.md)
+- [Composition](./composition.md)
+- [Package Composition](./package-composition.md)
diff --git a/docs/sharing/package-composition.md b/docs/sharing/package-composition.md
index ba94040b90b0..96833ce02931 100644
--- a/docs/sharing/package-composition.md
+++ b/docs/sharing/package-composition.md
@@ -20,7 +20,7 @@ Composition happens automatically if the package [supports](#for-authors) it. Wh
### Set up
-If you want to configure how the composed Storybook behaves, you can disable the `ref` element in your [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)
+If you want to configure how the composed Storybook behaves, you can disable the `ref` element in your [`.storybook/main.js`](../configure/index.md#configure-story-rendering)
diff --git a/docs/sharing/storybook-composition.md b/docs/sharing/storybook-composition.md
index 65d05b90bac6..987d453e51df 100644
--- a/docs/sharing/storybook-composition.md
+++ b/docs/sharing/storybook-composition.md
@@ -17,7 +17,7 @@ Youβll see the composed Storybookβs stories in the sidebar alongside your ow
## Compose published Storybooks
-In your [`.storybook/main.js`](../configure/overview.md#configure-story-rendering) file add a `refs` field with information about the reference Storybook. Pass in a URL to a statically built Storybook.
+In your [`.storybook/main.js`](../configure/index.md#configure-story-rendering) file add a `refs` field with information about the reference Storybook. Pass in a URL to a statically built Storybook.
diff --git a/docs/snippets/angular/button-story-default-export.ts.mdx b/docs/snippets/angular/button-story-default-export.ts.mdx
index 647a05214bab..ba2fb09ff5b7 100644
--- a/docs/snippets/angular/button-story-default-export.ts.mdx
+++ b/docs/snippets/angular/button-story-default-export.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './button.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/angular/button-story-grouped.ts.mdx b/docs/snippets/angular/button-story-grouped.ts.mdx
index bf946f80bdfd..c3bc26b80c47 100644
--- a/docs/snippets/angular/button-story-grouped.ts.mdx
+++ b/docs/snippets/angular/button-story-grouped.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './button.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Button',
diff --git a/docs/snippets/angular/button-story-hoisted.ts.mdx b/docs/snippets/angular/button-story-hoisted.ts.mdx
index 2372ade9bbe8..cf3261257e3a 100644
--- a/docs/snippets/angular/button-story-hoisted.ts.mdx
+++ b/docs/snippets/angular/button-story-hoisted.ts.mdx
@@ -7,7 +7,7 @@ import { Button as ButtonComponent } from './button.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Button',
diff --git a/docs/snippets/angular/button-story-with-addon-example.ts.mdx b/docs/snippets/angular/button-story-with-addon-example.ts.mdx
index f6d24d57f8c5..4515c118ae9b 100644
--- a/docs/snippets/angular/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/angular/button-story-with-addon-example.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './button.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/angular/button-story-with-parameters.ts.mdx b/docs/snippets/angular/button-story-with-parameters.ts.mdx
index 6c6db0d7ecc7..8cbd9e76fec5 100644
--- a/docs/snippets/angular/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/angular/button-story-with-parameters.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './button.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/angular/checkbox-story-grouped.ts.mdx b/docs/snippets/angular/checkbox-story-grouped.ts.mdx
index 3152a62e42ae..c675e5804220 100644
--- a/docs/snippets/angular/checkbox-story-grouped.ts.mdx
+++ b/docs/snippets/angular/checkbox-story-grouped.ts.mdx
@@ -7,7 +7,7 @@ import { Checkbox } from './checkbox.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Checkbox',
diff --git a/docs/snippets/angular/component-story-figma-integration.ts.mdx b/docs/snippets/angular/component-story-figma-integration.ts.mdx
index f251c0c143d6..84931c0e3026 100644
--- a/docs/snippets/angular/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/angular/component-story-figma-integration.ts.mdx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/angular/';
import { MyComponent } from './MyComponent.component';
-// More on default export: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
const meta: Meta = {
component: MyComponent,
};
diff --git a/docs/snippets/angular/foo-bar-baz-story.ts.mdx b/docs/snippets/angular/foo-bar-baz-story.ts.mdx
index 7018dbf52b56..ae0e503e1088 100644
--- a/docs/snippets/angular/foo-bar-baz-story.ts.mdx
+++ b/docs/snippets/angular/foo-bar-baz-story.ts.mdx
@@ -7,7 +7,7 @@ import { Foo } from './Foo.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Foo/Bar',
diff --git a/docs/snippets/angular/list-story-template.ts.mdx b/docs/snippets/angular/list-story-template.ts.mdx
index 760f92617d5d..ec87766682d4 100644
--- a/docs/snippets/angular/list-story-template.ts.mdx
+++ b/docs/snippets/angular/list-story-template.ts.mdx
@@ -15,7 +15,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/angular/list-story-unchecked.ts.mdx b/docs/snippets/angular/list-story-unchecked.ts.mdx
index b794929a7213..31b0be7651c7 100644
--- a/docs/snippets/angular/list-story-unchecked.ts.mdx
+++ b/docs/snippets/angular/list-story-unchecked.ts.mdx
@@ -15,7 +15,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/angular/my-component-story-mandatory-export.ts.mdx b/docs/snippets/angular/my-component-story-mandatory-export.ts.mdx
index 737bab1a48cd..2b52d9ae2671 100644
--- a/docs/snippets/angular/my-component-story-mandatory-export.ts.mdx
+++ b/docs/snippets/angular/my-component-story-mandatory-export.ts.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Path/To/MyComponent',
diff --git a/docs/snippets/angular/other-foo-bar-story.ts.mdx b/docs/snippets/angular/other-foo-bar-story.ts.mdx
index ff436ae57986..ed9d13ad4416 100644
--- a/docs/snippets/angular/other-foo-bar-story.ts.mdx
+++ b/docs/snippets/angular/other-foo-bar-story.ts.mdx
@@ -7,7 +7,7 @@ import { Foo } from './Foo.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'OtherFoo/Bar',
diff --git a/docs/snippets/angular/storybook-csf-3-auto-title-redundant.ts.mdx b/docs/snippets/angular/storybook-csf-3-auto-title-redundant.ts.mdx
index cf5d99b5c1d3..d6e372d543c8 100644
--- a/docs/snippets/angular/storybook-csf-3-auto-title-redundant.ts.mdx
+++ b/docs/snippets/angular/storybook-csf-3-auto-title-redundant.ts.mdx
@@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent.component';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
component: MyComponent,
diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx
index cf20753bad97..7ae028ed87d5 100644
--- a/docs/snippets/common/button-story-default-export.js.mdx
+++ b/docs/snippets/common/button-story-default-export.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/common/button-story-default-export.ts-4-9.mdx b/docs/snippets/common/button-story-default-export.ts-4-9.mdx
index f3bf85461613..645a4871fd42 100644
--- a/docs/snippets/common/button-story-default-export.ts-4-9.mdx
+++ b/docs/snippets/common/button-story-default-export.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { Button } from './Button';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/common/button-story-default-export.ts.mdx b/docs/snippets/common/button-story-default-export.ts.mdx
index ecfdbea336fc..64c7276c7edc 100644
--- a/docs/snippets/common/button-story-default-export.ts.mdx
+++ b/docs/snippets/common/button-story-default-export.ts.mdx
@@ -8,7 +8,7 @@ import { Button } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx
index 624f6320c8aa..0fbdb0b60da6 100644
--- a/docs/snippets/common/button-story-disable-addon.js.mdx
+++ b/docs/snippets/common/button-story-disable-addon.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/common/button-story-disable-addon.ts-4-9.mdx b/docs/snippets/common/button-story-disable-addon.ts-4-9.mdx
index 3ecef661ff86..9426df8ba25f 100644
--- a/docs/snippets/common/button-story-disable-addon.ts-4-9.mdx
+++ b/docs/snippets/common/button-story-disable-addon.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { Button } from './Button';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/common/button-story-disable-addon.ts.mdx b/docs/snippets/common/button-story-disable-addon.ts.mdx
index 5aa3cb08248d..dbaa7bf7ffb0 100644
--- a/docs/snippets/common/button-story-disable-addon.ts.mdx
+++ b/docs/snippets/common/button-story-disable-addon.ts.mdx
@@ -8,7 +8,7 @@ import { Button } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/common/button-story-grouped.js.mdx b/docs/snippets/common/button-story-grouped.js.mdx
index af5589ad7973..58dd3170fbc3 100644
--- a/docs/snippets/common/button-story-grouped.js.mdx
+++ b/docs/snippets/common/button-story-grouped.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Button',
diff --git a/docs/snippets/common/button-story-grouped.ts-4-9.mdx b/docs/snippets/common/button-story-grouped.ts-4-9.mdx
index 0cd1a1078800..8cf64c971eb3 100644
--- a/docs/snippets/common/button-story-grouped.ts-4-9.mdx
+++ b/docs/snippets/common/button-story-grouped.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { Button } from './Button';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Button',
diff --git a/docs/snippets/common/button-story-grouped.ts.mdx b/docs/snippets/common/button-story-grouped.ts.mdx
index 6671e416dfba..8fe60a1b5ed0 100644
--- a/docs/snippets/common/button-story-grouped.ts.mdx
+++ b/docs/snippets/common/button-story-grouped.ts.mdx
@@ -8,7 +8,7 @@ import { Button } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Button',
diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx
index 1d0dd1e33422..9f94eed14328 100644
--- a/docs/snippets/common/button-story-hoisted.js.mdx
+++ b/docs/snippets/common/button-story-hoisted.js.mdx
@@ -5,7 +5,7 @@ import { Button as ButtonComponent } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Button',
diff --git a/docs/snippets/common/button-story-hoisted.ts-4-9.mdx b/docs/snippets/common/button-story-hoisted.ts-4-9.mdx
index b41072895639..c8337a6691e8 100644
--- a/docs/snippets/common/button-story-hoisted.ts-4-9.mdx
+++ b/docs/snippets/common/button-story-hoisted.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { Button as ButtonComponent } from './Button';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Button',
diff --git a/docs/snippets/common/button-story-hoisted.ts.mdx b/docs/snippets/common/button-story-hoisted.ts.mdx
index 09666f261794..64a372f82c72 100644
--- a/docs/snippets/common/button-story-hoisted.ts.mdx
+++ b/docs/snippets/common/button-story-hoisted.ts.mdx
@@ -8,7 +8,7 @@ import { Button as ButtonComponent } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Button',
diff --git a/docs/snippets/common/button-story-with-parameters.js.mdx b/docs/snippets/common/button-story-with-parameters.js.mdx
index 29bbeb261062..8b08be05c221 100644
--- a/docs/snippets/common/button-story-with-parameters.js.mdx
+++ b/docs/snippets/common/button-story-with-parameters.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/common/checkbox-story-grouped.js.mdx b/docs/snippets/common/checkbox-story-grouped.js.mdx
index 648b5b793567..6055ff589c70 100644
--- a/docs/snippets/common/checkbox-story-grouped.js.mdx
+++ b/docs/snippets/common/checkbox-story-grouped.js.mdx
@@ -5,7 +5,7 @@ import { CheckBox } from './Checkbox';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Checkbox',
diff --git a/docs/snippets/common/checkbox-story-grouped.ts-4-9.mdx b/docs/snippets/common/checkbox-story-grouped.ts-4-9.mdx
index 61cfc0766404..a344aee815ac 100644
--- a/docs/snippets/common/checkbox-story-grouped.ts-4-9.mdx
+++ b/docs/snippets/common/checkbox-story-grouped.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { CheckBox } from './Checkbox';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Checkbox',
diff --git a/docs/snippets/common/checkbox-story-grouped.ts.mdx b/docs/snippets/common/checkbox-story-grouped.ts.mdx
index 0f17697bf402..6010b3376c33 100644
--- a/docs/snippets/common/checkbox-story-grouped.ts.mdx
+++ b/docs/snippets/common/checkbox-story-grouped.ts.mdx
@@ -8,7 +8,7 @@ import { CheckBox } from './Checkbox';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Atoms/Checkbox',
diff --git a/docs/snippets/common/foo-bar-baz-story.js.mdx b/docs/snippets/common/foo-bar-baz-story.js.mdx
index a5bd3df93855..fe2395e38762 100644
--- a/docs/snippets/common/foo-bar-baz-story.js.mdx
+++ b/docs/snippets/common/foo-bar-baz-story.js.mdx
@@ -5,7 +5,7 @@ import { Foo } from './Foo';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Foo/Bar',
diff --git a/docs/snippets/common/foo-bar-baz-story.ts-4-9.mdx b/docs/snippets/common/foo-bar-baz-story.ts-4-9.mdx
index 29d52db497c5..8bfa77899981 100644
--- a/docs/snippets/common/foo-bar-baz-story.ts-4-9.mdx
+++ b/docs/snippets/common/foo-bar-baz-story.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { Foo } from './Foo';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Foo/Bar',
diff --git a/docs/snippets/common/foo-bar-baz-story.ts.mdx b/docs/snippets/common/foo-bar-baz-story.ts.mdx
index d1f8b271f2aa..a5515297546d 100644
--- a/docs/snippets/common/foo-bar-baz-story.ts.mdx
+++ b/docs/snippets/common/foo-bar-baz-story.ts.mdx
@@ -8,7 +8,7 @@ import { Foo } from './Foo';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Foo/Bar',
diff --git a/docs/snippets/common/my-component-story-mandatory-export.js.mdx b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
index 1bc4444bc6ef..d179b2e8dd7a 100644
--- a/docs/snippets/common/my-component-story-mandatory-export.js.mdx
+++ b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Path/To/MyComponent',
diff --git a/docs/snippets/common/my-component-story-mandatory-export.ts-4-9.mdx b/docs/snippets/common/my-component-story-mandatory-export.ts-4-9.mdx
index a119d735eb3d..6aaaa6379634 100644
--- a/docs/snippets/common/my-component-story-mandatory-export.ts-4-9.mdx
+++ b/docs/snippets/common/my-component-story-mandatory-export.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { MyComponent } from './MyComponent';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Path/To/MyComponent',
diff --git a/docs/snippets/common/my-component-story-mandatory-export.ts.mdx b/docs/snippets/common/my-component-story-mandatory-export.ts.mdx
index d6588517d650..87ab0f4335f7 100644
--- a/docs/snippets/common/my-component-story-mandatory-export.ts.mdx
+++ b/docs/snippets/common/my-component-story-mandatory-export.ts.mdx
@@ -8,7 +8,7 @@ import { MyComponent } from './MyComponent';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Path/To/MyComponent',
diff --git a/docs/snippets/common/my-component-story.js.mdx b/docs/snippets/common/my-component-story.js.mdx
index 533dea669214..810a379708d9 100644
--- a/docs/snippets/common/my-component-story.js.mdx
+++ b/docs/snippets/common/my-component-story.js.mdx
@@ -5,7 +5,7 @@ import { MyComponent } from './MyComponent';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
diff --git a/docs/snippets/common/other-foo-bar-story.js.mdx b/docs/snippets/common/other-foo-bar-story.js.mdx
index 88d00a6504e7..2c78d0bc7e7b 100644
--- a/docs/snippets/common/other-foo-bar-story.js.mdx
+++ b/docs/snippets/common/other-foo-bar-story.js.mdx
@@ -5,7 +5,7 @@ import { Foo } from './Foo';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'OtherFoo/Bar',
diff --git a/docs/snippets/common/other-foo-bar-story.ts-4-9.mdx b/docs/snippets/common/other-foo-bar-story.ts-4-9.mdx
index dc4061519375..15eb3d7ffeb6 100644
--- a/docs/snippets/common/other-foo-bar-story.ts-4-9.mdx
+++ b/docs/snippets/common/other-foo-bar-story.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { Foo } from './Foo';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'OtherFoo/Bar',
diff --git a/docs/snippets/common/other-foo-bar-story.ts.mdx b/docs/snippets/common/other-foo-bar-story.ts.mdx
index d10a7a035a10..ee8c529b539c 100644
--- a/docs/snippets/common/other-foo-bar-story.ts.mdx
+++ b/docs/snippets/common/other-foo-bar-story.ts.mdx
@@ -8,7 +8,7 @@ import { Foo } from './Foo';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'OtherFoo/Bar',
diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts-4-9.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts-4-9.mdx
index 0ca5edee6277..21845238edcf 100644
--- a/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts-4-9.mdx
+++ b/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { MyComponent } from './MyComponent';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
component: MyComponent,
diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts.mdx
index 9db3f8572739..3dba50a3fa85 100644
--- a/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts.mdx
+++ b/docs/snippets/common/storybook-csf-3-auto-title-redundant.ts.mdx
@@ -8,7 +8,7 @@ import { MyComponent } from './MyComponent';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
component: MyComponent,
diff --git a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.js.mdx b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.js.mdx
index b3956c01e1b6..05a2e7581f8e 100644
--- a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.js.mdx
+++ b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.js.mdx
@@ -9,7 +9,7 @@ import { MyComponent } from '@component-package/src/MyComponent';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
diff --git a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts-4-9.mdx b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts-4-9.mdx
index 5465a750445b..61d61fc048a3 100644
--- a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts-4-9.mdx
+++ b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts-4-9.mdx
@@ -12,7 +12,7 @@ import { MyComponent } from '@component-package/src/MyComponent';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
diff --git a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts.mdx b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts.mdx
index 95ce1f5abf52..8354f893ae6d 100644
--- a/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts.mdx
+++ b/docs/snippets/common/storybook-fix-imports-autodocs-monorepo.ts.mdx
@@ -12,7 +12,7 @@ import { MyComponent } from '@component-package/src/MyComponent';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx
index 6cc6ea24ef59..0e8bb5daf5e9 100644
--- a/docs/snippets/html/button-story-component-decorator.js.mdx
+++ b/docs/snippets/html/button-story-component-decorator.js.mdx
@@ -5,7 +5,7 @@ import { createButton } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx
index e2d8af9e559c..d848aa88e5b0 100644
--- a/docs/snippets/html/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/html/button-story-component-decorator.ts.mdx
@@ -7,7 +7,7 @@ import { createButton, ButtonArgs } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-exports.js.mdx
index d44360b0d86b..115570702af3 100644
--- a/docs/snippets/html/button-story-default-exports.js.mdx
+++ b/docs/snippets/html/button-story-default-exports.js.mdx
@@ -5,7 +5,7 @@ import { createButton } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx
index f38b51365891..43f7e6277789 100644
--- a/docs/snippets/html/button-story-default-exports.ts.mdx
+++ b/docs/snippets/html/button-story-default-exports.ts.mdx
@@ -7,7 +7,7 @@ import { createButton, ButtonArgs } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx
index 599e98d4c1b5..b9c0db977ea7 100644
--- a/docs/snippets/html/button-story-rename-story.js.mdx
+++ b/docs/snippets/html/button-story-rename-story.js.mdx
@@ -5,7 +5,7 @@ import { createButton } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx
index dfe56c5d8554..a2e222f52bf8 100644
--- a/docs/snippets/html/button-story-rename-story.ts.mdx
+++ b/docs/snippets/html/button-story-rename-story.ts.mdx
@@ -7,7 +7,7 @@ import { createButton, ButtonArgs } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx
index 21e02d18bf79..5a898b52020d 100644
--- a/docs/snippets/html/button-story-using-args.js.mdx
+++ b/docs/snippets/html/button-story-using-args.js.mdx
@@ -5,7 +5,7 @@ import { createButton } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx
index 450795897441..3fc7abe1feb4 100644
--- a/docs/snippets/html/button-story-using-args.ts.mdx
+++ b/docs/snippets/html/button-story-using-args.ts.mdx
@@ -6,7 +6,7 @@ import { createButton, ButtonArgs } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx
index 74f29e2977a4..a1d1d6f14fa9 100644
--- a/docs/snippets/html/button-story-with-args.js.mdx
+++ b/docs/snippets/html/button-story-with-args.js.mdx
@@ -3,7 +3,7 @@
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
index bb6cc81881db..ae7e68a8a292 100644
--- a/docs/snippets/html/button-story-with-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -10,7 +10,7 @@ type ButtonArgs = {
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx
index 98352443f43b..a84f884b1feb 100644
--- a/docs/snippets/html/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/html/button-story-with-blue-args.js.mdx
@@ -5,7 +5,7 @@ import { createButton } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx
index 9a4bfade9d74..33ed2a9f1e38 100644
--- a/docs/snippets/html/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx
@@ -7,7 +7,7 @@ import { createButton, ButtonArgs } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx
index 281563a8c35c..ffe9a4107d39 100644
--- a/docs/snippets/html/button-story-with-emojis.js.mdx
+++ b/docs/snippets/html/button-story-with-emojis.js.mdx
@@ -5,7 +5,7 @@ import { createButton } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx
index 164d1d2533b2..70bee5864170 100644
--- a/docs/snippets/html/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/html/button-story-with-emojis.ts.mdx
@@ -6,7 +6,7 @@ import { createButton, ButtonArgs } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx
index 1f038de7b11d..79ff94bc096d 100644
--- a/docs/snippets/html/button-story.js.mdx
+++ b/docs/snippets/html/button-story.js.mdx
@@ -3,7 +3,7 @@
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx
index aaf437846462..14407b055400 100644
--- a/docs/snippets/html/button-story.ts.mdx
+++ b/docs/snippets/html/button-story.ts.mdx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/html';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/html/histogram-story.js.mdx b/docs/snippets/html/histogram-story.js.mdx
index 0a6daa195fae..ae18d8b59870 100644
--- a/docs/snippets/html/histogram-story.js.mdx
+++ b/docs/snippets/html/histogram-story.js.mdx
@@ -5,7 +5,7 @@ import { createHistogram } from './Histogram';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Histogram',
diff --git a/docs/snippets/html/histogram-story.ts.mdx b/docs/snippets/html/histogram-story.ts.mdx
index 30285d067747..94104c16aba0 100644
--- a/docs/snippets/html/histogram-story.ts.mdx
+++ b/docs/snippets/html/histogram-story.ts.mdx
@@ -7,7 +7,7 @@ import { createHistogram, HistogramProps } from './Histogram';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Histogram',
diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx
index 97b9966ee6db..d665e8b05312 100644
--- a/docs/snippets/html/list-story-expanded.js.mdx
+++ b/docs/snippets/html/list-story-expanded.js.mdx
@@ -6,7 +6,7 @@ import { createListItem } from './ListItem';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
index af0d91a5286d..76a6f8820a3b 100644
--- a/docs/snippets/html/list-story-reuse-data.js.mdx
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -9,7 +9,7 @@ import { Selected, Unselected } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
index 5299fe741769..999a38a65c25 100644
--- a/docs/snippets/html/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -11,7 +11,7 @@ import { Selected, Unselected } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx
index 6732a24ac5ce..c76cb0c5accf 100644
--- a/docs/snippets/html/list-story-starter.js.mdx
+++ b/docs/snippets/html/list-story-starter.js.mdx
@@ -5,7 +5,7 @@ import { createList } from './List';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx
index 7d10b139da47..db510c19e30a 100644
--- a/docs/snippets/html/list-story-starter.ts.mdx
+++ b/docs/snippets/html/list-story-starter.ts.mdx
@@ -7,7 +7,7 @@ import { createList, ListArgs } from './List';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/html/your-component.js.mdx b/docs/snippets/html/your-component.js.mdx
index 9af11785cf2f..8d9015cefd60 100644
--- a/docs/snippets/html/your-component.js.mdx
+++ b/docs/snippets/html/your-component.js.mdx
@@ -6,7 +6,7 @@ import { createYourComponent } from './YourComponent';
// π This default export determines where your story goes in the story list
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
diff --git a/docs/snippets/html/your-component.ts.mdx b/docs/snippets/html/your-component.ts.mdx
index d1485afe491d..ff68c505d294 100644
--- a/docs/snippets/html/your-component.ts.mdx
+++ b/docs/snippets/html/your-component.ts.mdx
@@ -8,7 +8,7 @@ import { createYourComponent, ComponentProps } from './YourComponent';
//π This default export determines where your story goes in the story list
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
diff --git a/docs/snippets/react/button-story-with-addon-example.js.mdx b/docs/snippets/react/button-story-with-addon-example.js.mdx
index 17207433ab79..ad4d5c006460 100644
--- a/docs/snippets/react/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/react/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/react/button-story-with-addon-example.ts-4-9.mdx
index 175e1826ff27..27dcc0fc7f8f 100644
--- a/docs/snippets/react/button-story-with-addon-example.ts-4-9.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx
index e27415b909d4..35e185179709 100644
--- a/docs/snippets/react/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/react/button-story-with-parameters.js.mdx b/docs/snippets/react/button-story-with-parameters.js.mdx
index 20ab0d4e95cb..b377745e8dbf 100644
--- a/docs/snippets/react/button-story-with-parameters.js.mdx
+++ b/docs/snippets/react/button-story-with-parameters.js.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/react/button-story-with-parameters.ts-4-9.mdx b/docs/snippets/react/button-story-with-parameters.ts-4-9.mdx
index 31846545aff1..fc5fd7bd0bab 100644
--- a/docs/snippets/react/button-story-with-parameters.ts-4-9.mdx
+++ b/docs/snippets/react/button-story-with-parameters.ts-4-9.mdx
@@ -7,7 +7,7 @@ import type { Meta } from '@storybook/react';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/react/button-story-with-parameters.ts.mdx b/docs/snippets/react/button-story-with-parameters.ts.mdx
index 9acf5e4212dc..3c0f72dc2ca5 100644
--- a/docs/snippets/react/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/react/button-story-with-parameters.ts.mdx
@@ -7,7 +7,7 @@ import type { Meta } from '@storybook/react';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/react/component-story-figma-integration.js.mdx b/docs/snippets/react/component-story-figma-integration.js.mdx
index c3580c2657b7..1809162364d9 100644
--- a/docs/snippets/react/component-story-figma-integration.js.mdx
+++ b/docs/snippets/react/component-story-figma-integration.js.mdx
@@ -3,7 +3,7 @@
import { MyComponent } from './MyComponent';
-// More on default export: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
export default {
component: MyComponent,
};
diff --git a/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx
index 41bdf57d68f3..357684c4b586 100644
--- a/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx
+++ b/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { MyComponent } from './MyComponent';
-// More on default export: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
const meta = {
component: MyComponent,
} satisfies Meta;
diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx
index b51bd71af8a0..efdfd192fac9 100644
--- a/docs/snippets/react/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/react/component-story-figma-integration.ts.mdx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { MyComponent } from './MyComponent';
-// More on default export: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
const meta: Meta = {
component: MyComponent,
};
diff --git a/docs/snippets/react/list-story-template.js.mdx b/docs/snippets/react/list-story-template.js.mdx
index 6711b717e194..36c09aa21c0c 100644
--- a/docs/snippets/react/list-story-template.js.mdx
+++ b/docs/snippets/react/list-story-template.js.mdx
@@ -9,7 +9,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/react/list-story-template.ts-4-9.mdx b/docs/snippets/react/list-story-template.ts-4-9.mdx
index aedf294d807a..d0b1d658dcb7 100644
--- a/docs/snippets/react/list-story-template.ts-4-9.mdx
+++ b/docs/snippets/react/list-story-template.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta = {
/* π The title prop is optional.
- * Seehttps://storybook.js.org/docs/configure/overview#configure-story-loading
+ * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
index ec9e92479a72..65a42d46921a 100644
--- a/docs/snippets/react/list-story-template.ts.mdx
+++ b/docs/snippets/react/list-story-template.ts.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * Seehttps://storybook.js.org/docs/configure/overview#configure-story-loading
+ * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
index eade8f532a67..e9df70ee1467 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -8,7 +8,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/react/list-story-unchecked.ts-4-9.mdx b/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
index 273f05be7e7d..e3664a92818f 100644
--- a/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
export const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
index ad48ebe889c5..8ff062ecc89f 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
export const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
index 79145e35fb7c..9f523a3a8130 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
@@ -8,7 +8,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts-4-9.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts-4-9.mdx
index a7fb215cbe9f..fbd3670d9fa1 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts-4-9.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts-4-9.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
index a362c172e9ea..f41a03cb4b23 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/button-story-with-addon-example.js.mdx b/docs/snippets/solid/button-story-with-addon-example.js.mdx
index d1f39c3bc82b..40ded2296e56 100644
--- a/docs/snippets/solid/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/solid/button-story-with-addon-example.js.mdx
@@ -5,7 +5,7 @@ import { Button } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
index 7e74320ef4d5..cb85cd7138cb 100644
--- a/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
+++ b/docs/snippets/solid/button-story-with-addon-example.ts-4-9.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/solid/button-story-with-addon-example.ts.mdx b/docs/snippets/solid/button-story-with-addon-example.ts.mdx
index 822039ef959b..2227cf49eab0 100644
--- a/docs/snippets/solid/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/solid/button-story-with-addon-example.ts.mdx
@@ -7,7 +7,7 @@ import { Button } from './Button';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/solid/list-story-template.js.mdx b/docs/snippets/solid/list-story-template.js.mdx
index 6711b717e194..36c09aa21c0c 100644
--- a/docs/snippets/solid/list-story-template.js.mdx
+++ b/docs/snippets/solid/list-story-template.js.mdx
@@ -9,7 +9,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-template.ts-4-9.mdx b/docs/snippets/solid/list-story-template.ts-4-9.mdx
index d9cf22b4295e..4f548b8e63c6 100644
--- a/docs/snippets/solid/list-story-template.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-template.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta = {
/* π The title prop is optional.
- * Seehttps://storybook.js.org/docs/configure/overview#configure-story-loading
+ * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-template.ts.mdx b/docs/snippets/solid/list-story-template.ts.mdx
index aa16f1a9999a..a905c2951509 100644
--- a/docs/snippets/solid/list-story-template.ts.mdx
+++ b/docs/snippets/solid/list-story-template.ts.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * Seehttps://storybook.js.org/docs/configure/overview#configure-story-loading
+ * Seehttps://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-unchecked.js.mdx b/docs/snippets/solid/list-story-unchecked.js.mdx
index eade8f532a67..e9df70ee1467 100644
--- a/docs/snippets/solid/list-story-unchecked.js.mdx
+++ b/docs/snippets/solid/list-story-unchecked.js.mdx
@@ -8,7 +8,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
index 2c86e74eb7da..c88e42c9dbed 100644
--- a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
export const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-unchecked.ts.mdx b/docs/snippets/solid/list-story-unchecked.ts.mdx
index 3f4e90c3dd55..30cc4d698609 100644
--- a/docs/snippets/solid/list-story-unchecked.ts.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
export const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-with-subcomponents.js.mdx b/docs/snippets/solid/list-story-with-subcomponents.js.mdx
index 7d2d92bbbf4a..3223e8596977 100644
--- a/docs/snippets/solid/list-story-with-subcomponents.js.mdx
+++ b/docs/snippets/solid/list-story-with-subcomponents.js.mdx
@@ -6,7 +6,7 @@ import { ListItem } from './ListItem';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx b/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
index a67c588803b7..ea41b2ba3654 100644
--- a/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-with-subcomponents.ts-4-9.mdx
@@ -8,7 +8,7 @@ import { ListItem } from './ListItem';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-with-subcomponents.ts.mdx b/docs/snippets/solid/list-story-with-subcomponents.ts.mdx
index 8ba0ab2f1ecd..a3df460522f4 100644
--- a/docs/snippets/solid/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/solid/list-story-with-subcomponents.ts.mdx
@@ -8,7 +8,7 @@ import { ListItem } from './ListItem';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.js.mdx b/docs/snippets/solid/list-story-with-unchecked-children.js.mdx
index 79145e35fb7c..9f523a3a8130 100644
--- a/docs/snippets/solid/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/solid/list-story-with-unchecked-children.js.mdx
@@ -8,7 +8,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx b/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
index e4e372afaf42..8618bd875991 100644
--- a/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-with-unchecked-children.ts-4-9.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx b/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx
index f41a1bcb58db..5763185a2eba 100644
--- a/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/solid/list-story-with-unchecked-children.ts.mdx
@@ -10,7 +10,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/svelte/button-story-default-docs-code.js.mdx b/docs/snippets/svelte/button-story-default-docs-code.js.mdx
index 8d611fa95a96..c8f9d6894eb2 100644
--- a/docs/snippets/svelte/button-story-default-docs-code.js.mdx
+++ b/docs/snippets/svelte/button-story-default-docs-code.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.svelte';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/svelte/button-story-with-addon-example.js.mdx b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
index 33321c6ad741..d96a3c9c2cba 100644
--- a/docs/snippets/svelte/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.svelte';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/svelte/component-story-figma-integration.js.mdx b/docs/snippets/svelte/component-story-figma-integration.js.mdx
index b966fe7a2829..f77576417513 100644
--- a/docs/snippets/svelte/component-story-figma-integration.js.mdx
+++ b/docs/snippets/svelte/component-story-figma-integration.js.mdx
@@ -3,7 +3,7 @@
import MyComponent from './MyComponent.svelte';
-// More on default export: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
export default {
component: { MyComponent },
};
diff --git a/docs/snippets/vue/button-story-with-addon-example.js.mdx b/docs/snippets/vue/button-story-with-addon-example.js.mdx
index 5b23a583e9f8..96508489cf4c 100644
--- a/docs/snippets/vue/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/vue/button-story-with-addon-example.js.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx b/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx
index 511699adca85..72ecfe8d52ae 100644
--- a/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx
+++ b/docs/snippets/vue/button-story-with-addon-example.ts-4-9.mdx
@@ -8,7 +8,7 @@ import Button from './Button.vue';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/vue/button-story-with-addon-example.ts.mdx b/docs/snippets/vue/button-story-with-addon-example.ts.mdx
index aad5bd589385..ef733b468f47 100644
--- a/docs/snippets/vue/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/vue/button-story-with-addon-example.ts.mdx
@@ -8,7 +8,7 @@ import Button from './Button.vue';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
diff --git a/docs/snippets/vue/component-story-figma-integration.js.mdx b/docs/snippets/vue/component-story-figma-integration.js.mdx
index a8494d992d88..f3818bef2a24 100644
--- a/docs/snippets/vue/component-story-figma-integration.js.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.js.mdx
@@ -3,7 +3,7 @@
import MyComponent from './MyComponent.vue';
-// More on default export: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
export default {
component: MyComponent,
};
diff --git a/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx
index faa945707aae..94980d311816 100644
--- a/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/vue3';
import MyComponent from './MyComponent.vue';
-// More on default export: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
const meta = {
component: MyComponent,
} satisfies Meta;
diff --git a/docs/snippets/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx
index e26dbc1ca7ff..16b6fb5c317a 100644
--- a/docs/snippets/vue/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.ts.mdx
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/vue3';
import MyComponent from './MyComponent.vue';
-// More on default export: https://storybook.js.org/docs/writing-stories/introduction#default-export
+// More on default export: https://storybook.js.org/docs/writing-stories/#default-export
const meta: Meta = {
component: MyComponent,
};
diff --git a/docs/snippets/vue/list-story-template.2.js.mdx b/docs/snippets/vue/list-story-template.2.js.mdx
index a4f57bb60c8a..1f82de6166a9 100644
--- a/docs/snippets/vue/list-story-template.2.js.mdx
+++ b/docs/snippets/vue/list-story-template.2.js.mdx
@@ -9,7 +9,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-template.2.ts-4-9.mdx b/docs/snippets/vue/list-story-template.2.ts-4-9.mdx
index 4efaff046ef1..64cfa292b9b9 100644
--- a/docs/snippets/vue/list-story-template.2.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-template.2.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-template.2.ts.mdx b/docs/snippets/vue/list-story-template.2.ts.mdx
index 49dd1c75f308..9ba684aade8c 100644
--- a/docs/snippets/vue/list-story-template.2.ts.mdx
+++ b/docs/snippets/vue/list-story-template.2.ts.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-template.3.js.mdx b/docs/snippets/vue/list-story-template.3.js.mdx
index 27a387746c88..4a18bd196493 100644
--- a/docs/snippets/vue/list-story-template.3.js.mdx
+++ b/docs/snippets/vue/list-story-template.3.js.mdx
@@ -9,7 +9,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-template.3.ts-4-9.mdx b/docs/snippets/vue/list-story-template.3.ts-4-9.mdx
index f07b5e2b3ef7..88bf00132210 100644
--- a/docs/snippets/vue/list-story-template.3.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-template.3.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-template.3.ts.mdx b/docs/snippets/vue/list-story-template.3.ts.mdx
index 8c02db1863f4..31b7478f2a5d 100644
--- a/docs/snippets/vue/list-story-template.3.ts.mdx
+++ b/docs/snippets/vue/list-story-template.3.ts.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-unchecked.2.js.mdx b/docs/snippets/vue/list-story-unchecked.2.js.mdx
index 238132294752..748e5724ae6f 100644
--- a/docs/snippets/vue/list-story-unchecked.2.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.2.js.mdx
@@ -9,7 +9,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-unchecked.2.ts-4-9.mdx b/docs/snippets/vue/list-story-unchecked.2.ts-4-9.mdx
index 5afc3ac49323..c32d7c94eb11 100644
--- a/docs/snippets/vue/list-story-unchecked.2.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-unchecked.2.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-unchecked.2.ts.mdx b/docs/snippets/vue/list-story-unchecked.2.ts.mdx
index f6fcbaee76dc..49ecf7c6d9f8 100644
--- a/docs/snippets/vue/list-story-unchecked.2.ts.mdx
+++ b/docs/snippets/vue/list-story-unchecked.2.ts.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx
index f8077cbcec89..8d521c737efe 100644
--- a/docs/snippets/vue/list-story-unchecked.3.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx
@@ -9,7 +9,7 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx b/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
index d1a560923e70..478e65d6f878 100644
--- a/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/snippets/vue/list-story-unchecked.3.ts.mdx b/docs/snippets/vue/list-story-unchecked.3.ts.mdx
index d91bb998c023..d928c99296a3 100644
--- a/docs/snippets/vue/list-story-unchecked.3.ts.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.ts.mdx
@@ -11,7 +11,7 @@ import { Unchecked } from './ListItem.stories';
const meta: Meta = {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/configure/#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
diff --git a/docs/toc.js b/docs/toc.js
index 148909ab3680..df10f6721132 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -1,9 +1,10 @@
module.exports = {
toc: [
{
- title: 'Get started',
pathSegment: 'get-started',
- type: 'menu',
+ redirectPath: 'get-started/install',
+ title: 'Get started',
+ type: 'heading',
children: [
{
pathSegment: 'why-storybook',
@@ -45,15 +46,10 @@ module.exports = {
],
},
{
- title: 'Stories',
pathSegment: 'writing-stories',
- type: 'menu',
+ title: 'Stories',
+ type: 'heading',
children: [
- {
- pathSegment: 'introduction',
- title: 'Introduction',
- type: 'link',
- },
{
pathSegment: 'args',
title: 'Args',
@@ -102,15 +98,10 @@ module.exports = {
],
},
{
- title: 'Docs',
pathSegment: 'writing-docs',
- type: 'menu',
+ title: 'Docs',
+ type: 'heading',
children: [
- {
- pathSegment: 'introduction',
- title: 'Introduction',
- type: 'link',
- },
{
pathSegment: 'autodocs',
title: 'Autodocs',
@@ -134,15 +125,10 @@ module.exports = {
],
},
{
- title: 'Testing',
pathSegment: 'writing-tests',
- type: 'menu',
+ title: 'Testing',
+ type: 'heading',
children: [
- {
- pathSegment: 'introduction',
- title: 'Introduction',
- type: 'link',
- },
{
pathSegment: 'test-runner',
title: 'Test runner',
@@ -205,9 +191,9 @@ module.exports = {
],
},
{
- title: 'Sharing',
pathSegment: 'sharing',
- type: 'menu',
+ title: 'Sharing',
+ type: 'heading',
children: [
{
pathSegment: 'publish-storybook',
@@ -237,15 +223,10 @@ module.exports = {
],
},
{
- title: 'Essential addons',
pathSegment: 'essentials',
- type: 'menu',
+ title: 'Essential addons',
+ type: 'heading',
children: [
- {
- pathSegment: 'introduction',
- title: 'Introduction',
- type: 'link',
- },
{
pathSegment: 'actions',
title: 'Actions',
@@ -295,15 +276,10 @@ module.exports = {
],
},
{
- title: 'Addons',
pathSegment: 'addons',
- type: 'menu',
+ title: 'Addons',
+ type: 'heading',
children: [
- {
- pathSegment: 'introduction',
- title: 'Introduction',
- type: 'link',
- },
{
pathSegment: 'install-addons',
title: 'Install',
@@ -352,15 +328,10 @@ module.exports = {
],
},
{
- title: 'Configure',
pathSegment: 'configure',
- type: 'menu',
+ title: 'Configure',
+ type: 'heading',
children: [
- {
- pathSegment: 'overview',
- title: 'Overview',
- type: 'link',
- },
{
pathSegment: 'styling-and-css',
title: 'Styling and CSS',
@@ -453,15 +424,10 @@ module.exports = {
],
},
{
- title: 'Builders',
pathSegment: 'builders',
- type: 'menu',
+ title: 'Builders',
+ type: 'heading',
children: [
- {
- pathSegment: 'overview',
- title: 'Introduction',
- type: 'link',
- },
{
pathSegment: 'vite',
title: 'Vite',
@@ -480,9 +446,9 @@ module.exports = {
],
},
{
- title: 'API',
pathSegment: 'api',
- type: 'menu',
+ title: 'API',
+ type: 'heading',
children: [
{
title: 'main.js|ts configuration',
@@ -726,15 +692,10 @@ module.exports = {
],
},
{
- title: 'Contribute',
pathSegment: 'contribute',
- type: 'menu',
+ title: 'Contribute',
+ type: 'heading',
children: [
- {
- pathSegment: 'how-to-contribute',
- title: 'How to',
- type: 'link',
- },
{
pathSegment: 'RFC',
title: 'RFC Process',
diff --git a/docs/writing-docs/build-documentation.md b/docs/writing-docs/build-documentation.md
index 1b987fe92b38..fffb922a5c9b 100644
--- a/docs/writing-docs/build-documentation.md
+++ b/docs/writing-docs/build-documentation.md
@@ -2,7 +2,7 @@
title: 'Preview and build docs'
---
-Storybook allows you to create rich and extensive [documentation](./introduction.md) that will help you and any other stakeholder involved in the development process. Out of the box you have the tooling required to not only write it but also to preview it and build it.
+Storybook allows you to create rich and extensive [documentation](./index.md) that will help you and any other stakeholder involved in the development process. Out of the box you have the tooling required to not only write it but also to preview it and build it.
## Preview Storybook's documentation
@@ -18,7 +18,7 @@ At any point during your development, you can preview the documentation you've w
Depending on your configuration, when you execute the `storybook-docs` script. Storybook will be put into documentation mode and will generate a different build.
-It will look for any stories available either in [MDX](./mdx.md) or [CSF](../writing-stories/introduction.md#component-story-format) and based on the documentation you've added it will display it...
+It will look for any stories available either in [MDX](./mdx.md) or [CSF](../writing-stories/index.md#component-story-format) and based on the documentation you've added it will display it...
![Storybook in documentation mode](./storybook-docs-build.png)
diff --git a/docs/writing-docs/introduction.md b/docs/writing-docs/index.md
similarity index 97%
rename from docs/writing-docs/introduction.md
rename to docs/writing-docs/index.md
index 335c051829ee..0c9acac972b5 100644
--- a/docs/writing-docs/introduction.md
+++ b/docs/writing-docs/index.md
@@ -1,5 +1,6 @@
---
title: 'How to document components'
+hideRendererSelector: true
---
When you write component stories during development, you also create basic documentation to revisit later.
diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md
index 1c21d78dcca7..f6641482236c 100644
--- a/docs/writing-docs/mdx.md
+++ b/docs/writing-docs/mdx.md
@@ -71,7 +71,7 @@ If youβre coming from a previous version of Storybook, you might be accustomed
### Anatomy of MDX
-Assuming youβre already familiar with writing stories with [CSF](../writing-stories/introduction.md), we can dissect the MDX side of things in greater detail.
+Assuming youβre already familiar with writing stories with [CSF](../writing-stories/index.md), we can dissect the MDX side of things in greater detail.
The document consists of a number of blocks separated by blank lines. Since MDX mixes a few different languages together, it uses those blank lines to help distinguish where one starts, and the next begins. Failing to separate blocks by whitespace can cause (sometimes cryptic) parse errors.
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index b1f8adb992f7..c4595f31c783 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -8,7 +8,7 @@ A story is a component with a set of arguments that define how the component sho
When an argβs value changes, the component re-renders, allowing you to interact with components in Storybookβs UI via addons that affect args.
-Learn how and why to write stories in [the introduction](./introduction.md#using-args). For details on how args work, read on.
+Learn how and why to write stories in [the introduction](./index.md#using-args). For details on how args work, read on.
## Args object
@@ -274,7 +274,7 @@ If you are [writing an addon](../addons/writing-addons.md) that wants to read or
In Storybook 6+, we pass the args as the first argument to the story function. The second argument is the βcontextβ, which includes story parameters, globals, argTypes, and other information.
-In Storybook 5 and before we passed the context as the first argument. If youβd like to revert to that functionality set the `parameters.passArgsFirst` parameter in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering):
+In Storybook 5 and before we passed the context as the first argument. If youβd like to revert to that functionality set the `parameters.passArgsFirst` parameter in [`.storybook/preview.js`](../configure/index.md#configure-story-rendering):
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 677cf7f0199b..d8c1b8f5b3b7 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -120,7 +120,7 @@ Update your `.storybook/preview.js` file and enable the addon via a [global deco
-Finally, update your [`.storybook/main.js|ts`](../configure/overview.md#using-storybook-api) to allow Storybook to load the generated mock service worker file as follows:
+Finally, update your [`.storybook/main.js|ts`](../configure/index.md#using-storybook-api) to allow Storybook to load the generated mock service worker file as follows:
@@ -253,7 +253,7 @@ To use the mock in place of the real import, we use [Webpack aliasing](https://w
-Add the decorator you've just implemented to your [`storybook/preview.js`](../configure/overview.md#configure-story-rendering):
+Add the decorator you've just implemented to your [`storybook/preview.js`](../configure/index.md#configure-story-rendering):
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index ef45eec4c3c9..d80bf565afe4 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -39,7 +39,7 @@ Some components require a βharnessβ to render in a useful way. For instance,
Framework-specific libraries (e.g., [Styled Components](https://styled-components.com/), [Fontawesome](https://github.com/FortAwesome/vue-fontawesome) for Vue, Angular's [localize](https://angular.io/api/localize)) may require additional configuration to render correctly in Storybook.
-For example, if you're working with React's Styled Components and your components use themes, add a single global decorator to [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) to enable them. With Vue, extend Storybook's application and register your library. Or with Angular, add the package into your `polyfills.ts` and import it:
+For example, if you're working with React's Styled Components and your components use themes, add a single global decorator to [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) to enable them. With Vue, extend Storybook's application and register your library. Or with Angular, add the package into your `polyfills.ts` and import it:
@@ -140,7 +140,7 @@ To define a decorator for all stories of a component, use the `decorators` key o
## Global decorators
-We can also set a decorator for **all stories** via the `decorators` export of your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file (this is the file where you configure all stories):
+We can also set a decorator for **all stories** via the `decorators` export of your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) file (this is the file where you configure all stories):
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/index.md
similarity index 95%
rename from docs/writing-stories/introduction.md
rename to docs/writing-stories/index.md
index 146261d9af56..e7dab69ec876 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/index.md
@@ -75,7 +75,7 @@ Use the _named_ exports of a CSF file to define your componentβs stories. We r
'solid/button-story.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-button-story"
+ csf2Path="writing-stories/#snippet-button-story"
/>
@@ -94,7 +94,7 @@ Use the _named_ exports of a CSF file to define your componentβs stories. We r
'react/button-story.with-hooks.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
+ csf2Path="writing-stories/#snippet-button-story-with-hooks"
/>
@@ -121,7 +121,7 @@ The recommendation mentioned above also applies to other frameworks, not only Re
'solid/button-story.with-hooks.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
+ csf2Path="writing-stories/#snippet-button-story-with-hooks"
/>
@@ -156,7 +156,7 @@ You can rename any particular story you need. For instance, to give it a more ac
'solid/button-story-rename-story.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-button-story-rename-story"
+ csf2Path="writing-stories/#snippet-button-story-rename-story"
/>
@@ -185,7 +185,7 @@ A story is a function that describes how to render a component. You can have mul
'solid/button-story-with-emojis.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-button-story-with-emojis"
+ csf2Path="writing-stories/#snippet-button-story-with-emojis"
/>
@@ -216,7 +216,7 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
'solid/button-story-using-args.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-button-story-using-args"
+ csf2Path="writing-stories/#snippet-button-story-using-args"
/>
@@ -243,7 +243,7 @@ Whatβs more, you can import `args` to reuse when writing stories for other com
'solid/button-group-story.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-button-group-story"
+ csf2Path="writing-stories/#snippet-button-group-story"
/>
@@ -289,7 +289,7 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
'solid/login-form-with-play-function.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-login-form-with-play-function"
+ csf2Path="writing-stories/#snippet-login-form-with-play-function"
/>
Without the help of the `play` function and the `@storybook/addon-interactions`, you had to write your own stories and manually interact with the component to test out each use case scenario possible.
@@ -375,7 +375,7 @@ When building design systems or component libraries, you may have two or more co
'solid/list-story-starter.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-list-story-starter"
+ csf2Path="writing-stories/#snippet-list-story-starter"
/>
@@ -399,7 +399,7 @@ In such cases, it makes sense to render a different function for each story:
'solid/list-story-expanded.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-list-story-expanded"
+ csf2Path="writing-stories/#snippet-list-story-expanded"
/>
@@ -425,7 +425,7 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
'solid/list-story-reuse-data.ts.mdx',
]}
usesCsf3
- csf2Path="writing-stories/introduction#snippet-list-story-reuse-data"
+ csf2Path="writing-stories/#snippet-list-story-reuse-data"
/>
diff --git a/docs/writing-stories/loaders.md b/docs/writing-stories/loaders.md
index f33ddab5aac1..b0b5c11fd123 100644
--- a/docs/writing-stories/loaders.md
+++ b/docs/writing-stories/loaders.md
@@ -39,7 +39,7 @@ The response obtained from the remote API call is combined into a `loaded` field
## Global loaders
-We can also set a loader for **all stories** via the `loaders` export of your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file (this is the file where you configure all stories):
+We can also set a loader for **all stories** via the `loaders` export of your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) file (this is the file where you configure all stories):
diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index 6c53b544b087..b697330ec848 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -53,7 +53,7 @@ We can set the parameters for all stories of a component using the `parameters`
## Global parameters
-We can also set the parameters for **all stories** via the `parameters` export of your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) file (this is the file where you configure all stories):
+We can also set the parameters for **all stories** via the `parameters` export of your [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) file (this is the file where you configure all stories):
@@ -77,4 +77,4 @@ The way the global, component and story parameters are combined is:
The merging of parameters is important. It means it is possible to override a single specific sub-parameter on a per-story basis but still retain the majority of the parameters defined globally.
-If you are defining an API that relies on parameters (e.g. an [**addon**](../addons/introduction.md)) it is a good idea to take this behavior into account.
+If you are defining an API that relies on parameters (e.g. an [**addon**](../addons/index.md)) it is a good idea to take this behavior into account.
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 90e31f88f937..be3891cdae06 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,7 @@
title: 'Stories for multiple components'
---
-It's useful to write stories that [render two or more components](../writing-stories/introduction.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroups`, `Lists`, and `Page` components.
+It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroups`, `Lists`, and `Page` components.
## Reusing subcomponent stories
diff --git a/docs/writing-stories/typescript.md b/docs/writing-stories/typescript.md
index 0b7bba1a74c6..da09837e9a74 100644
--- a/docs/writing-stories/typescript.md
+++ b/docs/writing-stories/typescript.md
@@ -8,7 +8,7 @@ Storybook has built-in TypeScript support, so you can get started with zero conf
## Typing stories with `Meta` and `StoryObj`
-When writing stories, there are two aspects that are helpful to type. The first is the [component meta](./introduction.md#default-export), which describes and configures the component and its stories. In a [CSF file](../api/csf.md), this is the default export. The second is the [stories themselves](./introduction.md#defining-stories).
+When writing stories, there are two aspects that are helpful to type. The first is the [component meta](./index.md#default-export), which describes and configures the component and its stories. In a [CSF file](../api/csf.md), this is the default export. The second is the [stories themselves](./index.md#defining-stories).
Storybook provides utility types for each of these, named `Meta` and `StoryObj`. Here's an example CSF file using those types:
diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md
index 36c17f89860c..4285fa95eaa8 100644
--- a/docs/writing-tests/accessibility-testing.md
+++ b/docs/writing-tests/accessibility-testing.md
@@ -89,7 +89,7 @@ Out of the box, Storybook's accessibility addon includes a set of accessibility
#### Global a11y configuration
-If you need to dismiss an accessibility rule or modify its settings across all stories, you can add the following to your [`storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering):
+If you need to dismiss an accessibility rule or modify its settings across all stories, you can add the following to your [`storybook/preview.js|ts`](../configure/index.md#configure-story-rendering):
diff --git a/docs/writing-tests/introduction.md b/docs/writing-tests/index.md
similarity index 98%
rename from docs/writing-tests/introduction.md
rename to docs/writing-tests/index.md
index b7d1fe1411d0..48d8583f21b2 100644
--- a/docs/writing-tests/introduction.md
+++ b/docs/writing-tests/index.md
@@ -1,5 +1,6 @@
---
title: 'How to test UIs with Storybook'
+hideRendererSelector: true
---
Storybook provides a clean-room environment for testing components in isolation. Stories make it easy to explore a component in all its variations, no matter how complex.
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 4080ce51ee5e..02841adcd480 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -17,7 +17,7 @@ In Storybook, this familiar workflow happens in your browser. That makes it easi
## How does component testing in Storybook work?
-You start by writing a [**story**](../writing-stories/introduction.md) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the **test-runner** to confirm that the component renders correctly and that your interaction tests with the **play** function pass. Additionally, you can automate test execution via the [command line](./test-runner.md#cli-options) or in your [CI environment](./test-runner.md#set-up-ci-to-run-tests).
+You start by writing a [**story**](../writing-stories/index.md) to set up the component's initial state. Then simulate user behavior using the **play** function. Finally, use the **test-runner** to confirm that the component renders correctly and that your interaction tests with the **play** function pass. Additionally, you can automate test execution via the [command line](./test-runner.md#cli-options) or in your [CI environment](./test-runner.md#set-up-ci-to-run-tests).
- The [`play`](../writing-stories/play-function.md) function is a small snippet of code that runs after a story finishes rendering. You can use this to test user workflows.
- The test is written using Storybook-instrumented versions of [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/).
diff --git a/docs/writing-tests/stories-in-unit-tests.md b/docs/writing-tests/stories-in-unit-tests.md
index c79c31c8a901..e21c90708528 100644
--- a/docs/writing-tests/stories-in-unit-tests.md
+++ b/docs/writing-tests/stories-in-unit-tests.md
@@ -134,7 +134,7 @@ By default, the `setProjectAnnotations` function injects into your existing test
## Run tests on a single story
-You can use the `composeStory` function from the appropriate framework or supported addon to allow your tests to run on a single story. However, if you're relying on this method, we recommend that you supply the story metadata (i.e., the [default export](../writing-stories/introduction.md#default-export)) to the `composeStory` function. This ensures that your tests can accurately determine the correct information about the story. For example:
+You can use the `composeStory` function from the appropriate framework or supported addon to allow your tests to run on a single story. However, if you're relying on this method, we recommend that you supply the story metadata (i.e., the [default export](../writing-stories/index.md#default-export)) to the `composeStory` function. This ensures that your tests can accurately determine the correct information about the story. For example:
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
index 531fa1d789c8..9bd1a8f5f0d8 100644
--- a/docs/writing-tests/test-runner.md
+++ b/docs/writing-tests/test-runner.md
@@ -4,7 +4,7 @@ title: 'Test runner'
Storybook test runner turns all of your stories into executable tests. It is powered by [Jest](https://jestjs.io/) and [Playwright](https://playwright.dev/).
-- For those [without a play function](../writing-stories/introduction.md): it verifies whether the story renders without any errors.
+- For those [without a play function](../writing-stories/index.md): it verifies whether the story renders without any errors.
- For those [with a play function](../writing-stories/play-function.md): it also checks for errors in the play function and that all assertions passed.
These tests run in a live browser and can be executed via the [command line](#cli-options) or your [CI server](#set-up-ci-to-run-tests).
@@ -389,7 +389,7 @@ If you're running a specific set of tests (e.g., image snapshot testing), the te
### Index.json mode
-The test-runner transforms your story files into tests when testing a local Storybook. For a remote Storybook, it uses the Storybook's [index.json](../configure/overview.md#feature-flags) (formerly `stories.json`) file (a static index of all the stories) to run the tests.
+The test-runner transforms your story files into tests when testing a local Storybook. For a remote Storybook, it uses the Storybook's [index.json](../configure/index.md#feature-flags) (formerly `stories.json`) file (a static index of all the stories) to run the tests.
#### Why?
@@ -429,7 +429,7 @@ If you need to disable it, use the `--no-index-json` flag:
#### How do I check if my Storybook has a `index.json` file?
-Index.json mode requires a `index.json` file. Open a browser window and navigate to your deployed Storybook instance (for example, `https://your-storybook-url-here.com/index.json`). You should see a JSON file that starts with a `"v": 3` key, immediately followed by another key called "stories", which contains a map of story IDs to JSON objects. If that is the case, your Storybook supports [index.json mode](../configure/overview.md#feature-flags).
+Index.json mode requires a `index.json` file. Open a browser window and navigate to your deployed Storybook instance (for example, `https://your-storybook-url-here.com/index.json`). You should see a JSON file that starts with a `"v": 3` key, immediately followed by another key called "stories", which contains a map of story IDs to JSON objects. If that is the case, your Storybook supports [index.json mode](../configure/index.md#feature-flags).
---