@abyss-project/commons-front-core 13.3.0 → 14.0.0

package/catalog/captures-plan.ts

@@ -35,7 +35,8 @@ export type CaptureState =
   | 'list-open'
   | 'calendar-open'
   | 'panel-open'
-  | 'menu-open';
+  | 'menu-open'
+  | 'settings-open';
 
 /** File name suffix of each state. */
 const STATE_SUFFIX: Record<CaptureState, string> = {
@@ -45,6 +46,7 @@ const STATE_SUFFIX: Record<CaptureState, string> = {
   'calendar-open': '-calendrier',
   'panel-open': '-ouvert',
   'menu-open': '-ouvert',
+  'settings-open': '-reglages',
 };
 
 /** The states shown beyond arrival: what a closed control hides (options, calendar, sheet). */
@@ -56,6 +58,7 @@ const EXTRA_STATES: Record<string, CaptureState> = {
   NotificationsMenu: 'panel-open',
   AccountMenu: 'panel-open',
   ValueMenu: 'menu-open',
+  CookieConsent: 'settings-open',
 };
 
 export interface Capture {

package/catalog/catalog-entries.ts

@@ -65,6 +65,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('SwipeDeck', 'mobile', 'swipe-deck', RESPONSIVE),
   entry('PageState', 'states', 'page-state', { mobileCapture: true }),
   entry('Callout', 'states', 'callout', RESPONSIVE),
+  entry('ErrorBoundary', 'states', 'error-boundary', { mobileCapture: true }),
   entry('DataTable', 'data', 'data-table', RESPONSIVE),
   entry('KeyValueList', 'data', 'key-value-list'),
   entry('StatTile', 'data', 'stat-tile'),
@@ -91,6 +92,9 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
     mobileCapture: true,
   }),
   entry('QRCodeModal', 'business', 'qr-code-modal', { mobileCapture: true }),
+  entry('CookieConsent', 'business', 'cookie-consent', {
+    mobileCapture: true,
+  }),
   entry('Modal', 'layers', 'modal', { mobileCapture: true }),
   entry('ConfirmDialog', 'layers', 'confirm-dialog'),
   entry('ConfirmDialogWarning', 'layers', 'confirm-dialog-warning'),
@@ -98,7 +102,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('PreviewDrawer', 'layers', 'preview-drawer', { mobileCapture: true }),
   entry('Menu', 'layers', 'menu'),
   entry('AnchoredPanel', 'layers', 'anchored-panel', { mobileCapture: true }),
-  entry('Toast', 'layers', 'toast'),
+  entry('Toast', 'layers', 'toast', { mobileCapture: true }),
   entry('CommandPalette', 'layers', 'command-palette'),
   entry('ProductTour', 'layers', 'product-tour', { mobileCapture: true }),
   entry('RichSelect', 'inputs', 'rich-select'),
@@ -107,6 +111,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('ColorField', 'inputs', 'color-field'),
   entry('SegmentedControl', 'inputs', 'segmented-control'),
   entry('FormField', 'inputs', 'form-field'),
+  entry('PasswordField', 'inputs', 'password-field', RESPONSIVE),
   entry('NumberField', 'inputs', 'number-field'),
   entry('SettingsRow', 'inputs', 'settings-row', RESPONSIVE),
   entry('CopyField', 'inputs', 'copy-field', RESPONSIVE),

package/catalog/expected-error.ts

@@ -0,0 +1,6 @@
+/**
+ * Marker carried by an error a catalog page throws on purpose (the error screen's own page): React
+ * in development reports an error its boundary caught as a page error too, and the captures spec
+ * ignores only the errors that carry it.
+ */
+export const EXPECTED_CATALOG_ERROR = '[catalog: expected]';

package/catalog/pages/CookieConsent.tsx

@@ -0,0 +1,38 @@
+import Button from '@mui/material/Button';
+import { CookieConsentBanner } from '../../src/components/business/CookieConsent/CookieConsentBanner';
+import type { UseCookieConsent } from '../../src/hooks/use-cookie-consent.hook';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const yesNo = (value: boolean): string => (value ? 'oui' : 'non');
+
+export const CookieConsentPage = () => {
+  const { log } = useEventLog();
+  const api: UseCookieConsent = {
+    consent: null,
+    isResolved: true,
+    acceptAll: () => log('tout accepter'),
+    rejectAll: () => log('tout refuser'),
+    save: (choices) =>
+      log(
+        `enregistrer · audience ${yesNo(choices.analytics)}, marketing ${yesNo(
+          choices.marketing,
+        )}`,
+      ),
+    reset: () => log('réinitialiser'),
+  };
+  return (
+    <Showcase
+      family="Métier"
+      name="CookieConsent"
+      description="Bandeau de consentement en bas à droite (pleine largeur sous 768 px) : accepter et refuser pèsent autant ; « Personnaliser » ouvre la fenêtre de réglages, et le bandeau s'efface tant qu'elle est ouverte."
+    >
+      <Example title="Bandeau et fenêtre de réglages">
+        <Button variant="outlined" disabled>
+          Le bandeau est posé sur la page
+        </Button>
+      </Example>
+      <LastEvent />
+      <CookieConsentBanner api={api} />
+    </Showcase>
+  );
+};

