@abyss-project/commons-front-core 6.0.0 → 7.0.0

package/catalog/pages/Toast.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useMemo, useRef } from 'react';
+import Button from '@mui/material/Button';
+import {
+  ToastProvider,
+  useToast,
+  ToastTone,
+} from '../../src/components/layers/Toast/Toast';
+import type { ToastOptions } from '../../src/components/layers/Toast/Toast';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+/** The French name of each tone, on the buttons of the page. */
+const TONE_LABELS: Record<ToastTone, string> = {
+  [ToastTone.Success]: 'succès',
+  [ToastTone.Info]: 'information',
+  [ToastTone.Warning]: 'avertissement',
+  [ToastTone.Danger]: 'erreur',
+};
+
+const ToastDemo = () => {
+  const toast = useToast();
+  const { log } = useEventLog();
+  const shown = useRef(false);
+
+  const samples = useMemo<ToastOptions[]>(
+    () => [
+      {
+        tone: ToastTone.Success,
+        message:
+          'Règle créée : les prélèvements OVH SAS iront en Logiciels & hébergement.',
+      },
+      {
+        tone: ToastTone.Info,
+        message: '3 transactions catégorisées.',
+        action: {
+          label: 'Annuler',
+          onPress: () => log('annuler la catégorisation'),
+        },
+      },
+      {
+        tone: ToastTone.Warning,
+        message: 'Connexion Qonto : expire dans 6 jours.',
+      },
+      {
+        tone: ToastTone.Danger,
+        message: 'Export impossible : délai dépassé.',
+        action: {
+          label: 'Réessayer',
+          onPress: () => log("réessayer l'export"),
+        },
+      },
+    ],
+    [log],
+  );
+
+  // Shown on arrival, so the page shows the stack without a click; once, despite StrictMode.
+  useEffect(() => {
+    if (shown.current) {
+      return;
+    }
+    shown.current = true;
+    samples.forEach((sample) => toast.show(sample));
+  }, [samples, toast]);
+
+  return (
+    <Row>
+      {samples.map((sample) => (
+        <Button
+          key={sample.tone}
+          variant="outlined"
+          onClick={() => toast.show(sample)}
+        >
+          Notifier · {TONE_LABELS[sample.tone]}
+        </Button>
+      ))}
+    </Row>
+  );
+};
+
+export const ToastPage = () => (
+  <ToastProvider>
+    <Showcase
+      family="Couches"
+      name="Toast"
+      description="Notification passagère en bas à droite : quatre tons, une action facultative, retenue au survol ou au focus."
+    >
+      <Example title="Les quatre tons, deux avec action">
+        <ToastDemo />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  </ToastProvider>
+);

package/catalog/pages/ToolIcon.tsx

@@ -0,0 +1,48 @@
+import { styled } from '@mui/material/styles';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import type { ToolIconSize } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { px } from '../../src/theme/components/shared';
+import { ToolKind } from '../../src/theme/tokens/domain';
+import { Example, Showcase } from '../frame';
+
+const SIZES: ToolIconSize[] = [16, 20, 24, 32, 44];
+
+const Tile = styled('figure')(({ theme }) => ({
+  margin: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  // Captions on one baseline whatever the icon size.
+  justifyContent: 'flex-end',
+  alignSelf: 'stretch',
+  gap: px(theme.design.space[2]),
+  width: px(theme.design.space[10] + theme.design.space[6]),
+  fontSize: px(theme.design.typeScale.small),
+  color: theme.design.tokens['text.secondary'],
+  '& > figcaption': { fontFamily: theme.design.fonts.mono },
+}));
+
+export const ToolIconPage = () => (
+  <Showcase
+    family="Sens"
+    name="ToolIcon"
+    description="Icône de chaque produit de l'écosystème, en dégradé de marque : un outil se reconnaît à son icône, pas à une couleur."
+  >
+    <Example title="Les dix-huit produits, 32 px" framed>
+      {Object.values(ToolKind).map((tool) => (
+        <Tile key={tool}>
+          <ToolIcon tool={tool} size={32} label={tool} />
+          <figcaption>{tool}</figcaption>
+        </Tile>
+      ))}
+    </Example>
+    <Example title="Les cinq tailles" framed>
+      {SIZES.map((size) => (
+        <Tile key={size}>
+          <ToolIcon tool={ToolKind.Cloud} size={size} label={`Cloud ${size}`} />
+          <figcaption>{size}</figcaption>
+        </Tile>
+      ))}
+    </Example>
+  </Showcase>
+);

package/catalog/pages/Toolbar.tsx

