feat: add stories loader

.storybook/main.js

@@ -1,4 +1,7 @@
 const path = require('path');
+const storyStorePlugin = require('@component-controls/loader/plugin');
+const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
+
 module.exports = {
   presets:[
     {
@@ -22,12 +25,31 @@ module.exports = {
   addons: [
     '@storybook/addon-docs',
     'storybook-addon-deps',
-    '@storybook/addon-storysource',
   ],
-  webpackFinal: async (config, { configType }) => ({
+  webpackFinal: async (config, { configType }) => {
+    return {
     ...config,
     module: {
       ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.(story|stories).(js|jsx|ts|tsx)$/,
+          loader: "@component-controls/loader/loader",
+          exclude: [/node_modules/],
+          enforce: 'pre',
+          options: {
+            type: 'csf'
+          },
+        },
+        {
+          test: /\.(story|stories).(mdx)$/,
+          loader: "@component-controls/loader/loader",
+          options: {
+            type: 'mdx'
+          },
+        },
+      ],
     },
     resolve: {
       ...config.resolve,
@@ -40,5 +62,9 @@ module.exports = {
         "@emotion/styled": path.resolve(path.resolve(__dirname, '..'), "node_modules", "@emotion", "styled"),
       }}
     },
-  }),
+    plugins: [
+      new storyStorePlugin(),
+      ...config.plugins,
+    ]
+  }},
 };

core/instrument/package.json

@@ -40,13 +40,17 @@
   },
   "devDependencies": {
     "@babel/types": "^7.8.3",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "@types/jest": "^25.1.2",
     "cross-env": "^5.2.1",
     "docz-rollup": "^2.1.0",
     "eslint": "^6.5.1",
     "eslint-config-docz-ts": "^2.1.0",
     "jest": "^24.9.0"
   },
+  "browser": {
+    "fs": false
+  },
   "jest": {
     "testEnvironment": "node",
     "roots": [

core/instrument/rollup.config.js

@@ -1,5 +1,11 @@
 import { config } from 'docz-rollup';
+import resolve from '@rollup/plugin-node-resolve';
 
 export default config({
   input: ['./src/index.ts'],
+  plugins: [
+    resolve({
+      preferBuiltins: false,
+    }),
+  ],
 });

core/instrument/src/babel/extract-properties.ts

@@ -35,7 +35,7 @@ export const extractProperties = (node: any): StoryParameters | undefined => {
               };
             }
             default:
-              console.log(property.value);
+              // console.log(property.value);
               return null;
           }
         }

core/instrument/src/index.ts

@@ -20,7 +20,7 @@ const parseSource = (source: string, traverseFn: TraverseFn): StoriesGroup => {
   return stories;
 };
 
