React native - Use Core

MIGRATION.md

@@ -309,6 +309,25 @@ https://url-of-storybook?path=/story/<storyId>
 
 The structure of `storyId` is a slugified `<selectedKind>--<selectedStory>` (slugified = lowercase, hyphen-separated). Each `storyId` must be unique. We plan to build more features into Storybook in upcoming versions based on this new structure.
 
+## Rename of the `--secure` cli parameter to `--https`
+
+Storybook for React Native's start commands & the Web versions' start command were a bit different, for no reason. 
+We've changed the start command for Reactnative to match the other.
+
+This means that when you previously used the `--secure` flag like so:
+
+```sh
+start-storybook --secure
+# or
+start-storybook --s
+```
+
+You have to replace it with:
+
+```sh
+start-storybook --https
+```
+
 ## From version 4.0.x to 4.1.x
 
 There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.

addons/ondevice-knobs/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@storybook/addons": "5.1.0-alpha.6",
+    "@storybook/core-events": "5.1.0-alpha.6",
     "core-js": "^2.6.5",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
@@ -32,7 +33,7 @@
     "react-native-switch": "^1.5.0"
   },
   "peerDependencies": {
-    "@storybook/addon-knobs": "5.0.0-alpha.5",
+    "@storybook/addon-knobs": "5.1.0-alpha.6",
     "react": "*",
     "react-native": "*"
   },

addons/ondevice-knobs/src/panel.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import PropTypes from 'prop-types';
-
+import { SELECT_STORY, FORCE_RE_RENDER } from '@storybook/core-events';
+import { SET, SET_OPTIONS, RESET, CHANGE, CLICK } from '@storybook/addon-knobs/events';
 import GroupTabs from './GroupTabs';
 import PropForm from './PropForm';
 
