shilman · January 29, 2025 02:47 · Apr 21, 2020 · Apr 21, 2020 · Apr 14, 2020 · Mar 6, 2020
diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -54,7 +54,7 @@ module.exports = ["@storybook/preset-create-react-app", ...];
 yarn storybook
 ```
 
-Then edit button caption in `./src/stories/1-Button.stories.tsx` and verify that the story updates in Storybook.
+Then edit the button label in `./src/stories/1-Button.stories.tsx` and verify that the story updates in Storybook.
 
 Also verify that there's a `Docs` tab, and that it shows something reasonable-ish. We'll make it better in the next step.
 

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -26,8 +26,6 @@ yarn add @storybook/addon-docs --dev
 Then edit `./.storybook/main.js`:
 
 ```js
-const path = require("path");
-
 module.exports = {
   stories: ["../src/stories/**/*.stories.(ts|tsx|js|jsx)"],
   addons: [
@@ -37,10 +35,10 @@ module.exports = {
     {
       name: "@storybook/addon-docs",
       options: {
-        configureJSX: true
-      }
-    }
-  ]
+        configureJSX: true,
+      },
+    },
+  ],
 };
 ```
 
@@ -96,7 +94,7 @@ You already installed docs in Step 3, but now you need to tell Storybook to load
 
 ```js
 module.exports = {
-  stories: ["../src/stories/**/*.stories.(ts|tsx|js|jsx|mdx)"]
+  stories: ["../src/stories/**/*.stories.(ts|tsx|js|jsx|mdx)"],
   // more settings ...
 };
 ```

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -7,7 +7,7 @@ The purpose of this walkthrough is a streamlined Typescript / Docs setup that wo
 ## Step 1: Initialize CRA w/ TS
 
 ```sh
-npx create-react-app cra-ts --typescript
+npx create-react-app cra-ts --template typescript
 ```
 
 ## Step 2: Initialize Storybook w/ TS

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -65,14 +65,16 @@ Also verify that there's a `Docs` tab, and that it shows something reasonable-is
 Storybook can't load docgen information from pre-built libraries, so to test that aspect out, create a file `./src/stories/Button.tsx`:
 
 ```tsx
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
+
+type ButtonProps = {
+  children: ReactNode;
 
-interface ButtonProps {
   /**
    * Simple click handler
    */
   onClick?: () => void;
-}
+};
 
 /**
  * The world's most _basic_ button

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -77,7 +77,7 @@ interface ButtonProps {
 /**
  * The world's most _basic_ button
  */
