upgrade Storybook, ESLint, and Prettier

Author: jpdriver

.eslintrc

@@ -1,12 +1,13 @@
 {
   "root": true,
   "parser": "@babel/eslint-parser",
+  "plugins": [
+    "prettier"
+  ],
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:import/recommended",
-    "prettier",
-    "prettier/react"
+    "plugin:import/recommended"
   ],
   "env": {
     "browser": true,
@@ -60,6 +61,7 @@
     "filenames/match-regex": "off",
     "react/react-in-jsx-scope": "off",
     "max-params": ["error", 5],
-    "max-nested-callbacks": ["error", 5]
+    "max-nested-callbacks": ["error", 5],
+    "prettier/prettier": "error"
   }
 }

.prettierrc

@@ -1,4 +1,4 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
 
 configure({ adapter: new Adapter() });

jest.setup.js

@@ -16,7 +16,6 @@
     "prepublishOnly": "npm run build",
     "test": "jest",
     "test:typings": "typings-tester --dir typings",
-    "prettier": "prettier --config .prettierrc --write \"./**/*.{js,css,html}\"",
     "lint": "eslint --config .eslintrc \"./**/*.js\""
   },
   "dependencies": {
@@ -41,22 +40,22 @@
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-replace": "^3.0.0",
-    "@storybook/addon-controls": "^6.3.6",
-    "@storybook/react": "^6.3.6",
+    "@storybook/addon-controls": "^6.4.13",
+    "@storybook/react": "^6.4.13",
     "@types/react": "^16.0.36",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-filenames": "^1.2.0",
+    "eslint": "^8.7.0",
+    "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "jest": "^27.0.6",
-    "prettier": "^1.17.0",
+    "prettier": "^2.5.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "rollup": "^2.55.1",

package.json

@@ -1,98 +1,98 @@
-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 { terser } from 'rollup-plugin-terser';
-import filesize from 'rollup-plugin-filesize';
+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 { terser } from "rollup-plugin-terser";
+import filesize from "rollup-plugin-filesize";
 
 const plugins = [
   nodeResolve({
     jsnext: true,
-    modulesOnly: true
+    modulesOnly: true,
   }),
   commonjs({
-    include: 'node_modules/**',
+    include: "node_modules/**",
   }),
   babel({
-    babelHelpers: 'runtime',
+    babelHelpers: "runtime",
     babelrc: false,
     presets: [
-      ['@babel/preset-env', { modules: false, loose: true }],
-      '@babel/preset-react',
+      ["@babel/preset-env", { modules: false, loose: true }],
+      "@babel/preset-react",
     ],
     plugins: [
-      '@babel/plugin-transform-runtime',
-      '@babel/plugin-proposal-object-rest-spread',
-      '@babel/plugin-proposal-class-properties',
-      '@babel/plugin-proposal-private-property-in-object',
-      '@babel/plugin-proposal-private-methods',
-      'transform-react-remove-prop-types',
-    ].filter(Boolean)
-  })
+      "@babel/plugin-transform-runtime",
+      "@babel/plugin-proposal-object-rest-spread",
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-proposal-private-property-in-object",
+      "@babel/plugin-proposal-private-methods",
+      "transform-react-remove-prop-types",
+    ].filter(Boolean),
+  }),
 ];
 
 const devPlugins = plugins.concat([
   replace({
-    'process.env.NODE_ENV': JSON.stringify('development'),
+    "process.env.NODE_ENV": JSON.stringify("development"),
     preventAssignment: true,
-  })
+  }),
 ]);
 
 const prodPlugins = plugins.concat([
   replace({
-    'process.env.NODE_ENV': JSON.stringify('production'),
+    "process.env.NODE_ENV": JSON.stringify("production"),
     preventAssignment: true,
   }),
   terser(),
-  filesize()
+  filesize(),
 ]);
 
 const base = {
-  input: 'src/index.js',
-  external: ['react', 'react-dom', 'prism-react-renderer', 'buble']
+  input: "src/index.js",
+  external: ["react", "react-dom", "prism-react-renderer", "buble"],
 };
 
 const output = {
-  exports: 'named',
+  exports: "named",
   globals: {
-    'prism-react-renderer': 'Prism',
-    react: 'React',
-    buble: 'Buble',
-    'react-dom': 'ReactDOM'
-  }
+    "prism-react-renderer": "Prism",
+    react: "React",
+    buble: "Buble",
+    "react-dom": "ReactDOM",
+  },
 };
 
-const makeOutput = config => Object.assign({}, output, config);
+const makeOutput = (config) => Object.assign({}, output, config);
 
