Added addon-knobs to crna and vanilla react native.

examples/crna-kitchen-sink/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "devDependencies": {
     "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
+    "@storybook/addon-knobs": "file:../../packs/storybook-addon-knobs.tgz",
     "@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
     "@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
     "@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",

examples/crna-kitchen-sink/storybook/addons.js

@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';

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 (
+    <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>
+  );
+};

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

examples/react-native-vanilla/__tests__/__snapshots__/storyshots.js.snap

@@ -96,6 +96,80 @@ exports[`Storyshots Button with text 1`] = `
 </View>
 `;
 
+exports[`Storyshots Knobs with knobs 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#ffff00",
+      "borderColor": "#ff00ff",
+      "borderWidth": 3,
+      "padding": 10,
+    }
+  }
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    My birthday is: 
+    January 20, 2017
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    My wallet contains: $
+    12.50
+  </Text>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    In my backpack, I have:
+  </Text>
+  <View>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      Laptop
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      Book
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    >
+      Whiskey
+    </Text>
+  </View>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+  >
+    Nice to meet you!
+  </Text>
+</View>
+`;
+
 exports[`Storyshots Welcome to Storybook 1`] = `
 <View
   style={

examples/react-native-vanilla/package.json

@@ -18,6 +18,7 @@
     "jest": "^20.0.4",
     "react-test-renderer": "16.0.0-alpha.6",
     "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
+    "@storybook/addon-knobs": "file:../../packs/storybook-addon-knobs.tgz",
     "@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
     "@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
     "@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",

examples/react-native-vanilla/storybook/addons.js

@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';

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 (
+    <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>
+  );
+};

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