Upgrade Storybook, convert stories to CSF format, implement Chromatic (…

…#1219)

.eslintrc

@@ -1,10 +1,10 @@
 {
   "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier", "prettier/react"],
+  "extends": ["airbnb", "prettier", "prettier/react", "plugin:mdx/recommended"],
   "env": {
     "mocha": true
   },
-  "plugins": ["react", "prettier", "emotion","react-hooks"],
+  "plugins": ["react", "prettier", "emotion", "react-hooks"],
   "rules": {
     "emotion/jsx-import": "error",
     "emotion/no-vanilla": "warn",
@@ -42,9 +42,7 @@
   },
   "overrides": [
     {
-      "files": [
-        "*.test.js",
-      ],
+      "files": ["*.test.js"],
       "rules": {
         "no-unused-expressions": "off"
       }

.github/workflows/chromatic.yml

@@ -0,0 +1,15 @@
+name: "Chromatic"
+on: push
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - run: |
+          yarn && yarn bootstrap
+      - uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          autoAcceptChanges: true

.storybook/.babelrc

@@ -1,110 +1,3 @@
 {
-  "env": {
-    "test": {
-      "presets": ["@babel/preset-env", "@babel/preset-react"],
-      "plugins": [
-        "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-syntax-import-meta",
-        "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-proposal-json-strings",
-        [
-          "@babel/plugin-proposal-decorators",
-          {
-            "legacy": true
-          }
-        ],
-        "@babel/plugin-proposal-function-sent",
-        "@babel/plugin-proposal-export-namespace-from",
-        "@babel/plugin-proposal-numeric-separator",
-        "@babel/plugin-proposal-throw-expressions",
-        "@babel/plugin-proposal-export-default-from",
-        "@babel/plugin-proposal-logical-assignment-operators",
-        "@babel/plugin-proposal-optional-chaining",
-        [
-          "@babel/plugin-proposal-pipeline-operator",
-          {
-            "proposal": "minimal"
-          }
-        ],
-        "@babel/plugin-proposal-nullish-coalescing-operator",
-        "@babel/plugin-proposal-do-expressions"
-      ]
-    },
-    "cjs": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "modules": "commonjs"
-          }
-        ],
-        "@babel/preset-react"
-      ],
-      "plugins": [
-        "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-syntax-import-meta",
-        "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-proposal-json-strings",
-        [
-          "@babel/plugin-proposal-decorators",
-          {
-            "legacy": true
-          }
-        ],
-        "@babel/plugin-proposal-function-sent",
-        "@babel/plugin-proposal-export-namespace-from",
-        "@babel/plugin-proposal-numeric-separator",
-        "@babel/plugin-proposal-throw-expressions",
-        "@babel/plugin-proposal-export-default-from",
-        "@babel/plugin-proposal-logical-assignment-operators",
-        "@babel/plugin-proposal-optional-chaining",
-        [
-          "@babel/plugin-proposal-pipeline-operator",
-          {
-            "proposal": "minimal"
-          }
-        ],
-        "@babel/plugin-proposal-nullish-coalescing-operator",
-        "@babel/plugin-proposal-do-expressions"
-      ]
-    },
-    "esm": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "modules": false
-          }
-        ],
-        "@babel/preset-react"
-      ],
-      "plugins": [
-        "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-syntax-import-meta",
-        "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-proposal-json-strings",
-        [
-          "@babel/plugin-proposal-decorators",
-          {
-            "legacy": true
-          }
-        ],
-        "@babel/plugin-proposal-function-sent",
-        "@babel/plugin-proposal-export-namespace-from",
-        "@babel/plugin-proposal-numeric-separator",
-        "@babel/plugin-proposal-throw-expressions",
-        "@babel/plugin-proposal-export-default-from",
-        "@babel/plugin-proposal-logical-assignment-operators",
-        "@babel/plugin-proposal-optional-chaining",
-        [
-          "@babel/plugin-proposal-pipeline-operator",
-          {
-            "proposal": "minimal"
-          }
-        ],
-        "@babel/plugin-proposal-nullish-coalescing-operator",
-        "@babel/plugin-proposal-do-expressions"
-      ]
-    }
-  }
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

.storybook/main.js

@@ -0,0 +1,34 @@
+const custom = require("./webpack.config.js");
+
+const STORYBOOK_ENV = process.env.STORYBOOK_ENV || "default";
+const isNew = STORYBOOK_ENV === "new";
+
+const prettierConfig = {
+  printWidth: 80,
+  tabWidth: 2,
+  semi: true,
+  singleQuote: false,
+  jsxSingleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: "avoid",
+  proseWrap: "preserve",
+  htmlWhitespaceSensitivity: "css",
+  endOfLine: "lf"
+};
+
+module.exports = {
+  stories: [
+    "../packages/ui-docs/docs/AboutUs/*.stories.mdx",
+    "../**/src/**/*.stories.js",
+    "../**/src/**/*.stories.mdx",
+    "../**/docs/**/*.stories.js",
+    "../**/docs/**/*.stories.mdx"
+  ],
+  addons: [
+    "@storybook/addon-a11y",
+    "@storybook/addon-essentials",
+    "@storybook/addon-links"
+  ]
+};

