@abyss-project/commons-front-core 8.1.0 → 8.3.0

package/dist/components/meaning/index.d.ts

@@ -4,3 +4,4 @@ export * from './SeverityBadge/SeverityBadge';
 export * from './ScanBadge/ScanBadge';
 export * from './RoleBadge/RoleBadge';
 export * from './ToolIcon/ToolIcon';
+export * from './Avatar/Avatar';

package/dist/components/states/Callout/Callout.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export declare enum CalloutSeverity {
+    Info = "info",
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger"
+}
+export interface CalloutProps {
+    severity: CalloutSeverity;
+    title?: string;
+    children: ReactNode;
+    /** A button or a link, placed after the text (under it below 768 px). */
+    action?: ReactNode;
+    /** Shows a close button; the host removes the callout. */
+    onClose?(): void;
+    /** Replaces the icon of the severity. */
+    icon?: ReactNode;
+}
+/**
+ * A banner inside a page (overdue invoice, trial, quota reached): the soft fill and 1 px border of
+ * its severity, the severity icon, an optional title, the text, an optional action and an
+ * optional close button. A danger callout is an `alert` (announced as soon as it appears), the
+ * others a `status`; a titled callout is named by its title.
+ */
+export declare function Callout({ severity, title, children, action, onClose, icon, }: CalloutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/states/Callout/Callout.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/states/PageState/PageState.d.ts

@@ -17,12 +17,17 @@ export interface PageStateError {
     message?: string;
     onRetry(): void;
 }
+export interface PageStateForbidden {
+    /** Replaces the generic description (who to ask); the title stays « Accès refusé ». */
+    message: string;
+}
 export interface PageStateProps {
     status: PageStatus;
     /** Placeholder built by the page from the same layout as the ready content. */
     skeleton: ReactNode;
     empty?: PageStateEmpty;
     error?: PageStateError;
+    forbidden?: PageStateForbidden;
     /** The ready content. */
     children: ReactNode;
 }
@@ -30,4 +35,4 @@ export interface PageStateProps {
  * The content slot of a page in each of its states. The page frame (header, toolbar) stays around
  * it: only the slot changes, so an empty or failed page keeps its header and actions.
  */
-export declare function PageState({ status, skeleton, empty, error, children, }: PageStateProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function PageState({ status, skeleton, empty, error, forbidden, children, }: PageStateProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/states/index.d.ts

@@ -1 +1,2 @@
 export * from './PageState/PageState';
+export * from './Callout/Callout';

package/dist/components/structure/AccountMenu/AccountMenu.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { ThemeMode } from '../../../theme/tokens/primitives';
+export interface AccountMenuUser {
+    name: string;
+    email?: string;
+    avatarUrl?: string;
+}
+export interface AccountMenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** A route followed by the host router, or an absolute URL. */
+    href?: string;
+    onClick?(): void;
+}
+export interface AccountMenuProps {
+    user: AccountMenuUser;
+    themeMode: ThemeMode;
+    onThemeModeChange(mode: ThemeMode): void;
+    items: AccountMenuItem[];
+    onLogout(): void;
+}
+/**
+ * The account entry of the top bar: the viewer's avatar opens a menu with their name and email,
+ * the host's entries (account, settings, billing…), the dark theme switch and the logout.
+ */
+export declare function AccountMenu({ user, themeMode, onThemeModeChange, items, onLogout, }: AccountMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/AccountMenu/AccountMenu.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/structure/AppShell/AppShell.d.ts

@@ -5,7 +5,13 @@ import { AppShellProps } from './app-shell.types';
  * navigation sections with their counts, an optional footer, a top bar and the page. There is no
  * application switcher: each service keeps its own front.
  *
- * From `lg` up the sidebar is 256 px wide; from `md` to `lg` it becomes an icon rail with
- * tooltips; below `md` a top bar opens it in a drawer.
+ * From 1200 px up the sidebar is 256 px wide; from 768 to 1199 px it becomes an icon rail with
+ * tooltips; below 768 px a top bar opens it in a drawer. The widths are the design system's tiers,
+ * never the theme's MUI breakpoints: the legacy theme's `md` is 900 px.
+ *
+ * With `chromeless` there is no sidebar, rail, drawer or top bar: the page fills the window.
+ *
+ * Every form renders `children` at the same place of one tree (root, column, `main`): switching
+ * form or `chromeless` never remounts the page.
  */
-export declare function AppShell({ product, space, nav, activeItemId, mainSpaceLink, topbar, footer, children, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell({ product, space, nav, activeItemId, mainSpaceLink, topbar, footer, chromeless, children, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/AppShell/ShellNavigation.d.ts

@@ -19,9 +19,11 @@ export declare function ShellNavigation({ nav, activeItemId, form, onNavigate, }
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * The footer entries of the navigation (plan, family, account): labelled rows, or an icon with a
- * tooltip in the rail, like the navigation entries. They lead out of the app: plain links.
+ * tooltip in the rail, like the navigation entries. They lead to the main front as plain links,
+ * unless `internal`: a route of this app, followed by the host router.
  */
-export declare function ShellFooterLinks({ items, form, }: {
+export declare function ShellFooterLinks({ items, form, onNavigate, }: {
     items: AppShellFooterItem[];
     form: NavigationForm;
+    onNavigate?(): void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/AppShell/app-shell.types.d.ts

@@ -10,20 +10,46 @@ export interface Space {
     kind: SpaceKind;
     avatarUrl?: string;
 }
+/**
+ * A secondary action on a navigation row, such as "new board" next to "Boards", or on a section,
+ * such as "manage pins" next to "Épinglés".
+ */
+export interface NavItemAction {
+    /** Accessible name of the icon button. */
+    label: string;
+    icon: ReactNode;
+    onClick(): void;
+}
 export interface NavItem {
     id: string;
     label: string;
     icon: ReactNode;
-    /** Route inside the app, followed by the host router. */
+    /**
+     * Route inside the app, followed by the host router; with `external`, an absolute URL opened in
+     * a new tab.
+     */
     href: string;
     count?: number;
     /** The count needs action: shown as a red pill (a red dot in the rail). */
     urgent?: boolean;
+    /** A plain link opened in a new tab, its accessible name saying so. */
+    external?: boolean;
+    /**
+     * An icon button at the end of the row: shown on hover or focus in the sidebar, always in the
+     * drawer, absent from the rail.
+     */
+    action?: NavItemAction;
 }
 export interface NavSection {
     id: string;
     title?: string;
+    /** May be empty when the section carries an `action`: the section then shows only its action. */
     items: NavItem[];
+    /**
+     * An icon button at the right of the section title in the sidebar and the drawer; in the rail,
+     * where titles are hidden, a single icon button with a tooltip at the head of the section.
+     */
+    action?: NavItemAction;
 }
 export interface AppShellProduct {
     kind: ToolKind;
@@ -47,8 +73,13 @@ export interface AppShellFooterItem {
     label: string;
     /** Icon or avatar, sized by the shell; alone in the rail, with `label` as its tooltip. */
     icon: ReactNode;
-    /** Absolute URL: the footer entries lead to the main front, so they are plain links. */
+    /**
+     * Absolute URL of the main front, followed as a plain link; with `internal`, a route inside the
+     * app, followed by the host router like `NavItem.href`.
+     */
     href: string;
+    /** The entry is a route of this app (the main front's own account pages). */
+    internal?: boolean;
 }
 export interface AppShellProps {
     product: AppShellProduct;
@@ -60,6 +91,11 @@ export interface AppShellProps {
     topbar?: ReactNode;
     /** Bottom of the navigation (plan, family, account), under a hairline. */
     footer?: AppShellFooterItem[];
+    /**
+     * Full-screen mode (editors): no sidebar, rail, drawer or top bar, the page fills the window.
+     * An open mobile drawer closes.
+     */
+    chromeless?: boolean;
     children: ReactNode;
 }
 /** The three forms of the shell: full sidebar (≥ `lg`), icon rail (`md`–`lg`), drawer (< `md`). */

package/dist/components/structure/NotificationsMenu/NotificationsMenu.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export interface NotificationItem {
+    id: string;
+    title: string;
+    body?: string;
+    createdAt: string | Date;
+    read: boolean;
+    /** Icon or avatar, sized by the menu (24 px). */
+    icon?: ReactNode;
+    /** Where the notification leads: a route followed by the host router, or an absolute URL. */
+    href?: string;
+}
+export interface NotificationsMenuProps {
+    items: NotificationItem[];
+    unreadCount: number;
+    loading: boolean;
+    /** Called each time the panel opens, for the host to refresh the list. */
+    onOpen?(): void;
+    /** Called when a notification is chosen; the host marks it read. */
+    onItemClick(id: string): void;
+    onMarkAllRead(): void;
+    /** State of the sound toggle, shown when `onToggleSound` is given. */
+    soundEnabled?: boolean;
+    onToggleSound?(): void;
+    /** Route of the notification preferences page: a settings link in the panel header. */
+    preferencesHref?: string;
+    /** Buttons at the end of a notification row (accept an invitation, dismiss…). */
+    renderItemActions?(item: NotificationItem): ReactNode;
+}
+/**
+ * The notifications of the top bar: a bell with the unread count, which opens a panel (a popover
+ * from `md` up, a bottom sheet below) listing the notifications, with "mark all read", the sound
+ * toggle and the preferences link. The host owns the data: it loads the list in `onOpen`, marks a
+ * notification read in `onItemClick` and all of them in `onMarkAllRead`.
+ */
+export declare function NotificationsMenu({ items, unreadCount, loading, onOpen, onItemClick, onMarkAllRead, soundEnabled, onToggleSound, preferencesHref, renderItemActions, }: NotificationsMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/NotificationsMenu/NotificationsMenu.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/structure/PageHeader/PageHeader.d.ts

@@ -14,7 +14,7 @@ export interface PageHeaderProps {
 }
 /**
  * The header of a page (mock-up `.ph`): breadcrumbs, optional icon, the page title (`h1`, the one
- * title size of the ecosystem), a subtitle line and the page actions. Below `md` the actions go
- * under the title.
+ * title size of the ecosystem), a subtitle line and the page actions. The actions go under the
+ * title below `md`, and from `md` up whenever they do not fit beside it.
  */
 export declare function PageHeader({ title, subtitle, breadcrumbs, icon, actions, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/Tabs/Tabs.d.ts

@@ -0,0 +1,34 @@
+/** The two rows of tabs: the page navigation, and a quieter sub-navigation under it. */
+export declare enum TabsVariant {
+    Primary = "primary",
+    Secondary = "secondary"
+}
+export interface TabItem<V extends string = string> {
+    value: V;
+    label: string;
+    /** Route inside the app: the tab becomes a router link. */
+    to?: string;
+    /** A count (formatted with the viewer's locale) or a short text after the label. */
+    badge?: number | string;
+    /** Left out of the row, as if absent (an entry the viewer has no right to). */
+    hidden?: boolean;
+}
+export interface TabsProps<V extends string = string> {
+    items: TabItem<V>[];
+    /** Value of the selected tab. */
+    value: V;
+    /** Called with the value of the tab the user activates (click, Enter, Space). */
+    onChange?(value: V): void;
+    variant: TabsVariant;
+    'aria-label': string;
+}
+/**
+ * A row of tabs (mock-up `.tabs`): the primary variant underlines the selected tab with the
+ * accent over a 1 px rule, the secondary one fills it with `bg.raised`. A tab with `to` is a
+ * router link (the page navigation of the account), any other a button. A `tablist` with one tab
+ * stop, on the selected tab: the arrow keys move the focus between tabs (wrapping), Home and End
+ * jump to the ends, Enter or Space activates. The row scrolls sideways when the tabs do not fit,
+ * with a fade at its end while tabs are left beyond it, and keeps the selected or focused tab in
+ * view, including when the row is first laid out or resized. Below 768 px every tab is 44 px tall.
+ */
+export declare function Tabs<V extends string>({ items, value, onChange, variant, 'aria-label': ariaLabel, }: TabsProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/Tabs/Tabs.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/structure/index.d.ts

@@ -1,8 +1,11 @@
 export * from './AppShell/AppShell';
 export * from './AppShell/app-shell.types';
+export * from './NotificationsMenu/NotificationsMenu';
+export * from './AccountMenu/AccountMenu';
 export * from './PageHeader/PageHeader';
 export * from './Section/Section';
 export * from './Surface/Surface';
 export * from './Toolbar/Toolbar';
 export * from './FilterBar/FilterBar';
 export * from './SplitView/SplitView';
+export * from './Tabs/Tabs';

package/dist/components/structure/test-support/structure-test-harness.d.ts

@@ -51,3 +51,9 @@ export declare const stateRules: (element: HTMLElement, state: "focus" | "hover"
 export declare const focusRingColor: (element: HTMLElement) => string | undefined;
 /** The outline color `element` draws now (a state class such as `Mui-focused` already set). */
 export declare const currentOutlineColor: (element: HTMLElement) => string;
+/**
+ * The value of `property` on `element` at a viewport of `width` pixels: the last declaration of
+ * the style rules that match the element, media rules included when their width query matches
+ * `width` (jsdom evaluates no media query, so `getComputedStyle` sees none of them).
+ */
+export declare const styleAt: (element: HTMLElement, width: number, property: string) => string;

package/dist/cookie-consent.js

@@ -1,5 +1,5 @@
-import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-BhSzVu8P.js";
-import { C as E } from "./CookieConsentSettings.component-DMEAuCVS.js";
+import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-B-PlGbFf.js";
+import { C as E } from "./CookieConsentSettings.component-DEGCDEJW.js";
 export {
   e as AbyssCookieConsentProvider,
   a as COOKIE_NAME,