@abyss-project/commons-front-core 11.1.2 → 13.0.0

package/README.md

@@ -105,8 +105,8 @@ Zone 4c-1 de la refonte du design system (carte #286) : les éditeurs Markdown e
   libellés de Crepe traduits, poignée de 44 px au toucher. Les classes `.milkdown` et `.ProseMirror` ne changent pas.
 - **`PdfEditor`** : mêmes props que l'éditeur legacy ; barre regroupée en six groupes, page blanche dans les deux
   thèmes, couleurs d'annotation fixes (`pdf-colors`). Les opérations déjà enregistrées se rejouent à l'identique.
-- **Legacy** : `AbyssMarkdownEditor` et `PdfEditor` restent sous `/legacy` jusqu'à la zone 4c-2 ; le moteur du PDF
-  legacy est désormais celui de `/editors` (comportement inchangé).
+- **Legacy** : `AbyssMarkdownEditor` et `PdfEditor` sont retirés de `/legacy` (zone 4c-2, retrait cassant publié avec la
+  prochaine version majeure) ; les remplaçants sont `MarkdownEditor` et `PdfEditor` de `/editors`, avec les mêmes props.
 - **Épinglage de `@abyss-project/main`** : inchangé par rapport à la 10.0.0.
 
 ### 9.6.0

package/catalog/pages/LineChart.tsx

@@ -24,10 +24,15 @@ const LATENCY = [
   133, 117, 104, 97, 93, 90, 89,
 ];
 
+/** The latency of a sentinel, without any check from 2 h to 5 h: those hours have no value. */
+const LATENCY_WITH_GAP = LATENCY.map((value, hour) =>
+  hour >= 2 && hour < 6 ? null : value,
+);
+
 const hourly = (
   id: string,
   label: string,
-  values: number[],
+  values: (number | null)[],
   tone?: ChartSeriesTone,
 ): LineChartSeries => ({
   id,
@@ -69,7 +74,7 @@ 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."
+    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 ; un y à null interrompt la courbe ; 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}>
@@ -112,6 +117,18 @@ export const LineChartPage = () => (
         />
       </Surface>
     </Example>
+    <Example title="Trou : heures sans mesure (null)">
+      <Surface padding={4}>
+        <LineChart
+          series={[hourly('latency', 'Latence (ms)', LATENCY_WITH_GAP)]}
+          height={240}
+          area
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Latence moyenne par heure, sans mesure de 2 h à 5 h"
+        />
+      </Surface>
+    </Example>
     <Example title="Palette des six séries">
       <Surface padding={4}>
         <LineChart

package/catalog/pages/StatTile.tsx

@@ -58,6 +58,22 @@ export const StatTilePage = () => (
         />
       </Columns>
     </Example>
+    <Example title="Avec une ligne d'appoint">
+      <Columns>
+        <StatTile
+          label="Événements"
+          value={formatInteger(1204)}
+          subtext="dont 12 erreurs sur la période"
+        />
+        <StatTile
+          label="Temps de réponse moyen"
+          value={formatInteger(184)}
+          unit="ms"
+          subtext="p95 : 420 ms"
+          delta={{ value: formatPercentDelta(-0.08), tone: 'status.success' }}
+        />
+      </Columns>
+    </Example>
     <Example title="Avec unité">
       <Columns>
         <StatTile

package/catalog/pages/ToolIcon.tsx

@@ -1,48 +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>
-);
+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 vingt et un 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>
+);