Add cra-kitchen-sink and crna-getstorybook

.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-kitchen-sink/.storybook/addons.js

@@ -0,0 +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,32 @@ 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](https://github.com/storybooks/storybook/tree/master/addons/info) 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/crna-getstorybook/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

examples/crna-getstorybook/.flowconfig

@@ -0,0 +1,63 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+; Additional create-react-native-app ignores
+
+; Ignore duplicate module providers
+.*/node_modules/fbemitter/lib/*
+
+; Ignore misbehaving dev-dependencies
+.*/node_modules/xdl/build/*
+.*/node_modules/reqwest/tests/*
+
+; Ignore missing expo-sdk dependencies (temporarily)
+; https://github.com/expo/expo/issues/162
+.*/node_modules/expo/src/*
+
+; Ignore react-native-fbads dependency of the expo sdk
+.*/node_modules/react-native-fbads/*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+module.system=haste
+
+emoji=true
+
+experimental.strict_type_args=true
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.42.0

examples/crna-getstorybook/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.expo/
+npm-debug.*

examples/crna-getstorybook/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/crna-getstorybook/App.js

@@ -0,0 +1,30 @@
+import StorybookUI from './storybook';
+
+export default StorybookUI;
+
+// generated by CRNA
+// /* eslint-disable */
+//
+// import React from 'react';
+// import { StyleSheet, Text, View } from 'react-native';
+//
+// export default class App extends React.Component {
+//   render() {
+//     return (
+//       <View style={styles.container}>
+//         <Text>Open up App.js to start working on your app!</Text>
+//         <Text>Changes you make will automatically reload.</Text>
+//         <Text>Shake your phone to open the developer menu.</Text>
+//       </View>
+//     );
+//   }
+// }
+//
+// const styles = StyleSheet.create({
+//   container: {
+//     flex: 1,
+//     backgroundColor: '#fff',
+//     alignItems: 'center',
+//     justifyContent: 'center',
+//   },
+// });

examples/crna-getstorybook/App.test.js

@@ -0,0 +1,12 @@
+// generated by CRNA
+/* eslint-disable */
+
+import React from 'react';
+import App from './App';
+
+import renderer from 'react-test-renderer';
+
+it('renders without crashing', () => {
+  const rendered = renderer.create(<App />).toJSON();
+  expect(rendered).toBeTruthy();
+});