@abyss-project/commons-front-core 9.4.0 → 9.4.2

package/README.md

@@ -99,6 +99,16 @@ Tickets du programme Abyss Founders (carte #285, livraison D). Détail dans [`sr
 - **`SupportCategorySelect`, `SupportSidebar`** : `FUNDING_PROGRAMME` n'est proposée ni dans le champ catégorie du formulaire de création ni dans la recatégorisation admin ; un ticket de cette catégorie garde sa catégorie (chip sans champ). Le filtre multiple la propose toujours.
 - **Traductions** : `support.category.FUNDING_PROGRAMME`, `support.system.*` (dont `REQUEST_WITHDRAWN` et `ENVELOPE_EXPIRED`), FR et EN.
 
+### 9.3.1 à 9.3.3
+
+Correctifs de la zone 4a (carte #286), relevés par son e2e responsive et sa revue finale.
+
+- **9.3.1, `CopyField`** : sous 768 px, le bouton d'affichage fait 44×44 px et le bouton de copie 44 px de haut.
+- **9.3.2, `DropZone`** : la limite s'écrit nombre, espace insécable, unité (« 2,00 Go »).
+- **9.3.3, `FormField`** : le libellé est un `FormLabel` statique au-dessus du champ, quel que soit le thème MUI chargé
+  (la surcharge legacy de `MuiInputLabel-outlined` le plaçait dans le cadre).
+- **9.3.3, `KeyValueList`** : `stackOnMobile` empile libellé et valeur sous 768 px.
+
 ### 9.3.0
 
 Pages des outils du front principal sur le design system (carte #286, zone 4a). Pièces nouvelles et évolutions,

package/catalog/captures-plan.ts

@@ -34,7 +34,8 @@ export type CaptureState =
   | 'sheet-open'
   | 'list-open'
   | 'calendar-open'
-  | 'panel-open';
+  | 'panel-open'
+  | 'menu-open';
 
 /** File name suffix of each state. */
 const STATE_SUFFIX: Record<CaptureState, string> = {
@@ -43,15 +44,18 @@ const STATE_SUFFIX: Record<CaptureState, string> = {
   'list-open': '-liste',
   'calendar-open': '-calendrier',
   'panel-open': '-ouvert',
+  'menu-open': '-ouvert',
 };
 
 /** The states shown beyond arrival: what a closed control hides (options, calendar, sheet). */
 const EXTRA_STATES: Record<string, CaptureState> = {
   SceneMobile: 'sheet-open',
   RichSelect: 'list-open',
+  ExpressionSearch: 'list-open',
   DateField: 'calendar-open',
   NotificationsMenu: 'panel-open',
   AccountMenu: 'panel-open',
+  ValueMenu: 'menu-open',
 };
 
 export interface Capture {

package/catalog/catalog-entries.ts

@@ -63,7 +63,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('BottomSheet', 'mobile', 'bottom-sheet', RESPONSIVE),
   entry('ActionBar', 'mobile', 'action-bar', RESPONSIVE),
   entry('SwipeDeck', 'mobile', 'swipe-deck', RESPONSIVE),
-  entry('PageState', 'states', 'page-state'),
+  entry('PageState', 'states', 'page-state', { mobileCapture: true }),
   entry('Callout', 'states', 'callout', RESPONSIVE),
   entry('DataTable', 'data', 'data-table', RESPONSIVE),
   entry('KeyValueList', 'data', 'key-value-list'),
@@ -74,12 +74,14 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('BarChart', 'data', 'bar-chart'),
   entry('ChartTheme', 'data', 'chart-theme'),
   entry('UsageMeter', 'data', 'usage-meter'),
+  entry('FacetPanel', 'data', 'facet-panel', { mobileCapture: true }),
   entry('StatusBadge', 'meaning', 'status-badge'),
   entry('MethodBadge', 'meaning', 'method-badge'),
   entry('SeverityBadge', 'meaning', 'severity-badge'),
   entry('ScanBadge', 'meaning', 'scan-badge'),
   entry('RoleBadge', 'meaning', 'role-badge'),
   entry('ToolIcon', 'meaning', 'tool-icon'),
+  entry('ValueMenu', 'meaning', 'value-menu', { mobileCapture: true }),
   entry('Avatar', 'meaning', 'avatar'),
   entry('AvatarGroup', 'meaning', 'avatar-group'),
   entry('TeamAvatar', 'meaning', 'team-avatar'),
@@ -93,6 +95,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('ConfirmDialog', 'layers', 'confirm-dialog'),
   entry('ConfirmDialogWarning', 'layers', 'confirm-dialog-warning'),
   entry('Drawer', 'layers', 'drawer'),
+  entry('PreviewDrawer', 'layers', 'preview-drawer', { mobileCapture: true }),
   entry('Menu', 'layers', 'menu'),
   entry('Toast', 'layers', 'toast'),
   entry('CommandPalette', 'layers', 'command-palette'),
@@ -112,6 +115,9 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('ContextSelector', 'inputs', 'context-selector', RESPONSIVE),
   entry('DropZone', 'inputs', 'drop-zone', RESPONSIVE),
   entry('ImportButton', 'inputs', 'import-button'),
+  entry('ExpressionSearch', 'inputs', 'expression-search', {
+    mobileCapture: true,
+  }),
 ];
 
 export const CATALOG_THEMES = [ThemeMode.Dark, ThemeMode.Light] as const;

package/catalog/pages/ExpressionSearch.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { ExpressionSearch } from '../../src/components/inputs/ExpressionSearch/ExpressionSearch';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const KEYS = [
+  { name: 'level', count: 18420 },
+  { name: 'env', count: 18420 },
+  { name: 'release', count: 17983 },
+  { name: 'status', count: 9214 },
+  { name: '@user.plan', count: 4120 },
+];
+
+const VALUES: Record<string, { value: string; count: number }[]> = {
+  level: [
+    { value: 'ERROR', count: 1204 },
+    { value: 'WARN', count: 3310 },
+    { value: 'INFO', count: 13906 },
+  ],
+  env: [
+    { value: 'prod', count: 15012 },
+    { value: 'staging', count: 3408 },
+  ],
+};
+
+const fetchKeys = async (prefix: string) =>
+  KEYS.filter((key) => key.name.startsWith(prefix));
+
+const fetchValues = async (field: string, prefix: string) =>
+  (VALUES[field] ?? []).filter((item) => item.value.startsWith(prefix));
+
+export const ExpressionSearchPage = () => {
+  const { log } = useEventLog();
+  const [typed, setTyped] = useState('');
+  const [broken, setBroken] = useState('level:ERROR (env:prod OR env:staging');
+  return (
+    <Showcase
+      family="Saisie"
+      name="ExpressionSearch"
+      description="Champ de filtre en expression (level:ERROR -env:staging) : suggestions de clés puis de valeurs, erreur de syntaxe soulignée à sa position sans perdre la saisie."
+    >
+      <Example
+        title="Saisie avec suggestions de clés puis de valeurs"
+        maxWidth={720}
+      >
+        <ExpressionSearch
+          value={typed}
+          onChange={setTyped}
+          onSubmit={(value) => log(`filtrer : ${value || 'aucun filtre'}`)}
+          fetchKeys={fetchKeys}
+          fetchValues={fetchValues}
+        />
+      </Example>
+      <Example title="Expression incomplète" maxWidth={720}>
+        <ExpressionSearch
+          value={broken}
+          onChange={setBroken}
+          onSubmit={(value) => log(`filtrer : ${value}`)}
+          fetchKeys={fetchKeys}
+          fetchValues={fetchValues}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/FacetPanel.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { FacetPanel } from '../../src/components/data/FacetPanel/FacetPanel';
+import type { Facet } from '../../src/components/data/FacetPanel/FacetPanel';
+import { px } from '../../src/theme/components/shared';
+import { fontWeights } from '../../src/theme/tokens/primitives';
+import { styled } from '@mui/material/styles';
+import { Example, Showcase } from '../frame';
+
+const FACETS: Facet[] = [
+  {
+    field: 'level',
+    label: 'Niveau',
+    values: [
+      { value: 'ERROR', count: 1204 },
+      { value: 'WARN', count: 3310 },
+      { value: 'INFO', count: 13906 },
+    ],
+    estimated: false,
+    loading: false,
+  },
+  {
+    field: 'env',
+    label: 'Environnement',
+    values: [
+      { value: 'prod', count: 15012 },
+      { value: 'staging', count: 3408 },
+    ],
+    estimated: true,
+    loading: false,
+  },
+  {
+    field: '@user.plan',
+    label: 'Plan (attribut)',
+    values: [],
+    estimated: false,
+    loading: true,
+  },
+  {
+    field: 'release',
+    label: 'Version',
+    values: [],
+    estimated: false,
+    loading: false,
+    error: 'Lecture interrompue après 5 s : réduisez la période.',
+    onRetry: () => undefined,
+  },
+];
+
+const Expression = styled('code')(({ theme }) => ({
+  display: 'block',
+  fontFamily: theme.design.fonts.mono,
+  fontSize: px(theme.design.typeScale.small),
+  fontWeight: fontWeights.medium,
+  color: theme.design.tokens['text.secondary'],
+  overflowWrap: 'anywhere',
+}));
+
+export const FacetPanelPage = () => {
+  const [expression, setExpression] = useState('level:ERROR -env:staging');
+  return (
+    <Showcase
+      family="Données"
+      name="FacetPanel"
+      description="Valeurs les plus fréquentes de chaque champ : une coche ajoute la condition à l'expression, « Exclure » ajoute son contraire. L'expression reste la seule source de vérité."
+    >
+      <Example
+        title="Quatre facettes : prête, estimée, en chargement, en échec"
+        maxWidth={360}
+      >
+        <FacetPanel
+          facets={FACETS}
+          expression={expression}
+          onExpressionChange={setExpression}
+        />
+      </Example>
+      <Example title="Expression résultante" maxWidth={720}>
+        <Expression>{expression === '' ? '—' : expression}</Expression>
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/PageState.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Button from '@mui/material/Button';
 import Skeleton from '@mui/material/Skeleton';
 import CreateNewFolderOutlined from '@mui/icons-material/CreateNewFolderOutlined';
@@ -10,6 +11,9 @@ import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
 import { ACCOUNTS } from '../fixtures';
 import { AccountCard } from '../parts';
 
+// Seconds the rate-limit example counts down from, long enough to be read on a capture.
+const RATE_LIMIT_SECONDS = 42;
+
 // Height of an account card: 2 × 64 + 32.
 const CARD_HEIGHT = space[10] * 2 + space[7];
 
@@ -23,6 +27,9 @@ const AccountSkeleton = () => (
 
 export const PageStatePage = () => {
   const { log } = useEventLog();
+  const [retryAt] = useState(
+    () => new Date(Date.now() + RATE_LIMIT_SECONDS * 1000),
+  );
   const ready = (
     <Columns>
       {ACCOUNTS.map((account) => (
@@ -82,6 +89,16 @@ export const PageStatePage = () => {
           {ready}
         </PageState>
       </Example>
+      <Example title="Trop de requêtes, avec compte à rebours">
+        <PageState
+          status={PageStatus.RateLimited}
+          skeleton={<AccountSkeleton />}
+          retryAt={retryAt}
+          error={{ onRetry: () => log('réessayer après la limite') }}
+        >
+          {ready}
+        </PageState>
+      </Example>
       <Example title="Introuvable">
         <PageState status={PageStatus.NotFound} skeleton={<AccountSkeleton />}>
           {ready}

package/catalog/pages/PreviewDrawer.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef } from 'react';
+import Button from '@mui/material/Button';
+import { PreviewDrawer } from '../../src/components/layers/PreviewDrawer/PreviewDrawer';
+import { usePreviewStack } from '../../src/components/layers/PreviewDrawer/usePreviewStack';
+import type { IPreviewRef } from '../../src/components/layers/PreviewDrawer/usePreviewStack';
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import { Example, Row, Showcase } from '../frame';
+
+const REQUEST: IPreviewRef = { type: 'request', id: '9f3c2a71' };
+const SESSION: IPreviewRef = { type: 'session', id: 'b41d07ce' };
+const LOG: IPreviewRef = { type: 'log', id: 'e7a90b14' };
+const RELEASE: IPreviewRef = { type: 'release', id: '2.14.0' };
+
+const TITLES: Record<string, string> = {
+  request: 'GET /api/invoices',
+  session: 'Session b41d07ce',
+  log: 'Log e7a90b14',
+  release: 'Version 2.14.0',
+};
+
+const titleOf = (ref: IPreviewRef) =>
+  TITLES[ref.type] ?? `${ref.type} ${ref.id}`;
+
+const Content = ({ reference }: { reference: IPreviewRef }) => {
+  const { open } = usePreviewStack();
+  return (
+    <>
+      <KeyValueList
+        items={[
+          { id: 'id', label: 'Identifiant', value: reference.id, mono: true },
+          {
+            id: 'status',
+            label: 'Statut',
+            value: reference.type === 'request' ? '200' : 'terminée',
+            mono: true,
+          },
+          { id: 'duration', label: 'Durée', value: '184 ms', mono: true },
+          { id: 'env', label: 'Environnement', value: 'prod' },
+        ]}
+      />
+      {reference.type === 'request' && (
+        <Button variant="outlined" onClick={() => open(SESSION)}>
+          Ouvrir la session liée
+        </Button>
+      )}
+      {reference.type === 'session' && (
+        <Button variant="outlined" onClick={() => open(LOG)}>
+          Ouvrir le log lié
+        </Button>
+      )}
+      {reference.type === 'log' && (
+        <Button variant="outlined" onClick={() => open(RELEASE)}>
+          Ouvrir la version liée
+        </Button>
+      )}
+    </>
+  );
+};
+
+/** Steps of the opening sequence: nothing yet, then each preview opened on the previous one. */
+enum Arrival {
+  Idle,
+  RequestOpened,
+  SessionOpened,
+  LogOpened,
+  Done,
+}
+
+export const PreviewDrawerPage = () => {
+  const { stack, open } = usePreviewStack();
+  const arrival = useRef(Arrival.Idle);
+
+  // Four previews stacked on arrival, so the page shows the trail without a click. Each one is
+  // opened once the stack of the previous render is in the URL.
+  useEffect(() => {
+    if (arrival.current === Arrival.Idle && stack.length === 0) {
+      arrival.current = Arrival.RequestOpened;
+      open(REQUEST);
+    } else if (
+      arrival.current === Arrival.RequestOpened &&
+      stack.length === 1
+    ) {
+      arrival.current = Arrival.SessionOpened;
+      open(SESSION);
+    } else if (
+      arrival.current === Arrival.SessionOpened &&
+      stack.length === 2
+    ) {
+      arrival.current = Arrival.LogOpened;
+      open(LOG);
+    } else if (arrival.current === Arrival.LogOpened && stack.length === 3) {
+      arrival.current = Arrival.Done;
+      open(RELEASE);
+    }
+  }, [stack, open]);
+
+  return (
+    <Showcase
+      family="Couches"
+      name="PreviewDrawer"
+      description="Aperçu empilable porté par l'URL (?preview=type:id,type:id, cinq au plus) : fil de toute la pile (chaque niveau ramène à lui, replié en « … » et les deux derniers sur téléphone), Échap ferme le dernier, lien vers la pleine page."
+    >
+      <Example title="Ouvrir un aperçu">
+        <Row>
+          <Button variant="outlined" onClick={() => open(REQUEST)}>
+            Requête GET /api/invoices
+          </Button>
+          <Button variant="outlined" onClick={() => open(SESSION)}>
+            Session b41d07ce
+          </Button>
+        </Row>
+      </Example>
+      <PreviewDrawer
+        titleOf={titleOf}
+        fullPageHref={(ref) => `/${ref.type}/${ref.id}`}
+        render={(ref) => <Content reference={ref} />}
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/ProductTour.tsx

@@ -1,80 +1,88 @@
-import { useState } from 'react';
-import Button from '@mui/material/Button';
-import AddRounded from '@mui/icons-material/AddRounded';
-import FileUploadOutlined from '@mui/icons-material/FileUploadOutlined';
-import { ProductTour } from '../../src/components/layers/ProductTour/ProductTour';
-import type { ProductTourStep } from '../../src/components/layers/ProductTour/ProductTour';
-import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
-
-const STEPS: [ProductTourStep, ...ProductTourStep[]] = [
-  {
-    target: 'catalog-create-event',
-    title: 'Créez votre premier événement',
-    description:
-      'Donnez-lui un nom et une date : vous obtenez un lien à envoyer à vos invités pour qu’ils déposent leurs photos.',
-  },
-  {
-    target: 'catalog-import',
-    title: 'Importez vos photos',
-    description:
-      'Ajoutez celles que vous avez déjà prises, depuis votre appareil ou AbyssCloud.',
-  },
-  {
-    target: 'catalog-help',
-    title: 'Revoir la visite',
-    description:
-      'Elle se relance à tout moment depuis le menu d’aide du service.',
-  },
-];
-
-export const ProductTourPage = () => {
-  const { log } = useEventLog();
-  // Opened on arrival, so the page shows the first step without a click.
-  const [open, setOpen] = useState(true);
-  return (
-    <Showcase
-      family="Couches"
-      name="ProductTour"
-      description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. Échap passe la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas."
-    >
-      <Example title="Première visite de Memories">
-        <Row>
-          <Button
-            data-tour="catalog-import"
-            variant="outlined"
-            startIcon={<FileUploadOutlined />}
-          >
-            Importer
-          </Button>
-          <Button
-            data-tour="catalog-create-event"
-            variant="contained"
-            startIcon={<AddRounded />}
-          >
-            Créer un événement
-          </Button>
-          <Button
-            data-tour="catalog-help"
-            variant="text"
-            onClick={() => setOpen(true)}
-          >
-            Aide
-          </Button>
-        </Row>
-      </Example>
-      <LastEvent />
-      <ProductTour
-        open={open}
-        steps={STEPS}
-        onComplete={() => {
-          setOpen(false);
-          log('visite terminée');
-        }}
-        onSkip={() => {
-          setOpen(false);
-          log('visite passée');
-        }}
-      />
-    </Showcase>
-  );
-};
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import AddRounded from '@mui/icons-material/AddRounded';
+import FileUploadOutlined from '@mui/icons-material/FileUploadOutlined';
+import { ProductTour } from '../../src/components/layers/ProductTour/ProductTour';
+import type { ProductTourStep } from '../../src/components/layers/ProductTour/ProductTour';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+const STEPS: [ProductTourStep, ...ProductTourStep[]] = [
+  {
+    target: 'catalog-create-event',
+    title: 'Créez votre premier événement',
+    description:
+      'Donnez-lui un nom et une date : vous obtenez un lien à envoyer à vos invités pour qu’ils déposent leurs photos.',
+  },
+  {
+    target: 'catalog-import',
+    title: 'Importez vos photos',
+    description:
+      'Ajoutez celles que vous avez déjà prises, depuis votre appareil ou AbyssCloud.',
+  },
+  {
+    target: 'catalog-help',
+    title: 'Revoir la visite',
+    description:
+      'Elle se relance à tout moment depuis le menu d’aide du service.',
+  },
+];
+
+export const ProductTourPage = () => {
+  const { log } = useEventLog();
+  // Opened on arrival, so the page shows the first step without a click.
+  const [open, setOpen] = useState(true);
+  return (
+    <Showcase
+      family="Couches"
+      name="ProductTour"
+      description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. « Étape n sur N » et une croix en en-tête, « Précédent » dès la deuxième étape ; Échap et la croix passent la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas. Une cible cachée est ignorée."
+    >
+      <Example title="Première visite de Memories">
+        <Row>
+          <Button
+            data-tour="catalog-import"
+            variant="outlined"
+            startIcon={<FileUploadOutlined />}
+          >
+            Importer
+          </Button>
+          {/* A hidden twin of the first target: the tour points at the rendered one. */}
+          <Button
+            data-tour="catalog-create-event"
+            variant="contained"
+            sx={{ display: 'none' }}
+          >
+            Créer un événement
+          </Button>
+          <Button
+            data-tour="catalog-create-event"
+            variant="contained"
+            startIcon={<AddRounded />}
+          >
+            Créer un événement
+          </Button>
+          <Button
+            data-tour="catalog-help"
+            variant="text"
+            onClick={() => setOpen(true)}
+          >
+            Aide
+          </Button>
+        </Row>
+      </Example>
+      <LastEvent />
+      <ProductTour
+        open={open}
+        steps={STEPS}
+        onComplete={() => {
+          setOpen(false);
+          log('visite terminée');
+        }}
+        onSkip={() => {
+          setOpen(false);
+          log('visite passée');
+        }}
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/Section.tsx

@@ -4,6 +4,8 @@ import {
   Section,
   SectionTone,
 } from '../../src/components/structure/Section/Section';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { ToolKind } from '../../src/theme/tokens/domain';
 import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
 import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
 import { ACCOUNTS, LONG_NAV_LABEL, formatEuro } from '../fixtures';
@@ -38,6 +40,14 @@ export const SectionPage = () => {
           </Columns>
         </Section>
       </Example>
+      <Example title="Avec le logo d'un service">
+        <Section
+          title="Mes clouds"
+          icon={<ToolIcon tool={ToolKind.Cloud} size={20} />}
+        >
+          <LastEvent />
+        </Section>
+      </Example>
       <Example title="Sans action, contenu en liste clé-valeur">
         <Section title="Disponible à dépenser">
           <KeyValueList

package/catalog/pages/StatTile.tsx

@@ -1,4 +1,6 @@
 import { StatTile } from '../../src/components/data/StatTile/StatTile';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { ToolKind } from '../../src/theme/tokens/domain';
 import { Columns, Example, Showcase } from '../frame';
 import {
   BANKING_TOTALS,
@@ -45,6 +47,17 @@ export const StatTilePage = () => (
     <Example title="Transactions d'octobre (la dernière tuile est un lien)">
       <BankingStatTiles />
     </Example>
+    <Example title="Avec le logo d'un service">
+      <Columns>
+        <StatTile
+          label="Stockage Cloud"
+          icon={<ToolIcon tool={ToolKind.Cloud} size={16} />}
+          value="3,2"
+          unit="Go"
+          delta={{ value: 'sur 10 Go', tone: 'text.muted' }}
+        />
+      </Columns>
+    </Example>
     <Example title="Avec unité">
       <Columns>
         <StatTile

package/catalog/pages/ValueMenu.tsx

@@ -0,0 +1,40 @@
+import { ValueMenu } from '../../src/components/meaning/ValueMenu/ValueMenu';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+export const ValueMenuPage = () => {
+  const { log } = useEventLog();
+  const handlers = (field: string, value: string) => ({
+    onFilter: () => log(`filtrer ${field}:${value}`),
+    onExclude: () => log(`exclure ${field}:${value}`),
+    onCopy: () => log(`copier ${value}`),
+  });
+  return (
+    <Showcase
+      family="Sens"
+      name="ValueMenu"
+      description="Rend une valeur cliquable : filtrer, exclure, copier, puis selon la page ajouter en colonne, voir l'évolution ou ouvrir l'objet désigné."
+    >
+      <Example title="Valeur d'un champ connu : trois actions" framed>
+        <ValueMenu field="level" value="ERROR" {...handlers('level', 'ERROR')}>
+          ERROR
+        </ValueMenu>
+      </Example>
+      <Example title="Valeur d'une liste : six actions" framed>
+        <Row>
+          <span>Requête</span>
+          <ValueMenu
+            field="requestId"
+            value="9f3c2a71"
+            {...handlers('requestId', '9f3c2a71')}
+            onAddColumn={() => log('ajouter requestId en colonne')}
+            onTrend={() => log('évolution de requestId')}
+            onOpen={() => log('ouvrir 9f3c2a71')}
+          >
+            9f3c2a71
+          </ValueMenu>
+        </Row>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};