-const withBase = config => Object.assign({}, base, config);
+const withBase = (config) => Object.assign({}, base, config);
 
 export default [
   {
     output: [
       {
-        name: 'ReactLive',
-        file: 'dist/react-live.min.js',
-        format: 'umd'
-      }
+        name: "ReactLive",
+        file: "dist/react-live.min.js",
+        format: "umd",
+      },
     ].map(makeOutput),
-    plugins: prodPlugins
+    plugins: prodPlugins,
   },
   {
     output: [
       {
-        name: 'ReactLive',
-        file: 'dist/react-live.js',
-        format: 'umd'
+        name: "ReactLive",
+        file: "dist/react-live.js",
+        format: "umd",
       },
       {
-        file: 'dist/react-live.es.js',
-        format: 'es'
+        file: "dist/react-live.es.js",
+        format: "es",
       },
       {
-        file: 'dist/react-live.cjs.js',
-        format: 'cjs'
-      }
+        file: "dist/react-live.cjs.js",
+        format: "cjs",
+      },
     ].map(makeOutput),
-    plugins: devPlugins
-  }
+    plugins: devPlugins,
+  },
 ].map(withBase);

rollup.config.js

@@ -1,12 +1,12 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import Editor from 'react-simple-code-editor';
-import Highlight, { Prism } from 'prism-react-renderer';
-import { theme as liveTheme } from '../../constants/theme';
+import React, { Fragment, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import Editor from "react-simple-code-editor";
+import Highlight, { Prism } from "prism-react-renderer";
+import { theme as liveTheme } from "../../constants/theme";
 
-const CodeEditor = props => {
+const CodeEditor = (props) => {
   const [state, setState] = useState({
-    code: props.code || ''
+    code: props.code || "",
   });
 
   useEffect(() => {
@@ -15,7 +15,7 @@ const CodeEditor = props => {
     }
   }, [props.code]);
 
-  const updateContent = code => {
+  const updateContent = (code) => {
     setState({ code });
   };
 
@@ -25,7 +25,7 @@ const CodeEditor = props => {
     }
   }, [state.code]);
 
-  const highlightCode = code => (
+  const highlightCode = (code) => (
     <Highlight
       Prism={Prism}
       code={code}
@@ -52,7 +52,7 @@ const CodeEditor = props => {
   const { style, theme, onChange, ...rest } = props;
   const { code } = state;
 
-  const baseTheme = theme && typeof theme.plain === 'object' ? theme.plain : {};
+  const baseTheme = theme && typeof theme.plain === "object" ? theme.plain : {};
 
   return (
     <Editor
@@ -61,10 +61,10 @@ const CodeEditor = props => {
       highlight={highlightCode}
       onValueChange={updateContent}
       style={{
-        whiteSpace: 'pre',
-        fontFamily: 'monospace',
+        whiteSpace: "pre",
+        fontFamily: "monospace",
         ...baseTheme,
-        ...style
+        ...style,
       }}
       {...rest}
     />
@@ -77,7 +77,7 @@ CodeEditor.propTypes = {
   language: PropTypes.string,
   onChange: PropTypes.func,
   style: PropTypes.object,
-  theme: PropTypes.object
+  theme: PropTypes.object,
 };
 
 export default CodeEditor;

src/components/Editor/index.js

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext } from "react";
 
 const LiveContext = createContext({});
 

src/components/Live/LiveContext.js

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
-import LiveContext from './LiveContext';
-import Editor from '../Editor';
+import React, { useContext } from "react";
+import LiveContext from "./LiveContext";
+import Editor from "../Editor";
 
 export default function LiveEditor(props) {
   const { code, language, theme, disabled, onChange } = useContext(LiveContext);

src/components/Live/LiveEditor.js

@@ -1,5 +1,5 @@
-import React, { useContext } from 'react';
-import LiveContext from './LiveContext';
+import React, { useContext } from "react";
+import LiveContext from "./LiveContext";
 
 export default function LiveError(props) {
   const { error } = useContext(LiveContext);

src/components/Live/LiveError.js

@@ -1,18 +1,18 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import LiveContext from './LiveContext';
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import LiveContext from "./LiveContext";
 
 function LivePreview({ Component, ...rest }) {
   const { element: Element } = useContext(LiveContext);
   return <Component {...rest}>{Element ? <Element /> : null}</Component>;
 }
 
 LivePreview.propTypes = {
-  Component: PropTypes.node
+  Component: PropTypes.node,
 };
 
 LivePreview.defaultProps = {
-  Component: 'div'
+  Component: "div",
 };
 
 export default LivePreview;