@sia-ui/cli 0.2.2 → 0.3.1

package/dist/registry/package/components/AppShell/index.tsx

@@ -1,6 +1,416 @@
-import { useState, type ReactNode } from "react";
+import {
+  useCallback,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
 import { cn } from "@sia-ui/utils";
+import {
+  filterNavTree,
+  navKeyForPath,
+  type PermissionRule,
+} from "@sia-ui/headless";
+import { useMediaQuery } from "@sia-ui/react";
+import { Drawer } from "../Drawer";
+import {
+  Sidebar,
+  type SidebarEntry,
+  type SidebarItem,
+  type SidebarRenderLink,
+} from "../Sidebar";
+import { BottomTabs } from "./tab-bar";
 import "./styles.css";
 
-export interface AppShellProps { logo?: ReactNode; navigation: ReactNode; header?: ReactNode; children: ReactNode; footer?: ReactNode; defaultCollapsed?: boolean; className?: string; }
-export function AppShell({ logo, navigation, header, children, footer, defaultCollapsed = false, className }: AppShellProps) { const [collapsed, setCollapsed] = useState(defaultCollapsed); return <div className={cn("sia-app-shell", collapsed && "sia-app-shell--collapsed", className)}><aside><div className="sia-app-shell__brand">{logo}<button type="button" aria-label={collapsed ? "Développer le menu" : "Réduire le menu"} onClick={() => setCollapsed(!collapsed)}>☰</button></div><nav>{navigation}</nav></aside><div className="sia-app-shell__main">{header && <header>{header}</header>}<main>{children}</main>{footer && <footer>{footer}</footer>}</div></div>; }
+export { BottomTabs, type BottomTabsProps } from "./tab-bar";
+
+/**
+ * L'état de la barre latérale sur grand écran.
+ *
+ * Trois valeurs et non un booléen : « réduite » et « masquée » sont deux
+ * intentions différentes, et une application qui veut l'une ne veut
+ * généralement pas l'autre. Sous le seuil mobile, l'état est ignoré — la
+ * barre cède la place à la navigation basse.
+ */
+export type SidebarState = "expanded" | "collapsed" | "hidden";
+
+/**
+ * Ce que fait le bouton de bascule.
+ *
+ * `icon` alterne déployé et rail, `offcanvas` alterne déployé et masqué,
+ * `false` retire le bouton.
+ */
+export type AppShellCollapsible = "icon" | "offcanvas" | false;
+
+/**
+ * La navigation sous le seuil mobile.
+ *
+ * `both` n'est pas un défaut par hasard : deux systèmes de navigation
+ * simultanés se disputent l'attention, et l'utilisateur ne sait plus lequel
+ * fait autorité.
+ */
+export type AppShellMobileNav = "drawer" | "tabs" | "both";
+
+export type AppShellContentWidth = "wide" | "narrow" | "full";
+
+export interface AppShellProps {
+  nav: SidebarEntry[];
+  children: ReactNode;
+
+  /**
+   * La clé de l'entrée courante.
+   *
+   * Laissée vide, elle est déduite de `currentPath`. La fournir explicitement
+   * ne sert que si les clés ne correspondent à aucune adresse.
+   */
+  activeKey?: string;
+
+  /**
+   * L'adresse courante — **le point d'accroche du routeur**.
+   *
+   * Une seule chaîne, que tous savent produire :
+   *
+   * ```tsx
+   * const { pathname } = useLocation();      // React Router
+   * const pathname = usePathname();          // Next.js
+   * const [pathname] = useLocation();        // wouter
+   * ```
+   *
+   * De là, la coquille déduit l'entrée active par le préfixe le plus long, et
+   * referme le tiroir mobile à chaque navigation — sans jamais importer de
+   * routeur.
+   */
+  currentPath?: string;
+
+  /** Branche les liens sur le routeur. À stabiliser avec `useCallback`. */
+  renderLink?: SidebarRenderLink;
+  onNavigate?: (item: SidebarItem) => void;
+
+  /**
+   * Évalue les règles de permission.
+   *
+   * Le filtrage est fait **une seule fois** ici : ni la barre latérale ni les
+   * onglets ne doivent avoir leur propre idée de ce qui est visible.
+   */
+  can?: (rule: PermissionRule) => boolean;
+
+  /**
+   * En tête de barre latérale : logo, nom du produit, sélecteur d'entité.
+   *
+   * Reçoit `data-collapsed` en mode rail, comme `sidebarFooter` : sans quoi
+   * un nom de produit écrit en toutes lettres déborde des quatre rem du rail.
+   */
+  brand?: ReactNode;
+
+  /**
+   * Bas de la barre latérale, sous la navigation.
+   *
+   * C'est la place de la déconnexion et des réglages du compte — ce qui sort
+   * de l'application, par opposition à l'en-tête, réservé à ce qui agit sur
+   * l'écran courant. Reçoit `data-collapsed` en mode rail, de quoi masquer un
+   * libellé sans changer de composant.
+   */
+  sidebarFooter?: ReactNode;
+
+  /** La barre du haut : recherche, notifications, avatar de compte. */
+  header?: ReactNode;
+
+  /**
+   * Au-dessus du contenu, pleine largeur de la zone.
+   *
+   * L'endroit d'un `PageHeader`. La coquille ne prend pas de `title` : un
+   * `<h1>` rendu par la coquille force chaque page à passer par ses props, et
+   * une page qui veut deux titres ou une mise en page à elle doit se battre.
+   */
+  page?: ReactNode;
+
+  footer?: ReactNode;
+
+  /**
+   * La largeur de la zone de contenu.
+   *
+   * Décidée ici plutôt qu'écran par écran : des largeurs posées page après
+   * page finissent par diverger, et personne ne sait laquelle fait foi.
+   */
+  contentWidth?: AppShellContentWidth;
+
+  side?: "left" | "right";
+  variant?: "default" | "filled" | "floating";
+
+  /** L'en-tête suit-il le défilement. */
+  stickyHeader?: boolean;
+
+  sidebarState?: SidebarState;
+  defaultSidebarState?: SidebarState;
+  onSidebarStateChange?: (state: SidebarState) => void;
+  collapsible?: AppShellCollapsible;
+
+  /** Toute valeur CSS : `16rem`, `280px`, `min(20vw, 320px)`. */
+  sidebarWidth?: string;
+  sidebarCollapsedWidth?: string;
+
+  mobileNav?: AppShellMobileNav;
+  /** Sous cette largeur, la barre latérale cède la place. */
+  mobileBreakpoint?: number;
+
+  ariaLabel?: string;
+  className?: string;
+}
+
+/**
+ * La coquille d'une application.
+ *
+ * Elle n'invente rien : la navigation est le `Sidebar`, le tiroir est le
+ * `Drawer`, les droits viennent de `@sia-ui/headless`. Ce qu'elle apporte est
+ * l'assemblage — trois états de barre, une bascule mobile, et une seule
+ * source de vérité pour ce qui est visible et pour ce qui est actif.
+ */
+export function AppShell({
+  nav,
+  children,
+  activeKey,
+  currentPath,
+  renderLink,
+  onNavigate,
+  can,
+  brand,
+  sidebarFooter,
+  header,
+  page,
+  footer,
+  contentWidth = "wide",
+  side = "left",
+  variant = "default",
+  stickyHeader = true,
+  sidebarState,
+  defaultSidebarState = "expanded",
+  onSidebarStateChange,
+  collapsible = "icon",
+  sidebarWidth,
+  sidebarCollapsedWidth,
+  mobileNav = "drawer",
+  mobileBreakpoint = 768,
+  ariaLabel,
+  className,
+}: AppShellProps) {
+  const compact = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);
+
+  // Filtré une fois, consommé par la barre et par les onglets.
+  const visibles = useMemo(
+    () => (can ? filterNavTree(nav as never, can) : nav),
+    [can, nav],
+  ) as SidebarEntry[];
+
+  const plats = useMemo(
+    () =>
+      visibles.flatMap((e) =>
+        "title" in e && Array.isArray(e.items) ? e.items : [e as SidebarItem],
+      ),
+    [visibles],
+  );
+
+  const deduite = useMemo(
+    () => navKeyForPath(plats, currentPath),
+    [currentPath, plats],
+  );
+  const active = activeKey ?? deduite;
+
+  const [interne, setInterne] = useState<SidebarState>(defaultSidebarState);
+  const pilote = sidebarState !== undefined;
+  const etat = pilote ? sidebarState : interne;
+
+  const basculer = useCallback(() => {
+    const reduit = collapsible === "offcanvas" ? "hidden" : "collapsed";
+    const suivant: SidebarState = etat === "expanded" ? reduit : "expanded";
+    if (!pilote) setInterne(suivant);
+    onSidebarStateChange?.(suivant);
+  }, [collapsible, etat, onSidebarStateChange, pilote]);
+
+  const [tiroirOuvert, setTiroirOuvert] = useState(false);
+
+  /**
+   * Le tiroir se referme à chaque navigation.
+   *
+   * C'est ce qu'on oublie toujours : on touche une entrée, la page change
+   * derrière, et le tiroir reste ouvert par-dessus. Le changement d'adresse
+   * suffit à le détecter — aucun abonnement au routeur n'est nécessaire.
+   */
+  const [dernierChemin, setDernierChemin] = useState(currentPath);
+  if (currentPath !== dernierChemin) {
+    setDernierChemin(currentPath);
+    if (tiroirOuvert) setTiroirOuvert(false);
+  }
+
+  const naviguer = useCallback(
+    (item: SidebarItem) => {
+      onNavigate?.(item);
+      setTiroirOuvert(false);
+    },
+    [onNavigate],
+  );
+
+  const reduite = etat === "collapsed";
+  const masquee = etat === "hidden";
+  const montrerTiroir = mobileNav === "drawer" || mobileNav === "both";
+  const montrerOnglets = mobileNav === "tabs" || mobileNav === "both";
+
+  const barre = (
+    <Sidebar
+      items={visibles}
+      collapsed={reduite && !compact}
+      side={side}
+      variant={variant}
+      {...(active !== undefined ? { activeKey: active } : {})}
+      {...(renderLink ? { renderLink } : {})}
+      onNavigate={naviguer}
+      {...(brand
+        ? {
+            header: (
+              <div data-collapsed={reduite && !compact ? "" : undefined}>
+                {brand}
+              </div>
+            ),
+          }
+        : {})}
+      {...(sidebarFooter
+        ? {
+            footer: (
+              <div data-collapsed={reduite && !compact ? "" : undefined}>
+                {sidebarFooter}
+              </div>
+            ),
+          }
+        : {})}
+      {...(ariaLabel ? { ariaLabel } : {})}
+    />
+  );
+
+  const style: CSSProperties & Record<string, string> = {} as never;
+  if (sidebarWidth) style["--sia-shell-sidebar"] = sidebarWidth;
+  if (sidebarCollapsedWidth) style["--sia-shell-rail"] = sidebarCollapsedWidth;
+
+  return (
+    <div
+      className={cn(
+        "sia-shell",
+        `sia-shell--${side}`,
+        `sia-shell--${variant}`,
+        reduite && "sia-shell--rail",
+        masquee && "sia-shell--hidden",
+        compact && "sia-shell--compact",
+        montrerOnglets && compact && "sia-shell--with-tabs",
+        className,
+      )}
+      style={style}
+    >
+      {/* Sur petit écran, la barre latérale n'a pas la place de rester
+          ouverte : elle devient un tiroir. Sans lui, l'arborescence complète
+          ne serait atteignable que par « Plus », ce qui ne se devine pas. */}
+      {!compact && !masquee && <aside className="sia-shell__aside">{barre}</aside>}
+
+      <div className="sia-shell__main">
+        {(header || collapsible !== false || (compact && montrerTiroir)) && (
+          <header
+            className={cn(
+              "sia-shell__header",
+              stickyHeader && "sia-shell__header--sticky",
+            )}
+          >
+            {compact && montrerTiroir ? (
+              <button
+                type="button"
+                className="sia-shell__toggle"
+                aria-label="Ouvrir la navigation"
+                aria-expanded={tiroirOuvert}
+                onClick={() => setTiroirOuvert(true)}
+              >
+                <BarresIcon />
+              </button>
+            ) : (
+              collapsible !== false && (
+                <button
+                  type="button"
+                  className="sia-shell__toggle"
+                  aria-label={
+                    etat === "expanded"
+                      ? "Réduire la navigation"
+                      : "Déployer la navigation"
+                  }
+                  aria-expanded={etat === "expanded"}
+                  onClick={basculer}
+                >
+                  <PanneauIcon />
+                </button>
+              )
+            )}
+
+            <div className="sia-shell__header-content">{header}</div>
+          </header>
+        )}
+
+        <main className={cn("sia-shell__content", `sia-shell__content--${contentWidth}`)}>
+          {page && <div className="sia-shell__page">{page}</div>}
+          {children}
+        </main>
+
+        {footer && <footer className="sia-shell__footer">{footer}</footer>}
+      </div>
+
+      {compact && montrerOnglets && (
+        <BottomTabs
+          items={plats}
+          {...(active !== undefined ? { activeKey: active } : {})}
+          {...(renderLink ? { renderLink } : {})}
+          onNavigate={naviguer}
+          {...(montrerTiroir ? { onMore: () => setTiroirOuvert(true) } : {})}
+        />
+      )}
+
+      {compact && montrerTiroir && (
+        <Drawer
+          open={tiroirOuvert}
+          onOpenChange={setTiroirOuvert}
+          position={side}
+          size="sm"
+          className="sia-shell__drawer"
+        >
+          {barre}
+        </Drawer>
+      )}
+    </div>
+  );
+}
+
+/** Trois barres. Dessinée ici pour ne pas tirer tout le jeu d'icônes. */
+function BarresIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+      <path
+        d="M4 7h16M4 12h16M4 17h16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/** Un panneau latéral, qui dit ce que le bouton replie. */
+function PanneauIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+      <rect
+        x="3"
+        y="4"
+        width="18"
+        height="16"
+        rx="2.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+      />
+      <path d="M9.5 4v16" stroke="currentColor" strokeWidth="1.8" />
+    </svg>
+  );
+}

