fix: markdown domponents

core/instrument/package.json

@@ -43,6 +43,7 @@
     "gray-matter": "^4.0.2",
     "hosted-git-info": "^3.0.4",
     "js-string-escape": "^1.0.1",
+    "@mdx-js/react": "^1.6.5",
     "prettier": "^1.19.1",
     "read-package-json": "^2.1.1",
     "resolve": "^1.15.1",

core/instrument/src/index.ts

@@ -158,6 +158,7 @@ export const parseStories = async (
   } = mergedOptions.mdx;
   if (test && filePath.match(test)) {
     const { data, content } = matter(source);
+    debugger;
     const mdxParsed = await mdx(content, {
       filepath: filePath,
       ...otherMDXOptions,
@@ -176,7 +177,6 @@ export const parseStories = async (
       mergedOptions,
     );
     const { stories, doc, components, exports, packages } = store;
-    debugger;
     const exportsSource = extractStoryExports(exports);
     let transformed = `
     

core/instrument/src/types.ts

@@ -35,8 +35,8 @@ export const defaultParserOptions: ParserOptions = {
  * from https://github.com/mdx-js/mdx/blob/6251c5bb35aec5b6de85262a6a46fa1db496dd23/packages/loader/index.js#L4
  */
 export const DEFAULT_MDX_RENDERER = `
-import React from 'react'
-import { mdx } from '@mdx-js/react'
+import React from 'react';
+import { mdx } from '@mdx-js/react';
 `;
 
 export const defaultMDXOptions: MDXOptions = {

core/webpack-compile/src/index.ts

@@ -9,12 +9,14 @@ export const compile = ({
   webPack,
   presets,
   configPath,
+  bundleAnalyzer,
 }: CompileProps): Promise<CompileResults> => {
   return runCompiler((compiler, callback) => compiler.run(callback), {
     webPack,
     mode: 'production',
     presets,
     configPath,
+    bundleAnalyzer,
   });
 };
 
@@ -26,6 +28,7 @@ export const watch = ({
   webPack,
   presets,
   configPath,
+  bundleAnalyzer,
   watchOptions,
 }: WatchProps): Promise<CompileResults> => {
   return runCompiler(
@@ -35,6 +38,7 @@ export const watch = ({
       mode: 'development',
       presets,
       configPath,
+      bundleAnalyzer,
     },
   );
 };

core/webpack-compile/src/utilities.ts

@@ -71,13 +71,14 @@ const createConfig = ({
         '@component-controls/components': require.resolve(
           '@component-controls/components',
         ),
-
+        'broadcast-channel': require.resolve('broadcast-channel'),
         'theme-ui': require.resolve('theme-ui'),
         '@theme-ui/presets': require.resolve('@theme-ui/presets'),
         '@theme-ui/core': require.resolve('@theme-ui/core'),
         '@theme-ui/css': require.resolve('@theme-ui/css'),
 
         'prism-react-renderer': require.resolve('prism-react-renderer'),
+        'react-helmet': require.resolve('react-helmet'),
         'react-table': require.resolve('react-table'),
         'react-tabs': require.resolve('react-tabs'),
         'react-switch': require.resolve('react-switch'),
@@ -120,7 +121,10 @@ const createConfig = ({
       '@theme-ui/css': '@theme-ui/css',
       polished: 'polished',
       lodash: 'lodash',
+      'broadcast-channel': 'broadcast-channel',
+      'prism-react-renderer/themes': 'prism-react-renderer/themes',
       'prism-react-renderer': 'prism-react-renderer',
+      'react-helmet': 'react-helmet',
       'react-table': 'react-table',
       'react-tabs': 'react-tabs',
       'react-switch': 'react-switch',

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -19,6 +19,7 @@ exports.createPages = async (
     webPack: options.webpack,
     presets: defaultPresets,
     configPath: options.configPath,
+    // bundleAnalyzer: true,
   };
   const pageTemplates: Record<PageType, string> = {
     story: require.resolve(`../src/templates/DocPage.tsx`),

ui/blocks/src/test/storyStore.tsx

@@ -23,7 +23,7 @@ export const store: StoriesStore = {
         '@component-controls/editors': '^1.0.1',
         '@component-controls/specification': '^1.0.1',
         '@component-controls/store': '^1.0.3',
-        '@mdx-js/react': '^1.5.8',
+        '@mdx-js/react': '^1.6.5',
         '@primer/octicons-react': '^9.6.0',
         '@storybook/csf': '^0.0.1',
         'copy-to-clipboard': '^3.2.1',

ui/components/src/Markdown/MarkdownComponents.tsx

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { ComponentType } from 'react';
 import { jsx } from 'theme-ui';
+import { Label, Flex, Box, Heading, Button, Card } from 'theme-ui';
 import { Language } from 'prism-react-renderer';
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 import { Source } from '../Source';
@@ -52,4 +53,13 @@ export const markdownComponents: MarkdownComponentType = {
     const language = mdxLanguageMap[mdxLanguage] || mdxLanguage;
     return <Source language={language}>{children}</Source>;
   },
+  Box: props => {
+    console.log(props);
+    return <Box {...props} />;
+  },
+  Button: props => <Button {...props} />,
+  Card: props => <Card {...props} />,
+  Flex: ({ children, ...props }) => <Flex {...props}>{children}</Flex>,
+  Heading: props => <Heading {...props} />,
+  Label: props => <Label {...props} />,
 };

yarn.lock

@@ -2456,6 +2456,11 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.4.tgz#5e867921a1f0cfcf4ee756630115f1565845b628"
   integrity sha512-3SwDgbr2Fc3i5LrOQnahRUTvx0x/wRf+i8+fJM1caGTeq1XwVb6OHztJzaYt3DSizJVzRsBZznReY+l39up5Pg==
 
+"@mdx-js/react@^1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.5.tgz#70380f25209b62ef69349b7eef09fad7e1103824"
+  integrity sha512-y1Yu9baw3KokFrs7g5RxHpJNSU4e1zk/5bAJX94yVATglG5HyAL0lYMySU8YzebXNE+fJJMCx9CuiQHy2ezoew==
+
 "@mdx-js/runtime@^1.6.1":
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/@mdx-js/runtime/-/runtime-1.6.4.tgz#f4db488497a6b5c77549420d0b24eec6cfba7438"