deps: upgrade react & friends, add prettier (#26)

* deps: upgraded react & friends, added prettier * deps: upgrade babel and eslint * ci: change node test version
AriTheElk · Oct 24, 2019 · d8c4615 · d8c4615
1 parent 5787455
commit d8c4615
Show file tree

Hide file tree

Showing 10 changed files with 2,314 additions and 623 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,23 +1,29 @@
 {
   "parser": "babel-eslint",
-  "extends": "eslint-config-airbnb",
+  "extends": "prettier",
   "env": {
     "browser": true,
     "mocha": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
   "rules": {
-    "comma-dangle": 0,
+    "arrow-body-style": [
+      "error",
+      "as-needed",
+      { "requireReturnForObjectLiteral": true }
+    ],
+    "comma-dangle": ["error", "always-multiline"],
     "consistent-return": 0,
     "import/extensions": 0,
     "import/no-unresolved": 0,
-    "max-len": [2, 80, 4, {"ignoreUrls": true, "ignoreComments": true}],
+    "max-len": [2, 80, 4, { "ignoreUrls": true, "ignoreComments": true }],
     "no-case-declarations": 0,
     "no-confusing-arrow": 0,
     "no-return-assign": 0,
     "no-shadow": 0,
     "no-throw-literal": 0,
-    "one-var": [0, { uninitialized: "always", initialized: "never" }],
+    "one-var": [0, { "uninitialized": "always", "initialized": "never" }],
     "one-var-declaration-per-line": 0,
     "prefer-const": 1,
     "react/jsx-filename-extension": 0,
@@ -34,4 +40,3 @@
     "sourceType": "module"
   }
 }
-
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,4 @@
 language: node_js
 node_js:
-  - "6"
+  - "8"
 script: npm run lint
-
diff --git a/package.json b/package.json
@@ -27,22 +27,22 @@
     "@kadira/storybook": "^2.21.0",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
-    "babel-eslint": "^7.1.0",
-    "babel-loader": "^6.2.7",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-external-helpers": "^6.18.0",
-    "babel-preset-es2015-rollup": "^1.2.0",
+    "babel-preset-es2015-rollup": "^3.0.0",
     "babel-preset-latest": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.18.0",
-    "eslint": "^3.9.1",
-    "eslint-config-airbnb": "^12.0.0",
-    "eslint-plugin-flowtype-errors": "^1.5.0",
-    "eslint-plugin-import": "^2.1.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.5.0",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2",
+    "eslint": "^6.5.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-flowtype-errors": "^4.1.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.16.0",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "rollup": "^0.36.3",
     "rollup-plugin-babel": "^2.6.1",
     "rollup-plugin-commonjs": "^5.0.5",
@@ -51,9 +51,10 @@
     "rollup-plugin-node-resolve": "^2.0.0",
     "rollup-plugin-replace": "^1.1.1",
     "rollup-plugin-uglify": "^1.0.1",
-    "styled-components": "^1.0.10"
+    "styled-components": "^4.4.0"
   },
   "dependencies": {
+    "eslint-config-prettier": "^6.4.0",
     "react": "^15.3.2",
     "styled-components": "^1.0.10"
   }

diff --git a/src/components/gradient.js b/src/components/gradient.js
@@ -1,9 +1,8 @@
 /* eslint-disable no-unused-vars */
-import React from 'react';
-import styled from 'styled-components';
-import { randomGradientName } from '../gradients';
-import generator from '../generator';
-
+import React from "react";
+import styled from "styled-components";
+import { randomGradientName } from "../gradients";
+import generator from "../generator";
 
 function GradientContainer(props) {
   const { gradient, angle, ...rest } = props;
@@ -14,19 +13,17 @@ GradientContainer.propTypes = {
   className: React.PropTypes.string,
   gradient: React.PropTypes.string,
   angle: React.PropTypes.number,
-  type: React.PropTypes.string
+  type: React.PropTypes.string,
 };
 
 GradientContainer.defaultProps = {
   gradient: randomGradientName(),
-  angle: -90
+  angle: -90,
 };
 
 const Gradient = styled(GradientContainer)`
-  ${props => props ? generator(props) : generator()}
+  ${props => (props ? generator(props) : generator())}
   content: '${props => props.name}';
 `;
 
-
 export default Gradient;
-
diff --git a/src/generator.js b/src/generator.js
@@ -1,24 +1,30 @@
-import { css } from 'styled-components';
-import { gradients, randomGradientName } from './gradients';
+import { css } from "styled-components";
+import { gradients, randomGradientName } from "./gradients";
 
 function generateRadialGradientCss(options, gradientColors) {
   const { shape, position, extent, colorStops } = options;
-  return css`background-image: -webkit-radial-gradient(
-  ${shape} ${extent} at ${position},
-  ${gradientColors[0]} ${colorStops[0]},
-  ${gradientColors[1]} ${colorStops[1]});
-background-image: -moz-radial-gradient(
-  ${shape} ${extent} at ${position},
-  ${gradientColors[0]} ${colorStops[0]},
-  ${gradientColors[1]} ${colorStops[1]});
-background-image: -o-radial-gradient(
-  ${shape} ${extent} at ${position},
-  ${gradientColors[0]} ${colorStops[0]},
-  ${gradientColors[1]} ${colorStops[1]});
-background-image: radial-gradient(
-  ${shape} ${extent} at ${position},
-  ${gradientColors[0]} ${colorStops[0]},
-  ${gradientColors[1]} ${colorStops[1]});`;
+  return css`
+    background-image: -webkit-radial-gradient(
+      ${shape} ${extent} at ${position},
+      ${gradientColors[0]} ${colorStops[0]},
+      ${gradientColors[1]} ${colorStops[1]}
+    );
+    background-image: -moz-radial-gradient(
+      ${shape} ${extent} at ${position},
+      ${gradientColors[0]} ${colorStops[0]},
+      ${gradientColors[1]} ${colorStops[1]}
+    );
+    background-image: -o-radial-gradient(
+      ${shape} ${extent} at ${position},
+      ${gradientColors[0]} ${colorStops[0]},
+      ${gradientColors[1]} ${colorStops[1]}
+    );
+    background-image: radial-gradient(
+      ${shape} ${extent} at ${position},
+      ${gradientColors[0]} ${colorStops[0]},
+      ${gradientColors[1]} ${colorStops[1]}
+    );
+  `;
 }
 
 function configRadialGradientOptions(options = {}) {
@@ -27,31 +33,33 @@ function configRadialGradientOptions(options = {}) {
   if (position) {
     radialConfig.position = position;
   } else {
-    radialConfig.position = 'center';
+    radialConfig.position = "center";
   }
-  if (shape && (shape === 'circle' || shape === 'ellipse')) {
+  if (shape && (shape === "circle" || shape === "ellipse")) {
     radialConfig.shape = shape;
   } else {
-    radialConfig.shape = 'circle';
+    radialConfig.shape = "circle";
   }
   if (Array.isArray(colorStops)) {
     radialConfig.colorStops = colorStops;
   } else {
-    radialConfig.colorStops = ['', ''];
+    radialConfig.colorStops = ["", ""];
   }
-  if (extent === 'closest-side' ||
-      extent === 'closest-corner' ||
-      extent === 'farthest-side' ||
-      extent === 'farthest-corner') {
+  if (
+    extent === "closest-side" ||
+    extent === "closest-corner" ||
+    extent === "farthest-side" ||
+    extent === "farthest-corner"
+  ) {
     radialConfig.extent = extent;
   } else {
-    radialConfig.extent = '';
+    radialConfig.extent = "";
   }
   return radialConfig;
 }
 
 function generator(props = {}) {
-  let gradient = '';
+  let gradient = "";
   let angle = -90;
   if (props.gradient === undefined) {
     gradient = randomGradientName();
@@ -62,28 +70,35 @@ function generator(props = {}) {
     angle = props.angle;
   }
   const { type, options } = props;
-  if (type === 'radial') {
+  if (type === "radial") {
     const config = configRadialGradientOptions(options);
     return generateRadialGradientCss(config, gradients[gradient]);
   }
-  return css`background-color: ${gradients[gradient][0]};
-background-image: -webkit-linear-gradient(
-  ${angle}deg,
-  ${gradients[gradient][0]},
-  ${gradients[gradient][1]});
-background-image: -moz-linear-gradient(
-  ${angle}deg,
-  ${gradients[gradient][0]},,
-  ${gradients[gradient][1]});
-background-image: -o-linear-gradient(
-  ${angle}deg,
-  ${gradients[gradient][0]},,
-  ${gradients[gradient][1]});
-background-image: linear-gradient(
-  ${angle}deg,
-  ${gradients[gradient][0]},
-  ${gradients[gradient][1]});`;
+  return css`
+    background-color: ${gradients[gradient][0]};
+    background-image: -webkit-linear-gradient(
+      ${angle}deg,
+      ${gradients[gradient][0]},
+      ${gradients[gradient][1]}
+    );
+    background-image: -moz-linear-gradient(
+      ${angle}deg,
+      ${gradients[gradient][0]},
+      ,
+      ${gradients[gradient][1]}
+    );
+    background-image: -o-linear-gradient(
+      ${angle}deg,
+      ${gradients[gradient][0]},
+      ,
+      ${gradients[gradient][1]}
+    );
+    background-image: linear-gradient(
+      ${angle}deg,
+      ${gradients[gradient][0]},
+      ${gradients[gradient][1]}
+    );
+  `;
 }
 
 export default generator;
-
diff --git a/src/gradients.js b/src/gradients.js
@@ -1,11 +1,9 @@
-import gradients from './gradient_list.json';
+import gradients from "./gradient_list.json";
 
 function randomGradientName() {
   const keys = Object.keys(gradients);
   const index = Math.floor(Math.random() * keys.length);
   return keys[index];
 }
 
-
 export { gradients, randomGradientName };
-
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,4 @@
-import generator from './generator';
-import Gradient from './components/gradient';
+import generator from "./generator";
+import Gradient from "./components/gradient";
 
 export { generator, Gradient };
-
diff --git a/stories/index.js b/stories/index.js
@@ -1,40 +1,48 @@
-import React from 'react';
-import { storiesOf, action, linkTo } from '@kadira/storybook';
-import styled from 'styled-components';
-import { gradients } from '../src/gradients.js';
-import Gradient from '../src/components/gradient.js';
+import React from "react";
+import { storiesOf, action, linkTo } from "@kadira/storybook";
+import styled from "styled-components";
+import { gradients } from "../src/gradients.js";
+import Gradient from "../src/components/gradient.js";
 
 const Preview = styled(Gradient)`
   border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   color: #fff;
   font-family: sans-serif;
   margin-bottom: 10px;
   padding: 50px;
   text-align: center;
-  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
 `;
 
 const map = new Map(Object.entries(gradients));
 
 const GradientPreviews = [];
 
-map.forEach(function (value, key) {
+map.forEach(function(value, key) {
   GradientPreviews.push(key);
 });
 
-storiesOf('Gradient Component', module)
-  .add('Linear Gradient Previews', () => (
+storiesOf("Gradient Component", module)
+  .add("Linear Gradient Previews", () => (
     <div>
-      {GradientPreviews.map(function (value, id) {
-        return (<Preview gradient={value} key={id}>{value}</Preview>)
+      {GradientPreviews.map(function(value, id) {
+        return (
+          <Preview gradient={value} key={id}>
+            {value}
+          </Preview>
+        );
       })}
     </div>
   ))
-  .add('Radial Gradient Previews', () => (
+  .add("Radial Gradient Previews", () => (
     <div>
-      {GradientPreviews.map(function (value, id) {
-        return (<Preview gradient={value} key={id} type={'radial'}>{value}</Preview>)
+      {GradientPreviews.map(function(value, id) {
+        return (
+          <Preview gradient={value} key={id} type={"radial"}>
+            {value}
+          </Preview>
+        );
       })}
     </div>
   ));