feat: instrument options in storybook addon

core/loader/src/loader.ts

@@ -9,16 +9,16 @@ import {
 
 import { addStoriesKind } from './store';
 
-module.exports.pitch = async function(
-  remRequest: string,
-  precRequest: string,
-  data: any,
-) {
+module.exports.pitch = async function() {
   const options: InstrumentOptions = getOptions(this) || {};
   const context = this as loader.LoaderContext;
   const filePath = this.resource;
   const source = fs.readFileSync(filePath, 'utf8');
-  const { transformed, ...store } = await parseStories(source, filePath, options);
+  const { transformed, ...store } = await parseStories(
+    source,
+    filePath,
+    options,
+  );
   if (store) {
     const relPath = path.relative(context.rootContext, filePath);
     const moduleId = relPath.startsWith('.') ? relPath : `./${relPath}`;

core/loader/src/plugin.ts

@@ -19,7 +19,7 @@ class StoriesInjectPlugin {
       },
     );
     nmrp.apply(compiler);
-  }  
+  }
 }
 
 module.exports = StoriesInjectPlugin;

core/store/README.md

@@ -6,6 +6,7 @@
     -   [Store](#store)
     -   [StoreOptions](#storeoptions)
     -   [store](#store-1)
+    -   [stores](#stores)
     -   [StoreObserver](#storeobserver)
 
 # Overview
@@ -63,7 +64,13 @@ _defined in [@component-controls/store/src/index.ts](https://github.com/ccontrol
 
 store variable, automatically filled with stories.
 
-_defined in [@component-controls/store/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/index.ts#L146)_
+_defined in [@component-controls/store/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/index.ts#L148)_
+
+
+
+## stores
+
+_defined in [@component-controls/store/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/index.ts#L150)_
 
 
 

examples/storybook-6/.storybook/main.js

@@ -15,9 +15,6 @@ module.exports = {
         tsLoaderOptions: {
           configFile: path.resolve(__dirname, '../tsconfig.json'),
         },
-        forkTsCheckerWebpackPluginOptions: {
-          colors: false, // disables built-in colors in logger messages
-        },
         include: [path.resolve('../../stries/src')],
       },
     },
@@ -27,51 +24,30 @@ module.exports = {
         configureJSX: true,
       },
     },
-    '@component-controls/storybook',
-  ],
-  webpackFinal: async (config, { configType }) => {
-    return {
-    ...config,
-    module: {
-      ...config.module,
-      rules: [
-        ...config.module.rules, 
-        {
-          test: /\.(story|stories).(js|jsx|ts|tsx|mdx)$/,
-          loader: "@component-controls/loader/loader",
-          exclude: [/node_modules/],
-          enforce: 'pre',
-          options: {
-            propsLoaders: [
-              { name: '@component-controls/react-docgen-info', test: /\.(js|jsx)$/},
-              { name: '@component-controls/react-docgen-typescript-info', test: /\.(ts|tsx)$/}
-            ],
-            prettier: {
-              tabWidth: 2,
-            },
-            components: {
-              storeSourceFile: true, //false
-              resolveFile: (componentName, filePath) => {
-                if (filePath.includes('/theme-ui/dist')) {
-                  return `${
-                    filePath.split('/theme-ui/dist')[0]
-                  }/@theme-ui/components/src/${componentName}.js`;
-                } else if (filePath.includes('@component-controls/storybook/dist')) {
-                  return path.resolve(path.dirname(filePath), `../src/blocks/${componentName}.tsx`)
-                }
-                return filePath;
-              },
-            },
-            stories: {
-              storeSourceFile: true, //false
+    { 
+      name: '@component-controls/storybook',
+      options: {
+        loader: {
+          components: {
+            storeSourceFile: true, //false
+            resolveFile: (componentName, filePath) => {
+              if (filePath.includes('/theme-ui/dist')) {
+                return `${
+                  filePath.split('/theme-ui/dist')[0]
+                }/@theme-ui/components/src/${componentName}.js`;
+              } else if (
+                filePath.includes('@component-controls/storybook/dist')
+              ) {
+                return path.resolve(
+                  path.dirname(filePath),
+                  `../src/blocks/${componentName}.tsx`,
+                );
+              }
+              return filePath;
             },
           },
-        },
-      ],
-    },
-    resolve: {
-      ...config.resolve,
-      extensions: [...(config.resolve.extensions || []), '.ts', '.tsx'],
-    },
-  }},
+        }
+      }
+    }  
+  ],
 };

examples/storybook-tutorial/.docs-only/main.js

@@ -11,9 +11,6 @@ module.exports = {
         tsLoaderOptions: {
           configFile: path.resolve(__dirname, '../tsconfig.json'),
         },
-        forkTsCheckerWebpackPluginOptions: {
-          colors: false, // disables built-in colors in logger messages
-        },
         include: [path.resolve('../../stries/src')],
       },
     },

integrations/storybook/README.md

@@ -25,6 +25,8 @@
     -   [**addonPanel** option](#addonpanel-option)
     -   [**docsPreview** option](#docspreview-option)
     -   [**docsProps** option](#docsprops-option)
+-   [Configuration options](#configuration-options)
+    -   [PresetOptions](#presetoptions)
 -   [List of components](#list-of-components)
     -   [<ins>ComponentSource</ins>](#inscomponentsourceins)
     -   [<ins>ControlsTable</ins>](#inscontrolstableins)
@@ -325,11 +327,11 @@ import { ControlsTable } from '@component-controls/storybook';
 
 ```
 
-# Options
+# Configuration options
 
-Addon Controls accepts several option parameters to customize the default functionality. By default, all the following options are enabled, so you only need a custom configuration if you need to disable a feature:
+The storybook controls addon accepts several option parameters to customize the default functionality.
 
-within `.storybook/main.js`:
+Example `.storybook/main.js`:
 
 ```js
   addons: [
@@ -338,41 +340,49 @@ within `.storybook/main.js`:
       name: '@component-controls/storybook',
       options: {
         addonPanel: false,
-        docsPreview: false,
-        docsProps: false,
-        smart: false,        
+        instrument: {
+          //instrumentation options
+          prettier: {
+            tabWidth: 2,
+          },
+          components: {
+            storeSourceFile: true, //false
+            resolveFile: (componentName, filePath) => {
+              if (filePath.includes('/theme-ui/dist')) {
+                return `${
+                  filePath.split('/theme-ui/dist')[0]
+                }/@theme-ui/components/src/${componentName}.js`;
+              }
+              return filePath;
+            },
+          },
+          stories: {
+            storeSourceFile: true, //false
+          },
+        }
       },
     },
   ],
 ```
 
-## **smart** option
-
-Setting this option to `false` will disable auto-generating of controls for stories with a component assigned.
-
-## **addonPanel** option
+<tsdoc-typescript entry="./src/types.ts" map="InstrumentOptions|../../core/instrument/README.md#instrumentoptions"/>
 
-Setting this option to `false` will disable showing the Controls panel in the addons section within the Storybook Canvas page:
+<!-- START-TSDOC-TYPESCRIPT -->
 
-<p align="center">
-  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-addonPanel.jpg" alt="addon panel" width="428">
-</p>
+## PresetOptions
 
-## **docsPreview** option
+_defined in [@component-controls/storybook/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/types.ts#L3)_
 
-Setting this option to `false` will disable showing an additional tab and panel with Controls in the `<Preview />` component within the Storybopok DocsPage:
 
-<p align="center">
-  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-docsPreview.jpg" alt="docs preview addon" width="428">
-</p>
 
-## **docsProps** option
+### properties
 
-Setting this option to `false` will disable showing an additional columns with Controls in the `<Props />` component within the Storybopok DocsPage:
+| Name         | Type                                                                   | Description                                      |
+| ------------ | ---------------------------------------------------------------------- | ------------------------------------------------ |
+| `addonPanel` | boolean                                                                | whether to display the addon panel in storybook  |
+| `instrument` | [InstrumentOptions](../../core/instrument/README.md#instrumentoptions) | options that will be passed to the instrumenter. |
 
-<p align="center">
-  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-docsProps.jpg" alt="docs preview addon" width="428">
-</p>
+<!-- END-TSDOC-TYPESCRIPT -->
 
 # List of components
 

integrations/storybook/package.json

@@ -43,6 +43,7 @@
     "broadcast-channel": "^3.1.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
+    "deepmerge": "^4.2.2",
     "polished": "^3.4.4",
     "react": "^16.12.0",
     "typescript": "^3.8.3"

integrations/storybook/src/preset.ts

@@ -1,8 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const storyStorePlugin = require('@component-controls/loader/plugin');
+const merge = require('deepmerge');
+import { PresetOptions } from './types';
 
 module.exports = {
-  config: (entry: any[] = [], options: any = {}) => {
+  config: (entry: any[] = [], options: PresetOptions = {}) => {
     const result = [...entry];
     result.push(require.resolve('./config'));
     return result;
@@ -24,18 +26,46 @@ module.exports = {
     }
     return [];
   },
-  managerEntries: (entry: any[] = [], options: any = {}) => {
+  managerEntries: (entry: any[] = [], options: PresetOptions = {}) => {
     const result = [...entry];
     const { addonPanel = true } = options;
     if (addonPanel) {
       result.push(require.resolve('./register-panel'));
     }
     return result;
   },
-  webpack: (webpackConfig: any = {}, options: any = {}) => {
+  webpackFinal: (config: any = {}, options: PresetOptions = {}) => {
     const result = {
-      ...webpackConfig,
-      plugins: [new storyStorePlugin(), ...webpackConfig.plugins],
+      ...config,
+      module: {
+        ...config.module,
+        rules: [
+          ...config.module.rules,
+          {
+            test: /\.(story|stories).(js|jsx|ts|tsx|mdx)$/,
+            loader: '@component-controls/loader/loader',
+            exclude: [/node_modules/],
+            enforce: 'pre',
+            options: merge(
+              {
+                propsLoaders: [
+                  {
+                    name: '@component-controls/react-docgen-info',
+                    test: /\.(js|jsx)$/,
+                  },
+                  {
+                    name: '@component-controls/react-docgen-typescript-info',
+                    test: /\.(ts|tsx)$/,
+                  },
+                  ,
+                ],
+              },
+              options?.instrument || {},
+            ),
+          },
+        ],
+      },
+      plugins: [new storyStorePlugin(), ...config.plugins],
     };
     return result;
   },

integrations/storybook/src/types.ts

@@ -0,0 +1,12 @@
+import { InstrumentOptions } from '@component-controls/instrument';
+
+export interface PresetOptions {
+  /**
+   * whether to display the addon panel in storybook
+   */
+  addonPanel?: boolean;
+  /**
+   * options that will be passed to the instrumenter.
+   */
+  instrument?: InstrumentOptions;
+}

misc/storybook-custom-docs/README.md

@@ -14,6 +14,7 @@
     -   [CustomPageRenderFn](#custompagerenderfn)
     -   [CustomPageRenderFnParams](#custompagerenderfnparams)
     -   [getContext](#getcontext)
+    -   [getCurrentStoryId](#getcurrentstoryid)
     -   [useStoryId](#usestoryid)
 
 # In action
@@ -149,19 +150,20 @@ _defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://gi
 
 **function** getContext(): any;
 
-## useStoryId
+## getCurrentStoryId
 
-React hook hook that tracks the changes to the current story and returns it's id
+function returning the current story id
+
+_defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs/src/index.tsx#L42)_
 
-_defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs/src/index.tsx#L43)_
+**function** getCurrentStoryId(): string | undefined;
 
-**function** useStoryId(`defaultId`\*: string): string;
+## useStoryId
+
+React hook hook that tracks the changes to the current story and returns it's id
 
-### parameters
+_defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs/src/index.tsx#L57)_
 
-| Name         | Type   | Description                                                                     |
-| ------------ | ------ | ------------------------------------------------------------------------------- |
-| `defaultId*` | string | initial story value, if not provided will return the current story              |
-| `returns`    | string | a story id as a React hook, when the the current story changes, will call back  |
+**function** useStoryId(): string;
 
 <!-- END-TSDOC-TYPESCRIPT -->