chore: eslint setup and fixes

.eslintignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.next
+packages/docs/out
+# jest.config.js
+# svgr.config.js
+# prettier.config.js

.eslintrc.js

@@ -0,0 +1,77 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+    'prettier/react',
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {
+        directory: 'packages/*/tsconfig.json',
+      },
+    },
+  },
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
+    '@typescript-eslint/no-use-before-define': 'off',
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+    'react/no-unescaped-entities': [
+      'error',
+      {
+        forbid: [
+          { char: '>', alternatives: ['>'] },
+          { char: '}', alternatives: ['}'] },
+        ],
+      },
+    ],
+    'newline-before-return': 'error',
+    'sort-imports': [
+      'error',
+      {
+        ignoreCase: true,
+        ignoreDeclarationSort: true,
+      },
+    ],
+    // Remove this when https://github.com/benmosher/eslint-plugin-import/pull/1528 gets released
+    'import/default': 'off',
+    'import/order': [
+      'error',
+      {
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        'newlines-between': 'always',
+        groups: [['builtin', 'external'], 'internal', 'parent', 'sibling', 'index'],
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: '**/*.js',
+      env: {
+        node: true,
+        es6: true,
+      },
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+  ],
+};

commitlint.config.js

@@ -4,18 +4,7 @@ module.exports = {
     'scope-enum': [
       2,
       'always',
-      [
-        'all',
-        'ci',
-        'component',
-        'configs',
-        'deps',
-        'docs',
-        'examples',
-        'icons',
-        'release',
-        'theme'
-      ]
-    ]
-  }
+      ['all', 'ci', 'component', 'configs', 'deps', 'docs', 'examples', 'icons', 'release', 'theme'],
+    ],
+  },
 };

package.json

@@ -22,11 +22,18 @@
   "devDependencies": {
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
+    "@typescript-eslint/eslint-plugin": "^2.29.0",
+    "@typescript-eslint/parser": "^2.29.0",
     "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-typescript": "^2.0.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "husky": "^4.2.1",
     "lerna": "^3.16.4",
-    "prettier": "^1.16.4",
-    "tslint": "^6.0.0",
+    "prettier": "^2.0.5",
     "typescript": "^3.7.2"
   }
 }

packages/big-design-icons/package.json

@@ -20,11 +20,8 @@
     "build:icons": "node scripts/build.js",
     "download": "node scripts/downloader.js",
     "ci": "yarn run lint && yarn run build",
-    "lint": "yarn run lint:eslint && yarn run lint:tslint && yarn run lint:tsc && yarn run lint:prettier",
-    "lint:eslint": "eslint src/**/* --ext '.ts,.tsx'",
-    "lint:prettier": "prettier --check 'src/**/*.{ts,tsx}'",
+    "lint": "yarn run lint:tsc",
     "lint:tsc": "tsc --noEmit",
-    "lint:tslint": "tslint -c tslint.json -p tsconfig.json",
     "precommit": "lint-staged",
     "prepublishOnly": "rimraf dist && yarn run ci"
   },
@@ -72,11 +69,8 @@
     "@types/react": "^16.8.8",
     "@types/react-dom": "^16.8.5",
     "@types/styled-components": "^4.1.12",
-    "@typescript-eslint/parser": "^2.16.0",
     "babel-plugin-styled-components": "^1.10.6",
     "camelcase": "^5.3.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "glob-promise": "^3.4.0",
@@ -89,7 +83,6 @@
     "react-dom": "^16.8.4",
     "rimraf": "^3.0.2",
     "styled-components": "^4.3.0",
-    "tslint": "^6.0.0",
     "typescript": "^3.7.2",
     "typescript-styled-plugin": "^0.15.0"
   }

packages/big-design-icons/scripts/build.js

@@ -1,11 +1,12 @@
 const { default: svgr } = require('@svgr/core');
-const { promisify } = require('util');
-const rimraf = require('rimraf');
-const config = require('./svgr.config');
+const camelcase = require('camelcase');
 const { outputFile, readFile } = require('fs-extra');
-const { basename, join } = require('path');
 const glob = require('glob-promise');
-const camelcase = require('camelcase');
+const { basename, join } = require('path');
+const rimraf = require('rimraf');
+const { promisify } = require('util');
+
+const config = require('./svgr.config');
 
 const SOURCE = join(__dirname, '..', 'svgs', '*', '*.svg');
 const DEST_PATH = join(__dirname, '..', 'src', 'components');
