Add storybook

Author: dmt0

.gitignore

@@ -4,6 +4,7 @@ npm-debug.log*
 *.sublime*
 
 .*
+!.storybook
 !.gitignore
 !.gitattributes
 !.npmignore
@@ -19,3 +20,5 @@ accessTokens.js
 yarn.lock
 yarn-error.log
 package-lock.json
+
+storybook-static

.storybook/config.js

@@ -0,0 +1,14 @@
+import {configure, getStorybook, setAddon} from '@storybook/react';
+
+function loadStories() {
+  require('../src/__stories__/index.js');
+  // You can require as many stories as you need.
+}
+import createPercyAddon from '@percy-io/percy-storybook';
+const {percyAddon, serializeStories} = createPercyAddon();
+setAddon(percyAddon);
+
+configure(loadStories, module);
+
+// NOTE: if you're using the Storybook options addon, call serializeStories *BEFORE* the setOptions call
+serializeStories(getStorybook);

.storybook/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)?$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader'],
+        include: path.resolve(__dirname, '../'),
+      },
+    ],
+  },
+};

package.json

@@ -39,7 +39,8 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/traverse": "^7.3.4",
-    "@percy/react": "^0.4.6",
+    "@percy-io/percy-storybook": "^2.1.0",
+    "@storybook/react": "^4.1.13",
     "autoprefixer": "^9.4.9",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.1.0",
@@ -119,12 +120,13 @@
     "make:translation-keys": "node scripts/findTranslationKeys.js",
     "prepublishOnly": "npm run make:lib",
     "start": "webpack-dev-server --hot",
+    "storybook": "start-storybook -p 9001 -c .storybook",
     "test": "npm run test:lint && npm run test:pretty && npm run test:js",
     "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill --maxWorkers=2",
     "test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
     "test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
-    "test:percy": "react-percy",
-    "test:percy-local": "react-percy --debug",
+    "test:percy": "build-storybook && percy-storybook --widths=500",
+    "test:percy-local": "build-storybook",
     "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-chart-editor.css",
     "watch-test": "jest --watch"
   }

src/__percy__/panels.percy.js renamed to src/__stories__/index.js

@@ -7,7 +7,10 @@ import * as panels from '../default_panels/';
 
 import '../../dev/styles.css';
 import '../styles/main.scss';
-import './percy.css';
+import './stories.css';
+
+import React from 'react';
+import {storiesOf} from '@storybook/react';
 
 /**
  * To add more Percy tests - add a mock file to /dev/percy, add it to /dev/percy/index.js
@@ -49,7 +52,7 @@ const panelFixture = (Panel, group, name, figure) => {
   );
 };
 
-const snapshotWidth = 500;
+let stories = storiesOf('Panels', module);
 
 Object.keys(mocks).forEach(m => {
   const selectedPanels = panelsToTest[m] ? panelsToTest[m] : Object.keys(panels);
@@ -59,7 +62,7 @@ Object.keys(mocks).forEach(m => {
     const panelGroup = words[0];
     const panelName = words.slice(1, -1).join(' ');
 
-    percySnapshot(`Panels: ${m}_${p}`, {widths: [snapshotWidth]}, () =>
+    stories = stories.add(`${m}_${p}`, () =>
       panelFixture(panels[p], panelGroup, panelName, mocks[m])
     );
   });