base config is working

packages/@spscommerce/eslint-config-react/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+lib

packages/@spscommerce/eslint-config-react/.npmignore

@@ -0,0 +1,2 @@
+rules
+*.ts

packages/@spscommerce/eslint-config-react/index.ts

@@ -0,0 +1,22 @@
+import { Linter } from 'eslint';
+
+import { base } from "./rules/base";
+// Included for completeness, but all these rules are off because class components are forbidden
+import { classComponents } from './rules/classComponents';
+import { props } from './rules/props';
+
+const config: Linter.Config = {
+  plugins: [
+    'react',
+    'react-prefer-function-component',
+    'react-hooks',
+    'jsx-a11y',
+  ],
+  rules: {
+    ...base,
+    ...classComponents,
+    ...props,
+  },
+};
+
+export = config;

packages/@spscommerce/eslint-config-react/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@spscommerce/eslint-config-react",
+  "version": "0.0.1",
+  "description": "SPS official linter configuration for React.",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SPSCommerce/javascript.git"
+  },
+  "keywords": [
+    "style guide",
+    "lint",
+    "airbnb",
+    "SPS",
+    "SPS Commerce",
+    "es6",
+    "es2015",
+    "es2016",
+    "es2017",
+    "es2018",
+    "react",
+    "jsx"
+  ],
+  "author": "SPS Commerce",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/SPSCommerce/javascript/issues"
+  },
+  "homepage": "https://github.com/SPSCommerce/javascript",
+  "peerDependencies": {
+    "eslint": "^7.32.0"
+  },
+  "dependencies": {
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-prefer-function-component": "^0.0.7"
+  },
+  "devDependencies": {
+    "@types/eslint": "^7.28.0"
+  }
+}

packages/@spscommerce/eslint-config-react/rules/base.ts

@@ -0,0 +1,96 @@
+import { Linter } from "eslint";
+
+// ✅ = recommended, 🔧 = fixable
+export const base: Linter.RulesRecord = {
+    /** Forbid "button" element without an explicit "type" attribute
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/button-has-type.md */
+    'react/button-has-type': 'off',
+
+    /** Enforce consistent usage of destructuring assignment of props, state, and context
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md */
+    'react/destructuring-assignment': 'off',
+
+    /** Prevent missing displayName in a React component definition ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md */
+    'react/display-name': 'error',
+
+    /** Forbid certain elements
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md */
+    'react/forbid-elements': 'off',
+
+    /** Standardize the way function components get defined 🔧
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md */
+    'react/function-component-definition': 'off',
+
+    /** Prevent adjacent inline elements not separated by whitespace
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-adjacent-inline-elements.md */
+    'react/no-adjacent-inline-elements': 'off',
+
+    /** Prevent usage of Array index in keys
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md */
+    'react/no-array-index-key': 'off',
+
+    /** Prevent passing of children as props ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md */
+    'react/no-children-prop': 'error',
+
+    /** Prevent usage of dangerous JSX props
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-danger.md */
+    'react/no-danger': 'off',
+
+    /** Report when a DOM element is using both children and dangerouslySetInnerHTML ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md */
+    'react/no-danger-with-children': 'error',
+
+    /** Prevent usage of deprecated methods ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md */
+    'react/no-deprecated': 'error',
+
+    /** Prevent usage of findDOMNode ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md */
+    'react/no-find-dom-node': 'off',
+
+    /** Prevent multiple component definition per file
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md */
+    'react/no-multi-comp': 'off',
+
+    /** Enforce that namespaces are not used in React elements
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-namespace.md */
+    'react/no-namespace': 'off',
+
+    /** Report "this" being used in stateless components
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-this-in-sfc.md */
+    'react/no-this-in-sfc': 'off',
+
+    /** Prevent common typos
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-typos.md */
+    'react/no-typos': 'off',
+
+    /** Detect unescaped HTML entities, which might represent malformed tags ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md */
+    'react/no-unescaped-entities': 'error',
+
+    /** Prevent creating unstable components inside components
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md */
+    'react/no-unstable-nested-components': 'off',
+
+    /** Enforce stateless components to be written as a pure function
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md */
+    'react/prefer-stateless-function': 'off',
+
+    /** Prevent missing React when using JSX ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md */
+    'react/react-in-jsx-scope': 'off',
+
+    /** Prevent extra closing tags for components without children 🔧
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md */
+    'react/self-closing-comp': 'off',
+
+    /** Enforce style prop value is an object
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md */
+    'react/style-prop-object': 'off',
+
+    /** Prevent passing of children to void DOM elements (e.g. `<br />`)
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md */
+    'react/void-dom-elements-no-children': 'off',
+};

packages/@spscommerce/eslint-config-react/rules/classComponents.ts

