feat: add typescript support

.babelrc

@@ -1,29 +1,23 @@
 {
-    "presets": [
-        [
-          "@babel/preset-react",
-          {
-            "runtime": "automatic"
-          }
-        ],
-        ["@babel/preset-env"]
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
     ],
-    "plugins": [
-      ["module-resolver", {
+    ["@babel/preset-env"],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "module-resolver",
+      {
         "root": ["./"],
         "alias": {
           "@": "./src"
         }
-      }]
-    ],
-    "env": {
-      "production": {
-        "plugins": [
-          ["transform-react-remove-prop-types", {
-            "mode": "wrap",
-            "ignoreFilenames": ["node_modules"]
-          }]
-        ]
       }
-    }
-}
+    ]
+  ]
+}

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       alias: {
-        extensions: ['.js'],
+        extensions: ['.js', '.tsx', '.ts'],
         map: [['@', './src']]
       }
     }
@@ -44,9 +44,12 @@ module.exports = {
     'object-curly-spacing': ['error', 'never'],
     'eol-last': ['error'],
     'comma-dangle': ['error', 'never'],
-    'react/jsx-filename-extension': [1, {
-      extensions: ['.js', '.jsx']
-    }],
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+      }
+    ],
     'arrow-parens': 'off',
     'no-underscore-dangle': 'off',
     'object-curly-newline': 'off'

.gitignore

@@ -10,3 +10,6 @@ build/
 .idea
 *.log
 .history/
+
+.codegpt
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,35 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(tsx)'],
+  addons: [],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  webpackFinal: async (config, {configType}) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '../src')
+    };
+
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', ['@babel/preset-react', {runtime: 'automatic'}], '@babel/preset-typescript']
+          }
+        }
+      ]
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    return config;
+  },
+  docs: {
+    autodocs: true
+  }
+};

.storybook/preview.js

@@ -1,9 +1,13 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;