odoro 1.0.1 → 1.0.3

package/templates/{react-ts/src/sections/Fond.tsx → react-ts-server/client/src/fond.tsx}

@@ -1,22 +1,22 @@
 /**
  * Le fond decoratif de la page.
  *
- * ## Ce qu'il est, et ce qu'il remplace
+ * ## Pourquoi ce n'est pas dans `App.tsx`
  *
- * Deux nappes de couleur de marque, tres diluees, posees en haut de page. Rien
- * ne bouge : c'est un degrade, pas une animation — il ne coute aucune image par
- * seconde et se dessine avant le premier octet de JavaScript.
+ * C'est le seul morceau de la page qui depend de ce qui a ete coche a la
+ * creation : avec le moteur, ce fichier est remplace par une version qui ouvre
+ * une surface WebGL animee ; sans lui, c'est le degrade ci-dessous.
  *
- * Si le moteur a ete retenu a la creation, ce fichier est remplace par une
- * version qui ouvre une surface WebGL animee. Le reste de la page ne sait pas
- * d'ou vient son fond : elle place `<Fond />` et n'en demande pas plus.
+ * Le garder a part evite d'avoir deux `App.tsx` a tenir — un par cas — qui
+ * divergeraient au premier changement de texte. `App.tsx` place `<Fond />` et
+ * n'en demande pas plus.
  *
  * @module
  */
 
 import type { ReactElement } from 'react'
 
