@abyss-project/commons-front-core 9.1.1 → 9.3.0

package/catalog/pages/EntityImageField.tsx

@@ -0,0 +1,124 @@
+import { styled } from '@mui/material/styles';
+import {
+  EntityImageField,
+  EntityImageShape,
+  EntityImageVariant,
+} from '../../src/components/inputs/EntityImageField/EntityImageField';
+import {
+  OrganizationAvatar,
+  UserAvatar,
+} from '../../src/components/meaning/Avatar/Avatar';
+import { LogoAbyssSmall } from '../../src/assets';
+import { px } from '../../src/theme/components/shared';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+import { CATALOG_CLOUD_PICKER } from '../cloud-picker-fixture';
+
+const AVATAR_SIZE = 72;
+
+const picture = () => LogoAbyssSmall;
+
+/** A stand-in banner image: the brand gradient over the width. */
+const BannerPicture = styled('div')(({ theme }) => {
+  const { tokens, space } = theme.design;
+  return {
+    height: px(space[10] * 2),
+    backgroundImage: `linear-gradient(120deg, ${tokens['brand.gradientFrom']}, ${tokens['brand.gradientTo']})`,
+  };
+});
+
+export const EntityImageFieldPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Saisie"
+      name="EntityImageField"
+      description="L'image d'une entité, changée sur place : l'avatar est lui-même le bouton (pastille d'appareil photo), la bannière porte un bouton en surimpression. Sans AbyssCloud, le bouton ouvre le sélecteur de fichiers ; avec, le menu des sources."
+    >
+      <Example title="Avatars : photo ronde avec AbyssCloud, logo carré sans">
+        <Row>
+          <EntityImageField
+            variant={EntityImageVariant.Avatar}
+            picture={
+              <UserAvatar
+                userId="u1"
+                alias="Mehdi"
+                hasThumbnail
+                size={AVATAR_SIZE}
+                getProfilePictureUrl={picture}
+              />
+            }
+            label="Changer la photo"
+            accept={['image/*']}
+            onFile={(file) => log(`fichier ${file.name}`)}
+            uploading={false}
+            cloudImport={{
+              ...CATALOG_CLOUD_PICKER,
+              onImport: (_space, files) =>
+                log(`importé ${files.map((file) => file.name).join(', ')}`),
+            }}
+          />
+          <EntityImageField
+            variant={EntityImageVariant.Avatar}
+            shape={EntityImageShape.Square}
+            picture={
+              <OrganizationAvatar
+                orgId="o1"
+                name="Abyss"
+                hasThumbnail={false}
+                size={AVATAR_SIZE}
+                getLogoUrl={picture}
+              />
+            }
+            label="Changer le logo"
+            accept={['image/*']}
+            onFile={(file) => log(`fichier ${file.name}`)}
+            uploading={false}
+          />
+        </Row>
+      </Example>
+      <Example title="Envoi en cours">
+        <EntityImageField
+          variant={EntityImageVariant.Avatar}
+          shape={EntityImageShape.Square}
+          picture={
+            <OrganizationAvatar
+              orgId="o2"
+              name="Atlas"
+              hasThumbnail={false}
+              size={AVATAR_SIZE}
+              getLogoUrl={picture}
+            />
+          }
+          label="Changer le logo"
+          onFile={(file) => log(`fichier ${file.name}`)}
+          uploading
+        />
+      </Example>
+      <Example title="Bannière d'organisation" maxWidth={720}>
+        <EntityImageField
+          variant={EntityImageVariant.Banner}
+          picture={<BannerPicture />}
+          label="Changer la bannière"
+          accept={['image/*']}
+          onFile={(file) => log(`bannière ${file.name}`)}
+          uploading={false}
+          cloudImport={{
+            ...CATALOG_CLOUD_PICKER,
+            onImport: (_space, files) =>
+              log(`bannière ${files.map((file) => file.name).join(', ')}`),
+          }}
+        />
+      </Example>
+      <Example title="Bannière, envoi en cours" maxWidth={720}>
+        <EntityImageField
+          variant={EntityImageVariant.Banner}
+          picture={<BannerPicture />}
+          label="Changer la bannière"
+          onFile={(file) => log(`bannière ${file.name}`)}
+          uploading
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/LineChart.tsx

