update to docz v1 beta

doczrc.js

@@ -1,4 +1,6 @@
+// @flow
 import { COLORS } from './src/constants';
+import { css } from 'docz-plugin-css';
 
 export default {
   title: 'Guppy',
@@ -10,20 +12,6 @@ export default {
       primary: COLORS.blue[700],
     },
   },
-  modifyBundlerConfig: config => {
-    config.module.rules.push({
-      test: /\.css/i,
-      use: [
-        require.resolve('style-loader'),
-        {
-          loader: require.resolve('css-loader'),
-          options: {
-            importLoaders: 1,
-          },
-        },
-      ],
-    });
-
-    return config;
-  },
+  plugins: [css()],
+  menu: ['Guppy Style Guide', 'Components', 'Reusable Components', 'Shared'],
 };

package.json

@@ -45,11 +45,16 @@
     "build-docz": "docz build"
   },
   "lint-staged": {
-    "*.{js,jsx,mjs}": [
-      "npm run prettier",
-      "eslint",
-      "git add"
-    ]
+    "linters": {
+      "*.{js,jsx,mjs}": [
+        "npm run prettier",
+        "eslint",
+        "git add"
+      ]
+    }
+  },
+  "resolutions": {
+    "ansi-styles": "^3.2.0"
   },
   "dependencies": {
     "create-react-app": "1.5.2",
@@ -89,8 +94,9 @@
     "color": "3.0.0",
     "cross-env": "5.2.0",
     "css-loader": "0.28.9",
-    "docz": "0.11.2",
-    "docz-theme-default": "0.11.2",
+    "docz": "^1.0.0-rc.3",
+    "docz-plugin-css": "^0.11.0",
+    "docz-theme-default": "^1.0.0-rc.3",
     "dotenv": "5.0.0",
     "dotenv-expand": "4.2.0",
     "electron": "4.0.0",
@@ -135,10 +141,10 @@
     "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-icons-kit": "1.1.5",
     "react-instantsearch": "5.1.0",
     "react-motion": "0.5.2",

src/components/Button/ButtonBase.mdx

@@ -1,10 +1,10 @@
 ---
 name: ButtonBase
-menu: Button
+menu: Reusable Components
 ---
 
 import { Component, Fragment } from 'react'
-import { Playground, PropsTable } from 'docz'
+import { Playground, Props } from 'docz'
 
 import { COLORS } from '../../constants'
 import ButtonBase from './ButtonBase'
@@ -14,7 +14,7 @@ import ButtonBase from './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.
 
-<PropsTable of={ButtonBase} />
+<Props of={ButtonBase} />
 
 ## Basic usage
 

src/components/Button/FillButton.mdx

@@ -1,16 +1,16 @@
 ---
 name: FillButton
-menu: Button
+menu: Reusable Components
 ---
 
-import { Playground, PropsTable } from 'docz'
+import { Playground, Props } from 'docz'
 
 import { COLORS } from '../../constants'
 import FillButton from './FillButton'
 
 # FillButton
 
-<PropsTable of={FillButton} />
+<Props of={FillButton} />
 
 
 ## Basic usage

src/components/Button/StrokeButton.mdx

@@ -1,17 +1,17 @@
 ---
 name: StrokeButton
-menu: Button
+menu: Reusable Components
 ---
 
-import { Playground, PropsTable } from 'docz'
+import { Playground, Props } from 'docz'
 import { Toggle as ToggleState } from 'react-powerplug'
 
 import { COLORS } from '../../constants'
 import StrokeButton from './StrokeButton'
 
 # StrokeButton
 
-<PropsTable of={StrokeButton} />
+<Props of={StrokeButton} />
 
 
 ## Basic usage

src/components/Logo/Logo.mdx

@@ -1,13 +1,15 @@
 ---
 name: Logo
+menu: Components
 ---
-import { Playground, PropsTable } from 'docz'
+
+import { Playground, Props } from 'docz'
 
 import Logo from './Logo'
 
 # Logo
 
-<PropsTable of={Logo} />
+<Props of={Logo} />
 
 ## Basic Usage
 

src/components/Toggle/toggle.mdx

@@ -1,8 +1,9 @@
 ---
 name: Toggle
+menu: Reusable Components
 ---
 
-import { Playground, PropsTable } from 'docz'
+import { Playground, Props } from 'docz'
 import { Toggle as ToggleState } from 'react-powerplug'
 import { Tooltip } from 'react-tippy';
 
@@ -14,7 +15,7 @@ import 'react-tippy/dist/tippy.css';
 
 # Toggle
 
-<PropsTable of={Toggle} />
+<Props of={Toggle} />
 
 
 ## Default

src/components/WhimsicalInstaller/WhimsicalInstaller.mdx

@@ -1,7 +1,9 @@
 ---
 name: WhimsicalInstaller
+menu: Components
 ---
-import { Playground, PropsTable } from 'docz'
+
+import { Playground, Props } from 'docz'
 
 import { COLORS } from '../../constants'
 
@@ -10,7 +12,7 @@ import WhimsicalInstaller from './WhimsicalInstaller'
 
 # WhimsicalInstaller
 
-<PropsTable of={WhimsicalInstaller} />
+<Props of={WhimsicalInstaller} />
 
 
 ## Current Usage

src/stories/colors/colors.mdx

@@ -1,6 +1,8 @@
 ---
 name: Colors
+menu: Shared
 ---
+
 import { COLORS } from '../../constants';
 import Heading from '../../components/Heading';
 import ColorList from './ColorList';

src/style-guide.mdx

@@ -0,0 +1,12 @@
+---
+name: Guppy Style Guide
+route: '/'
+---
+
+# Style Guide
+
+blah
+
+## Usage
+
+blah