TypeScript: Tests, CSS modules, and dependency updates (#178)

* Upgrading for better TS jest support

* Moves all test files to expected matcher (react-script upgrade)

* Convert Pill completely to TypeScript

* Do not upgrade or install unnecessarily

* More missed test.js file renames

* Fixing TS issues with Responsive.Container

* style.css => {Component}.module.css

* Restore Prettier 1.19

* Revert unnecessary dependency change

* Restores Accordion.test.js from Prettier

.eslintrc

@@ -53,8 +53,7 @@
     {
       "files": ["*.ts", "*.tsx"],
       "rules": {
-        "react/prop-types": "off",
-        "@typescript-eslint/explicit-function-return-type": ["error"]
+        "react/prop-types": "off"
       }
     }
   ]

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "useTabs": false
+}

.storybook/main.js

@@ -10,35 +10,4 @@ module.exports = {
     '@storybook/addon-backgrounds/register',
     '@storybook/preset-typescript',
   ],
-  webpackFinal: (config) => {
-    config.module.rules = config.module.rules.map((f) => {
-      // Needed to add this to ignore our ../src/ for the default rule, instead of purging it.
-      if (f.test.toString() === '/\\.css$/') {
-        f.exclude = path.resolve(__dirname, '../src/');
-      }
-
-      return f;
-    });
-
-    config.module.rules.push({
-      test: /\.css$/,
-      loaders: [
-        'style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            context: __dirname,
-            importLoaders: 1,
-            localIdentName: '[local]--[contenthash:base64:5]',
-            minimize: true,
-            modules: true,
-            sourceMap: true,
-          },
-        },
-      ],
-      include: path.resolve(__dirname, '../src/'),
-    });
-
-    return config;
-  },
 };

package.json

@@ -83,9 +83,12 @@
     "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^5.3.18",
     "@types/classnames": "^2.2.10",
+    "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.4",
+    "@types/node": "^14.0.4",
     "@types/react": "^16.9.27",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "auto-changelog": "^2.0.0",
     "babel-eslint": "^10.1.0",
@@ -96,21 +99,21 @@
     "cssnano": "^4.1.10",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.13.0",
-    "eslint": "^7.0.0",
+    "eslint": "^6.8.0",
     "eslint-config-airbnb-typescript": "^7.2.1",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^6.7.0",
     "eslint-config-react": "^1.1.7",
     "eslint-config-standard": "^14.1.0",
     "eslint-config-standard-react": "^9.2.0",
     "eslint-import-resolver-alias": "^1.0.3",
     "eslint-import-resolver-webpack": "^0.12.1",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-mocha": "^7.0.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-promise": "^4.0.0",
-    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-standard": "^4.0.1",
     "fork-ts-checker-webpack-plugin": "^4.1.3",
@@ -123,16 +126,16 @@
     "npm-run-all": "^4.1.5",
     "postcss-calc": "^7.0.1",
     "postcss-custom-properties": "^8.0.9",
-    "prettier": "^2.0.5",
+    "prettier": "^1.19.1",
     "prop-types": "^15.5.4",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "^1.1.4",