package/dist/registry/package/components/AppShell/styles.css

@@ -1,7 +1,259 @@
-.sia-app-shell { min-height:32rem; display:grid; grid-template-columns:16rem 1fr; border:1px solid var(--sia-border); }
-.sia-app-shell--collapsed { grid-template-columns:4rem 1fr; }
-.sia-app-shell > aside { overflow:hidden; border-right:1px solid var(--sia-border); background:var(--sia-surface); }
-.sia-app-shell__brand { display:flex; align-items:center; justify-content:space-between; min-height:4rem; padding:.75rem; }
-.sia-app-shell__main { min-width:0; display:flex; flex-direction:column; }
-.sia-app-shell__main > header,.sia-app-shell__main > footer { padding:1rem; border-bottom:1px solid var(--sia-border); }
-.sia-app-shell__main > main { flex:1; padding:1rem; }
+/**
+ * La coquille.
+ *
+ * Deux variables portent les largeurs — `--sia-shell-sidebar` et
+ * `--sia-shell-rail` — et l'appelant peut les redéfinir en ligne. La grille
+ * les lit sans jamais les coder en dur : changer la largeur ne demande donc
+ * pas de toucher au composant.
+ */
+
+.sia-shell {
+  --sia-shell-sidebar: 16rem;
+  --sia-shell-rail: 4rem;
+  --sia-shell-header: 3.5rem;
+  --sia-shell-tabs: 4rem;
+
+  display: grid;
+  grid-template-columns: var(--sia-shell-sidebar) minmax(0, 1fr);
+  min-height: 100%;
+  background: var(--sia-background);
+  color: var(--sia-foreground);
+  transition: grid-template-columns var(--sia-duration-base) var(--sia-easing-standard);
+}
+
+.sia-shell--rail { grid-template-columns: var(--sia-shell-rail) minmax(0, 1fr); }
+.sia-shell--hidden,
+.sia-shell--compact { grid-template-columns: minmax(0, 1fr); }
+
+/* Posée à droite, la barre passe en seconde colonne : l'ordre du DOM ne
+   change pas, donc l'ordre de lecture au clavier non plus. */
+.sia-shell--right { grid-template-columns: minmax(0, 1fr) var(--sia-shell-sidebar); }
+.sia-shell--right.sia-shell--rail { grid-template-columns: minmax(0, 1fr) var(--sia-shell-rail); }
+.sia-shell--right .sia-shell__aside { order: 2; }
+
+.sia-shell__aside {
+  min-width: 0;
+  height: 100vh;
+  /* Collée : le contenu défile, la navigation reste. Sans cela, revenir en
+     haut d'une longue liste devient un préalable à tout déplacement. */
+  position: sticky;
+  top: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--sia-border);
+  background: var(--sia-surface);
+}
+.sia-shell--right .sia-shell__aside {
+  border-right: 0;
+  border-left: 1px solid var(--sia-border);
+}
+
+.sia-shell--filled .sia-shell__aside { background: var(--sia-surface-raised, var(--sia-surface)); }
+
+/* La barre flottante se détache de son bord : la coquille lui rend la marge
+   que le composant seul ne peut pas prendre. */
+.sia-shell--floating .sia-shell__aside {
+  border: 0;
+  background: transparent;
+  padding: .5rem;
+}
+
+.sia-shell__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 100vh;
+}
+
+/* ── L'en-tête ──────────────────────────────────────────────────────────── */
+
+.sia-shell__header {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex: none;
+  min-height: var(--sia-shell-header);
+  padding: .5rem 1rem;
+  border-bottom: 1px solid var(--sia-border);
+  background: color-mix(in srgb, var(--sia-background) 88%, transparent);
+}
+
+/* Le titre d'écran et l'identité servent de repère pendant le défilement.
+   `backdrop-filter` n'est posé qu'ici, où il couvre une bande étroite : sur
+   une grande surface il coûte une couche de composition à chaque image. */
+.sia-shell__header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  backdrop-filter: blur(8px);
+}
+
+.sia-shell__header-content {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.sia-shell__toggle {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--sia-duration-fast) var(--sia-easing-standard),
+    color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+.sia-shell__toggle:hover { background: var(--sia-surface); color: var(--sia-foreground); }
+.sia-shell__toggle:focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: 2px;
+}
+
+/* ── Le contenu ─────────────────────────────────────────────────────────── */
+
+.sia-shell__content {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  margin-inline: auto;
+  padding: 1.25rem 1rem 2rem;
+}
+
+/* Assez large pour deux colonnes de cartes, assez borné pour qu'une ligne de
+   texte reste lisible. */
+.sia-shell__content--wide { max-width: 87.5rem; }
+/* Pour un écran qui n'est qu'un formulaire. */
+.sia-shell__content--narrow { max-width: 48rem; }
+/* Pour un tableau qui a besoin de toute la place. */
+.sia-shell__content--full { max-width: none; }
+
+.sia-shell__page { margin-bottom: 1.25rem; }
+
+.sia-shell__footer {
+  flex: none;
+  padding: 1rem;
+  border-top: 1px solid var(--sia-border);
+  color: var(--sia-muted);
+  font-size: .85rem;
+}
+
+/* ── Petit écran ────────────────────────────────────────────────────────── */
+
+.sia-shell--compact .sia-shell__content { padding-inline: .875rem; }
+
+/* La barre d'onglets couvre le bas : sans cette réserve, la dernière ligne
+   d'un tableau reste inatteignable. */
+.sia-shell--with-tabs .sia-shell__main {
+  padding-bottom: calc(var(--sia-shell-tabs) + env(safe-area-inset-bottom, 0px));
+}
+
+.sia-shell__drawer .sia-sidebar { height: 100%; }
+
+/* ── La barre d'onglets ─────────────────────────────────────────────────── */
+
+/* `sia-bottom-tabs` et non `sia-tabs` : ce dernier appartient au composant
+   `Tabs`, dont la première règle est `display: grid`. La collision jouait
+   dans les deux sens — mes onglets héritaient de sa grille, et mes règles
+   fixaient ses onglets en bas de l'écran. */
+
+.sia-bottom-tabs {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 30;
+  display: flex;
+  align-items: stretch;
+  height: var(--sia-shell-tabs);
+  /* La barre d'accueil des téléphones sans bouton mange le bas de l'écran. */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  border-top: 1px solid var(--sia-border);
+  background: color-mix(in srgb, var(--sia-background) 92%, transparent);
+  backdrop-filter: blur(12px);
+}
+
+.sia-bottom-tabs__cell { display: contents; }
+
+.sia-bottom-tabs__item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: .15rem;
+  min-width: 0;
+  padding: .25rem .25rem .3rem;
+  border: 0;
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  font-size: .68rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--sia-duration-fast) var(--sia-easing-standard);
+}
+
+/**
+ * L'onglet actif reçoit une pastille qui grandit sous l'icône.
+ *
+ * Une simple bascule de couleur passe inaperçue sur un téléphone tenu à bout
+ * de bras ; un changement de forme, non.
+ */
+.sia-bottom-tabs__pastille {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 1.75rem;
+  border-radius: 999px;
+  background: transparent;
+  font-size: 1.1rem;
+  transform: scale(.9);
+  transition:
+    background-color var(--sia-duration-base) var(--sia-easing-spring),
+    transform var(--sia-duration-base) var(--sia-easing-spring);
+}
+
+.sia-bottom-tabs__item--active { color: var(--sia-primary); }
+.sia-bottom-tabs__item--active .sia-bottom-tabs__pastille {
+  background: color-mix(in srgb, var(--sia-primary) 14%, transparent);
+  transform: scale(1);
+}
+
+.sia-bottom-tabs__label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Le compte exact ne tient pas sous une icône d'onglet : il devient un point,
+   comme sur le rail. */
+.sia-bottom-tabs__point {
+  position: absolute;
+  top: .05rem;
+  right: .65rem;
+  width: .4rem;
+  height: .4rem;
+  border-radius: 50%;
+  background: var(--sia-danger);
+  box-shadow: 0 0 0 2px var(--sia-background);
+}
+
+.sia-bottom-tabs__item:focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: -3px;
+  border-radius: var(--sia-radius);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sia-shell,
+  .sia-bottom-tabs__pastille { transition: none; }
+}