Fix dynamic knobs

storybookjs · Apr 21, 2018 · d2a289e · d2a289e
1 parent 2c73655
commit d2a289e
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 282 deletions.
diff --git a/addons/knobs/.storybook/addons.js b/addons/knobs/.storybook/addons.js
diff --git a/addons/knobs/.storybook/config.js b/addons/knobs/.storybook/config.js
diff --git a/addons/knobs/.storybook/user/modify_webpack_config.js b/addons/knobs/.storybook/user/modify_webpack_config.js
diff --git a/addons/knobs/.storybook/webpack.config.js b/addons/knobs/.storybook/webpack.config.js
diff --git a/addons/knobs/example/stories/index.js b/addons/knobs/example/stories/index.js
diff --git a/addons/knobs/example/typescript/index.tsx b/addons/knobs/example/typescript/index.tsx
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
@@ -31,13 +31,9 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/react": "4.0.0-alpha.3",
-    "raw-loader": "^0.5.1",
-    "style-loader": "^0.20.3",
     "vue": "^2.5.16"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": "*"
   }
 }
diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
@@ -155,31 +155,25 @@ export default class Panel extends React.Component {
     const groups = {};
     const groupIds = [];
 
-    Object.keys(knobs)
-      .filter(key => knobs[key].used && knobs[key].groupId)
-      .forEach(key => {
-        const knobKeyGroupId = knobs[key].groupId;
-        groupIds.push(knobKeyGroupId);
-        groups[knobKeyGroupId] = {
-          render: () => <div id={knobKeyGroupId}>{knobKeyGroupId}</div>,
-          title: knobKeyGroupId,
-        };
-      });
-
-    let knobsArray = Object.keys(knobs);
+    let knobsArray = Object.keys(knobs).filter(key => knobs[key].used);
+
+    knobsArray.filter(key => knobs[key].groupId).forEach(key => {
+      const knobKeyGroupId = knobs[key].groupId;
+      groupIds.push(knobKeyGroupId);
+      groups[knobKeyGroupId] = {
+        render: () => <div id={knobKeyGroupId}>{knobKeyGroupId}</div>,
+        title: knobKeyGroupId,
+      };
+    });
 
     if (groupIds.length > 0) {
       groups[DEFAULT_GROUP_ID] = {
         render: () => <div id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</div>,
         title: DEFAULT_GROUP_ID,
       };
-      knobsArray = knobsArray.filter(key => {
-        const filter =
-          groupId === DEFAULT_GROUP_ID
-            ? knobs[key].used
-            : knobs[key].used && knobs[key].groupId === groupId;
-        return filter;
-      });
+      if (groupId !== DEFAULT_GROUP_ID) {
+        knobsArray = knobsArray.filter(key => knobs[key].groupId === groupId);
+      }
     }
 
     knobsArray = knobsArray.map(key => knobs[key]);

diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -175,6 +175,15 @@ storiesOf('Addons|Knobs.withKnobs', module)
       </div>
     );
   })
+  .add('dynamic knobs', () => {
+    const showOptional = select('Show optional', ['yes', 'no'], 'yes');
+    return (
+      <div>
+        <div>{text('compulsary', 'I must be here')}</div>
+        {showOptional === 'yes' ? <div>{text('optional', 'I can disapear')}</div> : null}
+      </div>
+    );
+  })
   .add('triggers actions via button', () => (
     <div>
       <p>Hit the knob load button and it should trigger an async load after a short delay</p>