@@ -0,0 +1,73 @@
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import ChatBubbleOutlineOutlined from '@mui/icons-material/ChatBubbleOutlineOutlined';
+import ContentCopyOutlined from '@mui/icons-material/ContentCopyOutlined';
+import EditOutlined from '@mui/icons-material/EditOutlined';
+import FileDownloadOutlined from '@mui/icons-material/FileDownloadOutlined';
+import LinkOutlined from '@mui/icons-material/LinkOutlined';
+import SellOutlined from '@mui/icons-material/SellOutlined';
+import { Toolbar } from '../../src/components/structure/Toolbar/Toolbar';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const ToolbarPage = () => {
+  const { log } = useEventLog();
+  return (
+    <Showcase
+      family="Structure"
+      name="Toolbar"
+      description="Rangée d'actions ou de contrôles, sans fond ni bordure, qui passe à la ligne au lieu de déborder."
+    >
+      <Example title="Actions d'une sélection de transactions">
+        <Toolbar>
+          <Button
+            variant="outlined"
+            startIcon={<SellOutlined />}
+            onClick={() => log('catégoriser')}
+          >
+            Catégoriser
+          </Button>
+          <Button
+            variant="outlined"
+            startIcon={<ChatBubbleOutlineOutlined />}
+            onClick={() => log('commenter')}
+          >
+            Commenter
+          </Button>
+          <Button
+            variant="outlined"
+            startIcon={<FileDownloadOutlined />}
+            onClick={() => log('exporter la sélection')}
+          >
+            Exporter la sélection
+          </Button>
+        </Toolbar>
+      </Example>
+      <Example title="Dense, dans l'en-tête d'une carte">
+        <Toolbar dense>
+          <IconButton
+            size="small"
+            aria-label="Copier le lien"
+            onClick={() => log('copier le lien')}
+          >
+            <LinkOutlined />
+          </IconButton>
+          <IconButton
+            size="small"
+            aria-label="Dupliquer"
+            onClick={() => log('dupliquer')}
+          >
+            <ContentCopyOutlined />
+          </IconButton>
+          <IconButton
+            size="small"
+            aria-label="Modifier"
+            onClick={() => log('modifier')}
+          >
+            <EditOutlined />
+          </IconButton>
+        </Toolbar>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/index.ts

@@ -0,0 +1,79 @@
+import type { ComponentType } from 'react';
+import { ActionBarPage } from './ActionBar';
+import { AppShellPage } from './AppShell';
+import { BottomSheetPage } from './BottomSheet';
+import { ChartThemePage } from './ChartTheme';
+import { ColorFieldPage } from './ColorField';
+import { CommandPalettePage } from './CommandPalette';
+import { ConfirmDialogPage } from './ConfirmDialog';
+import { DataTablePage } from './DataTable';
+import { DateFieldPage } from './DateField';
+import { DateRangeFieldPage } from './DateRangeField';
+import { DrawerPage } from './Drawer';
+import { FilterBarPage } from './FilterBar';
+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 { PageHeaderPage } from './PageHeader';
+import { PageStatePage } from './PageState';
+import { RichSelectPage } from './RichSelect';
+import { RoleBadgePage } from './RoleBadge';
+import { ScanBadgePage } from './ScanBadge';
+import { SceneDesktopPage } from './SceneDesktop';
+import { SceneMobilePage } from './SceneMobile';
+import { SectionPage } from './Section';
+import { SegmentedControlPage } from './SegmentedControl';
+import { SeverityBadgePage } from './SeverityBadge';
+import { SparklinePage } from './Sparkline';
+import { SplitViewPage } from './SplitView';
+import { StatTilePage } from './StatTile';
+import { StatusBadgePage } from './StatusBadge';
+import { SurfacePage } from './Surface';
+import { SwipeDeckPage } from './SwipeDeck';
+import { ToastPage } from './Toast';
+import { ToolIconPage } from './ToolIcon';
+import { ToolbarPage } from './Toolbar';
+
+/** Every catalog page, by the `component` URL parameter (`catalog-entries.ts`). */
+export const CATALOG_PAGES: Record<string, ComponentType> = {
+  ActionBar: ActionBarPage,
+  AppShell: AppShellPage,
+  BottomSheet: BottomSheetPage,
+  ChartTheme: ChartThemePage,
+  ColorField: ColorFieldPage,
+  CommandPalette: CommandPalettePage,
+  ConfirmDialog: ConfirmDialogPage,
+  DataTable: DataTablePage,
+  DateField: DateFieldPage,
+  DateRangeField: DateRangeFieldPage,
+  Drawer: DrawerPage,
+  FilterBar: FilterBarPage,
+  InfectedDownloadModal: InfectedDownloadModalPage,
+  KeyValueList: KeyValueListPage,
+  Menu: MenuPage,
+  MethodBadge: MethodBadgePage,
+  MobileShell: MobileShellPage,
+  Modal: ModalPage,
+  PageHeader: PageHeaderPage,
+  PageState: PageStatePage,
+  RichSelect: RichSelectPage,
+  RoleBadge: RoleBadgePage,
+  ScanBadge: ScanBadgePage,
+  SceneDesktop: SceneDesktopPage,
+  SceneMobile: SceneMobilePage,
+  Section: SectionPage,
+  SegmentedControl: SegmentedControlPage,
+  SeverityBadge: SeverityBadgePage,
+  Sparkline: SparklinePage,
+  SplitView: SplitViewPage,
+  StatTile: StatTilePage,
+  StatusBadge: StatusBadgePage,
+  Surface: SurfacePage,
+  SwipeDeck: SwipeDeckPage,
+  Toast: ToastPage,
+  ToolIcon: ToolIconPage,
+  Toolbar: ToolbarPage,
+};