@abyss-project/commons-front-core 6.0.0 → 7.0.0

package/catalog/pages/Section.tsx

@@ -0,0 +1,77 @@
+import Button from '@mui/material/Button';
+import ArrowForwardRounded from '@mui/icons-material/ArrowForwardRounded';
+import { Section } from '../../src/components/structure/Section/Section';
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { ACCOUNTS, LONG_NAV_LABEL, formatEuro } from '../fixtures';
+import { AccountCard } from '../parts';
+
+export const SectionPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Structure"
+      name="Section"
+      description="Bloc titré d'une page : titre de 16 px, compteur en mono, actions alignées à droite."
+    >
+      <Example title="Avec compteur et action">
+        <Section
+          title="Comptes"
+          count={ACCOUNTS.length}
+          actions={
+            <Button
+              variant="text"
+              endIcon={<ArrowForwardRounded />}
+              onClick={() => log('voir tous les comptes')}
+            >
+              Voir tout
+            </Button>
+          }
+        >
+          <Columns>
+            {ACCOUNTS.map((account) => (
+              <AccountCard key={account.id} account={account} />
+            ))}
+          </Columns>
+        </Section>
+      </Example>
+      <Example title="Sans action, contenu en liste clé-valeur">
+        <Section title="Disponible à dépenser">
+          <KeyValueList
+            items={[
+              {
+                id: 'real',
+                label: 'Solde réel',
+                value: formatEuro(14214.62),
+                mono: true,
+              },
+              {
+                id: 'due',
+                label: "À payer d'ici 30 jours",
+                value: formatEuro(-2410),
+                mono: true,
+              },
+              {
+                id: 'tax',
+                label: 'Impôts mis de côté',
+                value: formatEuro(-2962.44),
+                mono: true,
+              },
+              {
+                id: 'envelopes',
+                label: 'Enveloppes',
+                value: formatEuro(-2000),
+                mono: true,
+              },
+            ]}
+          />
+        </Section>
+      </Example>
+      <Example title="Titre de 200 caractères sans espace">
+        <Section title={LONG_NAV_LABEL} count={12}>
+          <LastEvent />
+        </Section>
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/SegmentedControl.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { SegmentedControl } from '../../src/components/inputs/SegmentedControl/SegmentedControl';
+import type { SegmentedOption } from '../../src/components/inputs/SegmentedControl/SegmentedControl';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { TRANSACTION_VIEWS } from './FilterBar';
+
+type Period = '30d' | '12m' | 'fy';
+type Layout = 'grid' | 'list';
+
+const PERIOD_OPTIONS: SegmentedOption<Period>[] = [
+  { value: '30d', label: '30 jours' },
+  { value: '12m', label: '12 mois' },
+  { value: 'fy', label: 'Exercice' },
+];
+
+const LAYOUT_OPTIONS: SegmentedOption<Layout>[] = [
+  { value: 'grid', label: 'Grille' },
+  { value: 'list', label: 'Liste' },
+];
+
+export const SegmentedControlPage = () => {
+  const { log } = useEventLog();
+  const [view, setView] =
+    useState<(typeof TRANSACTION_VIEWS)[number]['value']>('to-identify');
+  const [period, setPeriod] = useState<Period>('12m');
+  const [layout, setLayout] = useState<Layout>('list');
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="SegmentedControl"
+      description="Choix exclusif entre quelques vues : un seul arrêt de tabulation, flèches, Début et Fin, compteur facultatif."
+    >
+      <Example title="Vues des transactions, avec compteurs">
+        <SegmentedControl
+          ariaLabel="Vue des transactions"
+          options={TRANSACTION_VIEWS}
+          value={view}
+          onChange={(next) => {
+            setView(next);
+            log(`vue ${next}`);
+          }}
+        />
+      </Example>
+      <Example title="Période d'un graphique">
+        <SegmentedControl
+          ariaLabel="Période"
+          options={PERIOD_OPTIONS}
+          value={period}
+          onChange={(next) => setPeriod(next)}
+        />
+      </Example>
+      <Example title="Disposition">
+        <SegmentedControl
+          ariaLabel="Disposition"
+          options={LAYOUT_OPTIONS}
+          value={layout}
+          onChange={(next) => setLayout(next)}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/SeverityBadge.tsx

@@ -0,0 +1,17 @@
+import { SeverityBadge } from '../../src/components/meaning/SeverityBadge/SeverityBadge';
+import { LogSeverity } from '../../src/theme/tokens/domain';
+import { Example, Showcase } from '../frame';
+
+export const SeverityBadgePage = () => (
+  <Showcase
+    family="Sens"
+    name="SeverityBadge"
+    description="Sévérité d'un log ; error et fatal partagent le rouge, seul le libellé les distingue."
+  >
+    <Example title="Les cinq sévérités" framed>
+      {Object.values(LogSeverity).map((severity) => (
+        <SeverityBadge key={severity} severity={severity} />
+      ))}
+    </Example>
+  </Showcase>
+);

package/catalog/pages/Sparkline.tsx

@@ -0,0 +1,52 @@
+import { Sparkline } from '../../src/components/data/Sparkline/Sparkline';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { space } from '../../src/theme/tokens/primitives';
+import { Columns, Example, Showcase } from '../frame';
+import { ACCOUNTS } from '../fixtures';
+
+const STORAGE_GROWTH = [
+  40, 41, 41, 42, 44, 44, 45, 45, 46, 48, 48, 49, 50, 50, 52, 55, 56, 56, 57,
+  58, 60, 60, 61, 63, 64, 64, 66, 68, 70, 72,
+];
+
+const NET_FLOW = [14, 6, 15, 4, 16, 22, -11, 6, 11, 11, 21, 22];
+
+export const SparklinePage = () => (
+  <Showcase
+    family="Données"
+    name="Sparkline"
+    description="Barres depuis une ligne zéro, couleur par token ; les valeurs négatives passent en status.danger."
+  >
+    <Columns>
+      {ACCOUNTS.map((account) => (
+        <Example key={account.id} title={`${account.name} · 12 mois`}>
+          <Surface padding={4}>
+            <Sparkline
+              values={account.trend}
+              label={`Solde de ${account.name} sur 12 mois`}
+            />
+          </Surface>
+        </Example>
+      ))}
+    </Columns>
+    <Example title="Stockage Cloud sur 30 jours, 48 px, ton info">
+      <Surface padding={4}>
+        <Sparkline
+          values={STORAGE_GROWTH}
+          tone="status.info"
+          height={space[9]}
+          label="Évolution du stockage sur 30 jours"
+        />
+      </Surface>
+    </Example>
+    <Example title="Net mensuel, valeurs négatives, 64 px">
+      <Surface padding={4}>
+        <Sparkline
+          values={NET_FLOW}
+          height={space[10]}
+          label="Net mensuel sur 12 mois"
+        />
+      </Surface>
+    </Example>
+  </Showcase>
+);

package/catalog/pages/SplitView.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { SplitView } from '../../src/components/structure/SplitView/SplitView';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import { ScanBadge } from '../../src/components/meaning/ScanBadge/ScanBadge';
+import { px } from '../../src/theme/components/shared';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { FILES } from '../fixtures';
+import type { CloudFile } from '../fixtures';
+import { FileName } from '../parts';
+
+const FileList = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: px(theme.design.space[2]),
+  minWidth: 0,
+}));
+
+const Detail = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: px(theme.design.space[4]),
+  padding: px(theme.design.space[4]),
+  minWidth: 0,
+}));
+
+const FileDetail = ({ file }: { file: CloudFile }) => (
+  <Detail>
+    <FileName file={file} />
+    <KeyValueList
+      items={[
+        { id: 'size', label: 'Taille', value: file.size, mono: true },
+        { id: 'modified', label: 'Modifié', value: file.modified },
+        { id: 'share', label: 'Partage', value: file.share ?? '—' },
+        {
+          id: 'scan',
+          label: 'Analyse',
+          value: file.scan ? (
+            <ScanBadge verdict={file.scan.verdict} detail={file.scan.detail} />
+          ) : (
+            '—'
+          ),
+        },
+      ]}
+    />
+  </Detail>
+);
+
+export const SplitViewPage = () => {
+  const { log } = useEventLog();
+  const files = FILES.filter((file) => file.kind !== 'folder');
+  const [openId, setOpenId] = useState<string | null>(files[0].id);
+  const open = files.find((file) => file.id === openId);
+
+  return (
+    <Showcase
+      family="Structure"
+      name="SplitView"
+      description="Contenu principal et panneau de détail : à côté dès 1200 px, dessous entre 768 et 1200 px, en feuille sous 768 px."
+    >
+      <Example title="Fichiers d'Impôts 2026 et détail du fichier ouvert">
+        <SplitView
+          primary={
+            <FileList>
+              {files.map((file) => (
+                <Surface
+                  key={file.id}
+                  component="button"
+                  interactive
+                  padding={3}
+                  aria-pressed={file.id === openId}
+                  onClick={() => {
+                    setOpenId(file.id);
+                    log(`ouvrir ${file.name}`);
+                  }}
+                >
+                  <FileName file={file} />
+                </Surface>
+              ))}
+            </FileList>
+          }
+          secondary={open ? <FileDetail file={open} /> : undefined}
+          onCloseSecondary={() => {
+            setOpenId(null);
+            log('fermer le détail');
+          }}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/StatTile.tsx

@@ -0,0 +1,75 @@
+import { StatTile } from '../../src/components/data/StatTile/StatTile';
+import { Columns, Example, Showcase } from '../frame';
+import {
+  BANKING_TOTALS,
+  formatEuro,
+  formatInteger,
+  formatPercentDelta,
+  formatSignedEuro,
+} from '../fixtures';
+
+export const BankingStatTiles = () => (
+  <Columns>
+    <StatTile
+      label="Entrées"
+      value={formatSignedEuro(BANKING_TOTALS.income)}
+      delta={{ value: formatSignedEuro(620), tone: 'status.success' }}
+      trend={[42, 48, 40, 55, 51, 60, 58, 49, 62, 66, 58, 71]}
+    />
+    <StatTile
+      label="Sorties"
+      value={formatSignedEuro(BANKING_TOTALS.outcome)}
+      delta={{ value: formatPercentDelta(-0.12), tone: 'status.success' }}
+      trend={[30, 35, 33, 31, 38, 36, 34, 30, 29, 33, 31, 27]}
+    />
+    <StatTile
+      label="Net"
+      value={formatSignedEuro(BANKING_TOTALS.net)}
+      delta={{ value: "taux d'épargne 54 %", tone: 'text.muted' }}
+    />
+    <StatTile
+      label="Pièces manquantes"
+      value={formatInteger(BANKING_TOTALS.missingReceipts)}
+      delta={{ value: 'dépenses pro de septembre', tone: 'status.warning' }}
+      href="/rapprochement"
+    />
+  </Columns>
+);
+
+export const StatTilePage = () => (
+  <Showcase
+    family="Données"
+    name="StatTile"
+    description="Chiffre clé : libellé, valeur en 26 px, unité, variation colorée par un token et tendance. Avec un lien, toute la tuile est cliquable."
+  >
+    <Example title="Transactions d'octobre (la dernière tuile est un lien)">
+      <BankingStatTiles />
+    </Example>
+    <Example title="Avec unité">
+      <Columns>
+        <StatTile
+          label="Stockage"
+          value="3,2"
+          unit="Go"
+          delta={{ value: 'sur 10 Go', tone: 'text.muted' }}
+        />
+        <StatTile
+          label="Fichiers"
+          value={formatInteger(3210)}
+          delta={{ value: '1 412 documents', tone: 'text.muted' }}
+        />
+        <StatTile
+          label="Corbeille"
+          value={formatInteger(412)}
+          unit="Mo"
+          delta={{ value: 'vidée à 30 j', tone: 'text.muted' }}
+        />
+        <StatTile
+          label="Solde total"
+          value={formatEuro(14214.62)}
+          delta={{ value: formatPercentDelta(0.041), tone: 'status.success' }}
+        />
+      </Columns>
+    </Example>
+  </Showcase>
+);

package/catalog/pages/StatusBadge.tsx

@@ -0,0 +1,33 @@
+import {
+  StatusBadge,
+  StatusTone,
+} from '../../src/components/meaning/StatusBadge/StatusBadge';
+import { Example, Showcase } from '../frame';
+
+const TONES: Array<{ tone: StatusTone; label: string }> = [
+  { tone: StatusTone.Success, label: 'Actif' },
+  { tone: StatusTone.Warning, label: 'Expire dans 6 j' },
+  { tone: StatusTone.Danger, label: 'Doublon possible' },
+  { tone: StatusTone.Info, label: 'Synchronisation' },
+  { tone: StatusTone.Highlight, label: 'Nouveau' },
+  { tone: StatusTone.Neutral, label: 'Terminé' },
+];
+
+export const StatusBadgePage = () => (
+  <Showcase
+    family="Sens"
+    name="StatusBadge"
+    description="État d'un objet : six tons sémantiques, avec ou sans point."
+  >
+    <Example title="Sans point" framed>
+      {TONES.map(({ tone, label }) => (
+        <StatusBadge key={tone} tone={tone} label={label} />
+      ))}
+    </Example>
+    <Example title="Avec point" framed>
+      {TONES.map(({ tone, label }) => (
+        <StatusBadge key={tone} tone={tone} label={label} dot />
+      ))}
+    </Example>
+  </Showcase>
+);

package/catalog/pages/Surface.tsx

@@ -0,0 +1,69 @@
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import { ScanBadge } from '../../src/components/meaning/ScanBadge/ScanBadge';
+import { ScanVerdict } from '../../src/theme/tokens/domain';
+import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { ACCOUNTS, FILES } from '../fixtures';
+import { AccountCard, FileName } from '../parts';
+
+export const SurfacePage = () => {
+  const { log } = useEventLog();
+  const file = FILES[2];
+  return (
+    <Showcase
+      family="Structure"
+      name="Surface"
+      description="Fond bordé d'un contenu. Interactive, elle prend le survol, le pointeur, l'anneau de focus et Entrée ou Espace."
+    >
+      <Example title="Statique, quatre pas d'espacement">
+        <Columns>
+          <Surface padding={4}>
+            <KeyValueList
+              items={[
+                {
+                  id: 'created',
+                  label: 'Créé le',
+                  value: '12/09/2026 18:04',
+                  mono: true,
+                },
+                {
+                  id: 'modified',
+                  label: 'Modifié le',
+                  value: '03/10/2026 09:41',
+                  mono: true,
+                },
+                {
+                  id: 'hash',
+                  label: 'Empreinte',
+                  value: 'sha256 9f2c…a71e',
+                  mono: true,
+                },
+                {
+                  id: 'scan',
+                  label: 'Analyse',
+                  value: <ScanBadge verdict={ScanVerdict.Clean} />,
+                },
+              ]}
+            />
+          </Surface>
+          <Surface padding={3}>
+            <FileName file={file} />
+          </Surface>
+        </Columns>
+      </Example>
+      <Example title="Interactives : un clic ouvre le compte">
+        <Columns>
+          {ACCOUNTS.map((account) => (
+            <AccountCard
+              key={account.id}
+              account={account}
+              interactive
+              onOpen={() => log(`ouvrir ${account.name}`)}
+            />
+          ))}
+        </Columns>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/SwipeDeck.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import {
+  SwipeDeck,
+  SwipeDecision,
+} from '../../src/components/mobile/SwipeDeck/SwipeDeck';
+import {
+  PageState,
+  PageStatus,
+} from '../../src/components/states/PageState/PageState';
+import { ScanBadge } from '../../src/components/meaning/ScanBadge/ScanBadge';
+import { px } from '../../src/theme/components/shared';
+import { breakpoints, fontWeights } from '../../src/theme/tokens/primitives';
+import { ScanVerdict } from '../../src/theme/tokens/domain';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { SUBMISSIONS } from '../fixtures';
+import type { Submission } from '../fixtures';
+import { PhotoPlaceholder } from '../parts';
+
+const Card = styled('div')({
+  display: 'grid',
+  gridTemplateRows: 'minmax(0, 1fr) auto',
+  height: '100%',
+});
+
+const Caption = styled('div')(({ theme }) => {
+  const { space, tokens, typeScale } = theme.design;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: px(space[1]),
+    padding: px(space[4]),
+    fontSize: px(typeScale.body),
+    color: tokens['text.secondary'],
+    '& b': {
+      fontSize: px(typeScale.bodyMobile),
+      fontWeight: fontWeights.semibold,
+      color: tokens['text.primary'],
+    },
+  };
+});
+
+const SubmissionCard = ({
+  submission,
+  index,
+}: {
+  submission: Submission;
+  index: number;
+}) => (
+  <Card>
+    <PhotoPlaceholder index={index} />
+    <Caption>
+      <b>Proposée par {submission.author}</b>
+      <span>
+        {submission.origin} · envoyée {submission.sentAgo}
+      </span>
+      <span>
+        {submission.device} · {submission.takenAt} · {submission.size}
+      </span>
+      <ScanBadge verdict={ScanVerdict.Clean} />
+    </Caption>
+  </Card>
+);
+
+interface Decided {
+  item: Submission;
+  decision: SwipeDecision;
+}
+
+/** The moderation queue of an event: the host owns the queue and the undo history. */
+export const ModerationDeck = () => {
+  const { log } = useEventLog();
+  const [queue, setQueue] = useState<Submission[]>(SUBMISSIONS);
+  const [history, setHistory] = useState<Decided[]>([]);
+  const approved = history.filter(
+    (entry) => entry.decision === SwipeDecision.Approve,
+  ).length;
+
+  return (
+    <SwipeDeck
+      items={queue}
+      getId={(item) => item.id}
+      renderCard={(item) => (
+        <SubmissionCard submission={item} index={SUBMISSIONS.indexOf(item)} />
+      )}
+      onDecide={(item, decision) => {
+        setQueue((current) => current.filter((entry) => entry.id !== item.id));
+        setHistory((current) => [...current, { item, decision }]);
+        log(`${decision} ${item.id}`);
+      }}
+      onUndo={() => {
+        const last = history[history.length - 1];
+        if (last === undefined) {
+          return;
+        }
+        setHistory(history.slice(0, -1));
+        setQueue((current) => [last.item, ...current]);
+        log(`annuler ${last.item.id}`);
+      }}
+      canUndo={history.length > 0}
+      onApproveAll={(remaining) => {
+        setQueue([]);
+        setHistory((current) => [
+          ...current,
+          ...remaining.map((item) => ({
+            item,
+            decision: SwipeDecision.Approve,
+          })),
+        ]);
+        log(`tout approuver ${remaining.length}`);
+      }}
+      emptyState={
+        <PageState
+          status={PageStatus.Empty}
+          skeleton={null}
+          empty={{
+            title: 'File de modération vide',
+            description: 'Les prochaines photos des invités apparaîtront ici.',
+          }}
+        >
+          {null}
+        </PageState>
+      }
+      progress={{ done: history.length, total: SUBMISSIONS.length, approved }}
+    />
+  );
+};
+
+export const SwipeDeckPage = () => (
+  <Showcase
+    family="Mobile"
+    name="SwipeDeck"
+    description="Pile de modération : glisser à droite approuve, à gauche refuse ; flèches et Ctrl+Z au clavier ; « Tout approuver » vide la file."
+  >
+    <Example
+      title="Séminaire Acme 2026 · photos des invités"
+      maxWidth={breakpoints.sm}
+    >
+      <ModerationDeck />
+    </Example>
+    <LastEvent />
+  </Showcase>
+);