package/catalog/pages/ErrorBoundary.tsx

@@ -0,0 +1,22 @@
+import { EXPECTED_CATALOG_ERROR } from '../expected-error';
+import { ErrorBoundary } from '../../src/components/states/ErrorBoundary/ErrorBoundary';
+
+/**
+ * A child whose render fails, so the boundary shows its screen on arrival. The marker lets the
+ * captures spec tell this deliberate error from a real one (it stays in the folded detail).
+ */
+const Broken = (): never => {
+  throw new Error(
+    `Impossible de lire « account.plan » : la valeur est absente. ${EXPECTED_CATALOG_ERROR}`,
+  );
+};
+
+/**
+ * The root error screen at full frame (`fullHeight`), as the apps mount it above their router: it
+ * is the page itself, with no catalog frame around it.
+ */
+export const ErrorBoundaryPage = () => (
+  <ErrorBoundary appName="abyss-main" fullHeight>
+    <Broken />
+  </ErrorBoundary>
+);

package/catalog/pages/PasswordField.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import type { ChangeEvent } from 'react';
+import { PasswordField } from '../../src/components/inputs/PasswordField/PasswordField';
+import { Columns, Example, Showcase } from '../frame';
+
+export const PasswordFieldPage = () => {
+  const [current, setCurrent] = useState('correct horse');
+  const [next, setNext] = useState('');
+  const [confirmation, setConfirmation] = useState('abc');
+  const bind =
+    (set: (value: string) => void) => (event: ChangeEvent<HTMLInputElement>) =>
+      set(event.target.value);
+  return (
+    <Showcase
+      family="Saisie"
+      name="PasswordField"
+      description="Champ mot de passe sur FormField : libellé, aide et erreur comme les autres champs, et un bouton de 44 px, accessible au clavier, qui affiche ou masque la saisie."
+    >
+      <Example title="Saisie masquée, aide, erreur">
+        <Columns>
+          <PasswordField
+            label="Mot de passe actuel"
+            name="current"
+            autoComplete="current-password"
+            required
+            value={current}
+            onChange={bind(setCurrent)}
+          />
+          <PasswordField
+            label="Nouveau mot de passe"
+            name="next"
+            autoComplete="new-password"
+            help="Au moins 10 caractères. Une phrase est plus sûre qu'un mot compliqué."
+            required
+            value={next}
+            onChange={bind(setNext)}
+          />
+          <PasswordField
+            label="Confirmer le nouveau mot de passe"
+            name="confirmation"
+            autoComplete="new-password"
+            error="Les deux mots de passe ne correspondent pas."
+            required
+            value={confirmation}
+            onChange={bind(setConfirmation)}
+          />
+        </Columns>
+      </Example>
+      <Example title="Désactivé">
+        <Columns>
+          <PasswordField
+            label="Mot de passe"
+            name="locked"
+            disabled
+            value="verrouillé"
+            onChange={() => undefined}
+          />
+        </Columns>
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/Toast.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import Button from '@mui/material/Button';
 import {
   ToastProvider,
+  toast,
   useToast,
   ToastTone,
 } from '../../src/components/layers/Toast/Toast';
@@ -16,8 +17,14 @@ const TONE_LABELS: Record<ToastTone, string> = {
   [ToastTone.Danger]: 'erreur',
 };
 
+/** A progress notification, shown at 40 %: the page shows it next to the four tones. */
+const showProgress = () => {
+  const id = toast.progress('Envoi de 12 fichiers…');
+  toast.update(id, { progress: 0.4 });
+};
+
 const ToastDemo = () => {
-  const toast = useToast();
+  const toasts = useToast();
   const { log } = useEventLog();
   const shown = useRef(false);
 
@@ -58,8 +65,9 @@ const ToastDemo = () => {
       return;
     }
     shown.current = true;
-    samples.forEach((sample) => toast.show(sample));
-  }, [samples, toast]);
+    samples.forEach((sample) => toasts.show(sample));
+    showProgress();
+  }, [samples, toasts]);
 
   return (
     <Row>
@@ -67,11 +75,14 @@ const ToastDemo = () => {
         <Button
           key={sample.tone}
           variant="outlined"
-          onClick={() => toast.show(sample)}
+          onClick={() => toasts.show(sample)}
         >
           Notifier · {TONE_LABELS[sample.tone]}
         </Button>
       ))}
