Modernise stack: Vite + React 19 + TS + MUI v9

[pleb]

Summary

End-to-end modernisation of the signature generator. CRA is unmaintained, the stack was mixing Bulma + Redux + class components for a tiny single-form app, the Snyk patch file dated from 2020, and every GitHub Action was pinned to a floating @v2 tag. This PR rebuilds on a current, secure toolchain while preserving the exact email-signature output that staff and Outlook care about.

Stack changes

Concern	From	To
Bundler	react-scripts 5 (CRA, deprecated)	Vite 8
Language	JavaScript	TypeScript 6 (strict)
React	18.2	19.2
Styling	Bulma 0.9 + MUI 5 + Sass	MUI v9 (Emotion) only
Form state	Redux Toolkit + react-redux	react-hook-form 7.75
Phone parsing	react-phone-number-input	libphonenumber-js (direct dep)
Tests	Jest (CRA)	Vitest 4 + RTL 17 + jsdom
Lint	ESLint 8 (CRA preset)	ESLint 9 flat config + typescript-eslint
Node	18 (CI), unpinned locally	22 LTS, pinned via .nvmrc + engines
Deploy	JamesIves/github-pages-deploy-action -> gh-pages branch	actions/upload-pages-artifact + actions/deploy-pages (OIDC, no gh-pages branch)
Action pinning	floating @v2	full commit SHA pins, version in comment

Security & correctness

Surfaced and fixed during the migration:

• Removed dangerouslySetInnerHTML in both Signature.tsx and RepliesAndForwards.tsx. Phone numbers now render as React text nodes with nbsp spans; no user-controlled string flows through __html any more.
• Validate the email before interpolating into href={\mailto:${email}`}` (regex check; fall through to plain text on failure).
• Async Clipboard API replaces document.execCommand('copy'). Returns Promise<boolean> so the Copy button can show an "error" state on rejection instead of silently flashing "Copied!".
• CI gating: npm audit --audit-level=high --omit=dev now runs on every PR; production dep graph is clean (0 vulnerabilities).
• Least privilege workflows: contents: read on the build job, id-token: write confined to the deploy job only.
• Latent bugs fixed by strict TS: constants.brandGPTWLogo (undefined) -> constants.brandInfo.brandGPTWLogo; nested <tr> collapsed; parseMobile null guards.

Performance

• Signature and RepliesAndForwards wrapped in React.memo.
• SignatureContainer subscribes per-field via useWatch and defers the preview with useDeferredValue so typing stays responsive.
• <link rel=\"preload\"> for the Azure-hosted brand logos in index.html.
• Bundle: 236 KB gzipped main chunk (within target).

UX

• Required * asterisks visible from initial render.
• Clipboard rejection now surfaces a visible "Copy failed" state.
• ?embedded=1 query param hides the AppBar for iframing.
• Custom MUI theme matches the previous dark-navy AppBar (#000c28) and MakerX blue (#003FB5).

Test plan

• npm run lint exits 0
• npm run typecheck exits 0
• npm test -- --run -> 22 / 22 passing (parseMobile, isValidEmail, stripObject, clipboard success+rejection, Form required asterisks, Button state transitions, Signature + RepliesAndForwards golden HTML)
• npm run build clean (236 KB gzipped)
• npm audit --audit-level=high --omit=dev -> 0 vulnerabilities
• Dev server smoke-tested locally (HTTP 200, preload tags emit, ?embedded=1 hides AppBar)
• Reviewer: paste the copied signature into Outlook desktop, Outlook web, and Gmail and confirm logo, links, and GPTW logo render correctly. This is the only thing automated tests cannot verify.

One-time deploy setup required

Before the first merge to main can deploy successfully, in repo Settings -> Pages -> Source, choose GitHub Actions (the native flow replaces the gh-pages branch). The CD workflow will fail with a clear error until this is done. README documents this in its own section.

The custom domain (signatures.makerx.tech) is preserved by public/CNAME, which ships in every artifact.

Out of scope / follow-ups

• ESLint stays on v9.x for now because eslint-plugin-react has not yet published a v10-compatible release. Dependabot will pick this up when it lands.
• MUI v10 (when it ships) will need a deliberate upgrade PR; the v9 -> v10 jump removes more deprecated APIs.