Support MDXv2 (#377)

Fixes #234 Fixes #391 Fixes #398 To enable experimental MDX2 in a project, follow this guide: https://gist.github.com/shilman/6ff2d7e18db8846e8fc552fb432ae4f6 * Support MDXv2 * Fix formatting * Remove explicit mdx-js/preact from example * Remove workarounds from readme * Add @storybook/mdx2-csf to examples using it Co-authored-by: Ian VanSchooten <ian.vanschooten@gmail.com>
storybookjs · Jun 29, 2022 · 345b942 · 345b942
1 parent 26dd5a1
commit 345b942
Show file tree

Hide file tree

Showing 22 changed files with 3,379 additions and 1,570 deletions.
diff --git a/examples/lit-ts/stories/Introduction.stories.mdx b/examples/lit-ts/stories/Introduction.stories.mdx
@@ -10,7 +10,8 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Example/Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -73,7 +74,7 @@ import StackAlt from './assets/stackalt.svg';
     display: block;
     margin-bottom: 2px;
   }
-  
+
   .link-item img {
     height: 40px;
     width: 40px;
@@ -111,8 +112,9 @@ import StackAlt from './assets/stackalt.svg';
     display: inline-block;
   }
 
-  
-`}</style>
+
+`}
+</style>
 
 # Welcome to Storybook
 

diff --git a/examples/preact/package.json b/examples/preact/package.json
@@ -17,7 +17,6 @@
     "preact": "^10.5.15"
   },
   "devDependencies": {
-    "@mdx-js/preact": "1",
     "@preact/preset-vite": "^2.1.5",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/builder-vite": "workspace:*",

diff --git a/examples/preact/stories/Introduction.stories.mdx b/examples/preact/stories/Introduction.stories.mdx
@@ -10,7 +10,8 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -73,7 +74,7 @@ import StackAlt from './assets/stackalt.svg';
     display: block;
     margin-bottom: 2px;
   }
-  
+
   .link-item img {
     height: 40px;
     width: 40px;
@@ -111,8 +112,9 @@ import StackAlt from './assets/stackalt.svg';
     display: inline-block;
   }
 
-  
-`}</style>
+
+`}
+</style>
 
 # Welcome to Storybook
 

diff --git a/examples/react-18/stories/Introduction.stories.mdx b/examples/react-18/stories/Introduction.stories.mdx
@@ -10,7 +10,8 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -73,7 +74,7 @@ import StackAlt from './assets/stackalt.svg';
     display: block;
     margin-bottom: 2px;
   }
-  
+
   .link-item img {
     height: 40px;
     width: 40px;
@@ -111,8 +112,9 @@ import StackAlt from './assets/stackalt.svg';
     display: inline-block;
   }
 
-  
-`}</style>
+
+`}
+</style>
 
 # Welcome to Storybook
 

diff --git a/examples/react-ts/stories/Introduction.stories.mdx b/examples/react-ts/stories/Introduction.stories.mdx
@@ -10,109 +10,111 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Introduction" />
 
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
     }
-  }
 
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-`}</style>
+      .link-list {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+        row-gap: 10px;
+      }
+
+      @media (min-width: 620px) {
+        .link-list {
+          row-gap: 20px;
+          column-gap: 20px;
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+
+      @media all and (-ms-high-contrast:none) {
+      .link-list {
+          display: -ms-grid;
+          -ms-grid-columns: 1fr 1fr;
+          -ms-grid-rows: 1fr 1fr;
+        }
+      }
+
+      .link-item {
+        display: block;
+        padding: 20px 30px 20px 15px;
+        border: 1px solid #00000010;
+        border-radius: 5px;
+        transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+        color: #333333;
+        display: flex;
+        align-items: flex-start;
+      }
+
+      .link-item:hover {
+        border-color: #1EA7FD50;
+        transform: translate3d(0, -3px, 0);
+        box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+      }
+
+      .link-item:active {
+        border-color: #1EA7FD;
+        transform: translate3d(0, 0, 0);
+      }
+
+      .link-item strong {
+        font-weight: 700;
+        display: block;
+        margin-bottom: 2px;
+      }
+
+      .link-item img {
+        height: 40px;
+        width: 40px;
+        margin-right: 15px;
+        flex: none;
+      }
+
+      .link-item span {
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      .tip {
+        display: inline-block;
+        border-radius: 1em;
+        font-size: 11px;
+        line-height: 12px;
+        font-weight: 700;
+        background: #E7FDD8;
+        color: #66BF3C;
+        padding: 4px 12px;
+        margin-right: 10px;
+        vertical-align: top;
+      }
+
+      .tip-wrapper {
+        font-size: 13px;
+        line-height: 20px;
+        margin-top: 40px;
+        margin-bottom: 40px;
+      }
+
+      .tip-wrapper code {
+        font-size: 12px;
+        display: inline-block;
+      }
+
+
+`}
+</style>
 
 # Welcome to Storybook
 

diff --git a/examples/react/.storybook/main.ts b/examples/react/.storybook/main.ts
@@ -10,7 +10,8 @@ export default withOverview(__dirname)({
     disableTelemetry: true,
   },
   features: {
-    storyStoreV7: false,
+    storyStoreV7: true,
+    previewMdx2: true,
   },
   async viteFinal(config) {
     return config;

diff --git a/examples/react/README.md b/examples/react/README.md
@@ -5,3 +5,5 @@ This example demonstrates storybook in a React v16 project.
 It uses autotitle for some stories, but without a configuration object, a `titlePrefix` cannot be defined.
 
 This example also demonstrates global arg configuration in a v6 story store project.
+
+This example also demonstrates MDX2 support.
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -22,6 +22,7 @@
     "@storybook/addon-docs": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/builder-vite": "workspace:*",
+    "@storybook/mdx2-csf": "^0.0.3",
     "@storybook/react": "^6.5.9",
     "@storybook/test-runner": "0.1.0",
     "@vitejs/plugin-react": "^1.3.0",

diff --git a/examples/react/stories/Introduction-stories.mdx b/examples/react/stories/Introduction-stories.mdx
@@ -10,7 +10,8 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -112,7 +113,8 @@ import StackAlt from './assets/stackalt.svg';
   }
 
 
-`}</style>
+`}
+</style>
 
 # Welcome to Storybook
 

diff --git a/examples/svelte/stories/Introduction.stories.mdx b/examples/svelte/stories/Introduction.stories.mdx
@@ -10,7 +10,8 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -73,7 +74,7 @@ import StackAlt from './assets/stackalt.svg';
     display: block;
     margin-bottom: 2px;
   }
-  
+
   .link-item img {
     height: 40px;
     width: 40px;
@@ -111,8 +112,9 @@ import StackAlt from './assets/stackalt.svg';
     display: inline-block;
   }
 
-  
-`}</style>
+
+`}
+</style>
 
 # Welcome to Storybook
 

diff --git a/examples/vue/.storybook/main.ts b/examples/vue/.storybook/main.ts
@@ -7,6 +7,9 @@ export default {
     // we don't want to muck up the data when we're working on the builder
     disableTelemetry: true,
   },
+  features: {
+    previewMdx2: true,
+  },
   async viteFinal(config, { configType }) {
     // customize the Vite config here
     return config;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,5 @@ This example demonstrates storybook in a React v16 project.
		It uses autotitle for some stories, but without a configuration object, a `titlePrefix` cannot be defined.

		This example also demonstrates global arg configuration in a v6 story store project.

		This example also demonstrates MDX2 support.