diff --git a/docs/addons/addon-knowledge-base.mdx b/docs/addons/addon-knowledge-base.mdx index ab0ef1268d52..763ce53ee3b1 100644 --- a/docs/addons/addon-knowledge-base.mdx +++ b/docs/addons/addon-knowledge-base.mdx @@ -7,7 +7,7 @@ sidebar: Once you understand the basics of writing addons, there are a variety of common enhancements to make your addon better. This page details additional information about addon creation. Use it as a quick reference guide when creating your own addons. -### Disable the addon panel +## Disable the addon panel It’s possible to disable the addon panel for a particular story. @@ -27,14 +27,14 @@ Then when adding a story, you can pass a disabled parameter. {/* prettier-ignore-end */} -### Style your addon +## Style your addon Storybook uses [Emotion](https://emotion.sh/docs/introduction) for styling. Alongside with a theme that you can customize! We recommend using Emotion to style your addon’s UI components. That allows you to use the active Storybook theme to deliver a seamless developer experience. If you don’t want to use Emotion, you can use inline styles or another css-in-js lib. You can receive the theme as a prop by using Emotion's `withTheme` HOC. [Read more about theming](../configure/user-interface/theming.mdx). -### Storybook components +## Storybook components Addon authors can develop their UIs using any React library. But we recommend using Storybook’s UI components in `@storybook/components` to build addons faster. When you use Storybook components, you get: @@ -75,7 +75,7 @@ Complementing the components, also included is a set of UI primitives. Use the c -### Build system +## Build system When you're developing your addon as a package, you can’t use `npm link` to add it to your project. List your addon as a local dependency into your package.json: @@ -91,11 +91,11 @@ When you're developing your addon as a package, you can’t use `npm link` to ad Run either `yarn` or `npm install` to install the addon. -### Hot module replacement +## Hot module replacement While developing your addon, you can configure HMR (hot module replacement) to reflect the changes made. -### Standalone Storybook addons +## Standalone Storybook addons If you're developing a standalone addon, add a new script to `package.json` with the following: @@ -107,11 +107,11 @@ If you're developing a standalone addon, add a new script to `package.json` with } ``` -#### Local Storybook addons +### Local Storybook addons If you're developing a local Storybook addon built on top of an existing Storybook installation, HMR (hot module replacement) is available out of the box. -### Composing addons in presets +## Composing addons in presets If you're working on a preset that loads third-party addons, which you don't have control over, and you need access to certain features (e.g., decorators) or provide additional configurations. In that case, you'll need to update your preset to the following to allow you to load and configure the other addons: diff --git a/docs/configure/environment-variables.mdx b/docs/configure/environment-variables.mdx index f1b14c9a4c5c..894c5b60e20a 100644 --- a/docs/configure/environment-variables.mdx +++ b/docs/configure/environment-variables.mdx @@ -40,7 +40,7 @@ You can also access these variables in your custom ``/`` using the s If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly, for example: ``. -### Using .env files +## Using .env files You can also use `.env` files to change Storybook's behavior in different modes. For example, if you add a `.env` file to your project with the following: @@ -57,7 +57,7 @@ Then you can access this environment variable anywhere, even within your stories {/* prettier-ignore-end */} - #### With Vite + ### With Vite Out of the box, Storybook provides a [Vite builder](../builders/vite.mdx), which does not output Node.js globals like `process.env`. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use `import.meta.env`. For example: @@ -76,7 +76,7 @@ You can also pass these environment variables when you are [building your Storyb Then they'll be hardcoded to the static version of your Storybook. -### Using Storybook configuration +## Using Storybook configuration Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/index.mdx#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example: @@ -94,7 +94,7 @@ When Storybook loads, it will enable you to access them in your stories similar {/* prettier-ignore-end */} -### Using environment variables to choose the browser +## Using environment variables to choose the browser Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script. diff --git a/docs/configure/integration/images-and-assets.mdx b/docs/configure/integration/images-and-assets.mdx index 5d125c16d41a..9e0130ae3834 100644 --- a/docs/configure/integration/images-and-assets.mdx +++ b/docs/configure/integration/images-and-assets.mdx @@ -7,7 +7,7 @@ sidebar: Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these assets in your story files. -### Import assets into stories +## Import assets into stories You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://webpack.js.org/loaders/) to handle the required files. @@ -19,7 +19,7 @@ Afterward, you can use any asset in your stories: {/* prettier-ignore-end */} -### Serving static files via Storybook Configuration +## Serving static files via Storybook Configuration We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. We recommend this technique for assets that your components often use, like logos, fonts, and icons. @@ -55,7 +55,7 @@ Or even use a configuration object to define the directories: {/* prettier-ignore-end */} -### Reference assets from a CDN +## Reference assets from a CDN Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service. @@ -65,7 +65,7 @@ Upload your files to an online CDN and reference them. In this example, we’re {/* prettier-ignore-end */} -### Absolute versus relative paths +## Absolute versus relative paths Sometimes, you may want to deploy your Storybook into a subpath, like `https://example.com/storybook`. @@ -75,7 +75,7 @@ If you load static content via importing, this is automatic, and you do not have Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook-configuration) along with your Storybook. In that case, you need to use relative paths to load images or use the base element. -### Referencing Fonts in Stories +## Referencing Fonts in Stories After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font to your stories. To do this, create a [`preview-head.html`](../story-rendering.mdx) file inside the configuration directory (i.e., `.storybook`) and add a `` tag to reference your font. diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx index 59215b00805e..83130883f472 100644 --- a/docs/get-started/why-storybook.mdx +++ b/docs/get-started/why-storybook.mdx @@ -19,7 +19,7 @@ The breadth of modern frontends overwhelm existing workflows. Developers must co ## The solution -#### Build UIs in isolation +### Build UIs in isolation Every piece of UI is now a [component](https://www.componentdriven.org/). The superpower of components is that you don't need to spin up the whole app just to see how they render. You can render a specific variation in isolation by passing in props, mocking data, or faking events. @@ -27,7 +27,7 @@ Storybook is packaged as a small, development-only, [workshop](https://bradfrost