Merge pull request #1701 from storybooks/knob-object-array

Knobs: allow arrays in object knob proptypes
storybookjs · Sep 1, 2017 · c4858c1 · c4858c1
2 parents 6e57332 + e2d1e6d
commit c4858c1
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/addons/knobs/README.md b/addons/knobs/README.md
@@ -157,7 +157,7 @@ const value = color(label, defaultValue);
 
 ### object
 
-Allows you to get a JSON object from the user.
+Allows you to get a JSON object or array from the user.
 
 ```js
 import { object } from '@storybook/addon-knobs';
@@ -174,7 +174,7 @@ const value = object(label, defaultValue);
 
 ### array
 
-Allows you to get an array from the user.
+Allows you to get an array of strings from the user.
 
 ```js
 import { array } from '@storybook/addon-knobs';

diff --git a/addons/knobs/src/components/types/Object.js b/addons/knobs/src/components/types/Object.js
@@ -88,7 +88,7 @@ ObjectType.defaultProps = {
 ObjectType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
-    value: PropTypes.object,
+    value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   }),
   onChange: PropTypes.func,
 };

diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -1753,6 +1753,25 @@ exports[`Storyshots Button with knobs 1`] = `
     My birthday is: 
     January 20, 2017
   </p>
+  <p>
+    I have 
+    2
+     children:
+  </p>
+  <ol>
+    <li>
+      Jane
+      , 
+      13
+       years old
+    </li>
+    <li>
+      John
+      , 
+      8
+       years old
+    </li>
+  </ol>
   <p>
     My wallet contains: $
     12.50

diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js
@@ -100,6 +100,16 @@ storiesOf('Button', module)
       padding: '10px',
     });
     const nice = boolean('Nice', true);
+    const children = object('Children', [
+      {
+        name: 'Jane',
+        age: 13,
+      },
+      {
+        name: 'John',
+        age: 8,
+      },
+    ]);
 
     // NOTE: put this last because it currently breaks everything after it :D
     const birthday = date('Birthday', new Date('Jan 20 2017'));
@@ -117,6 +127,16 @@ storiesOf('Button', module)
         <p>
           My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}
         </p>
+        <p>
+          I have {children.length} children:
+        </p>
+        <ol>
+          {children.map(child =>
+            <li key={child.name}>
+              {child.name}, {child.age} years old
+            </li>
+          )}
+        </ol>
         <p>
           My wallet contains: ${dollars.toFixed(2)}
         </p>

diff --git a/yarn.lock b/yarn.lock
@@ -4949,6 +4949,13 @@ glob-parent@^2.0.0:
   dependencies:
     is-glob "^2.0.0"
 
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
 glob@^4.0.2:
   version "4.5.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-4.5.3.tgz#c6cb73d3226c1efef04de3c56d012f03377ee15f"
@@ -6589,9 +6596,9 @@ left-pad@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.1.3.tgz#612f61c033f3a9e08e939f1caebeea41b6f3199a"
 
-lerna@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.1.0.tgz#22da4c9cb09f7733a7e87ba8f34779a509c172ea"
+lerna@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.1.2.tgz#b07eb7a4d7dd7d44a105262fef49b2229301c577"
   dependencies:
     async "^1.5.0"
     chalk "^2.1.0"
@@ -6606,6 +6613,7 @@ lerna@2.1.0:
     fs-extra "^4.0.1"
     get-port "^3.2.0"
     glob "^7.1.2"
+    glob-parent "^3.1.0"
     globby "^6.1.0"
     graceful-fs "^4.1.11"
     inquirer "^3.2.2"
@@ -8105,6 +8113,10 @@ path-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
 
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+
 path-exists@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-1.0.0.tgz#d5a8998eb71ef37a74c34eb0d9eba6e878eea081"