[demo] add package + storybook (#25)

* [demo] add package + storybook

* [demo] add color stories

* [demo] update readme, add gh-pages hooks, remove vx deps

* [demo] remove nesting for color stories

* [gh-pages] run postrelease

* [gh-pages] add link in readme

* [demo] exclude demo package from build script

.gitignore

@@ -1,4 +1,6 @@
 .babelrc
+.cache
+.DS_Store
 .eslintcache
 .eslintignore
 .eslintrc.js

package.json

@@ -6,15 +6,16 @@
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "build": "yarn run build:cjs && yarn run build:esm",
-    "build:cjs": "NODE_ENV=production beemo babel ./src --out-dir lib/ --minify --workspaces=*",
-    "build:esm": "NODE_ENV=production beemo babel ./src --out-dir esm/ --esm --minify --workspaces=*",
-    "lint": "beemo create-config prettier && beemo eslint \"./packages/*/{src,test}/**/*.{js,jsx}\"",
+    "build:cjs": "NODE_ENV=production beemo babel ./src --out-dir lib/ --minify --workspaces=\"@superset-ui/!(demo)\"",
+    "build:esm": "NODE_ENV=production beemo babel ./src --out-dir esm/ --esm --minify --workspaces=\"@superset-ui/!(demo)\"",
+    "lint": "beemo create-config prettier && beemo eslint \"./packages/*/{src,test,storybook}/**/*.{js,jsx}\"",
     "jest": "beemo jest --color --coverage",
+    "postrelease": "lerna run gh-pages",
     "prepare-release": "git checkout master && git pull --rebase origin master && lerna bootstrap && yarn run test",
     "prerelease": "yarn run build",
     "pretest": "yarn run lint",
-    "prettier": "beemo prettier \"./packages/*/{src,test}/**/*.{js,jsx,json,md}\"",
-    "release": "yarn run prepare-release && lerna publish",
+    "prettier": "beemo prettier \"./packages/*/{src,test,storybook}/**/*.{js,jsx,json,md}\"",
+    "release": "yarn run prepare-release && lerna publish && yarn run postrelease",
     "test": "yarn run jest",
     "test:watch": "beemo create-config jest && jest --watch"
   },
@@ -65,7 +66,7 @@
     }
   },
   "lint-staged": {
-    "./packages/*/{src,test}/**/*.{js,jsx,json,md}": [
+    "./packages/*/{src,test,storybook}/**/*.{js,jsx,json,md}": [
       "yarn run prettier --write",
       "git add"
     ]

packages/superset-ui-demo/README.md

@@ -0,0 +1,53 @@
+## @superset-ui/demo
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/demo.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/demo.svg?style=flat)
+[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-demo&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-demo)
+
+Storybook of `@superset-ui` packages. See it live at
+[apache-superset.github.io/superset-ui](https://apache-superset.github.io/superset-ui)
+
+### Development
+
+#### Run storybook
+
+To view the storybook locally, you should first run `yarn install && yarn run bootstrap` in the
+`@superset-ui` monorepo root directory, which will install all dependencies for this package and
+sym-link any `@superset-ui` packages to your local system.
+
+After that run `yarn run storybook` which will open up a dev server at http://localhost:9001.
+
+#### Adding new stories
+
+###### Existing package
+
+If stories already exist for the package you are adding, simply extend the `examples` already
+exported for that package in the `storybook/stories/<package>/index.js` file.
+
+###### New package
+
+If you are creating stories for a package that doesn't yet have any stories, follow these steps:
+
+1. Add any new package dependencies (including any `@superset-ui/*` packages) via
+   `yarn add <package>`.
+
+2. Create a new folder that mirrors the package name
+
+   > e.g., `mkdir storybook/stories/superset-ui-color/`
+
+3. Add an `index.js` file to that folder with a default export with the following shape:
+
+> you can use the `|` separator within the `storyPath` string to denote _nested_ stories e.g.,
+> `storyPath: '@superset-ui/package|Nested i|Nested ii'`
+
+```javascript
+ default export {
+   examples: [
+     {
+       storyPath: <string>,
+       storyName: <string>,
+       renderStory: <func> () => node,
+     },
+     ...
+   ]
+ };
+```

packages/superset-ui-demo/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@superset-ui/demo",
+  "version": "0.0.0",
+  "description": "Storybook for Superset UI ✨",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "gh-pages:clean": "rm -rf _gh-pages",
+    "gh-pages:build": "build-storybook -o _gh-pages -c storybook-config",
+    "gh-pages:publish": "git-directory-deploy --directory _gh-pages",
+    "gh-pages": "npm run gh-pages:clean && npm run gh-pages:build && npm run gh-pages:publish && npm run gh-pages:clean",
+    "storybook": "start-storybook -p 9001 -c storybook-config"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui.git"
+  },
+  "keywords": [
+    "storybook",
+    "superset",
+    "ui",
+    "visualization",
+    "analysis",
+    "data"
+  ],
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
+  "dependencies": {
+    "@babel/core": "^7.1.2",
+    "@storybook/addon-knobs": "^4.0.2",
+    "@storybook/addon-options": "^4.0.3",
+    "@storybook/react": "^4.0.2",
+    "@superset-ui/color": "^0.4.0",
+    "babel-loader": "^8.0.4",
+    "git-directory-deploy": "^1.5.1",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "storybook-addon-jsx": "^5.4.0"
+  }
+}

packages/superset-ui-demo/storybook-config/addons.js

@@ -0,0 +1,4 @@
+// note that the import order here determines the order in the UI!
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-options/register';
+import 'storybook-addon-jsx/register';

packages/superset-ui-demo/storybook-config/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+function loadStorybook() {
+  require('./storybook.css');
+  require('../storybook/storybookInfo'); // this customizes the UI (labels, etc.)
+  require('../storybook/stories'); // all of the stories
+}
+
+configure(loadStorybook, module);

