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

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

package/catalog/pages/index.ts

@@ -2,16 +2,25 @@ 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';
@@ -19,8 +28,10 @@ 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';
@@ -28,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';
@@ -35,25 +47,36 @@ 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,
@@ -61,8 +84,10 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   MobileShell: MobileShellPage,
   Modal: ModalPage,
   NotificationsMenu: NotificationsMenuPage,
+  NumberField: NumberFieldPage,
   PageHeader: PageHeaderPage,
   PageState: PageStatePage,
+  QRCodeModal: QRCodeModalPage,
   RichSelect: RichSelectPage,
   RoleBadge: RoleBadgePage,
   ScanBadge: ScanBadgePage,
@@ -70,6 +95,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   SceneMobile: SceneMobilePage,
   Section: SectionPage,
   SegmentedControl: SegmentedControlPage,
+  SettingsRow: SettingsRowPage,
   SeverityBadge: SeverityBadgePage,
   Sparkline: SparklinePage,
   SplitView: SplitViewPage,
@@ -77,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,
 };