@abyss-project/commons-front-core 6.1.0 → 7.1.0

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

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { ToolKind } from '../../../theme/tokens/domain';
+export declare enum SpaceKind {
+    Personal = "personal",
+    Organization = "organization"
+}
+export interface Space {
+    id: string;
+    name: string;
+    kind: SpaceKind;
+    avatarUrl?: string;
+}
+export interface NavItem {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    /** Route inside the app, followed by the host router. */
+    href: string;
+    count?: number;
+    /** The count needs action: shown as a red pill (a red dot in the rail). */
+    urgent?: boolean;
+}
+export interface NavSection {
+    id: string;
+    title?: string;
+    items: NavItem[];
+}
+export interface AppShellProduct {
+    kind: ToolKind;
+    name: string;
+    /** The product icon (gradient `brand.gradientFrom` → `brand.gradientTo`), sized by the shell. */
+    icon: ReactNode;
+}
+export interface AppShellSpaces {
+    current: Space;
+    spaces: Space[];
+    onChange(id: string): void;
+}
+export interface AppShellMainSpaceLink {
+    /** Absolute URL of the main Abyss front: it leaves the app, so it is a plain link. */
+    href: string;
+    label: string;
+}
+/** A footer entry of the navigation (plan, family, account). */
+export interface AppShellFooterItem {
+    id: string;
+    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. */
+    href: string;
+}
+export interface AppShellProps {
+    product: AppShellProduct;
+    space: AppShellSpaces;
+    nav: NavSection[];
+    activeItemId: string;
+    mainSpaceLink?: AppShellMainSpaceLink;
+    /** Right side of the top bar (help, notifications, account). */
+    topbar?: ReactNode;
+    /** Bottom of the navigation (plan, family, account), under a hairline. */
+    footer?: AppShellFooterItem[];
+    children: ReactNode;
+}
+/** The three forms of the shell: full sidebar (≥ `lg`), icon rail (`md`–`lg`), drawer (< `md`). */
+export declare enum ShellLayout {
+    Sidebar = "sidebar",
+    Rail = "rail",
+    Drawer = "drawer"
+}

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface FilterBarSearch {
+    value: string;
+    onChange(value: string): void;
+    /** Placeholder, also the accessible name of the field. */
+    placeholder: string;
+}
+export interface FilterBarProps {
+    search?: FilterBarSearch;
+    /** The filter controls (selects, segmented controls, chips), inline from `md` up. */
+    filters: ReactNode;
+    /** Number of filters that differ from their default: shown on the mobile button, enables reset. */
+    activeCount: number;
+    onReset?(): void;
+}
+/**
+ * The search and filter row above a list (mock-up `.fbar`). From `md` up the filters sit inline
+ * next to the search field; below `md` the search field stays and the filters move into a bottom
+ * drawer, opened by a button that carries the number of active filters.
+ */
+export declare function FilterBar({ search, filters, activeCount, onReset, }: FilterBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface PageHeaderBreadcrumb {
+    label: string;
+    /** Route inside the app; the last crumb (current page) usually has none. */
+    href?: string;
+}
+export interface PageHeaderProps {
+    title: string;
+    subtitle?: ReactNode;
+    breadcrumbs?: PageHeaderBreadcrumb[];
+    /** Product or entity icon shown before the title (sized by the header). */
+    icon?: ReactNode;
+    actions?: ReactNode;
+}
+/**
+ * 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.
+ */
+export declare function PageHeader({ title, subtitle, breadcrumbs, icon, actions, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface SectionProps {
+    title: string;
+    /** Number of items in the section, shown next to the title in mono. */
+    count?: number;
+    /** Actions aligned to the right of the title (a link, a button, a `Toolbar`). */
+    actions?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * A titled block of a page (mock-up `.sec`, `.sech`): section title, optional count and actions,
+ * then its content. The `<section>` is named by its title.
+ */
+export declare function Section({ title, count, actions, children }: SectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface SplitViewProps {
+    primary: ReactNode;
+    /** Detail shown next to (≥ `lg`), under (`md`–`lg`) or over (< `md`, drawer) the primary content. */
+    secondary?: ReactNode;
+    /** Width of the secondary panel from `lg` up, in px. */
+    secondaryWidth?: number;
+    /** Adds a close button to the panel; below `md` also called by Escape and the backdrop. */
+    onCloseSecondary?(): void;
+}
+/**
+ * A primary content with an optional secondary panel (detail, inspector). From `lg` up the panel
+ * sits on the right at `secondaryWidth`; from `md` to `lg` it renders under the primary content;
+ * below `md` it opens in a bottom drawer for as long as `secondary` is set.
+ */
+export declare function SplitView({ primary, secondary, secondaryWidth, onCloseSecondary, }: SplitViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { ElementType, HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+export type SurfacePadding = 0 | 2 | 3 | 4;
+export type SurfaceProps = {
+    /** Clickable surface: hover border, pointer, focus ring, and Enter/Space on a non-native element. */
+    interactive?: boolean;
+    /** Inner spacing, as a step of the spacing scale (`theme.design.space`). */
+    padding?: SurfacePadding;
+    /** Element or component rendered (`'div'` by default; `'a'`, `'button'`, a router `Link`…). */
+    component?: ElementType;
+    children: ReactNode;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * The bordered surface of the Graphite composition (mock-up `.card`): `bg.surface`, 1 px
+ * `border.subtle`, radius `md`, never a shadow. Interactive, it becomes a keyboard-reachable
+ * control.
+ */
+export declare const Surface: ForwardRefExoticComponent<{
+    /** Clickable surface: hover border, pointer, focus ring, and Enter/Space on a non-native element. */
+    interactive?: boolean;
+    /** Inner spacing, as a step of the spacing scale (`theme.design.space`). */
+    padding?: SurfacePadding;
+    /** Element or component rendered (`'div'` by default; `'a'`, `'button'`, a router `Link`…). */
+    component?: ElementType;
+    children: ReactNode;
+} & HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface ToolbarProps {
+    children: ReactNode;
+    /** Tighter gaps and the compact control height, for a toolbar inside a card header. */
+    dense?: boolean;
+}
+/**
+ * A row of actions or controls (mock-up `.acts`, `.fbar`): wraps instead of overflowing. It adds
+ * no role: every child keeps its own place in the `Tab` order.
+ */
+export declare function Toolbar({ children, dense }: ToolbarProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/structure/structure-layout.d.ts

@@ -0,0 +1,13 @@
+/** Width of the full desktop sidebar (≥ `lg`), as in the validated mock-up (`.app`). */
+export declare const SIDEBAR_WIDTH = 256;
+/** Width of the tablet icon rail (`md` to `lg`): the largest step of the spacing scale. */
+export declare const RAIL_WIDTH: 64;
+/** Height of the sticky top bar, as in the mock-up (`.top`): 48 + 4. */
+export declare const TOPBAR_HEIGHT: number;
+/** Default width of the `SplitView` secondary panel, as in the mock-up (`.grid-main`). */
+export declare const SECONDARY_PANEL_WIDTH = 360;
+/** Narrowest search field before the filter bar wraps, as in the mock-up (`.fbar .input`). */
+export declare const SEARCH_MIN_WIDTH = 220;
+/** Largest share of the viewport a mobile drawer or bottom panel covers. */
+export declare const DRAWER_MAX_VIEWPORT_SHARE = "85vw";
+export declare const SHEET_MAX_VIEWPORT_SHARE = "90vh";

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

@@ -0,0 +1,53 @@
+import { ReactElement } from 'react';
+import { RenderResult } from '@testing-library/react';
+import { Theme } from '@mui/material/styles';
+import { Density, ThemeMode } from '../../../theme';
+export declare const THEME_MODES: ThemeMode[];
+/** Viewport widths of the three layouts (ADR-0166 §3, paliers). */
+export declare const VIEWPORT: {
+    readonly desktop: 1440;
+    readonly tablet: 1024;
+    readonly mobile: 390;
+};
+/**
+ * jsdom has no `matchMedia`, and MUI's `useMediaQuery` never matches without it: this answers the
+ * breakpoint queries for a viewport of `width` pixels.
+ */
+export declare const setViewportWidth: (width: number) => void;
+export declare const restoreViewport: () => void;
+export interface StructureRenderOptions {
+    mode?: ThemeMode;
+    density?: Density;
+    width?: number;
+    route?: string;
+}
+export interface StructureRenderResult extends RenderResult {
+    theme: Theme;
+}
+/** Renders `ui` under the design system theme, the French messages and a router. */
+export declare const renderStructure: (ui: ReactElement, { mode, density, width, route, }?: StructureRenderOptions) => StructureRenderResult;
+/** Prints the router location, to observe a navigation. */
+export declare const LocationProbe: () => import("react/jsx-runtime").JSX.Element;
+/** The color `value` resolves to in the computed style of jsdom (`rgb(…)` or `rgba(…)`). */
+export declare const cssColor: (value: string) => string;
+/** The elements `Tab` walks through, in document order. */
+export declare const tabbableElements: () => HTMLElement[];
+/**
+ * One press of `Tab`: the key goes to the focused element, then focus moves to the next tabbable
+ * element, as a browser does (jsdom moves no focus by itself).
+ */
+export declare const pressTab: () => HTMLElement;
+/**
+ * One press of `Enter` on `element`: the key event, then the click a browser synthesizes on a
+ * native button or link when no handler prevented it.
+ */
+export declare const pressEnter: (element: HTMLElement) => void;
+/**
+ * The declarations of the style rules that apply to `element` in a state jsdom cannot enter
+ * (`:focus-visible`, `:hover`): each rule whose selector, state removed, matches the element.
+ */
+export declare const stateRules: (element: HTMLElement, state: "focus" | "hover") => CSSStyleDeclaration[];
+/** The outline color drawn on `element` when it holds the keyboard focus. */
+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;

package/dist/cookie-consent.d.ts

@@ -1,2 +1,2 @@
-export * from './components/CookieConsent/index'
+export * from './legacy/components/CookieConsent/index'
 export {}

package/dist/cookie-consent.js

@@ -1,17 +1,18 @@
-import { A as s, c as a, C as n, a as C, D as i, R as t, V as r, d as A, f as k, r as c, e as l, u as D, b as E, w as I } from "./CookieConsentSettings.component-3Z3YnI96.js";
+import { A as s, C as a, a as n, u as C } from "./CookieConsentSettings.component-BdBT72qy.js";
+import { C as t, D as r, R as A, V as k, c, f as l, r as f, a as u, u as D, w as E } from "./AbyssModal.component-DVIzX2ko.js";
 export {
   s as AbyssCookieConsentProvider,
-  a as COOKIE_NAME,
-  n as CookieConsentBanner,
-  C as CookieConsentSettings,
-  i as DEFAULT_PRIVACY_HREF,
-  t as ReconcileAction,
-  r as VALIDITY_DAYS,
-  A as clearCookie,
-  k as flattenTranslations,
-  c as readCookie,
-  l as reconcile,
-  D as useAbyssCookieConsent,
-  E as useCookieConsent,
-  I as writeCookie
+  t as COOKIE_NAME,
+  a as CookieConsentBanner,
+  n as CookieConsentSettings,
+  r as DEFAULT_PRIVACY_HREF,
+  A as ReconcileAction,
+  k as VALIDITY_DAYS,
+  c as clearCookie,
+  l as flattenTranslations,
+  f as readCookie,
+  u as reconcile,
+  C as useAbyssCookieConsent,
+  D as useCookieConsent,
+  E as writeCookie
 };