Support MDXv2

storybookjs · Jun 25, 2022 · 6ad5773 · 6ad5773
1 parent 7e5af52
commit 6ad5773
Show file tree

Hide file tree

Showing 12 changed files with 1,302 additions and 399 deletions.
diff --git a/examples/react-ts/stories/Introduction.stories.mdx b/examples/react-ts/stories/Introduction.stories.mdx
@@ -10,109 +10,109 @@ 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.js b/examples/react/.storybook/main.js
@@ -6,7 +6,8 @@ module.exports = {
     builder: '@storybook/builder-vite',
   },
   features: {
-    storyStoreV7: false,
+    storyStoreV7: true,
+    previewMdx2: true,
   },
   async viteFinal(config, { configType }) {
     // customize the Vite config here

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;
@@ -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/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.js b/examples/vue/.storybook/main.js
@@ -5,6 +5,9 @@ module.exports = {
   core: {
     builder: '@storybook/builder-vite',
   },
+  features: {
+    previewMdx2: true,
+  },
   async viteFinal(config, { configType }) {
     // customize the Vite config here
     return config;

diff --git a/examples/vue/stories/Introduction.stories.mdx b/examples/vue/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/packages/builder-vite/mdx-plugin.ts b/packages/builder-vite/mdx-plugin.ts
diff --git a/packages/builder-vite/optimizeDeps.ts b/packages/builder-vite/optimizeDeps.ts
@@ -68,6 +68,7 @@ const INCLUDE_CANDIDATES = [
   'react-is',
   'react-textarea-autosize',
   'react',
+  'react/jsx-runtime',
   'refractor/core',
   'refractor/lang/bash.js',
   'refractor/lang/css.js',

diff --git a/packages/builder-vite/package.json b/packages/builder-vite/package.json
@@ -14,8 +14,7 @@
   "homepage": "https://github.com/storybookjs/builder-vite/#readme",
   "dependencies": {
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.4",
-    "@mdx-js/mdx": "^1.6.22",
-    "@storybook/csf-tools": "^6.4.3",
+    "@storybook/mdx1-csf": "^0.0.4",
     "@storybook/source-loader": "^6.4.3",
     "@vitejs/plugin-react": "^1.0.8",
     "ast-types": "^0.14.2",
@@ -24,20 +23,26 @@
     "glob-promise": "^4.2.0",
     "magic-string": "^0.26.1",
     "react-docgen": "^6.0.0-alpha.0",
-    "slash": "^3.0.0",
-    "vite-plugin-mdx": "^3.5.6"
+    "slash": "^3.0.0"
   },
   "devDependencies": {
+    "@storybook/mdx2-csf": "^0.0.3",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.23",
     "vue-docgen-api": "^4.40.0"
   },
   "peerDependencies": {
     "@storybook/core-common": ">=6.4.3 || >=6.5.0-alpha.0",
+    "@storybook/mdx2-csf": "^0.0.3",
     "@storybook/node-logger": ">=6.4.3 || >=6.5.0-alpha.0",
     "@storybook/source-loader": ">=6.4.3 || >=6.5.0-alpha.0",
     "vite": ">=2.6.7"
   },
+  "peerDependenciesMeta": {
+    "@storybook/mdx2-csf": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   }