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

package/catalog/pages/FilterBar.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { FilterBar } from '../../src/components/structure/FilterBar/FilterBar';
+import { SegmentedControl } from '../../src/components/inputs/SegmentedControl/SegmentedControl';
+import { RichSelect } from '../../src/components/inputs/RichSelect/RichSelect';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { ACCOUNT_OPTIONS } from '../fixtures';
+
+type TransactionView = 'all' | 'to-identify' | 'uncategorized' | 'duplicates';
+
+export const TRANSACTION_VIEWS = [
+  { value: 'all' as const, label: 'Toutes', count: 1284 },
+  { value: 'to-identify' as const, label: 'À identifier', count: 7 },
+  { value: 'uncategorized' as const, label: 'Non catégorisées', count: 12 },
+  { value: 'duplicates' as const, label: 'Doublons', count: 2 },
+];
+
+/**
+ * The transaction filters of the Banking mock-up: search and view, plus the accounts select when
+ * `withAccounts` is set.
+ */
+export const TransactionFilters = ({
+  withAccounts = false,
+}: {
+  withAccounts?: boolean;
+}) => {
+  const { log } = useEventLog();
+  const [search, setSearch] = useState('');
+  const [view, setView] = useState<TransactionView>('all');
+  const [accounts, setAccounts] = useState<string[]>([]);
+  const activeCount = (view === 'all' ? 0 : 1) + (accounts.length > 0 ? 1 : 0);
+
+  return (
+    <FilterBar
+      search={{
+        value: search,
+        onChange: setSearch,
+        placeholder: 'Rechercher une transaction…',
+      }}
+      activeCount={activeCount}
+      onReset={() => {
+        setView('all');
+        setAccounts([]);
+        log('réinitialiser les filtres');
+      }}
+      filters={
+        <>
+          <SegmentedControl
+            ariaLabel="Vue"
+            options={TRANSACTION_VIEWS}
+            value={view}
+            onChange={(next) => {
+              setView(next);
+              log(`vue ${next}`);
+            }}
+          />
+          {withAccounts && (
+            <RichSelect
+              label="Comptes"
+              multiple
+              options={ACCOUNT_OPTIONS}
+              value={accounts}
+              onChange={(next) =>
+                setAccounts(Array.isArray(next) ? next : [next])
+              }
+            />
+          )}
+        </>
+      }
+    />
+  );
+};
+
+export const FilterBarPage = () => (
+  <Showcase
+    family="Structure"
+    name="FilterBar"
+    description="Recherche et filtres sur une ligne au-dessus de 768 px, les listes en forme compacte (libellé masqué) ; en dessous, un bouton « Filtres (n) » ouvre une feuille où elles retrouvent leur libellé."
+  >
+    <Example title="Transactions : recherche et vue">
+      <TransactionFilters />
+    </Example>
+    <Example title="Transactions : recherche, vue et sélection de comptes">
+      <TransactionFilters withAccounts />
+    </Example>
+    <LastEvent />
+  </Showcase>
+);

