diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index a5a1da8b5da7..5c241f058a5a 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -5,15 +5,9 @@ title: 'Environment variables' You can use environment variables in Storybook to change its behaviour in different “modes”. If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env`: - - - - - +```shell +STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook +``` Then we can access these environment variables anywhere inside our preview JavaScript code like below: diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index 9ed9413a1264..7d6e9c7b8368 100644 --- a/docs/configure/images-and-assets.md +++ b/docs/configure/images-and-assets.md @@ -26,15 +26,13 @@ We recommend serving static files via Storybook to ensure that your components a Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`-s` flag in your npm script like so: - - - - - +```json +{ + "scripts": { + "start-storybook": "start-storybook -s ./public -p 9001" + } +} +``` Here `./public` is your static directory. Now use it in a component or story like this. @@ -50,15 +48,13 @@ Here `./public` is your static directory. Now use it in a component or story lik You can also pass a list of directories separated by commas without spaces instead of a single directory. - - - - - +```json +{ + "scripts": { + "start-storybook": "start-storybook -s ./public,./static -p 9001" + } +} +``` ### Reference assets from a CDN diff --git a/docs/configure/theming.md b/docs/configure/theming.md index 258fa067427b..10b3ad6468e2 100644 --- a/docs/configure/theming.md +++ b/docs/configure/theming.md @@ -12,15 +12,9 @@ Storybook includes two themes that look good out of the box: "normal" (a light t Make sure you have installed [`@storybook/addons`](https://www.npmjs.com/package/@storybook/addons) and [`@storybook/theming`](https://www.npmjs.com/package/@storybook/theming) packages. - - - - - +```sh +yarn install --dev @storybook/addons @storybook/theming +``` As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./overview.md#configure-story-rendering): diff --git a/docs/configure/webpack.md b/docs/configure/webpack.md index 2cdd2f3c1199..b875d3331782 100644 --- a/docs/configure/webpack.md +++ b/docs/configure/webpack.md @@ -42,15 +42,9 @@ You can import `.json` files and have them expanded to a JavaScript object: If you want to know the exact details of the webpack config, the best way is to run: - - - - - +```shell +yarn storybook --debug-webpack +``` ### Extending Storybook’s webpack config diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 2c30c55d4707..c2c63a73da89 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -31,15 +31,9 @@ The command above will make the following changes to your local environment: Check that everything worked by running: - - - - - +```shell +npx storybook +``` It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab and you'll be greeted by a welcome screen. diff --git a/docs/snippets/common/badge-story.mdx.mdx b/docs/snippets/common/badge-story.mdx.mdx index 3459b315a489..403d3d842af8 100644 --- a/docs/snippets/common/badge-story.mdx.mdx +++ b/docs/snippets/common/badge-story.mdx.mdx @@ -2,12 +2,15 @@ + + import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; import { Badge } from './Badge'; import { Icon } from './Icon'; + export const Template = (args) => # Badge diff --git a/docs/snippets/common/checkbox-story.mdx.mdx b/docs/snippets/common/checkbox-story.mdx.mdx index 0d7c84343c77..95a295de9adf 100644 --- a/docs/snippets/common/checkbox-story.mdx.mdx +++ b/docs/snippets/common/checkbox-story.mdx.mdx @@ -1,6 +1,8 @@ ```md + + import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; import { Checkbox } from './Checkbox'; diff --git a/docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx b/docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx index 077024c2e7c0..b7981c095949 100644 --- a/docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx @@ -1,4 +1,6 @@ ```md + + import { Props } from '@storybook/addon-docs/blocks'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx b/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx index 64d364ffe7c1..06c661fd70ce 100644 --- a/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-argtypes.mdx.mdx @@ -1,4 +1,5 @@ ```md + + import { Source } from '@storybook/addon-docs/blocks'; import dedent from 'ts-dedent'; diff --git a/docs/snippets/common/component-story-mdx-description.mdx.mdx b/docs/snippets/common/component-story-mdx-description.mdx.mdx index 5ef0c9d4879f..46bcf97f9c42 100644 --- a/docs/snippets/common/component-story-mdx-description.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-description.mdx.mdx @@ -1,9 +1,12 @@ ```md + + import { Description } from '@storybook/addon-docs/blocks'; import dedent from 'ts-dedent'; import { Button } from './Button'; + import { Story } from '@storybook/addon-docs/blocks'; diff --git a/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx index 0074e671e88d..72e47b838b9a 100644 --- a/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx +++ b/docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx @@ -1,4 +1,8 @@ ```md + + + + import { Story } from '@storybook/addon-docs/blocks'; import { Button } from './Button'; diff --git a/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx index 9522231aadf8..03b47e664a18 100644 --- a/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx +++ b/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx @@ -1,4 +1,8 @@ ```md + + + + import { Canvas } from '@storybook/addon-docs/blocks'; export const Template = (args) => ; diff --git a/docs/snippets/common/my-component-with-story-content.mdx.mdx b/docs/snippets/common/my-component-with-story-content.mdx.mdx index 51465a329e3f..f6baa4152a8c 100644 --- a/docs/snippets/common/my-component-with-story-content.mdx.mdx +++ b/docs/snippets/common/my-component-with-story-content.mdx.mdx @@ -1,4 +1,6 @@ ```md + + import { Canvas } from '@storybook/addon-docs/blocks'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/common/storybook-build-documentation.json.mdx b/docs/snippets/common/storybook-build-documentation.json.mdx deleted file mode 100644 index 763279e7d81c..000000000000 --- a/docs/snippets/common/storybook-build-documentation.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "build-storybook-docs": "build-storybook --docs", - } -} -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-execute.sh.mdx b/docs/snippets/common/storybook-execute.sh.mdx deleted file mode 100644 index 467c5a72d9b9..000000000000 --- a/docs/snippets/common/storybook-execute.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npx storybook -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-install-theme-packages.sh.mdx b/docs/snippets/common/storybook-install-theme-packages.sh.mdx deleted file mode 100644 index c6b773214d4f..000000000000 --- a/docs/snippets/common/storybook-install-theme-packages.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npm install @storybook/addons @storybook/theming --save-dev -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-install.sh.mdx b/docs/snippets/common/storybook-install.sh.mdx deleted file mode 100644 index fe12f822a776..000000000000 --- a/docs/snippets/common/storybook-install.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -npx sb init -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-preview-documentation.json.mdx b/docs/snippets/common/storybook-preview-documentation.json.mdx deleted file mode 100644 index 874c5868a92f..000000000000 --- a/docs/snippets/common/storybook-preview-documentation.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "storybook-docs": "start-storybook --docs", - } -} -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-run-webpack-config.sh.mdx b/docs/snippets/common/storybook-run-webpack-config.sh.mdx deleted file mode 100644 index 5a54744feab6..000000000000 --- a/docs/snippets/common/storybook-run-webpack-config.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -yarn storybook --debug-webpack -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-serve-static-assets-script-multifolder.json.mdx b/docs/snippets/common/storybook-serve-static-assets-script-multifolder.json.mdx deleted file mode 100644 index f8bdd213171c..000000000000 --- a/docs/snippets/common/storybook-serve-static-assets-script-multifolder.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "start-storybook": "start-storybook -s ./public,./static -p 9001" - } -} -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-serve-static-assets-script.json.mdx b/docs/snippets/common/storybook-serve-static-assets-script.json.mdx deleted file mode 100644 index 7a3c469cb15c..000000000000 --- a/docs/snippets/common/storybook-serve-static-assets-script.json.mdx +++ /dev/null @@ -1,7 +0,0 @@ -```json -{ - "scripts": { - "start-storybook": "start-storybook -s ./public -p 9001" - } -} -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-set-environment-variables.sh.mdx b/docs/snippets/common/storybook-set-environment-variables.sh.mdx deleted file mode 100644 index 64c7e495815d..000000000000 --- a/docs/snippets/common/storybook-set-environment-variables.sh.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```sh -STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook -``` \ No newline at end of file diff --git a/docs/writing-docs/build-documentation.md b/docs/writing-docs/build-documentation.md index ba9f06bc36e8..cafa7e211891 100644 --- a/docs/writing-docs/build-documentation.md +++ b/docs/writing-docs/build-documentation.md @@ -8,15 +8,13 @@ Storybook allows you to create rich and extensive [documentation](./introduction At any point during your development, you can preview the documentation you've written. Storybook allows you to generate a preview of the final documentation when you use the `--docs` flag. We recommend including it in your `package.json` as a new script: - - - - - +```json +{ + "scripts": { + "storybook-docs": "start-storybook --docs", + } +} +``` Depending on your configuration, when you execute the `storybook-docs` script. Storybook will be put into documentation mode and will generate a different build. @@ -34,15 +32,13 @@ There's some caveats to this build mode, as to the normal Storybook build: You can also publish your documentation, the same you would [publish](../workflows/publish-storybook.md) your Storybook. You can use the `--docs` flag with `build-storybook` command. We recommend as well including it as a script in your `package.json` file: - - - - - +```json +{ + "scripts": { + "build-storybook-docs": "build-storybook --docs", + } +} +``` Based on the configuration you have, when the `build-storybook-docs` script is executed, Storybook once again will be put into documentation mode and will generate a different build and output the documentation into the `storybook-static` folder.