CI/CD Setup

1. Added prettier + script.
1. Added EsLint + base formidable config + script.
1. Fixed eslint errors.
1. Added sail ci config.

.eslintrc

@@ -0,0 +1,62 @@
+{
+  "root": true,
+  "parser": "babel-eslint",
+  "extends": [
+    "formidable/configurations/es6-react",
+    "prettier",
+    "prettier/react"
+  ],
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true,
+    "jest": true
+  },
+  "globals": {
+    "expect": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "generators": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "rules": {
+    "comma-dangle": "off",
+    "indent": "off",
+    "space-before-function-paren": "off",
+    "react/jsx-indent-props": "off",
+    "max-len": "off",
+    "no-magic-numbers": "off",
+    "func-style": "off",
+    "arrow-parens": "off",
+    "no-use-before-define": "off",
+    "no-undef": "off",
+    "react/jsx-filename-extension": "off",
+    "react/require-extension": "off",
+    "react/no-multi-comp": "off",
+    "react/prop-types": "warn",
+    "react/sort-comp": "warn",
+    "react/sort-prop-types": "warn",
+    "react/jsx-handler-names": "off",
+    "react/no-find-dom-node": "off",
+    "no-invalid-this": "off",
+    "complexity": "off",
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_+$"
+      }
+    ],
+    "import/no-unresolved": [2, { "ignore": ["https"] }],
+    "prefer-template": "off",
+    "filenames/match-regex": "off",
+    "react/react-in-jsx-scope": "off",
+    "max-params": ["error", 5],
+    "max-nested-callbacks": ["error", 5]
+  }
+}

.sail.yml

@@ -0,0 +1,33 @@
+tasks:
+  install:
+    image: node:carbon
+    command:
+      - yarn
+    args:
+      - install
+  lint:
+    image: node:carbon
+    command:
+      - yarn
+    args:
+      - lint
+  test:
+    image: node:carbon
+    command:
+      - yarn
+    args:
+      - test
+  build:
+    image: node:carbon
+    command:
+      - yarn
+    args:
+      - build
+
+workflow:
+  - install
+  - sail:parallel:
+    - lint
+    - test
+    - prettier
+  - build

.storybook/addons.js

@@ -1 +1 @@
-import '@storybook/addon-knobs/register'
+import '@storybook/addon-knobs/register';

demo/components/Header.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
+// eslint-disable-next-line import/no-unresolved
 import * as polished from 'polished';
 
-import { foreground, blue, red, lightGrey } from '../utils/colors';
+import { foreground, blue } from '../utils/colors';
 
 const Image = styled.div`
   background-image: url(https://raw.githubusercontent.com/philpl/react-live/master/docs/logo.gif);

demo/components/LiveEdit.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
+// eslint-disable-next-line import/no-unresolved
 import * as polished from 'polished';
 import { foreground, red, lightGrey } from '../utils/colors';
-
+// eslint-disable-next-line import/no-unresolved
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 
 const StyledProvider = styled(LiveProvider)`

demo/pages/_document.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
 import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 

demo/pages/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
+// eslint-disable-next-line import/no-unresolved
 import * as polished from 'polished';
 
 import Header from '../components/Header';

demo/server.js

@@ -56,6 +56,7 @@ app.prepare().then(() => {
       throw err;
     }
 
+    // eslint-disable-next-line no-console
     console.log(`> Ready on http://localhost:${PORT}`);
   });
 });

demo/utils/colors.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
 import * as polished from 'polished';
 
 export const background = '#282a36';

package.json

@@ -14,7 +14,9 @@
     "build": "rollup -c",
     "prepublishOnly": "npm run build",
     "test": "jest",
