Fix TS errors in test and story files (#1747)

* Enable type checking for tests and stories

This required shuffling around some tsconfig rules.

- The base tsconfig.json will be used locally for type checking (including test and story files). It's also a base for the other configs
- tsconfig.es.json extends the former and enables TS builds to the dist/es directory. It ignores test and story files
- tsconfig.cjs.json extends the former and enables TS builds to the dist/cjs directory

* Remove unnecessary React imports

* Oops we still need to import React here

I assume this is because we're using React internals in this file

packages/circuit-ui/components/ListItem/ListItem.stories.tsx

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { css } from '@emotion/react';
 import { action } from '@storybook/addon-actions';
 import { SumUpCard, Confirm } from '@sumup/icons';

packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.stories.tsx

@@ -14,7 +14,6 @@
  */
 
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 
 import {
   NotificationFullscreen,

packages/circuit-ui/components/NotificationModal/NotificationModal.stories.tsx

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { action } from '@storybook/addon-actions';
 
 import { ModalProvider } from '../ModalContext';

packages/circuit-ui/components/ToastContext/createUseToast.spec.tsx

@@ -13,8 +13,7 @@
  * limitations under the License.
  */
 
-/* eslint-disable react/display-name */
-import React from 'react';
+import { ReactElement } from 'react';
 
 import { renderHook, act } from '../../util/test-utils';
 
@@ -35,7 +34,7 @@ describe('createUseToast', () => {
   const setToast = jest.fn();
   const removeToast = jest.fn();
 
-  const wrapper = ({ children }) => (
+  const wrapper = ({ children }: { children: ReactElement }) => (
     <ToastContext.Provider value={{ setToast, removeToast }}>
       {children}
     </ToastContext.Provider>

packages/circuit-ui/package.json

@@ -27,8 +27,10 @@
   "scripts": {
     "start": "tsc --watch",
     "clean": "rm -rf ./dist",
-    "build": "tsc && tsc --project tsconfig.cjs.json && yarn build:executable",
+    "build:es": "tsc --project tsconfig.es.json",
+    "build:cjs": "tsc --project tsconfig.cjs.json",
     "build:executable": "chmod +x ./dist/cjs/cli/index.js",
+    "build": "yarn build:es && yarn build:cjs && yarn build:executable",
     "lint": "foundry run eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "yarn lint --fix",
     "test": "jest --watch"

packages/circuit-ui/tsconfig.cjs.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "./tsconfig.es.json",
   "compilerOptions": {
     "module": "CommonJS",
     "outDir": "./dist/cjs"

packages/circuit-ui/tsconfig.es.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "./dist/es"
+  },
+  "exclude": [
+    "**/*/__tests__/*",
+    "**/*/__testfixtures__/*",
+    "**/*.spec.*",
+    "**/*.stories.*"
+  ]
+}

packages/circuit-ui/tsconfig.json

@@ -10,21 +10,13 @@
     "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
     "moduleResolution": "node",
+    "noEmit": true,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "outDir": "./dist/es",
     "resolveJsonModule": true,
     "strict": true,
-    "target": "es2017",
-    "plugins": [
-      {
-        "name": "typescript-styled-plugin",
-        "lint": {
-          "validProperties": ["label"]
-        }
-      }
-    ]
+    "target": "es2017"
   },
   "include": [
     "cli/**/*",
@@ -35,13 +27,6 @@
     "util/**/*",
     "index.ts"
   ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*/__tests__/*",
-    "**/*/__testfixtures__/*",
-    "**/*.spec.*",
-    "**/*.stories.*"
-  ],
+  "exclude": ["node_modules", "dist"],
   "typeRoots": ["./types"]
 }

packages/circuit-ui/types/events.ts

@@ -13,8 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
 export type ClickEvent<T = Element> =
   | React.MouseEvent<T>
   | React.KeyboardEvent<T>;

packages/circuit-ui/util/errors.ts

@@ -14,7 +14,6 @@
  */
 
 /* eslint-disable max-classes-per-file */
-
 import React from 'react';
 
 export class CircuitError extends Error {

packages/circuit-ui/util/key-codes.ts

@@ -13,8 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
 export const isEnter = (event: KeyboardEvent | React.KeyboardEvent): boolean =>
   event.key === 'Enter';
 

packages/icons/scripts/web.ts

@@ -75,6 +75,9 @@ function buildComponentFile(component: Component): string {
     component.name
   }' icon. Please use one of the available sizes: '${sizes.join("', '")}'.`;
 
+  /**
+   * TODO look into whether we still need the React import here
+   */
   return dedent`
     import React from 'react';
     ${iconImports.join('\n')}
@@ -83,7 +86,9 @@ function buildComponentFile(component: Component): string {
       ${sizeMap.join('\n')}
     }
 
-    export const ${component.name} = ({ size = '${defaultSize}', ...props }) => {
+    export const ${
+      component.name
+    } = ({ size = '${defaultSize}', ...props }) => {
       const Icon = sizeMap[size] || sizeMap['${defaultSize}'];
 
       if (
@@ -107,9 +112,7 @@ function buildIndexFile(components: Component[]): string {
 
 function buildDeclarationFile(components: Component[]): string {
   const declarationStatements = components.map((component) => {
-    const sizes = component.icons
-      .map(({ size }) => `'${size}'`)
-      .sort();
+    const sizes = component.icons.map(({ size }) => `'${size}'`).sort();
     const SizesType = sizes.join(' | ');
     return `declare const ${component.name}: FC<IconProps<${SizesType}>>;`;
   });

tsconfig.json

@@ -16,15 +16,7 @@
     "outDir": "./dist/es",
     "resolveJsonModule": true,
     "strict": true,
-    "target": "es2017",
-    "plugins": [
-      {
-        "name": "typescript-styled-plugin",
-        "lint": {
-          "validProperties": ["label"]
-        }
-      }
-    ]
+    "target": "es2017"
   },
   "include": ["**/*"],
   "exclude": [