-export const Button: FC<ButtonProps> = ({ children, onClick }) => (
+export const Button: FC<ButtonProps> = ({ children, onClick }: ButtonProps) => (
   <button onClick={onClick} type="button">
     {children}
   </button>

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -33,14 +33,7 @@ module.exports = {
   addons: [
     "@storybook/addon-actions",
     "@storybook/addon-links",
-    {
-      name: "@storybook/preset-create-react-app",
-      options: {
-        tsDocgenLoaderOptions: {
-          tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
-        }
-      }
-    },
+    "@storybook/preset-create-react-app",
     {
       name: "@storybook/addon-docs",
       options: {
@@ -54,7 +47,7 @@ module.exports = {
 > NOTE: If you're using an older version of Storybook or otherwise prefer `.storybook/presets.js`, you can use export the value of `presets` from the above example instead:
 
 ```js
-module.exports = [{ name: "@storybook/preset-create-react-app", ... }, ...];
+module.exports = ["@storybook/preset-create-react-app", ...];
 ```
 
 ## Step 4: Verify Installation

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -14,13 +14,13 @@ npx create-react-app cra-ts --typescript
 
 ```sh
 cd cra-ts
-npx -p @storybook/cli@next sb init --story-format=csf-ts
+npx -p @storybook/cli sb init --story-format=csf-ts
 ```
 
 ## Step 3: Install & Configure Docs
 
 ```sh
-yarn add @storybook/addon-docs@next --dev
+yarn add @storybook/addon-docs --dev
 ```
 
 Then edit `./.storybook/main.js`:

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -31,10 +31,8 @@ const path = require("path");
 module.exports = {
   stories: ["../src/stories/**/*.stories.(ts|tsx|js|jsx)"],
   addons: [
-    "@storybook/addon-actions/register",
-    "@storybook/addon-links/register"
-  ],
-  presets: [
+    "@storybook/addon-actions",
+    "@storybook/addon-links",
     {
       name: "@storybook/preset-create-react-app",
       options: {
@@ -44,7 +42,7 @@ module.exports = {
       }
     },
     {
-      name: "@storybook/addon-docs/preset",
+      name: "@storybook/addon-docs",
       options: {
         configureJSX: true
       }

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -53,7 +53,11 @@ module.exports = {
 };
 ```
 
-> NOTE: If you're using an older version of Storybook or otherwise prefer `.storybook/presets.js`, you can use export the value of `presets` from the above example instead.
+> NOTE: If you're using an older version of Storybook or otherwise prefer `.storybook/presets.js`, you can use export the value of `presets` from the above example instead:
+
+```js
+module.exports = [{ name: "@storybook/preset-create-react-app", ... }, ...];
+```
 
 ## Step 4: Verify Installation
 

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -95,7 +95,7 @@ Then update `./src/stories/1-Button.stories.tsx` to import this button instead o
 
 Finally, test that MDX is working.
 
-You already installed docs in Step 3, but now you need to tell Storybook to load `.stories.mdx` files by editing
+You already installed docs in Step 3, but now you need to tell Storybook to load `.stories.mdx` files by editing `.storybook/main.js`:
 
 ```js
 module.exports = {

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -23,29 +23,38 @@ npx -p @storybook/cli@next sb init --story-format=csf-ts
 yarn add @storybook/addon-docs@next --dev
 ```
 
-Then edit `./.storybook/presets.js`:
+Then edit `./.storybook/main.js`:
 
 ```js
 const path = require("path");
 
-module.exports = [
-  {
-    name: "@storybook/preset-create-react-app",
-    options: {
-      tsDocgenLoaderOptions: {
-        tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
+module.exports = {
+  stories: ["../src/stories/**/*.stories.(ts|tsx|js|jsx)"],
+  addons: [
+    "@storybook/addon-actions/register",
+    "@storybook/addon-links/register"
+  ],
+  presets: [
+    {
+      name: "@storybook/preset-create-react-app",
+      options: {
+        tsDocgenLoaderOptions: {
+          tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
+        }
+      }
+    },
+    {
+      name: "@storybook/addon-docs/preset",
+      options: {
+        configureJSX: true
       }
     }
-  },
-  {
-    name: "@storybook/addon-docs/preset",
-    options: {
-      configureJSX: true,
-    }
-  }
-];
+  ]
+};
 ```
 
+> NOTE: If you're using an older version of Storybook or otherwise prefer `.storybook/presets.js`, you can use export the value of `presets` from the above example instead.
+
 ## Step 4: Verify Installation
 
 ```sh
@@ -86,15 +95,13 @@ Then update `./src/stories/1-Button.stories.tsx` to import this button instead o
 
 Finally, test that MDX is working.
 
-You already installed docs in Step 3, but now you need to tell Storybook to load `.stories.mdx` files by editing `.storybook/config.ts`:
+You already installed docs in Step 3, but now you need to tell Storybook to load `.stories.mdx` files by editing
 
 ```js
-import { configure } from "@storybook/react";
-
-configure(
-  require.context("../src/stories", true, /\.stories\.(mdx|[tj]sx?)$/),
-  module
-);
+module.exports = {
+  stories: ["../src/stories/**/*.stories.(ts|tsx|js|jsx|mdx)"]
+  // more settings ...
+};
 ```
 
 Then create `./src/stories/Test.stories.mdx`:
@@ -122,6 +129,17 @@ Here's some _markdown_!
 
 You should see a new entry in your Storybook's navigation, a story, and the documentation you wrote in the `Docs` tab.
 
+> NOTE: If you're using an older version of Storybook or otherwise prefer `.storybook/config.[jt]s`, you can add the stories to your configure statement:
+
+```js
+import { configure } from "@storybook/react";
+
+configure(
+  require.context("../src/stories", true, /\.stories\.(mdx|[tj]sx?)$/),
+  module
+);
+```
+
 ## Notes
 
 The `sourceLoaderOptions: null` in `Step 3` is covering up Storybook issue #7829: [Addon-docs: Typescript source support](https://github.com/storybookjs/storybook/issues/7829). I'll fix that issue ASAP to complete the walkthrough and update this gist when it's ready.
diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -14,13 +14,13 @@ npx create-react-app cra-ts --typescript
 
 ```sh
 cd cra-ts
-npx -p @storybook/cli@5.3.0-beta.15 sb init --story-format=csf-ts
+npx -p @storybook/cli@next sb init --story-format=csf-ts
 ```
 
 ## Step 3: Install & Configure Docs
 
 ```sh
-yarn add @storybook/addon-docs --dev
+yarn add @storybook/addon-docs@next --dev
 ```
 
 Then edit `./.storybook/presets.js`:

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -20,7 +20,7 @@ npx -p @storybook/cli@5.3.0-beta.15 sb init --story-format=csf-ts
 ## Step 3: Install & Configure Docs
 
 ```sh
-yarn add @storybook/addon-docs@5.3.0-beta.15 --dev
+yarn add @storybook/addon-docs --dev
 ```
 
 Then edit `./.storybook/presets.js`:

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -14,13 +14,13 @@ npx create-react-app cra-ts --typescript
 
 ```sh
 cd cra-ts
-npx -p @storybook/cli@next sb init --story-format=csf-ts
+npx -p @storybook/cli@5.3.0-beta.15 sb init --story-format=csf-ts
 ```
 
 ## Step 3: Install & Configure Docs
 
 ```sh
-yarn add @storybook/addon-docs@next --dev
+yarn add @storybook/addon-docs@5.3.0-beta.15 --dev
 ```
 
 Then edit `./.storybook/presets.js`:

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -38,10 +38,9 @@ module.exports = [
     }
   },
   {
-    name: "@storybook/addon-docs/react/preset",
+    name: "@storybook/addon-docs/preset",
     options: {
       configureJSX: true,
-      sourceLoaderOptions: null
     }
   }
 ];

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -98,6 +98,31 @@ configure(
 );
 ```
 
+Then create `./src/stories/Test.stories.mdx`:
+
+```
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { Button } from "./Button";
+
+<Meta title="Test" />
+
+Here's some _markdown_!
+
+# Preview
+
+<Preview>
+  <Story name="button">
+    <Button>hello</Button>
+  </Story>
+</Preview>
+
+# Props
+
+<Props of={Button} />
+```
+
+You should see a new entry in your Storybook's navigation, a story, and the documentation you wrote in the `Docs` tab.
+
 ## Notes
 
 The `sourceLoaderOptions: null` in `Step 3` is covering up Storybook issue #7829: [Addon-docs: Typescript source support](https://github.com/storybookjs/storybook/issues/7829). I'll fix that issue ASAP to complete the walkthrough and update this gist when it's ready.
diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -90,6 +90,8 @@ Finally, test that MDX is working.
 You already installed docs in Step 3, but now you need to tell Storybook to load `.stories.mdx` files by editing `.storybook/config.ts`:
 
 ```js
+import { configure } from "@storybook/react";
+
 configure(
   require.context("../src/stories", true, /\.stories\.(mdx|[tj]sx?)$/),
   module

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -83,6 +83,19 @@ export const Button: FC<ButtonProps> = ({ children, onClick }) => (
 
 Then update `./src/stories/1-Button.stories.tsx` to import this button instead of the `@storybook/react` demo button. You should see the props update and also the component documentation show up on the `Docs` tab.
 
+## Step 6: Test MDX
+
+Finally, test that MDX is working.
+
+You already installed docs in Step 3, but now you need to tell Storybook to load `.stories.mdx` files by editing `.storybook/config.ts`:
+
+```js
+configure(
+  require.context("../src/stories", true, /\.stories\.(mdx|[tj]sx?)$/),
+  module
+);
+```
+
 ## Notes
 
 The `sourceLoaderOptions: null` in `Step 3` is covering up Storybook issue #7829: [Addon-docs: Typescript source support](https://github.com/storybookjs/storybook/issues/7829). I'll fix that issue ASAP to complete the walkthrough and update this gist when it's ready.
diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -55,7 +55,7 @@ yarn storybook
 
 Then edit button caption in `./src/stories/1-Button.stories.tsx` and verify that the story updates in Storybook.
 
-Also verify that there's a `Docs` tab, and that it shows something reasonable-ish. We'll make it better in the next st4ep.
+Also verify that there's a `Docs` tab, and that it shows something reasonable-ish. We'll make it better in the next step.
 
 ## Step 5: Test Props
 

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -53,7 +53,9 @@ module.exports = [
 yarn storybook
 ```
 
-Then edit button caption in `./src/stories/1-Button.stories.tsx` and verify that SB updates
+Then edit button caption in `./src/stories/1-Button.stories.tsx` and verify that the story updates in Storybook.
+
+Also verify that there's a `Docs` tab, and that it shows something reasonable-ish. We'll make it better in the next st4ep.
 
 ## Step 5: Test Props
 

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -79,7 +79,7 @@ export const Button: FC<ButtonProps> = ({ children, onClick }) => (
 );
 ```
 
-Then update `./src/stories/1-Button.stories.tsx` to import this button instead of the `@storybook/react` demo button. You should see the props update and also the component documentation show up on the docs tab.
+Then update `./src/stories/1-Button.stories.tsx` to import this button instead of the `@storybook/react` demo button. You should see the props update and also the component documentation show up on the `Docs` tab.
 
 ## Notes
 

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -79,7 +79,7 @@ export const Button: FC<ButtonProps> = ({ children, onClick }) => (
 );
 ```
 
-Then update `./src/stories/1-Button.stories.tsx` to import this button instead of the `@storybook/react` demo button.
+Then update `./src/stories/1-Button.stories.tsx` to import this button instead of the `@storybook/react` demo button. You should see the props update and also the component documentation show up on the docs tab.
 
 ## Notes
 

diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -83,4 +83,4 @@ Then update `./src/stories/1-Button.stories.tsx` to import this button instead o
 
 ## Notes
 
-The `sourceLoaderOptions: null` in `Step 3` is covering up Storybook issue #7829: [Addon-docs: Typescript source support](https://github.com/storybookjs/storybook/issues/7829)
+The `sourceLoaderOptions: null` in `Step 3` is covering up Storybook issue #7829: [Addon-docs: Typescript source support](https://github.com/storybookjs/storybook/issues/7829). I'll fix that issue ASAP to complete the walkthrough and update this gist when it's ready.
diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -83,4 +83,4 @@ Then update `./src/stories/1-Button.stories.tsx` to import this button instead o
 
 ## Notes
 
-The `sourceLoaderOptions: null` in `Step 3` is covering up a
+The `sourceLoaderOptions: null` in `Step 3` is covering up Storybook issue #7829: [Addon-docs: Typescript source support](https://github.com/storybookjs/storybook/issues/7829)
diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -79,6 +79,8 @@ export const Button: FC<ButtonProps> = ({ children, onClick }) => (
 );
 ```
 
+Then update `./src/stories/1-Button.stories.tsx` to import this button instead of the `@storybook/react` demo button.
+
 ## Notes
 
 The `sourceLoaderOptions: null` in `Step 3` is covering up a
diff --git a/storybook-docs-typescript-walkthrough.md b/storybook-docs-typescript-walkthrough.md
@@ -57,7 +57,7 @@ Then edit button caption in `./src/stories/1-Button.stories.tsx` and verify that
 
 ## Step 5: Test Props
 
-Storybook can't load docgen information reate a file `./src/stories/Button.tsx`:
+Storybook can't load docgen information from pre-built libraries, so to test that aspect out, create a file `./src/stories/Button.tsx`:
 
 ```tsx
 import React, { FC } from "react";