Table Component: Part 1

.babelrc

@@ -3,22 +3,25 @@
     ["@babel/preset-env", {
       "modules": false
     }],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     ["module-resolver",
       {
         "extensions": [
           ".js",
-          ".jsx"
+          ".jsx",
+          ".ts",
+          ".tsx"
         ],
         "root": [
           "./src"
         ]
       }
     ],
     ["prismjs", {
-      "languages": ["javascript", "html", "css", "jsx"],
+      "languages": ["javascript", "html", "css", "jsx", "typescript", "tsx"],
       "plugins": ["line-numbers"],
       "theme": "coy",
       "css": true

.eslintignore

@@ -2,3 +2,4 @@
 /coverage
 /build
 **/*.test.jsx
+**/*.test.tsx

.eslintrc

@@ -1,11 +1,26 @@
 {
-  "extends": "airbnb",
+  "extends": [
+    "airbnb",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/errors"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "import"
+  ],
   "env": {
     "browser": true,
     "es6": true,
     "jest": true
   },
-  "parser": "@babel/eslint-parser",
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
   "rules": {
     "arrow-parens": ["error", "as-needed"],
     "func-names": ["error", "never"],
@@ -28,6 +43,7 @@
     "react/jsx-indent": [1, "tab"],
     "react/jsx-indent-props": [1, "tab"],
     "react/jsx-one-expression-per-line": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "react/require-default-props": 0,
     "react/sort-comp": [1, {
       "order": [
@@ -37,15 +53,24 @@
         "everything-else"
       ]}
     ],
-
     "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/no-static-element-interactions": 1,
     "jsx-a11y/label-has-associated-control": ["error", {
       "required": {
         "some": ["nesting", "id"]
       }
     }],
-    "no-use-before-define": ["error", { "functions": false, "classes": true }]
+    "no-use-before-define": ["error", { "functions": false, "classes": true }],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
   },
   "globals": {
     "document": false,

.husky/pre-commit

@@ -0,0 +1,2 @@
+npm run lint
+npm run test

.storybook/main.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  stories: ['../**/*.story.jsx'],
+  stories: ['../**/*.story.@(jsx|tsx)'],
 
   addons: [
     '@storybook/addon-links',
@@ -35,7 +35,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['.jsx', '.js'],
+    extensions: ['.jsx', '.js', '.tsx', '.ts'],
   },
 
   features: {

jest.config.js

@@ -12,7 +12,7 @@ module.exports = {
 		'src/components',
 		'src/style',
 	],
-	moduleFileExtensions: ['js', 'jsx'],
+	moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
 	moduleNameMapper: {
 		'\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
 		'\\.(css|scss)$': '<rootDir>/src/main.scss',