@hgdc/ui 0.66.2 → 0.67.0

package/dist/project-switcher.js

@@ -22,6 +22,8 @@ export function ProjectMark({ project, className, }) {
     const mark = (project.mark ?? project.name.trim().charAt(0)) || "?";
     return (_jsx("span", { "aria-hidden": true, "data-slot": "project-mark", className: cn(base, "font-mono text-[10px] font-semibold text-foreground uppercase", className), children: mark }));
 }
+const startsWithVowel = (word) => /^[aeiouyàâéèêh]/i.test(word);
+const changeLabel = (noun) => `changer ${startsWithVowel(noun) ? "d'" : "de "}${noun}`;
 /** Rend une destination du menu : un lien (`href`, par `renderLink`) ou une action. */
 function SwitcherEntry({ href, onSelect, renderLink, children, }) {
     if (href !== undefined)
@@ -39,12 +41,14 @@ function SwitcherEntry({ href, onSelect, renderLink, children, }) {
  * pendant le chargement : le déclencheur montre déjà `activeName` (le segment de l'URL), le menu
  * reste utilisable pour « Tous les projets » et « Nouveau projet ».
  */
-export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, noun = { one: "projet", many: "projets" }, createLabel = `${noun.feminine ? "Nouvelle" : "Nouveau"} ${noun.one}`, className, }) {
+export function ProjectSwitcher({ projects, activeId, activeName, onSelect, allHref, createHref, onCreate, renderLink, noun = { one: "projet", many: "projets" }, createLabel = `${noun.feminine ? "Nouvelle" : startsWithVowel(noun.one) ? "Nouvel" : "Nouveau"} ${noun.one}`, className, }) {
     const capitalized = (word) => word.charAt(0).toUpperCase() + word.slice(1);
     const all = `${noun.feminine ? "Toutes" : "Tous"} les ${noun.many}`;
     const hasActive = activeId !== undefined && activeId !== null;
     const current = hasActive ? projects?.find((p) => p.id === activeId) : undefined;
     const label = hasActive ? (current?.name ?? activeName ?? "") : all;
     const canCreate = createHref !== undefined || onCreate !== undefined;
-    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive ? `${capitalized(noun.one)} ${label}, changer de ${noun.one}` : `${all}, changer de ${noun.one}`, className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: all }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: capitalized(noun.many) }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": `${capitalized(noun.one)} ${noun.feminine ? "active" : "actif"}`, className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx("button", { type: "button", "aria-label": hasActive
+                        ? `${capitalized(noun.one)} ${label}, ${changeLabel(noun.one)}`
+                        : `${all}, ${changeLabel(noun.one)}`, className: cn("flex h-10 max-w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-sm font-medium outline-none transition-colors duration-(--duration-fast) ease-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted coarse:h-11", className) }), children: [hasActive ? (current ? (_jsx(ProjectMark, { project: current })) : (_jsx("span", { "aria-hidden": true, className: "size-6 shrink-0 rounded-md bg-muted skeleton-pulse" }))) : (_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4.5 shrink-0 text-muted-foreground" })), _jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(HugeiconsIcon, { icon: UnfoldMoreIcon, "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72 max-w-[calc(100vw-2rem)]", children: [_jsxs(SwitcherEntry, { href: allHref, onSelect: () => onSelect?.(null), renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: DashboardSquare01Icon, "aria-hidden": true, className: "size-4" }), _jsx("span", { className: "flex-1", children: all }), hasActive ? null : _jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": "Vue active", className: "size-4" })] }), projects?.length ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: capitalized(noun.many) }), projects.map((project) => (_jsxs(SwitcherEntry, { href: project.href, onSelect: () => onSelect?.(project.id), renderLink: renderLink, children: [_jsx(ProjectMark, { project: project }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: project.name }), project.id === activeId ? (_jsx(HugeiconsIcon, { icon: Tick02Icon, "aria-label": `${capitalized(noun.one)} ${noun.feminine ? "active" : "actif"}`, className: "size-4" })) : null] }, project.id)))] })] })) : null, canCreate ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(SwitcherEntry, { href: createHref, onSelect: onCreate, renderLink: renderLink, children: [_jsx(HugeiconsIcon, { icon: PlusSignIcon, "aria-hidden": true, className: "size-4" }), createLabel] })] })) : null] })] }));
 }

