12.0 (#1487)

Author: alexreardon

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   install:
     docker:
-      - image: circleci/node:10.15.3-browsers
+      - image: circleci/node:10.16.3-browsers
     working_directory: ~/repo
     steps:
       # Fetch Code
@@ -11,9 +11,9 @@ jobs:
       - restore_cache:
           keys:
             # Restore cached node_modules
-            - v7-dependencies-{{ checksum "yarn.lock" }}
+            - v11-dependencies-{{ checksum "yarn.lock" }}
             # fallback to using the latest cache if no exact match is found
-            - v7-dependencies-
+            - v11-dependencies-
 
       - run:
           name: Add CI global modules
@@ -43,17 +43,17 @@ jobs:
       - save_cache:
           paths:
             - node_modules
-          key: v7-dependencies-{{ checksum "yarn.lock" }}
+          key: v11-dependencies-{{ checksum "yarn.lock" }}
   validate:
     docker:
-      - image: circleci/node:10.15.3-browsers
+      - image: circleci/node:10.16.3-browsers
     working_directory: ~/repo
     steps:
       - checkout
 
       - restore_cache:
           keys:
-            - v7-dependencies-{{ checksum "yarn.lock" }}
+            - v11-dependencies-{{ checksum "yarn.lock" }}
 
       - run:
           # PR's from forks cannot use the dependency cache for performance reasons
@@ -65,14 +65,14 @@ jobs:
           command: yarn validate
   test-unit:
     docker:
-      - image: circleci/node:10.15.3-browsers
+      - image: circleci/node:10.16.3-browsers
     working_directory: ~/repo
     steps:
       - checkout
 
       - restore_cache:
           keys:
-            - v7-dependencies-{{ checksum "yarn.lock" }}
+            - v11-dependencies-{{ checksum "yarn.lock" }}
 
       - run:
           # PR's from forks cannot use the dependency cache for performance reasons
@@ -89,14 +89,14 @@ jobs:
           path: test-reports/junit
   test-bundle:
     docker:
-      - image: circleci/node:10.15.3-browsers
+      - image: circleci/node:10.16.3-browsers
     working_directory: ~/repo
     steps:
       - checkout
 
       - restore_cache:
           keys:
-            - v7-dependencies-{{ checksum "yarn.lock" }}
+            - v11-dependencies-{{ checksum "yarn.lock" }}
 
       # PR's from forks cannot use the dependency cache for performance reasons
       - run:
@@ -108,16 +108,16 @@ jobs:
           command: yarn run bundle-size:check
   test-browser:
     docker:
-      # Single Docker container with Node 8 and Cypress dependencies
+      # Single Docker container with Node 10 and Cypress dependencies
       # https://github.com/cypress-io/circleci-orb/blob/master/src/orb.yml
-      - image: cypress/base:8
+      - image: cypress/base:10.16.0
     working_directory: ~/repo
     steps:
       - checkout
 
       - restore_cache:
           keys:
-            - v7-dependencies-{{ checksum "yarn.lock" }}
+            - v11-dependencies-{{ checksum "yarn.lock" }}
 
       # PR's from forks cannot use the dependency cache for performance reasons
       - run:
@@ -133,6 +133,31 @@ jobs:
           path: cypress/videos
       - store_artifacts:
           path: cypress/screenshots
+  test-a11y:
+    docker:
+      - image: circleci/node:10.16.3-browsers
+    working_directory: ~/repo
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - v11-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: Accessibility Audit
+          command: node browser-test-harness.js yarn test:accessibility
+
+      - store_artifacts:
+          path: test-reports/lighthouse
+
+      - store_test_results:
+          path: test-reports/lighthouse
 workflows:
   version: 2
   build:
@@ -150,3 +175,6 @@ workflows:
       - test-browser:
           requires:
             - install
+      - test-a11y:
+          requires:
+            - install

.eslintrc.js

@@ -52,9 +52,18 @@ module.exports = {
     // Cannot reassign function parameters but allowing modification
     'no-param-reassign': ['error', { props: false }],
 
+    // Named exports are kewl
+    'import/prefer-default-export': 'off',
+
+    // Don't tell me what to do!
+    'max-classes-per-file': 'off',
+
     // Allowing ++ on numbers
     'no-plusplus': 'off',
 
+    // Always enforcing the use of curly braces for if statements
+    'curly': ['error', 'all'],
+
     'no-restricted-syntax': [
       // Nicer booleans #1
       // Disabling the use of !! to cast to boolean
@@ -82,6 +91,25 @@ module.exports = {
         message:
           'Must use `useLayoutEffect` as the name of the import from `*use-isomorphic-layout-effect` to leverage `eslint-plugin-react-hooks`',
       },
+
+      // No Array.from as it pulls in a large amount of babel helpers
+      {
+        selector: 'MemberExpression[object.name="Array"][property.name="from"]',
+        message:
+          'Not allowing using of Array.from to save kbs. Please use native-with-fallback/from',
+      },
+
+      // No usage of `tiny-invariant`. Must use our own invariant for error flow
+      {
+        selector: 'ImportDeclaration[source.value="tiny-invariant"]',
+        message: 'Please use our own invariant function (src/invariant.js) to ensure correct error flow'
+      },
+
+      // Must use invariant to throw
+      {
+        selector: 'ThrowStatement',
+        message: 'Please use invariant (src/invariant.js) for throwing. This is to ensure correct error flows'
+      }
     ],
 
     // Allowing Math.pow rather than forcing `**`
@@ -162,6 +190,17 @@ module.exports = {
     // Enforce rules of hooks
     'react-hooks/rules-of-hooks': 'error',
     // Second argument to hook functions
-    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/exhaustive-deps': 'error',
+
+    'react/jsx-props-no-spreading': 'off',
+
+    // using <React.Fragment> is fine
+    'react/jsx-fragments': 'off',
+
+    // all good to declare static class members in the class
+    'react/static-property-placement': 'off',
+
+    // don't need to initialize state in a constructor
+    'react/state-in-constructor': 'off',
   },
 };

.flowconfig

@@ -2,6 +2,10 @@
 # Issue with atlaskit/theme typing
 .*/node_modules/@atlaskit/theme
 
+[ignore]
+# Creating lots of invalid files
+.*/node_modules/jsonlint-mod/.*
+
 [libs]
 ./flow-typed/custom/
 

.github/ISSUE_TEMPLATE/bug-report.md

@@ -16,7 +16,7 @@ https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/common-
 In development builds we log warnings to the console for common setup issues. Please have a look to see if it can give you information in overcoming your issue
 
 ## Are you new to rbd?
-If you are new to `react-beautiful-dnd` we recommend taking at look at our getting started course: https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd
+If you are new to `react-beautiful-dnd` we recommend taking at look at our getting started course: https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd?af=2jc3e4
 
 It will give you a good base understanding of how everything fits together. This can often be the best help in overcoming your issue.
 

.gitignore

@@ -20,8 +20,9 @@ coverage/
 # test reports
 test-reports/
 
-# test videos
+# test outputs
 cypress/videos/
+cypress/screenshots/
 
 # storybook
 .storybook.out

.nvmrc

@@ -1 +1 @@
-10.15.3
+10.16.3

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 392081,
-    "minified": 147079,
-    "gzipped": 41340
+    "bundled": 380407,
+    "minified": 139714,
+    "gzipped": 42033
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 323864,
-    "minified": 116189,
-    "gzipped": 33372
+    "bundled": 322021,
+    "minified": 115167,
+    "gzipped": 34123
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 238384,
-    "minified": 123773,
-    "gzipped": 31477,
+    "bundled": 241645,
+    "minified": 126072,
+    "gzipped": 32900,
     "treeshaked": {
       "rollup": {
-        "code": 29975,
-        "import_statements": 793
+        "code": 21306,
+        "import_statements": 788
       },
       "webpack": {
-        "code": 33907
+        "code": 24963
       }
     }
   }