-export const parseCSF = (source: string): StoriesGroup => {
+export const parseCSF = async (source: string): Promise<StoriesGroup> => {
   return parseSource(source, extractCSFStories);
 };
 

core/instrument/test/__snapshots__/csf-toggle.test.js.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-toggle Toggle story 1`] = `
+Object {
+  "properties": Array [
+    Object {
+      "loc": SourceLocation {
+        "end": Position {
+          "column": 32,
+          "line": 6,
+        },
+        "start": Position {
+          "column": 6,
+          "line": 6,
+        },
+      },
+      "name": "title",
+      "value": "Components/Toggle",
+    },
+    Object {
+      "loc": SourceLocation {
+        "end": Position {
+          "column": 23,
+          "line": 7,
+        },
+        "start": Position {
+          "column": 6,
+          "line": 7,
+        },
+      },
+      "name": "component",
+      "value": "Toggle",
+    },
+  ],
+  "stories": Object {
+    "allToggles": Object {
+      "arguments": Array [
+        Object {
+          "loc": Object {
+            "end": Object {
+              "column": 51,
+              "line": 15,
+            },
+            "start": Object {
+              "column": 46,
+              "line": 15,
+            },
+          },
+          "name": "check",
+          "value": "check",
+        },
+        Object {
+          "loc": Object {
+            "end": Object {
+              "column": 27,
+              "line": 24,
+            },
+            "start": Object {
+              "column": 22,
+              "line": 24,
+            },
+          },
+          "name": "check",
+          "value": "check",
+        },
+      ],
+      "name": "allToggles",
+      "source": Object {
+        "end": Object {
+          "column": 5,
+          "line": 29,
+        },
+        "start": Object {
+          "column": 36,
+          "line": 10,
+        },
+      },
+    },
+  },
+  "title": "Components/Toggle",
+}
+`;

core/instrument/test/csf-named-exports.test.js

@@ -1,9 +1,9 @@
 import { parseCSF } from '../src/index';
 
 describe('csf-named-exports', () => {
-  it('story propery name', () => {
+  it('story propery name', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
 const myStory = () => {};
 myStory.story = {
  name: 'Custom story name',
@@ -14,9 +14,9 @@ export { myStory }
     ).toMatchSnapshot();
   });
 
-  it('exported alias name', () => {
+  it('exported alias name', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
 const myStory = () => {};
 myStory.story = {
  name: 'Custom story name',
@@ -27,9 +27,9 @@ export { myStory as exportedStory}
     ).toMatchSnapshot();
   });
 
-  it('re-exported name', () => {
+  it('re-exported name', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
 import { myStory } from 'stories.tsx';
 myStory.story = {
   name: 'Custom story name',

core/instrument/test/csf-parameters.test.js

@@ -1,9 +1,9 @@
 import { parseCSF } from '../src/index';
 
 describe('csf-parameters', () => {
-  it('story propery name', () => {
+  it('story propery name', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
 export const myStory = () => {};
 myStory.story = {
  name: 'Custom story name',
@@ -13,9 +13,9 @@ myStory.story = {
     ).toMatchSnapshot();
   });
 
-  it('story propery name and parameters', () => {
+  it('story propery name and parameters', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
 export const myStory = () => {};
 myStory.story = {
   name: 'Custom story name',
@@ -31,9 +31,9 @@ myStory.story = {
     ).toMatchSnapshot();
   });
 
-  it('story propery name parameters and controls', () => {
+  it('story propery name parameters and controls', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
 export const myStory = () => {};
 myStory.story = {
   name: 'Custom story name',

core/instrument/test/csf-story-kind.test.js

@@ -1,36 +1,36 @@
 import { parseCSF } from '../src/index';
 
 describe('csf-story-kind', () => {
-  it('No default export', () => {
+  it('No default export', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
       export const myStory = () => {};
     `),
     ).toMatchSnapshot();
   });
 
-  it('default export - no title', () => {
+  it('default export - no title', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
       export default {
         test: 1,
       };
     `),
     ).toMatchSnapshot();
   });
-  it('default export - with title', () => {
+  it('default export - with title', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
         export default {
           title: 'Storybook/Blocks/ControlsEditorsTable',
         };
       `),
     ).toMatchSnapshot();
   });
 
-  it('default export - with title and parameters', () => {
+  it('default export - with title and parameters', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
         export default {
           title: 'Storybook/Blocks/ControlsEditorsTable',
           parameters: {
@@ -44,9 +44,9 @@ describe('csf-story-kind', () => {
     ).toMatchSnapshot();
   });
 
-  it('default export - with title and controls', () => {
+  it('default export - with title and controls', async () => {
     expect(
-      parseCSF(`
+      await parseCSF(`
       export default {
         title: 'Storybook/Kind',
         component: ControlsEditorsTable,

core/instrument/test/csf-toggle.test.js

@@ -0,0 +1,37 @@
+import { parseCSF } from '../src/index';
+
+describe('csf-toggle', () => {
+  it('Toggle story', async () => {
+    const stories = await parseCSF(`
+    import React from 'react';
+    import { Toggle } from './Toggle';
+    
+    export default {
+      title: 'Components/Toggle',
+      component: Toggle,
+    };
+    
+    export const allToggles = () => {
+      const [checked, setChecked] = React.useState(false);
+      return (
+        <div>
+          <p>Default toggle</p>
+          <Toggle checked={checked} onChange={check => setChecked(check)} />
+          <br />
+          <p>Custom labels</p>
+          <Toggle
+            checked={checked}
+            labels={{
+              true: 'YES',
+              false: 'NO!',
+            }}
+            onChange={check => setChecked(check)}
+          />
+          <br />
+        </div>
+      );
+    };      
+  `);
+    expect(stories).toMatchSnapshot();
+  });
+});