feat: add TypeScript support

frontend/vite.config.js

@@ -1,8 +1,25 @@
 /// <reference types="vitest/config" />
 import { defineConfig } from "vite";
 import { configDefaults } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import { copyFileSync } from "fs";
+
 import { resolve } from "path";
 
+const copyCssPlugin = () => ({
+  name: "copy-css",
+  closeBundle: () => {
+    try {
+      copyFileSync(
+        "./ts/dist/frontend.css",
+        "./resources/public/css/ts-style.css",
+      );
+    } catch (e) {
+      console.log("Error copying css file", e);
+    }
+  },
+});
+
 // https://vitejs.dev/config/
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -14,6 +31,7 @@ const dirname =
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
+  plugins: [react(), copyCssPlugin()],
   test: {
     exclude: [...configDefaults.exclude, "target/**", "resources/**"],
     environment: "jsdom",
@@ -50,4 +68,22 @@ export default defineConfig({
       "@public": resolve(__dirname, "./resources/public/js/"),
     },
   },
+  build: {
+    outDir: './ts/dist/',
+    emptyOutDir: true,
+    lib: {
+      entry: './ts/src/index.tsx',
+      fileName: () => `index.js`,
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          "react-dom": "ReactDOM",
+        },
+      },
+    }
+  },
 });