package/catalog/pages/InfectedDownloadModal.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import { InfectedDownloadModal } from '../../src/components/business/InfectedDownloadModal/InfectedDownloadModal';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { FILES } from '../fixtures';
+
+const INFECTED = FILES.find((file) => file.threats !== undefined) ?? FILES[0];
+
+export const InfectedDownloadModalPage = () => {
+  const { log } = useEventLog();
+  const [open, setOpen] = useState(true);
+  return (
+    <Showcase
+      family="Métier"
+      name="InfectedDownloadModal"
+      description="Avertit avant le téléchargement d'un fichier infecté ; le focus démarre sur « Annuler »."
+    >
+      <Example title={INFECTED.name}>
+        <Button variant="outlined" color="error" onClick={() => setOpen(true)}>
+          Télécharger {INFECTED.name}
+        </Button>
+      </Example>
+      <LastEvent />
+      <InfectedDownloadModal
+        open={open}
+        fileName={INFECTED.name}
+        threats={INFECTED.threats ?? []}
+        onCancel={() => {
+          setOpen(false);
+          log('annuler');
+        }}
+        onDownloadAnyway={() => {
+          setOpen(false);
+          log('télécharger quand même');
+        }}
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/KeyValueList.tsx

@@ -0,0 +1,113 @@
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import {
+  StatusBadge,
+  StatusTone,
+} from '../../src/components/meaning/StatusBadge/StatusBadge';
+import { ScanBadge } from '../../src/components/meaning/ScanBadge/ScanBadge';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { ScanVerdict } from '../../src/theme/tokens/domain';
+import { Columns, Example, Showcase } from '../frame';
+import { LONG_ROUTE, formatEuro } from '../fixtures';
+
+export const KeyValueListPage = () => (
+  <Showcase
+    family="Données"
+    name="KeyValueList"
+    description="Paires libellé-valeur d'un détail, valeurs en mono pour les montants, identifiants et dates."
+  >
+    <Columns>
+      <Example title="Transaction OVHcloud">
+        <Surface padding={4}>
+          <KeyValueList
+            items={[
+              { 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: 'vat',
+                label: 'TVA déductible',
+                value: `${formatEuro(10.8)} · 20 %`,
+                mono: true,
+              },
+              {
+                id: 'counterpart',
+                label: 'Contrepartie',
+                value: 'FR76 3000 4…2187',
+                mono: true,
+              },
+              {
+                id: 'state',
+                label: 'Pièce',
+                value: (
+                  <StatusBadge
+                    tone={StatusTone.Warning}
+                    label="Manquante"
+                    dot
+                  />
+                ),
+              },
+            ]}
+          />
+        </Surface>
+      </Example>
+      <Example title="Fichier avis-imposition-2026.pdf">
+        <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} />,
+              },
+              {
+                id: 'link',
+                label: 'Lien de l’export',
+                value: LONG_ROUTE,
+                mono: true,
+              },
+            ]}
+          />
+        </Surface>
+      </Example>
+    </Columns>
+  </Showcase>
+);

