feat(storybook): storybook integration (#1731)

* feat(storybook): storybook integration

* fix: flow issues

* fix: brand url

* fix: restrict globals to tests

also fixes some tests that were not named with test.js

* fix: state management in story

* fix: lint issue

* fix: remove ci integration for now

.circleci/config.yml

@@ -83,6 +83,25 @@ jobs:
           name: E2E tests
           command: yarn test:e2e
 
+  visual-tests:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore-cache: *restore-yarn-cache
+      - run: *yarn
+      - save-cache: *save-yarn-cache
+      - run:
+          name: Visual tests
+          command: yarn test:visuals
+      - run:
+          name: Copy diff artifacts
+          command: |
+            mkdir -p /tmp/visual-diff-artifacts
+            find src/. -name '*-diff.png' -exec cp {} /tmp/visual-diff-artifacts/ \;
+          when: on_fail
+      - store_artifacts:
+          path: /tmp/visual-diff-artifacts
+
 workflows:
   version: 2
   lint_test_build:

.eslintrc.js

@@ -18,8 +18,14 @@ module.exports = {
         'react/no-array-index-key': 'off', // fixme
         'react/no-this-in-sfc': 'off',
     },
-    globals: {
-        shallow: true,
-        mount: true,
-    },
+    overrides: [
+        {
+            files: ['*.test.js'],
+            globals: {
+                shallow: true,
+                mount: true,
+                takeScreenshot: true,
+            },
+        }
+    ]
 };

.flowconfig

@@ -13,14 +13,20 @@
 <PROJECT_ROOT>/node_modules/draft-js*
 <PROJECT_ROOT>/node_modules/findup*
 <PROJECT_ROOT>/node_modules/config-chain*
+<PROJECT_ROOT>/node_modules/puppeteer*
+<PROJECT_ROOT>/node_modules/jest-puppeteer*
+<PROJECT_ROOT>/node_modules/start-server-and-test*
+<PROJECT_ROOT>/node_modules/jest-image-snapshot*
 <PROJECT_ROOT>/.*/__tests__/.*
 
 [options]
+sharedmemory.hash_table_pow=21
 esproposal.export_star_as=enable
 module.file_ext=.js
 module.file_ext=.scss
-module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/SCSSFlowStub.js.flow'
-module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/SCSSFlowStub.js.flow'
+module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/EmptyFlowStub.js.flow'
+module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/EmptyFlowStub.js.flow'
+module.name_mapper.extension='md' -> '<PROJECT_ROOT>/flow/EmptyFlowStub.js.flow'
 module.name_mapper='react-intl-locale-data' -> '<PROJECT_ROOT>/flow/WebpackI18N.js.flow'
 module.name_mapper='box-ui-elements-locale-data' -> '<PROJECT_ROOT>/flow/WebpackI18N.js.flow'
 module.name_mapper='react-virtualized/dist/es/Table' -> '<PROJECT_ROOT>/flow/ReactVirtualizedStub.js.flow'

.gitignore

@@ -4,6 +4,7 @@
 .DS_Store
 .idea
 _site