.storybook/manager.js

@@ -0,0 +1,10 @@
+import addons from "@storybook/addons";
+import { themes } from "@storybook/theming";
+import themeCivic from "./themeCIVIC";
+
+addons.setConfig({
+  theme: themeCivic,
+  showNav: true,
+  showRoots: true,
+  showPanel: true
+});

.storybook/preview.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Global } from "@emotion/core";
+import { BrandTheme, BrandColors } from "@hackoregon/ui-themes";
+
+// Override background color on HTML element so that Storybook backgrounds aren't overriden
+const StorybookBrandTheme = BrandTheme;
+StorybookBrandTheme.html.backgroundColor = "inherit";
+
+const withGlobal = cb => (
+  <>
+    <Global styles={StorybookBrandTheme} />
+    {cb()}
+  </>
+);
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: { expanded: true },
+  backgrounds: {
+    values: [
+      { name: "dark", value: BrandColors.primary.hex },
+      { name: "light", value: BrandColors.background.hex }
+    ]
+  }
+};
+
+export const decorators = [withGlobal];

.storybook/themeCIVIC.js

@@ -1,5 +1,5 @@
 import { create } from "@storybook/theming";
-import logo from "../packages/component-library/assets/civic-logo-storybook.svg";
+import logo from "./civic-logo-storybook.svg";
 
 export default create({
   base: "light",

.storybook/webpack.config.js

@@ -6,10 +6,12 @@ const {
   css,
   postcss,
   file,
-  customConfig
+  customConfig,
+  babel
 } = require("webpack-blocks");
 
 module.exports = createConfig([
+  babel({ rootMode: "upward" }),
   match(
     ["*.css"],
     [
@@ -20,26 +22,25 @@ module.exports = createConfig([
     ]
   ),
   match(["*.svg", "*.png", "*.gif", "*.jpg", "*.jpeg"], [file()]),
+  match(["*.md", ".mdx"], [rawLoader()]),
   customConfig({
     externals: [
       {
         xmlhttprequest: "{XMLHttpRequest:XMLHttpRequest}"
       }
     ]
-  }),
-  match(["*.story.js"], [storySourceLoader()])
+  })
 ]);
 
-function storySourceLoader() {
+function rawLoader() {
   return (context, { merge }) =>
     merge({
       module: {
         rules: [
           Object.assign(
             {
-              test: /\.stories\.jsx?$/,
-              exclude: /\.node_modules\./,
-              loaders: [require.resolve("@storybook/addon-storysource/loader")],
+              test: /\.md?$/,
+              loaders: [require.resolve("raw-loader")],
               enforce: "pre"
             },
             context.match // carries `test`, `exclude` & `include` as set by `match()`

ARCHITECTURE.md

@@ -10,22 +10,36 @@ starting with what it is this repo aims to make.
 
 There are currently three deploy targets:
 
-1. Component Library (Storybook)
+1. Storybook (Chromatic)
 2. Civic 2017
 3. Civic 2018
 
-**Component Library:** This is a collection of resuable and composable components that can be used in
-any project to quickly create a rich and consistent experience. They are packaged up in a Storybook,
-and deployed to Github Pages using the `storybook-to-ghpages` project.
+**Storybook (Chromatic):** Storybook includes collection of resuable and composable components that can be used in
+any project to quickly create a rich and consistent experience. Component stories from across packages
+are bundled into one Storybook and deployed to [Chromatic](https://chromatic.com).
 
 **Civic 2017:** This is an express-based node service that hosts the 2017 projects. Express is only used to
 serve assets and redirect all traffic to `/` so that React Router can then handle routing client-side.
 
 **Civic 2018:** This is identical in architecture to the 2017 package. The only difference is the node service
-hosts the 2018 projects.
+hosts the 2018 projects. A [Netlify](https://netlify.com) deploy preview is generated for each pull request.
 
 Both Civic deploy targets are deployed to [AWS ECS](https://aws.amazon.com/ecs/) to be hosted on the Internet.
 
+## Reuseable Component Packages
+
+Reusable components are split into focused packages
+
+1. **ui-brand:** Brand assets, colors, and typography
+2. **ui-cards:** Components for cards, Civic's modular data communication framework
+3. **ui-charts:** Charts and other non-map data visualization components
+4. **ui-core:** Common UI components
+5. **ui-docs:** Design system documentation
+6. **ui-maps** Maps and other geospatial data visualization components
+7. **ui-themes** Themes and other common styling
+8. **utils** Common utilities
+9. **component-library** [DEPRECATED] A package that included all common components
+
 ## Year Packages
 
 Year Packages are React/Redux packages much like all the project packages, except they are mostly focused on