[Hosted RN Storybook] WIP Added example for hosted RN storybook

addons/rn-pair/README.md

@@ -0,0 +1,28 @@
+# Storybook Addon Actions
+
+[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
+[![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook)
+[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
+[![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/)
+
+Storybook Addon RN Pair can be used to connect hosted storybook server with app [Storybook](https://storybook.js.org).
+It allows you to simply point your phone camera to browser screen and phone will be automatically connected.
+![Screenshot](docs/screenshot.png)
+
+## Getting Started
+
+Install:
+
+```sh
+npm i -D @storybook/addon-rn-pair
+```
+
+Then, add following content to `.storybook/addons.js`
+
+    import '@storybook/addon-rn-pair/register';
+
+Then you need to use qr code reader in your storybook app.
+
+TODO write more about reader.

addons/rn-pair/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@storybook/rn-pair",
+  "version": "3.2.0",
+  "description": "React Native pair addon necessary to pair phone with hosted storybook",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/rn-pair",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "deploy-storybook": "storybook-to-ghpages",
+    "prepublish": "node ../../scripts/prepublish.js",
+    "storybook": "start-storybook -p 9001"
+  },
+  "dependencies": {
+    "@storybook/addons": "^3.2.0",
+    "qrcode.react": "^0.7.1"
+  },
+  "devDependencies": {
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-test-renderer": "^15.6.1",
+    "shelljs": "^0.7.8"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

addons/rn-pair/register.js

@@ -0,0 +1 @@
+require('./dist').register();

addons/rn-pair/src/components/QRCode/index.js

@@ -0,0 +1,41 @@
+/* eslint-disable no-undef */
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import QrCode from 'qrcode.react';
+
+import style from './style';
+
+class QRCodeComponent extends PureComponent {
+  render() {
+    const secured = window.location.protocol === 'https:';
+    const value = [
+      window.location.hostname,
+      window.location.port,
+      this.props.pairedId,
+      secured ? '1' : '0',
+    ].join('|');
+
+    return (
+      <div style={style.wrapper}>
+        {this.props.pairedId &&
+          <div>
+            <p>
+              Code: {this.props.pairedId}
+            </p>
+            <p>Scan the code with your phone to pair</p>
+            <QrCode value={value} />
+          </div>}
+      </div>
+    );
+  }
+}
+
+QRCodeComponent.propTypes = {
+  pairedId: PropTypes.string,
+};
+
+QRCodeComponent.defaultProps = {
+  pairedId: null,
+};
+
+export default QRCodeComponent;

addons/rn-pair/src/components/QRCode/style.js

@@ -0,0 +1,8 @@
+export default {
+  wrapper: {
+    flex: 1,
+    display: 'flex',
+    position: 'relative',
+    padding: '0 10px',
+  },
+};

addons/rn-pair/src/containers/QRCodePanel/index.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-underscore-dangle */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import QRCodeComponent from '../../components/QRCode';
+
+export default class QRCodePanel extends React.PureComponent {
+  constructor(props, ...args) {
+    super(props, ...args);
+    this.state = {
+      pairedId: null,
+    };
+
+    this._actionListener = action => this.addAction(action);
+  }
+
+  componentDidMount() {
+    this.props.channel.on('channelCreated', this._actionListener);
+  }
+
+  componentWillUnmount() {
+    this.props.channel.removeListener('channelCreated', this._actionListener);
+  }
+
+  addAction(data) {
+    this.setState({
+      pairedId: data.pairedId,
+    });
+  }
+
+  render() {
+    return <QRCodeComponent {...this.state} />;
+  }
+}
+
+QRCodePanel.propTypes = {
+  channel: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+QRCodePanel.defaultProps = {
+  channel: {},
+};

addons/rn-pair/src/index.js

@@ -0,0 +1,4 @@
+export const ADDON_ID = 'storybook/rn-pair';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+
+export { register } from './manager';

addons/rn-pair/src/manager.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import addons from '@storybook/addons';
+import QRCodePanel from './containers/QRCodePanel';
+import { ADDON_ID, PANEL_ID } from './';
+
+export function register() {
+  addons.register(ADDON_ID, () => {
+    const channel = addons.getChannel();
+    addons.addPanel(PANEL_ID, {
+      title: 'RN Pair',
+      render: () => <QRCodePanel channel={channel} />,
+    });
+  });
+}

app/react-native/src/manager/provider.js

@@ -20,7 +20,7 @@ export default class ReactProvider extends Provider {
     const websocketType = secured ? 'wss' : 'ws';
     let url = `${websocketType}://${domain}`;
     if (options.manualId) {
-      const pairedId = uuid().substr(-6);
+      const pairedId = uuid();
 
       this.pairedId = pairedId;
       url += `/pairedId=${this.pairedId}`;
@@ -29,6 +29,8 @@ export default class ReactProvider extends Provider {
     if (!this.channel) {
       this.channel = createChannel({ url });
       addons.setChannel(this.channel);
+
+      this.channel.emit('channelCreated', { pairedId: this.pairedId });
     }
   }
 
@@ -43,15 +45,6 @@ export default class ReactProvider extends Provider {
 
     const innerPreview = renderPreview ? renderPreview(kind, story) : null;
 
-    if (this.options.manualId) {
-      return (
-        <div>
-          Your ID: {this.pairedId}
-          {innerPreview}
-        </div>
-      );
-    }
-
     return innerPreview || <PreviewHelp />;
   }
 

examples/crna-kitchen-sink/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "devDependencies": {
     "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
+    "@storybook/addon-links": "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/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/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/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);

examples/storybook-hosted/client/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

examples/storybook-hosted/client/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2