noecosystem-design 0.2.3 → 0.3.0

package/scripts/generate-manifest.mjs

@@ -119,6 +119,76 @@ function toTitle(id) {
 
 // Enrichment database — semantic, agent-friendly metadata per spec
 const enrichments = {
+  'data-table': {
+    description:
+      'Semantic data table with TanStack Table v9 as a headless engine behind the internal NOE adapter: sorting, NOE filter operators, controlled pagination, stable-id selection, loading skeletons and server mode.',
+    capabilityAliases: ['data table', 'sortable table', 'server-side table', 'grid'],
+    searchTerms: [
+      'data-table',
+      'table',
+      'sorting',
+      'filtering',
+      'pagination',
+      'selection',
+      'server-side',
+      'aria-sort',
+    ],
+    useWhen: [
+      'tabular product data with sorting, filtering, pagination or row selection',
+      'server-driven pages composed from toDataQuery against Django APIs',
+    ],
+    doNotUseWhen: [
+      'spreadsheet-style cell editing grids',
+      'static lists without tabular semantics',
+    ],
+    alternatives: ['DataList'],
+    variants: ['regular', 'compact'],
+    states: ['default', 'hover', 'loading', 'selected', 'empty', 'focus-visible'],
+    tokenContracts: [
+      'color.border',
+      'color.foreground',
+      'color.muted-foreground',
+      'surface.sunken',
+      'muted',
+    ],
+    propsSummary: {
+      columns: 'DataColumn<Row>[]',
+      rows: 'Row[]',
+      caption: 'string',
+      empty: 'ReactNode',
+      sorting: 'readonly DataSort[]',
+      filters: 'readonly FilterSpec[]',
+      page: 'PageSpec',
+      selection: 'readonly RowId[]',
+      density: "'compact' | 'regular'",
+      loading: 'boolean',
+      manualSorting: 'boolean',
+      manualFiltering: 'boolean',
+      manualPagination: 'boolean',
+      totalRowCount: 'number',
+    },
+    accessibility: {
+      role: 'table',
+      keyboard: [
+        'Tab moves into the scrollable region',
+        'Enter/Space on header toggles sort',
+        'Enter/Space on checkbox toggles row selection',
+      ],
+      announcements: ['aria-sort on sorted column headers', 'aria-live pagination status'],
+      focusBehavior: ['visible ring 2px', 'scroll container focusable for keyboard overflow'],
+    },
+    internationalization: {
+      messageKeys: [],
+      rtl: 'required',
+      bidiNotes: [
+        'logical start/end alignment only',
+        'technical cells render dir=ltr via TechnicalValue',
+        'pagination controls use caller-provided accessible labels',
+      ],
+    },
+    relatedPatterns: ['filter-bar', 'pagination', 'empty-state'],
+    untitledMapping: null,
+  },
   'bidi-text': {
     description:
       'Mixed-direction content primitives for user text, URLs, hashes, commands and technical identifiers with explicit LTR isolation.',
@@ -815,6 +885,7 @@ function defaultEnrichment(auditItem) {
   const registryDeps = [];
   const peerDeps = ['react'];
   if (pkg === '@noe/data-ui') deps.push('@noe/ui');
+  if (auditItem.id === 'data-table') deps.push('@tanstack/react-table');
   if (pkg === '@noe/ai-ui') deps.push('@noe/ui');
   if (pkg === '@noe/workflow-ui') deps.push('@noe/ui');
   if (auditItem.id === 'pagination' || auditItem.id === 'fab' || auditItem.id === 'filter-bar')

package/vitest.config.ts

@@ -2,6 +2,7 @@ import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 import { playwright } from '@vitest/browser-playwright';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig } from 'vitest/config';
@@ -46,6 +47,9 @@ export default defineConfig({
         },
       },
       {
+        // Tailwind expands `@import "tailwindcss"` so component browser tests and
+        // visual evidence render with the real NOE utility classes, matching Storybook.
+        plugins: [tailwindcss()],
         optimizeDeps: {
           entries: ['apps/**/*.browser.test.tsx', 'packages/**/*.browser.test.tsx'],
         },
@@ -83,6 +87,7 @@ export default defineConfig({
             provider: playwright(),
             headless: true,
             instances: [{ browser: 'chromium' }],
+            viewport: { width: 1280, height: 900 },
           },
         },
       },