package/catalog/pages/Menu.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from 'react';
+import Button from '@mui/material/Button';
+import ContentCopyOutlined from '@mui/icons-material/ContentCopyOutlined';
+import DeleteOutlineOutlined from '@mui/icons-material/DeleteOutlineOutlined';
+import DriveFileMoveOutlined from '@mui/icons-material/DriveFileMoveOutlined';
+import EditOutlined from '@mui/icons-material/EditOutlined';
+import IosShareOutlined from '@mui/icons-material/IosShareOutlined';
+import LockOutlined from '@mui/icons-material/LockOutlined';
+import MoreHorizRounded from '@mui/icons-material/MoreHorizRounded';
+import {
+  Menu,
+  MenuItemTone,
+  MenuSeparator,
+} from '../../src/components/layers/Menu/Menu';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const MenuPage = () => {
+  const { log } = useEventLog();
+  const trigger = useRef<HTMLButtonElement>(null);
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+
+  // Opened on arrival, so the page shows the menu without a click.
+  useEffect(() => {
+    setAnchor(trigger.current);
+  }, []);
+
+  const select = (action: string) => () => log(action);
+
+  return (
+    <Showcase
+      family="Couches"
+      name="Menu"
+      description="Menu d'actions : icône, raccourci, ton danger, entrées désactivées sautées par les flèches."
+    >
+      <Example title="Actions d'un fichier">
+        <Button
+          ref={trigger}
+          variant="outlined"
+          startIcon={<MoreHorizRounded />}
+          onClick={(event) => setAnchor(event.currentTarget)}
+        >
+          avis-imposition-2026.pdf
+        </Button>
+      </Example>
+      <LastEvent />
+      <Menu
+        anchorEl={anchor}
+        open={anchor !== null}
+        onClose={() => setAnchor(null)}
+        items={[
+          {
+            id: 'share',
+            label: 'Partager',
+            icon: <IosShareOutlined />,
+            shortcut: 'Ctrl+Maj+S',
+            onSelect: select('partager'),
+          },
+          {
+            id: 'rename',
+            label: 'Renommer',
+            icon: <EditOutlined />,
+            shortcut: 'F2',
+            onSelect: select('renommer'),
+          },
+          {
+            id: 'copy',
+            label: 'Copier le lien',
+            icon: <ContentCopyOutlined />,
+            shortcut: 'Ctrl+L',
+            onSelect: select('copier'),
+          },
+          {
+            id: 'move',
+            label: 'Déplacer',
+            icon: <DriveFileMoveOutlined />,
+            onSelect: select('déplacer'),
+          },
+          {
+            id: 'encrypt',
+            label: 'Déjà chiffré',
+            icon: <LockOutlined />,
+            disabled: true,
+            onSelect: select('chiffrer'),
+          },
+          MenuSeparator.Divider,
+          {
+            id: 'trash',
+            label: 'Mettre à la corbeille',
+            icon: <DeleteOutlineOutlined />,
+            tone: MenuItemTone.Danger,
+            shortcut: 'Suppr',
+            onSelect: select('corbeille'),
+          },
+        ]}
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/MethodBadge.tsx

@@ -0,0 +1,17 @@
+import { MethodBadge } from '../../src/components/meaning/MethodBadge/MethodBadge';
+import { HttpMethod } from '../../src/theme/tokens/domain';
+import { Example, Showcase } from '../frame';
+
+export const MethodBadgePage = () => (
+  <Showcase
+    family="Sens"
+    name="MethodBadge"
+    description="Méthode HTTP d'une requête journalisée, en mono, à largeur fixe pour aligner les routes."
+  >
+    <Example title="Les sept méthodes" framed>
+      {Object.values(HttpMethod).map((method) => (
+        <MethodBadge key={method} method={method} />
+      ))}
+    </Example>
+  </Showcase>
+);

package/catalog/pages/MobileShell.tsx

@@ -0,0 +1,180 @@
+import { useState } from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import AccountCircleOutlined from '@mui/icons-material/AccountCircleOutlined';
+import AddAPhotoOutlined from '@mui/icons-material/AddAPhotoOutlined';
+import AutoStoriesOutlined from '@mui/icons-material/AutoStoriesOutlined';
+import CelebrationOutlined from '@mui/icons-material/CelebrationOutlined';
+import HomeOutlined from '@mui/icons-material/HomeOutlined';
+import SearchRounded from '@mui/icons-material/SearchRounded';
+import { MobileShell } from '../../src/components/mobile/MobileShell/MobileShell';
+import { BottomSheet } from '../../src/components/mobile/BottomSheet/BottomSheet';
+import { Section } from '../../src/components/structure/Section/Section';
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import {
+  StatusBadge,
+  StatusTone,
+} from '../../src/components/meaning/StatusBadge/StatusBadge';
+import { px } from '../../src/theme/components/shared';
+import { LastEvent, useEventLog } from '../frame';
+import { TouchList } from '../parts';
+
+export const MEMORIES_TABS = [
+  { id: 'home', label: 'Accueil', icon: <HomeOutlined /> },
+  { id: 'events', label: 'Événements', icon: <CelebrationOutlined /> },
+  { id: 'memories', label: 'Souvenirs', icon: <AutoStoriesOutlined /> },
+  { id: 'me', label: 'Moi', icon: <AccountCircleOutlined />, badge: 5 },
+];
+
+const TAB_TITLES: Record<string, string> = {
+  home: 'Accueil',
+  events: 'Événements',
+  memories: 'Souvenirs',
+  me: 'Moi',
+};
+
+const Content = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: px(theme.design.space[6]),
+  paddingTop: px(theme.design.space[2]),
+}));
+
+const Initials = styled(Avatar)(({ theme }) => ({
+  width: px(theme.design.space[8]),
+  height: px(theme.design.space[8]),
+  fontSize: px(theme.design.typeScale.small),
+  backgroundColor: theme.design.tokens['bg.raised'],
+  color: theme.design.tokens['text.primary'],
+}));
+
+const BIRTHDAYS = [
+  {
+    id: 'lea',
+    initials: 'LM',
+    name: 'Léa',
+    detail: '32 ans · 18 oct.',
+    when: 'J-12',
+  },
+  {
+    id: 'papa',
+    initials: 'PA',
+    name: 'Papa',
+    detail: '64 ans · 2 nov.',
+    when: 'J-27',
+  },
+  {
+    id: 'ines',
+    initials: 'IN',
+    name: 'Inès',
+    detail: '5 ans · 14 nov.',
+    when: 'J-39',
+  },
+];
+
+/** The Memories app frame: large title, back, four tabs around the central "add a photo" action. */
+export const MobileShellPage = () => {
+  const { log } = useEventLog();
+  const [tab, setTab] = useState('home');
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  return (
+    <MobileShell
+      title={TAB_TITLES[tab]}
+      largeTitle
+      onBack={() => log('retour')}
+      actions={
+        <IconButton aria-label="Rechercher" onClick={() => log('rechercher')}>
+          <SearchRounded />
+        </IconButton>
+      }
+      tabs={MEMORIES_TABS}
+      activeTab={tab}
+      onTabChange={(id) => {
+        setTab(id);
+        log(`onglet ${id}`);
+      }}
+      mainAction={{
+        icon: <AddAPhotoOutlined />,
+        label: 'Ajouter des photos',
+        onPress: () => log('ajouter des photos'),
+      }}
+      onRefresh={async () => log('actualiser')}
+    >
+      <Content>
+        <Section
+          title="Séminaire Acme 2026"
+          actions={
+            <StatusBadge tone={StatusTone.Danger} label="En cours" dot />
+          }
+        >
+          <KeyValueList
+            items={[
+              { id: 'media', label: 'Médias', value: '248', mono: true },
+              {
+                id: 'contributors',
+                label: 'Contributeurs',
+                value: '31',
+                mono: true,
+              },
+              { id: 'moderation', label: 'À modérer', value: '6', mono: true },
+            ]}
+          />
+          <Button variant="contained" onClick={() => setSheetOpen(true)}>
+            Options de l&apos;événement
+          </Button>
+        </Section>
+        <Section title="Prochains anniversaires" count={BIRTHDAYS.length}>
+          <TouchList
+            items={BIRTHDAYS.map((birthday) => ({
+              id: birthday.id,
+              leading: <Initials>{birthday.initials}</Initials>,
+              title: birthday.name,
+              subtitle: birthday.detail,
+              trailing: (
+                <StatusBadge
+                  tone={StatusTone.Highlight}
+                  label={birthday.when}
+                />
+              ),
+            }))}
+            onOpen={(id) => log(`ouvrir ${id}`)}
+          />
+        </Section>
+        <LastEvent />
+      </Content>
+      <BottomSheet
+        open={sheetOpen}
+        onClose={() => {
+          setSheetOpen(false);
+          log('feuille fermée');
+        }}
+        title="Séminaire Acme 2026"
+      >
+        <KeyValueList
+          items={[
+            {
+              id: 'public',
+              label: 'Dépôt public',
+              value: 'Activé · QR + lien',
+            },
+            { id: 'moderation', label: 'Modération', value: 'Activée' },
+            {
+              id: 'scan',
+              label: 'Analyse antivirus',
+              value: 'Probe · 3 en cours',
+            },
+            {
+              id: 'storage',
+              label: "Stockage de l'événement",
+              value: '18,6 Go',
+              mono: true,
+            },
+          ]}
+        />
+      </BottomSheet>
+    </MobileShell>
+  );
+};

