feat(build): Add visual diff scripts

Test plan:
- Make a visual change to the Alert component and commit it
- Run yarn generate:screenshots
- Run yarn review:screenshots

You should see a visual diff of the changes.

Change-Id: Ia53bcadddbd168401ba53dad9d9152e65eb2ac96
Reviewed-on: https://gerrit.instructure.com/147082
Tested-by: Jenkins
Reviewed-by: Stephen Jensen <sejensen@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
QA-Review: Jennifer Stern <jstern@instructure.com>

Author: junyper

.gitignore

@@ -9,3 +9,5 @@ package-lock.json
 __build__
 .vscode
 stories.asketch.json
+__screenshots__
+screenshots.json

.happo.js

@@ -0,0 +1,18 @@
+const FirefoxTarget = require('happo-target-firefox')
+// const S3Uploader = require('happo-uploader-s3')
+
+module.exports = {
+  resultSummaryFilename: 'screenshots.json',
+
+  // A function that returns an "Uploader" interface for CI.
+  // (default: null)
+  // uploader: () => new S3Uploader(),
+
+  snapshotsFolder: '__screenshots__',
+
+  targets: [
+    new FirefoxTarget({
+      sourceFiles: ['.happo/__build__/config.js']
+    })
+  ]
+}

.happo/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@instructure/ui-presets/babel", { themeable: true }]]
+}

.happo/config.js

@@ -0,0 +1,74 @@
+ /*
+  * The MIT License (MIT)
+  *
+  * Copyright (c) 2015 - present Instructure, Inc.
+  *
+  * Permission is hereby granted, free of charge, to any person obtaining a copy
+  * of this software and associated documentation files (the "Software"), to deal
+  * in the Software without restriction, including without limitation the rights
+  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  * copies of the Software, and to permit persons to whom the Software is
+  * furnished to do so, subject to the following conditions:
+  *
+  * The above copyright notice and this permission notice shall be included in all
+  * copies or substantial portions of the Software.
+  *
+  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  * SOFTWARE.
+  */
+
+import React from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
+import path from 'path'
+
+import '@instructure/ui-themes/lib/canvas'
+
+/* global happo */
+
+const TESTS = []
+
+// Automatically import all component .examples.js files in packages
+const requireExamples = require.context('../packages', true,  /src\/\S+\.examples\.js$/)
+
+// assemble the tests from the examples
+requireExamples.keys()
+  .forEach((pathToExamples) => {
+    const componentName = path.basename(pathToExamples, '.js').replace('.examples', '')
+    const componentExamples = requireExamples(pathToExamples)
+
+    Object.keys(componentExamples)
+      .forEach((exampleName) => {
+        TESTS.push({
+          component: componentName,
+          name: exampleName,
+          Example: componentExamples[exampleName]
+        })
+      })
+  })
+
+// define the tests
+TESTS.forEach((test) => {
+  const { Example, component, name } = test
+  happo.define(
+   `<${component}/>: ${name}`,
+   () => {
+     const div = document.createElement('div')
+     document.body.appendChild(div)
+     render(<Example />, div)
+   },
+   { viewports: ['large', 'medium', 'small'] }
+ )
+})
+
+happo.cleanOutElement = function (element) {
+ unmountComponentAtNode(element)
+}
+
+happo.getRootNodes = function () {
+ return document.querySelectorAll('[data-reactroot]')
+}

.happo/webpack.config.js

@@ -0,0 +1,44 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const path = require('path')
+
+module.exports = {
+  entry: {
+    config: path.resolve(__dirname, 'config.js')
+  },
+  output: {
+    path: path.resolve(__dirname, '__build__'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      }
+    ]
+  }
+}

.storybook/config.js

@@ -8,12 +8,12 @@ setOptions({
   name: "Instructure UI",
   url: "http://instructure.github.io/instructure-ui/#index",
   goFullScreen: false,
-  showLeftPanel: true,
-  showDownPanel: false,
+  showStoriesPanel: true,
+  showAddonPanel: false,
   showSearchBox: false
 })
 
-// automatically import all files ending in *.stories.js from the src folders
+// automatically import all stories.js files in the packages
 const req = require.context('../packages', true, /stories\.js$/)
 
 function loadStories() {

package.json

@@ -43,7 +43,10 @@
     "predeploy": "yarn build:docs",
     "deploy": "lerna run deploy",
     "storybook": "start-storybook -p 9001 -c .storybook",
-    "generate:sketch": "story2sketch --url http://localhost:9001/iframe.html --output stories.asketch.json"
+    "generate:sketch": "story2sketch --url http://localhost:9001/iframe.html --output stories.asketch.json",
+    "build:examples": "webpack --config .happo/webpack.config.js",
+    "generate:screenshots": "./scripts/screenshots",
+    "review:screenshots": "happo review"
   },
   "license": "MIT",
   "devDependencies": {
@@ -52,9 +55,13 @@
     "@storybook/addon-options": "^3.3.15",
     "@storybook/react": "^3.4.1",
     "commitizen": "2.9.6",
+    "happo": "^5.0.0",
+    "happo-target-firefox": "^5.0.0",
     "lerna": "2.9.0",
     "lint-staged": "^6.1.0",
     "npm-run-all": "4.1.2",
+    "react": "15.6.2",
+    "react-dom": "15.6.2",
     "standard-version": "4.3.0",
     "story2sketch": "^0.2.1",
     "validate-commit-msg": "2.14.0",

scripts/screenshots

@@ -0,0 +1,17 @@
+#!/bin/bash -ex
+
+NPM_CLIENT=$(npm bin)/yarn
+
+run-happo() {
+  git checkout --quiet $1
+
+  $NPM_CLIENT run build:examples
+
+  happo run
+}
+
+# Check out the previous version and generate snapshots
+run-happo HEAD^
+
+# Check out the latest version and check for diffs
+run-happo -