Merging dev to master (it's happening) (#1158)

New animation interaction pattern

.circleci/config.yml

@@ -11,9 +11,9 @@ jobs:
       - restore_cache:
           keys:
             # Restore cached node_modules
-            - v1-dependencies-{{ checksum "yarn.lock" }}
+            - v3-dependencies-{{ checksum "yarn.lock" }}
             # fallback to using the latest cache if no exact match is found
-            - v1-dependencies-
+            - v3-dependencies-
 
       - run:
           name: Add CI global modules
@@ -43,7 +43,7 @@ jobs:
       - save_cache:
           paths:
             - node_modules
-          key: v1-dependencies-{{ checksum "yarn.lock" }}
+          key: v3-dependencies-{{ checksum "yarn.lock" }}
   validate:
     docker:
       - image: circleci/node:8.11.3-browsers
@@ -53,7 +53,7 @@ jobs:
 
       - restore_cache:
           keys:
-            - v1-dependencies-{{ checksum "yarn.lock" }}
+            - v3-dependencies-{{ checksum "yarn.lock" }}
 
       - run:
           # PR's from forks cannot use the dependency cache for performance reasons
@@ -63,7 +63,7 @@ jobs:
       - run:
           name: Lint + Typecheck
           command: yarn validate
-  test:
+  test-unit:
     docker:
       - image: circleci/node:8.11.3-browsers
     working_directory: ~/repo
@@ -72,7 +72,7 @@ jobs:
 
       - restore_cache:
           keys:
-            - v1-dependencies-{{ checksum "yarn.lock" }}
+            - v3-dependencies-{{ checksum "yarn.lock" }}
 
       - run:
           # PR's from forks cannot use the dependency cache for performance reasons
@@ -87,18 +87,7 @@ jobs:
 
       - store_test_results:
           path: test-reports/junit
-
-      - run:
-          name: Browser Suite
-          command: node browser-test-harness.js yarn test:browser
-
-      - store_test_results:
-          path: test-reports/browser
-
-      - store_artifacts:
-          path: .storybook-out
-          destination: storybook-out
-  bundle-test:
+  test-bundle:
     docker:
       - image: circleci/node:8.11.3-browsers
     working_directory: ~/repo
@@ -107,17 +96,43 @@ jobs:
 
       - restore_cache:
           keys:
-            - v1-dependencies-{{ checksum "yarn.lock" }}
+            - v3-dependencies-{{ checksum "yarn.lock" }}
 
+      # PR's from forks cannot use the dependency cache for performance reasons
       - run:
-          # PR's from forks cannot use the dependency cache for performance reasons
           name: 'Forked PR dependency install'
           command: yarn
 
       - run:
           name: Check Bundle Size
           command: yarn run bundle-size:check
+  test-browser:
+    docker:
+      # Single Docker container with Node 8 and Cypress dependencies
+      # https://github.com/cypress-io/circleci-orb/blob/master/src/orb.yml
+      - image: cypress/base:8
+    working_directory: ~/repo
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - v3-dependencies-{{ checksum "yarn.lock" }}
+
+      # PR's from forks cannot use the dependency cache for performance reasons
+      - run:
+          name: 'Forked PR dependency install'
+          command: yarn
 
+      - run:
+          name: 'Run cypress'
+          command: node browser-test-harness.js yarn test:browser:ci
+
+      # store videos and screenshots (if any) as CI artifacts
+      - store_artifacts:
+          path: cypress/videos
+      - store_artifacts:
+          path: cypress/screenshots
 workflows:
   version: 2
   build:
@@ -126,9 +141,12 @@ workflows:
       - validate:
           requires:
             - install
-      - test:
+      - test-unit:
+          requires:
+            - install
+      - test-bundle:
           requires:
             - install
-      - bundle-test:
+      - test-browser:
           requires:
             - install

.eslintignore

@@ -2,4 +2,5 @@
 dist/
 flow-typed/
 site/
+coverage/
 babel.config.js

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
     'plugin:prettier/recommended',
   ],
   parser: 'babel-eslint',
-  plugins: ['prettier', 'flowtype', 'react', 'import', 'jest'],
+  plugins: ['prettier', 'flowtype', 'emotion', 'react', 'import', 'jest'],
   env: {
     es6: true,
     browser: true,

.flowconfig

@@ -1,4 +1,9 @@
-[ignore]
+[untyped]
+# Issue with atlaskit/theme typing
+.*/node_modules/@atlaskit/theme
+
+[libs]
+./flow-typed/custom/
 
 [options]
 

.gitignore

@@ -20,6 +20,9 @@ coverage/
 # test reports
 test-reports/
 
+# test videos
+cypress/videos/
+
 # storybook
 .storybook.out
 .cache/

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 347275,
-    "minified": 134225,
-    "gzipped": 39798
+    "bundled": 355996,
+    "minified": 138322,
+    "gzipped": 40545
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 295057,
-    "minified": 109593,
-    "gzipped": 31944
+    "bundled": 302438,
+    "minified": 113232,
+    "gzipped": 32713
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 228983,
-    "minified": 120746,
-    "gzipped": 30051,
+    "bundled": 236773,
+    "minified": 125151,
+    "gzipped": 31183,
     "treeshaked": {
       "rollup": {
-        "code": 81922,
-        "import_statements": 846
+        "code": 85436,
+        "import_statements": 832
       },
       "webpack": {
-        "code": 84599
+        "code": 88124
       }
     }
   }

.storybook/config.js

@@ -1,20 +1,29 @@
 import React from 'react';
-import { configure, addDecorator } from '@storybook/react';
-import { withOptions } from '@storybook/addon-options';
-import PopIframeDecorator from './decorator/pop-iframe';
+import { addParameters, configure, addDecorator } from '@storybook/react';
+import { create } from '@storybook/theming';
+import GlobalStylesDecorator from './decorator/global-styles';
 // adding css reset - storybook includes a css loader
 import '@atlaskit/css-reset';
+import { colors } from '@atlaskit/theme';
+import logo from './compressed-logo-rbd.svg';
 import { version } from '../package.json';
 
-addDecorator(
-  withOptions({
-    name: 'react-beautiful-dnd',
-    url: 'https://github.com/atlassian/react-beautiful-dnd',
-    showAddonPanel: false,
-  }),
-);
+const theme = create({
+  brandImage: logo,
+  brandName: 'react-beautiful-dnd',
+  brandUrl: 'https://github.com/atlassian/react-beautiful-dnd',
+});
 
-addDecorator(PopIframeDecorator);
+addParameters({
+  options: {
+    // currently not using any addons
+    showPanel: false,
+    theme,
+  },
+});
+
+// Using theme would be good for this, but it looks like theme is just for the chrome around the story
+addDecorator(GlobalStylesDecorator);
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../stories/', true, /.stories.js$/);

.storybook/decorator/global-styles.jsx

@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+import styled from '@emotion/styled';
+import { colors } from '@atlaskit/theme';
+import { grid } from '../../stories/src/constants';
+
+const GlobalStyles = styled.div`
+  background-color: ${colors.N0};
+  min-height: 100vh;
+  color: ${colors.N900};
+`;
+
+const GlobalStylesDecorator = (storyFn: Function) => (
+  <GlobalStyles>{storyFn()}</GlobalStyles>
+);
+
+export default GlobalStylesDecorator;