-    "test:typings": "typings-tester --dir typings"
+    "test:typings": "typings-tester --dir typings",
+    "prettier": "prettier --config .prettierrc --write \"./**/*.{js,css,html}\"",
+    "lint": "eslint --config .eslintrc \"./**/*.js\""
   },
   "dependencies": {
     "buble": "0.19.6",
@@ -27,10 +29,12 @@
     "unescape": "^0.2.0"
   },
   "devDependencies": {
+    "prettier": "^1.17.0",
     "@storybook/addon-knobs": "^3.3.12",
     "@storybook/react": "^3.3.12",
     "@types/react": "^16.0.36",
     "babel-core": "^6.26.0",
+    "babel-eslint": "^10.0.1",
     "babel-jest": "^22.2.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-external-helpers": "^6.22.0",
@@ -41,6 +45,12 @@
     "babel-preset-react": "^6.23.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^5.16.0",
+    "eslint-config-formidable": "^3.0.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-filenames": "^1.2.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-react": "^7.7.0",
     "jest": "^22.2.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

rollup.config.js

@@ -1,11 +1,9 @@
-import nodeResolve from 'rollup-plugin-node-resolve'
-import replace from 'rollup-plugin-replace'
-import commonjs from 'rollup-plugin-commonjs'
-import babel from 'rollup-plugin-babel'
-import uglify from 'rollup-plugin-uglify-es'
-import filesize from 'rollup-plugin-filesize'
-
-const isProd = process.env.PRODUCTION === 'true'
+import nodeResolve from 'rollup-plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import uglify from 'rollup-plugin-uglify-es';
+import filesize from 'rollup-plugin-filesize';
 
 const plugins = [
   nodeResolve({
@@ -16,29 +14,26 @@ const plugins = [
     include: 'node_modules/**',
     namedExports: {
       'buble/dist/buble.deps': ['transform'],
-      'buble': ['transform'],
+      buble: ['transform'],
       'prismjs/components/prism-core': ['highlight', 'languages']
     }
   }),
   babel({
     babelrc: false,
-    presets: [
-      ['env', { modules: false, loose: true }],
-      'react'
-    ],
+    presets: [['env', { modules: false, loose: true }], 'react'],
     plugins: [
       'external-helpers',
       'transform-object-rest-spread',
       'transform-class-properties',
       'transform-react-remove-prop-types'
     ].filter(Boolean)
   })
-]
+];
 
 const devPlugins = plugins.concat([
   replace({
     'process.env.NODE_ENV': JSON.stringify('development')
-  }),
+  })
 ]);
 
 const prodPlugins = plugins.concat([
@@ -60,7 +55,7 @@ const output = {
     prismjs: 'Prism',
     react: 'React',
     buble: 'Buble',
-    'react-dom': 'ReactDOM',
+    'react-dom': 'ReactDOM'
   }
 };
 
@@ -70,24 +65,31 @@ const withBase = config => Object.assign({}, base, config);
 
 export default [
   {
-    output: [{
-      name: 'ReactLive',
-      file: 'dist/react-live.min.js',
-      format: 'umd'
-    }].map(makeOutput),
+    output: [
+      {
+        name: 'ReactLive',
+        file: 'dist/react-live.min.js',
+        format: 'umd'
+      }
+    ].map(makeOutput),
     plugins: prodPlugins
-  }, {
-    output: [{
-      name: 'ReactLive',
-      file: 'dist/react-live.js',
-      format: 'umd'
-    }, {
-      file: 'dist/react-live.es.js',
-      format: 'es'
-    }, {
-      file: 'dist/react-live.cjs.js',
-      format: 'cjs'
-    }].map(makeOutput),
+  },
+  {
+    output: [
+      {
+        name: 'ReactLive',
+        file: 'dist/react-live.js',
+        format: 'umd'
+      },
+      {
+        file: 'dist/react-live.es.js',
+        format: 'es'
+      },
+      {
+        file: 'dist/react-live.cjs.js',
+        format: 'cjs'
+      }
+    ].map(makeOutput),
     plugins: devPlugins
   }
 ].map(withBase);

src/components/Editor/index.js

@@ -6,11 +6,12 @@ import { theme as liveTheme } from '../../constants/theme';
 
 class CodeEditor extends Component {
   static propTypes = {
-    disabled: PropTypes.boolean,
-    theme: PropTypes.object,
     code: PropTypes.string,
+    disabled: PropTypes.boolean,
     language: PropTypes.string,
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    style: PropTypes.object,
+    theme: PropTypes.object
   };
 
   static getDerivedStateFromProps(props, state) {
@@ -40,11 +41,13 @@ class CodeEditor extends Component {
       theme={this.props.theme || liveTheme}
       language={this.props.language}
     >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+      {({ tokens, getLineProps, getTokenProps }) => (
         <Fragment>
           {tokens.map((line, i) => (
+            // eslint-disable-next-line react/jsx-key
             <div {...getLineProps({ line, key: i })}>
               {line.map((token, key) => (
+                // eslint-disable-next-line react/jsx-key
                 <span {...getTokenProps({ token, key })} />
               ))}
             </div>
@@ -55,7 +58,7 @@ class CodeEditor extends Component {
   );
 
   render() {
-    const { style, code: _code, onChange, language, ...rest } = this.props;
+    const { style, ...rest } = this.props;
     const { code } = this.state;
 
     return (