.storybook/.babelrc

@@ -2,9 +2,11 @@
   "presets": [
     "@babel/react",
     "@babel/flow",
-    ["@babel/env", { "modules": false, "loose": true }]
+    ["@babel/env", { "modules": false, "loose": true }],
+    "@emotion/babel-preset-css-prop"
   ],
   "plugins": [
+    "emotion",
     ["@babel/proposal-class-properties", { "loose": true }],
     ["@babel/proposal-object-rest-spread", { "loose": true }]
   ],

.storybook/config.js

@@ -39,7 +39,18 @@ const table = Object.prototype.hasOwnProperty.call(console, 'table')
   ? console.table
   : console.log;
 
-console.log('environment');
+// Generated by: http://patorjk.com/software/taag/#p=display&f=ANSI%20Shadow&t=rbd
+console.log(`%c
+██████╗ ██████╗ ██████╗
+██╔══██╗██╔══██╗██╔══██╗
+██████╔╝██████╔╝██║  ██║
+██╔══██╗██╔══██╗██║  ██║
+██║  ██║██████╔╝██████╔╝
+╚═╝  ╚═╝╚═════╝ ╚═════╝
+
+%cBeautiful and accessible drag and drop
+`, `color: ${colors.G200}; font-size: 1.2em; font-weight: bold;`, `color: ${colors.P200}; font-size: 1.2em; font-weight: bold;`);
+
 table([
   ['react-beautiful-dnd version', version],
   ['react version', React.version],

.storybook/decorator/global-styles.jsx

@@ -5,7 +5,6 @@ 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};
 `;

.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<!--
+
+  Used to ensure there is a lang set on the html attribute for storybook
+  This is important for accessibility scores
+
+-->
+<script>
+  document.documentElement.setAttribute('lang', 'en');
+</script>

CONTRIBUTING.md

@@ -40,7 +40,7 @@ The online courses listed are no free - feel free to seek out alternatives if yo
 This is a `React` project so getting familiar with `React` is a must!
 
 - [`react`](https://facebook.github.io/react/)
-- [An intro to using React](https://egghead.io/courses/start-using-react-to-build-web-applications)
+- [An intro to using React](https://egghead.io/courses/start-using-react-to-build-web-applications?af=2jc3e4)
 
 #### `Redux`
 
@@ -57,8 +57,8 @@ This project uses `redux` for its state management. If you have not used `redux`
 We test our application very thoroughly. Changes will not be accepted without tests
 
 - [`jest`](https://facebook.github.io/jest/): We use the jest test runner. It is worth getting familiar with it
-- [Test JavaScript with Jest](https://egghead.io/lessons/javascript-test-javascript-with-jest)
-- [React Testing Cookbook](https://egghead.io/courses/react-testing-cookbook)
+- [Test JavaScript with Jest](https://egghead.io/lessons/javascript-test-javascript-with-jest?af=2jc3e4)
+- [React Testing Cookbook](https://egghead.io/courses/react-testing-cookbook?af=2jc3e4)
 
 #### Performance
 
@@ -75,7 +75,7 @@ Performance is **critical** to this project. Please get familiar with React perf
 This codebase is typed with [`flow`](https://flow.org/). Changes will not be merged without correct flow typing. If you are not sure about a particular use case let flow break the build and it can be discussed in the pull request.
 
 - [`flow`](https://flow.org/en/docs/getting-started/): the `flow` docs are great
-- [Up and Running with Facebook Flow for Typed JavaScript](https://egghead.io/lessons/javascript-up-and-running-with-facebook-flow-for-typed-javascript): a small primer for running flow
+- [Up and Running with Facebook Flow for Typed JavaScript](https://egghead.io/lessons/javascript-up-and-running-with-facebook-flow-for-typed-javascript?af=2jc3e4): a small primer for running flow
 
 ### Drag and drop problem space