Storybook (#1030)

* Storybook + playground migration
* Polish stories
* Fix playground, READMEs, CI integration

Author: Luke Bowerman

.travis.yml

@@ -6,15 +6,16 @@ cache:
     - node_modules
 jobs:
   include:
-    - script: "yarn run-p -c lint:css lint:es"
+    - script: 'yarn run-p -c lint:css lint:es'
       name: ESLint & Stylelint
-    - script: "yarn build"
-      name: "Build: Babel, Typescript (lib/*.d.ts)"
-    - script: "yarn test"
-      name: "Jest Test Suite"
-    - script: "yarn workspace www build"
-      name: "Gatsby"
-
+    - script: 'yarn build'
+      name: 'Build: Babel, Typescript (lib/*.d.ts)'
+    - script: 'yarn test'
+      name: 'Jest Test Suite'
+    - script: 'yarn workspace www build'
+      name: 'Gatsby'
+    - script: 'yarn workspace storybook build'
+      name: 'Storybook'
 branches:
   only:
     - master

README.md

@@ -34,9 +34,13 @@ We recommend using [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm#in
 - [@looker/icons](./packages/icons/README.md) — SVG icon library, normally consumed by the `<Icon />` component in our shared component library
 - [@looker/components-test-utils](./packages/test-utils/README.md) — Useful functions for mocking values and testing components.
 - [www](./packages/www/README.md) — The Gatsby site which powers our living style guide
-- [playground](./packages/playground/README.md) — A convenient React environment used for developing Looker UI Components
 - [server](./packages/server/README.md) — A local proxy server used for querying data from production endpoints while in development.
 
+## Applications
+
+- [playground](./playground/README.md) — A convenient React environment used for developing Looker UI Components
+- [storybook](./storybook/README.md) — Storybook is a tool for developing UI components in isolation
+
 ### Common Project Commands
 
 - **yarn develop** shortcut for booting up www, playground, and server packages for local development

package.json

@@ -4,7 +4,9 @@
   "author": "Looker",
   "private": true,
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "playground",
+    "storybook"
   ],
   "homepage": "http://components.looker.com",
   "repository": {
@@ -37,6 +39,7 @@
     "lint:es": "eslint 'packages/**/*.ts{,x}' 'packages/www/**/*.mdx' --cache",
     "lint:ts": "tsc",
     "lint-staged": "yarn exec lint-staged",
+    "storybook": "yarn workspace storybook start",
     "test": "yarn jest"
   },
   "devDependencies": {

packages/components/src/Button/index.ts

@@ -32,3 +32,5 @@ export * from './ButtonOutline'
 export * from './ButtonToggle'
 export * from './ButtonTransparent'
 export * from './IconButton'
+
+export type { ButtonSizes } from './size'