Replace playground with Storybook

Ran with the same command (`yarn dev`) this contains all the
functionality you know and love - hot reloading, a playground, percy
snapshots just with a different veneer

.circleci/config.yml

@@ -31,8 +31,7 @@ jobs:
           key: v3-npm-deps-{{ arch }}-{{ checksum "yarn.lock" }}-{{ checksum ".yarnclean" }}
           paths:
             - node_modules
-      - run: yarn run heroku-postbuild
-      - run: yarn start & sleep 20; yarn run test:percy
+      - run: yarn run test:percy
   a11y:
     docker:
       - image: circleci/node:10.13.0-browsers
@@ -47,8 +46,7 @@ jobs:
           key: v3-npm-deps-{{ arch }}-{{ checksum "yarn.lock" }}-{{ checksum ".yarnclean" }}
           paths:
             - node_modules
-      - run: yarn run heroku-postbuild
-      - run: yarn start & sleep 20; yarn run test:a11y
+      - run: yarn run test:a11y
 
 workflows:
   version: 2

.eslintignore

@@ -10,4 +10,3 @@ node_modules
 /styles.scss
 /styles
 /src/styles/polaris-tokens
-/playground/build

.github/CONTRIBUTING.md

@@ -95,7 +95,7 @@ Take a look at [our best practices](https://github.com/Shopify/web-foundation/tr
 
 After cloning Polaris React, run `yarn` to fetch its dependencies. Then you can run several commands:
 
-- `yarn dev` runs a local development server and mounts `playground/Playground.tsx`
+- `yarn dev` runs a Storybook server which includes a playground editable at `playground/Playground.tsx`
 - `yarn test` runs the complete test suite
 - `yarn test:coverage` runs tests and generates a test coverage report
 - `yarn test <pattern>` runs tests with matching filenames

.gitignore

@@ -13,5 +13,4 @@ node_modules
 /sandbox
 .DS_Store
 *.scss.d.ts
-/playground/build
 /src/styles/polaris-tokens

.prettierignore

@@ -10,7 +10,6 @@ node_modules
 /styles.scss
 /styles
 /src/styles/polaris-tokens
-/playground/build
 
 /package.json
 /.github

.storybook/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["shopify/web", {"modules": false}],
+    ["shopify/react", {"hot": true}]
+  ]
+}

.storybook/addons.js

@@ -0,0 +1,5 @@
+// The order of these imports defines the order of the tabs in the addons panel
+import '@storybook/addon-actions/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-options/register';

.storybook/config.js

@@ -0,0 +1,82 @@
+import {
+  configure,
+  addDecorator,
+  getStorybook,
+  setAddon,
+} from '@storybook/react';
+import {setConsoleOptions} from '@storybook/addon-console';
+import {withNotes} from '@storybook/addon-notes';
+import {withOptions} from '@storybook/addon-options';
+import {themes} from '@storybook/components';
+import createPercyAddon from '@percy-io/percy-storybook';
+import tokens from '@shopify/polaris-tokens';
+
+import {
+  addPlaygroundStory,
+  generateStories,
+  hydrateExecutableExamples,
+} from './stories-from-readme';
+
+// addon-options
+addDecorator(
+  withOptions({
+    name: 'Shopify Polaris Storybook',
+    url: '/',
+    hierarchySeparator: /\//,
+    hierarchyRootSeparator: /\|/,
+    theme: {
+      ...themes.normal,
+      mainTextSize: '16',
+      mainBorderRadius: 0,
+      mainBackground: tokens.colorSkyLight,
+      mainTextColor: tokens.colorInk,
+      highlightColor: tokens.colorIndigoDark,
+      dimmedTextColor: tokens.colorInkLighter,
+      successColor: tokens.colorGreenDark,
+      failColor: tokens.colorRedDark,
+      warnColor: tokens.colorOrange,
+      // TODO more pretty brand colors?
+      // SEE https://github.com/storybooks/storybook/blob/next/lib/components/src/theme.js
+    },
+  }),
+);
+
+// addon-notes
+addDecorator(withNotes);
+
+// addon-console
+setConsoleOptions((opts: any) => {
+  // When transpiling TS using isolatedModules, the compiler doesn't strip
+  // out exported types as it doesn't know if an item is a type or not.
+  // Ignore those warnings as we don't care about them.
+  // ignore color because the addon doesn't handle colored logs properly
+  opts.panelExclude = [
+    ...opts.panelExclude,
+    /export .* was not found in/,
+    /color: #999933;/,
+  ];
+  return opts;
+});
+
+// percy-storybook
+const {percyAddon, serializeStories} = createPercyAddon();
+setAddon(percyAddon);
+
+// import all README.md files within component folders
+const readmeReq = require.context(
+  '../src/components',
+  true,
+  /\/.+\/README.md$/,
+);
+function loadStories() {
+  addPlaygroundStory();
+
+  readmeReq.keys().forEach((filename) => {
+    const readme = readmeReq(filename).component;
+    generateStories(hydrateExecutableExamples(readme));
+  });
+}
+
+configure(loadStories, module);
+
+serializeStories(getStorybook);