Add React Storybook integration

modules/upload/client-react/netLink.js

@@ -1,7 +1,7 @@
 import { BatchHttpLink } from 'apollo-link-batch-http';
 import { ApolloLink } from 'apollo-link';
 import { createUploadLink } from 'apollo-upload-client';
-import extractFiles from 'extract-files';
+import * as extractFiles from 'extract-files';
 import { cloneDeep } from 'lodash';
 
 export default uri =>

package.json

@@ -18,6 +18,7 @@
     "watch:android": "zen -e android -d client -d ios watch",
     "watch:ios": "zen -e ios -d client -d android watch",
     "watch-client": "cross-env DISABLE_SSR=true lerna run --scope=client watch --stream",
+    "storybook": "lerna run --scope=client storybook --stream",
     "cli": "node tools/cli",
     "stripe:setup": "lerna run --scope=server stripe:setup",
     "seed": "lerna run --scope=server seed --stream",

packages/client-angular/package.json

@@ -62,7 +62,7 @@
     "apollo-link-state": "^0.4.1",
     "apollo-link-ws": "^1.0.3",
     "apollo-logger": "^0.3.2",
-    "apollo-upload-client": "^8.0.0",
+    "apollo-upload-client": "^10.0.0",
     "graphql": "^14.1.1",
     "minilog": "^3.1.0",
     "rxjs": "^6.3.3",

packages/client-vue/package.json

@@ -48,12 +48,12 @@
     "apollo-link-state": "^0.4.1",
     "apollo-link-ws": "^1.0.3",
     "apollo-logger": "^0.3.2",
-    "apollo-upload-client": "^8.0.0",
+    "apollo-upload-client": "^10.0.0",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.0-rc.19",
     "error-stack-parser": "^2.0.1",
-    "extract-files": "^3.1.0",
+    "extract-files": "^5.0.0",
     "filesize": "^3.5.11",
     "graphql": "^14.1.1",
     "graphql-iso-date": "^3.5.0",

packages/client/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

packages/client/.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /\.stories\.[jt]sx?$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

packages/client/.storybook/webpack.config.js

@@ -0,0 +1,9 @@
+const createConfig = require('@larix/zen').createConfig;
+
+module.exports = async ({ config, mode }) => {
+  return createConfig({
+    cmd: mode === 'DEVELOPMENT' ? 'watch' : 'build',
+    builderOverrides: { stack: ['storybook'] },
+    genConfigOverrides: Object.assign({ merge: { entry: 'replace', output: 'replace' } }, config)
+  });
+};

packages/client/package.json

@@ -14,7 +14,9 @@
     "lint": "yarn eslint && yarn tslint",
     "watch": "zen watch",
     "heroku-postbuild": "yarn build",
-    "cli": "node ../../tools/cli"
+    "cli": "node ../../tools/cli",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -60,12 +62,12 @@
     "apollo-link-state": "^0.4.1",
     "apollo-link-ws": "^1.0.3",
     "apollo-logger": "^0.3.2",
-    "apollo-upload-client": "^8.0.0",
+    "apollo-upload-client": "^10.0.0",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.3.1",
     "connected-react-router": "^5.0.0",
     "error-stack-parser": "^2.0.1",
-    "extract-files": "^3.1.0",
+    "extract-files": "^5.0.0",
     "filesize": "^3.5.11",
     "formik": "^1.3.1",
     "graphql": "^14.1.1",
@@ -101,6 +103,11 @@
     "subscriptions-transport-ws": "^0.9.4"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.1.1",
+    "@storybook/addon-links": "^5.1.1",
+    "@storybook/addons": "^5.1.1",
+    "@storybook/react": "^5.1.1",
+    "@types/storybook__react": "^4.0.0",
     "@types/chai": "^4.1.4",
     "@types/jest": "^24.0.13",
     "@types/jsdom": "^12.2.0",
@@ -116,6 +123,7 @@
     "@types/webpack-env": "^1.13.6",
     "apollo-utilities": "^1.0.3",
     "autoprefixer": "^8.3.0",
+    "babel-loader": "^8.0.6",
     "babel-plugin-styled-components": "^1.10.0",
     "chai": "^4.1.2",
     "chai-http": "^4.0.0",

packages/client/stories/index.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+const { Button, Welcome } = require('@storybook/react/demo');
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));

packages/mobile/package.json

@@ -50,9 +50,9 @@
     "apollo-link-state": "^0.4.1",
     "apollo-link-ws": "^1.0.3",
     "apollo-logger": "^0.3.2",
-    "apollo-upload-client": "^8.0.0",
+    "apollo-upload-client": "^10.0.0",
     "expo": "^32.0.0",
-    "extract-files": "^3.1.0",
+    "extract-files": "^5.0.0",
     "filesize": "^3.5.11",
     "graphql": "^14.1.1",
     "graphql-iso-date": "^3.5.0",

typings/typings.d.ts

@@ -31,3 +31,5 @@ declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
 }
+
+declare module "extract-files";