+      <Button variant="outlined" onClick={showProgress}>
+        Notifier · progression
+      </Button>
     </Row>
   );
 };
@@ -81,9 +92,9 @@ export const ToastPage = () => (
     <Showcase
       family="Couches"
       name="Toast"
-      description="Notification passagère en bas à droite : quatre tons, une action facultative, retenue au survol ou au focus."
+      description="Notification passagère en bas à droite, au-dessus du bandeau de cookies quand il est là : quatre tons, une action facultative, retenue au survol ou au focus, et une notification de progression."
     >
-      <Example title="Les quatre tons, deux avec action">
+      <Example title="Les quatre tons, deux avec action, et une progression">
         <ToastDemo />
       </Example>
       <LastEvent />

package/catalog/pages/index.ts

@@ -32,6 +32,9 @@ import { ExpressionSearchPage } from './ExpressionSearch';
 import { FacetPanelPage } from './FacetPanel';
 import { FilterBarPage } from './FilterBar';
 import { FormFieldPage } from './FormField';
+import { PasswordFieldPage } from './PasswordField';
+import { ErrorBoundaryPage } from './ErrorBoundary';
+import { CookieConsentPage } from './CookieConsent';
 import { ImportButtonPage } from './ImportButton';
 import { ImportFromCloudModalPage } from './ImportFromCloudModal';
 import { InfectedDownloadModalPage } from './InfectedDownloadModal';
@@ -106,6 +109,9 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   FacetPanel: FacetPanelPage,
   FilterBar: FilterBarPage,
   FormField: FormFieldPage,
+  PasswordField: PasswordFieldPage,
+  ErrorBoundary: ErrorBoundaryPage,
+  CookieConsent: CookieConsentPage,
   ImportButton: ImportButtonPage,
   ImportFromCloudModal: ImportFromCloudModalPage,
   InfectedDownloadModal: InfectedDownloadModalPage,

package/catalog/specs/captures.spec.ts

@@ -39,6 +39,16 @@ const REACH: Record<
     await expect(menu).toBeVisible();
     await expect(menu.getByRole('menuitem')).toHaveCount(6);
   },
+  // The cookie banner's settings: the banner leaves while the sheet is open.
+  'settings-open': async (page) => {
+    await page.getByRole('button', { name: 'Personnaliser' }).click();
+    await expect(
+      page.getByRole('dialog', { name: 'Personnaliser mes cookies' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('dialog', { name: 'Vos préférences de cookies' }),
+    ).toHaveCount(0);
+  },
   // The first top bar trigger of the page: the notifications bell or the account avatar.
   'panel-open': async (page) => {
     await page.locator('[aria-haspopup]').first().click();

package/catalog/specs/catalog-page.ts

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test';
 import { catalogPath } from '../catalog-entries';
 import type { CatalogTheme } from '../catalog-entries';
+import { EXPECTED_CATALOG_ERROR } from '../expected-error';
 
 /** Longest enter transition of the design system (`durations.slow`, 260 ms), with margin. */
 const SETTLE_MS = 400;
@@ -16,7 +17,11 @@ export const openCatalogPage = async (
   viewport: { width: number; height: number },
 ): Promise<void> => {
   const errors: string[] = [];
-  page.on('pageerror', (error) => errors.push(error.message));
+  page.on('pageerror', (error) => {
+    if (!error.message.includes(EXPECTED_CATALOG_ERROR)) {
+      errors.push(error.message);
+    }
+  });
   await page.setViewportSize(viewport);
   await page.goto(catalogPath(name, theme));
   await page.waitForLoadState('networkidle');

package/catalog/specs/write-capture-index.ts

@@ -26,6 +26,7 @@ const STATE_LABEL: Record<CaptureState, string> = {
   'calendar-open': ', calendrier ouvert',
   'panel-open': ', panneau ouvert',
   'menu-open': ', menu ouvert',
+  'settings-open': ', réglages ouverts',
 };
 
 const describe = (capture: Capture): string =>