package/catalog/pages/Modal.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import { Modal } from '../../src/components/layers/Modal/Modal';
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import { RichSelect } from '../../src/components/inputs/RichSelect/RichSelect';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { CATEGORY_OPTIONS, formatEuro } from '../fixtures';
+
+export const ModalPage = () => {
+  const { log } = useEventLog();
+  const [open, setOpen] = useState(true);
+  const [category, setCategory] = useState('software');
+  return (
+    <Showcase
+      family="Couches"
+      name="Modal"
+      description="Fenêtre modale : titre, description, corps qui défile, pied d'actions. Sous 768 px elle devient une feuille du bas."
+    >
+      <Example title="Catégoriser une transaction">
+        <Button variant="contained" onClick={() => setOpen(true)}>
+          Catégoriser
+        </Button>
+      </Example>
+      <LastEvent />
+      <Modal
+        open={open}
+        onClose={() => {
+          setOpen(false);
+          log('fermer');
+        }}
+        title="Catégoriser la transaction"
+        description="OVHcloud · PRLV SEPA OVH SAS · 06/10/2026"
+        actions={
+          <>
+            <Button variant="outlined" onClick={() => setOpen(false)}>
+              Annuler
+            </Button>
+            <Button
+              variant="contained"
+              onClick={() => {
+                setOpen(false);
+                log(`catégorie ${category}`);
+              }}
+            >
+              Enregistrer
+            </Button>
+          </>
+        }
+      >
+        <KeyValueList
+          items={[
+            {
+              id: 'amount',
+              label: 'Montant',
+              value: formatEuro(-64.79),
+              mono: true,
+            },
+            { id: 'account', label: 'Compte', value: 'Qonto · Pro' },
+          ]}
+        />
+        <RichSelect
+          label="Catégorie"
+          options={CATEGORY_OPTIONS}
+          value={category}
+          onChange={(next) => setCategory(Array.isArray(next) ? next[0] : next)}
+        />
+      </Modal>
+    </Showcase>
+  );
+};

