GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 01:51:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added knobs examples to crna and vanilla react native.

Browse Source
This commit is contained in:
Gytis Vinclovas 2017-08-10 11:27:32 +03:00
parent f21210ac07
commit c93ffffe1f
6 changed files with 128 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/crna-kitchen-sink/package.json
View File

@ -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",

59
examples/crna-kitchen-sink/storybook/stories/Knobs/index.js Normal file
View File

@ -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 (
<View style={style}>
<Text>
{intro}
</Text>
<Text>
My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}
</Text>
<Text>
My wallet contains: ${dollars.toFixed(2)}
</Text>
<Text>In my backpack, I have:</Text>
<View>
{items.map(item =>
<Text key={item}>
{item}
</Text>
)}
</View>
<Text>
{salutation}
</Text>
</View>
);
};

4
examples/crna-kitchen-sink/storybook/stories/index.js
View File

@ -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)
<Text>😀 😎 👍 💯</Text>
</Button>
);
storiesOf('Knobs', module).addDecorator(withKnobs).add('with knobs', knobsWrapper);

1
examples/react-native-vanilla/package.json
View File

@ -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",

59
examples/react-native-vanilla/storybook/stories/Knobs/index.js vendored Normal file
View File

@ -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 (
<View style={style}>
<Text>
{intro}
</Text>
<Text>
My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}
</Text>
<Text>
My wallet contains: ${dollars.toFixed(2)}
</Text>
<Text>In my backpack, I have:</Text>
<View>
{items.map(item =>
<Text key={item}>
{item}
</Text>
)}
</View>
<Text>
{salutation}
</Text>
</View>
);
};

4
examples/react-native-vanilla/storybook/stories/index.js vendored
View File

@ -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)
<Text>😀 😎 👍 💯</Text>
</Button>
);
storiesOf('Knobs', module).addDecorator(withKnobs).add('with knobs', knobsWrapper);