From 1ad0d2ba884568340102cf4ee2dfc59004712472 Mon Sep 17 00:00:00 2001 From: Gytis Vinclovas Date: Thu, 15 Jun 2017 17:01:34 +0300 Subject: [PATCH 1/5] Fixed issue with bad propType on boolean knob. Deserializing now doesn't return array anymore. --- addons/knobs/src/components/types/Boolean.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/knobs/src/components/types/Boolean.js b/addons/knobs/src/components/types/Boolean.js index 5e731ab39522..696babcae203 100644 --- a/addons/knobs/src/components/types/Boolean.js +++ b/addons/knobs/src/components/types/Boolean.js @@ -39,12 +39,12 @@ BooleanType.defaultProps = { BooleanType.propTypes = { knob: PropTypes.shape({ name: PropTypes.string, - value: PropTypes.string, + value: PropTypes.bool, }), onChange: PropTypes.func, }; BooleanType.serialize = value => String(value); -BooleanType.deserialize = value => (typeof value === 'string' ? value.match('true') : false); +BooleanType.deserialize = value => (typeof value === 'string' ? value === 'true' : false); export default BooleanType; From 7371ce82881b55b3afbc1b8931050e822bcd4035 Mon Sep 17 00:00:00 2001 From: Gytis Vinclovas Date: Thu, 15 Jun 2017 17:02:45 +0300 Subject: [PATCH 2/5] Simpler check. --- addons/knobs/src/components/types/Boolean.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/knobs/src/components/types/Boolean.js b/addons/knobs/src/components/types/Boolean.js index 696babcae203..ecc07dac53d8 100644 --- a/addons/knobs/src/components/types/Boolean.js +++ b/addons/knobs/src/components/types/Boolean.js @@ -45,6 +45,6 @@ BooleanType.propTypes = { }; BooleanType.serialize = value => String(value); -BooleanType.deserialize = value => (typeof value === 'string' ? value === 'true' : false); +BooleanType.deserialize = value => value === 'true'; export default BooleanType; From 0664a7cd69ed81ba224e9d6921d4fb7ca8bc9bd7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Jun 2017 18:36:25 +1000 Subject: [PATCH 3/5] Add test cases to kitchen sink, fix object/boolean knobs --- addons/knobs/src/components/types/Array.js | 2 +- addons/knobs/src/components/types/Object.js | 2 +- .../cra-kitchen-sink/src/stories/index.js | 49 +++++++++++++++++-- 3 files changed, 46 insertions(+), 7 deletions(-) diff --git a/addons/knobs/src/components/types/Array.js b/addons/knobs/src/components/types/Array.js index 56705553195c..05126db7fb29 100644 --- a/addons/knobs/src/components/types/Array.js +++ b/addons/knobs/src/components/types/Array.js @@ -41,7 +41,7 @@ ArrayType.defaultProps = { ArrayType.propTypes = { knob: PropTypes.shape({ name: PropTypes.string, - value: PropTypes.string, + value: PropTypes.array, }), onChange: PropTypes.func, }; diff --git a/addons/knobs/src/components/types/Object.js b/addons/knobs/src/components/types/Object.js index ffb876765fc0..84084144b492 100644 --- 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.string, + value: PropTypes.object, }), onChange: PropTypes.func, }; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index f838e1826b86..8ca27aa9c834 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -6,7 +6,17 @@ import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; import WithEvents from '@storybook/addon-events'; import { WithNotes } from '@storybook/addon-notes'; -import { withKnobs, text, number } from '@storybook/addon-knobs'; +import { + withKnobs, + text, + number, + boolean, + color, + select, + array, + date, + object, +} from '@storybook/addon-knobs'; import centered from '@storybook/addon-centered'; import Button from '@storybook/components/dist/demo/Button'; @@ -37,11 +47,40 @@ storiesOf('Button', module) ) .add('with knobs', () => { - const label = text('Label', 'Edit me in knobs panel'); - const num = number('Number', 1); - const content = `I am ${label} and I'm ${num} years old.`; + const name = text('Name', 'Storyteller'); + const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }); + const fruits = { + apple: 'Apple', + banana: 'Banana', + cherry: 'Cherry', + }; + const fruit = select('Fruit', fruits, 'apple'); + const dollars = number('Dollars', 12.5); + const buttonColor = { backgroundColor: color('background', '#ffff00') }; + const items = array('Items', ['Laptop', 'Book', 'Whiskey']); + const birthday = date('Birthday', new Date('Jan 20 2017')); + const otherStyles = object('Styles', { + border: '3px solid #ff00ff', + padding: '10px', + }); + const nice = boolean('Nice', true); - return ; + const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`; + const style = { ...buttonColor, ...otherStyles }; + const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; + + return ( +
+

{intro}

+

My birthday is: {new Date(birthday).toLocaleDateString()}

+

My wallet contains: ${dollars.toFixed(2)}

+

In my backpack, I have:

+
    + {items.map(item =>
  • {item}
    • )} +
+

{salutation}

+
+ ); }) .addWithInfo( 'with some info', From 57f52b4993b051ca07c8e2044b0163202ce1892f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Jun 2017 19:29:45 +1000 Subject: [PATCH 4/5] Move broken date picker knob to the end --- examples/cra-kitchen-sink/src/stories/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 8ca27aa9c834..40c9af74f71c 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -58,12 +58,13 @@ storiesOf('Button', module) const dollars = number('Dollars', 12.5); const buttonColor = { backgroundColor: color('background', '#ffff00') }; const items = array('Items', ['Laptop', 'Book', 'Whiskey']); - const birthday = date('Birthday', new Date('Jan 20 2017')); const otherStyles = object('Styles', { border: '3px solid #ff00ff', padding: '10px', }); const nice = boolean('Nice', true); + // NOTE: put this last because it currently breaks everything after it :D + const birthday = date('Birthday', new Date('Jan 20 2017')); const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`; const style = { ...buttonColor, ...otherStyles }; From db5b5a6504c3f8ac3e4c6cb59cb11ac737d2d088 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 17 Jun 2017 19:46:16 +1000 Subject: [PATCH 5/5] Fix prop-type warning in date knob --- addons/knobs/src/components/types/Date/index.js | 2 +- examples/cra-kitchen-sink/src/stories/index.js | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/addons/knobs/src/components/types/Date/index.js b/addons/knobs/src/components/types/Date/index.js index 0da8e258e989..0320d33905c7 100644 --- a/addons/knobs/src/components/types/Date/index.js +++ b/addons/knobs/src/components/types/Date/index.js @@ -39,7 +39,7 @@ DateType.defaultProps = { DateType.propTypes = { knob: PropTypes.shape({ name: PropTypes.string, - value: PropTypes.string, + value: PropTypes.number, }), onChange: PropTypes.func, }; diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index 40c9af74f71c..935746f53a55 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -56,18 +56,21 @@ storiesOf('Button', module) }; const fruit = select('Fruit', fruits, 'apple'); const dollars = number('Dollars', 12.5); - const buttonColor = { backgroundColor: color('background', '#ffff00') }; + + // NOTE: color picker is currently broken + const backgroundColor = color('background', '#ffff00'); const items = array('Items', ['Laptop', 'Book', 'Whiskey']); const otherStyles = object('Styles', { border: '3px solid #ff00ff', padding: '10px', }); const nice = boolean('Nice', true); + // NOTE: put this last because it currently breaks everything after it :D const birthday = date('Birthday', new Date('Jan 20 2017')); const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`; - const style = { ...buttonColor, ...otherStyles }; + const style = { backgroundColor, ...otherStyles }; const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; return (