Merge pull request #23246 from storybookjs/chore_docs_addon_changes

Docs: Updates for the addon documentation
storybookjs · Jul 3, 2023 · e053703 · e053703
2 parents 47446f4 + c4356f4
commit e053703
Show file tree

Hide file tree

Showing 65 changed files with 1,318 additions and 353 deletions.
diff --git a/docs/addons/addon-final-stage-optimized.mp4 b/docs/addons/addon-final-stage-optimized.mp4
diff --git a/docs/addons/addon-kit-clone-repo.mp4 b/docs/addons/addon-kit-clone-repo.mp4
diff --git a/docs/addons/addon-types.md b/docs/addons/addon-types.md
@@ -88,6 +88,10 @@ Use this boilerplate code while writing your own preset addon.
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-Learn more about writing your own preset addon <a href="./writing-presets">here</a>.
-</div>
+## Learn more about the Storybook addon ecosystem
+
+- Types of addons for other types of addons
+- [Writing addons](./writing-addons.md) for the basics of addon development
+- [Presets](./writing-presets.md) for preset development
+- [Integration catalog](./integration-catalog.md) for requirements and available recipes
+- [API reference](./addons-api.md) to learn about the available APIs
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
@@ -374,3 +374,11 @@ Hook that allows you to retrieve or update a story's [`args`](../writing-stories
 />
 
 <!-- prettier-ignore-end -->
+
+## Learn more about the Storybook addon ecosystem
+
+- [Types of addons](./addon-types.md) for other types of addons
+- [Writing addons](./writing-addons.md) for the basics of addon development
+- [Presets](./writing-presets.md) for preset development
+- [Integration catalog](./integration-catalog.md) for requirements and available recipes
+- API reference to learn about the available APIs
diff --git a/docs/addons/github-secrets-screen.png b/docs/addons/github-secrets-screen.png
diff --git a/docs/addons/integration-catalog.md b/docs/addons/integration-catalog.md
@@ -101,3 +101,11 @@ Not finding the recipe that you want? If it's popular in the community, our docs
 ### Request a recipe
 
 If you'd like to request a recipe, head over to the [#maintenance channel](https://discord.com/channels/486522875931656193/490070912448724992) of our community Discord and ask.
+
+## Learn more about the Storybook addon ecosystem
+
+- [Types of addons](./addon-types.md) for other types of addons
+- [Writing addons](./writing-addons.md) for the basics of addon development
+- [Presets](./writing-presets.md) for preset development
+- Integration catalog for requirements and available recipes
+- [API reference](./addons-api.md) to learn about the available APIs
diff --git a/docs/addons/storybook-addon-finished-state.mp4 b/docs/addons/storybook-addon-finished-state.mp4
diff --git a/docs/addons/storybook-addon-initial-state.png b/docs/addons/storybook-addon-initial-state.png
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md
diff --git a/docs/api/main-config-manager-head.md b/docs/api/main-config-manager-head.md
@@ -6,7 +6,7 @@ Parent: [main.js|ts configuration](./main-config.md)
 
 Type: `(head: string) => string`
 
-Programmatically adjust the manager's `<head>` of your Storybook. For example, load a custom font or add a script. Most often used by [addon authors](../addons/writing-presets.md#babel).
+Programmatically adjust the manager's `<head>` of your Storybook. For example, load a custom font or add a script. Most often used by [addon authors](../addons/writing-presets.md#ui-configuration).
 
 <div class="aside">
 

diff --git a/docs/api/main-config-preview-body.md b/docs/api/main-config-preview-body.md
@@ -6,7 +6,7 @@ Parent: [main.js|ts configuration](./main-config.md)
 
 Type: `(body: string) => string`
 
