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
storybookjs · Nov 28, 2023 · 975ad76 · 975ad76
1 parent a076f4f
commit 975ad76
Show file tree

Hide file tree

Showing 243 changed files with 457 additions and 375 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,11 +4,10 @@ Closes #
 
 <!--
 
-Thank you for contributing to Storybook! Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `main` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute
+Thank you for contributing to Storybook! Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `main` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/contribute
 
 -->
 
-
 ## What I did
 
 <!-- Briefly describe what your PR does -->

diff --git 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
@@ -55,4 +55,4 @@ yarn task --task dev --template <your 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
@@ -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
@@ -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
@@ -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
@@ -8,15 +8,15 @@ 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
 ```
 
 ## 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<Button> = {
   title: 'Example/Button',
   component: Button,

diff --git 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
@@ -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
@@ -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
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/introduction"
+          href="https://storybook.js.org/docs/writing-tests"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>

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
@@ -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<typeof Button> = {
   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
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/introduction"
+          href="https://storybook.js.org/docs/writing-tests"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>

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
@@ -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
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/introduction"
+          href="https://storybook.js.org/docs/writing-tests"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>

diff --git 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
@@ -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)