@@ -29,18 +30,16 @@ export default class Panel extends React.Component {
   componentDidMount() {
     const { channel } = this.props;
 
-    channel.on('addon:knobs:setKnobs', this.setKnobs);
-    channel.on('addon:knobs:setOptions', this.setOptions);
-
-    channel.on('selectStory', this.reset);
-
-    channel.emit('forceReRender');
+    channel.on(SET, this.setKnobs);
+    channel.on(SET_OPTIONS, this.setOptions);
+    channel.on(SELECT_STORY, this.reset);
+    channel.emit(FORCE_RE_RENDER);
   }
 
   componentWillUnmount() {
     const { channel } = this.props;
-    channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
-    channel.removeListener('selectStory', this.reset);
+    channel.removeListener(SET, this.setKnobs);
+    channel.removeListener(SELECT_STORY, this.reset);
   }
 
   onGroupSelect(name) {
@@ -60,12 +59,12 @@ export default class Panel extends React.Component {
   reset = () => {
     const { channel } = this.props;
     this.setState({ knobs: {} });
-    channel.emit('addon:knobs:reset');
+    channel.emit(RESET);
   };
 
   emitChange(changedKnob) {
     const { channel } = this.props;
-    channel.emit('addon:knobs:knobChange', changedKnob);
+    channel.emit(CHANGE, changedKnob);
   }
 
   handleChange(changedKnob) {
@@ -86,7 +85,7 @@ export default class Panel extends React.Component {
   handleClick(knob) {
     const { channel } = this.props;
 
-    channel.emit('addon:knobs:knobClick', knob);
+    channel.emit(CLICK, knob);
   }
 
   render() {

addons/storyshots/storyshots-puppeteer/package.json

@@ -30,7 +30,7 @@
     "regenerator-runtime": "^0.12.1"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "5.0.0-alpha.5"
+    "@storybook/addon-storyshots": "5.1.0-alpha.6"
   },
   "publishConfig": {
     "access": "public"

app/react-native-server/.npmignore

@@ -0,0 +1,2 @@
+docs
+.babelrc

app/react-native-server/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/server');

app/react-native-server/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@storybook/react-native-server",
+  "version": "5.1.0-alpha.6",
+  "description": "A better way to develop React Native Components for your app",
+  "keywords": [
+    "react",
+    "react-native",
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/app/react-native-server",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "bin": {
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.1.0-alpha.6",
+    "@storybook/channel-websocket": "5.1.0-alpha.6",
+    "@storybook/core": "5.1.0-alpha.6",
+    "@storybook/core-events": "5.1.0-alpha.6",
+    "@storybook/ui": "5.1.0-alpha.6",
+    "commander": "^2.19.0",
+    "global": "^4.3.2",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "uuid": "^3.3.2",
+    "webpack": "^4.23.1",
+    "ws": "^6.1.0"
+  },
+  "peerDependencies": {
+    "babel-loader": "^7.0.0 || ^8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

app/react-native-server/readme.md

@@ -0,0 +1,13 @@
+# Storybook Server for React Native
+Additional package for @storybook/react-native to support a web server and browser UI that runs alongside the RN on-device UI
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+## Usage
+After setting up Storybook for React Native install this package. 
+
+```shell
+npm install --save-dev @storybook/react-native-server
+```
+
+Then run `npx storybook start`

app/react-native/src/manager/provider.js → app/react-native-server/src/client/manager/provider.js

@@ -11,11 +11,6 @@ export default class ReactProvider extends Provider {
     super();
     this.options = options;
     this.selection = null;
-    try {
-      this.channel = addons.getChannel();
-    } catch (err) {
-      this.channel = undefined;
-    }
 
     const { secured, host, port } = options;
     const websocketType = secured ? 'wss' : 'ws';
@@ -38,30 +33,37 @@ export default class ReactProvider extends Provider {
     }
   }
 
-  renderPreview(kind, story) {
-    this.selection = { kind, story };
-    this.channel.emit(Events.SET_CURRENT_STORY, { kind, story });
-    const renderPreview = addons.getPreview();
+  getElements(type) {
+    return addons.getElements(type);
+  }
+
+  renderPreview(state, api) {
+    if (state.storiesHash[state.storyId]) {
+      const { kind, story } = state.storiesHash[state.storyId];
 
-    const innerPreview = renderPreview ? renderPreview(kind, story) : null;
-    return innerPreview || <PreviewHelp />;
+      this.selection = { kind, story };
+      api.emit(Events.SET_CURRENT_STORY, { kind, story });
+      // FIXME: getPreview not implemented yet.
+      if (addons.getPreview) {
+        const renderPreview = addons.getPreview();
+        if (renderPreview) {
+          return renderPreview(kind, story);
+        }
+      }
+    }
+    return <PreviewHelp />;
   }
 
   handleAPI(api) {
+    addons.loadAddons(api);
+
     api.onStory((kind, story) => {
       this.selection = { kind, story };
-      this.channel.emit(Events.SET_CURRENT_STORY, this.selection);
-    });
-    this.channel.on(Events.SELECT_STORY, ({ kind, story }) => {
-      api.selectStory(kind, story);
+      api.emit(Events.SET_CURRENT_STORY, this.selection);
     });
-    this.channel.on(Events.SET_STORIES, data => {
-      api.setStories(data.stories);
+    api.on(Events.GET_CURRENT_STORY, () => {
+      api.emit(Events.SET_CURRENT_STORY, this.selection);
     });
-    this.channel.on(Events.GET_CURRENT_STORY, () => {
-      this.channel.emit(Events.SET_CURRENT_STORY, this.selection);
-    });
-    this.channel.emit(Events.GET_STORIES);
-    addons.loadAddons(api);
+    api.emit(Events.GET_STORIES);
   }
 }

app/react-native-server/src/server/cli.js

@@ -0,0 +1,39 @@
+import path from 'path';
+import program from 'commander';
+
+export function parseList(str) {
+  return str.split(',');
+}
+
+function getCli() {
+  program
+    .option('-h, --host <host>', 'host to listen on', 'localhost')
+    .option('-p, --port <port>', 'port to listen on', 7007)
+    .option('-e, --environment [environment]', 'DEVELOPMENT/PRODUCTION environment for webpack')
+    .option('-i, --manual-id', 'allow multiple users to work with same storybook')
+    .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
+    .option(
+      '--https',
+      'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
+    )
+    .option(
+      '--ssl-ca <ca>',
+      'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
+      parseList
+    )
+    .option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
+    .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
+    .option('--smoke-test', 'Exit after successful start')
+    .option('--ci', "CI mode (skip interactive prompts, don't open browser")
+    .option('--quiet', 'Suppress verbose build output')
+    .parse(process.argv);
+
+  const configDir = path.resolve(program.configDir || './storybook');
+
+  return {
+    ...program,
+    configDir,
+  };
+}
+
+export default getCli;

app/react-native/src/server/index.js → app/react-native-server/src/server/index.js

@@ -1,17 +1,24 @@
-import express from 'express';
+#!/usr/bin/env node
+
 import querystring from 'querystring';
-import http from 'http';
 import ws from 'ws';
-import storybook from './middleware';
+import storybook from '@storybook/core/standalone';
+
+import extendOptions from './options';
+import getCli from './cli';
 
 export default class Server {
   constructor(options) {
-    this.options = options;
-    this.httpServer = http.createServer();
-    this.expressApp = express();
-    this.expressApp.use(storybook(options));
-    this.httpServer.on('request', this.expressApp);
-    this.wsServer = new ws.Server({ server: this.httpServer });
+    this.attachWS = this.attachWS.bind(this);
+    this.options = extendOptions(options, this.attachWS);
+  }
+
+  start() {
+    return storybook(this.options);
+  }
+
+  attachWS(server) {
+    this.wsServer = new ws.Server({ server });
     this.wsServer.on('connection', (s, req) => this.handleWS(s, req));
   }
 
@@ -32,8 +39,7 @@ export default class Server {
       });
     });
   }
-
-  listen(...args) {
-    this.httpServer.listen(...args);
-  }
 }
+
+const server = new Server(getCli());
+server.start();

app/react-native-server/src/server/options.js

@@ -0,0 +1,27 @@
+import { managerPreset } from '@storybook/core/server';
+import packageJson from '../../package.json';
+
+function extendOptions(options, extendServer) {
+  const { manualId, https: secured, host, port } = options;
+  const storybookOptions = { manualId, secured, host, port };
+
+  return {
+    ...options,
+    extendServer,
+    packageJson,
+    mode: 'dev',
+    ignorePreview: true,
+    corePresets: [
+      {
+        name: managerPreset,
+        options: { managerEntry: require.resolve('../client/manager') },
+      },
+      {
+        name: require.resolve('./rn-options-preset.js'),
+        options: { storybookOptions },
+      },
+    ],
+  };
+}
+
+export default extendOptions;

app/react-native-server/src/server/rn-options-preset.js

@@ -0,0 +1,15 @@
+import webpack from 'webpack';
+
+export async function managerWebpack(config, options) {
+  const { storybookOptions } = options;
+
+  return {
+    ...config,
+    plugins: [
+      ...config.plugins,
+      new webpack.DefinePlugin({
+        storybookOptions: JSON.stringify(storybookOptions),
+      }),
+    ],
+  };
+}

app/react-native/docs/manual-setup.md

@@ -84,7 +84,8 @@ RN application, e.g. on a tab or within an admin screen.
 
 ## Server support
 
-If you want to support having a storybook server running add following NPM script into your `package.json` file:
+If you want to support having a storybook server running install storybook server `npm install --save-dev @storybook/react-native-server`
+and add following NPM script into your `package.json` file:
 
 ```json
 {

app/react-native/docs/server.md

@@ -1,8 +1,5 @@
 # Storybook server
-The default usage of React Native Storybook till version 4 involved starting Storybook server.
-Starting from v4 we do not expect user to start the server since in most cases it is not really necessary.
-
-In case you still want to run Storybook server simply call `npm run storybook` or `npx storybook start`.
+Since storybook v5 the storybook server is a standalone package. To keep using storybook server make sure to install @storybook/react-native-server package.
 
 ## Benefits of storybook server