fix: react-app general updates (#19)

TobiTenno · web-flow · commit 48455de4299a · 2025-11-15T21:04:50.000Z
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.lintstagedrc.yaml b/.lintstagedrc.yaml
@@ -0,0 +1,8 @@
+'*.tsx?':
+  - eslint --fix
+  - npx --yes prettier --write
+'*.{json,yaml,yml,md,html,css,scss}':
+  - npx --yes prettier --write
+package*.json:
+  - npx sort-package-json
+  - npx --yes prettier --write
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,17 +2,6 @@
   "name": "examples",
   "version": "0.0.0-dev",
   "description": "Examples repo",
-  "main": "scripts/start.ts",
-  "scripts": {
-    "test": "npm run test --workspaces --if-present",
-    "start": "tsx scripts/start.ts",
-    "build": "npm run build --workspaces --if-present",
-    "clean": "npx rimraf ./**/{build,coverage,dist,node_modules,out}"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/romcal/romcal-examples.git"
-  },
   "keywords": [
     "examples",
     "romcal",
@@ -21,6 +10,15 @@
     "iife",
     "rest-api"
   ],
+  "homepage": "https://github.com/romcal/romcal-examples#readme",
+  "bugs": {
+    "url": "https://github.com/romcal/romcal-examples/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/romcal/romcal-examples.git"
+  },
+  "license": "MIT",
   "author": {
     "name": "Etienne Magnier",
     "email": "etienne.magnier@gmail.com",
@@ -38,24 +36,28 @@
       "url": "https://github.com/tukusejssirs"
     }
   ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/romcal/romcal-examples/issues"
-  },
-  "homepage": "https://github.com/romcal/romcal-examples#readme",
+  "type": "module",
+  "main": "scripts/start.ts",
   "workspaces": [
     "html-web-page",
     "react-app",
     "rest-api-with-fastify",
     "rest-api-with-express",
     "node-console"
   ],
+  "scripts": {
+    "build": "npm run build --workspaces --if-present",
+    "clean": "npx rimraf node_modules ./**/{build,coverage,dist,node_modules,out}",
+    "prepare": "npx husky",
+    "start": "tsx scripts/start.ts",
+    "test": "npm run test --workspaces --if-present"
+  },
   "devDependencies": {
-    "@types/yargs": "^17.0.33",
+    "@types/yargs": "^17.0.35",
     "cli-select": "^1.1.2",
-    "tsx": "^4.19.4",
-    "typescript": "^5.8.3",
-    "yargs": "^17.7.2"
-  },
-  "type": "module"
+    "husky": "^9.1.7",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.3",
+    "yargs": "^18.0.0"
+  }
 }
diff --git a/react-app/cypress.config.ts b/react-app/cypress.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'cypress';
-import vitePreprocessor from 'cypress-vite';
+import { getVitePrebuilder } from 'cypress-vite';
 
 const port = Number.parseInt(process.env.ROMCAL_APP_PORT ?? '3000', 10);