@@ -0,0 +1,138 @@
+import { LineChart } from '../../src/components/data/LineChart/LineChart';
+import type {
+  LineChartSeries,
+  LineChartX,
+} from '../../src/components/data/LineChart/LineChart';
+import { ChartSeriesTone } from '../../src/components/data/chart-series-tone';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { Example, Showcase } from '../frame';
+
+const START = new Date(2026, 9, 13, 0);
+
+const atHour = (hour: number) =>
+  new Date(START.getTime() + hour * 60 * 60 * 1000);
+
+const REQUESTS = [
+  42, 31, 24, 19, 17, 22, 48, 96, 184, 236, 262, 248, 231, 244, 268, 281, 254,
+  212, 168, 131, 104, 86, 67, 51,
+];
+const ERRORS = [
+  1, 0, 0, 0, 1, 0, 2, 4, 9, 6, 5, 4, 12, 18, 7, 5, 4, 3, 3, 2, 1, 1, 0, 1,
+];
+const LATENCY = [
+  88, 84, 81, 80, 79, 83, 94, 118, 141, 152, 158, 155, 149, 162, 171, 166, 150,
+  133, 117, 104, 97, 93, 90, 89,
+];
+
+const hourly = (
+  id: string,
+  label: string,
+  values: number[],
+  tone?: ChartSeriesTone,
+): LineChartSeries => ({
+  id,
+  label,
+  points: values.map((y, hour) => ({ x: atHour(hour), y })),
+  tone,
+});
+
+const DELIVERED = REQUESTS.map((value, hour) => value - ERRORS[hour]);
+
+const SIX_SERIES: LineChartSeries[] = [
+  'Atlas',
+  'Board',
+  'Draw',
+  'Beam',
+  'Extract',
+  'ShortLink',
+].map((label, index) => ({
+  id: label.toLowerCase(),
+  label,
+  points: Array.from({ length: 12 }, (_, month) => ({
+    x: month + 1,
+    y: 20 + index * 12 + Math.round(10 * Math.sin((month + index) / 2)),
+  })),
+}));
+
+const time = new Intl.DateTimeFormat('fr-FR', {
+  hour: '2-digit',
+  minute: '2-digit',
+});
+const count = new Intl.NumberFormat('fr-FR');
+
+const formatHour = (x: LineChartX) =>
+  time.format(x instanceof Date ? x : new Date(x));
+const formatMonth = (x: LineChartX) =>
+  `M${count.format(x instanceof Date ? x.getMonth() + 1 : x)}`;
+
+export const LineChartPage = () => (
+  <Showcase
+    family="Données"
+    name="LineChart"
+    description="Courbes Nivo sous abyssNivoTheme : couleurs prises dans l'ordre de la palette data.series, ou dans status.* pour une série à ton ; aires empilées avec stacked ; légende au-delà d'une série, figure nommée et tableau des valeurs pour les lecteurs d'écran."
+  >
+    <Example title="Une série, aire">
+      <Surface padding={4}>
+        <LineChart
+          series={[hourly('requests', 'Requêtes', REQUESTS)]}
+          height={240}
+          area
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Requêtes par heure, sur 24 heures"
+        />
+      </Surface>
+    </Example>
+    <Example title="Deux séries">
+      <Surface padding={4}>
+        <LineChart
+          series={[
+            hourly('latency', 'Latence p95', LATENCY),
+            hourly('errors', 'Erreurs', ERRORS),
+          ]}
+          height={240}
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Latence et erreurs par heure"
+        />
+      </Surface>
+    </Example>
+    <Example title="Empilées, séries à ton (délivrés et échecs)">
+      <Surface padding={4}>
+        <LineChart
+          series={[
+            hourly('delivered', 'Délivrés', DELIVERED, ChartSeriesTone.Success),
+            hourly('failed', 'Échecs', ERRORS, ChartSeriesTone.Danger),
+          ]}
+          height={240}
+          stacked
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Webhooks délivrés et en échec par heure"
+        />
+      </Surface>
+    </Example>
+    <Example title="Palette des six séries">
+      <Surface padding={4}>
+        <LineChart
+          series={SIX_SERIES}
+          height={240}
+          formatX={formatMonth}
+          formatY={(y) => count.format(y)}
+          label="Contenus créés par outil et par mois"
+        />
+      </Surface>
+    </Example>
+    <Example title="Aucune donnée">
+      <Surface padding={4}>
+        <LineChart
+          series={[{ id: 'requests', label: 'Requêtes', points: [] }]}
+          height={160}
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Requêtes par heure"
+        />
+      </Surface>
+    </Example>
+  </Showcase>
+);

