Added kitchen sink to sample app

.travis.yml

@@ -12,7 +12,6 @@ after_success: "./scripts/travis/after_success.sh"
 script:
 - npm run bootstrap
 - npm run bootstrap:test-cra
-- npm run bootstrap:react-native-vanilla
 - npm run bootstrap:docs
 - npm run lint
 - npm run test -- --coverage

app/react-native/src/manager/components/PreviewHelp.js

@@ -60,7 +60,7 @@ const PreviewHelp = () =>
       For <span style={styles.code}>react-native init</span> apps:
     </p>
     <div style={styles.codeBlock}>
-      <pre style={styles.instructionsCode}>npm run &lt;platform&gt;</pre>
+      <pre style={styles.instructionsCode}>react-native run-&lt;platform&gt;</pre>
     </div>
   </div>;
 

examples/cra-storybook/.storybook/addons.js → examples/cra-kitchen-sink/.storybook/addons.js

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

examples/cra-kitchen-sink/.storybook/config.js

@@ -0,0 +1,22 @@
+import { configure, setAddon } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import infoAddon from '@storybook/addon-info';
+
+setOptions({
+  name: 'Test-CRA',
+  url: 'https://github.com/storybooks/storybook/tree/master/examples/test-cra',
+  goFullScreen: false,
+  showLeftPanel: true,
+  showDownPanel: true,
+  showSearchBox: false,
+  downPanelInRight: true,
+  sortStoriesByKind: false,
+})
+
+setAddon(infoAddon);
+
+function loadStories() {
+  require('../src/stories');
+}
+
+configure(loadStories, module);