-Programmatically adjust the [preview `<body>`](../configure/story-rendering.md#adding-to-body) of your Storybook. Most often used by [addon authors](../addons/writing-presets.md#babel).
+Programmatically adjust the [preview `<body>`](../configure/story-rendering.md#adding-to-body) of your Storybook. Most often used by [addon authors](../addons/writing-presets.md#ui-configuration).
 
 <div class="aside">
 

diff --git a/docs/api/main-config-preview-head.md b/docs/api/main-config-preview-head.md
@@ -6,7 +6,7 @@ Parent: [main.js|ts configuration](./main-config.md)
 
 Type: `(head: string) => string`
 
-Programmatically adjust the [preview `<head>`](../configure/story-rendering.md#adding-to-head) of your Storybook. Most often used by [addon authors](../addons/writing-presets.md#babel).
+Programmatically adjust the [preview `<head>`](../configure/story-rendering.md#adding-to-head) of your Storybook. Most often used by [addon authors](../addons/writing-presets.md#ui-configuration).
 
 <div class="aside">
 

diff --git a/docs/configure/story-rendering.md b/docs/configure/story-rendering.md
@@ -24,7 +24,7 @@ Storybook will inject these tags into the _preview iframe_ where your components
 
 </div>
 
-It's also possible to modify the preview head HTML programmatically using a preset defined in the `main.js` file. For more information see [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates).
+However, it's also possible to modify the preview head HTML programmatically using a preset defined in the `main.js` file. Read the [presets documentation](../addons/writing-presets.md#ui-configuration) for more information.
 
 ## Adding to &#60;body&#62;
 
@@ -60,4 +60,4 @@ Storybook will inject these tags into the _preview iframe_ where your components
 
 </div>
 
-Similarly to the preview head HTML, preview body HTML can also be updated programmatically using a preset. See [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates) for more information.
+Just like how you have the ability to customize the preview `head` HTML tag, you can also follow the same steps to customize the preview `body` with a preset. To obtain more information on how to do this, refer to the [presets documentation](../addons/writing-presets.md#ui-configuration).
diff --git a/docs/contribute/framework.md b/docs/contribute/framework.md
@@ -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#L66-L69).
+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).
 
 #### `types.ts` ([example](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/types.ts))
 

diff --git a/docs/snippets/common/main-config-preview.body.js.mdx b/docs/snippets/common/main-config-preview.body.js.mdx
@@ -0,0 +1,12 @@
+```js
+// .storybook/main.js
+
+export default {
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+};
+```
diff --git a/docs/snippets/common/main-config-preview.body.ts.mdx b/docs/snippets/common/main-config-preview.body.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  previewBody: (body) => `
+    ${body}
+    ${
+      process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
+    }
+  `,
+};
+
+export default config;
+```
diff --git a/docs/snippets/common/main-config-preview.head.js.mdx b/docs/snippets/common/main-config-preview.head.js.mdx
@@ -0,0 +1,14 @@
+```js
+// .storybook/main.js
+
+export default {
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        background: #827979;
+      }
+    </style>
+ `,
+};
+```
diff --git a/docs/snippets/common/main-config-preview.head.ts.mdx b/docs/snippets/common/main-config-preview.head.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        background: #827979;
+      }
+    </style>
+ `,
+};
+
+export default config;
+```
diff --git a/docs/snippets/common/my-addon-babel-configuration.js.mdx b/docs/snippets/common/my-addon-babel-configuration.js.mdx
diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
diff --git a/docs/snippets/common/my-addon-preset-implementation.js.mdx b/docs/snippets/common/my-addon-preset-implementation.js.mdx
diff --git a/docs/snippets/common/my-addon-root-level-preset.js.mdx b/docs/snippets/common/my-addon-root-level-preset.js.mdx
diff --git a/docs/snippets/common/my-addon-storybook-registration.js.mdx b/docs/snippets/common/my-addon-storybook-registration.js.mdx
diff --git a/docs/snippets/common/storybook-addon-change-panel.js.mdx b/docs/snippets/common/storybook-addon-change-panel.js.mdx