+__diff_output__
 dist
 es
 i18n/*.js

.npmignore

@@ -13,12 +13,14 @@
 .github
 .gitignore
 .idea
+.jest
 .mergify.yml
 .npmignore
 .npmrc
 .nvmrc
 .prettierignore
 .prettierrc.js
+.storybook
 .stylelintignore
 .sublime-project
 .swp
@@ -36,6 +38,7 @@ desktop.ini
 examples
 flow/
 flow-typed/npm/
+jest.config.js
 jsconfig.json
 npm-debug.log
 npm-error.log

.storybook/addons.js

@@ -0,0 +1,5 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-notes/register-panel';

.storybook/config.js

@@ -0,0 +1,17 @@
+import { configure, addParameters, addDecorator } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs/react';
+
+import '../scripts/styleguide.setup.js';
+import customTheme from './customTheme';
+import '../src/styles/variables';
+import '../src/styles/base.scss';
+
+addDecorator(withKnobs);
+
+addParameters({
+    options: {
+        theme: customTheme,
+    },
+});
+
+configure([require.context('../src', true, /\.stories\.js$/)], module);

.storybook/customTheme.js

@@ -0,0 +1,32 @@
+import { create } from '@storybook/theming';
+import * as vars from '../src/styles/variables';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: vars.bdlBoxBlue,
+  colorSecondary: vars.bdlBoxBlue,
+
+  // UI
+  appBg: vars.bdlGray05,
+  appContentBg: vars.white,
+  appBorderColor: vars.bdlGray10,
+  appBorderRadius: vars.bdlBorderRadiusSize,
+
+  // Typography
+  fontBase: 'Lato, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: vars.bdlGray,
+  textInverseColor: vars.bdlGray02,
+
+  // Toolbar default and active colors
+  barTextColor: vars.white,
+  barSelectedColor: vars.white,
+  barBg: vars.bdlBoxBlue,
+
+  brandTitle: 'Box Elements',
+  brandUrl: 'https://opensource.box.com/box-ui-elements/storybook',
+  brandImage: 'https://repository-images.githubusercontent.com/95743138/c161b500-021b-11ea-8bf9-3aa8776acdec'
+});

.storybook/manager-head.html

@@ -0,0 +1,6 @@
+<!-- Replace "Storybook" with custom document title -->
+<script>
+    setTimeout(function() {
+        document.title = 'Box UI Elements';
+    }, 1000);
+</script>

.storybook/presets.js

@@ -0,0 +1,9 @@
+module.exports = [
+    {
+      name: '@storybook/addon-docs/react/preset',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+      },
+    },
+  ];

.storybook/webpack.config.js

@@ -0,0 +1,21 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpackConf = require('../scripts/webpack.config.js');
+
+const language = process.env.LANGUAGE;
+const webpackConfig = Array.isArray(webpackConf) ? webpackConf[0] : webpackConf;
+const locale = language ? language.substr(0, language.indexOf('-')) : 'en';
+
+module.exports = async ({ config, mode }) => {
+    config.plugins = [...webpackConfig.plugins, ...config.plugins];
+    config.resolve.alias = {
+        ...config.resolve.alias,
+        'react-intl-locale-data': path.resolve(`node_modules/react-intl/locale-data/${locale}`),
+        'box-ui-elements-locale-data': path.resolve(`i18n/${language}`),
+    };
+    config.module.rules.push({
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
+    });
+    return config;
+};

babel.config.js

@@ -24,7 +24,7 @@ module.exports = {
         ],
     ],
     env: {
-        dev: {
+        development: {
             plugins: [
                 'flow-react-proptypes',
                 [

flow-typed/npm/@sambego/storybook-state_vx.x.x.js

@@ -0,0 +1,122 @@
+// flow-typed signature: 2040cc63447bfe6a5167450ad1ff3eb0
+// flow-typed version: <<STUB>>/@sambego/storybook-state_v1.3.6/flow_v0.95.1
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   '@sambego/storybook-state'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module '@sambego/storybook-state' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module '@sambego/storybook-state/dist' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/dist/State' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/dist/StateDecorator' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/dist/Store' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/enzyme.config' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/jest.config' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/src' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/src/State' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/src/StateDecorator' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/src/Store' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/tests/State.test' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/tests/StateDecorator.test' {
+  declare module.exports: any;
+}
+
+declare module '@sambego/storybook-state/tests/Store.test' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module '@sambego/storybook-state/dist/index' {
+  declare module.exports: $Exports<'@sambego/storybook-state/dist'>;
+}
+declare module '@sambego/storybook-state/dist/index.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/dist'>;
+}
+declare module '@sambego/storybook-state/dist/State.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/dist/State'>;
+}
+declare module '@sambego/storybook-state/dist/StateDecorator.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/dist/StateDecorator'>;
+}
+declare module '@sambego/storybook-state/dist/Store.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/dist/Store'>;
+}
+declare module '@sambego/storybook-state/enzyme.config.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/enzyme.config'>;
+}
+declare module '@sambego/storybook-state/jest.config.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/jest.config'>;
+}
+declare module '@sambego/storybook-state/src/index' {
+  declare module.exports: $Exports<'@sambego/storybook-state/src'>;
+}
+declare module '@sambego/storybook-state/src/index.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/src'>;
+}
+declare module '@sambego/storybook-state/src/State.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/src/State'>;
+}
+declare module '@sambego/storybook-state/src/StateDecorator.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/src/StateDecorator'>;
+}
+declare module '@sambego/storybook-state/src/Store.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/src/Store'>;
+}
+declare module '@sambego/storybook-state/tests/State.test.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/tests/State.test'>;
+}
+declare module '@sambego/storybook-state/tests/StateDecorator.test.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/tests/StateDecorator.test'>;
+}
+declare module '@sambego/storybook-state/tests/Store.test.js' {
+  declare module.exports: $Exports<'@sambego/storybook-state/tests/Store.test'>;
+}