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

package/catalog/pages/ChartTheme.tsx

@@ -0,0 +1,93 @@
+import { ResponsiveBar } from '@nivo/bar';
+import { styled, useTheme } from '@mui/material/styles';
+import { abyssNivoTheme } from '../../src/components/data/chart-theme';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { px } from '../../src/theme/components/shared';
+import { Example, Showcase } from '../frame';
+
+const MONTHS = [
+  'nov.',
+  'déc.',
+  'janv.',
+  'févr.',
+  'mars',
+  'avr.',
+  'mai',
+  'juin',
+  'juil.',
+  'août',
+  'sept.',
+  'oct.',
+];
+const INCOME = [
+  4960, 4640, 5600, 5120, 5280, 6400, 4880, 4400, 5440, 5760, 6000, 3520,
+];
+const EXPENSES = [
+  3840, 4160, 4400, 4800, 4000, 4640, 5760, 3920, 4560, 4880, 4320, 1760,
+];
+
+const FLOW = MONTHS.map((month, index) => ({
+  month,
+  Revenus: INCOME[index],
+  Dépenses: EXPENSES[index],
+}));
+
+const ChartBox = styled('div')(({ theme }) => ({
+  height: px(theme.design.space[10] * 5),
+  minWidth: 0,
+}));
+
+const euro = new Intl.NumberFormat('fr-FR', {
+  style: 'currency',
+  currency: 'EUR',
+  maximumFractionDigits: 0,
+});
+
+/** Banking income and expenses over 12 months, drawn with `abyssNivoTheme`. */
+export const ChartThemePage = () => {
+  const theme = useTheme();
+  const { tokens, space, radii } = theme.design;
+  return (
+    <Showcase
+      family="Données"
+      name="abyssNivoTheme"
+      description="Thème des graphiques Nivo : fond, axes, grille, infobulles et légendes lus dans les tokens, chiffres en mono."
+    >
+      <Example title="Revenus et dépenses · 12 mois">
+        <Surface padding={4}>
+          <ChartBox>
+            <ResponsiveBar
+              data={FLOW}
+              keys={['Revenus', 'Dépenses']}
+              indexBy="month"
+              groupMode="grouped"
+              theme={abyssNivoTheme(theme.design.mode)}
+              colors={({ id }) =>
+                id === 'Revenus' ? tokens['status.success'] : tokens.accent
+              }
+              margin={{
+                top: space[2],
+                right: space[2],
+                bottom: space[7],
+                left: space[10],
+              }}
+              padding={0.3}
+              innerPadding={space[1] / 2}
+              borderRadius={radii.sm / 2}
+              enableLabel={false}
+              axisLeft={{
+                format: (value) => euro.format(Number(value)),
+                tickSize: 0,
+                tickPadding: space[2],
+              }}
+              axisBottom={{ tickSize: 0, tickPadding: space[2] }}
+              valueFormat={(value) => euro.format(value)}
+              role="img"
+              ariaLabel="Revenus et dépenses sur 12 mois"
+            />
+          </ChartBox>
+        </Surface>
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/ColorField.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { ColorField } from '../../src/components/inputs/ColorField/ColorField';
+import { breakpoints } from '../../src/theme/tokens/primitives';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const ColorFieldPage = () => {
+  const { log } = useEventLog();
+  const { tokens } = useTheme().design;
+  // The swatches belong to the caller: here, the status colors of the current theme.
+  const swatches = [
+    tokens['status.info'],
+    tokens['status.success'],
+    tokens['status.warning'],
+    tokens['status.danger'],
+    tokens['status.highlight'],
+    tokens.accent,
+  ];
+  const [color, setColor] = useState(swatches[0]);
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="ColorField"
+      description="Couleur d'une étiquette ou d'une catégorie : pastilles fournies par l'appelant, ou six chiffres hexadécimaux."
+    >
+      <Example
+        title="Couleur de la catégorie « Logiciels & hébergement »"
+        maxWidth={breakpoints.sm}
+      >
+        <ColorField
+          label="Couleur"
+          value={color}
+          swatches={swatches}
+          onChange={(hex) => {
+            setColor(hex);
+            log(`couleur ${hex}`);
+          }}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/CommandPalette.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useMemo } from 'react';
+import Button from '@mui/material/Button';
+import {
+  CommandPaletteProvider,
+  useCommandPalette,
+  useRegisterCommands,
+} from '../../src/components/layers/CommandPalette/CommandPalette';
+import type { Command } from '../../src/components/layers/CommandPalette/CommandPalette';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const PaletteDemo = () => {
+  const { log } = useEventLog();
+  const palette = useCommandPalette();
+  const commands = useMemo<Command[]>(
+    () => [
+      {
+        id: 'transaction.create',
+        label: 'Ajouter une transaction',
+        group: 'Transactions',
+        shortcut: 'N',
+        run: () => log('ajouter une transaction'),
+      },
+      {
+        id: 'transaction.import',
+        label: 'Importer un CSV',
+        group: 'Transactions',
+        keywords: ['relevé'],
+        run: () => log('importer un CSV'),
+      },
+      {
+        id: 'transaction.export',
+        label: 'Exporter la sélection',
+        group: 'Transactions',
+        run: () => log('exporter'),
+      },
+      {
+        id: 'account.sync',
+        label: 'Synchroniser les comptes',
+        group: 'Comptes',
+        keywords: ['qonto', 'bnp'],
+        shortcut: 'S',
+        run: () => log('synchroniser'),
+      },
+      {
+        id: 'account.renew',
+        label: 'Renouveler la connexion Qonto',
+        group: 'Comptes',
+        run: () => log('renouveler'),
+      },
+      {
+        id: 'nav.vat',
+        label: 'Aller à TVA',
+        group: 'Navigation',
+        keywords: ['impôts'],
+        run: () => log('aller à TVA'),
+      },
+      {
+        id: 'nav.budgets',
+        label: 'Aller à Budgets',
+        group: 'Navigation',
+        run: () => log('aller à Budgets'),
+      },
+    ],
+    [log],
+  );
+  useRegisterCommands(commands);
+
+  // Opened on arrival, so the page shows the palette without a key press.
+  useEffect(() => {
+    palette.open();
+  }, [palette]);
+
+  return (
+    <Button variant="outlined" onClick={() => palette.open()}>
+      Ouvrir la palette · Ctrl+K
+    </Button>
+  );
+};
+
+export const CommandPalettePage = () => (
+  <CommandPaletteProvider>
+    <Showcase
+      family="Couches"
+      name="CommandPalette"
+      description="Palette de commandes (Ctrl+K) : recherche sans casse ni accents, groupes, raccourcis ; chaque commande a un identifiant stable."
+    >
+      <Example title="Commandes de Banking">
+        <PaletteDemo />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  </CommandPaletteProvider>
+);

package/catalog/pages/ConfirmDialog.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import {
+  ConfirmDialog,
+  ConfirmDialogTone,
+} from '../../src/components/layers/ConfirmDialog/ConfirmDialog';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const ConfirmDialogPage = () => {
+  const { log } = useEventLog();
+  const [open, setOpen] = useState(true);
+  return (
+    <Showcase
+      family="Couches"
+      name="ConfirmDialog"
+      description="Confirmation d'une action : en ton danger, la saisie exacte d'un texte peut être exigée ; une promesse garde le bouton en attente."
+    >
+      <Example title="Supprimer un dossier partagé">
+        <Button variant="outlined" color="error" onClick={() => setOpen(true)}>
+          Supprimer Impôts 2026
+        </Button>
+      </Example>
+      <LastEvent />
+      <ConfirmDialog
+        open={open}
+        tone={ConfirmDialogTone.Danger}
+        title="Supprimer le dossier Impôts 2026 ?"
+        body="Les 14 fichiers partent à la corbeille et les 2 liens publics sont désactivés. Le comptable perd l'accès immédiatement."
+        confirmLabel="Supprimer le dossier"
+        confirmationText="Impôts 2026"
+        onConfirm={() => {
+          setOpen(false);
+          log('supprimer');
+        }}
+        onCancel={() => {
+          setOpen(false);
+          log('annuler');
+        }}
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/DataTable.tsx

@@ -0,0 +1,208 @@
+import { useMemo, useState } from 'react';
+import DoneAllRounded from '@mui/icons-material/DoneAllRounded';
+import FileDownloadOutlined from '@mui/icons-material/FileDownloadOutlined';
+import ReportGmailerrorredOutlined from '@mui/icons-material/ReportGmailerrorredOutlined';
+import { DataTable } from '../../src/components/data/DataTable/DataTable';
+import type { DataColumn } from '../../src/components/data/DataTable/data-table.types';
+import {
+  SortDirection,
+  ColumnAlign,
+} from '../../src/components/data/DataTable/data-table.types';
+import { MethodBadge } from '../../src/components/meaning/MethodBadge/MethodBadge';
+import { SeverityBadge } from '../../src/components/meaning/SeverityBadge/SeverityBadge';
+import {
+  PageState,
+  PageStatus,
+} from '../../src/components/states/PageState/PageState';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { LOGS } from '../fixtures';
+import type { LogLine } from '../fixtures';
+import { HttpStatus, Mono } from '../parts';
+import { Density } from '../../src/theme/augmentation';
+import { ActionBarTone } from '../../src/components/mobile/ActionBar/ActionBar';
+
+const LOG_COLUMNS: DataColumn<LogLine>[] = [
+  {
+    id: 'time',
+    header: 'Heure',
+    cell: (log) => log.time,
+    width: 96,
+    mono: true,
+    sortable: true,
+  },
+  {
+    id: 'severity',
+    header: 'Sévérité',
+    cell: (log) => <SeverityBadge severity={log.severity} />,
+    width: 96,
+  },
+  {
+    id: 'method',
+    header: 'Méthode',
+    cell: (log) => <MethodBadge method={log.method} />,
+    width: 96,
+  },
+  {
+    id: 'route',
+    header: 'Route',
+    cell: (log) => <Mono>{log.route}</Mono>,
+    text: (log) => log.route,
+    width: '28%',
+  },
+  {
+    id: 'status',
+    header: 'Code',
+    cell: (log) => <HttpStatus code={log.status} />,
+    width: 72,
+    align: ColumnAlign.Right,
+    sortable: true,
+  },
+  { id: 'message', header: 'Message', cell: (log) => log.message },
+  {
+    id: 'service',
+    header: 'Service',
+    cell: (log) => log.service,
+    width: 120,
+    mono: true,
+  },
+];
+
+const LOG_MOBILE_ROW = {
+  primary: (log: LogLine) => log.message,
+  secondary: (log: LogLine) => (
+    <Mono>
+      {log.time} · {log.method} {log.route} · {log.status}
+    </Mono>
+  ),
+  trailing: (log: LogLine) => <SeverityBadge severity={log.severity} />,
+};
+
+const NO_LOGS = (
+  <PageState
+    status={PageStatus.Empty}
+    skeleton={null}
+    empty={{
+      title: 'Aucun log sur la période',
+      description:
+        'Élargissez la fenêtre de temps ou retirez un filtre de sévérité.',
+    }}
+  >
+    {null}
+  </PageState>
+);
+
+const sortLogs = (
+  logs: LogLine[],
+  columnId: string,
+  direction: SortDirection,
+): LogLine[] => {
+  const factor = direction === SortDirection.Asc ? 1 : -1;
+  return [...logs].sort((a, b) =>
+    columnId === 'status'
+      ? (a.status - b.status) * factor
+      : a.time.localeCompare(b.time) * factor,
+  );
+};
+
+/** The Monitor log table: sortable, selectable, with bulk actions and a 200-character route. */
+export const LogTable = ({ density }: { density?: Density }) => {
+  const { log } = useEventLog();
+  const [selected, setSelected] = useState<string[]>(['log-01', 'log-03']);
+  const [sort, setSort] = useState<{
+    columnId: string;
+    direction: SortDirection;
+  }>({
+    columnId: 'time',
+    direction: SortDirection.Desc,
+  });
+  const rows = useMemo(
+    () => sortLogs(LOGS, sort.columnId, sort.direction),
+    [sort],
+  );
+
+  return (
+    <DataTable
+      columns={LOG_COLUMNS}
+      rows={rows}
+      getRowId={(line) => line.id}
+      density={density}
+      loading={false}
+      empty={NO_LOGS}
+      mobileRow={LOG_MOBILE_ROW}
+      onRowClick={(line) => log(`ouvrir ${line.id}`)}
+      sort={{
+        ...sort,
+        onChange: (columnId) =>
+          setSort((current) => ({
+            columnId,
+            direction:
+              current.columnId === columnId &&
+              current.direction === SortDirection.Desc
+                ? SortDirection.Asc
+                : SortDirection.Desc,
+          })),
+      }}
+      selection={{
+        selected,
+        onChange: setSelected,
+        bulkActions: [
+          {
+            id: 'acknowledge',
+            label: 'Acquitter',
+            icon: <DoneAllRounded />,
+            onPress: () => log(`acquitter ${selected.length}`),
+          },
+          {
+            id: 'incident',
+            label: 'Créer un incident',
+            icon: <ReportGmailerrorredOutlined />,
+            tone: ActionBarTone.Danger,
+            onPress: () => log(`incident ${selected.length}`),
+          },
+          {
+            id: 'export',
+            label: 'Exporter',
+            icon: <FileDownloadOutlined />,
+            onPress: () => log(`exporter ${selected.length}`),
+          },
+        ],
+      }}
+    />
+  );
+};
+
+export const DataTablePage = () => (
+  <Showcase
+    family="Données"
+    name="DataTable"
+    description="Table triable et sélectionnable, actions en masse au-dessus. Sous 768 px elle devient une liste à deux niveaux et les actions passent dans l'ActionBar."
+  >
+    <Example title="Logs Monitor · billing-api, gateway, exports · deux lignes sélectionnées">
+      <LogTable />
+    </Example>
+    <Example title="Densité compacte">
+      <LogTable density={Density.Compact} />
+    </Example>
+    <Example title="Chargement">
+      <DataTable
+        columns={LOG_COLUMNS}
+        rows={[]}
+        getRowId={(line) => line.id}
+        loading
+        empty={NO_LOGS}
+        mobileRow={LOG_MOBILE_ROW}
+      />
+    </Example>
+    <Example title="Aucune ligne">
+      <DataTable
+        columns={LOG_COLUMNS}
+        rows={[]}
+        getRowId={(line) => line.id}
+        loading={false}
+        empty={NO_LOGS}
+        mobileRow={LOG_MOBILE_ROW}
+      />
+    </Example>
+    <LastEvent />
+  </Showcase>
+);

package/catalog/pages/DateField.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { DateField } from '../../src/components/inputs/DateField/DateField';
+import { breakpoints } from '../../src/theme/tokens/primitives';
+import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { formatShortDate } from '../fixtures';
+
+export const DateFieldPage = () => {
+  const { log } = useEventLog();
+  const [valueDate, setValueDate] = useState<Date | null>(new Date(2026, 9, 5));
+  const [due, setDue] = useState<Date | null>(null);
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="DateField"
+      description="Date saisie au clavier ou au calendrier ; seule une date complète entre les bornes est émise."
+    >
+      <Columns>
+        <Example title="Date de valeur" maxWidth={breakpoints.sm}>
+          <DateField
+            label="Date de valeur"
+            value={valueDate}
+            onChange={(next) => {
+              setValueDate(next);
+              log(next ? `date ${formatShortDate(next)}` : 'date vide');
+            }}
+          />
+        </Example>
+        <Example title="Bornée à octobre 2026" maxWidth={breakpoints.sm}>
+          <DateField
+            label="Échéance"
+            value={due}
+            onChange={setDue}
+            minDate={new Date(2026, 9, 1)}
+            maxDate={new Date(2026, 9, 31)}
+          />
+        </Example>
+        <Example title="Erreur de l'hôte" maxWidth={breakpoints.sm}>
+          <DateField
+            label="Date de déclaration"
+            value={new Date(2026, 4, 28)}
+            onChange={() => undefined}
+            error="La déclaration 2042 est déjà signée à cette date."
+          />
+        </Example>
+      </Columns>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/DateRangeField.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { DateRangeField } from '../../src/components/inputs/DateRangeField/DateRangeField';
+import type { DateRange } from '../../src/components/inputs/DateRangeField/DateRangeField';
+import { breakpoints } from '../../src/theme/tokens/primitives';
+import { Example, Showcase } from '../frame';
+
+const TODAY = new Date(2026, 9, 6);
+
+const daysBefore = (days: number): Date =>
+  new Date(TODAY.getFullYear(), TODAY.getMonth(), TODAY.getDate() - days);
+
+const PRESETS = [
+  {
+    id: '7d',
+    label: '7 jours',
+    range: () => ({ from: daysBefore(7), to: TODAY }),
+  },
+  {
+    id: '30d',
+    label: '30 jours',
+    range: () => ({ from: daysBefore(30), to: TODAY }),
+  },
+  {
+    id: 'month',
+    label: 'Ce mois',
+    range: () => ({
+      from: new Date(TODAY.getFullYear(), TODAY.getMonth(), 1),
+      to: TODAY,
+    }),
+  },
+  {
+    id: 'year',
+    label: 'Exercice',
+    range: () => ({ from: new Date(TODAY.getFullYear(), 0, 1), to: TODAY }),
+  },
+];
+
+export const DateRangeFieldPage = () => {
+  const [range, setRange] = useState<DateRange>({
+    from: daysBefore(30),
+    to: TODAY,
+  });
+  const [empty, setEmpty] = useState<DateRange>({ from: null, to: null });
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="DateRangeField"
+      description="Période en deux dates, avec préréglages ; une fin antérieure au début n'est pas émise."
+    >
+      <Example
+        title="Période des transactions, avec préréglages"
+        maxWidth={breakpoints.md}
+      >
+        <DateRangeField
+          label="Période"
+          value={range}
+          onChange={setRange}
+          presets={PRESETS}
+        />
+      </Example>
+      <Example title="Sans préréglage, vide" maxWidth={breakpoints.md}>
+        <DateRangeField
+          label="Fenêtre des logs"
+          value={empty}
+          onChange={setEmpty}
+        />
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/Drawer.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import {
+  Drawer,
+  DrawerAnchor,
+} from '../../src/components/layers/Drawer/Drawer';
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import {
+  StatusBadge,
+  StatusTone,
+} from '../../src/components/meaning/StatusBadge/StatusBadge';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+import { formatSignedEuro } from '../fixtures';
+
+export const DrawerPage = () => {
+  const { log } = useEventLog();
+  const [open, setOpen] = useState(true);
+  return (
+    <Showcase
+      family="Couches"
+      name="Drawer"
+      description="Panneau latéral modal : détail d'une ligne sans quitter la liste ; focus piégé, Échap ferme."
+    >
+      <Example title="Détail d'une transaction">
+        <Button variant="outlined" onClick={() => setOpen(true)}>
+          Ouvrir la transaction
+        </Button>
+      </Example>
+      <LastEvent />
+      <Drawer
+        open={open}
+        onClose={() => {
+          setOpen(false);
+          log('fermer');
+        }}
+        anchor={DrawerAnchor.Right}
+        title={`OVHcloud · ${formatSignedEuro(-64.79)}`}
+      >
+        <Row>
+          <StatusBadge tone={StatusTone.Info} label="Récurrente" />
+          <StatusBadge tone={StatusTone.Neutral} label="Prélèvement" />
+          <StatusBadge tone={StatusTone.Warning} label="Pièce manquante" dot />
+        </Row>
+        <KeyValueList
+          items={[
+            {
+              id: 'amount',
+              label: 'Montant',
+              value: formatSignedEuro(-64.79),
+              mono: true,
+            },
+            { id: 'account', label: 'Compte', value: 'Qonto · Pro' },
+            {
+              id: 'value-date',
+              label: 'Date de valeur',
+              value: '05/10/2026',
+              mono: true,
+            },
+            {
+              id: 'booking-date',
+              label: 'Date comptable',
+              value: '06/10/2026',
+              mono: true,
+            },
+            {
+              id: 'category',
+              label: 'Catégorie',
+              value: 'Logiciels & hébergement',
+            },
+            { id: 'code', label: 'Code comptable', value: '6135', mono: true },
+            { id: 'source', label: 'Source', value: 'Agrégateur' },
+          ]}
+        />
+      </Drawer>
+    </Showcase>
+  );
+};