Added eslint-airbnb and fixed accordinly

.eslintrc

@@ -12,7 +12,8 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "airbnb-typescript"
   ],
   "globals": {
     "Atomics": "readonly",
@@ -24,18 +25,28 @@
       "jsx": true
     },
     "ecmaVersion": 2018,
-    "sourceType": "module"
+    "sourceType": "module",
+    "project": "./tsconfig.json"
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
-    "quotes": [2, "single"],
-    "react/prop-types": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/interface-name-prefix": "off",
-    "no-async-promise-executor": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "react/prop-types": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/destructuring-assignment": "off",
     "react/display-name": "off",
-    "@typescript-eslint/no-this-alias": "off"
+    "import/no-unresolved": "off",
+    "no-async-promise-executor": "off",
+    "no-console": "off",
+    "no-param-reassign": "off",
+    "no-underscore-dangle": "off",
+    "global-require": "off",
+    "arrow-body-style": "off",
+    "object-curly-newline": "off",
+    "lines-between-class-members": "off"
   }
 }

bin/direflow

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
 
 require = require('esm')(module);
-require('../dist/cli').cli(); 
+const cli = require('../dist/cli');
+cli.default();

cli/cli.ts

@@ -1,11 +1,11 @@
 import program from 'commander';
 import chalk from 'chalk';
-import { headline } from './headline';
-import { createDireflowSetup } from './create';
 import checkForUpdates from './checkForUpdate';
+import createDireflowSetup from './create';
+import headline from './headline';
 import { showVersion } from './messages';
 
-export const cli = () => {
+const cli = () => {
   program
     .command('create')
     .alias('c')
@@ -28,3 +28,5 @@ export const cli = () => {
 
   program.parse(process.argv);
 };
+
+export default cli;

cli/create.ts

@@ -1,13 +1,13 @@
 import fs from 'fs';
 import chalk from 'chalk';
 import { chooseLanguage, askCreateDireflowSetup, chooseLinter } from './questions';
-import { copyTemplate } from './utils/copyTemplate';
+import copyTemplate from './utils/copyTemplate';
 import { getNameFormats, createDefaultName } from './utils/nameFormat';
-import { isDireflowSetup } from './utils/detectDireflowSetup';
-import { writeProjectNames } from './utils/writeNames';
+import isDireflowSetup from './utils/detectDireflowSetup';
+import writeProjectNames from './utils/writeNames';
 import { moreInfoMessage, componentFinishedMessage } from './messages';
 
-export const createDireflowSetup = async () => {
+const createDireflowSetup = async () => {
   try {
     await handleCreateDireflowSetup();
   } catch (err) {
@@ -20,7 +20,9 @@ export const createDireflowSetup = async () => {
 
 const handleCreateDireflowSetup = async () => {
   if (isDireflowSetup()) {
-    console.log(chalk.red('You are trying to create a new Direflow Setup inside an existing Direflow Setup.'));
+    console.log(
+      chalk.red('You are trying to create a new Direflow Setup inside an existing Direflow Setup.'),
+    );
     return;
   }
 
@@ -42,11 +44,15 @@ const handleCreateDireflowSetup = async () => {
   });
 
   await writeProjectNames({
-    linter, projectDirectoryPath, description,
+    linter,
+    projectDirectoryPath,
+    description,
     names: getNameFormats(componentName),
     type: 'direflow-component',
   });
 
   console.log(chalk.greenBright(componentFinishedMessage(projectName)));
   console.log(chalk.blueBright(moreInfoMessage));
 };
+
+export default createDireflowSetup;

cli/headline.ts

@@ -1,7 +1,9 @@
-export const headline = `
+const headline = `
   ██████╗ ██╗██████╗ ███████╗███████╗██╗      ██████╗ ██╗    ██╗
   ██╔══██╗██║██╔══██╗██╔════╝██╔════╝██║     ██╔═══██╗██║    ██║
   ██║  ██║██║██████╔╝█████╗  █████╗  ██║     ██║   ██║██║ █╗ ██║
   ██║  ██║██║██╔══██╗██╔══╝  ██╔══╝  ██║     ██║   ██║██║███╗██║
   ██████╔╝██║██║  ██║███████╗██║     ███████╗╚██████╔╝╚███╔███╔╝
   ╚═════╝ ╚═╝╚═╝  ╚═╝╚══════╝╚═╝     ╚══════╝ ╚═════╝  ╚══╝╚══╝`;
+
+export default headline;

cli/utils/copyTemplate.ts

@@ -3,32 +3,34 @@ import ncp from 'ncp';
 import mkdirp from 'mkdirp';
 import ITemplateOption from '../interfaces/ITemplateOption';
 
-export const copyTemplate = async (options: ITemplateOption): Promise<string> => {
+const copyTemplate = async (options: ITemplateOption): Promise<string> => {
   const currentDirectory = process.cwd();
   const templateDirectory = resolve(__dirname, `../../templates/${options.language}`);
 
-  const projectDirectory: string = await new Promise((resolve, reject) => {
+  const projectDirectory: string = await new Promise((projectResolve, reject) => {
     const projectDir = `${currentDirectory}/${options.projectName}`;
     mkdirp(projectDir, (err) => {
       if (err) {
         console.log(err);
-        reject(`Could not create directory: ' + ${projectDir}`);
+        reject(new Error(`Could not create directory: ${projectDir}`));
       }
 
-      resolve(projectDir);
+      projectResolve(projectDir);
     });
   });
 
