From c93ffffe1fcf0e46a11a98b1a10c331273c5869a Mon Sep 17 00:00:00 2001 From: Gytis Vinclovas Date: Thu, 10 Aug 2017 11:27:32 +0300 Subject: [PATCH] Added knobs examples to crna and vanilla react native. --- examples/crna-kitchen-sink/package.json | 1 + .../storybook/stories/Knobs/index.js | 59 +++++++++++++++++++ .../storybook/stories/index.js | 4 ++ examples/react-native-vanilla/package.json | 1 + .../storybook/stories/Knobs/index.js | 59 +++++++++++++++++++ .../storybook/stories/index.js | 4 ++ 6 files changed, 128 insertions(+) create mode 100644 examples/crna-kitchen-sink/storybook/stories/Knobs/index.js create mode 100644 examples/react-native-vanilla/storybook/stories/Knobs/index.js diff --git a/examples/crna-kitchen-sink/package.json b/examples/crna-kitchen-sink/package.json index d95f8fab950..44d1d5ad48c 100644 --- a/examples/crna-kitchen-sink/package.json +++ b/examples/crna-kitchen-sink/package.json @@ -4,6 +4,7 @@ "private": true, "devDependencies": { "@storybook/addon-actions": "file:../../addons/actions", + "@storybook/addon-knobs": "file:../../addons/knobs", "@storybook/addon-links": "file:../../addons/links", "@storybook/addon-options": "file:../../addons/options", "@storybook/addon-storyshots": "file:../../addons/storyshots", diff --git a/examples/crna-kitchen-sink/storybook/stories/Knobs/index.js b/examples/crna-kitchen-sink/storybook/stories/Knobs/index.js new file mode 100644 index 00000000000..19cec307ac4 --- /dev/null +++ b/examples/crna-kitchen-sink/storybook/stories/Knobs/index.js @@ -0,0 +1,59 @@ +import React from 'react'; +import { View, Text } from 'react-native'; + +import { text, number, boolean, color, select, array, date, object } from '@storybook/addon-knobs'; + +export default () => { + 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); + + // NOTE: color picker is currently broken + const backgroundColor = color('background', '#ffff00'); + const items = array('Items', ['Laptop', 'Book', 'Whiskey']); + const otherStyles = object('Styles', { + borderWidth: 3, + borderColor: '#ff00ff', + padding: 10, + }); + 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 = { backgroundColor, ...otherStyles }; + const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; + const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' }; + + return ( + + + {intro} + + + My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)} + + + My wallet contains: ${dollars.toFixed(2)} + + In my backpack, I have: + + {items.map(item => + + {item} + + )} + + + {salutation} + + + ); +}; diff --git a/examples/crna-kitchen-sink/storybook/stories/index.js b/examples/crna-kitchen-sink/storybook/stories/index.js index 99ab2205a9d..597005a811d 100644 --- a/examples/crna-kitchen-sink/storybook/stories/index.js +++ b/examples/crna-kitchen-sink/storybook/stories/index.js @@ -4,7 +4,9 @@ import { Text } from 'react-native'; import { storiesOf } from '@storybook/react-native'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; +import { withKnobs } from '@storybook/addon-knobs'; +import knobsWrapper from './Knobs'; import Button from './Button'; import CenterView from './CenterView'; import Welcome from './Welcome'; @@ -27,3 +29,5 @@ storiesOf('Button', module) 😀 😎 👍 💯 ); + +storiesOf('Knobs', module).addDecorator(withKnobs).add('with knobs', knobsWrapper); diff --git a/examples/react-native-vanilla/package.json b/examples/react-native-vanilla/package.json index f10414aab4f..4ca51a25545 100644 --- a/examples/react-native-vanilla/package.json +++ b/examples/react-native-vanilla/package.json @@ -17,6 +17,7 @@ "jest": "^20.0.4", "react-test-renderer": "16.0.0-alpha.6", "@storybook/addon-actions": "file:../../addons/actions", + "@storybook/addon-knobs": "file:../../addons/knobs", "@storybook/addon-links": "file:../../addons/links", "@storybook/addon-options": "file:../../addons/options", "@storybook/addon-storyshots": "file:../../addons/storyshots", diff --git a/examples/react-native-vanilla/storybook/stories/Knobs/index.js b/examples/react-native-vanilla/storybook/stories/Knobs/index.js new file mode 100644 index 00000000000..19cec307ac4 --- /dev/null +++ b/examples/react-native-vanilla/storybook/stories/Knobs/index.js @@ -0,0 +1,59 @@ +import React from 'react'; +import { View, Text } from 'react-native'; + +import { text, number, boolean, color, select, array, date, object } from '@storybook/addon-knobs'; + +export default () => { + 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); + + // NOTE: color picker is currently broken + const backgroundColor = color('background', '#ffff00'); + const items = array('Items', ['Laptop', 'Book', 'Whiskey']); + const otherStyles = object('Styles', { + borderWidth: 3, + borderColor: '#ff00ff', + padding: 10, + }); + 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 = { backgroundColor, ...otherStyles }; + const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; + const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' }; + + return ( + + + {intro} + + + My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)} + + + My wallet contains: ${dollars.toFixed(2)} + + In my backpack, I have: + + {items.map(item => + + {item} + + )} + + + {salutation} + + + ); +}; diff --git a/examples/react-native-vanilla/storybook/stories/index.js b/examples/react-native-vanilla/storybook/stories/index.js index 99ab2205a9d..597005a811d 100644 --- a/examples/react-native-vanilla/storybook/stories/index.js +++ b/examples/react-native-vanilla/storybook/stories/index.js @@ -4,7 +4,9 @@ import { Text } from 'react-native'; import { storiesOf } from '@storybook/react-native'; import { action } from '@storybook/addon-actions'; import { linkTo } from '@storybook/addon-links'; +import { withKnobs } from '@storybook/addon-knobs'; +import knobsWrapper from './Knobs'; import Button from './Button'; import CenterView from './CenterView'; import Welcome from './Welcome'; @@ -27,3 +29,5 @@ storiesOf('Button', module) 😀 😎 👍 💯 ); + +storiesOf('Knobs', module).addDecorator(withKnobs).add('with knobs', knobsWrapper);