package/dist/shell-project.d.ts

@@ -16,6 +16,30 @@ export declare function shellProjectFrom(project: ShellCoreProject | null, setti
     modules: ReadonlyArray<ModuleWord>;
     settingsHref: string;
 } | undefined;
+/**
+ * Un module montre un seul sélecteur en haut de page : celui de Basalte dès que l'organisation a des
+ * projets, ou le sien sinon (démo, espace pas encore relié). Pendant le chargement, celui de Basalte.
+ */
+export declare function coreSwitcherShown(organizationId: string | null | undefined, projects: ReadonlyArray<ShellCoreProject> | undefined): boolean;
+/** Ce qu'un module a pour un projet : un site, une doc, un assistant, une page de statut. */
+export type ProjectResource = {
+    coreProjectId?: string | null | undefined;
+};
+/**
+ * Où mène un projet choisi dans le sélecteur : sa ressource s'il n'y en a qu'une, sinon la liste du
+ * module, déjà filtrée. `null` : on ne bouge pas (liste en chargement, ou déjà sur la liste).
+ */
+export declare function projectDestination<Resource extends ProjectResource>(resources: ReadonlyArray<Resource> | undefined, projectId: string | null, resourceOpen: boolean): {
+    to: "resource";
+    resource: Resource;
+} | {
+    to: "list";
+} | null;
+/**
+ * Une ressource ouverte par son adresse (lien, palette, liste) : le sélecteur montre son projet. Écrit
+ * à l'ouverture seulement : revenir sur « Tous les projets » n'est pas annulé avant de quitter la page.
+ */
+export declare function useShellProjectOfResource(organizationId: string | null | undefined, coreProjectId: string | null | undefined): void;
 /**
  * Le sélecteur de projet de Basalte, dans `header` d'`AppShell`. Le choix vaut pour toutes les consoles.
  * `onChange` : ce que le module fait en plus, par exemple ouvrir la page du projet. Rien à montrer

package/dist/shell-project.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSyncExternalStore } from "react";
+import { useEffect, useSyncExternalStore } from "react";
 import { ProjectSwitcher } from "./project-switcher.js";
 /**
  * Le projet choisi en haut de page, le même dans toutes les consoles de Basalte : sous `app.hgdc.ch`,
@@ -51,6 +51,37 @@ export function shellProjectFrom(project, settingsHref) {
         return undefined;
     return { name: project.name, modules: project.modules, settingsHref };
 }
+/**
+ * Un module montre un seul sélecteur en haut de page : celui de Basalte dès que l'organisation a des
+ * projets, ou le sien sinon (démo, espace pas encore relié). Pendant le chargement, celui de Basalte.
+ */
+export function coreSwitcherShown(organizationId, projects) {
+    return Boolean(organizationId) && projects?.length !== 0;
+}
+/**
+ * Où mène un projet choisi dans le sélecteur : sa ressource s'il n'y en a qu'une, sinon la liste du
+ * module, déjà filtrée. `null` : on ne bouge pas (liste en chargement, ou déjà sur la liste).
+ */
+export function projectDestination(resources, projectId, resourceOpen) {
+    if (resources === undefined)
+        return null;
+    if (projectId !== null) {
+        const matching = resources.filter((resource) => resource.coreProjectId === projectId);
+        if (matching.length === 1 && matching[0])
+            return { to: "resource", resource: matching[0] };
+    }
+    return resourceOpen ? { to: "list" } : null;
+}
+/**
+ * Une ressource ouverte par son adresse (lien, palette, liste) : le sélecteur montre son projet. Écrit
+ * à l'ouverture seulement : revenir sur « Tous les projets » n'est pas annulé avant de quitter la page.
+ */
+export function useShellProjectOfResource(organizationId, coreProjectId) {
+    useEffect(() => {
+        if (organizationId && coreProjectId)
+            saveShellProject(organizationId, coreProjectId);
+    }, [organizationId, coreProjectId]);
+}
 /**
  * Le sélecteur de projet de Basalte, dans `header` d'`AppShell`. Le choix vaut pour toutes les consoles.
  * `onChange` : ce que le module fait en plus, par exemple ouvrir la page du projet. Rien à montrer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.66.2",
+  "version": "0.67.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",