+    "react-scripts": "^3.4.1",
     "storybook-readme": "^5.0.2",
     "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
     "ts-loader": "^7.0.2",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.3"
   },
   "files": [
     "dist"

src/components/Accordion/test.js → src/components/Accordion/Accordion.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import ExpansionPanel from '../ExpansionPanel';
-import Accordion from './';
+import Accordion from '.';
 
 describe('Accordion', () => {
   it('renders its children', () => {

src/components/Avatar/Addon.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import style from './style.css';
+import style from './Avatar.module.css';
 
 const Addon = ({ position, offset, ...rest }) => {
   const positions = useMemo(() => {

src/components/Avatar/test.js → src/components/Avatar/Avatar.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 
-import Avatar from './';
+import Avatar from '.';
 
 jest.useFakeTimers();
 
@@ -39,11 +39,19 @@ describe('Avatar', () => {
   });
 
   it('renders an image in bg assuming valid url', () => {
-    const imageUrl = `http://some.url/image.png`;
+    const imageUrl = `https://via.placeholder.com/350x150`;
     Object.defineProperty(HTMLImageElement.prototype, 'naturalHeight', {
       get: () => 120,
     });
-    const wrapper = mount(<Avatar name="Helter Skelter" imageUrl={imageUrl} />);
+    const wrapper = mount(
+      <Avatar
+        name="Helter Skelter"
+        imageUrl={imageUrl}
+        imageFetcher={({ onLoad, src }) => {
+          onLoad(src);
+        }}
+      />
+    );
     expect(wrapper.text()).toEqual('');
     expect(wrapper.children().prop('style')).toHaveProperty(
       'backgroundImage',

src/components/Avatar/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import Addon from './Addon';
-import style from './style.css';
+import style from './Avatar.module.css';
 import { sizeBase } from '../../shared/sizing';
 
 const semanticSizes = {
@@ -100,7 +100,7 @@ const Avatar = ({
       onError: handleError,
       src: imageUrl,
     });
-  }, [imageUrl]);
+  }, [imageFetcher, imageUrl, onError, onLoad]);
 
   const mainStyle = {
     ...sizes,

src/components/Badge/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import styles from './style.css';
+import styles from './Badge.module.css';
 import { propTypes } from '../../shared/models/tag';
 
 export const variants = [

src/components/Button/Addon/test.js → src/components/Button/Addon/Addon.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Addon from './';
+import Addon from '.';
 
 describe('Addon', () => {
   describe('Main component', () => {

src/components/Button/Addon/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import style from './style.css';
+import style from './Addon.module.css';
 
 const Addon = ({ className, size, ...passedProps }) => (
   <div

src/components/Button/index.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { propTypes as tagPropTypes } from '../../shared/models/tag';
 
 import Addon from './Addon';
-import styles from './style.css';
+import styles from './Button.module.css';
 
 /*
   These 2 variants are in design docs but might not be "Buttons" in a strict sense.
@@ -40,7 +40,7 @@ export const sizes = [
   'lg', // "Large"
 ];
 
-const Button = props => {
+const Button = (props) => {
   const {
     children: initChildren,
     circle,
@@ -57,7 +57,7 @@ const Button = props => {
 
   // For future ref
   const truthyStateKeys = useMemo(
-    () => states.filter(state => !!passedProps[state]),
+    () => states.filter((state) => !!passedProps[state]),
     [passedProps]
   );
 
@@ -95,17 +95,18 @@ const Button = props => {
           'disabled', 'active', etc. so consumers can force appearance on
           elements easily
         */
-        truthyStateKeys.map(truthyStateKey => styles[truthyStateKey])
+        truthyStateKeys.map((truthyStateKey) => styles[truthyStateKey])
       ),
     [circle, darkMode, hollow, level, passedClassName, size, truthyStateKeys]
   );
 
   const addonChildren = React.Children.toArray(initChildren).filter(
-    child => child && child.type && child.type.displayName === Addon.displayName
+    (child) =>
+      child && child.type && child.type.displayName === Addon.displayName
   );
 
   if (addonChildren.length) {
-    children = React.Children.map(initChildren, child => {
+    children = React.Children.map(initChildren, (child) => {
       if (child && child.type && child.type.displayName === Addon.displayName) {
         return React.cloneElement(child, { ...child.props, size });
       }

src/components/Callout/index.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import includes from 'lodash/includes';
 import isFunction from 'lodash/isFunction';
 
-import styles from './style.css';
+import styles from './Callout.module.css';
 
 import Icon from '../Icon';
 
@@ -35,7 +35,7 @@ const Callout = ({
       {children}
       {onCancel && isFunction(onCancel) && (
         <div className={styles.cancel}>
-          <button className={styles.cancelButton}>
+          <button type="button" className={styles.cancelButton}>
             <Icon
               name="close"
               className={styles.cancelIcon}

src/components/Collapse/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import isNull from 'lodash/isNull';
 
-import style from './style.css';
+import style from './Collapse.module.css';
 
 const Collapse = ({
   children,
@@ -36,17 +36,17 @@ const Collapse = ({
   );
 
   const handleExit = useCallback(
-    node => {
+    (node) => {
       setHeight(node.scrollHeight);
       onExit(node);
     },
     [onExit, setHeight]
   );
 
   const handleExiting = useCallback(
-    node => {
-      /* eslint-disable no-unused-expressions */
-      node.offsetHeight; // getting this variable triggers a reflow
+    (node) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      // node.offsetHeight; // getting this variable triggers a reflow
       setHeight(0);
       node.style.transitionDuration = `${timeout}ms`;
       onExiting(node);
@@ -55,7 +55,7 @@ const Collapse = ({
   );
 
   const handleExited = useCallback(
-    node => {
+    (node) => {
       setHeight(null);
       onExited(node);
     },
@@ -73,7 +73,7 @@ const Collapse = ({
       onExiting={handleExiting}
       onExited={handleExited}
     >
-      {transitionState => {
+      {(transitionState) => {
         const styleHeight = isNull(height) ? null : { height };
         return (
           <div style={styleHeight} className={style[transitionState]}>

src/components/Dropdown/test.js → src/components/Dropdown/Dropdown.test.js

@@ -15,7 +15,7 @@ describe('Dropdown', () => {
         const wrapper = mount(
           <Dropdown isOpen onToggle={() => {}}>
             <isOpenContext.Consumer>
-              {isOpen => `isOpen: ${JSON.stringify(isOpen)}`}
+              {(isOpen) => `isOpen: ${JSON.stringify(isOpen)}`}
             </isOpenContext.Consumer>
           </Dropdown>
         );
@@ -29,7 +29,7 @@ describe('Dropdown', () => {
         const wrapper = mount(
           <Dropdown disabled isOpen onToggle={() => {}}>
             <isOpenContext.Consumer>
-              {isOpen => `isOpen: ${JSON.stringify(isOpen)}`}
+              {(isOpen) => `isOpen: ${JSON.stringify(isOpen)}`}
             </isOpenContext.Consumer>
           </Dropdown>
         );
@@ -44,7 +44,7 @@ describe('Dropdown', () => {
       const wrapper = mount(
         <Dropdown onToggle={() => {}}>
           <isOpenContext.Consumer>
-            {isOpen => `isOpen: ${JSON.stringify(isOpen)}`}
+            {(isOpen) => `isOpen: ${JSON.stringify(isOpen)}`}
           </isOpenContext.Consumer>
         </Dropdown>
       );

src/components/Dropdown/Menu/Item/test.js → src/components/Dropdown/Menu/Item/Item.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Item from './';
+import Item from '.';
 
 describe('Item', () => {
   it('renders', () => {

src/components/Dropdown/Menu/test.js → src/components/Dropdown/Menu/Menu.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 
 import { isOpenContext } from '../context';
-import Menu from './';
+import Menu from '.';
 
 describe('Menu', () => {
   it('renders', () => {