Merge pull request #276 from springload/feat/enable-eslint

feat(tslint): adopt eslint & fix issues it raised

Author: Matthew Holloway

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        jsx: true,
+    },
+    plugins: ["react", "@typescript-eslint", "jsx-a11y"],
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:jsx-a11y/recommended",
+    ],
+    settings: {
+        react: {
+            pragma: "React",
+            version: "detect",
+        },
+    },
+    rules: {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "react/prop-types": "off",
+    },
+};

demo/src/index.tsx

@@ -38,7 +38,8 @@ const App = (): JSX.Element => (
         <h1>React Accessible Accordion</h1>
 
         <p>
-            React Component for creating an 'Accordion' that adheres to the{' '}
+            React Component for creating an &apos;Accordion&apos; that adheres
+            to the{' '}
             <a
                 href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion"
                 target="_blank"
@@ -188,10 +189,10 @@ const App = (): JSX.Element => (
         <h2 className="u-margin-top">Accessing Item State</h2>
 
         <p>
-            If you'd like to apply different content or styling based on the{' '}
-            <strong>expanded</strong> or <strong>disabled</strong> state of an
-            item, you might like to use the <strong>AccordionItemState</strong>{' '}
-            render-prop component.
+            If you&apos;d like to apply different content or styling based on
+            the <strong>expanded</strong> or <strong>disabled</strong> state of
+            an item, you might like to use the{' '}
+            <strong>AccordionItemState</strong> render-prop component.
         </p>
 
         <Accordion>
@@ -206,7 +207,9 @@ const App = (): JSX.Element => (
                             <br />
                             <br />
                             <AccordionItemState>
-                                {(state: object): React.ReactNode =>
+                                {(
+                                    state: Record<string, unknown>,
+                                ): React.ReactNode =>
                                     `State: ${JSON.stringify(state)}`
                                 }
                             </AccordionItemState>

package.json

@@ -13,7 +13,7 @@
         "test:coverage": "jest --coverage",
         "test:coverage:watch": "jest --coverage --watch",
         "coveralls": "cat ./coverage/lcov.info | coveralls",
-        "lint": "tslint --project .",
+        "lint": "eslint src",
         "typecheck": "tsc --project .",
         "build": "rimraf \"dist/**/*\" && yarn build:rollup && yarn build:types && yarn build:css",
         "build:css": "cp src/css/*.css dist",
@@ -96,11 +96,16 @@
         "@types/react-syntax-highlighter": "^11.0.4",
         "@types/react-test-renderer": "^16.8.2",
         "@types/uuid": "^3.4.4",
+        "@typescript-eslint/eslint-plugin": "^3.6.0",
+        "@typescript-eslint/parser": "^3.6.0",
         "babel-core": "^7.0.0-bridge.0",
         "babel-jest": "^24.8.0",
         "babel-loader": "^8.0.6",
         "coveralls": "^3.0.3",
         "css-loader": "^3.0.0",
+        "eslint": "^7.4.0",
+        "eslint-plugin-jsx-a11y": "^6.3.1",
+        "eslint-plugin-react": "^7.20.3",
         "file-loader": "^4.0.0",
         "gh-pages": "^2.0.1",
         "html-webpack-plugin": "^3.2.0",
@@ -121,11 +126,6 @@
         "rollup-plugin-node-resolve": "^5.1.0",
         "rollup-plugin-replace": "^2.1.1",
         "style-loader": "^0.23.1",
-        "tslint": "^6.1.2",
-        "tslint-config-prettier": "^1.18.0",
-        "tslint-microsoft-contrib": "^6.2.0",
-        "tslint-plugin-prettier": "^2.3.0",
-        "tslint-react": "^5.0.0",
         "typescript": "^3.9.5",
         "uuid": "^3.3.2",
         "webpack": "^4.29.6",

src/components/Accordion.tsx

@@ -21,7 +21,7 @@ const Accordion = ({
     onChange,
     preExpanded,
     ...rest
-}: AccordionProps) => {
+}: AccordionProps): JSX.Element => {
     return (
         <Provider
             preExpanded={preExpanded}

src/components/AccordionContext.tsx

@@ -78,8 +78,9 @@ export class Provider extends React.PureComponent<
         return this.state.getPanelAttributes(key, dangerouslySetExpanded);
     };
 
-    getHeadingAttributes = (key: UUID): InjectedHeadingAttributes => {
-        return this.state.getHeadingAttributes(key);
+    getHeadingAttributes = (): InjectedHeadingAttributes => {
+        // uuid: UUID
+        return this.state.getHeadingAttributes();
     };
 
     getButtonAttributes = (

src/components/AccordionItem.tsx

@@ -21,7 +21,7 @@ const AccordionItem = ({
     activeClassName,
     dangerouslySetExpanded,
     ...rest
-}: Props) => {
+}: Props): JSX.Element => {
     const renderChildren = (itemContext: ItemContext): JSX.Element => {
         const { expanded } = itemContext;
         const cx = expanded && activeClassName ? activeClassName : className;

src/components/AccordionItemButton.tsx

@@ -73,7 +73,8 @@ const AccordionItemButton = ({
         <div
             className={className}
             {...rest}
-            // tslint:disable-next-line react-a11y-event-has-role
+            role="button"
+            tabIndex={0}
             onClick={toggleExpanded}
             onKeyDown={handleKeyPress}
             data-accordion-component="AccordionItemButton"

src/components/AccordionItemState.tsx

@@ -8,7 +8,7 @@ type Props = Pick<DivAttributes, Exclude<keyof DivAttributes, 'children'>> & {
     ): React.ReactNode;
 };
 
-const AccordionItemState = ({ children }: Props) => {
+const AccordionItemState = ({ children }: Props): JSX.Element => {
     const renderChildren = (itemContext: ItemContext): JSX.Element => {
         const { expanded, disabled } = itemContext;
 

src/components/ItemContext.tsx

@@ -69,8 +69,9 @@ class Provider extends React.Component<ProviderProps> {
                     headingAttributes,
                     buttonAttributes,
                 }}
-                children={this.props.children}
-            />
+            >
+                {this.props.children}
+            </Context.Provider>
         );
     };
 

src/helpers/AccordionStore.ts

@@ -96,9 +96,8 @@ export default class AccordionStore {
         };
     };
 
-    public readonly getHeadingAttributes = (
-        uuid: UUID,
-    ): InjectedHeadingAttributes => {
+    public readonly getHeadingAttributes = (): // uuid: UUID,
+    InjectedHeadingAttributes => {
         return {
             role: 'heading',
         };