-  await new Promise((resolve, reject) => {
+  await new Promise((ncpResolve, reject) => {
     ncp.ncp(templateDirectory, projectDirectory, (err) => {
       if (err) {
         console.log(err);
-        reject('Could not copy template files');
+        reject(new Error('Could not copy template files'));
       }
 
-      resolve();
+      ncpResolve();
     });
   });
 
   return projectDirectory;
 };
+
+export default copyTemplate;

cli/utils/detectDireflowSetup.ts

@@ -1,5 +1,7 @@
 import fs from 'fs';
 
-export const isDireflowSetup = (currentDirectory = process.cwd()): boolean => {
+const isDireflowSetup = (currentDirectory = process.cwd()): boolean => {
   return fs.existsSync(`${currentDirectory}/direflow-webpack.js`);
 };
+
+export default isDireflowSetup;

cli/utils/writeNames.ts

@@ -15,19 +15,28 @@ interface IWriteNameOptions {
   type: string;
 }
 
-export async function writeProjectNames({
-  type, names, description, linter,
+const writeProjectNames = async ({
+  type,
+  names,
+  description,
+  linter,
   projectDirectoryPath,
   packageVersion = version,
-}: IWriteNameOptions): Promise<void> {
+}: IWriteNameOptions): Promise<void> => {
   const projectDirectory = fs.readdirSync(projectDirectoryPath);
   const defaultDescription = description || 'This project is created using Direflow';
 
   const writeNames = projectDirectory.map(async (dirElement: string) => {
     const filePath = path.join(projectDirectoryPath, dirElement);
 
     if (fs.statSync(filePath).isDirectory()) {
-      return await writeProjectNames({ names, description, type, linter, projectDirectoryPath: filePath });
+      return writeProjectNames({
+        names,
+        description,
+        type,
+        linter,
+        projectDirectoryPath: filePath,
+      });
     }
 
     if (linter !== 'tslint') {
@@ -43,17 +52,19 @@ export async function writeProjectNames({
     }
 
     await changeNameInfile(filePath, {
-      names, defaultDescription, type, packageVersion,
+      names,
+      defaultDescription,
+      type,
+      packageVersion,
       eslint: linter === 'eslint',
       tslint: linter === 'tslint',
     });
   });
 
-  await Promise.all(writeNames)
-    .catch(() => console.log('Failed to write files'));
-}
+  await Promise.all(writeNames).catch(() => console.log('Failed to write files'));
+};
 
-async function changeNameInfile(filePath: string, data: {}): Promise<void> {
+const changeNameInfile = async (filePath: string, data: {}): Promise<void> => {
   const changedFile = await new Promise((resolve, reject) => {
     fs.readFile(filePath, 'utf-8', (err, content) => {
       if (err) {
@@ -76,4 +87,6 @@ async function changeNameInfile(filePath: string, data: {}): Promise<void> {
       resolve();
     });
   });
-}
+};
+
+export default writeProjectNames;

package.json

@@ -40,6 +40,10 @@
     "chalk": "2.4.2",
     "commander": "3.0.1",
     "deepmerge": "4.0.0",
+    "eslint-config-airbnb-typescript": "^7.0.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "esm": "3.2.25",
     "handlebars": "^4.7.2",
     "inquirer": "7.0.0",
@@ -66,6 +70,7 @@
     "eslint-plugin-react": "^7.18.3",
     "jest": "24.8.0",
     "jest-environment-jsdom-fourteen": "^0.1.0",
+    "jsdom": "^16.1.0",
     "mock-fs": "^4.10.4",
     "prettier": "^1.19.1",
     "ts-jest": "24.0.2"

packages/direflow-component/package.json

@@ -26,7 +26,8 @@
     "style-it": "2.1.4",
     "to-string-loader": "1.1.5",
     "webfontloader": "^1.6.28",
-    "webpack-filter-warnings-plugin": "^1.2.1"
+    "webpack-filter-warnings-plugin": "^1.2.1",
+    "rimraf": "3.0.0"
   },
   "devDependencies": {
     "@types/react": "^16.9.17",

packages/direflow-component/src/DireflowComponent.tsx

@@ -1,7 +1,7 @@
 import IDireflowConfig, { IDireflowPlugin } from './interfaces/IDireflowConfig';
 import WebComponentFactory from './WebComponentFactory';
 
-export class DireflowComponent {
+class DireflowComponent {
   private componentProperties: any | undefined;
   private rootComponent: React.FC<any> | React.ComponentClass<any, any> | undefined;
   private WebComponent: any | undefined;
@@ -62,3 +62,5 @@ export class DireflowComponent {
     }
   }
 }
+
+export default DireflowComponent;

packages/direflow-component/src/WebComponentFactory.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { IDireflowPlugin } from './interfaces/IDireflowConfig';
@@ -131,14 +132,14 @@ class WebComponentFactory {
           return;
         }
 
-        const properties = Object.assign({}, factory.componentProperties);
+        const properties = { ...factory.componentProperties };
         const self: any = this;
 
-        for (const key in properties) {
+        Object.keys(properties).forEach((key) => {
           if (self[key] != null) {
             properties[key] = self[key];
           }
-        }
+        });
 
         const propertyMap = {} as PropertyDescriptorMap;
         Object.keys(properties).forEach((key: string) => {
@@ -191,6 +192,7 @@ class WebComponentFactory {
       /**
        * Generate react props based on properties and attributes.
        */
+      // eslint-disable-next-line class-methods-use-this
       private reactProps(): any {
         factory.reflectPropertiesToAttributes();
         return { ...factory.componentProperties };
@@ -205,13 +207,10 @@ class WebComponentFactory {
         if (!factory.shadow) {
           ReactDOM.render(application, this);
         } else {
-
           let currentChildren: Node[] | undefined;
 
           if (options?.initial) {
-            currentChildren = Array.from(this.children).map((child: Node) =>
-              child.cloneNode(true),
-            );
+            currentChildren = Array.from(this.children).map((child: Node) => child.cloneNode(true));
           }
 
           const root = createProxyRoot(this);
@@ -245,7 +244,7 @@ class WebComponentFactory {
        */
       private eventDispatcher = (event: Event) => {
         this.dispatchEvent(event);
-      }
+      };
     };
   }
 }

packages/direflow-component/src/components/EventContext.tsx

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
 const EventContext = createContext<Function>(() => { /* Initially return nothing */ });
-export const EventProvider = EventContext.Provider; 
+export const EventProvider = EventContext.Provider;
 export const EventConsumer = EventContext.Consumer;
 export { EventContext };

packages/direflow-component/src/components/Styled.tsx

@@ -22,9 +22,8 @@ const Styled: FC<IStyled> = (props): JSX.Element => {
   return Style.it(styles, props.children);
 };
 
-const withStyles = (styles: TStyles) => <P, S>(
-  WrappedComponent: ComponentClass<P, S> | FC<P>,
-) => {
+const withStyles = (styles: TStyles) => <P, S>(WrappedComponent: ComponentClass<P, S> | FC<P>) => {
+  // eslint-disable-next-line react/prefer-stateless-function
   return class extends Component<P, S> {
     public render(): JSX.Element {
       return (