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