fix: smart addonControls parameter option

ccontrols · Feb 13, 2020 · 7832976 · 7832976
1 parent 444af02
commit 7832976
Show file tree

Hide file tree

Showing 17 changed files with 45 additions and 16 deletions.
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.72dcd7c5365d3cf59f16.bundle.js"></script><script src="vendors~main.72dcd7c5365d3cf59f16.bundle.js"></script><script src="main.72dcd7c5365d3cf59f16.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.d469950d70f32d2a26af.bundle.js"></script><script src="vendors~main.d469950d70f32d2a26af.bundle.js"></script><script src="main.d469950d70f32d2a26af.bundle.js"></script></body></html>
diff --git a/docs/index.html b/docs/index.html
@@ -16,4 +16,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.6b70b35614cf83eab770.bundle.js"></script><script src="vendors~main.74dd2f2713e9a7e6c4e7.bundle.js"></script><script src="main.ddcd67bc385c829f8b8c.bundle.js"></script></body></html>
+      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.6b70b35614cf83eab770.bundle.js"></script><script src="vendors~main.74dd2f2713e9a7e6c4e7.bundle.js"></script><script src="main.cd108ddf69041f77f8b1.bundle.js"></script></body></html>
diff --git a/docs/main.72dcd7c5365d3cf59f16.bundle.js b/docs/main.72dcd7c5365d3cf59f16.bundle.js
diff --git a/docs/main.72dcd7c5365d3cf59f16.bundle.js.map b/docs/main.72dcd7c5365d3cf59f16.bundle.js.map
diff --git a/docs/main.ddcd67bc385c829f8b8c.bundle.js → docs/main.cd108ddf69041f77f8b1.bundle.js b/docs/main.ddcd67bc385c829f8b8c.bundle.js → docs/main.cd108ddf69041f77f8b1.bundle.js
diff --git a/docs/main.d469950d70f32d2a26af.bundle.js b/docs/main.d469950d70f32d2a26af.bundle.js
diff --git a/docs/main.d469950d70f32d2a26af.bundle.js.map b/docs/main.d469950d70f32d2a26af.bundle.js.map
diff --git a/docs/runtime~main.72dcd7c5365d3cf59f16.bundle.js.map b/docs/runtime~main.72dcd7c5365d3cf59f16.bundle.js.map
diff --git a/...ntime~main.72dcd7c5365d3cf59f16.bundle.js → ...ntime~main.d469950d70f32d2a26af.bundle.js b/...ntime~main.72dcd7c5365d3cf59f16.bundle.js → ...ntime~main.d469950d70f32d2a26af.bundle.js
diff --git a/docs/runtime~main.d469950d70f32d2a26af.bundle.js.map b/docs/runtime~main.d469950d70f32d2a26af.bundle.js.map
diff --git a/docs/vendors~main.72dcd7c5365d3cf59f16.bundle.js.map b/docs/vendors~main.72dcd7c5365d3cf59f16.bundle.js.map
diff --git a/...ndors~main.72dcd7c5365d3cf59f16.bundle.js → ...ndors~main.d469950d70f32d2a26af.bundle.js b/...ndors~main.72dcd7c5365d3cf59f16.bundle.js → ...ndors~main.d469950d70f32d2a26af.bundle.js
diff --git a/...2dcd7c5365d3cf59f16.bundle.js.LICENSE.txt → ...469950d70f32d2a26af.bundle.js.LICENSE.txt b/...2dcd7c5365d3cf59f16.bundle.js.LICENSE.txt → ...469950d70f32d2a26af.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.d469950d70f32d2a26af.bundle.js.map b/docs/vendors~main.d469950d70f32d2a26af.bundle.js.map
diff --git a/integrations/storybook/.storybook/stories/smart-controls.stories.js b/integrations/storybook/.storybook/stories/smart-controls.stories.js
@@ -36,3 +36,9 @@ noColors.story = {
 
 // this story does not have parameters, and smart controls will be disabled for it
 export const noProps = () => <Button label="No properties" />;
+
+noProps.story = {
+  parameters: {
+    addonControls: { smart: false }
+  }  
+}
diff --git a/integrations/storybook/.storybook/stories/smart-controls.stories.mdx b/integrations/storybook/.storybook/stories/smart-controls.stories.mdx
@@ -47,7 +47,7 @@ import Button from '../components/BaseButton';
 # Story with no parameters == no smart controls
 
 <Preview>
-  <Story name="no controls" parameters={{ addonControls: { smart: true }}}>
+  <Story name="no controls" parameters={{ addonControls: { smart: false }}}>
       <Button label="Hello"/>
   </Story>
 </Preview>
diff --git a/integrations/storybook/src/shared/smartControls.ts b/integrations/storybook/src/shared/smartControls.ts
@@ -108,9 +108,32 @@ export type SmartControls = boolean | SmartControlsConfig;
 export const docgenToControls = (
   parameters: Parameters,
 ): ComponentControls | null => {
-  const { component } = parameters || {};
-  if (component && component.__docgenInfo && component.__docgenInfo.props) {
-    return controlsFromProps(component.__docgenInfo.props);
+  const params = parameters || {};
+  const { component, addonControls = {} } = params;
+  const { smart: smartControls } = addonControls;
+  if (!smartControls) {
+    return null;
+  }
+  if (!component) {
+    return null;
+  }
+  if (component.__docgenInfo && component.__docgenInfo.props) {
+    const newControls = controlsFromProps(component.__docgenInfo.props);
+    const { include, exclude } = smartControls;
+    if (Array.isArray(include) || Array.isArray(exclude)) {
+      return Object.keys(newControls)
+        .filter(key => {
+          if (Array.isArray(include) && !include.includes(key)) {
+            return false;
+          }
+          if (Array.isArray(exclude) && exclude.includes(key)) {
+            return false;
+          }
+          return true;
+        })
+        .reduce((acc, key) => ({ ...acc, [key]: newControls[key] }), {});
+    }
+    return newControls;
   }
   return null;
 };