Move Storybook to the repository root (#275)

Move Storybook to the repository root

.circleci/config.yml

@@ -28,10 +28,6 @@ references:
     keys:
       - cache-docs-v1-{{ .Branch }}-{{ checksum "./tools/x-docs/package.json" }}
 
-  cache_keys_storybook: &cache_keys_storybook
-    keys:
-      - cache-storybook-v1-{{ .Branch }}-{{ checksum "./tools/x-storybook/package.json" }}
-
   #
   # Cache creation
   #
@@ -47,12 +43,6 @@ references:
       paths:
         - ./tools/x-docs/node_modules/
 
-  create_cache_storybook: &create_cache_storybook
-    save_cache:
-      key: cache-storybook-v1-{{ .Branch }}-{{ checksum "./tools/x-storybook/package.json" }}
-      paths:
-        - ./tools/x-storybook/node_modules/
-
   #
   # Cache restoration
   #
@@ -64,10 +54,6 @@ references:
     restore_cache:
       <<: *cache_keys_docs
 
-  restore_cache_storybook: &restore_cache_storybook
-    restore_cache:
-      <<: *cache_keys_storybook
-
   #
   # Filters
   #
@@ -108,7 +94,6 @@ jobs:
           command: git clone --depth 1 [email protected]:Financial-Times/next-ci-shared-helpers.git .circleci/shared-helpers
       - *restore_cache_root
       - *restore_cache_docs
-      - *restore_cache_storybook
       - run:
           name: Install project dependencies
           command: make install
@@ -117,7 +102,6 @@ jobs:
           command: make build
       - *create_cache_root
       - *create_cache_docs
-      - *create_cache_storybook
       - persist_to_workspace:
           root: *workspace_root
           paths:

.storybook/.browserslistrc

@@ -0,0 +1,4 @@
+last 2 Chrome versions
+last 2 FF versions
+last 2 Edge versions
+Safari >= 12

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-viewport/register'

tools/x-storybook/.storybook/config.js → .storybook/config.js

@@ -1,6 +1,6 @@
 import { configure } from '@storybook/react';
 import buildStory from './build-story';
-import * as components from '../register-components';
+import * as components from './register-components';
 
 configure(() => {
 	components.forEach(({ stories, ...data }) => {

.storybook/register-components.js

@@ -0,0 +1,7 @@
+const components = [
+	require('../components/x-teaser/stories'),
+	require('../components/x-increment/stories'),
+	require('../components/x-styling-demo/stories'),
+];
+
+module.exports = components;

.storybook/webpack.config.js

@@ -0,0 +1,49 @@
+// This configuration extends the existing Storybook Webpack config.
+// See https://storybook.js.org/configurations/custom-webpack-config/ for more info.
+
+const path = require('path');
+const fs = require('fs');
+const xEngine = require('../packages/x-engine/src/webpack');
+const CopyPlugin = require('copy-webpack-plugin');
+const WritePlugin = require('write-file-webpack-plugin');
+
+const excludePaths = [/node_modules/, /dist/];
+
+const cssCopy = fs.readdirSync(path.resolve('components')).reduce((mains, component) => {
+	const componentPkg = path.resolve('components', component, 'package.json');
+
+	if (fs.existsSync(componentPkg)) {
+		const pkg = require(componentPkg);
+
+		if (pkg.style) {
+			const styleResolved = path.resolve('components', component, pkg.style);
+
+			return mains.concat({
+				from: styleResolved,
+				to: path.resolve(__dirname, 'static/components', path.basename(pkg.name), pkg.style)
+			});
+		}
+	}
+
+	return mains;
+}, []);
+
+module.exports = ({ config }) => {
+	// HACK: extend existing JS rule to ensure all dependencies are correctly ignored
+	// from Babel transpilation.
+	// https://github.com/storybooks/storybook/issues/3346#issuecomment-459439438
+	const jsRule = config.module.rules.find((rule) => rule.test.test('.jsx'));
+	jsRule.exclude = excludePaths;
+
+	// HACK: Instruct Babel to check module type before injecting Core JS polyfills
+	// https://github.com/i-like-robots/broken-webpack-bundle-test-case
+	const babelConfig = jsRule.use.find(({ loader }) => loader === 'babel-loader');
+	babelConfig.options.sourceType = 'unambiguous';
+
+	// HACK: Ensure we only bundle one instance of React
+	config.resolve.alias.react = require.resolve('react');
+
+	config.plugins.push(xEngine(), new CopyPlugin(cssCopy), new WritePlugin());
+
+	return config;
+};

docs/get-started/working-with-x-dash.md

@@ -19,9 +19,7 @@ The repository groups related code together in directories. UI components are st
 │    ├ readme.md
 │    └ package.json
 ├ tools/
-│  ├ x-docs/
-│  │ └ package.json
-│  └ x-storybook/
+│  └ x-docs/
 │    └ package.json
 ├ readme.md
 └ package.json

package.json

@@ -2,45 +2,52 @@
   "private": true,
   "scripts": {
     "clean": "git clean -fxdi",
-    "build": "athloi run build",
+    "build": "athloi run build && npm run build-storybook",
     "jest": "jest -c jest.config.js",
     "pretest": "npm run build",
     "test": "npm run lint && npm run jest",
     "lint": "eslint . --ext=js,jsx",
     "blueprint": "node private/scripts/blueprint.js",
-    "start-storybook": "(cd tools/x-storybook && npm start)",
+    "start-storybook": "start-storybook -p ${STORYBOOK_PORT:-9001} -s .storybook/static -h local.ft.com",
+    "build-storybook": "build-storybook -o dist/storybook -s .storybook/static",
     "start-docs": "(cd tools/x-docs && npm start)",
     "heroku-postbuild": "npm run build"
   },
-  "dependencies": {
+  "devDependencies": {
+    "@babel/core": "^7.1.5",
     "@financial-times/athloi": "^1.0.0-beta.19",
+    "@storybook/addon-knobs": "^5.0.10",
+    "@storybook/addon-viewport": "^5.0.10",
+    "@storybook/react": "^5.0.10",
     "acorn": "^6.0.2",
     "acorn-jsx": "^5.0.0",
+    "babel-loader": "^8.0.4",
+    "copy-webpack-plugin": "^4.6.0",
     "eslint": "^5.1.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-jest": "^21.17.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.10.0",
     "espree": "^4.1.0",
     "fetch-mock": "^6.5.2",
+    "jest": "^24.7.1",
+    "node-sass": "^4.11.0",
     "react": "^16.3.1",
-    "react-test-renderer": "^16.3.1"
+    "react-helmet": "^5.2.0",
+    "react-test-renderer": "^16.3.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "write-file-webpack-plugin": "^4.5.0"
   },
   "x-dash": {
     "engine": {
-      "server": {
-        "runtime": "react",
-        "factory": "createElement",
-        "component": "Component"
-      }
+      "browser": "react",
+      "server": "react"
     }
   },
   "workspaces": [
     "components/*",
     "packages/*",
     "tools/*"
-  ],
-  "devDependencies": {
-    "jest": "^24.7.1"
-  }
+  ]
 }

tools/x-docs/package.json

@@ -11,7 +11,6 @@
   "license": "ISC",
   "devDependencies": {
     "@financial-times/x-logo": "file:../../packages/x-logo",
-    "@financial-times/x-storybook": "file:../x-storybook",
     "case": "^1.5.5",
     "gatsby": "^2.0.11",
     "gatsby-remark-autolink-headers": "^2.0.6",

tools/x-docs/static/storybook

@@ -1 +1 @@
-../node_modules/@financial-times/x-storybook/dist/storybook/
+../../../.storybook/dist/