🔧(react) adapt script and config to use the watch mode of vite

If we work from an app perspective, it is nice to have a watch mode
on our packages to see the changes in real time. Better to use the
watch mode of vite (rollup) compare to nodemon because it is faster,
we re-transpile only the files that have changed.
Possility to use the wath mode by polling as well, on a remote machine
the HMR does not work well, the polling mode helps to solve this issue.

packages/react/package.json

@@ -26,8 +26,10 @@
   ],
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
-    "dev": "yarn storybook & nodemon --watch src --ext '*' --ignore src/cunningham-tokens.ts --ignore src/cunningham-tokens.js --ignore src/cunningham-tokens.css --exec npm run build",
+    "dev": "yarn storybook",
     "build": "bash ./build",
+    "build:watch": "yarn build && vite build --mode watch",
+    "build:watch-polling": "yarn build && vite build --mode watch-polling",
     "build-fonts": "vite build -c vite.fonts.config.ts && rm -rf dist/fonts.js && make-dir dist/sass && cp src/fonts.scss dist/sass/",
     "build-icons": "vite build -c vite.icons.config.ts && rm -rf dist/icons.js && make-dir dist/sass && cp src/icons.scss dist/sass/",
     "build-theme": "cunningham -o src -g css,ts,js",

packages/react/vite.config.ts

@@ -3,11 +3,36 @@ import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import dts from "vite-plugin-dts";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { BuildOptions } from "vite";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  let buildOptions: { watch: BuildOptions["watch"] };
+  let emptyOutDir = true;
+  if (mode.includes("watch")) {
+    emptyOutDir = false;
+    buildOptions = {
+      watch: {
+        include: ["src/**/*"],
+      },
+    };
+
+    if (mode.includes("polling")) {
+      buildOptions = {
+        watch: {
+          ...buildOptions.watch,
+          chokidar: {
+            usePolling: true,
+            interval: 1000,
+          },
+        },
+      };
+    }
+  }
+
+  return {
     build: {
-    emptyOutDir: true,
+      emptyOutDir,
       outDir: "dist",
       sourcemap: true,
       lib: {
@@ -25,6 +50,7 @@ export default defineConfig({
           },
         },
       },
+      ...buildOptions,
     },
     plugins: [
       tsconfigPaths(),
@@ -60,4 +86,5 @@ export default defineConfig({
         },
       ],
     },
+  };
 });