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

package/catalog/pages/PageState.tsx

@@ -0,0 +1,98 @@
+import Button from '@mui/material/Button';
+import Skeleton from '@mui/material/Skeleton';
+import CreateNewFolderOutlined from '@mui/icons-material/CreateNewFolderOutlined';
+import {
+  PageState,
+  PageStatus,
+} from '../../src/components/states/PageState/PageState';
+import { space } from '../../src/theme/tokens/primitives';
+import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { ACCOUNTS } from '../fixtures';
+import { AccountCard } from '../parts';
+
+// Height of an account card: 2 × 64 + 32.
+const CARD_HEIGHT = space[10] * 2 + space[7];
+
+const AccountSkeleton = () => (
+  <Columns>
+    {ACCOUNTS.map((account) => (
+      <Skeleton key={account.id} variant="rounded" height={CARD_HEIGHT} />
+    ))}
+  </Columns>
+);
+
+export const PageStatePage = () => {
+  const { log } = useEventLog();
+  const ready = (
+    <Columns>
+      {ACCOUNTS.map((account) => (
+        <AccountCard key={account.id} account={account} />
+      ))}
+    </Columns>
+  );
+
+  return (
+    <Showcase
+      family="États"
+      name="PageState"
+      description="Remplace l'emplacement du contenu pendant le chargement, quand il est vide, en erreur, refusé ou introuvable ; le cadre de la page reste."
+    >
+      <Example title="Chargement">
+        <PageState status={PageStatus.Loading} skeleton={<AccountSkeleton />}>
+          {ready}
+        </PageState>
+      </Example>
+      <Example title="Vide, avec action">
+        <PageState
+          status={PageStatus.Empty}
+          skeleton={<AccountSkeleton />}
+          empty={{
+            title: 'Aucun fichier dans Impôts 2026',
+            description:
+              'Importez vos avis et déclarations, ils seront chiffrés et analysés.',
+            action: (
+              <Button
+                variant="contained"
+                startIcon={<CreateNewFolderOutlined />}
+                onClick={() => log('importer')}
+              >
+                Importer des fichiers
+              </Button>
+            ),
+          }}
+        >
+          {ready}
+        </PageState>
+      </Example>
+      <Example title="Erreur, avec nouvel essai">
+        <PageState
+          status={PageStatus.Error}
+          skeleton={<AccountSkeleton />}
+          error={{
+            message:
+              "La synchronisation Qonto n'a pas répondu (délai dépassé après 30 s).",
+            onRetry: () => log('réessayer'),
+          }}
+        >
+          {ready}
+        </PageState>
+      </Example>
+      <Example title="Accès refusé">
+        <PageState status={PageStatus.Forbidden} skeleton={<AccountSkeleton />}>
+          {ready}
+        </PageState>
+      </Example>
+      <Example title="Introuvable">
+        <PageState status={PageStatus.NotFound} skeleton={<AccountSkeleton />}>
+          {ready}
+        </PageState>
+      </Example>
+      <Example title="Prêt">
+        <PageState status={PageStatus.Ready} skeleton={<AccountSkeleton />}>
+          {ready}
+        </PageState>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/RichSelect.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import { RichSelect } from '../../src/components/inputs/RichSelect/RichSelect';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { ToolKind } from '../../src/theme/tokens/domain';
+import { breakpoints } from '../../src/theme/tokens/primitives';
+import { Columns, Example, Showcase } from '../frame';
+import { ACCOUNT_OPTIONS } from '../fixtures';
+
+type Visibility = 'private' | 'members' | 'public';
+type Product = 'cloud' | 'banking' | 'memories';
+
+const VISIBILITY_OPTIONS = [
+  {
+    value: 'private' as const,
+    label: 'Privé',
+    description: 'Vous seul',
+    tone: 'status.neutral' as const,
+  },
+  {
+    value: 'members' as const,
+    label: 'Membres',
+    description: "Les 82 membres de l'événement",
+    tone: 'status.info' as const,
+  },
+  {
+    value: 'public' as const,
+    label: 'Public',
+    description: 'Toute personne avec le lien',
+    tone: 'status.warning' as const,
+  },
+];
+
+const PRODUCT_OPTIONS = [
+  {
+    value: 'cloud' as const,
+    label: 'Cloud',
+    icon: <ToolIcon tool={ToolKind.Cloud} size={20} />,
+  },
+  {
+    value: 'banking' as const,
+    label: 'Banking',
+    icon: <ToolIcon tool={ToolKind.Banking} size={20} />,
+  },
+  {
+    value: 'memories' as const,
+    label: 'Memories',
+    icon: <ToolIcon tool={ToolKind.Memories} size={20} />,
+  },
+];
+
+export const RichSelectPage = () => {
+  const [visibility, setVisibility] = useState<Visibility>('members');
+  const [accounts, setAccounts] = useState<string[]>(['bnp', 'qonto']);
+  const [product, setProduct] = useState<Product>('banking');
+
+  return (
+    <Showcase
+      family="Saisie"
+      name="RichSelect"
+      description="Liste de choix avec description, icône ou point de ton ; simple ou multiple."
+    >
+      <Columns>
+        <Example title="Avec ton et description" maxWidth={breakpoints.sm}>
+          <RichSelect
+            label="Visibilité du souvenir"
+            options={VISIBILITY_OPTIONS}
+            value={visibility}
+            onChange={(next) =>
+              setVisibility(Array.isArray(next) ? next[0] : next)
+            }
+          />
+        </Example>
+        <Example title="Multiple" maxWidth={breakpoints.sm}>
+          <RichSelect
+            label="Comptes"
+            multiple
+            options={ACCOUNT_OPTIONS}
+            value={accounts}
+            onChange={(next) =>
+              setAccounts(Array.isArray(next) ? next : [next])
+            }
+          />
+        </Example>
+        <Example title="Avec icône" maxWidth={breakpoints.sm}>
+          <RichSelect
+            label="Produit"
+            options={PRODUCT_OPTIONS}
+            value={product}
+            onChange={(next) =>
+              setProduct(Array.isArray(next) ? next[0] : next)
+            }
+          />
+        </Example>
+        <Example title="En erreur" maxWidth={breakpoints.sm}>
+          <RichSelect
+            label="Compte de destination"
+            options={ACCOUNT_OPTIONS}
+            value={[]}
+            onChange={() => undefined}
+            multiple
+            error="Choisissez au moins un compte."
+          />
+        </Example>
+        <Example title="Désactivé" maxWidth={breakpoints.sm}>
+          <RichSelect
+            label="Produit"
+            options={PRODUCT_OPTIONS}
+            value="cloud"
+            onChange={() => undefined}
+            disabled
+          />
+        </Example>
+      </Columns>
+    </Showcase>
+  );
+};

package/catalog/pages/RoleBadge.tsx

@@ -0,0 +1,24 @@
+import { RoleBadge } from '../../src/components/meaning/RoleBadge/RoleBadge';
+import { AccessLevel } from '../../src/theme/tokens/domain';
+import { Example, Showcase } from '../frame';
+
+const LEVELS: Array<{ level: AccessLevel; label: string }> = [
+  { level: AccessLevel.Owner, label: 'Gestion' },
+  { level: AccessLevel.Admin, label: 'Administration' },
+  { level: AccessLevel.Write, label: 'Modification' },
+  { level: AccessLevel.Read, label: 'Lecture' },
+];
+
+export const RoleBadgePage = () => (
+  <Showcase
+    family="Sens"
+    name="RoleBadge"
+    description="Niveau d'accès d'une personne à un contenu partagé ; le libellé vient de l'hôte."
+  >
+    <Example title="Les quatre niveaux" framed>
+      {LEVELS.map(({ level, label }) => (
+        <RoleBadge key={level} level={level} label={label} />
+      ))}
+    </Example>
+  </Showcase>
+);

package/catalog/pages/ScanBadge.tsx

@@ -0,0 +1,29 @@
+import { ScanBadge } from '../../src/components/meaning/ScanBadge/ScanBadge';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { Columns, Example, Showcase } from '../frame';
+import { FILES } from '../fixtures';
+import { FileName } from '../parts';
+
+export const ScanBadgePage = () => (
+  <Showcase
+    family="Sens"
+    name="ScanBadge"
+    description="Verdict de l'analyse antivirus d'un fichier ; le détail du scanner est donné en infobulle native."
+  >
+    <Example title="Fichiers d'Impôts 2026">
+      <Columns>
+        {FILES.filter((file) => file.scan !== null).map((file) => (
+          <Surface key={file.id} padding={3}>
+            <FileName file={file} />
+            {file.scan !== null && (
+              <ScanBadge
+                verdict={file.scan.verdict}
+                detail={file.scan.detail}
+              />
+            )}
+          </Surface>
+        ))}
+      </Columns>
+    </Example>
+  </Showcase>
+);

package/catalog/pages/SceneDesktop.tsx

@@ -0,0 +1,207 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import AddRounded from '@mui/icons-material/AddRounded';
+import ChatBubbleOutlineOutlined from '@mui/icons-material/ChatBubbleOutlineOutlined';
+import FileDownloadOutlined from '@mui/icons-material/FileDownloadOutlined';
+import SellOutlined from '@mui/icons-material/SellOutlined';
+import UploadOutlined from '@mui/icons-material/UploadOutlined';
+import { AppShell } from '../../src/components/structure/AppShell/AppShell';
+import { PageHeader } from '../../src/components/structure/PageHeader/PageHeader';
+import { DataTable } from '../../src/components/data/DataTable/DataTable';
+import type { DataColumn } from '../../src/components/data/DataTable/data-table.types';
+import { StatusBadge } from '../../src/components/meaning/StatusBadge/StatusBadge';
+import {
+  PageState,
+  PageStatus,
+} from '../../src/components/states/PageState/PageState';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { ToolKind } from '../../src/theme/tokens/domain';
+import { Row, useEventLog } from '../frame';
+import {
+  BANKING_NAV,
+  BANKING_TOTALS,
+  SPACES,
+  TRANSACTIONS,
+  formatInteger,
+  formatShortDate,
+} from '../fixtures';
+import type { Transaction } from '../fixtures';
+import { Amount, SHELL_FOOTER, TopbarActions, TwoLines } from '../parts';
+import { TransactionFilters } from './FilterBar';
+import { BankingStatTiles } from './StatTile';
+import {
+  ColumnAlign,
+  ColumnPriority,
+  SortDirection,
+} from '../../src/components/data/DataTable/data-table.types';
+
+const TRANSACTION_COLUMNS: DataColumn<Transaction>[] = [
+  {
+    id: 'date',
+    header: 'Date',
+    cell: (transaction) => formatShortDate(transaction.date),
+    width: 80,
+    mono: true,
+    sortable: true,
+  },
+  {
+    id: 'label',
+    header: 'Libellé',
+    text: (transaction) => `${transaction.label}
+${transaction.raw}`,
+    cell: (transaction) => (
+      <TwoLines first={transaction.label} second={transaction.raw} mono />
+    ),
+  },
+  {
+    id: 'category',
+    header: 'Catégorie',
+    cell: (transaction) => transaction.category,
+    text: (transaction) => transaction.category,
+  },
+  {
+    id: 'account',
+    header: 'Compte',
+    cell: (transaction) => transaction.account,
+    priority: ColumnPriority.Optional,
+  },
+  {
+    id: 'flags',
+    header: 'Indicateurs',
+    priority: ColumnPriority.Optional,
+    cell: (transaction) => (
+      <Row>
+        {transaction.flags.map((flag) => (
+          <StatusBadge key={flag.label} tone={flag.tone} label={flag.label} />
+        ))}
+      </Row>
+    ),
+  },
+  {
+    id: 'amount',
+    header: 'Montant',
+    cell: (transaction) => <Amount value={transaction.amount} />,
+    width: 128,
+    align: ColumnAlign.Right,
+    sortable: true,
+  },
+];
+
+/** Banking « Transactions »: shell, header, key figures, filters and the selectable table. */
+export const SceneDesktopPage = () => {
+  const { log } = useEventLog();
+  const [spaceId, setSpaceId] = useState(SPACES[0].id);
+  const [selected, setSelected] = useState<string[]>([
+    'tx-01',
+    'tx-03',
+    'tx-06',
+  ]);
+  const current = SPACES.find((space) => space.id === spaceId) ?? SPACES[0];
+
+  return (
+    <AppShell
+      product={{
+        kind: ToolKind.Banking,
+        name: 'Banking',
+        icon: <ToolIcon tool={ToolKind.Banking} size={24} />,
+      }}
+      space={{ current, spaces: SPACES, onChange: setSpaceId }}
+      nav={BANKING_NAV}
+      activeItemId="transactions"
+      mainSpaceLink={{ href: '#abyss', label: 'Mon espace Abyss' }}
+      topbar={<TopbarActions />}
+      footer={SHELL_FOOTER}
+    >
+      <PageHeader
+        title="Transactions"
+        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>
+          </>
+        }
+      />
+      <BankingStatTiles />
+      <TransactionFilters />
+      <DataTable
+        columns={TRANSACTION_COLUMNS}
+        rows={TRANSACTIONS}
+        getRowId={(transaction) => transaction.id}
+        loading={false}
+        empty={
+          <PageState
+            status={PageStatus.Empty}
+            skeleton={null}
+            empty={{ title: 'Aucune transaction pour ces filtres' }}
+          >
+            {null}
+          </PageState>
+        }
+        sort={{
+          columnId: 'date',
+          direction: SortDirection.Desc,
+          onChange: (columnId) => log(`trier ${columnId}`),
+        }}
+        onRowClick={(transaction) => log(`ouvrir ${transaction.label}`)}
+        selection={{
+          selected,
+          onChange: setSelected,
+          bulkActions: [
+            {
+              id: 'categorize',
+              label: 'Catégoriser',
+              icon: <SellOutlined />,
+              onPress: () => log('catégoriser'),
+            },
+            {
+              id: 'comment',
+              label: 'Commenter',
+              icon: <ChatBubbleOutlineOutlined />,
+              onPress: () => log('commenter'),
+            },
+            {
+              id: 'export',
+              label: 'Exporter la sélection',
+              icon: <FileDownloadOutlined />,
+              onPress: () => log('exporter la sélection'),
+            },
+          ],
+        }}
+        mobileRow={{
+          primary: (transaction) => transaction.label,
+          secondary: (transaction) =>
+            `${transaction.category} · ${
+              transaction.account
+            } · ${formatShortDate(transaction.date)}`,
+          trailing: (transaction) => <Amount value={transaction.amount} />,
+        }}
+      />
+    </AppShell>
+  );
+};

package/catalog/pages/SceneMobile.tsx

@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import AccountCircleOutlined from '@mui/icons-material/AccountCircleOutlined';
+import AddRounded from '@mui/icons-material/AddRounded';
+import FolderOpenOutlined from '@mui/icons-material/FolderOpenOutlined';
+import FolderSharedOutlined from '@mui/icons-material/FolderSharedOutlined';
+import ScheduleOutlined from '@mui/icons-material/ScheduleOutlined';
+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 { StatTile } from '../../src/components/data/StatTile/StatTile';
+import { ScanBadge } from '../../src/components/meaning/ScanBadge/ScanBadge';
+import { ScanVerdict } from '../../src/theme/tokens/domain';
+import { px } from '../../src/theme/components/shared';
+import { useEventLog } from '../frame';
+import { FILES } from '../fixtures';
+import { FileGlyph, Glyph, TouchList } from '../parts';
+import { FILE_ACTIONS } from './BottomSheet';
+
+const CLOUD_TABS = [
+  { id: 'files', label: 'Fichiers', icon: <FolderOpenOutlined /> },
+  { id: 'recent', label: 'Récents', icon: <ScheduleOutlined /> },
+  { id: 'shared', label: 'Partagés', icon: <FolderSharedOutlined />, badge: 2 },
+  { id: 'me', label: 'Moi', icon: <AccountCircleOutlined /> },
+];
+
+const Content = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: px(theme.design.space[6]),
+  paddingTop: px(theme.design.space[2]),
+}));
+
+const SheetBody = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: px(theme.design.space[4]),
+}));
+
+/** The scan verdicts worth a badge in a list: a clean file says nothing. */
+const listedVerdict = (verdict: ScanVerdict): boolean =>
+  verdict !== ScanVerdict.Clean;
+
+/** Cloud on a phone: the « Impôts 2026 » folder, its files, and the actions sheet of a file. */
+export const SceneMobilePage = () => {
+  const { log } = useEventLog();
+  const [tab, setTab] = useState('files');
+  const [openId, setOpenId] = useState<string | null>(null);
+  const folders = FILES.filter((file) => file.kind === 'folder');
+  const files = FILES.filter((file) => file.kind !== 'folder');
+  const open = files.find((file) => file.id === openId);
+
+  return (
+    <MobileShell
+      title="Impôts 2026"
+      largeTitle
+      onBack={() => log('retour vers Administratif')}
+      actions={
+        <IconButton aria-label="Rechercher" onClick={() => log('rechercher')}>
+          <SearchRounded />
+        </IconButton>
+      }
+      tabs={CLOUD_TABS}
+      activeTab={tab}
+      onTabChange={(id) => {
+        setTab(id);
+        log(`onglet ${id}`);
+      }}
+      mainAction={{
+        icon: <AddRounded />,
+        label: 'Importer',
+        onPress: () => log('importer'),
+      }}
+      onRefresh={async () => log('actualiser')}
+    >
+      <Content>
+        <StatTile
+          label="Stockage"
+          value="3,2"
+          unit="Go"
+          delta={{ value: 'sur 10 Go · 6,8 Go libres', tone: 'text.muted' }}
+        />
+        <Section title="Dossiers" count={folders.length}>
+          <TouchList
+            items={folders.map((folder) => ({
+              id: folder.id,
+              leading: <FileGlyph kind={folder.kind} />,
+              title: folder.name,
+              subtitle: `${folder.detail} · ${
+                folder.share ? `partagé · ${folder.share}` : 'privé'
+              }`,
+            }))}
+            onOpen={(id) => log(`ouvrir ${id}`)}
+          />
+        </Section>
+        <Section title="Fichiers" count={files.length}>
+          <TouchList
+            items={files.map((file) => ({
+              id: file.id,
+              leading: <FileGlyph kind={file.kind} />,
+              title: file.name,
+              subtitle: `${file.size} · ${file.modified}`,
+              trailing:
+                file.scan !== null && listedVerdict(file.scan.verdict) ? (
+                  <ScanBadge
+                    verdict={file.scan.verdict}
+                    detail={file.scan.detail}
+                  />
+                ) : undefined,
+            }))}
+            onOpen={(id) => setOpenId(id)}
+          />
+        </Section>
+      </Content>
+      <BottomSheet
+        open={open !== undefined}
+        onClose={() => setOpenId(null)}
+        title={open?.name}
+      >
+        {open !== undefined && (
+          <SheetBody>
+            <KeyValueList
+              items={[
+                { id: 'size', label: 'Taille', value: open.size, mono: true },
+                { id: 'modified', label: 'Modifié', value: open.modified },
+                { id: 'share', label: 'Partage', value: open.share ?? 'Privé' },
+                {
+                  id: 'scan',
+                  label: 'Analyse',
+                  value: open.scan ? (
+                    <ScanBadge
+                      verdict={open.scan.verdict}
+                      detail={open.scan.detail}
+                    />
+                  ) : (
+                    '—'
+                  ),
+                },
+              ]}
+            />
+            <TouchList
+              items={FILE_ACTIONS.map((action) => ({
+                id: action.id,
+                leading: (
+                  <Glyph
+                    icon={action.icon}
+                    tone={
+                      action.id === 'trash' ? 'status.danger' : 'text.secondary'
+                    }
+                  />
+                ),
+                title: action.title,
+                subtitle: action.subtitle,
+              }))}
+              onOpen={(id) => {
+                setOpenId(null);
+                log(`${id} ${open.name}`);
+              }}
+            />
+          </SheetBody>
+        )}
+      </BottomSheet>
+    </MobileShell>
+  );
+};