@abyss-project/commons-front-core 8.1.0 → 8.3.0

package/catalog/pages/DropZone.tsx

@@ -0,0 +1,37 @@
+import { DropZone } from '../../src/components/inputs/DropZone/DropZone';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { CATALOG_CLOUD_PICKER } from '../cloud-picker-fixture';
+
+const TEN_MIB = 10 * 1024 * 1024;
+
+export const DropZonePage = () => {
+  const { log } = useEventLog();
+  const dropped = (files: File[]) =>
+    log(`déposé ${files.map((file) => file.name).join(', ')}`);
+  return (
+    <Showcase
+      family="Saisie"
+      name="DropZone"
+      description="Zone de dépôt de fichiers : bouton pour parcourir l'appareil, limite de taille, refus expliqués sous la zone, entrée AbyssCloud quand elle est branchée. Sous 768 px, seul le bouton reste."
+    >
+      <Example title="Une image, avec AbyssCloud" maxWidth={640}>
+        <DropZone
+          title="Signature"
+          onDrop={dropped}
+          multiple={false}
+          accept={{ 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg'] }}
+          maxSize={TEN_MIB}
+          cloudImport={{
+            ...CATALOG_CLOUD_PICKER,
+            onImport: (_space, files) =>
+              log(`importé ${files.map((file) => file.name).join(', ')}`),
+          }}
+        />
+      </Example>
+      <Example title="Plusieurs fichiers, sans AbyssCloud" maxWidth={640}>
+        <DropZone onDrop={dropped} maxSize={TEN_MIB} />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/FormField.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import { FormField } from '../../src/components/inputs/FormField/FormField';
+import { Columns, Example, Showcase } from '../frame';
+
+export const FormFieldPage = () => {
+  const [company, setCompany] = useState('Abyss SAS');
+  const [vat, setVat] = useState('FR123');
+  const [country, setCountry] = useState('fr');
+  return (
+    <Showcase
+      family="Saisie"
+      name="FormField"
+      description="Libellé, aide et erreur autour d'un champ MUI : l'id et les aria-describedby sont reliés, l'erreur et l'obligation passent au champ."
+    >
+      <Example title="Aide et obligation, erreur, liste">
+        <Columns>
+          <FormField
+            label="Raison sociale"
+            help="Telle qu'elle figure sur vos factures."
+            required
+          >
+            <OutlinedInput
+              value={company}
+              onChange={(event) => setCompany(event.target.value)}
+            />
+          </FormField>
+          <FormField
+            label="Numéro de TVA"
+            help="FR suivi de 11 chiffres."
+            error="Ce numéro n'est pas valide."
+          >
+            <OutlinedInput
+              value={vat}
+              onChange={(event) => setVat(event.target.value)}
+            />
+          </FormField>
+          <FormField label="Pays de facturation">
+            <Select
+              value={country}
+              onChange={(event) => setCountry(event.target.value)}
+            >
+              <MenuItem value="fr">France</MenuItem>
+              <MenuItem value="be">Belgique</MenuItem>
+              <MenuItem value="ch">Suisse</MenuItem>
+            </Select>
+          </FormField>
+        </Columns>
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/ImportButton.tsx

@@ -0,0 +1,45 @@
+import Button from '@mui/material/Button';
+import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
+import { ImportButton } from '../../src/components/inputs/ImportButton/ImportButton';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { CATALOG_CLOUD_PICKER } from '../cloud-picker-fixture';
+
+export const ImportButtonPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Saisie"
+      name="ImportButton"
+      description="Un déclencheur qui ouvre le menu des sources : l'appareil, un lien (adresse vérifiée avant l'import), AbyssCloud."
+    >
+      <Example title="Trois sources">
+        <ImportButton
+          isLoading={false}
+          handleFileUpload={async (event) =>
+            log(`fichier ${event.target.files?.[0]?.name ?? ''}`)
+          }
+          handleUploadFromUrl={async (url) => log(`lien ${url}`)}
+          accept={['image/*']}
+          cloudImport={{
+            ...CATALOG_CLOUD_PICKER,
+            onImport: (_space, files) =>
+              log(`importé ${files.map((file) => file.name).join(', ')}`),
+          }}
+        >
+          <Button
+            variant="outlined"
+            startIcon={<FileUploadOutlinedIcon aria-hidden />}
+          >
+            Importer une image
+          </Button>
+        </ImportButton>
+      </Example>
+      <Example title="L'appareil seulement, import en cours">
+        <ImportButton isLoading handleFileUpload={async () => undefined}>
+          <Button variant="outlined">Importer</Button>
+        </ImportButton>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/ImportFromCloudModal.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import { ImportFromCloudModal } from '../../src/components/business/ImportFromCloudModal/ImportFromCloudModal';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import { CATALOG_CLOUD_PICKER } from '../cloud-picker-fixture';
+
+export const ImportFromCloudModalPage = () => {
+  const { log } = useEventLog();
+  const [open, setOpen] = useState(true);
+  return (
+    <Showcase
+      family="Métier"
+      name="ImportFromCloudModal"
+      description="Le sélecteur AbyssCloud dans une modale ; une feuille du bas sous 768 px. Importer remet les fichiers à l'hôte et ferme."
+    >
+      <Example title="Une image">
+        <Button variant="outlined" onClick={() => setOpen(true)}>
+          Importer depuis AbyssCloud
+        </Button>
+      </Example>
+      <LastEvent />
+      <ImportFromCloudModal
+        open={open}
+        onClose={() => setOpen(false)}
+        cloudPicker={CATALOG_CLOUD_PICKER}
+        accept={['image/*']}
+        onImport={(_space, files) =>
+          log(`importé ${files.map((file) => file.name).join(', ')}`)
+        }
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/Menu.tsx

@@ -1,98 +1,99 @@
-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>
-  );
-};
+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, description, 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',
+            description: 'Lien ou invitation par courriel',
+            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/NotificationsMenu.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import GroupAddOutlined from '@mui/icons-material/GroupAddOutlined';
+import ChatBubbleOutlineOutlined from '@mui/icons-material/ChatBubbleOutlineOutlined';
+import FileDownloadDoneOutlined from '@mui/icons-material/FileDownloadDoneOutlined';
+import { NotificationsMenu } from '../../src/components/structure/NotificationsMenu/NotificationsMenu';
+import type { NotificationItem } from '../../src/components/structure/NotificationsMenu/NotificationsMenu';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+const MINUTE_MS = 60 * 1000;
+
+const initialItems = (): NotificationItem[] => [
+  {
+    id: 'invite',
+    title: 'Ada Lovelace vous invite dans Atelier Nord',
+    body: 'Rejoignez l’organisation pour voir ses projets et ses tableaux.',
+    createdAt: new Date(Date.now() - 4 * MINUTE_MS),
+    read: false,
+    icon: <GroupAddOutlined />,
+  },
+  {
+    id: 'comment',
+    title: 'Nouveau commentaire sur « Roadmap T4 »',
+    body: 'Grace : « On décale la refonte du tableau de bord à novembre ? »',
+    createdAt: new Date(Date.now() - 70 * MINUTE_MS),
+    read: false,
+    icon: <ChatBubbleOutlineOutlined />,
+    href: '/tableaux/roadmap',
+  },
+  {
+    id: 'export',
+    title: 'Votre export de relevés est prêt',
+    createdAt: new Date(Date.now() - 2 * 24 * 60 * MINUTE_MS),
+    read: true,
+    icon: <FileDownloadDoneOutlined />,
+  },
+];
+
+export const NotificationsMenuPage = () => {
+  const { log } = useEventLog();
+  const [items, setItems] = useState(initialItems);
+  const [sound, setSound] = useState(true);
+  const unread = items.filter((item) => !item.read).length;
+  const markRead = (id: string) =>
+    setItems((current) =>
+      current.map((item) => (item.id === id ? { ...item, read: true } : item)),
+    );
+
+  return (
+    <Showcase
+      family="Structure"
+      name="NotificationsMenu"
+      description="Cloche de la barre du haut : pastille des non lues, panneau (feuille sous 768 px), tout marquer lu, son, préférences, actions par notification."
+    >
+      <Example title="Barre du haut">
+        <Row>
+          <NotificationsMenu
+            items={items}
+            unreadCount={unread}
+            loading={false}
+            onOpen={() => log('ouvrir')}
+            onItemClick={(id) => {
+              markRead(id);
+              log(`lire ${id}`);
+            }}
+            onMarkAllRead={() => {
+              setItems((current) =>
+                current.map((item) => ({ ...item, read: true })),
+              );
+              log('tout lire');
+            }}
+            soundEnabled={sound}
+            onToggleSound={() => {
+              setSound((value) => !value);
+              log('son');
+            }}
+            preferencesHref="/compte/notifications"
+            renderItemActions={(item) =>
+              item.id === 'invite' && !item.read ? (
+                <Button
+                  size="small"
+                  variant="outlined"
+                  onClick={() => {
+                    markRead(item.id);
+                    log('accepter');
+                  }}
+                >
+                  Accepter
+                </Button>
+              ) : null
+            }
+          />
+        </Row>
+      </Example>
+      <Example title="Liste vide et premier chargement">
+        <Row>
+          <NotificationsMenu
+            items={[]}
+            unreadCount={0}
+            loading={false}
+            onItemClick={(id) => log(`lire ${id}`)}
+            onMarkAllRead={() => log('tout lire')}
+          />
+          <NotificationsMenu
+            items={[]}
+            unreadCount={0}
+            loading
+            onItemClick={(id) => log(`lire ${id}`)}
+            onMarkAllRead={() => log('tout lire')}
+          />
+        </Row>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/NumberField.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { NumberField } from '../../src/components/inputs/NumberField/NumberField';
+import { Columns, Example, Showcase } from '../frame';
+
+export const NumberFieldPage = () => {
+  const [ceiling, setCeiling] = useState<number | null>(1250.5);
+  const [seats, setSeats] = useState<number | null>(12);
+  const [empty, setEmpty] = useState<number | null>(null);
+  return (
+    <Showcase
+      family="Saisie"
+      name="NumberField"
+      description="Nombre saisi et affiché avec les séparateurs de la langue ; « , » ou « . » lus comme marque décimale, borné et arrondi en sortie du champ."
+    >
+      <Example title="Montant, quantité, champ vide et désactivé">
+        <Columns>
+          <NumberField
+            label="Plafond mensuel"
+            value={ceiling}
+            onChange={setCeiling}
+            decimals={2}
+            adornment="€"
+          />
+          <NumberField
+            label="Sièges"
+            value={seats}
+            onChange={setSeats}
+            min={1}
+          />
+          <NumberField
+            label="Stockage supplémentaire"
+            value={empty}
+            onChange={setEmpty}
+            adornment="Go"
+          />
+          <NumberField
+            label="Crédits offerts"
+            value={500}
+            onChange={() => undefined}
+            disabled
+          />
+        </Columns>
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/QRCodeModal.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import { QRCodeModal } from '../../src/components/business/QRCodeModal/QRCodeModal';
+import { Example, Showcase } from '../frame';
+
+export const QRCodeModalPage = () => {
+  const [open, setOpen] = useState(true);
+  return (
+    <Showcase
+      family="Métier"
+      name="QRCodeModal"
+      description="Un lien en QR code, toujours sur une page claire (jeton paper) pour rester lisible par un appareil photo ; le lien à copier et « Partager »."
+    >
+      <Example title="Lien de parrainage">
+        <Button variant="outlined" onClick={() => setOpen(true)}>
+          Afficher le QR code
+        </Button>
+      </Example>
+      <QRCodeModal
+        open={open}
+        onClose={() => setOpen(false)}
+        url="https://abyss-project.fr/auth/register?sponsorship=7f3a9c2e"
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/SettingsRow.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Switch from '@mui/material/Switch';
+import { SettingsRow } from '../../src/components/inputs/SettingsRow/SettingsRow';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const SettingsRowPage = () => {
+  const { log } = useEventLog();
+  const [renew, setRenew] = useState(true);
+  const [language, setLanguage] = useState('fr');
+  return (
+    <Showcase
+      family="Saisie"
+      name="SettingsRow"
+      description="Un réglage : libellé et description à gauche, contrôle à droite, lignes séparées d'un filet ; le contrôle passe sous le texte sous 768 px."
+    >
+      <Example title="Réglages de l'abonnement, dans une surface">
+        <Surface padding={4}>
+          <SettingsRow
+            label="Renouvellement automatique"
+            description="Votre abonnement est reconduit à chaque échéance, au tarif en vigueur."
+            htmlFor="catalog-auto-renew"
+            control={
+              <Switch
+                id="catalog-auto-renew"
+                checked={renew}
+                onChange={(event) => setRenew(event.target.checked)}
+              />
+            }
+          />
+          <SettingsRow
+            label="Langue des factures"
+            description="Les prochaines factures seront émises dans cette langue."
+            control={
+              <Select
+                size="small"
+                value={language}
+                inputProps={{ 'aria-label': 'Langue des factures' }}
+                onChange={(event) => setLanguage(event.target.value)}
+              >
+                <MenuItem value="fr">Français</MenuItem>
+                <MenuItem value="en">English</MenuItem>
+              </Select>
+            }
+          />
+          <SettingsRow
+            label="Résilier l'abonnement"
+            description="Vous gardez l'accès jusqu'à la fin de la période payée."
+            control={
+              <Button
+                variant="outlined"
+                color="error"
+                onClick={() => log('résilier')}
+              >
+                Résilier
+              </Button>
+            }
+          />
+        </Surface>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};