@@ -0,0 +1,86 @@
+import { Linter } from "eslint";
+
+// Included for completeness, but all rules are disabled because class components are forbidden.
+
+// ✅ = recommended, 🔧 = fixable
+export const classComponents: Linter.RulesRecord = {
+    /** Reports when this.state is accessed within setState
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md */
+    'react/no-access-state-in-setstate': 'off',
+
+    /** Lifecycle methods should be methods on the prototype, not class fields 🔧
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-arrow-function-lifecycle.md */
+    'react/no-arrow-function-lifecycle': 'off',
+
+    /** Prevent usage of setState in componentDidMount
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md */
+    'react/no-did-mount-set-state': 'off',
+
+    /** Prevent usage of setState in componentDidUpdate
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md */
+    'react/no-did-update-set-state': 'off',
+
+    /** Prevent direct mutation of this.state ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md */
+    'react/no-direct-mutation-state': 'off',
+
+    /** Prevent usage of isMounted ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md */
+    'react/no-is-mounted': 'off',
+
+    /** Flag shouldComponentUpdate when extending PureComponent
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-redundant-should-component-update.md */
+    'react/no-redundant-should-component-update': 'off',
+
+    /** Prevent usage of the return value of React.render ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md */
+    'react/no-render-return-value': 'off',
+
+    /** Prevent usage of setState
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-set-state.md */
+    'react/no-set-state': 'off',
+
+    /** Prevent string definitions for references and prevent referencing this.refs ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md */
+    'react/no-string-refs': 'off',
+
+    /** Prevent usage of unsafe lifecycle methods
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md */
+    'react/no-unsafe': 'off',
+
+    /** Prevent declaring unused methods of component class
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-class-component-methods.md */
+    'react/no-unused-class-component-methods': 'off',
+
+    /** Prevent definition of unused state fields
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md */
+    'react/no-unused-state': 'off',
+
+    /** Prevent usage of setState in componentWillUpdate
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md */
+    'react/no-will-update-set-state': 'off',
+
+    /** Enforce ES5 or ES6 class for React Components
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md */
+    'react/prefer-es6-class': 'off',
+
+    /** Enforce React components to have a shouldComponentUpdate method
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-optimization.md */
+    'react/require-optimization': 'off',
+
+    /** Enforce ES5 or ES6 class for returning value in render function ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md */
+    'react/require-render-return': 'off',
+
+    /** Enforce component methods order
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md */
+    'react/sort-comp': 'off',
+
+    /** State initialization in an ES6 class component should be in a constructor
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md */
+    'react/state-in-constructor': 'off',
+
+    /** Defines where React component static properties should be positioned
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md */
+    'react/static-property-placement': 'off',
+};

packages/@spscommerce/eslint-config-react/rules/props.ts

@@ -0,0 +1,56 @@
+import { Linter } from "eslint";
+
+// ✅ = recommended, 🔧 = fixable
+export const props: Linter.RulesRecord = {
+    /** Enforces consistent naming for boolean props
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/boolean-prop-naming.md */
+    'react/boolean-prop-naming': 'off',
+
+    /** Enforce all defaultProps are defined and not "required" in propTypes
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md */
+    'react/default-props-match-prop-types': 'off',
+
+    /** Forbid certain props on components
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md */
+    'react/forbid-component-props': 'off',
+
+    /** Forbid certain props on DOM Nodes
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md */
+    'react/forbid-dom-props': 'off',
+
+    /** Forbid using another component's propTypes
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-foreign-prop-types.md */
+    'react/forbid-foreign-prop-types': 'off',
+
+    /** Forbid certain propTypes
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md */
+    'react/forbid-prop-types': 'off',
+
+    /** Prevent usage of unknown DOM property ✅ 🔧
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md */
+    'react/no-unknown-property': 'error',
+
+    /** Prevent definitions of unused prop types
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md */
+    'react/no-unused-prop-types': 'off',
+
+    /** Prefer exact proptype definitions
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md */
+    'react/prefer-exact-props': 'off',
+
+    /** Require read-only props 🔧
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md */
+    'react/prefer-read-only-props': 'off',
+
+    /** Prevent missing props validation in a React component definition ✅
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md */
+    'react/prop-types': 'error',
+
+    /** Enforce a defaultProps definition for every prop that is not a required prop
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md */
+    'react/require-default-props': 'off',
+
+    /** Enforce propTypes declarations alphabetical sorting
+    * https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md */
+    'react/sort-prop-types': 'off',
+};

packages/@spscommerce/eslint-config-react/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "lib"
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["node_modules"]
+}

packages/@spscommerce/eslint-config-typescript/.gitignore

@@ -1,2 +1,2 @@
 node_modules
-*.js
+lib

packages/@spscommerce/eslint-config-typescript/.npmignore

@@ -1 +1,3 @@
+rules
+!lib/rules
 *.ts

packages/@spscommerce/eslint-config-typescript/index.ts

@@ -7,6 +7,7 @@ import { variables } from './rules/variables';
 import { stylisticIssues } from './rules/stylisticIssues';
 import { es6 } from './rules/es6';
 import * as imports from './rules/imports';
+import { typescript } from './rules/typescript';
 
 const config: Linter.Config = {
   parser: '@typescript-eslint/parser',
@@ -22,6 +23,13 @@ const config: Linter.Config = {
     'import/parsers': {
       '@typescript-eslint/parser': ['.ts', '.tsx'],
     },
+    "import/resolver": {
+      "typescript": {},
+    }
+  },
+  env: {
+    browser: true,
+    jest: true,
   },
   rules: {
     ...possibleErrors,
@@ -34,6 +42,7 @@ const config: Linter.Config = {
     ...imports.helpfulWarnings,
     ...imports.moduleSystems,
     ...imports.styleGuide,
+    ...typescript,
   },
 };
 

packages/@spscommerce/eslint-config-typescript/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@spscommerce/eslint-config-typescript",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "SPS official linter configuration for TypeScript.",
-  "main": "index.js",
+  "main": "lib/index.js",
   "scripts": {
     "build": "tsc -p tsconfig.json"
   },
@@ -31,14 +31,20 @@
   },
   "homepage": "https://github.com/SPSCommerce/javascript",
   "peerDependencies": {
-    "eslint": "^7.32.0"
-  },
-  "dependencies": {
     "@typescript-eslint/eslint-plugin": "^4.31.2",
     "@typescript-eslint/parser": "^4.31.2",
+    "eslint": "^7.32.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.24.2"
   },
+  "dependencies": {
+  },
   "devDependencies": {
-    "@types/eslint": "^7.28.0"
+    "@types/eslint": "^7.28.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
+    "eslint": "^7.32.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.24.2"
   }
 }