@abyss-project/commons-front-core 8.2.0 → 9.0.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

@@ -30,7 +30,7 @@ export const MenuPage = () => {
     <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."
+      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
@@ -51,6 +51,7 @@ export const MenuPage = () => {
           {
             id: 'share',
             label: 'Partager',
+            description: 'Lien ou invitation par courriel',
             icon: <IosShareOutlined />,
             shortcut: 'Ctrl+Maj+S',
             onSelect: select('partager'),

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

package/catalog/pages/Tabs.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { Tabs, TabsVariant } from '../../src/components/structure/Tabs/Tabs';
+import type { TabItem } from '../../src/components/structure/Tabs/Tabs';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const ACCOUNT_TABS: TabItem[] = [
+  { value: 'profile', label: 'Profil', to: '/compte/profil' },
+  { value: 'security', label: 'Sécurité', to: '/compte/securite' },
+  {
+    value: 'notifications',
+    label: 'Notifications',
+    to: '/compte/notifications',
+  },
+  { value: 'family', label: 'Famille', to: '/compte/famille', badge: 2 },
+  { value: 'billing', label: 'Facturation', to: '/compte/facturation' },
+  { value: 'api-key', label: 'Clé d’API', to: '/compte/cle-api' },
+  { value: 'ai', label: 'Connexions IA', to: '/compte/connexions-ia' },
+  {
+    value: 'admin',
+    label: 'Administration',
+    to: '/compte/admin',
+    hidden: true,
+  },
+];
+
+const BILLING_TABS: TabItem[] = [
+  { value: 'overview', label: 'Vue d’ensemble' },
+  { value: 'subscription', label: 'Abonnement' },
+  { value: 'storage', label: 'Stockage' },
+  { value: 'credits', label: 'Crédits' },
+  { value: 'payment', label: 'Moyens de paiement' },
+  { value: 'invoices', label: 'Factures', badge: 'Nouveau' },
+];
+
+export const TabsPage = () => {
+  const { log } = useEventLog();
+  const [account, setAccount] = useState('billing');
+  const [billing, setBilling] = useState('overview');
+  return (
+    <Showcase
+      family="Structure"
+      name="Tabs"
+      description="Rangée d'onglets : liens de route ou boutons, deux variantes, un seul arrêt de tabulation, flèches, Début et Fin, défilement horizontal avec un fondu tant qu'il reste des onglets à droite."
+    >
+      <Example title="Navigation du compte (primaire, liens de route ; « Administration » est masqué)">
+        <Tabs
+          aria-label="Compte"
+          variant={TabsVariant.Primary}
+          items={ACCOUNT_TABS}
+          value={account}
+          onChange={(next) => {
+            setAccount(next);
+            log(`onglet ${next}`);
+          }}
+        />
+      </Example>
+      <Example title="Sous-navigation de la facturation (secondaire, boutons)">
+        <Tabs
+          aria-label="Facturation"
+          variant={TabsVariant.Secondary}
+          items={BILLING_TABS}
+          value={billing}
+          onChange={(next) => {
+            setBilling(next);
+            log(`sous-onglet ${next}`);
+          }}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/UsageMeter.tsx

@@ -0,0 +1,58 @@
+import { UsageMeter } from '../../src/components/data/UsageMeter/UsageMeter';
+import { Columns, Example, Showcase } from '../frame';
+import { formatInteger } from '../fixtures';
+
+const THRESHOLDS = { warning: 0.8, danger: 1 };
+
+const gigabyteFormat = new Intl.NumberFormat('fr-FR', {
+  maximumFractionDigits: 1,
+});
+
+const gigabytes = (value: number): string =>
+  `${gigabyteFormat.format(value)} Go`;
+
+export const UsageMeterPage = () => (
+  <Showcase
+    family="Données"
+    name="UsageMeter"
+    description="Consommation sur un plafond : jauge à l'accent, puis à l'avertissement et au danger aux seuils ; sans plafond, la valeur seule."
+  >
+    <Example title="Sous les seuils, au seuil d'avertissement, au plafond">
+      <Columns>
+        <UsageMeter
+          label="Stockage"
+          value={3.2}
+          max={10}
+          thresholds={THRESHOLDS}
+          formatValue={gigabytes}
+        />
+        <UsageMeter
+          label="Crédits IA"
+          value={8600}
+          max={10000}
+          thresholds={THRESHOLDS}
+          formatValue={formatInteger}
+        />
+        <UsageMeter
+          label="Membres"
+          value={5}
+          max={5}
+          thresholds={THRESHOLDS}
+          formatValue={formatInteger}
+        />
+      </Columns>
+    </Example>
+    <Example title="Au-delà du plafond, et sans plafond">
+      <Columns>
+        <UsageMeter
+          label="Stockage"
+          value={12.5}
+          max={10}
+          thresholds={THRESHOLDS}
+          formatValue={gigabytes}
+        />
+        <UsageMeter label="Fichiers" value={3210} formatValue={formatInteger} />
+      </Columns>
+    </Example>
+  </Showcase>
+);