chore: migrate to vite and typescript

.nvmrc

@@ -0,0 +1 @@
+22

AGENTS.md

@@ -0,0 +1,124 @@
+# ICOSA Migration Agent
+
+This branch (`codex/convert‐codebase‐to‐typescript‐and‐react‐19`) is the working area for migrating the codebase from CRA/React 18 to **React 19 + Vite + TypeScript**. Follow the rules below whenever you touch the repo.
+
+---
+
+## Branching & PR Policy (IMPORTANT)
+
+* **All work must branch from**: `codex/convert‐codebase‐to‐typescript‐and‐react‐19`.
+* **All pull requests must target**: `codex/convert‐codebase‐to‐typescript‐and‐react‐19` (not `main`).
+* Suggested branch name format: `codex/feat/<short-desc>` or `codex/fix/<short-desc>`.
+* Quick start:
+
+  ```bash
+  git fetch origin
+  git checkout codex/convert-codebase-to-typescript-and-react-19
+  git pull --ff-only
+  git checkout -b codex/feat/<short-desc>
+  # ...commit changes...
+  git push -u origin codex/feat/<short-desc>
+  # Open PR -> base: codex/convert-codebase-to-typescript-and-react-19
+  ```
+
+---
+
+## General Requirements
+
+* **React components**: If any component is a **class**, convert it to a **function component**.
+* **Package manager**: Use **yarn** (v1.x is pinned in the branch).
+* **Tests**: For any `js/ts/tsx` code you modify, **add/update tests** to improve or maintain coverage. **Fix** failing tests.
+* **Comments/Docstrings**: Add **verbose JSDoc/TS docstrings** for all edited functions, classes, and methods; document **args** and **returns**.
+* **3rd‑party CSS shims (tests only)**: If a dependency’s CSS breaks Vitest, **shim it only for tests** (don’t remove it from runtime). There are existing SCSS shims under `src/shims/`—add more if needed.
+* **Lint/Warnings**: Address obvious warnings where possible.
+* **OOM / heavy tests**: If a specific test exhausts memory and there’s no quick fix, **isolate and comment out that single test** (do not delete) with a `TODO` explaining the issue and a minimal repro.
+
+---
+
+## Testing
+
+* Test runner: **Vitest**.
+* Command:
+
+  ```bash
+  yarn test -- --no-file-parallelism
+  ```
+
+  Use `--no-file-parallelism` to reduce memory usage.
+* JSDOM is configured; SCSS shims for problematic packages are mapped in `vite.config.ts`.
+
+### Coverage Expectations
+
+* Add or update tests for changed code. Favor **component tests** with @testing-library/react and **unit tests** for utilities.
+* If you must temporarily comment out a failing test to unblock CI, leave a **clear TODO** with rationale and a pointer to an issue/PR.
+* Never use `/* c8 ignore */` comments to skip covering large sections of code—write tests instead.
+
+---
+
+## Build
+
+* Build command:
+
+  ```bash
+  yarn build
+  ```
+* Make sure the branch builds locally before opening a PR.
+
+---
+
+## Project Tooling (branch-specific)
+
+* **React**: 19.x
+* **TypeScript**: 5.9+
+* **Vite**: 7.x
+* **Vitest**: 3.x (with jsdom)
+* `tsconfig.json` uses `strict: true`, `jsx: react-jsx`, `allowJs: true` for staged migration.
+* `vite.config.ts` includes **test‑only alias/shims** for CSS and ESM quirks.
+
+---
+
+## Migration Guidelines
+
+* **Class → Function**: Prefer `useState`, `useMemo`, `useCallback`, and `useEffect` rather than reproducing lifecycle methods verbatim.
+* **Props/State typing**: Use explicit `Props`/`State` interfaces (if applicable). Avoid `any`; if unavoidable, mark with `@todo` and a short explanation.
+* **File extensions**: Prefer `.tsx` for React components; utilities may be `.ts`.
+* **Side effects**: Keep effects idempotent; clean up subscriptions/timers.
+* **Runtime types**: Where the boundary is dynamic (e.g., CMS/GraphQL), add light runtime guards (type predicates) around parsing.
+* **Typing**: Use TypeScript’s type system to ensure type safety. Avoid `any` unless absolutely necessary, and document why with a `@todo` comment. `@ts-nocheck` is not allowed.
+
+---
+
+## CSS & Assets in Tests
+
+* Do **not** remove third‑party CSS. If it breaks tests, add a **shim** under `src/shims/` and wire it via `vite.config.ts:test.alias`.
+* Keep shims **scoped to tests** only.
+
+---
+
+## PR Checklist
+
+* [ ] Branched from `codex/convert-codebase-to-typescript-and-react-19` and PR targets the **same** branch.
+* [ ] All new/changed code has tests; CI with `yarn test -- --no-file-parallelism` passes.
+* [ ] `yarn build` passes.
+* [ ] Added/updated docstrings (args/returns) for touched surfaces.
+* [ ] Left TODOs for any intentional test skips with context and next steps.
+
+---
+
+## Notes for Local Dev
+
+* Node 22 and Yarn (v1) are used in this branch.
+* Dev server (if applicable): `yarn dev` -> [http://localhost:3009](http://localhost:3009)
+
+---
+
+## Commit Hygiene
+
+* Use conventional‑style messages when possible (`feat:`, `fix:`, `refactor:`, `test:`, `chore:`).
+* One logical change per commit; keep diffs reviewable.
+
+---
+
+## When in Doubt
+
+Open a draft PR against `codex/convert-codebase-to-typescript-and-react-19` early to get feedback, and annotate tricky spots with inline comments.

docs/markdown-components.md

@@ -0,0 +1,74 @@
+# Markdown Component Usage and Extensions
+
+The `src/components/markdown` module renders Markdown content for HIVDB
+projects. Both `hivdb-cms` and `chiro-cms` load their page text through this
+component, so the features described here apply to Markdown in those
+repositories as well.
+
+## Renderer customisations
+
+The component wraps `react-markdown` with its built-in HTML parser plugin and
+applies several changes to the upstream renderer:
+
+* **Raw HTML allowed** – HTML is not escaped and the optional `escapeHtml`
+  flag in page settings can further disable sanitisation.
+* **Footnotes and references** – `parserOptions` enable footnotes and the
+  component injects a references list at the end of each document.
+* **Custom link and image renderers** – links and images bypass the default URI
+  transformation and images may be prefixed with a CMS path.
+* **Heading anchors** – headings are wrapped with anchors and optional
+  collapsible sections for selected heading levels.
+* **Macros** – a `remark-macro` plugin adds support for directives such as
+  `table`, `genome-map` and `toc`.
+* **Table of contents** – when enabled, `AutoTOC` builds a heading outline at
+  render time.
+
+## Basic usage
+
+```tsx
+import Markdown from '@/components/markdown';
+
+export function Page({source}: {source: string}) {
+  return <Markdown>{source}</Markdown>;
+}
+```
+
+## Advanced usage
+
+```tsx
+<Markdown
+  toc
+  collapsableLevels={[3]}
+  imagePrefix="/cms"
+  tables={tablePresets}
+  genomeMaps={mapPresets}
+>
+  {`{{table example}}
+
+{{genome-map mapA}}`}
+</Markdown>
+```
+
+* `toc` generates an automatic table of contents via the `AutoTOC` component.
+* `collapsableLevels` wraps the specified heading levels in collapsible
+  sections.
+* `tables` and `genomeMaps` supply presets referenced by the `{{table name}}`
+  and `{{genome-map name}}` macros.
+
+## Differences from CommonMark and GitHub Flavored Markdown
+
+* Macros (`{{table}}`, `{{genome-map}}`, `{{toc}}`) and automatic references are
+  not part of the CommonMark specification or GitHub Flavored Markdown.
+* Links are not sanitised (`transformLinkUri` is disabled), allowing nonstandard
+  protocols that GitHub would filter.
+* Raw HTML passes through unescaped, while GitHub strips many tags for safety.
+
+These deviations should be kept in mind when adding new Markdown features or
+when porting content from other Markdown processors.
+
+## Testing
+
+All features in `src/components/markdown` are covered by unit tests. The test
+suite exercises macros, table of contents generation, collapsible sections and
+custom link/image wrappers to ensure reliable behaviour.
+

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Icosa</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -3,10 +3,13 @@
   "version": "0.3.35",
   "private": true,
   "resolutions": {
-    "vfile": "^4.2.1",
-    "react": "^18.2.0",
-    "prop-types": "^15.8.1",
-    "react-input-autosize": "^3.0.0"
+    "vfile": "4.2.1",
+    "react": "19.1.1",
+    "prop-types": "15.8.1",
+    "react-input-autosize": "3.0.0",
+    "@types/react": "19.1.9",
+    "@types/react-dom": "19.1.7",
+    "html-to-react": "^1.7.0"
   },
   "dependencies": {
     "@apollo/client": "^3.7.0",
@@ -17,14 +20,18 @@
     "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/preset-env": "^7.18.2",
     "@babel/runtime": "^7.17.9",
-    "@craco/craco": "^6.4.5",
     "@monaco-editor/react": "^4.4.5",
+    "@plq/use-persisted-state": "^1.3.0",
     "@react-icons/all-files": "^4.1.0",
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^14.1.1",
-    "@types/react": "^18.0.9",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/prop-types": "^15.7.11",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@types/uuid": "^9.0.7",
+    "@vitejs/plugin-react": "4.7.0",
     "@vx/axis": "^0.0.199",
     "@vx/bounds": "^0.0.199",
     "@vx/group": "^0.0.199",
@@ -39,40 +46,40 @@
     "d3-shape": "^3.1.0",
     "escape-string-regexp": "^5.0.0",
     "farce": "^0.4.1",
+    "fast-memoize": "^2.5.2",
     "flexbox-grid-mixins": "^0.3.3",
-    "found": "^1.1.2",
+    "found": "^1.3.0",
     "graphiql": "^1.8.8",
     "graphql": "^16.4.0",
     "graphql-tag.macro": "^2.0.1",
-    "html-react-parser": "^3.0.0",
+    "html-to-react": "^1.7.0",
     "jszip": "^3.9.1",
     "konva": "^8.3.14",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.34.0",
-    "normalize-scss": "^7.0.1",
+    "normalize-scss": "^8.0.0",
     "pako": "^2.0.4",
     "pdfobject": "^2.2.8",
     "pluralize": "^8.0.0",
-    "prop-types": "^15.8.1",
+    "prop-types": "15.8.1",
     "query-string": "^7.1.1",
     "raw-loader": "^4.0.2",
-    "react": "^18.2.0",
+    "react": "^19.1.1",
     "react-async": "^10.0.1",
     "react-children-utilities": "^2.8.0",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^18.2.0",
-    "react-dropdown": "^1.10.0",
+    "react-dom": "^19.1.1",
+    "react-dropdown": "^1.11.0",
     "react-dropzone": "^14.2.1",
     "react-ga": "^3.3.0",
     "react-konva": "^18.2.3",
     "react-markdown": "^4.3.1",
     "react-ngl": "^0.2.3",
     "react-progressbar": "^15.4.1",
-    "react-scripts": "^5.0.1",
     "react-select": "^5.3.2",
     "react-slick": "^0.29.0",
-    "react-tabs": "^5.1.0",
+    "react-tabs": "^6.1.0",
     "react-tagsinput": "^3.19.0",
     "react-tooltip": "^4.2.21",
     "react-virtualized-select": "^3.1.3",
@@ -88,26 +95,31 @@
     "sql.js": "^1.7.0",
     "svg-crowbar": "^0.7.0",
     "typeface-source-sans-pro": "^1.1.13",
-    "typescript": "^3.9.5",
-    "use-persisted-state": "hivdb/use-persisted-state#61bfffd",
+    "typescript": "5.9.2",
     "uuid": "^8.3.2",
+    "vite": "7.0.6",
     "web-vitals": "^2.1.4",
-    "webpack": "^5.72.0",
-    "worker-loader": "^3.0.8",
     "xlsx": "^0.18.5",
     "xmlbuilder2": "^3.0.2",
     "youtube-url": "^0.5.0"
   },
+  "devDependencies": {
+    "@types/d3-array": "^3.2.1",
+    "@types/pako": "^2.0.3",
+    "@vitest/coverage-v8": "^3.2.4",
+    "canvas": "^3.1.2",
+    "jsdom": "26.1.0",
+    "sass-embedded": "^1.89.2",
+    "vitest": "3.2.4"
+  },
   "exports": {
     "./": "./dist/"
   },
   "scripts": {
-    "start": "PORT=3009 craco start",
-    "dist": "rm -rf dist/ && NODE_ENV=production npx babel src --out-dir dist --copy-files",
-    "build": "yarn dist",
-    "postinstall": "yarn dist",
-    "test": "craco test",
-    "eject": "craco eject"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "eslintConfig": {
     "extends": [
@@ -137,5 +149,9 @@
         }
       ]
     ]
-  }
+  },
+  "engines": {
+    "node": "22"
+  },
+  "packageManager": "[email protected]"
 }