examples/cra-storybook/package.json → examples/cra-kitchen-sink/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "cra-storybook",
+  "name": "cra-kitchen-sink",
   "version": "1.0.0",
   "scripts": {
     "build": "react-scripts build",
@@ -20,8 +20,13 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.0.0",
-    "@storybook/addon-links": "^3.0.0",
+    "@storybook/addon-centered": "^3.0.0",
     "@storybook/addon-events": "^3.0.0",
+    "@storybook/addon-knobs": "^3.0.0",
+    "@storybook/addon-info": "^3.0.0",
+    "@storybook/addon-links": "^3.0.0",
+    "@storybook/addon-notes": "^3.0.0",
+    "@storybook/addon-options": "^3.0.0",
     "@storybook/addons": "^3.0.0",
     "@storybook/react": "^3.0.0",
     "react-scripts": "1.0.1"

examples/cra-storybook/src/stories/index.js → examples/cra-kitchen-sink/src/stories/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
-
 import EventEmiter from 'eventemitter3';
 
 import { storiesOf } from '@storybook/react';
 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 centered from '@storybook/addon-centered';
 
 import Button from './Button';
 import Welcome from './Welcome';
@@ -25,12 +27,30 @@ const emit = emiter.emit.bind(emiter);
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
+  .addDecorator(withKnobs)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>)
+  .add('with notes', () =>
+    <WithNotes notes={'A very simple button'}>
+      <Button>Check my notes in the notes panel</Button>
+    </WithNotes>
+  )
+  .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.`;
+
+    return <Button>{content}</Button>;
+  })
+  .addWithInfo('with some info', 'Use the info addon with its painful API.', () =>
+    <Button>click the "?" in top right for info</Button>
+  );
+
+storiesOf('App', module).add('full app', () => <App />);
 
-storiesOf('App', module)
-  .add('with text', () => <App />)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+storiesOf('Centered Button', module)
+  .addDecorator(centered)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
 
 storiesOf('WithEvents', module)
   .addDecorator(getStory =>

examples/package.json

@@ -4,7 +4,7 @@
   "description": "A set of examples of how to use storybook, also used for regression testing",
   "main": "index.js",
   "scripts": {
-    "test:automated-cra-storybook": "node scripts/automated-cra-storybook.js"
+    "test:automated-cra-getstorybook": "node scripts/automated-cra-getstorybook.js"
   },
   "license": "ISC",
   "dependencies": {

examples/react-native-getstorybook/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-native-getstorybook",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "test": "jest",
+    "storybook": "storybook start -p 7007"
+  },
+  "dependencies": {
+    "react": "16.0.0-alpha.6",
+    "react-native": "0.44.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "*",
+    "@storybook/addon-links": "*",
+    "@storybook/addon-options": "*",
+    "@storybook/addon-storyshots": "*",
+    "@storybook/addons": "*",
+    "@storybook/channels": "*",
+    "@storybook/react-native": "*",
+    "babel-jest": "20.0.3",
+    "babel-preset-react-native": "1.9.2",
+    "jest": "20.0.4",
+    "react-dom": "^15.5.4"
+  }
+}

examples/scripts/automated-cra-storybook.js

@@ -6,7 +6,7 @@
 const { exec } = require('child-process-promise');
 const rimraf = require('rimraf');
 
-const targetFolder = 'automated-cra-storybook';
+const targetFolder = 'automated-cra-getstorybook';
 
 const cleanDir = () => new Promise(resolve => rimraf(`./${targetFolder}`, resolve));
 

examples/test-cra/.storybook/addons.js

@@ -1,2 +1,5 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';

examples/test-cra/.storybook/config.js

@@ -1,4 +1,19 @@
-import { configure } from '@storybook/react';
+import { configure, setAddon } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import infoAddon from '@storybook/addon-info';
+
+setOptions({
+  name: 'Test-CRA',
+  url: 'https://github.com/storybooks/storybook/tree/master/examples/test-cra',
+  goFullScreen: false,
+  showLeftPanel: true,
+  showDownPanel: true,
+  showSearchBox: false,
+  downPanelInRight: true,
+  sortStoriesByKind: false,
+})
+
+setAddon(infoAddon);
 
 function loadStories() {
   require('../src/stories');

examples/test-cra/package.json

@@ -18,7 +18,12 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "file:../../addons/actions",
+    "@storybook/addon-centered": "file:../../addons/centered",
+    "@storybook/addon-info": "file:../../addons/info",
+    "@storybook/addon-knobs": "file:../../addons/knobs",
     "@storybook/addon-links": "file:../../addons/links",
+    "@storybook/addon-notes": "file:../../addons/notes",
+    "@storybook/addon-options": "file:../../addons/options",
     "@storybook/addon-storyshots": "file:../../addons/storyshots",
     "@storybook/addons": "file:../../lib/addons",
     "@storybook/channel-postmessage": "file:../../lib/channel-postmessage",

examples/test-cra/src/stories/index.js

@@ -5,6 +5,9 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
+import { WithNotes } from '@storybook/addon-notes';
+import { withKnobs, text, number } from '@storybook/addon-knobs';
+import centered from '@storybook/addon-centered';
 
 import Button from './Button';
 import Welcome from './Welcome';
@@ -13,7 +16,25 @@ import ComponentWithRef from './ComponentWithRef';
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
+  .addDecorator(withKnobs)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>)
+  .add('with notes', () =>
+    <WithNotes notes={'A very simple button'}>
+      <Button>Check my notes in the notes panel</Button>
+    </WithNotes>
+  )
+  .add('with knobs', () => {
+    const label = text('Label', 'Edit me in knobs panel');
+    const num = number('Number', 1);
+    return <Button>{label} {num}</Button>;
+  })
+  .addWithInfo('with some info', 'Use the info addon with its painful API.', () =>
+    <Button>click the "?" in top right for info</Button>
+  );
+
+storiesOf('Centered Button', module)
+  .addDecorator(centered)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
 
 storiesOf('ComponentWithRef', module).add('basic', () => <ComponentWithRef />);

jest.config.js

@@ -10,11 +10,11 @@ module.exports = {
     '<rootDir>/addons',
     '<rootDir>/app',
     '<rootDir>/lib',
-    '<rootDir>/examples/cra-storybook',
+    '<rootDir>/examples/cra-kitchen-sink',
     '<rootDir>/examples/test-cra',
   ],
   testPathIgnorePatterns: ['/node_modules/'],
-  projects: ['./', './examples/react-native-vanilla'],
+  projects: ['./', './examples/react-native-getstorybook'],
   collectCoverage: false,
   collectCoverageFrom: [
     'app/**/*.{js,jsx}',

lerna.json

@@ -3,15 +3,14 @@
   "commands": {
     "bootstrap": {
       "ignore": [
-        "test-cra",
-        "react-native-vanilla"
+        "test-cra"
       ]
     },
     "publish": {
       "ignore": [
-        "cra-storybook",
+        "cra-kitchen-sink",
         "test-cra",
-        "react-native-vanilla"
+        "react-native-getstorybook"
       ]
     }
   },

package.json

@@ -8,7 +8,6 @@
     "bootstrap": "lerna bootstrap",
     "bootstrap:docs": "cd docs && npm i",
     "bootstrap:test-cra": "lerna exec --scope test-cra -- npm i",
-    "bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npm i",
     "changelog": "pr-log --sloppy",
     "precommit": "lint-staged",
     "coverage": "codecov",
@@ -23,7 +22,7 @@
     "lint:js": "eslint . --cache --cache-location=.cache/eslint --ext .js,.jsx,.json",
     "lint:md": "remark .",
     "publish": "lerna publish",
-    "test": "jest --projects ./ ./examples/react-native-vanilla"
+    "test": "jest --projects ./ ./examples/react-native-getstorybook"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",