+const { vitePrebuild, vitePreprocessor } = getVitePrebuilder();
 
 export default defineConfig({
   reporter: 'junit',
@@ -12,8 +13,9 @@ export default defineConfig({
   e2e: {
     supportFile: false,
     baseUrl: `http://localhost:${port}`,
-    setupNodeEvents(on) {
-      on('file:preprocessor', vitePreprocessor('./vite.config.ts'));
+    setupNodeEvents(on, config) {
+      on('before:run', (details) => vitePrebuild(details, config));
+      on('file:preprocessor', vitePreprocessor);
     },
     env: {
       ROMCAL_APP_PORT: port,
diff --git a/react-app/eslint.config.mjs b/react-app/eslint.config.mjs
@@ -13,6 +13,11 @@ export default tseslint.config(
   eslint.configs.recommended,
   {
     ignores: ['dist/', 'build/'],
+    settings: {
+      react: {
+        version: '19',
+      },
+    },
   },
   {
     files: ['**/*.{ts,tsx}'],
@@ -21,7 +26,8 @@ export default tseslint.config(
   tseslint.configs.recommended,
   jsxA11y.flatConfigs.recommended,
   react.configs.flat.recommended,
-  reactHooks.configs['recommended-latest'],
+  react.configs.flat['jsx-runtime'],
+  reactHooks.configs.flat['recommended-latest'],
   pluginCypress.configs.recommended,
   eslintPluginPrettier
 );
diff --git a/react-app/package.json b/react-app/package.json
@@ -10,22 +10,34 @@
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix",
     "serve": "NODE_NO_WARNINGS=1 vite",
-    "serve:dev": "ESLINT_USE_FLAT_CONFIG=false VITE_DAY_VARIANT=developer npm run serve",
+    "serve:dev": "VITE_DAY_VARIANT=developer npm run serve",
     "start": "NODE_NO_WARNINGS=1 npx http-server build -p ${ROMCAL_APP_PORT:-3000} -g -s",
     "test": "NODE_NO_WARNINGS=1 npx cypress run"
   },
+  "overrides": {
+    "@babel/plugin-proposal-class-properties": "@babel/plugin-transform-class-properties",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "@babel/plugin-transform-nullish-coalescing-operator",
+    "@babel/plugin-proposal-numeric-separator": "@babel/plugin-transform-numeric-separator",
+    "@babel/plugin-proposal-optional-chaining": "@babel/plugin-transform-optional-chaining",
+    "@babel/plugin-proposal-private-methods": "@babel/plugin-transform-private-methods",
+    "flux": {
+      "react": "^18.0.0"
+    },
+    "html-entities": "^2.5.2"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@microlink/react-json-view": "^1.26.2",
-    "@mui/icons-material": "^7.1.0",
-    "@mui/material": "^7.1.0",
-    "@mui/utils": "^7.1.0",
+    "@emotion/styled": "^11.14.1",
+    "@microlink/react-json-view": "^1.27.0",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
+    "@mui/utils": "^7.3.5",
     "@mui/x-date-pickers": "^7.28.3",
     "@romcal/calendar.africa": "3.0.0-dev.116",
     "@romcal/calendar.americas": "3.0.0-dev.116",
-    "@romcal/calendar.asia": "3.0.0-dev.116",
     "@romcal/calendar.argentina": "3.0.0-dev.116",
+    "@romcal/calendar.asia": "3.0.0-dev.116",
+    "@romcal/calendar.asian-russia": "3.0.0-dev.116",
     "@romcal/calendar.australia": "3.0.0-dev.116",
     "@romcal/calendar.austria": "3.0.0-dev.116",
     "@romcal/calendar.belgium": "3.0.0-dev.116",
@@ -41,6 +53,7 @@
     "@romcal/calendar.denmark": "3.0.0-dev.116",
     "@romcal/calendar.england": "3.0.0-dev.116",
     "@romcal/calendar.europe": "3.0.0-dev.116",
+    "@romcal/calendar.european-russia": "3.0.0-dev.116",
     "@romcal/calendar.finland": "3.0.0-dev.116",
     "@romcal/calendar.france": "3.0.0-dev.116",
     "@romcal/calendar.france.coutances": "3.0.0-dev.116",
@@ -74,8 +87,6 @@
     "@romcal/calendar.puerto-rico": "3.0.0-dev.116",
     "@romcal/calendar.romania": "3.0.0-dev.116",
     "@romcal/calendar.russia": "3.0.0-dev.116",
-    "@romcal/calendar.asian-russia": "3.0.0-dev.116",
-    "@romcal/calendar.european-russia": "3.0.0-dev.116",
     "@romcal/calendar.scotland": "3.0.0-dev.116",
     "@romcal/calendar.slovakia": "3.0.0-dev.116",
     "@romcal/calendar.slovenia": "3.0.0-dev.116",
@@ -89,56 +100,45 @@
     "@romcal/calendar.venezuela": "3.0.0-dev.116",
     "@romcal/calendar.vietnam": "3.0.0-dev.116",
     "@romcal/calendar.wales": "3.0.0-dev.116",
-    "@tanstack/react-query": "^5.76.1",
+    "@tanstack/react-query": "^5.90.9",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "flatted": "^3.3.3",
     "lodash": "^4.17.21",
-    "nanoid": "^5.1.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.2",
+    "nanoid": "^5.1.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router": "^7.9.6",
     "romcal": "3.0.0-dev.116"
   },
   "devDependencies": {
     "@babel/plugin-transform-class-properties": "^7.27.1",
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
     "@babel/plugin-transform-numeric-separator": "^7.27.1",
-    "@babel/plugin-transform-optional-chaining": "^7.27.1",
+    "@babel/plugin-transform-optional-chaining": "^7.28.5",
     "@babel/plugin-transform-private-methods": "^7.27.1",
-    "@types/lodash": "^4.17.17",
-    "@types/node": "^22.15.20",
-    "@types/react": "^18.3.8",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
     "@vitejs/plugin-react": "^4.4.1",
     "cypress": "^15.6.0",
-    "cypress-vite": "^1.6.0",
-    "eslint": "^9.27.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^4.3.0",
-    "eslint-plugin-import": "^2.31.0",
+    "cypress-vite": "^1.8.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-cypress": "^5.2.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^6.0.0",
-    "prettier": "^3.5.3",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
-    "vite": "^6.3.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^5.1.4"
-  },
-  "overrides": {
-    "html-entities": "^2.5.2",
-    "@babel/plugin-proposal-private-methods": "@babel/plugin-transform-private-methods",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "@babel/plugin-transform-nullish-coalescing-operator",
-    "@babel/plugin-proposal-optional-chaining": "@babel/plugin-transform-optional-chaining",
-    "@babel/plugin-proposal-numeric-separator": "@babel/plugin-transform-numeric-separator",
-    "@babel/plugin-proposal-class-properties": "@babel/plugin-transform-class-properties",
-    "flux": {
-      "react": "^18.0.0"
-    }
   }
 }
diff --git a/react-app/src/RomcalApp.tsx b/react-app/src/RomcalApp.tsx
@@ -1,9 +1,9 @@
-import React, { type FC } from 'react';
+import { type FC } from 'react';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { Container, createTheme, ThemeProvider } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router';
 
 import { Calendar } from './components/Calendar';
 import { Header } from './components/Header';
diff --git a/react-app/src/components/AdditionalLineContent.tsx b/react-app/src/components/AdditionalLineContent.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { unstable_capitalize as capitalize } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import type { BaseLiturgicalDay } from 'romcal';
diff --git a/react-app/src/components/Calendar.tsx b/react-app/src/components/Calendar.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { CalendarContent } from './CalendarContent';
 import { CalendarToolbar } from './CalendarToolbar';
 
diff --git a/react-app/src/components/CalendarContent.tsx b/react-app/src/components/CalendarContent.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 
 import { useRomcal } from '../hooks/useRomcal.hook';
diff --git a/react-app/src/components/CalendarToolbar.tsx b/react-app/src/components/CalendarToolbar.tsx
@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import { type FC } from 'react';
 import { Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
diff --git a/react-app/src/components/Colors.tsx b/react-app/src/components/Colors.tsx
@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import { type FC } from 'react';
 import { nanoid } from 'nanoid';
 import { capitalize } from '@mui/material';
 import type { Color } from 'romcal';
diff --git a/react-app/src/components/Day.tsx b/react-app/src/components/Day.tsx
@@ -1,4 +1,4 @@
-import React, { type FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 import { Grid, Box, Tooltip, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { styled } from '@mui/material/styles';
diff --git a/react-app/src/components/Header.tsx b/react-app/src/components/Header.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, Grid, Link } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
diff --git a/react-app/src/components/Headline.tsx b/react-app/src/components/Headline.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
diff --git a/react-app/src/components/LoadingIndicator.tsx b/react-app/src/components/LoadingIndicator.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Box, CircularProgress } from '@mui/material';
 
diff --git a/react-app/src/components/MonthPicker.tsx b/react-app/src/components/MonthPicker.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
diff --git a/react-app/src/components/RomcalHeaderLogo.tsx b/react-app/src/components/RomcalHeaderLogo.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { styled } from '@mui/material/styles';
 
 const Logo = styled('img')`
diff --git a/react-app/src/components/RomcalVersion.tsx b/react-app/src/components/RomcalVersion.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Romcal } from 'romcal';
 
diff --git a/react-app/src/hooks/useNavigateCalendar.hook.ts b/react-app/src/hooks/useNavigateCalendar.hook.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 
 import { DEFAULT_CALENDAR, DEFAULT_LOCALE } from '../constants/settings';
 
diff --git a/react-app/src/index.tsx b/react-app/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { RomcalApp } from './RomcalApp';
@@ -20,7 +20,7 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <HashRouter future={{ v7_startTransition: true }}>
+      <HashRouter>
         <RomcalApp />
       </HashRouter>
     </QueryClientProvider>
diff --git a/react-app/vite.config.ts b/react-app/vite.config.ts
@@ -1,6 +1,6 @@
 import { execSync } from 'node:child_process';
 
-import { defineConfig } from 'vite';
+import { defineConfig, PluginOption } from 'vite';
 import react from '@vitejs/plugin-react';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 import eslint from 'vite-plugin-eslint';
@@ -20,13 +20,12 @@ function getCommitHash() {
 export default defineConfig({
   plugins: [
     react(),
-    viteTsconfigPaths(),
-    // disabled until airbnb publishes a v9 compatible
+    viteTsconfigPaths() as PluginOption,
     eslint({
       fix: true,
       lintOnStart: false,
       exclude: ['/virtual:/', '/node_modules/**'],
-    }),
+    }) as PluginOption,
   ],
   server: {
     port,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react';`
`2`	`1`	`import { unstable_capitalize as capitalize } from '@mui/utils';`
`3`	`2`	`import { styled } from '@mui/material/styles';`
`4`	`3`	`import type { BaseLiturgicalDay } from 'romcal';`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-import React from 'react';`
`2`		`-`
`3`	`1`	`import { CalendarContent } from './CalendarContent';`
`4`	`2`	`import { CalendarToolbar } from './CalendarToolbar';`
`5`	`3`