pr05 Typescript #1: Set up TS dependencies

.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-env"
+    "@babel/preset-env",
+    "@babel/preset-typescript"
   ],
   "env": {
     "production": {

.eslintrc

@@ -85,7 +85,12 @@
   },
   "overrides": [
     {
-      "files": ["*.stories.jsx"],
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"]
+    },
+    {
+      "files": ["*.stories.@(js|jsx|ts|tsx)"],
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }

.gitignore

@@ -21,4 +21,6 @@ terraform/.terraform/
 storybook-static
 duplicates.json
 
-coverage
+coverage
+
+*.tsbuildinfo

.storybook/main.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: ['../client/**/*.stories.(jsx|mdx)'],
+  stories: ['../client/**/*.stories.(jsx|md|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -18,19 +18,19 @@ const config = {
     // https://storybook.js.org/docs/react/builders/webpack
     // this modifies the existing image rule to exclude .svg files
     // since we want to handle those files with @svgr/webpack
-    const imageRule = config.module.rules.find(rule => rule.test.test('.svg'))
-    imageRule.exclude = /\.svg$/
+    const imageRule = config.module.rules.find((rule) =>
+      rule.test.test('.svg')
+    );
+    imageRule.exclude = /\.svg$/;
 
     // configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack']
-    })
+    });
 
-    return config
-  },
+    return config;
+  }
 };
 
 export default config;
-
-

client/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "jsx": "react",
+  },
+}