feat: Convert to TypeScript, functional components and upgrade to ESLint 9 (#106)

- Support React 19
- Use React functional components
- Support TypeScript natively (re-written using TS)
- Upgrade to ESLint 9

Author: skitscha

.babelrc

@@ -9,7 +9,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.js]
+[*.{js,ts,tsx}]
 quote_type = single
 spaces_around_operators = true
 

.editorconfig

@@ -15,3 +15,5 @@ node_modules
 # Build
 
 dist
+
+public

.eslintignore

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+npm run validate:commit

.gitignore

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+npm run validate:push

.husky/pre-commit

@@ -0,0 +1 @@
+22

.husky/pre-push

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-webpack5-compiler-swc',
+  ],
+  docs: {
+    autodocs: true,
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+};
+export default config;

.nvmrc

@@ -0,0 +1,32 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import reactPlugin from "eslint-plugin-react";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import perfectionist from "eslint-plugin-perfectionist";
+import path from "path";
+import { fileURLToPath } from "url";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  perfectionist.configs["recommended-natural"],
+  {
+    ignores: ["dist", "eslint.config.mjs"],
+  },
+  {
+    files: ["**/*.{js,jsx,mjs,cjs,ts,tsx}"],
+    ...reactPlugin.configs.flat.recommended,
+    ...reactHooks.configs["recommended-latest"],
+    languageOptions: {
+      ...reactPlugin.configs.flat.languageOptions,
+      globals: {
+        ...globals.browser,
+      },
+      parserOptions: {
+        project: ["tsconfig.eslint.json"],
+        tsconfigRootDir: path.dirname(fileURLToPath(import.meta.url)),
+      },
+    },
+  }
+);

.storybook/main.ts

@@ -0,0 +1,3 @@
+export default {
+  "*": (filenames) => [`eslint ${filenames.join(" ")} --fix`, "git add"],
+};