package/catalog/pages/PageHeader.tsx

@@ -0,0 +1,84 @@
+import Button from '@mui/material/Button';
+import AddRounded from '@mui/icons-material/AddRounded';
+import FileDownloadOutlined from '@mui/icons-material/FileDownloadOutlined';
+import UploadOutlined from '@mui/icons-material/UploadOutlined';
+import { PageHeader } from '../../src/components/structure/PageHeader/PageHeader';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { ToolKind } from '../../src/theme/tokens/domain';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { BANKING_TOTALS, LONG_PAGE_TITLE, formatInteger } from '../fixtures';
+
+export const PageHeaderPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Structure"
+      name="PageHeader"
+      description="En-tête de page : fil d'Ariane, titre unique à 22 px, sous-titre et actions. Les actions passent sous le titre en dessous de 768 px."
+    >
+      <Example title="Page de liste, avec icône produit et trois actions">
+        <PageHeader
+          title="Transactions"
+          icon={<ToolIcon tool={ToolKind.Banking} size={32} />}
+          subtitle={`${formatInteger(
+            BANKING_TOTALS.transactionCount,
+          )} transactions sur 4 comptes · octobre 2026`}
+          breadcrumbs={[
+            { label: 'Banking', href: '/accueil' },
+            { label: 'Transactions' },
+          ]}
+          actions={
+            <>
+              <Button
+                variant="outlined"
+                startIcon={<UploadOutlined />}
+                onClick={() => log('importer un CSV')}
+              >
+                Importer un CSV
+              </Button>
+              <Button
+                variant="outlined"
+                startIcon={<FileDownloadOutlined />}
+                onClick={() => log('exporter')}
+              >
+                Exporter
+              </Button>
+              <Button
+                variant="contained"
+                startIcon={<AddRounded />}
+                onClick={() => log('ajouter')}
+              >
+                Ajouter
+              </Button>
+            </>
+          }
+        />
+      </Example>
+      <Example title="Titre de 200 caractères sans espace">
+        <PageHeader
+          title={LONG_PAGE_TITLE}
+          subtitle="Pièce importée le 6 octobre 2026 · 3 pages"
+          breadcrumbs={[
+            { label: 'Cloud', href: '/fichiers' },
+            { label: 'Mon espace', href: '/fichiers' },
+            { label: 'Administratif', href: '/fichiers/administratif' },
+            { label: LONG_PAGE_TITLE },
+          ]}
+          actions={
+            <Button
+              variant="outlined"
+              startIcon={<FileDownloadOutlined />}
+              onClick={() => log('télécharger')}
+            >
+              Télécharger
+            </Button>
+          }
+        />
+      </Example>
+      <Example title="Titre seul">
+        <PageHeader title="Paramètres" />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};