packages/superset-ui-demo/storybook-config/storybook.css

@@ -0,0 +1,8 @@
+html,
+body,
+#root {
+  height: 100%;
+  font-family: BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
+  font-weight: 200;
+  color: #484848;
+}

packages/superset-ui-demo/storybook/stories/index.js

@@ -0,0 +1,42 @@
+import { setAddon, storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import JSXAddon from 'storybook-addon-jsx';
+
+setAddon(JSXAddon);
+
+const EMPTY_EXAMPLES = [
+  {
+    renderStory: () => 'Does your default export have an `examples` key?',
+    storyName: 'No examples found',
+  },
+];
+
+/*
+ * Below we crawl the dir + subdirs looking for index files of stories
+ * Each index is expected to have a default export with examples key containing
+ * an array of examples. Each example should have the shape:
+ *    { storyPath: string, storyName: string, renderStory: fn() => node }
+ *
+ */
+const requireContext = require.context('./', /* subdirs= */ true, /index\.jsx?$/);
+
+requireContext.keys().forEach(packageName => {
+  const packageExport = requireContext(packageName);
+  if (packageExport && packageExport.default && !Array.isArray(packageExport.default)) {
+    const { examples = EMPTY_EXAMPLES } = packageExport.default;
+
+    examples.forEach(example => {
+      const {
+        storyPath = 'Missing story path',
+        storyName = 'Missing name',
+        renderStory = () => 'Missing `renderStory`',
+        options = {},
+      } = example;
+
+      storiesOf(storyPath, module)
+        .addParameters({ options })
+        .addDecorator(withKnobs)
+        .addWithJSX(storyName, renderStory);
+    });
+  }
+});

packages/superset-ui-demo/storybook/stories/superset-ui-color/CategoricalStories.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import AirbnbPalettes from '@superset-ui/color/lib/colorSchemes/categorical/airbnb';
+import D3Palettes from '@superset-ui/color/lib/colorSchemes/categorical/d3';
+import GooglePalettes from '@superset-ui/color/lib/colorSchemes/categorical/google';
+import LyftPalettes from '@superset-ui/color/lib/colorSchemes/categorical/lyft';
+import RenderPalettes from './RenderPalettes';
+
+export default [
+  {
+    renderStory: () =>
+      [
+        { palettes: AirbnbPalettes, storyName: 'Airbnb' },
+        { palettes: D3Palettes, storyName: 'd3' },
+        { palettes: GooglePalettes, storyName: 'Google' },
+        { palettes: LyftPalettes, storyName: 'Lyft' },
+      ].map(({ palettes, storyName }) => (
+        <RenderPalettes key={storyName} title={storyName} palettes={palettes} />
+      )),
+    storyName: 'Categorical Palettes',
+    storyPath: '@superset-ui/color',
+  },
+];

packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.jsx

@@ -0,0 +1,35 @@
+/* eslint react/prop-types: 'off' */
+import React from 'react';
+
+export default function RenderPalettes({ title, palettes }) {
+  return (
+    <div>
+      {title && <h2>{title}</h2>}
+      <table>
+        <tbody>
+          {palettes.map(({ colors, name, label }) => (
+            <tr key={label || name}>
+              <td className="palette-label">
+                <strong>{label || name}</strong>
+              </td>
+              <td>
+                <div className="palette-container">
+                  {colors.map((color, i) => (
+                    <div
+                      key={color}
+                      className="palette-item"
+                      style={{
+                        backgroundColor: color,
+                        marginRight: i === colors.length - 1 ? 0 : 2,
+                      }}
+                    />
+                  ))}
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

packages/superset-ui-demo/storybook/stories/superset-ui-color/SequentialStories.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import CommonPalettes from '@superset-ui/color/lib/colorSchemes/sequential/common';
+import D3Palettes from '@superset-ui/color/lib/colorSchemes/sequential/d3';
+import RenderPalettes from './RenderPalettes';
+
+export default [
+  {
+    renderStory: () =>
+      [
+        { palettes: CommonPalettes, storyName: 'Common' },
+        { palettes: D3Palettes, storyName: 'd3' },
+      ].map(({ palettes, storyName }) => (
+        <RenderPalettes key={storyName} title={storyName} palettes={palettes} />
+      )),
+    storyName: 'Sequential Palettes',
+    storyPath: '@superset-ui/color',
+  },
+];

packages/superset-ui-demo/storybook/stories/superset-ui-color/color-styles.css

@@ -0,0 +1,15 @@
+.palette-label {
+  margin: 4px 12px 4px 0;
+}
+
+.palette-container {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #eaeaea;
+  width: fit-content;
+}
+
+.palette-item {
+  width: 16px;
+  height: 16px;
+}

packages/superset-ui-demo/storybook/stories/superset-ui-color/index.js

@@ -0,0 +1,7 @@
+import CategoricalStories from './CategoricalStories';
+import SequentialStories from './SequentialStories';
+import './color-styles.css';
+
+export default {
+  examples: [...CategoricalStories, ...SequentialStories],
+};

packages/superset-ui-demo/storybook/storybookInfo.js

@@ -0,0 +1,20 @@
+import { addDecorator } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
+
+addDecorator(
+  withOptions({
+    addonPanelInRight: false,
+    enableShortcuts: false,
+    goFullScreen: false,
+    hierarchySeparator: /\|/,
+    // hierarchyRootSeparator: null,
+    name: '✨ Superset UI',
+    selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
+    showAddonPanel: true,
+    showSearchBox: false,
+    showStoriesPanel: true,
+    sidebarAnimations: true,
+    sortStoriesByKind: false,
+    url: '#',
+  }),
+);