test/sonarcloud-ci-validation

.github/dependabot.yml

@@ -0,0 +1,27 @@
+version: 2
+updates:
+  # npm dependencies
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 5
+    labels:
+      - dependencies
+    commit-message:
+      prefix: chore(deps)
+      include: scope
+
+  # GitHub Actions workflow updates
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: weekly
+      day: monday
+    open-pull-requests-limit: 3
+    labels:
+      - dependencies
+      - ci
+    commit-message:
+      prefix: chore(ci)

.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: CI
+
+on:
+  push:
+    branches: [main, claude]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    name: Type-check & build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build (tsc + vite)
+        run: npm run build
+
+      - name: Verify build artefacts
+        run: npm run verify
+
+  audit:
+    name: npm audit (critical only)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Audit
+        run: npm audit --audit-level=critical

.github/workflows/sonar.yml

@@ -0,0 +1,32 @@
+name: SonarCloud
+
+on:
+  push:
+    branches: [main, claude]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  sonar:
+    name: Analyze
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - run: npm ci
+
+      - uses: SonarSource/sonarcloud-github-action@master
+        continue-on-error: true
+        with:
+          args: -Dsonar.qualitygate.wait=false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.gitignore

@@ -1,24 +1,15 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
+# Dependencies
 node_modules
+package-lock.json
+
+# Build output
 dist
-dist-ssr
-*.local
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
+# Confidential assets
+public/datas/
+
+# IDE
+.vscode
 .idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+*.swp
+CLAUDE.md

ARCHITECTURE.md