-/** Deux nappes de marque, diluees, derriere le contenu. */
+/** Deux nappes de marque, diluees, derriere le haut de la page. */
 export function Fond(): ReactElement {
   return (
     <div
@@ -31,7 +31,7 @@ export function Fond(): ReactElement {
         }}
       />
       <div
-        className="o-absolute o-right-[-10rem] o-top-[6rem] o-size-[30rem] o-rounded-full o-blur-3xl o-opacity-20 dark:o-opacity-20"
+        className="o-absolute o-right-[-10rem] o-top-[6rem] o-size-[30rem] o-rounded-full o-blur-3xl o-opacity-20"
         style={{
           background:
             'radial-gradient(closest-side, var(--o-palette-brand-400), transparent)',

package/templates/react-ts-server/client/src/router.tsx

@@ -0,0 +1,72 @@
+/**
+ * Le routeur du projet.
+ *
+ * ## Pourquoi il vit seul, dans son fichier
+ *
+ * C'est le seul endroit qui nomme la dependance de routage. Changer de routeur,
+ * ajouter une route, en proteger une derriere une authentification : tout se
+ * lit ici, et `App.tsx` n'a rien a en savoir au-dela de la ligne qui l'importe.
+ *
+ * ## Pourquoi les pages sont passees, et non importees
+ *
+ * Ce fichier pourrait importer les pages depuis `App.tsx`. Les deux modules
+ * s'importeraient alors l'un l'autre : cela fonctionne, mais l'ordre
+ * d'evaluation devient une question a laquelle personne ne veut repondre le
+ * jour ou quelque chose s'execute au chargement du module.
+ *
+ * Les pages arrivent donc en proprietes. La dependance ne va que dans un sens —
+ * `App.tsx` connait le routeur, le routeur ne connait que React — et la table
+ * des routes reste lisible d'un coup d'oeil.
+ *
+ * @module
+ */
+
+import { Outlet, Route, Router, Routes } from '@odoro-cli/libs/router'
+import type { ReactElement, ReactNode } from 'react'
+
+export { Link, useLocation } from '@odoro-cli/libs/router'
+
+/** Les pages que le routeur place. */
+export interface RouteurProps {
+  /** L'enveloppe commune : navigation, contenu, pied de page. */
+  readonly enveloppe: (contenu: ReactNode) => ReactElement
+  /** La page d'accueil. */
+  readonly accueil: ReactElement
+  /** La page « A propos ». */
+  readonly apropos: ReactElement
+  /** Ce qui s'affiche quand aucune route ne correspond. */
+  readonly introuvable: ReactElement
+}
+
+/**
+ * La table des routes.
+ *
+ * @example
+ * <Routeur
+ *   enveloppe={(contenu) => <Coquille>{contenu}</Coquille>}
+ *   accueil={<Accueil />}
+ *   apropos={<APropos />}
+ *   introuvable={<Introuvable />}
+ * />
+ */
+export function Routeur({
+  enveloppe,
+  accueil,
+  apropos,
+  introuvable,
+}: RouteurProps): ReactElement {
+  return (
+    <Router>
+      <Routes>
+        {/* `Outlet` marque l'endroit ou la page courante se rend : c'est ce
+            qui permet a la navigation et au pied de page de ne pas etre
+            remontes a chaque changement de route. */}
+        <Route path="/" element={enveloppe(<Outlet />)}>
+          <Route index element={accueil} />
+          <Route path="a-propos" element={apropos} />
+          <Route path="*" element={introuvable} />
+        </Route>
+      </Routes>
+    </Router>
+  )
+}

package/dist/build-GIPMPYJ3.js

@@ -1,4 +0,0 @@
-#!/usr/bin/env node
-export { buildProject, reportBuild } from './chunk-CJIUP7A3.js';
-import './chunk-R6PMAMXA.js';
-import './chunk-JMEHF3KN.js';

package/templates/react-ts/_variantes/sans-libs/src/composants/Marque.tsx

@@ -1,37 +0,0 @@
-/**
- * La marque : le signe et le mot.
- *
- * Meme signe que dans la version complete, dessine en SVG avec `currentColor`
- * pour prendre la couleur de son parent. Les bibliotheques n'ayant pas ete
- * retenues, la teinte vient d'une variable declaree dans `styles.css`.
- *
- * @module
- */
-
-import type { ReactElement } from 'react'
-
-/** Le signe seul, a la taille de la police qui l'entoure. */
-export function Signe({ className = '' }: { readonly className?: string }): ReactElement {
-  return (
-    <svg viewBox="0 0 100 100" fill="none" aria-hidden="true" className={`signe ${className}`}>
-      <path
-        d="M20.25 20.25H50a29.75 29.75 0 1 1-29.75 29.75Z"
-        stroke="currentColor"
-        strokeWidth="10.5"
-        strokeLinejoin="miter"
-      />
-    </svg>
-  )
-}
-
-/** Le signe et le mot. */
-export function Marque(): ReactElement {
-  return (
-    <span className="marque">
-      <span className="marque-signe">
-        <Signe />
-      </span>
-      Odoro
-    </span>
-  )
-}

package/templates/react-ts/_variantes/sans-libs/src/sections/Cloture.tsx

@@ -1,60 +0,0 @@
-/**
- * La cloture : une commande, et la porte de sortie vers la documentation.
- *
- * @module
- */
-
-import { useState, type ReactElement } from 'react'
-
-/** La commande que l'on copie le plus souvent. */
-const COMMANDE = 'npm i @odoro-cli/libs'
-
-/** La section de cloture. */
-export function Cloture(): ReactElement {
-  const [copie, setCopie] = useState(false)
-
-  return (
-    <section className="section section-centre">
-      <div className="contenu-etroit">
-        <h2 className="cloture-titre">Ajoutez le systeme de style quand vous voudrez.</h2>
-        <p className="cloture-chapeau">
-          Les jetons, les utilitaires et les composants vivent dans un paquet a part.
-          Ce projet tourne sans eux, et les accueille sans rien casser.
-        </p>
-
-        <div className="commande">
-          <code>{COMMANDE}</code>
-          <button
-            type="button"
-            className="bouton bouton-fantome"
-            onClick={() => {
-              // Le presse-papiers peut etre refuse — hors contexte sur, ou
-              // permission retiree. L'echec ne casse pas la page : le libelle
-              // ne change simplement pas.
-              void navigator.clipboard
-                ?.writeText(COMMANDE)
-                .then(() => {
-                  setCopie(true)
-                  setTimeout(() => {
-                    setCopie(false)
-                  }, 1600)
-                })
-                .catch(() => undefined)
-            }}
-          >
-            {copie ? 'Copie' : 'Copier'}
-          </button>
-        </div>
-
-        <a
-          href="https://odoro.dev/docs/installation"
-          target="_blank"
-          rel="noreferrer"
-          className="lien-discret"
-        >
-          Lire la marche a suivre
-        </a>
-      </div>
-    </section>
-  )
-}

package/templates/react-ts/_variantes/sans-libs/src/sections/Hero.tsx

@@ -1,92 +0,0 @@
-/**
- * Le hero : la promesse, et la fenetre du produit.
- *
- * Meme dessin que la version avec bibliotheques — titre serre, pastilles de
- * faits, fenetre de navigateur — en CSS ordinaire. Ce qui manque ici est
- * l'animation d'entree : elle venait de `@odoro-cli/libs/motion`, et il n'y a
- * pas lieu de la reecrire a la main dans un projet de depart.
- *
- * @module
- */
-
-import type { ReactElement } from 'react'
-
-import { Signe } from '@/composants/Marque'
-
-/** Trois faits, pas trois slogans. */
-const FAITS = ['Zero configuration', 'TypeScript strict', 'Rechargement a chaud']
-
-/** Ce que la fenetre montre. */
-const EXTRAIT = `export function App() {
-  return (
-    <h1 className="titre">
-      Votre premiere page.
-    </h1>
-  )
-}`
-
-/** Une fenetre de navigateur miniature. */
-function Fenetre(): ReactElement {
-  return (
-    <div className="fenetre">
-      <div className="fenetre-barre">
-        <span className="fenetre-pastilles" aria-hidden="true">
-          <span />
-          <span />
-          <span />
-        </span>
-        <span className="fenetre-chemin">src/App.tsx</span>
-      </div>
-      <pre className="fenetre-code">{EXTRAIT}</pre>
-    </div>
-  )
-}
-
-/** Le hero de la page d'accueil. */
-export function Hero(): ReactElement {
-  return (
-    <section className="hero">
-      <div className="contenu">
-        <span className="pastille-marque">
-          <Signe />
-          Genere par odoro create
-        </span>
-
-        <h1 className="hero-titre">
-          Votre premiere page, <span className="accent">deja vivante</span>.
-        </h1>
-
-        <p className="hero-chapeau">
-          Le serveur de developpement, la compilation et le rechargement a chaud
-          viennent de <code>odoro</code>. Le systeme de style est le votre.
-        </p>
-
-        <div className="hero-actions">
-          <a href="#piliers" className="bouton bouton-primaire">
-            Voir ce qui est inclus
-          </a>
-          <a
-            href="https://odoro.dev/docs"
-            target="_blank"
-            rel="noreferrer"
-            className="bouton bouton-secondaire"
-          >
-            Documentation
-          </a>
-        </div>
-
-        <div className="faits">
-          {FAITS.map((fait) => (
-            <span key={fait} className="fait">
-              {fait}
-            </span>
-          ))}
-        </div>
-
-        <div className="hero-fenetre">
-          <Fenetre />
-        </div>
-      </div>
-    </section>
-  )
-}

package/templates/react-ts/_variantes/sans-libs/src/sections/Piliers.tsx

@@ -1,44 +0,0 @@
-/**
- * Trois piliers : ce que le projet a deja sous la main.
- *
- * @module
- */
-
-import type { ReactElement } from 'react'
-
-/** Un pilier : un titre, une phrase. */
-const PILIERS: readonly { readonly titre: string; readonly texte: string }[] = [
-  {
-    titre: 'Compilation',
-    texte:
-      'Un serveur de developpement a rechargement a chaud, et une compilation de production.',
-  },
-  {
-    titre: 'TypeScript',
-    texte: 'Types stricts, alias de chemins, et verification sans emission.',
-  },
-  {
-    titre: 'A vous de jouer',
-    texte: 'Aucun systeme de style impose : le votre prend toute la place.',
-  },
-]
-
-/** La section des piliers. */
-export function Piliers(): ReactElement {
-  return (
-    <section id="piliers" className="section">
-      <div className="contenu">
-        <h2 className="sur-titre">Ce qui est deja la</h2>
-        <div className="grille">
-          {PILIERS.map((pilier, index) => (
-            <article key={pilier.titre} className="carte">
-              <span className="carte-numero">{String(index + 1).padStart(2, '0')}</span>
-              <h3>{pilier.titre}</h3>
-              <p>{pilier.texte}</p>
-            </article>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}

package/templates/react-ts/src/composants/Marque.tsx

@@ -1,50 +0,0 @@
-/**
- * La marque : le signe et le mot.
- *
- * ## Pourquoi le signe est dessine ici, et non charge
- *
- * Un fichier dans `public/` serait une image de plus a telecharger, et surtout
- * une image d'une seule couleur. Le signe est dessine en SVG dans le flux, avec
- * `currentColor` : il prend la couleur de son parent, donc la teinte de marque
- * en clair comme en sombre, sans qu'on ait deux fichiers a tenir.
- *
- * @module
- */
-
-import type { ReactElement } from 'react'
-
-/** Le signe seul, a la taille de la police qui l'entoure. */
-export function Signe({ className = '' }: { readonly className?: string }): ReactElement {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      fill="none"
-      aria-hidden="true"
-      className={className}
-      // La taille est en style, et non en classe : elle suit la police qui
-      // entoure le signe, et une classe utilitaire a valeur arbitraire n'est
-      // emise que si le compilateur l'a vue passer. Absente, elle laisserait
-      // un SVG sans dimensions — donc invisible, sans rien pour le signaler.
-      style={{ width: '1.15em', height: '1.15em', flexShrink: 0 }}
-    >
-      <path
-        d="M20.25 20.25H50a29.75 29.75 0 1 1-29.75 29.75Z"
-        stroke="currentColor"
-        strokeWidth="10.5"
-        strokeLinejoin="miter"
-      />
-    </svg>
-  )
-}
-
-/** Le signe et le mot, tels qu'ils vont dans une barre de navigation. */
-export function Marque(): ReactElement {
-  return (
-    <span className="o-inline-flex o-items-center o-gap-2 o-font-semibold o-tracking-tight">
-      <span className="o-text-brand-500">
-        <Signe />
-      </span>
-      Odoro
-    </span>
-  )
-}

package/templates/react-ts/src/routes/About.tsx

@@ -1,43 +0,0 @@
-/**
- * Une seconde page, pour montrer le routeur a l'oeuvre.
- *
- * @module
- */
-
-import { Reveal } from '@odoro-cli/libs/motion'
-import type { ReactElement } from 'react'
-
-/** Ce que le projet embarque, tel qu'il a ete cree. */
-const REPERES: readonly { readonly cle: string; readonly valeur: string }[] = [
-  { cle: 'Moteur', valeur: 'odoro — serveur de developpement et compilation' },
-  { cle: 'Styles', valeur: '@odoro-cli/libs — jetons, utilitaires, composants' },
-  { cle: 'Registre', valeur: 'register.odoro.dev — copie dans votre projet' },
-]
-
-/** Page « A propos ». */
-export function About(): ReactElement {
-  return (
-    <section className="o-px-6 o-py-24">
-      <div className="o-mx-auto o-w-full o-max-w-3xl">
-        <Reveal>
-          <h1 className="o-text-4xl o-font-bold o-tracking-tight">A propos</h1>
-          <p className="o-mt-4 o-text-zinc-500 dark:o-text-zinc-400">
-            Cette page existe pour montrer le routeur : la navigation ne recharge
-            rien, et la transition est celle du navigateur.
-          </p>
-
-          <dl className="o-mt-10 o-divide-y o-divide-zinc-200 dark:o-divide-zinc-800 o-border-t o-border-zinc-200 dark:o-border-zinc-800">
-            {REPERES.map((repere) => (
-              <div key={repere.cle} className="o-flex o-flex-col md:o-flex-row o-gap-1 md:o-gap-6 o-py-4">
-                <dt className="o-w-32 o-shrink-0 o-text-sm o-font-medium">{repere.cle}</dt>
-                <dd className="o-m-0 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
-                  {repere.valeur}
-                </dd>
-              </div>
-            ))}
-          </dl>
-        </Reveal>
-      </div>
-    </section>
-  )
-}

package/templates/react-ts/src/routes/Home.tsx

@@ -1,28 +0,0 @@
-/**
- * La page d'accueil : le fond, puis les sections.
- *
- * Elle ne fait que les mettre bout a bout. Chaque section vit dans son propre
- * fichier, si bien qu'en retirer une, en ajouter une ou en changer l'ordre se
- * lit ici en une ligne.
- *
- * @module
- */
-
-import type { ReactElement } from 'react'
-
-import { Cloture } from '@/sections/Cloture'
-import { Fond } from '@/sections/Fond'
-import { Hero } from '@/sections/Hero'
-import { Piliers } from '@/sections/Piliers'
-
-/** Page d'accueil. */
-export function Home(): ReactElement {
-  return (
-    <>
-      <Fond />
-      <Hero />
-      <Piliers />
-      <Cloture />
-    </>
-  )
-}

package/templates/react-ts/src/routes/NotFound.tsx

@@ -1,14 +0,0 @@
-import { Link } from '@odoro-cli/libs/router'
-
-/** Page affichee pour toute route inconnue. */
-export function NotFound() {
-  return (
-    <div className="o-flex o-flex-col o-gap-4" role="alert">
-      <h1 className="o-text-3xl o-font-bold">404</h1>
-      <p className="o-text-zinc-500 dark:o-text-zinc-400">Cette page n existe pas.</p>
-      <p>
-        <Link to="/">Retour a l accueil</Link>
-      </p>
-    </div>
-  )
-}

package/templates/react-ts/src/sections/Cloture.tsx

@@ -1,69 +0,0 @@
-/**
- * La cloture : une commande, et la porte de sortie vers la documentation.
- *
- * Une page d'accueil qui s'arrete sur sa derniere carte laisse le visiteur
- * sans geste suivant. Celle-ci se termine par ce qu'il y a a taper.
- *
- * @module
- */
-
-import { Reveal } from '@odoro-cli/libs/motion'
-import { buttonClasses } from '@odoro-cli/libs/ui'
-import { useState, type ReactElement } from 'react'
-
-/** La commande que l'on copie le plus souvent. */
-const COMMANDE = 'odoro add text/count-up'
-
-/** La section de cloture. */
-export function Cloture(): ReactElement {
-  const [copie, setCopie] = useState(false)
-
-  return (
-    <section className="o-border-t o-border-zinc-200 dark:o-border-zinc-800 o-px-6 o-py-24">
-      <div className="o-mx-auto o-w-full o-max-w-3xl o-text-center">
-        <Reveal>
-          <h2 className="o-text-3xl o-font-bold o-tracking-tight md:o-text-4xl">
-            Ajoutez un composant, sans quitter le terminal.
-          </h2>
-          <p className="o-mx-auto o-mt-4 o-max-w-prose o-text-zinc-500 dark:o-text-zinc-400">
-            Le registre copie le code dans votre projet. Il vous appartient : on le
-            lit, on le modifie, il ne se met pas a jour dans votre dos.
-          </p>
-
-          <div className="o-mx-auto o-mt-8 o-flex o-max-w-md o-items-center o-gap-2 o-rounded-xl o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-zinc-50 dark:o-bg-zinc-900 o-p-2 o-pl-4">
-            <code className="o-flex-1 o-text-left o-font-mono o-text-sm">{COMMANDE}</code>
-            <button
-              type="button"
-              className={buttonClasses({ tone: 'ghost', size: 'sm' })}
-              onClick={() => {
-                // Le presse-papiers peut etre refuse — hors contexte sur, ou
-                // permission retiree. L'echec ne doit pas casser la page : le
-                // libelle ne change simplement pas.
-                void navigator.clipboard
-                  ?.writeText(COMMANDE)
-                  .then(() => {
-                    setCopie(true)
-                    setTimeout(() => {
-                      setCopie(false)
-                    }, 1600)
-                  })
-                  .catch(() => undefined)
-              }}
-            >
-              {copie ? 'Copie' : 'Copier'}
-            </button>
-          </div>
-
-          <a
-            href="https://odoro.dev/docs/registry"
-            target="_blank"
-            rel="noreferrer"
-            className="o-mt-6 o-inline-block o-text-sm o-text-zinc-500 dark:o-text-zinc-400 hover:o-text-brand-500"
-          >
-            Parcourir le catalogue
-          </a>
-        </Reveal>
-      </div>
-    </section>
-  )
-}