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

package/catalog/pages/CloudImport.tsx

@@ -0,0 +1,35 @@
+import { CloudImport } from '../../src/components/business/CloudImport/CloudImport';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+import {
+  CATALOG_CLOUD_PICKER,
+  CATALOG_FAILED_CLOUD_PICKER,
+} from '../cloud-picker-fixture';
+
+export const CloudImportPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Métier"
+      name="CloudImport"
+      description="Le sélecteur AbyssCloud : espace (le mien, ceux des organisations, ceux partagés avec moi), arborescence, fichiers choisis, import. Les fichiers trop lourds ou d'un type refusé ne sont pas listés."
+    >
+      <Example title="Plusieurs fichiers, PDF et images" maxWidth={768}>
+        <CloudImport
+          cloudPicker={CATALOG_CLOUD_PICKER}
+          multiple
+          accept={['application/pdf', 'image/*']}
+          onImport={(_space, files) =>
+            log(`importé ${files.map((file) => file.name).join(', ')}`)
+          }
+        />
+      </Example>
+      <Example title="Le cloud n'a pas pu être préparé" maxWidth={768}>
+        <CloudImport
+          cloudPicker={CATALOG_FAILED_CLOUD_PICKER}
+          onImport={() => undefined}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/ContextSelector.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import {
+  ContextKind,
+  ContextSelector,
+} from '../../src/components/inputs/ContextSelector/ContextSelector';
+import type {
+  ContextSelectorData,
+  ContextValue,
+} from '../../src/components/inputs/ContextSelector/ContextSelector';
+import {
+  OrganizationAvatar,
+  ProjectAvatar,
+  UserAvatar,
+} from '../../src/components/meaning/Avatar/Avatar';
+import { LogoAbyssSmall } from '../../src/assets';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const AVATAR = 22;
+const picture = () => LogoAbyssSmall;
+
+const DATA: ContextSelectorData = {
+  personal: {
+    label: 'Mehdi',
+    avatar: (
+      <UserAvatar
+        userId="u1"
+        alias="Mehdi"
+        hasThumbnail
+        size={AVATAR}
+        getProfilePictureUrl={picture}
+      />
+    ),
+  },
+  organizations: [
+    {
+      id: 'o1',
+      name: 'Abyss',
+      avatar: (
+        <OrganizationAvatar
+          orgId="o1"
+          name="Abyss"
+          hasThumbnail={false}
+          size={AVATAR}
+          getLogoUrl={picture}
+        />
+      ),
+      projects: [
+        {
+          id: 'p1',
+          name: 'Atlas',
+          avatar: (
+            <ProjectAvatar
+              projectId="p1"
+              title="Atlas"
+              hasThumbnail={false}
+              size={AVATAR}
+              getProjectPictureUrl={picture}
+            />
+          ),
+        },
+        { id: 'p2', name: 'Refonte du site vitrine' },
+      ],
+    },
+    { id: 'o2', name: 'Karbon Studio' },
+  ],
+};
+
+export const ContextSelectorPage = () => {
+  const { log } = useEventLog();
+  const [value, setValue] = useState<ContextValue>({
+    kind: ContextKind.Organization,
+    organizationId: 'o1',
+  });
+  return (
+    <Showcase
+      family="Saisie"
+      name="ContextSelector"
+      description="Choix de la portée d'une page : mon espace, puis un groupe par organisation (toute l'organisation, puis ses projets). La saisie filtre les entrées."
+    >
+      <Example title="Portée des ressources" maxWidth={480}>
+        <ContextSelector
+          data={DATA}
+          value={value}
+          onChange={(next) => {
+            setValue(next);
+            log(`portée ${next.kind}`);
+          }}
+          label="Espace"
+        />
+      </Example>
+      <Example title="Inactif" maxWidth={480}>
+        <ContextSelector
+          data={DATA}
+          value={{ kind: ContextKind.Personal }}
+          onChange={() => undefined}
+          label="Espace"
+          disabled
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/CopyField.tsx

@@ -0,0 +1,29 @@
+import { CopyField } from '../../src/components/inputs/CopyField/CopyField';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const CopyFieldPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Saisie"
+      name="CopyField"
+      description="Valeur à copier, masquable : bouton de copie, annonce du résultat dans une région vivante, bouton pour afficher une valeur masquée."
+    >
+      <Example title="Clé d'API, masquée" maxWidth={640}>
+        <CopyField
+          value="abyss_sk_live_5f2c9a7e1b3d4f60a8c2e9b7d1f3a5c7"
+          masked
+          onReveal={() => log('afficher la clé')}
+          copyLabel="Copier la clé"
+        />
+      </Example>
+      <Example title="Identifiant de connexion IA" maxWidth={640}>
+        <CopyField
+          value="https://mcp.abyss-project.fr/u/7f3a9c2e"
+          copyLabel="Copier l'adresse"
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

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/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>
+  );
+};