feat: add smart controls

core/specification/src/components.ts

@@ -135,3 +135,14 @@ export interface StoryComponent {
    */
   info?: ComponentInfo;
 }
+/**
+ * given a component, return its name
+ * @param component a string component name, or a component class, with a name or displayName static property
+ */
+export const getComponentName = (component: any): string | undefined => {
+  return component
+    ? typeof component === 'string'
+      ? component
+      : component.name || component.displayName
+    : undefined;
+};

core/store/package.json

@@ -30,6 +30,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@component-controls/core": "^0.6.0",
     "@component-controls/loader": "^0.6.0",
     "@component-controls/specification": "^0.6.0",
     "@storybook/csf": "^0.0.1",

core/store/src/index.ts

@@ -37,13 +37,6 @@ class Store implements StoryStore {
     this.observers = [];
     this.channel.onmessage = ({ storyId, moduleId }: MessageType) => {
       if (storyId && moduleId) {
-        console.log(
-          'ON MESSAGE',
-          this.moduleId,
-          moduleId,
-          storyId,
-          this.moduleId !== moduleId,
-        );
         if (this.moduleId !== moduleId) {
           this.readData(storyId);
           this.notifyObservers(storyId);
@@ -63,7 +56,6 @@ class Store implements StoryStore {
   };
 
   setStore = (store?: StoriesStore) => {
-    console.log('SET STORE');
     this.loadedStore = store;
     this.notifyObservers();
   };

core/store/src/serialization/load-store.ts

@@ -4,6 +4,7 @@ import { StoriesStore, Story } from '@component-controls/specification';
 const deepMerge = require('deepmerge');
 import { toId, storyNameFromExport } from '@storybook/csf';
 import getInjectedStore from '@component-controls/loader/story-store-data';
+import { addSmartControls } from './smart-controls';
 
 let storyStore: StoriesStore | undefined = undefined;
 
@@ -74,6 +75,18 @@ export const loadStoryStore = (): StoriesStore | undefined => {
                   ...rest
                 } = kind;
                 Object.assign(story, deepMerge(rest, story));
+                const smartControls = addSmartControls(
+                  story,
+                  kind,
+                  store.components,
+                );
+                if (smartControls) {
+                  story.controls = deepMerge(
+                    smartControls,
+                    story.controls || {},
+                  );
+                }
+
                 if (kind.title && story.name) {
                   const id = toId(kind.title, storyNameFromExport(story.name));
                   if (!kind.stories) {

core/store/src/serialization/smart-controls.ts

@@ -0,0 +1,58 @@
+import {
+  ComponentControls,
+  Story,
+  StoriesKind,
+  StoryComponent,
+  getComponentName,
+} from '@component-controls/specification';
+import { controlsFromProps } from '@component-controls/core';
+
+export const addSmartControls = (
+  story: Story,
+  kind: StoriesKind,
+  components: { [key: string]: StoryComponent },
+): ComponentControls | null => {
+  if (!story.arguments || story.arguments.length < 1) {
+    //story has no arguments
+    return null;
+  }
+  const params = story.parameters || {};
+  const { addonControls = {} } = params;
+  const { smart: smartControls = true } = addonControls;
+  if (!smartControls) {
+    return null;
+  }
+  const storyComponent = story.component || params.component;
+  if (!storyComponent) {
+    return null;
+  }
+  const componentName = getComponentName(storyComponent);
+  if (componentName) {
+    const component = components[kind.components[componentName]];
+    if (component.info) {
+      const newControls = controlsFromProps(component.info.props);
+      const { include, exclude } = smartControls;
+      const usedProps: string[] | undefined = Array.isArray(
+        story.arguments[0].value,
+      )
+        ? story.arguments[0].value.map(v => v.name as string)
+        : undefined;
+      const controls = Object.keys(newControls)
+        .filter(key => {
+          if (Array.isArray(include) && !include.includes(key)) {
+            return false;
+          }
+          if (Array.isArray(exclude) && exclude.includes(key)) {
+            return false;
+          }
+          if (usedProps && !usedProps.includes(key)) {
+            return false;
+          }
+          return true;
+        })
+        .reduce((acc, key) => ({ ...acc, [key]: newControls[key] }), {});
+      return controls;
+    }
+  }
+  return null;
+};

integrations/storybook/src/page/DocsPage.tsx

@@ -5,7 +5,7 @@ import {
   Subtitle,
   Story,
   Playground,
-  // Stories,
+  Stories,
   Description,
   ComponentSource,
   PropsTable,
@@ -23,7 +23,7 @@ export const DocsPage: FC = () => {
       </Playground>
       <ControlsTable id="." />
       <PropsTable of="." />
-      {/* <Stories dark={true} /> */}
+      <Stories dark={true} />
     </>
   );
 };

integrations/storybook/src/preset.ts

@@ -8,7 +8,10 @@ module.exports = {
   managerEntries: (entry: any[] = [], options: any = {}) => {
     const result = [...entry];
     result.push(require.resolve('./register'));
-    result.push(require.resolve('./register-panel'));
+    const { addonPanel = true } = options;
+    if (addonPanel) {
+      result.push(require.resolve('./register-panel'));
+    }  
     return result;
   },
 };

package.json

@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
+    "@babel/helper-call-delegate": "^7.8.7",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-typescript": "^7.9.0",
     "@commitlint/cli": "^8.2.0",

ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx

@@ -3,7 +3,8 @@ import {
   BlockContainer,
   BlockContainerProps,
 } from '@component-controls/components';
-import { CURRENT_STORY, getComponentName } from '../../utils';
+import { getComponentName } from '@component-controls/specification';
+import { CURRENT_STORY } from '../../utils';
 import {
   ComponentsContainer,
   ComponentsContainerProps,

ui/blocks/src/context/block/BlockContext.tsx

@@ -9,9 +9,9 @@ import {
   SetControlValueFn,
   ClickControlFn,
   ComponentControlButton,
+  getComponentName,
 } from '@component-controls/specification';
 import { mergeControlValues } from '@component-controls/core';
-import { getComponentName } from '../../utils';
 
 export interface BlockContextInputProps {
   /**

ui/blocks/src/context/components/ComponentsContext.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
-import { Story, StoriesKind } from '@component-controls/specification';
+import {
+  Story,
+  StoriesKind,
+  getComponentName,
+} from '@component-controls/specification';
 
 import { BlockContext, Components } from '../block';
-import { getComponentName, CURRENT_STORY } from '../../utils';
+import { CURRENT_STORY } from '../../utils';
 
 export interface ComponentInputProps {
   /**

ui/blocks/src/utils/constants.ts

@@ -2,14 +2,6 @@ import { StoriesKind, StoryComponent } from '@component-controls/specification';
 
 export const CURRENT_STORY = '.';
 
-export const getComponentName = (component: any): string | undefined => {
-  return component
-    ? typeof component === 'string'
-      ? component
-      : component.name || component.displayName
-    : undefined;
-};
-
 export const getStoryTitle = (
   kind: StoriesKind | undefined,
   component: StoryComponent | undefined,