- );
-}
-```
-
----
-
-
-[**1.2**](#class-vs-function--error-boundary) ‣ Error Boundaries are the exception to the rule of always writing function components because there is currently no way to implement them as functions.
-
-## Naming
-
-
-[**2.1**](#naming--components) ‣ Components should be named using PascalCase.
-
- [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
-
-```tsx
-// bad
-function fooBar({ /*...*/ }) {
- // ...
- return
;
-}
-```
-
-
-[**2.2**](#naming--filenames) ‣ The filename should match the primary exported item, and use `.tsx` for components and `.ts` for other items such as hooks where the file contains no JSX.
-
- [`react/jsx-filename-extension`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)
-
-```tsx
-// bad
-import useThing from "./UseThing";
-
-// good
-import useThing from "./useThing";
-
-// bad
-import FooComponent from "./foo-component";
-
-// good
-import FooComponent from "./FooComponent";
-```
-
-## Declaration
-
- - Do not use `displayName` for naming components. Instead, name the component by reference.
-
- ```tsx
- // bad
- export default React.createClass({
- displayName: 'ReservationCard',
- // stuff goes here
- });
-
- // good
- export default class ReservationCard extends React.Component {
- }
- ```
-
-## Alignment
-
- - Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md)
-
- ```tsx
- // bad
-
-
- // good
-
-
- // if props fit in one line then keep it on the same line
-
-
- // children get indented normally
-
-
-
-
- // bad
- {showButton &&
-
- }
-
- // bad
- {
- showButton &&
-
- }
-
- // good
- {showButton && (
-
- )}
-
- // good
- {showButton && }
-
- // good
- {someReallyLongConditional
- && anotherLongConditional
- && (
-
- )
- }
-
- // good
- {someConditional ? (
-
- ) : (
-
- )}
- ```
-
-## Quotes
-
- - Always use double quotes (`"`) for JSX attributes, but single quotes (`'`) for all other JS. eslint: [`jsx-quotes`](https://eslint.org/docs/rules/jsx-quotes)
-
- > Why? Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.
-
- ```tsx
- // bad
-
-
- // good
-
-
- // bad
-
-
- // good
-
- ```
-
-## Spacing
-
- - Always include a single space in your self-closing tag. eslint: [`no-multi-spaces`](https://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-tag-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md)
-
- ```tsx
- // bad
-
-
- // very bad
-
-
- // bad
-
-
- // good
-
- ```
-
- - Do not pad JSX curly braces with spaces. eslint: [`react/jsx-curly-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md)
-
- ```tsx
- // bad
-
-
- // good
-
- ```
-
-## Props
- - **Props Naming**: Avoid using DOM component prop names for different purposes.
-
- > Why? People expect props like `style` and `className` to mean one specific thing. Varying this API for a subset of your app makes the code less readable and less maintainable, and may cause bugs.
-
- ```tsx
- // bad
-
-
- // bad
-
-
- // good
-
- ```
-
- - Always use camelCase for prop names, or PascalCase if the prop value is a React component.
-
- ```tsx
- // bad
-
-
- // good
-
- ```
-
- - Omit the value of the prop when it is explicitly `true`. eslint: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)
-
- ```tsx
- // bad
-
-
- // good
-
-
- // good
-
- ```
-
- - Always include an `alt` prop on `` tags. If the image is presentational, `alt` can be an empty string or the `` must have `role="presentation"`. eslint: [`jsx-a11y/alt-text`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)
-
- ```tsx
- // bad
-
-
- // good
-
-
- // good
-
-
- // good
-
- ```
-
- - Do not use words like "image", "photo", or "picture" in `` `alt` props. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
-
- > Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text.
-
- ```tsx
- // bad
-
-
- // good
-
- ```
-
- - Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/#usage_intro). eslint: [`jsx-a11y/aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
-
- ```tsx
- // bad - not an ARIA role
-
-
- // bad - abstract ARIA role
-
-
- // good
-
- ```
-
- - Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
-
- > Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.
-
- ```tsx
- // bad
-
-
- // good
-
- ```
-
- - Avoid using an array index as `key` prop, prefer a stable ID. eslint: [`react/no-array-index-key`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md)
-
-> Why? Not using a stable ID [is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) because it can negatively impact performance and cause issues with component state.
-
-We don’t recommend using indexes for keys if the order of items may change.
-
- ```tsx
- // bad
- {todos.map((todo, index) =>
-
- )}
-
- // good
- {todos.map(todo => (
-
- ))}
- ```
-
- - Always define explicit defaultProps for all non-required props.
-
- > Why? propTypes are a form of documentation, and providing defaultProps means the reader of your code doesn’t have to assume as much. In addition, it can mean that your code can omit certain type checks.
-
- ```tsx
- // bad
- function SFC({ foo, bar, children }) {
- return
{foo}{bar}{children}
;
- }
- SFC.propTypes = {
- foo: PropTypes.number.isRequired,
- bar: PropTypes.string,
- children: PropTypes.node,
- };
-
- // good
- function SFC({ foo, bar, children }) {
- return
{foo}{bar}{children}
;
- }
- SFC.propTypes = {
- foo: PropTypes.number.isRequired,
- bar: PropTypes.string,
- children: PropTypes.node,
- };
- SFC.defaultProps = {
- bar: '',
- children: null,
- };
- ```
-
- - Use spread props sparingly.
- > Why? Otherwise you’re more likely to pass unnecessary props down to components. And for React v15.6.1 and older, you could [pass invalid HTML attributes to the DOM](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html).
-
- Exceptions:
-
- - HOCs that proxy down props and hoist propTypes
-
- ```tsx
- function HOC(WrappedComponent) {
- return class Proxy extends React.Component {
- Proxy.propTypes = {
- text: PropTypes.string,
- isLoading: PropTypes.bool
- };
-
- render() {
- return
- }
- }
- }
- ```
-
- - Spreading objects with known, explicit props. This can be particularly useful when testing React components with Mocha’s beforeEach construct.
-
- ```tsx
- export default function Foo {
- const props = {
- text: '',
- isPublished: false
- }
-
- return ();
- }
- ```
-
- Notes for use:
- Filter out unnecessary props when possible. Also, use [prop-types-exact](https://www.npmjs.com/package/prop-types-exact) to help prevent bugs.
-
- ```tsx
- // bad
- render() {
- const { irrelevantProp, ...relevantProps } = this.props;
- return
- }
-
- // good
- render() {
- const { irrelevantProp, ...relevantProps } = this.props;
- return
- }
- ```
-
-
-## Parentheses
-
- - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/jsx-wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md)
-
- ```tsx
- // bad
- render() {
- return
-
- ;
- }
-
- // good
- render() {
- return (
-
-
-
- );
- }
-
- // good, when single line
- render() {
- const body =
hello
;
- return {body};
- }
- ```
-
-## Tags
-
- - Always self-close tags that have no children. eslint: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)
-
- ```tsx
- // bad
-
-
- // good
-
- ```
-
- - If your component has multiline properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
-
- ```tsx
- // bad
-
-
- // good
-
- ```
-
-## Higher-Order Components
-
-
- - **Higher-order Component Naming**: Use a composite of the higher-order component’s name and the passed-in component’s name as the `displayName` on the generated component. For example, the higher-order component `withFoo()`, when passed a component `Bar` should produce a component with a `displayName` of `withFoo(Bar)`.
-
- > Why? A component’s `displayName` may be used by developer tools or in error messages, and having a value that clearly expresses this relationship helps people understand what is happening.
-
- ```tsx
- // bad
- export default function withFoo(WrappedComponent) {
- return function WithFoo(props) {
- return ;
- }
- }
-
- // good
- export default function withFoo(WrappedComponent) {
- function WithFoo(props) {
- return ;
- }
-
- const wrappedComponentName = WrappedComponent.displayName
- || WrappedComponent.name
- || 'Component';
-
- WithFoo.displayName = `withFoo(${wrappedComponentName})`;
- return WithFoo;
- }
- ```
-
-## Translation
-
- This JSX/React style guide is also available in other languages:
-
- -  **Chinese (Simplified)**: [jhcccc/javascript](https://github.com/jhcccc/javascript/tree/master/react)
- -  **Chinese (Traditional)**: [jigsawye/javascript](https://github.com/jigsawye/javascript/tree/master/react)
- -  **Español**: [agrcrobles/javascript](https://github.com/agrcrobles/javascript/tree/master/react)
- -  **Japanese**: [mitsuruog/javascript-style-guide](https://github.com/mitsuruog/javascript-style-guide/tree/master/react)
- -  **Korean**: [apple77y/javascript](https://github.com/apple77y/javascript/tree/master/react)
- -  **Polish**: [pietraszekl/javascript](https://github.com/pietraszekl/javascript/tree/master/react)
- -  **Portuguese**: [ronal2do/javascript](https://github.com/ronal2do/airbnb-react-styleguide)
- -  **Russian**: [leonidlebedev/javascript-airbnb](https://github.com/leonidlebedev/javascript-airbnb/tree/master/react)
- -  **Thai**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide/tree/master/react)
- -  **Turkish**: [alioguzhan/react-style-guide](https://github.com/alioguzhan/react-style-guide)
- -  **Ukrainian**: [ivanzusko/javascript](https://github.com/ivanzusko/javascript/tree/master/react)
- -  **Vietnam**: [uetcodecamp/jsx-style-guide](https://github.com/UETCodeCamp/jsx-style-guide)
-
-**[⬆ back to top](#table-of-contents)**
diff --git a/react/index.ts b/react/index.ts
deleted file mode 100644
index 7ff64be1e2..0000000000
--- a/react/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { 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";
-import { preferFunctionComponent } from "./rules/preferFunctionComponent";
-import { hooks } from "./rules/hooks";
-import { a11y } from "./rules/a11y";
-
-const config: Linter.Config = {
- plugins: [
- "react",
- "react-prefer-function-component",
- "react-hooks",
- "jsx-a11y",
- ],
- rules: {
- ...base,
- ...classComponents,
- ...props,
- ...preferFunctionComponent,
- ...hooks,
- ...a11y,
- },
-};
-
-export = config;
diff --git a/react/package.json b/react/package.json
deleted file mode 100644
index b804e13a5b..0000000000
--- a/react/package.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "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"
- }
-}
diff --git a/react/rules/a11y.ts b/react/rules/a11y.ts
deleted file mode 100644
index 429ed86af5..0000000000
--- a/react/rules/a11y.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-import type { Linter } from "eslint";
-
-export const a11y: Linter.RulesRecord = {
- /**
- * Enforce all elements that require alternative text have
- * meaningful information to relay back to end user.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md
- */
- "jsx-a11y/alt-text": "error",
-
- /**
- * Enforce all anchors to contain accessible content.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md
- */
- "jsx-a11y/anchor-has-content": "error",
-
- /**
- * Enforce all anchors are valid, navigable elements.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md
- */
- "jsx-a11y/anchor-is-valid": "error",
-
- /**
- * Enforce elements with aria-activedescendant are tabbable.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md
- */
- "jsx-a11y/aria-activedescendant-has-tabindex": "error",
-
- /**
- * Enforce all `aria-*` props are valid.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md
- */
- "jsx-a11y/aria-props": "error",
-
- /**
- * Enforce ARIA state and property values are valid.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md
- */
- "jsx-a11y/aria-proptypes": "error",
-
- /**
- * Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md
- */
- "jsx-a11y/aria-role": "error",
-
- /**
- * Enforce that elements that do not support ARIA roles,
- * states, and properties do not have those attributes.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md
- */
- "jsx-a11y/aria-unsupported-elements": "error",
-
- /**
- * Enforce that autocomplete attributes are used correctly.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/autocomplete-valid.md
- */
- "jsx-a11y/autocomplete-valid": "error",
-
- /**
- * Enforce a clickable non-interactive element has at least one keyboard event listener.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
- */
- "jsx-a11y/click-events-have-key-events": "error",
-
- /**
- * Enforce heading (`h1`, `h2`, etc) elements contain accessible content.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md
- */
- "jsx-a11y/heading-has-content": "error",
-
- /**
- * Enforce `` element has `lang` prop.
- * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md
- */
- "jsx-a11y/html-has-lang": "error",
-
- /**
- * Enforce `
[`react-prefer-function-component/react-prefer-function-component`](https://github.com/tatethurston/eslint-plugin-react-prefer-function-component#readme)
-
-```tsx
-// bad
-const Clock = React.createClass({
- // I could write literally anything in here
-
- // Seriously do not use createClass
-
- // It is extremely deprecated
-});
-
-// bad
-class Clock extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- date: props.startDate || new Date()
- };
- }
-
- render() {
- return (
- 
-
- // good
-