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

package/catalog/specs/responsive.spec.ts

@@ -0,0 +1,247 @@
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { ThemeMode } from '../../src/theme/tokens/primitives';
+import { CATALOG_ENTRIES } from '../catalog-entries';
+import { openCatalogPage, settle } from './catalog-page';
+
+// Criterion 15 and Review Focus 2: every structure and mobile component, `DataTable` and the two
+// scenes, at 360, 768 and 1440 px. The page never scrolls sideways; below 768 px every visible
+// interactive element is at least 44 × 44 px. The pages carry the long fixtures (200 characters
+// without a space in a page title, a navigation label and a table cell).
+
+const WIDTHS = [360, 768, 1440];
+const HEIGHT = 900;
+const MD = 768;
+const TOUCH_TARGET = 44;
+const UNBROKEN = /\S{200,}/;
+
+/** Pages whose long fixture must be on the page: the three cases of Review Focus 2. */
+const LONG_CONTENT_PAGES = new Set(['PageHeader', 'AppShell', 'DataTable']);
+
+/** Pages that draw a `DataTable` in its table form from 768 px. */
+const TABLE_PAGES = new Set(['DataTable', 'SceneDesktop']);
+
+/**
+ * What hides behind a click on narrow screens: the navigation drawer, the filters sheet, the
+ * actions sheet of a file. Each is opened and checked too.
+ */
+const REVEAL: Record<string, (page: Page) => Promise<void>> = {
+  AppShell: (page) =>
+    page.getByRole('button', { name: 'Ouvrir la navigation' }).click(),
+  SceneDesktop: (page) =>
+    page.getByRole('button', { name: 'Ouvrir la navigation' }).click(),
+  FilterBar: (page) =>
+    page
+      .getByRole('button', { name: /^Filtres/ })
+      .first()
+      .click(),
+  SceneMobile: (page) =>
+    page.getByRole('button', { name: /avis-imposition-2026\.pdf/ }).click(),
+};
+
+const INTERACTIVE = [
+  'a[href]',
+  'button',
+  'input:not([type="hidden"])',
+  'select',
+  'textarea',
+  '[role="button"]',
+  '[role="tab"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[role="switch"]',
+  '[role="menuitem"]',
+  '[role="option"]',
+  '[role="link"]',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+interface Offender {
+  element: string;
+  width: number;
+  height: number;
+}
+
+/** Visible interactive elements smaller than the touch target, described for the report. */
+const smallTargets = (page: Page): Promise<Offender[]> =>
+  page.evaluate(
+    ({ selector, minimum }) => {
+      const hidden = (element: Element): boolean =>
+        element.closest('[aria-hidden="true"], [inert]') !== null ||
+        getComputedStyle(element).visibility === 'hidden';
+      const describe = (element: Element): string => {
+        const name =
+          element.getAttribute('aria-label') ??
+          (element.textContent ?? '').trim().slice(0, 40) ??
+          '';
+        const role = element.getAttribute('role');
+        return `<${element.tagName.toLowerCase()}${
+          role ? ` role=${role}` : ''
+        }> "${name}"`;
+      };
+      return Array.from(document.querySelectorAll(selector))
+        .filter((element) => !hidden(element))
+        .map((element) => ({ element, box: element.getBoundingClientRect() }))
+        .filter(({ box }) => box.width > 0 && box.height > 0)
+        .filter(({ box }) => box.width < minimum || box.height < minimum)
+        .map(({ element, box }) => ({
+          element: describe(element),
+          width: Math.round(box.width * 10) / 10,
+          height: Math.round(box.height * 10) / 10,
+        }));
+    },
+    { selector: INTERACTIVE, minimum: TOUCH_TARGET },
+  );
+
+const horizontalOverflow = (
+  page: Page,
+): Promise<{ scrollWidth: number; innerWidth: number }> =>
+  page.evaluate(() => ({
+    scrollWidth: document.documentElement.scrollWidth,
+    innerWidth: window.innerWidth,
+  }));
+
+/**
+ * The words of the table cells that the layout breaks across two lines: a word drawn as more than
+ * one line box (`Range.getClientRects`) was cut in its middle.
+ */
+const brokenWords = (page: Page): Promise<string[]> =>
+  page.evaluate(() => {
+    const broken: string[] = [];
+    const cells = document.querySelectorAll('table[role="grid"] :is(th, td)');
+    cells.forEach((cell) => {
+      const walker = document.createTreeWalker(cell, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const text = node.textContent ?? '';
+        for (const match of text.matchAll(/\S+/g)) {
+          const range = document.createRange();
+          range.setStart(node, match.index ?? 0);
+          range.setEnd(node, (match.index ?? 0) + match[0].length);
+          const lines = new Set(
+            Array.from(range.getClientRects())
+              .filter((rect) => rect.width > 0)
+              .map((rect) => Math.round(rect.top)),
+          );
+          if (lines.size > 1) {
+            broken.push(match[0]);
+          }
+        }
+      }
+    });
+    return broken;
+  });
+
+const checkLayout = async (
+  page: Page,
+  width: number,
+  step: string,
+): Promise<void> => {
+  const { scrollWidth, innerWidth } = await horizontalOverflow(page);
+  expect(scrollWidth, `${step}: the page scrolls sideways`).toBeLessThanOrEqual(
+    innerWidth,
+  );
+  if (width < MD) {
+    expect(
+      await smallTargets(page),
+      `${step}: interactive elements under 44 × 44 px`,
+    ).toEqual([]);
+  }
+};
+
+for (const entry of CATALOG_ENTRIES.filter(
+  (candidate) => candidate.responsive,
+)) {
+  for (const width of WIDTHS) {
+    test(`${entry.name} at ${width} px: no sideways scroll, touch targets`, async ({
+      page,
+    }) => {
+      await openCatalogPage(page, entry.name, ThemeMode.Dark, {
+        width,
+        height: HEIGHT,
+      });
+      await checkLayout(page, width, 'on arrival');
+
+      if (TABLE_PAGES.has(entry.name) && width >= MD) {
+        expect(
+          await brokenWords(page),
+          'table cells cut a word across two lines',
+        ).toEqual([]);
+      }
+
+      const reveal = REVEAL[entry.name];
+      const revealable =
+        reveal !== undefined && (entry.name === 'SceneMobile' || width < MD);
+      if (revealable) {
+        await reveal(page);
+        await settle(page);
+        await checkLayout(page, width, 'once revealed');
+      }
+
+      if (LONG_CONTENT_PAGES.has(entry.name)) {
+        // Visible text, or the accessible name of an icon-only item (the tablet rail).
+        const text = await page.evaluate(() =>
+          [
+            document.body.innerText,
+            ...Array.from(document.querySelectorAll('[aria-label]')).map(
+              (element) => element.getAttribute('aria-label'),
+            ),
+          ].join(' '),
+        );
+        expect(text, 'the long fixture is on the page').toMatch(UNBROKEN);
+      }
+    });
+  }
+}
+
+// Criterion C3: on a 360 px phone the action bar shows each label whole, under its icon, on two
+// lines at most; past three actions it keeps two and a « Plus » button.
+test('ActionBar at 360 px: whole labels, two lines at most, « Plus » past three actions', async ({
+  page,
+}) => {
+  await openCatalogPage(page, 'ActionBar', ThemeMode.Dark, {
+    width: 360,
+    height: HEIGHT,
+  });
+  const labels = await page.evaluate(() =>
+    Array.from(
+      document.querySelectorAll(
+        '[role="toolbar"][aria-label="Actions"] button',
+      ),
+    ).map((button) => {
+      const label = button.querySelector('span:not([class*="TouchRipple"])');
+      if (label === null) {
+        return { text: '', lines: 0, clipped: true };
+      }
+      const style = getComputedStyle(label);
+      const lineHeight = parseFloat(style.lineHeight);
+      const box = label.getBoundingClientRect();
+      return {
+        text: label.textContent ?? '',
+        lines: Math.round(box.height / lineHeight),
+        clipped:
+          label.scrollWidth > Math.ceil(box.width) ||
+          style.textOverflow === 'ellipsis',
+      };
+    }),
+  );
+  expect(labels.length).toBeGreaterThan(0);
+  for (const label of labels) {
+    expect(label.clipped, `${label.text}: cut`).toBe(false);
+    expect(label.lines, `${label.text}: lines`).toBeLessThanOrEqual(2);
+  }
+  const bar = page
+    .getByRole('toolbar', { name: 'Actions' })
+    .filter({ has: page.getByRole('button', { name: 'Plus' }) });
+  await expect(bar.getByRole('button')).toHaveText([
+    'Catégoriser',
+    'Commenter',
+    'Plus',
+  ]);
+  await bar.getByRole('button', { name: 'Plus' }).click();
+  const sheet = page.getByRole('dialog', { name: 'Autres actions' });
+  await expect(sheet.getByRole('button')).toHaveText([
+    'Changer de compte',
+    'Exporter la sélection',
+    'Supprimer',
+  ]);
+});

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

@@ -0,0 +1,72 @@
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+import { CAPTURES, CAPTURES_DIR } from '../captures-plan';
+import type { Capture, CaptureState } from '../captures-plan';
+import type { CatalogFamily } from '../catalog-entries';
+
+// Global teardown of the catalog run: writes `index.md` next to the screenshots, from the capture
+// plan, listing only the files present on disk.
+
+const FAMILY_TITLES: Record<CatalogFamily, string> = {
+  scenes: 'Scènes composées (à regarder en premier)',
+  structure: 'Structure',
+  mobile: 'Mobile',
+  states: 'États',
+  data: 'Données',
+  meaning: 'Sens',
+  business: 'Métier',
+  layers: 'Couches',
+  inputs: 'Saisie',
+};
+
+const STATE_LABEL: Record<CaptureState, string> = {
+  arrival: '',
+  'sheet-open': ', feuille ouverte',
+  'list-open': ', liste ouverte',
+  'calendar-open': ', calendrier ouvert',
+};
+
+const describe = (capture: Capture): string =>
+  `${capture.theme === 'dark' ? 'sombre' : 'clair'}, ${capture.width} px${
+    STATE_LABEL[capture.state]
+  }`;
+
+const writeCaptureIndex = (): void => {
+  mkdirSync(CAPTURES_DIR, { recursive: true });
+  const present = CAPTURES.filter((capture) =>
+    existsSync(resolve(CAPTURES_DIR, capture.file)),
+  );
+  const families = Object.keys(FAMILY_TITLES) as CatalogFamily[];
+  const sections = families
+    .map((family) => {
+      const lines = present
+        .filter((capture) => capture.entry.family === family)
+        .map(
+          (capture) =>
+            `- \`${capture.file}\` : ${capture.entry.name}, ${describe(
+              capture,
+            )}`,
+        );
+      return lines.length === 0
+        ? ''
+        : `## ${FAMILY_TITLES[family]}\n\n${lines.join('\n')}\n`;
+    })
+    .filter((section) => section !== '');
+  const missing = CAPTURES.length - present.length;
+  const content = [
+    '# Captures du catalogue du core (#286)',
+    '',
+    'Produites par `pnpm --filter @abyss-project/commons-front-core catalog:test` (`catalog/specs/captures.spec.ts`).',
+    'Chaque composant en clair et en sombre à 1440 px ; à 390 px aussi ceux qui changent de forme sous 768 px ;',
+    'le shell et la scène bureau aussi à 768 px (rail d’icônes).',
+    '',
+    `${present.length} fichiers${
+      missing > 0 ? `, ${missing} manquants (lancement partiel)` : ''
+    }.`,
+    '',
+    ...sections,
+  ].join('\n');
+  writeFileSync(resolve(CAPTURES_DIR, 'index.md'), content);
+};
+
+export default writeCaptureIndex;

package/catalog/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  // Type-check configuration of the component catalog (dev server, Playwright specs). It reuses the
+  // package options and adds the Node types: the Vite and Playwright configs read `process.env`.
+  // Also listed in `.eslintrc.cjs` (`parserOptions.project`), so the catalog is linted with type
+  // information like `src`.
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vite/client", "node"]
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"],
+  "exclude": []
+}

package/catalog/vite.config.ts

@@ -0,0 +1,27 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { catalogPort } from './catalog-port';
+
+// The catalog of the design system components: a dev server only, never built nor published.
+const port = catalogPort();
+
+const MAIN_CORE_SOURCE = resolve(__dirname, '../../abyss_main_core/src');
+
+export default defineConfig({
+  root: __dirname,
+  plugins: [react()],
+  resolve: {
+    // `@abyss-project/main` is served from its source, as by `apps/front` in dev: its `dist` may
+    // lag behind the workspace (the translations import its plan and metric labels).
+    alias: [
+      { find: /^@abyss-project\/main$/, replacement: MAIN_CORE_SOURCE },
+      {
+        find: /^@abyss-project\/main\/(.*)$/,
+        replacement: `${MAIN_CORE_SOURCE}/$1`,
+      },
+    ],
+  },
+  optimizeDeps: { exclude: ['@abyss-project/main'] },
+  server: { port, strictPort: true, host: '127.0.0.1' },
+});