Add react-storybook

.circleci/config.yml

@@ -1,9 +1,14 @@
 version: 2
-jobs:
-  build:
+
+aliases:
+  - &defaults
+    working_directory: ~/repo
     docker:
       - image: circleci/node:12-browsers
-    working_directory: ~/repo
+
+jobs:
+  build_and_test:
+    <<: *defaults
     steps:
       - checkout
       - run:
@@ -17,4 +22,27 @@ jobs:
             echo 'export CHROME_PATH=/opt/google/chrome/google-chrome' >> $BASH_ENV
             source $BASH_ENV
       - run: yarn
-      - run: yarn test
+      - run: yarn test
+      - persist_to_workspace:
+          root: .
+          paths:
+            - node_modules
+  deploy_ghpages:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: yarn deploy-storybook --ci
+
+workflows:
+  version: 2
+  build_test_and_deploy:
+    jobs:
+      - build_and_test
+      - deploy_ghpages:
+        requires:
+          - build
+        filters:
+          branches:
+            only: master

.storybook/addons.js

@@ -0,0 +1,3 @@
+import "@storybook/addon-actions/register";
+import "@storybook/addon-knobs/register";
+import "@storybook/addon-storysource/register";

.storybook/config.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { configure, addDecorator, addParameters } from "@storybook/react";
+import { themes } from "@storybook/theming";
+
+addParameters({
+  options: {
+    theme: themes.dark
+  }
+});
+
+import { ThemeProvider } from "styled-components";
+import GlobalStyle from "../src/ui/GlobalStyle";
+import theme from "../src/ui/theme";
+
+addDecorator(story => (
+  <ThemeProvider theme={theme}>
+    <>
+      <GlobalStyle />
+      {story()}
+    </>
+  </ThemeProvider>
+));
+
+// automatically import all files ending in *.stories.js
+configure([require.context("../src", true, /\.stories\.js$/)], module);

.storybook/presets.js

@@ -0,0 +1 @@
+module.exports = ["@storybook/addon-docs/react/preset"];

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:400,700" rel="stylesheet">

package.json

@@ -31,7 +31,9 @@
     "test-all": "ava",
     "unit-tests": "ava ./test/unit/**/*.test.js",
     "integration-tests": "concurrently --success \"first\" --kill-others \"ava ./test/integration\" \"yarn test-server\"",
-    "update-test-snapshots": "concurrently --success \"first\" --kill-others \"ava -u\" \"yarn test-server\""
+    "update-test-snapshots": "concurrently --success \"first\" --kill-others \"ava -u\" \"yarn test-server\"",
+    "storybook": "start-storybook",
+    "deploy-storybook": "storybook-to-ghpages"
   },
   "ava": {
     "files": [
@@ -101,6 +103,14 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.6.0",
+    "@storybook/addon-actions": "^5.2.0",
+    "@storybook/addon-docs": "^5.2.0",
+    "@storybook/addon-knobs": "^5.2.0",
+    "@storybook/addon-storysource": "^5.2.0",
+    "@storybook/react": "^5.2.0",
+    "@storybook/source-loader": "^5.2.0",
+    "@storybook/storybook-deployer": "^2.8.1",
+    "@storybook/theming": "^5.2.0",
     "ava": "2.3.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.0",

src/ui/inputs/BooleanInput.stories.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import BooleanInput from "./BooleanInput";
+
+export default {
+  title: "BooleanInput",
+  component: BooleanInput
+};
+
+export const booleanInput = () => <BooleanInput onChange={action("onChange")} />;
+
+export const checked = () => <BooleanInput value={true} onChange={action("onChange")} />;
+
+export const disabled = () => <BooleanInput disabled value={true} onChange={action("onChange")} />;

src/ui/inputs/Button.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Button, MediumButton, LargeButton, SecondaryButton, MenuButton } from "./Button";
+
+export default {
+  title: "Button",
+  component: Button
+};
+
+export const button = () => <Button>Default Button</Button>;
+
+export const disabled = () => <Button disabled>Medium Button</Button>;
+
+export const mediumButton = () => <MediumButton>Medium Button</MediumButton>;
+
+export const largeButton = () => <LargeButton>Large Button</LargeButton>;
+
+export const secondaryButton = () => <SecondaryButton>Secondary Button</SecondaryButton>;
+
+export const menuButton = () => <MenuButton>Menu Button</MenuButton>;

src/ui/inputs/ColorInput.js

@@ -68,3 +68,8 @@ ColorInput.propTypes = {
   value: PropTypes.object.isRequired,
   onChange: PropTypes.func
 };
+
+ColorInput.defaultProps = {
+  value: new Color(),
+  onChange: () => {}
+};

src/ui/inputs/ColorInput.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import ColorInput from "./ColorInput";
+
+export default {
+  title: "ColorInput",
+  component: ColorInput
+};
+
+export const colorInput = () => <ColorInput onChange={action("onChange")} />;

src/ui/inputs/CompoundNumericInput.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import CompoundNumericInput from "./CompoundNumericInput";
+
+export default {
+  title: "CompoundNumericInput",
+  component: CompoundNumericInput
+};
+
+export const compoundNumericInput = () => <CompoundNumericInput onChange={action("onChange")} />;

src/ui/inputs/EulerInput.js

@@ -17,7 +17,7 @@ export default class EulerInput extends Component {
   };
 
   static defaultProps = {
-    value: null,
+    value: new Euler(),
     onChange: () => {},
     smallStep: 0.1,
     mediumStep: 1,

src/ui/inputs/EulerInput.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import EulerInput from "./EulerInput";
+
+export default {
+  title: "EulerInput",
+  component: EulerInput
+};
+
+export const eulerInput = () => <EulerInput onChange={action("onChange")} />;

src/ui/inputs/FileInput.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import FileInput from "./FileInput";
+
+export default {
+  title: "FileInput",
+  component: FileInput
+};
+
+export const fileInput = () => <FileInput onChange={action("onChange")} />;

src/ui/inputs/NumericInput.js

@@ -214,6 +214,7 @@ NumericInput.propTypes = {
 };
 
 NumericInput.defaultProps = {
+  value: 0,
   smallStep: 0.025,
   mediumStep: 0.1,
   largeStep: 0.25,

src/ui/inputs/NumericInput.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import NumericInput from "./NumericInput";
+
+export default {
+  title: "NumericInput",
+  component: NumericInput
+};
+
+export const numericInput = () => <NumericInput onChange={action("onChange")} />;

src/ui/inputs/ProgressBar.stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import ProgressBar from "./ProgressBar";
+
+export default {
+  title: "ProgressBar",
+  component: ProgressBar
+};
+
+export const progressBar = () => <ProgressBar />;

src/ui/inputs/Scrubber.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import Scrubber from "./Scrubber";
+
+export default {
+  title: "Scrubber",
+  component: Scrubber
+};
+
+export const scrubber = () => <Scrubber onChange={action("onChange")}>Scrubber Label</Scrubber>;

src/ui/inputs/Slider.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import Slider from "./Slider";
+
+export default {
+  title: "Slider",
+  component: Slider
+};
+
+export const slider = () => <Slider onChange={action("onChange")} />;

src/ui/inputs/StringInput.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import StringInput from "./StringInput";
+
+export default {
+  title: "StringInput",
+  component: StringInput
+};
+
+export const stringInput = () => <StringInput onChange={action("onChange")} />;

src/ui/inputs/Vector3Input.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import Vector3Input from "./Vector3Input";
+
+export default {
+  title: "Vector3Input",
+  component: Vector3Input
+};
+
+export const vector3Input = () => <Vector3Input onChange={action("onChange")} />;