fix: mdx inherit webpack config

ccontrols · Jun 26, 2020 · 74faadd · 74faadd
1 parent 5152a18
commit 74faadd
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 18 deletions.
diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts
@@ -47,25 +47,23 @@ export const react: Configuration = {
       {
         test: /\.(md|mdx)$/i,
         exclude: [/node_modules/],
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: [
-                [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
-                require.resolve('@babel/preset-react'),
-              ],
-            },
-          },
-          {
-            loader: '@component-controls/loader/loader',
-            options: {
-              mdx: {
-                transformMDX: true,
-              },
-            },
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
+            require.resolve('@babel/preset-react'),
+          ],
+        },
+      },
+      {
+        test: /\.(md|mdx)$/i,
+        exclude: [/node_modules/],
+        loader: '@component-controls/loader/loader',
+        options: {
+          mdx: {
+            transformMDX: true,
           },
-        ],
+        },
       },
       {
         test: /\.(story|stories|doc|docs).(js|jsx|ts|tsx)$/,

diff --git a/examples/gatsby/src/stories/smart-controls.stories.mdx b/examples/gatsby/src/stories/smart-controls.stories.mdx
@@ -0,0 +1,48 @@
+import { Meta} from '@component-controls/storybook';
+import { PropsTable, Playground, Story, ComponentSource, StorySource  } from '@component-controls/blocks';
+import { Button } from '../../../stories/src/components/Button';
+
+<Meta title="Introduction/MDX Smart" parameters={{component: Button}} />
+
+
+# Smart controls
+<ComponentSource of={Button} title='Component source' />
+
+<Story id="." />
+
+<StorySource id="." />
+
+<PropsTable of={Button} />
+
+
+<Playground>
+  <Story name="smart story">
+    {(props) => (
+      <Button label="default" {...props}/>
+    )}  
+  </Story>
+</Playground>
+
+
+# Small story with custom controls
+
+<Playground>
+  <Story name="small story" 
+    controls={{
+      text: {type: 'text', value: 'Hello'},
+    }}
+    >
+    {({ text }) => (
+      <Button label={text}/>
+    )}  
+  </Story>
+</Playground>
+
+# Story with no parameters == no smart controls
+
+<Playground>
+  <Story name="no controls">
+      <Button label="Hello"/>
+      <Button label="Second button"/>
+  </Story>
+</Playground>