ci: Update Happo to support light and dark themes. (#259)

* Add light and dark happo jobs.

* Update deps.

* Update context.

* Update deps.

* Fix wp build.

.happo.js

@@ -4,8 +4,9 @@ const storybook = require('happo-plugin-storybook');
 module.exports = {
   apiKey: process.env.HAPPO_API_KEY,
   apiSecret: process.env.HAPPO_API_SECRET,
+  project: process.env.THEME,
 
-  compareThreshold: 0.05,
+  // compareThreshold: 0.05,
 
   targets: {
     'chrome-desktop': new RemoteBrowserTarget('chrome', {

.storybook/bootstrap.js

@@ -1,6 +1,7 @@
 import 'airbnb-js-shims';
 import { stripHexcode } from 'emojibase';
 import Lunar from '@airbnb/lunar';
+import { THEME } from './constants';
 
 Lunar.initialize({
   name: 'Lunar',
@@ -9,5 +10,5 @@ Lunar.initialize({
       hexcode,
     ).toLowerCase()}.png`,
   logger: console.log,
-  theme: 'light',
+  theme: THEME,
 });

.storybook/config.js

@@ -18,8 +18,7 @@ addDecorator(story => (
       padding: 24,
     }}
   >
-    {' '}
-    {story()}{' '}
+    {story()}
   </div>
 ));
 addDecorator(withA11y);

.storybook/constants.js

@@ -0,0 +1 @@
+export const THEME = localStorage.getItem('lunar.theme') || process.env.THEME || 'light';

.storybook/contexts.js

@@ -1,14 +1,23 @@
 import ThemeProvider from '@airbnb/lunar/lib/providers/ThemeProvider';
 import DirectionProvider from '@airbnb/lunar/lib/providers/DirectionProvider';
+import { THEME } from './constants';
 
 export default [
   {
     icon: 'paintbrush',
     title: 'Change the theme',
     components: [ThemeProvider],
     params: [
-      { name: 'Light', props: { name: 'light', propagate: true }, default: true },
-      { name: 'Dark', props: { name: 'dark', propagate: true } },
+      {
+        name: 'Light',
+        props: { name: 'light', propagate: true },
+        default: THEME === 'light',
+      },
+      {
+        name: 'Dark',
+        props: { name: 'dark', propagate: true },
+        default: THEME === 'dark',
+      },
     ],
   },
   {

.storybook/webpack.config.js

@@ -45,6 +45,7 @@ module.exports = async ({ config }) => {
   config.plugins.push(
     new webpack.DefinePlugin({
       COMPONENT_CHANGELOGS: JSON.stringify(getChangelogFromGitHistory()),
+      'process.env.THEME': JSON.stringify(process.env.THEME || 'light'),
     }),
   );
 

.travis.yml

@@ -21,9 +21,13 @@ jobs:
         - yarn run build:sizes
         - yarn run check:build
       node_js: '12'
-    - name: Happo
+    - name: Happo (Dark)
       if: type = pull_request OR branch = master
-      script: yarn run check:happo
+      script: yarn run check:happo:dark
+      node_js: '12'
+    - name: Happo (Light)
+      if: type = pull_request OR branch = master
+      script: yarn run check:happo:light
       node_js: '12'
     - stage: Tests
       name: Test @ 10

package.json

@@ -11,7 +11,8 @@
     "build:sizes": "yarn run ts ./scripts/tasks/computeBuildSizes.ts",
     "build:storybook": "build-storybook",
     "check:build": "yarn run ts ./scripts/checks/compareBuildSizes.ts",
-    "check:happo": "happo-ci-travis",
+    "check:happo:dark": "THEME=dark happo-ci-travis",
+    "check:happo:light": "THEME=light happo-ci-travis",
     "check:pr": "nimbus run-script pull-request-checks",
     "clean": "rimraf './packages/*/{lib,esm}'",
     "clean:hard": "yarn run clean && rimraf './packages/**/*.tsbuildinfo'",
@@ -69,24 +70,24 @@
     "./packages/*"
   ],
   "dependencies": {
-    "@storybook/addon-a11y": "^5.2.6",
-    "@storybook/addon-actions": "^5.2.6",
+    "@storybook/addon-a11y": "^5.2.8",
+    "@storybook/addon-actions": "^5.2.8",
     "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-contexts": "^5.2.6",
-    "@storybook/addon-links": "^5.2.6",
-    "@storybook/addon-viewport": "^5.2.6",
-    "@storybook/addons": "^5.2.6",
-    "@storybook/react": "^5.2.6",
+    "@storybook/addon-contexts": "^5.2.8",
+    "@storybook/addon-links": "^5.2.8",
+    "@storybook/addon-viewport": "^5.2.8",
+    "@storybook/addons": "^5.2.8",
+    "@storybook/react": "^5.2.8",
     "markdown-to-jsx": "^6.10.3",
     "react-element-to-jsx-string": "^14.1.0"
   },
   "devDependencies": {
-    "@airbnb/config-babel": "^2.1.2",
-    "@airbnb/config-eslint": "^2.2.2",
-    "@airbnb/config-jest": "^2.1.2",
-    "@airbnb/config-prettier": "^2.0.3",
-    "@airbnb/config-typescript": "^2.1.1",
-    "@airbnb/nimbus": "^2.1.2",
+    "@airbnb/config-babel": "^2.1.3",
+    "@airbnb/config-eslint": "^2.3.0",
+    "@airbnb/config-jest": "^2.1.3",
+    "@airbnb/config-prettier": "^2.0.4",
+    "@airbnb/config-typescript": "^2.1.2",
+    "@airbnb/nimbus": "^2.1.4",
     "@types/airbnb-prop-types": "^2.13.1",
     "@types/enzyme": "^3.10.3",
     "@types/filesize": "^5.0.0",
@@ -102,7 +103,6 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.4",
     "@types/shallowequal": "^1.1.1",
-    "@types/storybook__react": "^4.0.2",
     "@types/svgo": "^1.3.0",
     "@types/uuid": "^3.4.6",
     "babel-loader": "^8.0.6",
@@ -111,12 +111,12 @@
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
     "eslint-plugin-rut": "^0.1.9",
-    "fast-glob": "^3.1.0",
+    "fast-glob": "^3.1.1",
     "filesize": "^6.0.1",
     "full-icu": "^1.3.0",
     "gh-pages": "^2.1.1",
-    "happo-plugin-storybook": "^2.4.0",
-    "happo.io": "^4.0.1",
+    "happo-plugin-storybook": "^2.5.0",
+    "happo.io": "^5.0.1",
     "jest-rut": "^0.8.1",
     "lerna": "^3.18.4",
     "moment": "^2.24.0",
@@ -127,7 +127,7 @@
     "rut-dom": "^0.1.1",
     "svgo": "^1.3.2",
     "ts-node": "^8.5.0",
-    "url-loader": "^2.2.0"
+    "url-loader": "^3.0.0"
   },
   "nimbus": {
     "drivers": [

packages/core/src/components/HierarchyPicker/Search/SearchResult.tsx

@@ -21,7 +21,7 @@ export default function SearchResult({ item, formattedParents, matches = [], que
   const [labelMatch = null] = mbk.label || [];
   const [descMatch = null] = mbk.description || [];
   const [keywMatch = null] = mbk.keywords || [];
-  const [longest] = query!.split(/\s{1,}/).sort((a, b) => b.length - a.length);
+  const [longest] = query!.split(/\s+/).sort((a, b) => b.length - a.length);
 
   return (
     <div className={cx(styles.resultItem)}>

packages/core/src/index.ts

@@ -156,7 +156,7 @@ class Core {
     }
 
     // Low-level token interpolation
-    return message.replace(/%\{(\w+)\}/g, (match, key) => `${params[key]}`);
+    return message.replace(/%{(\w+)}/g, (match, key) => `${params[key]}`);
   };
 }
 

packages/core/src/prop-types/componentName.ts

@@ -9,7 +9,7 @@ const componentName: PropTypes.Requireable<string> = (
 ) => {
   const value = props[propName];
 
-  if (!value || (typeof value === 'string' && value.match(/^[A-Z][a-zA-Z/]*$/))) {
+  if (!value || (typeof value === 'string' && value.match(/^[A-Z][/A-Za-z]*$/))) {
     return null;
   }
 

packages/forms/src/components/Form/story.tsx

@@ -39,6 +39,7 @@ function isEmail(value: string) {
 function isDate(value: string | Date) {
   isRequired(value);
 
+  // eslint-disable-next-line unicorn/regex-shorthand
   if (typeof value === 'string' && !value.match(/^\d{2}\/\d{2}\/\d{4}$/)) {
     throw new Error('Invalid date.');
   }

packages/icons/src/Icons.story.tsx

@@ -9,7 +9,7 @@ type IconSet = {
   icons: React.ComponentType<WithIconWrapperProps>[];
 };
 
-const context = require.context('.', true, /Icon[A-Z]+\.tsx/i);
+const context = require.context('.', true, /icon[a-z]+\.tsx/i);
 const iconData: { [key: string]: IconSet } = {
   general: {
     label: 'General Objects',