Experiment with Docz

.gitignore

@@ -25,8 +25,9 @@ yarn-error.log*
 # because we use yarn.lock
 package-lock.json
 
-# storybook
+# Storybook and Docz
 /storybook-static
+/.docz
 
 # coverage
-coverage*
+coverage*

doczrc.js

@@ -0,0 +1,37 @@
+// @flow
+import { RAW_COLORS } from './src/constants';
+import { css } from 'docz-plugin-css';
+
+export default {
+  title: 'Guppy',
+  description: 'A friendly application manager and task runner for React.js',
+  src: './src',
+  public: './public',
+  theme: 'docz-theme-default',
+  themeConfig: {
+    logo: {
+      src: '/public/icon.png',
+      width: 70,
+    },
+    colors: {
+      primary: RAW_COLORS.blue[700],
+    },
+    styles: {
+      // docz-theme-default global body styles (specifically, line-height) is interfering with
+      // xsmall btn component. This is a hacky override so btns get a line-height of 1.
+      body: `
+        font-family: "Source Sans Pro", sans-serif;
+        font-size: 16px;
+        line-height: 1;
+        p, a, h1, h2, h3, h4, table {
+          line-height: 1.6;
+        }
+        .bXQPyO, .iCcihC {
+          align-items: center;
+        }
+      `,
+    },
+  },
+  plugins: [css()],
+  menu: ['Guppy Style Guide', 'Components', 'Reusable Components', 'Colors'],
+};

netlify.toml

@@ -0,0 +1,8 @@
+[build]
+  command = 'yarn docz:build'
+  publish = '.docz/dist'
+
+[[redirects]]
+  from = '/*'
+  to = '/index.html'
+  status = 200

package.json

@@ -39,7 +39,9 @@
     "precommit": "lint-staged",
     "prepush": "yarn run flow",
     "build-storybook": "build-storybook -c .storybook -o storybook-static",
-    "storybook": "start-storybook -p 9001 -c .storybook"
+    "storybook": "start-storybook -p 9001 -c .storybook",
+    "docz:dev": "docz dev",
+    "docz:build": "docz build"
   },
   "lint-staged": {
     "linters": {
@@ -88,6 +90,9 @@
     "color": "3.0.0",
     "cross-env": "5.2.0",
     "css-loader": "0.28.9",
+    "docz": "1.1.0",
+    "docz-plugin-css": "0.11.0",
+    "docz-theme-default": "1.1.0",
     "dotenv": "5.0.0",
     "dotenv-expand": "4.2.0",
     "electron": "4.0.0",
@@ -133,10 +138,11 @@
     "prettier": "1.13.7",
     "raf": "3.4.0",
     "random-seed": "0.3.0",
-    "react": "16.3.2",
+    "react": "^16.8.5",
     "react-dev-utils": "6.0.0-next.66cc7a90",
     "react-docgen": "2.21.0",
-    "react-dom": "16.3.2",
+    "react-dom": "^16.8.5",
+    "react-hot-loader": "4.8.4",
     "react-icons-kit": "1.1.5",
     "react-instantsearch": "5.1.0",
     "react-motion": "0.5.2",

src/components/Button/ButtonBase.mdx

@@ -0,0 +1,20 @@
+---
+name: ButtonBase
+menu: Reusable Components
+---
+
+import { Playground, Props } from 'docz';
+import ButtonBase from './ButtonBase';
+
+# ButtonBase
+
+> Note: You probably don't want to use this component directly. It's just the
+> underlying shared bit of code between FillButton and StrokeButton.
+
+<Props of={ButtonBase} />
+
+## Basic usage
+
+<Playground>
+  <ButtonBase>Default</ButtonBase>
+</Playground>

src/components/Button/FillButton.mdx

@@ -0,0 +1,73 @@
+---
+name: FillButton
+menu: Reusable Components
+---
+
+import { Playground, Props } from 'docz';
+
+import { RAW_COLORS } from '../../constants';
+import FillButton from './FillButton';
+
+# FillButton
+
+<Props of={FillButton} />
+
+## Basic usage
+
+<Playground>
+  <FillButton>Default</FillButton>
+</Playground>
+
+## Sizes
+
+<Playground>
+  <FillButton size="xsmall">
+    Extra-small button
+  </FillButton>
+</Playground>
+
+<Playground>
+  <FillButton size="small">
+    Small button
+  </FillButton>
+</Playground>
+
+<Playground>
+  <FillButton size="medium">
+    Medium button
+  </FillButton>
+</Playground>
+
+<Playground>
+  <FillButton size="large">
+    Large button
+  </FillButton>
+</Playground>
+
+## Colors
+
+<Playground>
+  <FillButton colors={[RAW_COLORS.green[500], RAW_COLORS.green[500]]}>
+    Solid green
+  </FillButton>
+</Playground>
+
+<Playground>
+  <FillButton colors={[RAW_COLORS.orange[500], RAW_COLORS.pink[300]]}>
+    Orange to pink
+  </FillButton>
+</Playground>
+
+<Playground>
+  <FillButton colors={[RAW_COLORS.teal[700], RAW_COLORS.lime[500]]}>
+    Teal to lime
+  </FillButton>
+</Playground>
+
+## Disabled
+
+<Playground>
+  <FillButton disabled>
+  FillButton
+  </FillButton>
+</Playground>

src/components/Button/StrokeButton.mdx

@@ -0,0 +1,86 @@
+---
+name: StrokeButton
+menu: Reusable Components
+---
+
+import { Playground, Props } from 'docz';
+import { Toggle as ToggleState } from 'react-powerplug';
+
+import { RAW_COLORS } from '../../constants';
+import StrokeButton from './StrokeButton';
+
+# StrokeButton
+
+<Props of={StrokeButton} />
+
+## Basic usage
+
+<Playground>
+  <StrokeButton>Default</StrokeButton>
+</Playground>
+
+## Sizes
+
+<Playground>
+  <StrokeButton size="xsmall">
+    Extra-small button
+  </StrokeButton>
+</Playground>
+
+<Playground>
+  <StrokeButton size="small">
+    Small button
+  </StrokeButton>
+</Playground>
+
+<Playground>
+  <StrokeButton size="medium">
+    Medium button
+  </StrokeButton>
+</Playground>
+
+<Playground>
+  <StrokeButton size="large">
+    Large button
+  </StrokeButton>
+</Playground>
+
+## Colors
+
+<Playground>
+  <StrokeButton strokeColors={[RAW_COLORS.green[500], RAW_COLORS.green[500]]}>
+    Solid green
+  </StrokeButton>
+</Playground>
+
+<Playground>
+  <StrokeButton strokeColors={[RAW_COLORS.orange[500], RAW_COLORS.pink[300]]}>
+    Orange to pink
+  </StrokeButton>
+</Playground>
+
+<Playground>
+  <StrokeButton strokeColors={[RAW_COLORS.teal[700], RAW_COLORS.lime[500]]}>
+    Teal to lime
+  </StrokeButton>
+</Playground>
+
+## Disabled
+
+<Playground>
+  <StrokeButton disabled>
+    StrokeButton
+  </StrokeButton>
+</Playground>
+
+## Toggleable
+
+<Playground>
+  <ToggleState>
+    {({ on, toggle }) => (
+      <StrokeButton showStroke={on} onClick={toggle}>
+        Toggle me!
+      </StrokeButton>
+    )}
+  </ToggleState>
+</Playground>