From 714076bc3000d5094397c34c01d785f06ca373d4 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 11 Aug 2020 02:32:01 +0100
Subject: [PATCH 1/2] removes the shell and json file references. Updates for
 the writing docs section

---
 docs/configure/environment-variables.md       | 12 ++-----
 docs/configure/images-and-assets.md           | 32 ++++++++-----------
 docs/configure/theming.md                     | 12 ++-----
 docs/configure/webpack.md                     | 12 ++-----
 docs/get-started/install.md                   | 12 ++-----
 docs/snippets/common/badge-story.mdx.mdx      |  3 ++
 docs/snippets/common/checkbox-story.mdx.mdx   |  2 ++
 ...ent-story-mdx-argstable-propsblock.mdx.mdx |  2 ++
 .../component-story-mdx-argtypes.mdx.mdx      |  1 +
 ...ponent-story-mdx-decorators-params.mdx.mdx |  1 +
 .../common/component-story-mdx-dedent.mdx.mdx |  2 ++
 .../component-story-mdx-description.mdx.mdx   |  3 ++
 ...ponent-story-mdx-reference-storyid.mdx.mdx |  1 +
 .../component-story-mdx-story-by-name.mdx.mdx |  4 +++
 .../mdx-canvas-multiple-stories.mdx.mdx       |  4 +++
 .../my-component-with-story-content.mdx.mdx   |  2 ++
 .../storybook-build-documentation.json.mdx    |  7 ----
 docs/snippets/common/storybook-execute.sh.mdx |  3 --
 .../storybook-install-theme-packages.sh.mdx   |  3 --
 docs/snippets/common/storybook-install.sh.mdx |  3 --
 .../storybook-preview-documentation.json.mdx  |  7 ----
 .../storybook-run-webpack-config.sh.mdx       |  3 --
 ...-static-assets-script-multifolder.json.mdx |  7 ----
 ...rybook-serve-static-assets-script.json.mdx |  7 ----
 ...storybook-set-environment-variables.sh.mdx |  3 --
 docs/writing-docs/build-documentation.md      | 32 ++++++++-----------
 26 files changed, 65 insertions(+), 115 deletions(-)
 delete mode 100644 docs/snippets/common/storybook-build-documentation.json.mdx
 delete mode 100644 docs/snippets/common/storybook-execute.sh.mdx
 delete mode 100644 docs/snippets/common/storybook-install-theme-packages.sh.mdx
 delete mode 100644 docs/snippets/common/storybook-install.sh.mdx
 delete mode 100644 docs/snippets/common/storybook-preview-documentation.json.mdx
 delete mode 100644 docs/snippets/common/storybook-run-webpack-config.sh.mdx
 delete mode 100644 docs/snippets/common/storybook-serve-static-assets-script-multifolder.json.mdx
 delete mode 100644 docs/snippets/common/storybook-serve-static-assets-script.json.mdx
 delete mode 100644 docs/snippets/common/storybook-set-environment-variables.sh.mdx

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`:
 
-<!-- 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:
 
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:
 
-<!-- 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
 
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.
 
-<!-- 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):
 
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:
 
-<!-- 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
 
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:
 
-<!-- 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.
 
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 @@
 
 <!---Badge.stories.mdx --->
 
+<!--- This is your Story template function, shown here in React -->
+
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 
 import { Badge } from './Badge';
 import { Icon } from './Icon';
 
 <Meta title="MDX/Badge" component={Badge} />
+
 export const Template = (args) => <Badge {...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
 <!--- Checkbox.stories.mdx -->
 
+<!--- This is your Story template function, shown here in React -->
+
 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
+<!--- MyComponent.stories.mdx -->
+
 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
+<!--- MyComponent.stories.mdx -->
 
 <Meta
   title="MyComponent"
diff --git a/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx b/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
index bb287005f88f..d35800b58045 100644
--- a/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
+++ b/docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
@@ -1,4 +1,5 @@
 ```md
+<!-- MyComponent.stories.mdx --->
 
 <Meta
   title='MyComponent'
diff --git a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx b/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
index 9ac2af1f55b0..b684dc7cd3d8 100644
--- a/docs/snippets/common/component-story-mdx-dedent.mdx.mdx
+++ b/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';
 
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
+<!--- 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
 
diff --git a/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx b/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx
index f145cee10c1b..fe6042c849d2 100644
--- a/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx
+++ b/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';
 
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
+<!-- Button.stories.mdx --->
+
+<!--- This is your Story template function, shown here in React -->
+
 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
+<!-- MyComponent.stories.mdx --->
+
+<!--- This is your Story template function, shown here in React -->
+
 import { Canvas } from '@storybook/addon-docs/blocks';
 
 export const Template = (args) => <Badge {...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
+<!-- MyComponent.stories.mdx --->
+
 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:
 
-<!-- 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.
 

From 5bddd6fd3a5071455f7328823a2911574d987826 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 11 Aug 2020 02:54:32 +0100
Subject: [PATCH 2/2] updates per feedback

---
 docs/snippets/common/badge-story.mdx.mdx                      | 4 +++-
 docs/snippets/common/checkbox-story.mdx.mdx                   | 4 +++-
 .../snippets/common/component-story-mdx-story-by-name.mdx.mdx | 4 ++--
 docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx      | 4 ++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/snippets/common/badge-story.mdx.mdx b/docs/snippets/common/badge-story.mdx.mdx
index 403d3d842af8..3d9fe4de6236 100644
--- a/docs/snippets/common/badge-story.mdx.mdx
+++ b/docs/snippets/common/badge-story.mdx.mdx
@@ -2,7 +2,7 @@
 
 <!---Badge.stories.mdx --->
 
-<!--- This is your Story template function, shown here in React -->
+
 
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 
@@ -11,6 +11,8 @@ 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
diff --git a/docs/snippets/common/checkbox-story.mdx.mdx b/docs/snippets/common/checkbox-story.mdx.mdx
index 95a295de9adf..ae727730e1ac 100644
--- a/docs/snippets/common/checkbox-story.mdx.mdx
+++ b/docs/snippets/common/checkbox-story.mdx.mdx
@@ -1,7 +1,7 @@
 ```md
 <!--- Checkbox.stories.mdx -->
 
-<!--- This is your Story template function, shown here in React -->
+
 
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { Checkbox } from './Checkbox';
@@ -13,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>
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 72e47b838b9a..af1b3abb6040 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,11 +1,11 @@
 ```md
 <!-- Button.stories.mdx --->
 
-<!--- This is your Story template function, shown here in React -->
-
 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’ }}>
diff --git a/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx
index 03b47e664a18..ed754c143c5f 100644
--- a/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx
+++ b/docs/snippets/common/mdx-canvas-multiple-stories.mdx.mdx
@@ -1,10 +1,10 @@
 ```md
 <!-- MyComponent.stories.mdx --->
 
-<!--- This is your Story template function, shown here in React -->
-
 import { Canvas } from '@storybook/addon-docs/blocks';
 
+<!--- This is your Story template function, shown here in React -->
+
 export const Template = (args) => <Badge {...args } />;
 
 <Canvas>