refactor: migrate to React

.github/workflows/e2e.yml

@@ -24,7 +24,6 @@ jobs:
         run: |
           python -m pip install --upgrade pip
           sudo -H pip install setuptools
-
       - uses: pnpm/action-setup@v4
         with:
           version: 9

.nvmrc

@@ -1 +1 @@
-14.21
+20

.prettierignore

@@ -1,4 +1,4 @@
 node_modules
 dist
 generated-parser
-pnpm-lcok.yaml
+pnpm-lcok.yaml

cypress/e2e/style-panel.spec.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-undef */
+ 
 import "cypress-plugin-snapshots/commands";
 describe("Smoke test", function () {
   it("style-panel", function () {

docs/running-cypress-tests-locally.md

@@ -0,0 +1,76 @@
+# Running Cypress Tests Locally
+
+This document explains how to run Cypress tests locally on your machine, with a focus on ensuring color profiles match those used in GitHub Actions for consistent visual testing results.
+
+## Running Tests
+
+You can run Cypress tests using the following commands:
+
+- Run all tests headlessly:
+
+```bash
+pnpm cy
+```
+
+- Run a specific test file:
+
+```bash
+pnpm cypress run --spec "cypress/e2e/smoke.spec.js"
+```
+
+## Color Profile Configuration
+
+### Why Color Profiles Matter
+
+Visual regression tests in Cypress compare screenshots pixel-by-pixel. Different color profiles can cause the same UI to render with slightly different colors, leading to false test failures. To match the GitHub Actions environment, we use the sRGB color profile.
+
+### Automatic Configuration
+
+Our Cypress configuration automatically forces the sRGB color profile when running tests. This is configured in `cypress/plugins/index.js` with the following code:
+
+```javascript
+on("before:browser:launch", (browser = {}, launchOptions) => {
+  if (browser.family === "chromium" && browser.name !== "electron") {
+    launchOptions.args.push("--force-color-profile=srgb");
+  }
+});
+```
+
+### Configuring macOS Color Profile
+
+For the most consistent results, you should also configure your macOS system to use the sRGB color profile:
+
+1. Open System Preferences (or System Settings on newer macOS versions)
+2. Go to "Displays"
+3. Select the "Color" tab
+4. Click "Calibrate" to open the Display Calibrator Assistant
+5. Follow the wizard and when prompted for a color profile, select "sRGB"
+6. Complete the calibration and save the profile
+
+Alternatively, you can directly select an existing sRGB profile:
+
+1. Open System Preferences > Displays > Color
+2. From the list of color profiles, select "sRGB IEC61966-2.1" or a similar sRGB profile
+3. Click "Apply"
+
+## Troubleshooting Visual Test Failures
+
+If you encounter visual test failures despite using the sRGB profile:
+
+1. Check that your display brightness is set to a consistent level
+2. Ensure you're using the same browser version as GitHub Actions (Chrome)
+3. Verify that your OS theme/appearance settings match the CI environment (light mode is recommended)
+4. If necessary, adjust the threshold in the image snapshot configuration:
+
+```javascript
+cy.document().toMatchImageSnapshot({
+  imageConfig: { threshold: 0.012 }, // Increase this value if needed
+  capture: "viewport",
+});
+```
+
+## Additional Resources
+
+- [Cypress Image Snapshot Documentation](https://github.com/jaredpalmer/cypress-image-snapshot)
+- [Chrome Command Line Switches](https://peter.sh/experiments/chromium-command-line-switches/)
+- [macOS Color Management Guide](https://support.apple.com/guide/mac-help/calibrate-your-display-mchlp2920/mac)

eslint.config.mjs

@@ -0,0 +1,35 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      eslintConfigPrettier,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-unsafe-function-type": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+);

index.html

@@ -1,6 +1,9 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="preload stylesheet"
@@ -16,9 +19,6 @@
       /*    font-family: "Kalam", serif;*/
       /*}*/
     </style>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link
       rel="stylesheet"
       href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css"
@@ -34,10 +34,14 @@
     />
     <title>ZenUML Core Demo</title>
     <style>
+      body {
+        margin: 0;
+      }
       .CodeMirror {
         /* Set height, width, borders, and global font properties here */
         font-family: monospace;
         font-size: 13px;
+        height: 100vh;
       }
 
       .zenuml .CodeMirror .CodeMirror-cursor {
@@ -62,14 +66,7 @@
       }
     </style>
   </head>
-
   <body>
-    <noscript>
-      <strong
-        >We're sorry but vue-sequence doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
-    </noscript>
     <div class="m-1 grid grid-cols-6" id="diagram1">
       <div class="col-span-2">
         <textarea
@@ -121,6 +118,6 @@
         editor.setValue(savedCode);
       }
     </script>
-    <script type="module" src="./src/main.ts"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenuml/core",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -11,9 +11,9 @@
     "preview": "vite preview --port 8080 --host",
     "build:site": "vite build",
     "build:gh-pages": "vite build --mode gh-pages",
-    "build": "vite build -c vite.config.lib.js",
+    "build": "vite build -c vite.config.lib.ts",
     "test": "vitest",
-    "cy": "cypress run",
+    "cy": "cypress install & cypress run",
     "cy:update": "cypress run --env updateSnapshots=true",
     "cy:open": "cypress open",
     "cy:smoke": "cypress run --spec cypress/e2e/smoke.spec.js",
@@ -25,7 +25,7 @@
     "antlr:clear": "rm -rf src/generated-parser/*",
     "antlr:lexer": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.11.1-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceLexer.g4",
     "antlr:parser": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.11.1-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceParser.g4",
-    "eslint": "eslint --fix --ext .js,.ts,.vue src",
+    "eslint": "eslint --fix --ext .js,.ts,.tsx,.jsx src",
     "prettier": "prettier --write --ignore-unknown \"src/**/*.{js,ts,vue,json,htm,html}\"",
     "git:branch:clean:gone": "git fetch -p && git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -d",
     "git:branch:clean:merged": "git branch --merged|egrep -v \"(\\*|master|main|dev|skip_branch_name)\" | xargs git branch -d",
@@ -39,87 +39,80 @@
   "types": "./types/index.d.ts",
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown",
-    "*.{js,ts,vue,json,htm,html}": "eslint --fix"
+    "*.{js,ts,tsx,jsx,json,htm,html}": "eslint --fix"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "postcss": {
+    "plugins": {
+      "tailwindcss": {},
+      "autoprefixer": {}
+    }
+  },
+  "pnpm": {
+    "overrides": {
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0"
+    }
   },
   "dependencies": {
-    "@headlessui-float/vue": "^0.14.0",
-    "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "^1.7.16",
-    "@types/assert": "^1.5.6",
-    "@types/ramda": "^0.28.20",
-    "@vue/compat": "^3.2.45",
+    "@floating-ui/react": "^0.27.8",
+    "@headlessui/react": "^2.2.1",
+    "@headlessui/tailwindcss": "^0.2.2",
     "antlr4": "~4.11.0",
-    "color-string": "^1.5.5",
-    "dom-to-image-more": "^2.13.0",
-    "dompurify": "^3.1.5",
-    "file-saver": "^2.0.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "color-string": "^2.0.1",
+    "dompurify": "^3.2.5",
     "highlight.js": "^10.7.3",
-    "html-to-image": "^1.11.3",
-    "lodash": "^4.17.21",
-    "marked": "^4.0.10",
+    "html-to-image": "^1.11.13",
+    "immer": "^10.1.1",
+    "jotai": "^2.12.2",
+    "marked": "^4.3.0",
     "pino": "^8.8.0",
-    "postcss": "^8.4.31",
+    "radash": "^12.1.0",
     "ramda": "^0.28.0",
-    "tailwindcss": "^3.4.17",
-    "vue": "^3.2.45",
-    "vuex": "^4.1.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.1.0",
+    "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/preset-env": "^7.20.2",
+    "@eslint/js": "^9.21.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@types/antlr4": "~4.11.2",
-    "@types/color-string": "^1.5.2",
-    "@types/jest": "^29.5.14",
+    "@types/color-string": "^1.5.5",
+    "@types/highlight.js": "10",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.14.191",
-    "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitest/coverage-v8": "^2.1.5",
-    "@vue/compiler-dom": "^3.3.8",
-    "@vue/compiler-sfc": "^3.2.45",
-    "@vue/test-utils": "^2.2.7",
-    "autoprefixer": "^10.4.13",
-    "concurrently": "^7.6.0",
-    "cypress": "^10.11.0",
+    "@types/marked": "^4.3.2",
+    "@types/node": "^22.14.0",
+    "@types/ramda": "^0.28.20",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
+    "cypress": "^14.3.2",
     "cypress-plugin-snapshots": "^1.4.4",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "global-jsdom": "^8.6.0",
-    "husky": "^8.0.3",
-    "jsdom": "^20.0.3",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.3",
-    "lint-staged": "^14.0.1",
-    "prettier": "^3.0.3",
-    "regenerator-runtime": "^0.13.11",
-    "sass": "^1.57.0",
-    "svg-url-loader": "^6.0.0",
-    "terser-webpack-plugin": "^3.1.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.6.3",
-    "vite": "^4.5.6",
-    "vite-plugin-css-injected-by-js": "^2.2.0",
-    "vite-svg-loader": "^4.0.0",
-    "vitest": "^2.1.5"
-  },
-  "postcss": {
-    "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "last 2 years"
-  ],
-  "engines": {
-    "node": ">=12.0.0"
-  },
-  "volta": {
-    "node": "18.12.1"
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "husky": "^9.1.7",
+    "jsdom": "^26.1.0",
+    "less": "^4.3.0",
+    "lint-staged": "^15.5.1",
+    "postcss": "^8.5.3",
+    "prettier": "3.5.3",
+    "sass": "^1.86.3",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^3.1.1"
   }
 }