@@ -0,0 +1,203 @@
+# Architecture Overview
+
+D-CAS 2.0 is a client-side, framework-free single-page application built with TypeScript, Vite, and Tailwind CSS. This document describes how the system is organized and how its key features work.
+
+## Directory Structure
+
+```
+src/
+├── main.ts              # Entry point: renders header into #header-mount,
+│                        # initializes offline support & router
+├── router.ts            # Client-side router & route definitions
+├── layout.ts            # Re-exports header / bindHeaderEvents / initOffline
+├── style.css            # Tailwind directives
+├── i18n.ts              # Translation resources (EN/FR/ES) & language detection
+│
+├── views/               # Page-level components (return HTML strings — no header)
+│   ├── home.ts          # Interactive questionnaire
+│   ├── catalog.ts       # Disease list with search & sorting
+│   ├── about.ts         # About page (credits, CIRAD info)
+│   ├── privacy.ts       # Privacy policy
+│   └── legal.ts         # Legal notice & copyright
+│
+├── components/          # Reusable UI pieces (return HTML strings)
+│   ├── header.ts        # Navigation, language selector, offline toggle
+│   ├── questionnaire.ts # Question tree navigation & disease results
+│   ├── disease_result.ts # Disease detail view with carousel
+│   ├── call_to_action.ts # CTA for sugarcane diseases book
+│   ├── cirad_corner.ts  # CIRAD corner logo (home page)
+│   ├── breadcrumb.ts    # Navigation breadcrumb
+│   └── question_button.ts # Styled question button
+│
+├── data/
+│   └── key-loader.ts    # Loads & caches disease JSON from public/datas/
+│
+└── vite-env.d.ts        # Vite type definitions
+```
+
+`index.html` has two mount points: `#header-mount` (header rendered once at boot, re-rendered only on language change) and `#app` (route content, swapped on navigation).
+
+## Routing
+
+**Client-side router** in `router.ts` with three-language URL aliases. Each route may declare an optional `init` callback for post-render wiring:
+
+```ts
+type Route = {
+  path: string
+  titleKey: string
+  view: () => string
+  init?: () => void
+}
+
+const routes: Route[] = [
+  { path: '/',          titleKey: 'home.title',      view: homeView,      init: initQuestionnaire },
+  { path: '/catalogue', titleKey: 'catalogue.title', view: catalogueView, init: initCatalogue },
+  { path: '/catalog',   titleKey: 'catalogue.title', view: catalogueView, init: initCatalogue },
+  { path: '/catalogo',  titleKey: 'catalogue.title', view: catalogueView, init: initCatalogue },
+  // ... etc for about, privacy, legal
+]
+```
+
+**Navigation flow:**
+1. User clicks an internal `<a>` tag.
+2. Router intercepts the click (skipping `target="_blank"`, `download`, modifier keys, `mailto:`, `tel:` and absolute URLs), prevents default, calls `navigateTo()`.
+3. `navigateTo()` pushes state to history and re-renders the main content (`app.innerHTML = route.view()`).
+4. `route.init?.()` runs after the view is in the DOM.
+5. `window.popstate` listener handles back/forward buttons.
+
+The header is **not** part of `route.view()` — it lives in its own `#header-mount` and is only re-rendered when the language changes.
+
+## Internationalization (i18n)
+
+**Language detection** in `i18n.ts`:
+1. Browser's language detector (`i18next-browser-languagedetector`) reads `navigator.language`.
+2. Falls back to English if user's language is not supported.
+
+**Translation resources:**
+- Single object with three languages (EN, FR, ES).
+- Nested keys: `t('catalogue.diseaseNameColumn')`.
+- All visible text must be added here — never hardcoded in views.
+
+**Changing language:**
+- User selects from dropdown in header.
+- `i18next.changeLanguage()` updates the language.
+- `main.ts`'s `refreshHeader()` re-renders the header into `#header-mount`, then `router.render()` re-renders the current route's main content.
+- Service Worker is notified to precache the selected language's image assets.
+
+**URL paths are localized:**
+```
+/catalogue  (English)
+/catalogo   (Spanish)
+/catalogue  (French, same as English by convention)
+```
+
+The header component (`header.ts`) maps these paths based on current language via `lp(key)` helper.
+
+## Data Loading & Caching
+
+**Disease data** is loaded from JSON files in `public/datas/`:
+
+```
+identification-key.json       (English)
+cle-identification.json       (French)
+clave-de-identificacion.json  (Spanish)
+diseases-img/                 (Disease photographs)
+```
+
+**Key loader** (`data/key-loader.ts`):
+- Single fetch per session (cached in memory).
+- If a translated key file is empty, falls back to English.
+- Used by both questionnaire and catalog views.
+
+## Offline Support (Service Worker)
+
+**Service Worker** in `public/sw.js`:
+
+1. **App shell** (HTML, identification keys, favicon) — precached at install time.
+2. **Vite bundles** (hashed JS/CSS) — at install time, the SW fetches `/.vite/manifest.json` (generated by `build.manifest: true` in `vite.config.ts`) and precaches every entry's `file`, `css`, and `assets`. This guarantees the app works fully offline on first visit.
+3. **Disease images** — precached on demand when the user picks a language (or after initial SW registration). Workers run in parallel (6 concurrent fetches) with an in-progress guard per language so rapid language toggles don't queue duplicate runs.
+4. **Runtime strategy** — images (`/datas/diseases-img/*` and `/assets/*.{png,jpg,jpeg,webp,svg,gif,ico}`) use cache-first; everything else uses network-first with cache fallback.
+5. **Cache busting** — bump `CACHE_NAME` in `sw.js` when the caching strategy changes. Old caches are deleted on activation.
+
+**Image precaching progress:**
+- SW broadcasts `{ type: 'precache-progress', done, total }` to all clients every 10 images.
+- Header dropdown shows the progress bar and "Downloading 45/120" / "Ready for offline use ✓".
+
+**User can toggle offline mode** via header switch (`offline-toggle`). This registers or unregisters the SW and wipes its caches.
+
+## Component Patterns
+
+All views and components follow the same pattern:
+
+```ts
+export function myComponent(): string {
+  const t = i18next.t.bind(i18next)
+
+  return /*html*/`
+    <div class="...">
+      ${t('my.key')}
+    </div>
+  `
+}
+
+export function initMyComponent(): void {
+  // Set up event listeners
+  document.querySelector('.my-class')?.addEventListener('click', ...)
+}
+```
+
+**Why this pattern?**
+- No JSX, no virtual DOM, no build complexity.
+- Easy to modify styling (Tailwind utilities in the HTML template).
+- Event listeners bound explicitly (no magic).
+- Type-safe (TypeScript strict mode).
+
+## Adding a New Page
+
+1. **Create view** in `src/views/mypage.ts`:
+   ```ts
+   export function myPageView(): string { return `...` }
+   export function initMyPage(): void { /* listeners */ }
+   ```
+
+2. **Add translations** to `src/i18n.ts` (EN, FR, ES).
+
+3. **Register route** in `src/router.ts` (use the `init?` field to wire post-render listeners):
+   ```ts
+   { path: '/mypage', titleKey: 'mypage.title', view: myPageView, init: initMyPage }
+   ```
+
+4. **Add navigation link** in `src/components/header.ts` (if needed).
+
+## Key Technical Decisions
+
+| Decision | Rationale |
+| -------- | --------- |
+| No framework | Minimal bundle, easy to modify, direct DOM control |
+| TypeScript strict | Catch errors at build time, no `any` escapes |
+| Tailwind CSS | Responsive design, utility-first, zero unused CSS |
+| Service Worker | Full offline support for field use |
+| i18next | Standard i18n library, easy to add languages |
+| String HTML templates | No build step for views, fast iteration |
+| Client-side router | No backend needed, static hosting compatible |
+
+## Performance Considerations
+
+- **Initial load** — ~200KB gzipped (Vite optimizes JS, Tailwind purges unused classes).
+- **Disease images** — Downloaded on-demand by Service Worker, cached for offline use.
+- **Catalog search** — Linear scan of disease list (fast enough for <200 diseases).
+- **Mobile landscape** — Special height handling (`max-md:landscape:h-[200vh]`) to prevent table clipping.
+
+## Confidential Assets
+
+`public/datas/` is **gitignored** and must be provided by CIRAD. Without it:
+- Questionnaire loads empty data (shows "Downloading...").
+- Catalog shows empty list.
+- Images are not available.
+
+The app degrades gracefully; it doesn't crash.
+
+---
+
+**Last updated:** May 2026  
+**Maintained by:** [ffillouxdev](https://github.com/ffillouxdev)