Merge pull request #11878 from storybookjs/documentation_snippets_upd…

…ates

Chore: Updates for the code snippets

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`:
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-set-environment-variables.sh.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
+```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:
 

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:
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-serve-static-assets-script.json.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
+```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.
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-serve-static-assets-script-multifolder.json.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
+```json
+{
+    "scripts": {
+        "start-storybook": "start-storybook -s ./public,./static -p 9001"
+    }
+}
+```
 
 ### Reference assets from a CDN
 

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.
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-install-theme-packages.sh.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
+```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):
 

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:
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-run-webpack-config.sh.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
+```shell
+yarn storybook --debug-webpack
+```
 
 ### Extending Storybook’s webpack config
 

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:
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-execute.sh.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
+```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.
 

docs/snippets/common/badge-story.mdx.mdx

@@ -2,12 +2,17 @@
 
 <!---Badge.stories.mdx --->
 
+
+
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 
 import { Badge } from './Badge';
 import { Icon } from './Icon';
 
 <Meta title="MDX/Badge" component={Badge} />
+
+<!--- This is your Story template function, shown here in React -->
+
 export const Template = (args) => <Badge {...args } />
 
 # Badge

docs/snippets/common/checkbox-story.mdx.mdx

@@ -1,6 +1,8 @@
 ```md
 <!--- Checkbox.stories.mdx -->
 
+
+
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { Checkbox } from './Checkbox';
 
@@ -11,6 +13,8 @@ import { Checkbox } from './Checkbox';
 With `MDX` we can define a story for `Checkbox` right in the middle of our
 Markdown documentation.
 
+<!--- This is your Story template function, shown here in React -->
+
 export const Template = (args) => <Checkbox {...args} />
 
 <Canvas>

docs/snippets/common/component-story-mdx-argstable-propsblock.mdx.mdx

@@ -1,4 +1,6 @@
 ```md
+<!--- MyComponent.stories.mdx -->
+
 import { Props } from '@storybook/addon-docs/blocks';
 import { MyComponent } from './MyComponent';
 

docs/snippets/common/component-story-mdx-argtypes.mdx.mdx

@@ -1,4 +1,5 @@
 ```md
+<!--- MyComponent.stories.mdx -->
 
 <Meta
   title="MyComponent"

docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx

@@ -1,4 +1,5 @@
 ```md
+<!-- MyComponent.stories.mdx --->
 
 <Meta
   title='MyComponent'

docs/snippets/common/component-story-mdx-dedent.mdx.mdx

@@ -1,4 +1,6 @@
 ```md
+<!--- MyComponent.stories.mdx -->
+
 import { Source } from '@storybook/addon-docs/blocks';
 import dedent from 'ts-dedent';
 

docs/snippets/common/component-story-mdx-description.mdx.mdx

@@ -1,9 +1,12 @@
 ```md
+<!--- Button.stories.mdx -->
+
 import { Description } from '@storybook/addon-docs/blocks';
 import dedent from 'ts-dedent';
 import { Button } from './Button';
 
 <Description of={Button} />
+
 <Description markdown={dedent`
   ## Custom description
 

docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx

@@ -1,4 +1,5 @@
 ```md
+<!-- MyComponent.stories.mdx --->
 
 import { Story } from '@storybook/addon-docs/blocks';
 

docs/snippets/common/component-story-mdx-story-by-name.mdx.mdx

@@ -1,7 +1,11 @@
 ```md
+<!-- Button.stories.mdx --->
+
 import { Story } from '@storybook/addon-docs/blocks';
 import { Button } from './Button';
 
+<!--- This is your Story template function, shown here in React -->
+
 export const Template = (args) => <Button {...args} />;
 
 <Story name="Basic" args={{ label: ‘hello’ }}>

docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx

@@ -1,6 +1,10 @@
 ```md
+<!-- MyComponent.stories.mdx --->
+
 import { Canvas } from '@storybook/addon-docs/blocks';
 
+<!--- This is your Story template function, shown here in React -->
+
 export const Template = (args) => <Badge {...args } />;
 
 <Canvas>

docs/snippets/common/my-component-with-story-content.mdx.mdx

@@ -1,4 +1,6 @@
 ```md
+<!-- MyComponent.stories.mdx --->
+
 import { Canvas } from '@storybook/addon-docs/blocks';
 import { MyComponent } from './MyComponent';
 

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:
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-preview-documentation.json.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
+```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:
 
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-build-documentation.json.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
+```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.