build: migrate from create-react-app (craco) to Vite

.eslintrc.js

@@ -1,10 +1,11 @@
 module.exports = {
+  root: true,
   env: {
     browser: true,
     es2021: true,
     node: true,
   },
-  ignorePatterns: ['storybook-static/**'],
+  ignorePatterns: ['storybook-static/**', 'build/**', 'out/**'],
   extends: [
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
@@ -25,6 +26,25 @@ module.exports = {
     'react/prop-types': [0],
     'no-unused-vars': [1],
   },
+  overrides: [
+    {
+      // Vitest globals (test.globals is enabled in vite.config.mjs); `jest`
+      // is stubbed to `vi` in src/setupTests.js for testing-library.
+      files: ['**/*.test.{js,jsx}'],
+      globals: {
+        describe: 'readonly',
+        it: 'readonly',
+        test: 'readonly',
+        expect: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+        beforeAll: 'readonly',
+        afterAll: 'readonly',
+        vi: 'readonly',
+        jest: 'readonly',
+      },
+    },
+  ],
   settings: {
     react: {
       version: 'detect',

.github/workflows/lint-and-format.yml

@@ -11,6 +11,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v5
 
+      - name: Setup NodeJS env
+        uses: actions/setup-node@v5
+        with:
+          node-version: '22.x'
+
       - name: Authenticate with github package registry
         run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > ~/.npmrc
 
@@ -23,5 +28,8 @@ jobs:
       - name: Run Prettier check
         run: npm run format:check
 
+      - name: Run Tests
+        run: npm test
+
       - name: Run Build
         run: npm run build

.github/workflows/staging-build-and-deploy.yml

@@ -13,6 +13,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v5
 
+      - name: Setup NodeJS env
+        uses: actions/setup-node@v5
+        with:
+          node-version: '22.x'
+
       - name: Authenticate with github package registry
         run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > ~/.npmrc
 

.github/workflows/web-production-publish.yml

@@ -21,6 +21,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v5
 
+      - name: Setup NodeJS env
+        uses: actions/setup-node@v5
+        with:
+          node-version: '22.x'
+
       - name: Authenticate with github package registry
         run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > ~/.npmrc
 

.github/workflows/windows-production-publish.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup NodeJS env
         uses: actions/setup-node@v5
         with:
-          node-version: '20.x'
+          node-version: '22.x'
 
       - name: Authenticate with github package registry
         run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" > ~/.npmrc

.storybook/main.js

@@ -1,29 +1,16 @@
-const path = require('path');
-
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+/** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/preset-create-react-app',
-    '@storybook/addon-docs',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-themes',
-  ],
+  addons: ['@storybook/addon-docs', '@storybook/addon-onboarding', '@storybook/addon-themes'],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
   staticDirs: ['../public'],
   typescript: {
     reactDocgen: 'react-docgen',
   },
-  webpackFinal: async (config) => {
-    // Add support for @ alias
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '@': path.resolve(__dirname, '../src'),
-    };
-    return config;
-  },
+  // `@` alias and svgr are inherited from vite.config.mjs; PostCSS (Tailwind)
+  // is auto-discovered from postcss.config.js.
 };
 export default config;

.storybook/preview.js

@@ -3,7 +3,7 @@ import { withThemeByClassName } from '@storybook/addon-themes';
 // Import Tailwind CSS
 import '../src/index.css';
 
-/** @type { import('@storybook/react-webpack5').Preview } */
+/** @type { import('@storybook/react-vite').Preview } */
 const preview = {
   parameters: {
     controls: {

README.md

@@ -11,7 +11,7 @@ https://github.com/coseeing/Access8MathWeb/wiki/Release-Flow
 
 ## Prerequisites
 
-- Node.js >= 18
+- Node.js 20.19+, 22.12+ or 24+ (see `engines` in package.json)
 - NPM >= 9
 
 ## Install Coseeing Github Packages

index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Access8Math editor" />
+    <title>Access8Math</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>