package/catalog/pages/Pagination.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+
+import { Pagination } from '../../src/components/data/Pagination/Pagination';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+/** A paged list the reader can walk through: the page is held here, as a host would. */
+const LivePagination = ({
+  initialPage,
+  pageCount,
+  label,
+}: {
+  initialPage: number;
+  pageCount: number;
+  label: string;
+}) => {
+  const { log } = useEventLog();
+  const [page, setPage] = useState(initialPage);
+  return (
+    <Pagination
+      page={page}
+      pageCount={pageCount}
+      label={label}
+      onChange={(next) => {
+        setPage(next);
+        log(`page ${next}`);
+      }}
+    />
+  );
+};
+
+export const PaginationPage = () => (
+  <Showcase
+    family="Données"
+    name="Pagination"
+    description="Navigation entre les pages d'une liste : précédent, numéros avec ellipses, suivant ; sous 768 px, précédent, « Page x sur y », suivant."
+  >
+    <Example title="Cinq pages">
+      <LivePagination initialPage={2} pageCount={5} label="Pages des membres" />
+    </Example>
+    <Example title="Quarante pages, au milieu">
+      <LivePagination
+        initialPage={18}
+        pageCount={40}
+        label="Pages des permissions"
+      />
+    </Example>
+    <Example title="Quarante pages, près du début">
+      <LivePagination initialPage={3} pageCount={40} label="Pages du journal" />
+    </Example>
+    <LastEvent />
+  </Showcase>
+);

package/catalog/pages/Section.tsx

@@ -1,6 +1,9 @@
 import Button from '@mui/material/Button';
 import ArrowForwardRounded from '@mui/icons-material/ArrowForwardRounded';
-import { Section } from '../../src/components/structure/Section/Section';
+import {
+  Section,
+  SectionTone,
+} from '../../src/components/structure/Section/Section';
 import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
 import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
 import { ACCOUNTS, LONG_NAV_LABEL, formatEuro } from '../fixtures';
