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

package/catalog/frame.tsx

@@ -0,0 +1,221 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import type { ReactNode } from 'react';
+import { styled } from '@mui/material/styles';
+import { visuallyHidden } from '@mui/utils';
+import { hairline, px } from '../src/theme/components/shared';
+import { fontWeights } from '../src/theme/tokens/primitives';
+
+// The page frame of the catalog: a title block, then one block per example. Every value comes
+// from `theme.design`, like the components it shows.
+
+const Page = styled('div')(({ theme }) => {
+  const { tokens, space, fonts, typeScale } = theme.design;
+  return {
+    boxSizing: 'border-box',
+    minHeight: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: px(space[7]),
+    padding: `${px(space[8])} ${px(space[9])} ${px(space[10])}`,
+    backgroundColor: tokens['bg.canvas'],
+    color: tokens['text.primary'],
+    fontFamily: fonts.sans,
+    fontSize: px(typeScale.body),
+    [theme.breakpoints.down('md')]: {
+      gap: px(space[6]),
+      padding: `${px(space[6])} ${px(space[4])} ${px(space[8])}`,
+    },
+  };
+});
+
+const Head = styled('header')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: px(theme.design.space[2]),
+  maxWidth: px(theme.breakpoints.values.md),
+  paddingBottom: px(theme.design.space[6]),
+  borderBottom: hairline(theme.design.tokens['border.subtle']),
+}));
+
+const Family = styled('span')(({ theme }) => ({
+  fontFamily: theme.design.fonts.mono,
+  fontSize: px(theme.design.typeScale.caption),
+  fontWeight: fontWeights.medium,
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+  color: theme.design.tokens['accent.text'],
+}));
+
+const Name = styled('h1')(({ theme }) => ({
+  margin: 0,
+  fontSize: px(theme.design.typeScale.pageTitle),
+  fontWeight: fontWeights.semibold,
+  overflowWrap: 'anywhere',
+}));
+
+const Description = styled('p')(({ theme }) => ({
+  margin: 0,
+  fontSize: px(theme.design.typeScale.bodyComfort),
+  color: theme.design.tokens['text.secondary'],
+}));
+
+const Examples = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: px(theme.design.space[8]),
+  minWidth: 0,
+}));
+
+export interface ShowcaseProps {
+  family: string;
+  name: string;
+  description: string;
+  children: ReactNode;
+}
+
+/** A component page: family, name, one sentence on what the component is for, then examples. */
+export const Showcase = ({
+  family,
+  name,
+  description,
+  children,
+}: ShowcaseProps) => (
+  <Page>
+    <Head>
+      <Family>{family}</Family>
+      <Name>{name}</Name>
+      <Description>{description}</Description>
+    </Head>
+    <Examples>{children}</Examples>
+  </Page>
+);
+
+const ExampleRoot = styled('section')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: px(theme.design.space[3]),
+  minWidth: 0,
+}));
+
+const ExampleTitle = styled('h2')(({ theme }) => ({
+  margin: 0,
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: px(theme.design.space[2]),
+  fontSize: px(theme.design.typeScale.small),
+  fontWeight: fontWeights.medium,
+  color: theme.design.tokens['text.muted'],
+  overflowWrap: 'anywhere',
+}));
+
+const Stage = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'framed' && prop !== 'maxWidth',
+})<{ framed: boolean; maxWidth?: number }>(({ theme, framed, maxWidth }) => {
+  const { tokens, space, radii } = theme.design;
+  return {
+    minWidth: 0,
+    maxWidth: maxWidth === undefined ? undefined : px(maxWidth),
+    ...(framed
+      ? {
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: px(space[3]),
+          padding: px(space[5]),
+          backgroundColor: tokens['bg.surface'],
+          border: hairline(tokens['border.subtle']),
+          borderRadius: px(radii.md),
+        }
+      : {}),
+  };
+});
+
+export interface ExampleProps {
+  title: string;
+  /** Lays the content on a bordered surface, in a wrapping row (badges, icons, small controls). */
+  framed?: boolean;
+  /** Narrows the example to a breakpoint width (`theme.breakpoints.values`). */
+  maxWidth?: number;
+  children: ReactNode;
+}
+
+export const Example = ({
+  title,
+  framed = false,
+  maxWidth,
+  children,
+}: ExampleProps) => (
+  <ExampleRoot>
+    <ExampleTitle>{title}</ExampleTitle>
+    <Stage framed={framed} maxWidth={maxWidth}>
+      {children}
+    </Stage>
+  </ExampleRoot>
+);
+
+// The callbacks of the fixtures (back, tab change, bulk action…) write here, so a test and a
+// reader can see that the host was called.
+
+interface EventLog {
+  last: string | null;
+  log(message: string): void;
+}
+
+const EventLogContext = createContext<EventLog | null>(null);
+
+export const EventLogProvider = ({ children }: { children: ReactNode }) => {
+  const [last, setLast] = useState<string | null>(null);
+  const log = useCallback((message: string) => setLast(message), []);
+  const value = useMemo(() => ({ last, log }), [last, log]);
+  return (
+    <EventLogContext.Provider value={value}>
+      {children}
+    </EventLogContext.Provider>
+  );
+};
+
+export const useEventLog = (): EventLog => {
+  const value = useContext(EventLogContext);
+  if (value === null) {
+    throw new Error('useEventLog must be used inside <EventLogProvider>.');
+  }
+  return value;
+};
+
+/**
+ * The last callback a fixture received, or a dash: read by the specs and announced to a screen
+ * reader, kept out of the screenshots.
+ */
+export const LastEvent = () => {
+  const { last } = useEventLog();
+  return (
+    <p data-testid="catalog-event" role="status" style={visuallyHidden}>
+      Dernier appel : {last ?? '—'}
+    </p>
+  );
+};
+
+/** Equal columns that wrap: as many as fit, each at least three times the largest spacing step. */
+export const Columns = styled('div')(({ theme }) => ({
+  display: 'grid',
+  gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${px(
+    theme.design.space[10] * 3,
+  )}), 1fr))`,
+  gap: px(theme.design.space[4]),
+  minWidth: 0,
+}));
+
+/** A wrapping row of items. */
+export const Row = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: px(theme.design.space[3]),
+  minWidth: 0,
+}));

package/catalog/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>Catalogue du design system Abyss</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/catalog/main.tsx

@@ -0,0 +1,123 @@
+import { StrictMode } from 'react';
+import type { ReactElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
+import flat from 'flat';
+import { styled } from '@mui/material/styles';
+import '../src/theme/fonts.css';
+import { AbyssThemeProvider } from '../src/theme/AbyssThemeProvider';
+import { px } from '../src/theme/components/shared';
+import { fontWeights, ThemeMode } from '../src/theme/tokens/primitives';
+import fr from '../src/translations/fr';
+import {
+  CATALOG_ENTRIES,
+  CATALOG_THEMES,
+  catalogPath,
+} from './catalog-entries';
+import type { CatalogTheme } from './catalog-entries';
+import { EventLogProvider } from './frame';
+import { CATALOG_PAGES } from './pages';
+
+// Entry of the catalog: `/?component=<Name>&theme=dark|light` renders one page under the design
+// system theme, the French messages of the core and an in-memory router (the shell links are
+// app routes). Without `component`, the index lists every page.
+
+const messages = flat<typeof fr, Record<string, string>>(fr);
+
+const params = new URLSearchParams(window.location.search);
+const requestedTheme = params.get('theme') ?? 'dark';
+const requestedComponent = params.get('component');
+
+const isCatalogTheme = (value: string): value is CatalogTheme =>
+  (CATALOG_THEMES as readonly string[]).includes(value);
+
+const Notice = styled('div')(({ theme }) => {
+  const { tokens, space, fonts, typeScale } = theme.design;
+  return {
+    boxSizing: 'border-box',
+    minHeight: '100vh',
+    padding: px(space[8]),
+    backgroundColor: tokens['bg.canvas'],
+    color: tokens['text.primary'],
+    fontFamily: fonts.sans,
+    fontSize: px(typeScale.bodyComfort),
+    '& h1': {
+      fontSize: px(typeScale.pageTitle),
+      fontWeight: fontWeights.semibold,
+    },
+    '& ul': { columns: 3, padding: 0, listStyle: 'none' },
+    '& li': { padding: `${px(space[1])} 0` },
+    '& a': { color: tokens['accent.text'] },
+  };
+});
+
+const CatalogIndex = () => (
+  <Notice>
+    <h1>Catalogue du design system</h1>
+    <ul>
+      {CATALOG_ENTRIES.map((entry) => (
+        <li key={entry.name}>
+          {entry.name} :{' '}
+          {CATALOG_THEMES.map((theme) => (
+            <a key={theme} href={catalogPath(entry.name, theme)}>
+              {theme}{' '}
+            </a>
+          ))}
+        </li>
+      ))}
+    </ul>
+  </Notice>
+);
+
+const Unknown = ({ message }: { message: string }) => (
+  <Notice role="alert">
+    <h1>Page introuvable</h1>
+    <p>{message}</p>
+  </Notice>
+);
+
+const resolvePage = (): ReactElement => {
+  if (!isCatalogTheme(requestedTheme)) {
+    return (
+      <Unknown
+        message={`Thème inconnu : « ${requestedTheme} » (dark ou light).`}
+      />
+    );
+  }
+  if (requestedComponent === null) {
+    return <CatalogIndex />;
+  }
+  const Page = CATALOG_PAGES[requestedComponent];
+  if (Page === undefined) {
+    return (
+      <Unknown message={`Composant inconnu : « ${requestedComponent} ».`} />
+    );
+  }
+  return <Page />;
+};
+
+const page = resolvePage();
+const mode: CatalogTheme = isCatalogTheme(requestedTheme)
+  ? requestedTheme
+  : ThemeMode.Dark;
+
+const container = document.getElementById('root');
+if (container === null) {
+  throw new Error('The catalog page has no #root element.');
+}
+
+createRoot(container).render(
+  <StrictMode>
+    <AbyssThemeProvider mode={mode}>
+      <IntlProvider locale="fr" messages={messages}>
+        <MemoryRouter
+          initialEntries={['/transactions']}
+          future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
+        >
+          <EventLogProvider>{page}</EventLogProvider>
+        </MemoryRouter>
+      </IntlProvider>
+    </AbyssThemeProvider>
+  </StrictMode>,
+);

package/catalog/pages/ActionBar.tsx

@@ -0,0 +1,138 @@
+import ChatBubbleOutlineOutlined from '@mui/icons-material/ChatBubbleOutlineOutlined';
+import CloseRounded from '@mui/icons-material/CloseRounded';
+import CheckRounded from '@mui/icons-material/CheckRounded';
+import DeleteOutlineOutlined from '@mui/icons-material/DeleteOutlineOutlined';
+import DriveFileMoveOutlined from '@mui/icons-material/DriveFileMoveOutlined';
+import FileDownloadOutlined from '@mui/icons-material/FileDownloadOutlined';
+import SellOutlined from '@mui/icons-material/SellOutlined';
+import {
+  ActionBar,
+  ActionBarTone,
+} from '../../src/components/mobile/ActionBar/ActionBar';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { TRANSACTIONS } from '../fixtures';
+import { Amount, TouchList } from '../parts';
+
+export const ActionBarPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Mobile"
+      name="ActionBar"
+      description="Barre d'actions collée en bas de l'écran : l'icône au-dessus du libellé entier jusqu'à trois actions ; au-delà, les deux premières et « Plus », qui ouvre les autres dans une feuille."
+    >
+      <Example title="Trois transactions sélectionnées">
+        <TouchList
+          items={TRANSACTIONS.slice(0, 3).map((transaction) => ({
+            id: transaction.id,
+            title: transaction.label,
+            subtitle: `${transaction.category} · ${transaction.account}`,
+            trailing: <Amount value={transaction.amount} />,
+          }))}
+          onOpen={(id) => log(`ouvrir ${id}`)}
+        />
+        <ActionBar
+          actions={[
+            {
+              id: 'categorize',
+              label: 'Catégoriser',
+              icon: <SellOutlined />,
+              onPress: () => log('catégoriser'),
+            },
+            {
+              id: 'comment',
+              label: 'Commenter',
+              icon: <ChatBubbleOutlineOutlined />,
+              onPress: () => log('commenter'),
+            },
+            {
+              id: 'export',
+              label: 'Exporter',
+              icon: <FileDownloadOutlined />,
+              tone: ActionBarTone.Primary,
+              onPress: () => log('exporter'),
+            },
+          ]}
+        />
+      </Example>
+      <Example title="Cinq actions : les deux premières, puis « Plus »">
+        <ActionBar
+          actions={[
+            {
+              id: 'categorize',
+              label: 'Catégoriser',
+              icon: <SellOutlined />,
+              onPress: () => log('catégoriser'),
+            },
+            {
+              id: 'comment',
+              label: 'Commenter',
+              icon: <ChatBubbleOutlineOutlined />,
+              onPress: () => log('commenter'),
+            },
+            {
+              id: 'move',
+              label: 'Changer de compte',
+              icon: <DriveFileMoveOutlined />,
+              onPress: () => log('changer de compte'),
+            },
+            {
+              id: 'export',
+              label: 'Exporter la sélection',
+              icon: <FileDownloadOutlined />,
+              onPress: () => log('exporter la sélection'),
+            },
+            {
+              id: 'delete',
+              label: 'Supprimer',
+              icon: <DeleteOutlineOutlined />,
+              tone: ActionBarTone.Danger,
+              onPress: () => log('supprimer'),
+            },
+          ]}
+        />
+      </Example>
+      <Example title="Modération : refuser ou approuver">
+        <ActionBar
+          actions={[
+            {
+              id: 'reject',
+              label: 'Refuser',
+              icon: <CloseRounded />,
+              tone: ActionBarTone.Danger,
+              onPress: () => log('refuser'),
+            },
+            {
+              id: 'approve',
+              label: 'Approuver',
+              icon: <CheckRounded />,
+              tone: ActionBarTone.Primary,
+              onPress: () => log('approuver'),
+            },
+          ]}
+        />
+      </Example>
+      <Example title="Une action désactivée">
+        <ActionBar
+          actions={[
+            {
+              id: 'download',
+              label: 'Télécharger',
+              icon: <FileDownloadOutlined />,
+              onPress: () => log('télécharger'),
+            },
+            {
+              id: 'delete',
+              label: 'Supprimer',
+              icon: <DeleteOutlineOutlined />,
+              tone: ActionBarTone.Danger,
+              disabled: true,
+              onPress: () => log('supprimer'),
+            },
+          ]}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/AppShell.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import SyncOutlined from '@mui/icons-material/SyncOutlined';
+import { AppShell } from '../../src/components/structure/AppShell/AppShell';
+import { PageHeader } from '../../src/components/structure/PageHeader/PageHeader';
+import { Section } from '../../src/components/structure/Section/Section';
+import { StatTile } from '../../src/components/data/StatTile/StatTile';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { ToolKind } from '../../src/theme/tokens/domain';
+import { Columns, LastEvent, useEventLog } from '../frame';
+import {
+  ACCOUNTS,
+  BANKING_NAV_WITH_LONG_LABEL,
+  BANKING_TOTALS,
+  SPACES,
+  formatEuro,
+  formatPercentDelta,
+  formatSignedEuro,
+} from '../fixtures';
+import { AccountCard, SHELL_FOOTER, TopbarActions } from '../parts';
+
+/** The shell alone, with the Banking navigation and a saved filter named by one unbroken word. */
+export const AppShellPage = () => {
+  const { log } = useEventLog();
+  const [spaceId, setSpaceId] = useState(SPACES[0].id);
+  const current = SPACES.find((space) => space.id === spaceId) ?? SPACES[0];
+  const balance = ACCOUNTS.reduce((sum, account) => sum + account.balance, 0);
+
+  return (
+    <AppShell
+      product={{
+        kind: ToolKind.Banking,
+        name: 'Banking',
+        icon: <ToolIcon tool={ToolKind.Banking} size={24} />,
+      }}
+      space={{
+        current,
+        spaces: SPACES,
+        onChange: (id) => {
+          setSpaceId(id);
+          log(`espace ${id}`);
+        },
+      }}
+      nav={BANKING_NAV_WITH_LONG_LABEL}
+      activeItemId="home"
+      mainSpaceLink={{ href: '#abyss', label: 'Mon espace Abyss' }}
+      topbar={<TopbarActions />}
+      footer={SHELL_FOOTER}
+    >
+      <PageHeader
+        title="Accueil"
+        subtitle="Espace personnel · 4 comptes · synchronisé il y a 12 min"
+        breadcrumbs={[
+          { label: 'Banking', href: '/accueil' },
+          { label: 'Accueil' },
+        ]}
+        actions={
+          <Button
+            variant="outlined"
+            startIcon={<SyncOutlined />}
+            onClick={() => log('synchroniser')}
+          >
+            Synchroniser
+          </Button>
+        }
+      />
+      <Columns>
+        <StatTile
+          label="Solde total"
+          value={formatEuro(balance)}
+          delta={{ value: formatPercentDelta(0.041), tone: 'status.success' }}
+          trend={[40, 44, 43, 50, 52, 58, 55, 61, 64, 62, 70, 74]}
+        />
+        <StatTile
+          label="Revenus · octobre"
+          value={formatEuro(BANKING_TOTALS.income)}
+          delta={{ value: formatSignedEuro(620), tone: 'status.success' }}
+        />
+        <StatTile
+          label="Dépenses · octobre"
+          value={formatEuro(-BANKING_TOTALS.outcome)}
+          delta={{ value: formatPercentDelta(-0.12), tone: 'status.success' }}
+        />
+      </Columns>
+      <Section title="Comptes" count={ACCOUNTS.length}>
+        <Columns>
+          {ACCOUNTS.map((account) => (
+            <AccountCard key={account.id} account={account} />
+          ))}
+        </Columns>
+        <LastEvent />
+      </Section>
+    </AppShell>
+  );
+};

package/catalog/pages/BottomSheet.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import DeleteOutlineOutlined from '@mui/icons-material/DeleteOutlineOutlined';
+import DriveFileMoveOutlined from '@mui/icons-material/DriveFileMoveOutlined';
+import FileDownloadOutlined from '@mui/icons-material/FileDownloadOutlined';
+import IosShareOutlined from '@mui/icons-material/IosShareOutlined';
+import { BottomSheet } from '../../src/components/mobile/BottomSheet/BottomSheet';
+import { ScanBadge } from '../../src/components/meaning/ScanBadge/ScanBadge';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { FILES } from '../fixtures';
+import { Glyph, TouchList } from '../parts';
+
+export const FILE_ACTIONS = [
+  {
+    id: 'share',
+    title: 'Partager',
+    subtitle: 'Lien public ou personne',
+    icon: <IosShareOutlined />,
+  },
+  {
+    id: 'download',
+    title: 'Télécharger',
+    subtitle: 'Déchiffré à la lecture',
+    icon: <FileDownloadOutlined />,
+  },
+  {
+    id: 'move',
+    title: 'Déplacer',
+    subtitle: 'Mon espace › Administratif',
+    icon: <DriveFileMoveOutlined />,
+  },
+  {
+    id: 'trash',
+    title: 'Mettre à la corbeille',
+    subtitle: 'Récupérable 30 jours',
+    icon: <DeleteOutlineOutlined />,
+  },
+];
+
+export const BottomSheetPage = () => {
+  const { log } = useEventLog();
+  const [open, setOpen] = useState(true);
+  const file = FILES[2];
+
+  return (
+    <Showcase
+      family="Mobile"
+      name="BottomSheet"
+      description="Feuille du bas : poignée, titre, voile, focus piégé. Elle se ferme par Échap, le voile ou un glissé au-delà de 30 % de sa hauteur."
+    >
+      <Example title="Actions d'un fichier">
+        <Button variant="contained" onClick={() => setOpen(true)}>
+          Actions du fichier
+        </Button>
+      </Example>
+      <LastEvent />
+      <BottomSheet
+        open={open}
+        onClose={() => {
+          setOpen(false);
+          log('feuille fermée');
+        }}
+        title={file.name}
+      >
+        {file.scan !== null && (
+          <ScanBadge verdict={file.scan.verdict} detail={file.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) => {
+            setOpen(false);
+            log(`action ${id}`);
+          }}
+        />
+      </BottomSheet>
+    </Showcase>
+  );
+};