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

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

package/catalog/pages/index.ts

@@ -1,24 +1,37 @@
 import type { ComponentType } from 'react';
+import { AccountMenuPage } from './AccountMenu';
 import { ActionBarPage } from './ActionBar';
 import { AppShellPage } from './AppShell';
+import { AvatarPage } from './Avatar';
 import { BottomSheetPage } from './BottomSheet';
+import { CalloutPage } from './Callout';
 import { ChartThemePage } from './ChartTheme';
+import { CloudImportPage } from './CloudImport';
 import { ColorFieldPage } from './ColorField';
 import { CommandPalettePage } from './CommandPalette';
 import { ConfirmDialogPage } from './ConfirmDialog';
+import { ContextSelectorPage } from './ContextSelector';
+import { CopyFieldPage } from './CopyField';
 import { DataTablePage } from './DataTable';
 import { DateFieldPage } from './DateField';
 import { DateRangeFieldPage } from './DateRangeField';
 import { DrawerPage } from './Drawer';
+import { DropZonePage } from './DropZone';
 import { FilterBarPage } from './FilterBar';
+import { FormFieldPage } from './FormField';
+import { ImportButtonPage } from './ImportButton';
+import { ImportFromCloudModalPage } from './ImportFromCloudModal';
 import { InfectedDownloadModalPage } from './InfectedDownloadModal';
 import { KeyValueListPage } from './KeyValueList';
 import { MenuPage } from './Menu';
 import { MethodBadgePage } from './MethodBadge';
 import { MobileShellPage } from './MobileShell';
 import { ModalPage } from './Modal';
+import { NotificationsMenuPage } from './NotificationsMenu';
+import { NumberFieldPage } from './NumberField';
 import { PageHeaderPage } from './PageHeader';
 import { PageStatePage } from './PageState';
+import { QRCodeModalPage } from './QRCodeModal';
 import { RichSelectPage } from './RichSelect';
 import { RoleBadgePage } from './RoleBadge';
 import { ScanBadgePage } from './ScanBadge';
@@ -26,6 +39,7 @@ import { SceneDesktopPage } from './SceneDesktop';
 import { SceneMobilePage } from './SceneMobile';
 import { SectionPage } from './Section';
 import { SegmentedControlPage } from './SegmentedControl';
+import { SettingsRowPage } from './SettingsRow';
 import { SeverityBadgePage } from './SeverityBadge';
 import { SparklinePage } from './Sparkline';
 import { SplitViewPage } from './SplitView';
@@ -33,32 +47,47 @@ import { StatTilePage } from './StatTile';
 import { StatusBadgePage } from './StatusBadge';
 import { SurfacePage } from './Surface';
 import { SwipeDeckPage } from './SwipeDeck';
+import { TabsPage } from './Tabs';
 import { ToastPage } from './Toast';
-import { ToolIconPage } from './ToolIcon';
 import { ToolbarPage } from './Toolbar';
+import { ToolIconPage } from './ToolIcon';
+import { UsageMeterPage } from './UsageMeter';
 
 /** Every catalog page, by the `component` URL parameter (`catalog-entries.ts`). */
 export const CATALOG_PAGES: Record<string, ComponentType> = {
+  AccountMenu: AccountMenuPage,
   ActionBar: ActionBarPage,
   AppShell: AppShellPage,
+  Avatar: AvatarPage,
   BottomSheet: BottomSheetPage,
+  Callout: CalloutPage,
   ChartTheme: ChartThemePage,
+  CloudImport: CloudImportPage,
   ColorField: ColorFieldPage,
   CommandPalette: CommandPalettePage,
   ConfirmDialog: ConfirmDialogPage,
+  ContextSelector: ContextSelectorPage,
+  CopyField: CopyFieldPage,
   DataTable: DataTablePage,
   DateField: DateFieldPage,
   DateRangeField: DateRangeFieldPage,
   Drawer: DrawerPage,
+  DropZone: DropZonePage,
   FilterBar: FilterBarPage,
+  FormField: FormFieldPage,
+  ImportButton: ImportButtonPage,
+  ImportFromCloudModal: ImportFromCloudModalPage,
   InfectedDownloadModal: InfectedDownloadModalPage,
   KeyValueList: KeyValueListPage,
   Menu: MenuPage,
   MethodBadge: MethodBadgePage,
   MobileShell: MobileShellPage,
   Modal: ModalPage,
+  NotificationsMenu: NotificationsMenuPage,
+  NumberField: NumberFieldPage,
   PageHeader: PageHeaderPage,
   PageState: PageStatePage,
+  QRCodeModal: QRCodeModalPage,
   RichSelect: RichSelectPage,
   RoleBadge: RoleBadgePage,
   ScanBadge: ScanBadgePage,
@@ -66,6 +95,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   SceneMobile: SceneMobilePage,
   Section: SectionPage,
   SegmentedControl: SegmentedControlPage,
+  SettingsRow: SettingsRowPage,
   SeverityBadge: SeverityBadgePage,
   Sparkline: SparklinePage,
   SplitView: SplitViewPage,
@@ -73,7 +103,9 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   StatusBadge: StatusBadgePage,
   Surface: SurfacePage,
   SwipeDeck: SwipeDeckPage,
+  Tabs: TabsPage,
   Toast: ToastPage,
-  ToolIcon: ToolIconPage,
   Toolbar: ToolbarPage,
+  ToolIcon: ToolIconPage,
+  UsageMeter: UsageMeterPage,
 };

package/catalog/specs/captures.spec.ts

@@ -32,6 +32,13 @@ const REACH: Record<
       .click();
     await expect(page.getByRole('dialog')).toBeVisible();
   },
+  // The first top bar trigger of the page: the notifications bell or the account avatar.
+  'panel-open': async (page) => {
+    await page.locator('[aria-haspopup]').first().click();
+    await expect(
+      page.getByRole('dialog').or(page.getByRole('menu')),
+    ).toBeVisible();
+  },
 };
 
 for (const capture of CAPTURES) {

package/catalog/specs/write-capture-index.ts

@@ -24,6 +24,7 @@ const STATE_LABEL: Record<CaptureState, string> = {
   'sheet-open': ', feuille ouverte',
   'list-open': ', liste ouverte',
   'calendar-open': ', calendrier ouvert',
+  'panel-open': ', panneau ouvert',
 };
 
 const describe = (capture: Capture): string =>