@@ -12,7 +15,7 @@ export const SectionPage = () => {
     <Showcase
       family="Structure"
       name="Section"
-      description="Bloc titré d'une page : titre de 16 px, compteur en mono, actions alignées à droite."
+      description="Bloc titré d'une page : titre de 16 px, compteur en mono, actions alignées à droite. En ton danger, titre et filet en rouge."
     >
       <Example title="Avec compteur et action">
         <Section
@@ -67,6 +70,17 @@ export const SectionPage = () => {
           />
         </Section>
       </Example>
+      <Example title="Zone de danger">
+        <Section title="Zone de danger" tone={SectionTone.Danger}>
+          <Button
+            variant="outlined"
+            color="error"
+            onClick={() => log('supprimer l’organisation')}
+          >
+            Supprimer l’organisation
+          </Button>
+        </Section>
+      </Example>
       <Example title="Titre de 200 caractères sans espace">
         <Section title={LONG_NAV_LABEL} count={12}>
           <LastEvent />

package/catalog/pages/TeamAvatar.tsx

@@ -0,0 +1,40 @@
+import { useTheme } from '@mui/material/styles';
+
+import { TeamAvatar } from '../../src/components/meaning/TeamAvatar/TeamAvatar';
+import { Example, Row, Showcase } from '../frame';
+
+export const TeamAvatarPage = () => {
+  // Stored team colors are user data; the catalog borrows token values so as not to hard-code any.
+  const { tokens } = useTheme().design;
+  return (
+    <Showcase
+      family="Sens"
+      name="TeamAvatar"
+      description="Équipe : l'initiale de son nom sur sa couleur, dans un carré arrondi, à l'encre claire ou sombre qui contraste le mieux. Sans couleur, ou avec une couleur que le navigateur ne sait pas lire, la teinte neutre des avatars."
+    >
+      <Example title="Couleurs d'équipe, foncées et claires" framed>
+        <Row>
+          <TeamAvatar name="Design" color={tokens['status.info']} />
+          <TeamAvatar name="Ops" color={tokens['status.success']} />
+          <TeamAvatar name="Support" color={tokens['status.warning']} />
+          <TeamAvatar name="Finance" color={tokens['status.highlight']} />
+          <TeamAvatar name="Sécurité" color={tokens['status.danger']} />
+        </Row>
+      </Example>
+      <Example title="Sans couleur, couleur illisible, sans nom" framed>
+        <Row>
+          <TeamAvatar name="Marketing" color={null} />
+          <TeamAvatar name="Ventes" color="pas-une-couleur" />
+          <TeamAvatar name="" color={tokens['status.info']} />
+        </Row>
+      </Example>
+      <Example title="Tailles : 22, 32 (défaut), 64" framed>
+        <Row>
+          <TeamAvatar name="Ops" color={tokens['status.info']} size={22} />
+          <TeamAvatar name="Ops" color={tokens['status.info']} />
+          <TeamAvatar name="Ops" color={tokens['status.info']} size={64} />
+        </Row>
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/UserPicker.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useState } from 'react';
+import { UserPicker } from '../../src/components/inputs/UserPicker/UserPicker';
+import type { UserPickerOption } from '../../src/components/inputs/UserPicker/UserPicker';
+import { LogoAbyssSmall } from '../../src/assets';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const MEMBERS: UserPickerOption[] = [
+  {
+    id: 'u1',
+    name: 'Mehdi Benali',
+    email: 'mehdi@abyss.fr',
+    pictureUrl: LogoAbyssSmall,
+  },
+  {
+    id: 'u2',
+    name: 'Alice Martin',
+    email: 'alice.martin@karbon-studio.fr',
+    pictureUrl: null,
+  },
+  { id: 'u3', name: 'Bruno Petit', email: 'bruno@abyss.fr', pictureUrl: null },
+  { id: 'u4', name: 'Clara Durand', email: null, pictureUrl: null },
+  {
+    id: 'u5',
+    name: 'Maximilien-Alexandre de La Tour d’Auvergne',
+    email: 'maximilien-alexandre.delatourdauvergne@exemple-tres-long.fr',
+    pictureUrl: null,
+  },
+];
+
+/** Delay of the simulated server search, in ms. */
+const SEARCH_DELAY = 600;
+
+/** A server search answered from memory, after a delay: the catalog has no network. */
+const useSimulatedSearch = () => {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<UserPickerOption[]>(MEMBERS);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    setLoading(true);
+    const timer = setTimeout(() => {
+      const text = query.trim().toLowerCase();
+      setResults(
+        MEMBERS.filter((member) =>
+          [member.name, member.email ?? ''].some((field) =>
+            field.toLowerCase().includes(text),
+          ),
+        ),
+      );
+      setLoading(false);
+    }, SEARCH_DELAY);
+    return () => clearTimeout(timer);
+  }, [query]);
+  return { results, loading, search: setQuery };
+};
+
+export const UserPickerPage = () => {
+  const { log } = useEventLog();
+  const [owner, setOwner] = useState<string | null>('u2');
+  const [recipients, setRecipients] = useState<string[]>(['u1', 'u3']);
+  const [target, setTarget] = useState<string | null>(null);
+  const remote = useSimulatedSearch();
+  return (
+    <Showcase
+      family="Saisie"
+      name="UserPicker"
+      description="Choix d'un utilisateur ou de plusieurs : avatar, nom et e-mail dans chaque option, recherche sur le nom et l'e-mail (locale, ou confiée au serveur par onSearch). En multiple, les choisis sont des puces que le clavier retire."
+    >
+      <Example title="Choix simple" maxWidth={480}>
+        <UserPicker
+          options={MEMBERS}
+          value={owner}
+          onChange={(next) => {
+            setOwner(next);
+            log(`responsable ${next ?? 'aucun'}`);
+          }}
+          label="Responsable de l’équipe"
+          placeholder="Choisir un membre"
+          noOptionsText="Aucun membre ne correspond"
+        />
+      </Example>
+      <Example title="Choix multiple" maxWidth={480}>
+        <UserPicker
+          multiple
+          options={MEMBERS}
+          value={recipients}
+          onChange={(next) => {
+            setRecipients(next);
+            log(`destinataires ${next.join(', ')}`);
+          }}
+          label="Destinataires du rapport"
+          placeholder="Ajouter un membre"
+          noOptionsText="Aucun membre ne correspond"
+        />
+      </Example>
+      <Example title="Recherche serveur, propriétaire exclu" maxWidth={480}>
+        <UserPicker
+          options={remote.results}
+          onSearch={remote.search}
+          loading={remote.loading}
+          value={target}
+          onChange={(next) => {
+            setTarget(next);
+            log(`nouveau propriétaire ${next ?? 'aucun'}`);
+          }}
+          disabledIds={['u1']}
+          label="Nouveau propriétaire"
+          placeholder="Rechercher un membre"
+          noOptionsText="Aucun membre ne correspond"
+        />
+      </Example>
+      <Example title="Inactif" maxWidth={480}>
+        <UserPicker
+          options={MEMBERS}
+          value="u1"
+          onChange={() => undefined}
+          label="Responsable de l’équipe"
+          noOptionsText="Aucun membre ne correspond"
+          disabled
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/index.ts

@@ -1,8 +1,10 @@
 import type { ComponentType } from 'react';
 import { AccountMenuPage } from './AccountMenu';
 import { ActionBarPage } from './ActionBar';
+import { AmbientBackgroundPage } from './AmbientBackground';
 import { AppShellPage } from './AppShell';
 import { AvatarPage } from './Avatar';
+import { BarChartPage } from './BarChart';
 import { BottomSheetPage } from './BottomSheet';
 import { CalloutPage } from './Callout';
 import { ChartThemePage } from './ChartTheme';
@@ -10,8 +12,16 @@ import { CloudImportPage } from './CloudImport';
 import { ColorFieldPage } from './ColorField';
 import { CommandPalettePage } from './CommandPalette';
 import { ConfirmDialogPage } from './ConfirmDialog';
+import { ConfirmDialogWarningPage } from './ConfirmDialogWarning';
 import { ContextSelectorPage } from './ContextSelector';
 import { CopyFieldPage } from './CopyField';
+import { LineChartPage } from './LineChart';
+import { PaginationPage } from './Pagination';
+import { AvatarGroupPage } from './AvatarGroup';
+import { TeamAvatarPage } from './TeamAvatar';
+import { UserPickerPage } from './UserPicker';
+import { CompanySearchFieldPage } from './CompanySearchField';
+import { EntityImageFieldPage } from './EntityImageField';
 import { DataTablePage } from './DataTable';
 import { DateFieldPage } from './DateField';
 import { DateRangeFieldPage } from './DateRangeField';
@@ -58,8 +68,10 @@ import { UsageMeterPage } from './UsageMeter';
 export const CATALOG_PAGES: Record<string, ComponentType> = {
   AccountMenu: AccountMenuPage,
   ActionBar: ActionBarPage,
+  AmbientBackground: AmbientBackgroundPage,
   AppShell: AppShellPage,
   Avatar: AvatarPage,
+  BarChart: BarChartPage,
   BottomSheet: BottomSheetPage,
   Callout: CalloutPage,
   ChartTheme: ChartThemePage,
@@ -67,8 +79,16 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   ColorField: ColorFieldPage,
   CommandPalette: CommandPalettePage,
   ConfirmDialog: ConfirmDialogPage,
+  ConfirmDialogWarning: ConfirmDialogWarningPage,
   ContextSelector: ContextSelectorPage,
   CopyField: CopyFieldPage,
+  LineChart: LineChartPage,
+  Pagination: PaginationPage,
+  AvatarGroup: AvatarGroupPage,
+  TeamAvatar: TeamAvatarPage,
+  UserPicker: UserPickerPage,
+  CompanySearchField: CompanySearchFieldPage,
+  EntityImageField: EntityImageFieldPage,
   DataTable: DataTablePage,
   DateField: DateFieldPage,
   DateRangeField: DateRangeFieldPage,