Migration to babel 7 and cleaned up eslint (grommet#2347)

* Initial work to migrate to Babel 7 * Fixed an issue with Select * Fixed an issue with Accordion test * Fixed Select and TextInput tests * Fixed an issue with generating readmes * Restored grommet-babel-preset-es2015. Lint configuration changes. * Fixed Anchor story * Fixed two DataTable issues * eslint tweak * Fixed prop-types warnings with drop stories * Fixed a prop types issues with Select stories * Fixed an issue with es6 dist files
italoadler · Oct 12, 2018 · decd8cc · decd8cc
1 parent c362fc6
commit decd8cc
Show file tree

Hide file tree

Showing 200 changed files with 4,536 additions and 4,503 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,11 +1,11 @@
 {
   "presets": [
     "./tools/grommet-babel-preset-es2015",
-    "stage-1",
-    "react"
+    "@babel/preset-react"
   ],
   "plugins": [
-    ["styled-components", { "useDisplayName": false }]
+    ["styled-components", { "useDisplayName": false }],
+    "@babel/plugin-proposal-class-properties"
   ],
   "env": {
     "es6": {

diff --git a/.eslintrc b/.eslintrc
@@ -35,33 +35,23 @@
     "jsx-quotes": ["error", "prefer-single"],
     "no-console": 0,
     "quote-props": ["error", "consistent"],
-    "react/forbid-prop-types": 0,  // Soft requirement now, try hard requ in future
-    "react/jsx-boolean-value": [1, "always"],
     "react/jsx-filename-extension": 0,
-    "react/jsx-first-prop-new-line": [1, "multiline"],
-    "react/jsx-max-props-per-line": [1, { "when": "multiline" }],
-    "react/no-multi-comp": 0,  // Soft requirement now, try hard requ in future
-    "react/prefer-stateless-function": 0,  // Soft requirement now, try hard requ in future
-    "react/no-find-dom-node": 0,
-    "react/prop-types": 0,
-    "react/sort-comp": 0,
-    "react/no-array-index-key": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/prefer-default-export": 0,
-    "no-alert": 0,
-    "jsx-a11y/href-no-hash": 0,
-    // clean up the code for these
-    "function-paren-newline": 0,
-    "object-curly-newline": 0,
-    "prefer-destructuring": 0,
-    "jsx-a11y/mouse-events-have-key-events": 0
+    "import/prefer-default-export": 0
   },
   "overrides": [
     {
       "files": ["*.stories.js"],
       "rules": {
         "import/no-unresolved": 0,
-        "import/extensions": 0
+        "import/extensions": 0,
+        "import/no-extraneous-dependencies": 0,
+        "react/no-multi-comp": 0
+      }
+    },
+    {
+      "files": ["anchor.stories.js"],
+      "rules": {
+        "react/jsx-one-expression-per-line": 0
       }
     }
   ]

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Grommet: focus on the essential experience
 
-:warning: If you are installing this you should be aware you are using an Alpha release that may have small API changes.
+:warning: If you are installing this you should be aware you are using a Beta release that may have small API changes.
 
 [![Slack](http://alansouzati.github.io/artic/img/slack-badge.svg)](http://slackin.grommet.io)
 

diff --git a/package.json b/package.json
@@ -43,55 +43,65 @@
     "styled-components": ">= 4.X"
   },
   "dependencies": {
+    "css": "^2.2.3",
     "markdown-to-jsx": "^6.6.6",
     "node-emoji": "^1.8.1",
-    "polished": "^1.3.0",
+    "polished": "^2.2.0",
     "prop-types": "^15.5.10",
     "react-desc": "^3.5.0",
     "react-waypoint": "^8.0.1",
-    "recompose": "^0.27.0"
+    "recompose": "^0.30.0"
   },
   "devDependencies": {
-    "@storybook/addon-options": "^3.4.11",
-    "@storybook/addon-storysource": "^3.4.11",
-    "@storybook/react": "4.0.0-alpha.20",
-    "babel-cli": "^6.22.2",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^7.2.3",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/node": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "@emotion/core": "^0.13.1",
+    "@storybook/addon-options": "4.0.0-alpha.24",
+    "@storybook/addon-storysource": "4.0.0-alpha.24",
+    "@storybook/addons": "4.0.0-alpha.24",
+    "@storybook/react": "4.0.0-alpha.24",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^8.0.0-beta.6",
     "babel-plugin-styled-components": "^1.6.4",
     "babel-plugin-transform-imports": "^1.5.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-1": "^6.24.1",
     "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.5.3",
     "cross-env": "^5.1.6",
-    "css": "^2.2.3",
     "del": "^3.0.0",
-    "eslint": "^4.3.0",
-    "eslint-config-airbnb": "^16.1.0",
+    "dom-testing-library": "^3.9.0",
+    "eslint": "^5.6.1",
+    "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-babel": "^5.1.0",
-    "eslint-plugin-class-property": "^1.0.6",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.9.1",
-    "fs-extra": "^6.0.0",
+    "fs-extra": "^7.0.0",
     "grommet-icons": "^3.1.0-beta.1",
     "jest": "^23.1.0",
     "jest-cli": "^23.1.0",
     "jest-styled-components": "^6.2.0",
     "pre-commit": "^1.2.2",
     "react": "^16.4.0",
-    "react-dev-utils": "^5.0.0",
+    "react-dev-utils": "^6.0.4",
     "react-dom": "^16.4.0",
     "react-test-renderer": "^16.4.0",
-    "react-testing-library": "^3.0.2",
-    "regenerator-runtime": "^0.11.1",
+    "react-testing-library": "^5.2.0",
+    "regenerator-runtime": "^0.12.1",
     "require-reload": "^0.2.2",
     "simple-git": "^1.95.0",
-    "styled-components": "^4.0.0-beta.5",
+    "styled-components": "^4.0.0-beta.11.1",
     "tarball-extract": "^0.0.6",
     "webpack": "^4.10.2",
     "webpack-cli": "^3.0.7"

diff --git a/src/js/components/Accordion/Accordion.js b/src/js/components/Accordion/Accordion.js
@@ -30,13 +30,8 @@ class Accordion extends Component {
 
     const activeIndexes = activeAsArray(activeIndex) || [];
 
-    if (
-      (
-        typeof activeIndex !== 'undefined' ||
-        activeIndex !== stateActiveIndex
-      ) &&
-      activeIndexes.join() !== stateActiveIndexes.join()
-    ) {
+    if ((typeof activeIndex !== 'undefined' || activeIndex !== stateActiveIndex)
+      && activeIndexes.join() !== stateActiveIndexes.join()) {
       return { activeIndexes, activeIndex };
     }
 
@@ -48,21 +43,22 @@ class Accordion extends Component {
   }
 
   onPanelChange = (index) => {
-    let activeIndexes = [...this.state.activeIndexes];
+    const { activeIndexes } = this.state;
+    let nextActiveIndexes = [...(activeIndexes || [])];
     const { onActive, multiple } = this.props;
 
-    const activeIndex = activeIndexes.indexOf(index);
+    const activeIndex = nextActiveIndexes.indexOf(index);
     if (activeIndex > -1) {
-      activeIndexes.splice(activeIndex, 1);
+      nextActiveIndexes.splice(activeIndex, 1);
     } else if (multiple) {
-      activeIndexes.push(index);
+      nextActiveIndexes.push(index);
     } else {
-      activeIndexes = [index];
+      nextActiveIndexes = [index];
     }
 
-    this.setState({ activeIndexes }, () => {
+    this.setState({ activeIndexes: nextActiveIndexes }, () => {
       if (onActive) {
-        onActive(activeIndexes);
+        onActive(nextActiveIndexes);
       }
     });
   }
@@ -82,7 +78,7 @@ class Accordion extends Component {
       <Box role='tablist' {...rest} overflow='auto'>
         {Children.toArray(children).map((panel, index) => (
           <AccordionContext.Provider
-            key={`accordion-panel_${index}`}
+            key={`accordion-panel_${index + 0}`}
             value={{
               active: activeIndexes.indexOf(index) > -1,
               animate,

diff --git a/src/js/components/Accordion/__tests__/Accordion-test.js b/src/js/components/Accordion/__tests__/Accordion-test.js
@@ -1,11 +1,15 @@
 import React from 'react';
 import 'jest-styled-components';
 import renderer from 'react-test-renderer';
-import { render, Simulate } from 'react-testing-library';
+import { cleanup, render, fireEvent } from 'react-testing-library';
 
-import { Accordion, AccordionPanel, Box, Grommet } from '../../';
+import {
+  Accordion, AccordionPanel, Box, Grommet,
+} from '../..';
 
 describe('Accordion', () => {
+  afterEach(cleanup);
+
   test('no AccordionPanel', () => {
     const component = renderer.create(
       <Grommet>
@@ -88,7 +92,7 @@ describe('Accordion', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.click(getByText('Panel 2'));
+    fireEvent.click(getByText('Panel 2'));
 
     // wait for panel animation to finish
     setTimeout(() => {
@@ -115,7 +119,7 @@ describe('Accordion', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.click(getByText('Panel 2'));
+    fireEvent.click(getByText('Panel 2'));
 
     expect(container.firstChild).toMatchSnapshot();
   });
@@ -126,7 +130,7 @@ describe('Accordion', () => {
       <Grommet>
         <Accordion
           animate={false}
-          multiple={true}
+          multiple
           onActive={onActive}
         >
           <AccordionPanel label='Panel 1'>
@@ -140,22 +144,22 @@ describe('Accordion', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.click(getByText('Panel 2'));
+    fireEvent.click(getByText('Panel 2'));
     expect(onActive).toBeCalledWith([1]);
 
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.click(getByText('Panel 1'));
+    fireEvent.click(getByText('Panel 1'));
     expect(onActive).toBeCalledWith([1, 0]);
 
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.click(getByText('Panel 2'));
+    fireEvent.click(getByText('Panel 2'));
     expect(onActive).toBeCalledWith([0]);
 
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.click(getByText('Panel 1'));
+    fireEvent.click(getByText('Panel 1'));
     expect(onActive).toBeCalledWith([]);
 
     expect(container.firstChild).toMatchSnapshot();
@@ -177,7 +181,7 @@ describe('Accordion', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.click(getByText('Panel 1'));
+    fireEvent.click(getByText('Panel 1'));
     expect(onActive).toBeCalledWith([0]);
     expect(container.firstChild).toMatchSnapshot();
   });
@@ -190,13 +194,17 @@ describe('Accordion', () => {
             label='Panel 1'
             onMouseOver={() => {}}
             onMouseOut={() => {}}
+            onFocus={() => {}}
+            onBlur={() => {}}
           >
             Panel body 1
           </AccordionPanel>
           <AccordionPanel
             label='Panel 2'
             onMouseOver={() => {}}
             onMouseOut={() => {}}
+            onFocus={() => {}}
+            onBlur={() => {}}
           >
             Panel body 2
           </AccordionPanel>
@@ -205,16 +213,16 @@ describe('Accordion', () => {
     );
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.mouseOver(getByText('Panel 1'));
+    fireEvent.mouseOver(getByText('Panel 1'));
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.mouseOver(getByText('Panel 2'));
+    fireEvent.mouseOver(getByText('Panel 2'));
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.mouseOut(getByText('Panel 1'));
+    fireEvent.mouseOut(getByText('Panel 1'));
     expect(container.firstChild).toMatchSnapshot();
 
-    Simulate.mouseOut(getByText('Panel 2'));
+    fireEvent.mouseOut(getByText('Panel 2'));
     expect(container.firstChild).toMatchSnapshot();
   });
 });