Frontend : squelette React + Vite + TS + Tailwind
Scaffold de base en attendant l'intégration du design Claude Design (« Bénévoles Festival.dc.html ») : routage, plomberie i18n (t() + locales/fr.json), client API avec proxy Vite vers le backend. Build et lint passent. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AwswqSChc3Rwtu61pRXiY2
This commit is contained in:
AdamThomas
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
49ac6a4726
commit
5154a3c61b
@@ -0,0 +1,42 @@
|
||||
// Client HTTP minimal. En dev, Vite proxifie `/api` vers le backend (:8000).
|
||||
const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? '/api';
|
||||
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
public readonly status: number,
|
||||
public readonly body: unknown,
|
||||
) {
|
||||
super(`API ${status}`);
|
||||
this.name = 'ApiError';
|
||||
}
|
||||
}
|
||||
|
||||
async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const res = await fetch(`${BASE_URL}${path}`, {
|
||||
...init,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...init?.headers,
|
||||
},
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
const isJson = res.headers.get('content-type')?.includes('application/json');
|
||||
const body = isJson ? await res.json() : await res.text();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new ApiError(res.status, body);
|
||||
}
|
||||
return body as T;
|
||||
}
|
||||
|
||||
export const api = {
|
||||
get: <T>(path: string) => request<T>(path),
|
||||
post: <T>(path: string, data?: unknown) =>
|
||||
request<T>(path, { method: 'POST', body: data === undefined ? undefined : JSON.stringify(data) }),
|
||||
patch: <T>(path: string, data?: unknown) =>
|
||||
request<T>(path, { method: 'PATCH', body: data === undefined ? undefined : JSON.stringify(data) }),
|
||||
put: <T>(path: string, data?: unknown) =>
|
||||
request<T>(path, { method: 'PUT', body: data === undefined ? undefined : JSON.stringify(data) }),
|
||||
delete: <T>(path: string) => request<T>(path, { method: 'DELETE' }),
|
||||
};
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
import { t } from '@/i18n';
|
||||
|
||||
// Coquille de mise en page. Le design définira la navigation, l'en-tête et
|
||||
// la palette ; ce composant sera remplacé lors de l'intégration du design.
|
||||
export function AppLayout() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 text-slate-900">
|
||||
<header className="border-b border-slate-200 bg-white px-6 py-4">
|
||||
<h1 className="text-lg font-semibold">{t('app.title')}</h1>
|
||||
</header>
|
||||
<main className="p-6">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { createBrowserRouter } from 'react-router-dom';
|
||||
|
||||
import { AppLayout } from './AppLayout';
|
||||
import { DashboardPage } from '@/pages/DashboardPage';
|
||||
|
||||
// Squelette de routage. Les écrans réels sont dérivés du design
|
||||
// (« Bénévoles Festival.dc.html ») et ajoutés au fil des étapes.
|
||||
export const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <AppLayout />,
|
||||
children: [{ index: true, element: <DashboardPage /> }],
|
||||
},
|
||||
]);
|
||||
@@ -0,0 +1,21 @@
|
||||
import fr from './locales/fr.json';
|
||||
|
||||
type Messages = Record<string, string>;
|
||||
|
||||
// Monolingue pour l'instant (français). La structure permet d'ajouter des
|
||||
// locales sans toucher aux appelants.
|
||||
const messages: Messages = fr;
|
||||
|
||||
export type TranslationKey = keyof typeof fr;
|
||||
|
||||
/**
|
||||
* Traduit une clé. Les paramètres `{nom}` présents dans le message sont
|
||||
* remplacés par `params.nom`. Aucun texte visible en dur ailleurs dans l'app.
|
||||
*/
|
||||
export function t(key: TranslationKey | string, params?: Record<string, string | number>): string {
|
||||
const template = messages[key] ?? key;
|
||||
if (!params) return template;
|
||||
return template.replace(/\{(\w+)\}/g, (_, name: string) =>
|
||||
name in params ? String(params[name]) : `{${name}}`,
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"app.title": "Gestion des bénévoles",
|
||||
"app.loading": "Chargement…",
|
||||
"app.error.generic": "Une erreur est survenue",
|
||||
"app.error.network": "Impossible de joindre le serveur",
|
||||
|
||||
"nav.dashboard": "Tableau de bord",
|
||||
"nav.volunteers": "Bénévoles",
|
||||
"nav.positions": "Postes",
|
||||
"nav.shifts": "Créneaux",
|
||||
"nav.assignments": "Affectations",
|
||||
"nav.availabilities": "Disponibilités",
|
||||
"nav.import": "Import",
|
||||
|
||||
"role.coordinator": "Coordinateur",
|
||||
"role.lead": "Référent",
|
||||
"role.volunteer": "Bénévole",
|
||||
|
||||
"assignment.status.proposed": "Proposée",
|
||||
"assignment.status.confirmed": "Confirmée",
|
||||
"assignment.status.declined": "Refusée",
|
||||
"assignment.status.cancelled": "Annulée",
|
||||
|
||||
"assignment.source.solver": "Solveur",
|
||||
"assignment.source.manual": "Manuelle",
|
||||
|
||||
"availability.status.available": "Disponible",
|
||||
"availability.status.if_needed": "Si besoin",
|
||||
"availability.status.unavailable": "Indisponible",
|
||||
|
||||
"position.category.bar": "Bar",
|
||||
"position.category.ticketing": "Billetterie",
|
||||
"position.category.welcome": "Accueil",
|
||||
"position.category.parking": "Parking",
|
||||
"position.category.cleaning": "Nettoyage",
|
||||
"position.category.catering": "Restauration",
|
||||
"position.category.setup": "Montage",
|
||||
"position.category.stage": "Scène",
|
||||
"position.category.other": "Autre",
|
||||
|
||||
"validation.SHIFT_OVERLAP": "Deux créneaux se chevauchent",
|
||||
"validation.OUTSIDE_AVAILABILITY": "En dehors des disponibilités déclarées",
|
||||
"validation.DAILY_HOURS_EXCEEDED": "Plus de 8 h d'affectations sur la journée",
|
||||
"validation.INSUFFICIENT_REST": "Moins de 8 h de repos entre deux créneaux",
|
||||
"validation.MISSING_REQUIRED_SKILL": "Compétence requise manquante"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -0,0 +1,21 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { RouterProvider } from 'react-router-dom';
|
||||
|
||||
import { router } from '@/app/router';
|
||||
import './index.css';
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { staleTime: 30_000, refetchOnWindowFocus: false },
|
||||
},
|
||||
});
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<RouterProvider router={router} />
|
||||
</QueryClientProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,12 @@
|
||||
import { t } from '@/i18n';
|
||||
|
||||
export function DashboardPage() {
|
||||
return (
|
||||
<section>
|
||||
<h2 className="text-base font-medium text-slate-700">{t('nav.dashboard')}</h2>
|
||||
<p className="mt-2 text-sm text-slate-500">
|
||||
{t('app.title')} — {import.meta.env.MODE}
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user