@@ -25,7 +26,7 @@ async function generateIcons() {
   const iconFiles = await glob(SOURCE);
 
   return Promise.all(
-    iconFiles.map(iconFilePath => {
+    iconFiles.map((iconFilePath) => {
       const filename = basename(iconFilePath, '.svg');
       const name = `${camelcase(filename, { pascalCase: true })}Icon`;
 
@@ -46,7 +47,7 @@ function cleanDestDirectory() {
   await cleanDestDirectory();
   await generateIcons();
 
-  const indexFile = Array.from(componentNames).map(name => `export * from './${name}';`);
+  const indexFile = Array.from(componentNames).map((name) => `export * from './${name}';`);
 
   await outputFile(join(DEST_PATH, 'index.ts'), indexFile.join('\n'));
 

packages/big-design-icons/scripts/downloader.js

@@ -1,8 +1,8 @@
-const { join } = require('path');
 const { outputFile, pathExists } = require('fs-extra');
-const fetch = require('node-fetch');
 const inquirer = require('inquirer');
 const inquirerAutocomplete = require('inquirer-autocomplete-prompt');
+const fetch = require('node-fetch');
+const { join } = require('path');
 
 inquirer.registerPrompt('autocomplete', inquirerAutocomplete);
 
@@ -48,9 +48,9 @@ async function fetchIconList() {
       source: (_answersSoFar, input = '') =>
         Promise.resolve(
           iconList
-            .filter(icon => icon.name.startsWith(input))
+            .filter((icon) => icon.name.startsWith(input))
             .sort()
-            .map(icon => ({ name: icon.name, value: icon })),
+            .map((icon) => ({ name: icon.name, value: icon })),
         ),
     },
   ]);

packages/big-design-icons/scripts/svgr.config.js

@@ -1,4 +1,4 @@
-const prettierConfig = require('../prettier.config');
+const prettierConfig = require('../../../prettier.config');
 
 module.exports = {
   titleProp: true,
@@ -10,12 +10,12 @@ module.exports = {
     strokeWidth: '0',
   },
   plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
-  template({ template }, opts, { imports, componentName, props, jsx, exports }) {
+  template({ template }, _, { componentName, jsx }) {
     const code = `
     // **********************************
     // Auto-generated file, do NOT modify
     // **********************************
-    import React from 'react';
+    import React, { forwardRef, memo } from 'react';
     BREAK
 
     import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
@@ -33,10 +33,10 @@ module.exports = {
     };
 
     BREAK
-    const IconWithForwardedRef = React.forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => <Icon {...iconProps} svgRef={ref} />);
+    const IconWithForwardedRef = forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => <Icon {...iconProps} svgRef={ref} />);
 
     BREAK
-    export const COMPONENT_NAME = React.memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
+    export const COMPONENT_NAME = memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
 
     BREAK
     COMPONENT_NAME.displayName = '${componentName.name}';

packages/big-design-icons/src/base/index.tsx

@@ -1,8 +1,8 @@
-import { theme as defaultTheme, Colors, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme';
-import React from 'react';
+import { Colors, theme as defaultTheme, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme';
+import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
+export interface IconProps extends SVGProps<SVGSVGElement> {
   className?: string;
   color?: keyof Colors;
   size?: keyof Spacing | number;

packages/big-design-icons/src/components/AddCircleOutlineIcon.tsx

@@ -1,7 +1,7 @@
 // **********************************
 // Auto-generated file, do NOT modify
 // **********************************
-import React from 'react';
+import React, { forwardRef, memo } from 'react';
 
 import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
@@ -29,10 +29,10 @@ const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ..
   );
 };
 
-const IconWithForwardedRef = React.forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
+const IconWithForwardedRef = forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
   <Icon {...iconProps} svgRef={ref} />
 ));
 
-export const AddCircleOutlineIcon = React.memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
+export const AddCircleOutlineIcon = memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
 
 AddCircleOutlineIcon.displayName = 'AddCircleOutlineIcon';

packages/big-design-icons/src/components/AddIcon.tsx

@@ -1,7 +1,7 @@
 // **********************************
 // Auto-generated file, do NOT modify
 // **********************************
-import React from 'react';
+import React, { forwardRef, memo } from 'react';
 
 import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
@@ -29,10 +29,10 @@ const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ..
   );
 };
 
-const IconWithForwardedRef = React.forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
+const IconWithForwardedRef = forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
   <Icon {...iconProps} svgRef={ref} />
 ));
 
-export const AddIcon = React.memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
+export const AddIcon = memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
 
 AddIcon.displayName = 'AddIcon';

packages/big-design-icons/src/components/ArrowBackIcon.tsx

@@ -1,7 +1,7 @@
 // **********************************
 // Auto-generated file, do NOT modify
 // **********************************
-import React from 'react';
+import React, { forwardRef, memo } from 'react';
 
 import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
@@ -29,10 +29,10 @@ const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ..
   );
 };
 
-const IconWithForwardedRef = React.forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
+const IconWithForwardedRef = forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
   <Icon {...iconProps} svgRef={ref} />
 ));
 
-export const ArrowBackIcon = React.memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
+export const ArrowBackIcon = memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
 
 ArrowBackIcon.displayName = 'ArrowBackIcon';

packages/big-design-icons/src/components/ArrowDownwardIcon.tsx

@@ -1,7 +1,7 @@
 // **********************************
 // Auto-generated file, do NOT modify
 // **********************************
-import React from 'react';
+import React, { forwardRef, memo } from 'react';
 
 import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
@@ -29,10 +29,10 @@ const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ..
   );
 };
 
-const IconWithForwardedRef = React.forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
+const IconWithForwardedRef = forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
   <Icon {...iconProps} svgRef={ref} />
 ));
 
-export const ArrowDownwardIcon = React.memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
+export const ArrowDownwardIcon = memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
 
 ArrowDownwardIcon.displayName = 'ArrowDownwardIcon';

packages/big-design-icons/src/components/ArrowDropDownIcon.tsx

@@ -1,7 +1,7 @@
 // **********************************
 // Auto-generated file, do NOT modify
 // **********************************
-import React from 'react';
+import React, { forwardRef, memo } from 'react';
 
 import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
 import { useUniqueId } from '../utils';
@@ -29,10 +29,10 @@ const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ..
   );
 };
 
-const IconWithForwardedRef = React.forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
+const IconWithForwardedRef = forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
   <Icon {...iconProps} svgRef={ref} />
 ));
 
-export const ArrowDropDownIcon = React.memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
+export const ArrowDropDownIcon = memo(createStyledIcon(IconWithForwardedRef as React.FC<IconProps>));
 
 ArrowDropDownIcon.displayName = 'ArrowDropDownIcon';