@gntik-ai/blocks 0.5.0 → 0.6.0

package/src/tables/FilterBar/FilterBar.labels.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider } from '@gntik-ai/ui';
+import { FilterBar, type FilterBarLabels } from './FilterBar';
+
+it('replaces filter chrome including removed chips, saved views and the live result count', async () => {
+  const user = userEvent.setup();
+  const removeFilter = vi.fn((field: string, value: string) => `Quitar ${field}|${value}`);
+  const resultCount = vi.fn((count: number) => `Encontrados: ${count}`);
+  const labels: FilterBarLabels = {
+    searchLandmark: 'Filtrar',
+    searchLabel: 'Buscar registros',
+    searchPlaceholder: 'Escriba…',
+    savedViewLabel: 'Vista guardada',
+    savedViewPlaceholder: 'Vistas guardadas',
+    addFilter: 'Añadir filtro',
+    activeFilters: 'Filtros activos',
+    filters: 'Filtros',
+    clearAll: 'Borrar todo',
+    removeFilter,
+    resultCount,
+  };
+  const { container } = render(<FilterBar labels={labels} resultCount={1200} />);
+  expect(screen.getByRole('search', { name: 'Filtrar' })).toBeVisible();
+  expect(screen.getByRole('searchbox', { name: 'Buscar registros' })).toHaveAttribute('placeholder', 'Escriba…');
+  expect(screen.getByRole('combobox', { name: 'Vista guardada' })).toHaveTextContent('Vistas guardadas');
+  expect(screen.getByRole('list', { name: 'Filtros activos' })).toBeVisible();
+  expect(screen.getByText('Filtros', { exact: true })).toBeVisible();
+  expect(container.querySelector('[aria-live]')?.textContent).toBe('Encontrados: 1200');
+  expect(resultCount).toHaveBeenCalledWith(1200);
+  expect(removeFilter).toHaveBeenCalledWith('Status', 'Running');
+  const remove = screen.getByRole('button', { name: 'Quitar Status|Running' });
+  remove.focus();
+  expect(remove).toHaveFocus();
+  await user.keyboard('{Delete}');
+  expect(screen.queryByRole('button', { name: 'Quitar Status|Running' })).toBeNull();
+  await user.click(screen.getByRole('button', { name: 'Añadir filtro' }));
+  await user.click(await screen.findByRole('menuitemcheckbox', { name: 'Failed' }));
+  await user.keyboard('{Escape}');
+  expect(screen.getByRole('button', { name: 'Quitar Status|Failed' })).toBeVisible();
+  await user.click(screen.getByRole('button', { name: 'Borrar todo' }));
+  expect(screen.queryByRole('list', { name: 'Filtros activos' })).toBeNull();
+  await user.click(screen.getByRole('combobox', { name: 'Vista guardada' }));
+  expect(await screen.findByRole('option', { name: 'Needs attention' })).toBeVisible();
+});
+
+it('retains legacy props, default markup and provider fallbacks for keys that are omitted', () => {
+  const { container, rerender } = render(
+    <I18nProvider locale="es">
+      <FilterBar resultCount={1200} searchLabel="Find" placeholder="Type" />
+    </I18nProvider>,
+  );
+  const original = container.querySelector('[aria-live]')?.outerHTML;
+  const landmark = screen.getByRole('search').getAttribute('aria-label');
+  rerender(
+    <I18nProvider locale="es">
+      <FilterBar
+        resultCount={1200}
+        searchLabel="Find"
+        placeholder="Type"
+        labels={{ clearAll: 'Clear', searchLabel: 'Override', searchPlaceholder: 'Override type' }}
+      />
+    </I18nProvider>,
+  );
+  expect(screen.getByRole('searchbox', { name: 'Override' })).toHaveAttribute('placeholder', 'Override type');
+  expect(screen.getByRole('search')).toHaveAttribute('aria-label', landmark);
+  expect(container.querySelector('[aria-live]')?.outerHTML).toBe(original);
+  expect(screen.getByRole('button', { name: 'Clear' })).toBeVisible();
+});

package/src/tables/FilterBar/FilterBar.tsx

@@ -35,7 +35,23 @@ export interface SavedView {
   filters: readonly ActiveFilter[];
 }
 
+export interface FilterBarLabels {
+  searchLandmark: string;
+  searchLabel: string;
+  searchPlaceholder: string;
+  savedViewLabel: string;
+  savedViewPlaceholder: string;
+  addFilter: string;
+  activeFilters: string;
+  filters: string;
+  clearAll: string;
+  removeFilter: (field: string, value: string) => string;
+  resultCount: (count: number) => string;
+}
+
 export interface FilterBarProps {
+  /** Per-key overrides take precedence over the legacy search props and provider catalog. */
+  labels?: Partial<FilterBarLabels>;
   fields?: readonly FilterField[];
   /** Search text (controlled). */
   query?: string;
@@ -74,12 +90,14 @@ export function FilterBar({
   defaultView = null,
   onViewChange,
   searchLabel: searchLabelProp,
-  placeholder = 'Search by name…',
+  placeholder: placeholderProp,
   resultCount,
   className,
+  labels,
 }: FilterBarProps) {
   const { t } = useI18n();
-  const searchLabel = searchLabelProp ?? t('common.search');
+  const searchLabel = labels?.searchLabel ?? searchLabelProp ?? t('common.search');
+  const placeholder = labels?.searchPlaceholder ?? placeholderProp ?? 'Search by name…';
   const [innerQuery, setInnerQuery] = useState(defaultQuery);
   const [innerFilters, setInnerFilters] = useState<readonly ActiveFilter[]>(defaultFilters);
   const [view, setView] = useState<string | null>(defaultView);
@@ -113,7 +131,11 @@ export function FilterBar({
   const hasAny = filters.length > 0 || query !== '';
 
   return (
-    <div role="search" aria-label={t('filters.label')} className={cn('flex flex-col gap-3', className)}>
+    <div
+      role="search"
+      aria-label={labels?.searchLandmark ?? t('filters.label')}
+      className={cn('flex flex-col gap-3', className)}
+    >
       <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
         <Input
           aria-label={searchLabel}
@@ -128,9 +150,9 @@ export function FilterBar({
         <div className="flex flex-wrap items-center gap-2">
           {views.length > 0 && (
             <SimpleSelect
-              aria-label={t('filters.savedView')}
+              aria-label={labels?.savedViewLabel ?? t('filters.savedView')}
               size="sm"
-              placeholder={t('filters.savedViews')}
+              placeholder={labels?.savedViewPlaceholder ?? t('filters.savedViews')}
               value={view}
               onValueChange={applyView}
               items={views.map((v) => ({ value: v.value, label: v.label }))}
@@ -138,7 +160,9 @@ export function FilterBar({
             />
           )}
           <Menu>
-            <MenuTrigger render={<Button variant="secondary" size="sm" icon={Plus} />}>{t('filters.add')}</MenuTrigger>
+            <MenuTrigger render={<Button variant="secondary" size="sm" icon={Plus} />}>
+              {labels?.addFilter ?? t('filters.add')}
+            </MenuTrigger>
             <MenuContent className="max-h-80 min-w-[220px] overflow-y-auto">
               {fields.map((field, i) => (
                 <Fragment key={field.id}>
@@ -165,8 +189,14 @@ export function FilterBar({
         </div>
         {resultCount !== undefined && (
           <p className="text-[12.5px] text-muted-foreground sm:ms-auto" aria-live="polite">
-            <span className="font-mono text-foreground tabular-nums">{resultCount.toLocaleString('en-US')}</span>{' '}
-            {resultCount === 1 ? 'result' : 'results'}
+            {labels?.resultCount ? (
+              labels.resultCount(resultCount)
+            ) : (
+              <>
+                <span className="font-mono text-foreground tabular-nums">{resultCount.toLocaleString('en-US')}</span>{' '}
+                {resultCount === 1 ? 'result' : 'results'}
+              </>
+            )}
           </p>
         )}
       </div>
@@ -174,23 +204,26 @@ export function FilterBar({
         <div className="flex flex-wrap items-center gap-2">
           <span className="inline-flex items-center gap-1.5 font-mono text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
             <ListFilter size={12} aria-hidden />
-            Filters
+            {labels?.filters ?? 'Filters'}
           </span>
-          <ul aria-label={t('filters.active')} className="flex flex-wrap items-center gap-2">
+          <ul aria-label={labels?.activeFilters ?? t('filters.active')} className="flex flex-wrap items-center gap-2">
             {filters.map((f) => (
               <li key={`${f.field}:${f.value}`} className="flex">
                 <Token
                   size="sm"
                   prefix={`${labelOf(f.field)}:`}
                   label={f.value}
-                  removeLabel={t('filters.remove', { field: labelOf(f.field), value: f.value })}
+                  removeLabel={
+                    labels?.removeFilter?.(labelOf(f.field), f.value) ??
+                    t('filters.remove', { field: labelOf(f.field), value: f.value })
+                  }
                   onRemove={() => toggle(f, false)}
                 />
               </li>
             ))}
           </ul>
           <Button variant="ghost" size="sm" className="h-7 px-2 hover:text-destructive-text" onClick={clearAll}>
-            Clear all
+            {labels?.clearAll ?? 'Clear all'}
           </Button>
         </div>
       )}

package/src/tables/FilterBar/block.meta.ts

@@ -1,4 +1,5 @@
 import type { BlockMeta } from '../../meta';
+import type { FilterBarLabels } from './FilterBar';
 
 export const meta: BlockMeta = {
   name: 'Filter bar',
@@ -6,5 +7,26 @@ export const meta: BlockMeta = {
   status: 'beta',
   description:
     'Search Input, saved views Select, an Add filter Menu with multi-select per field, removable filter chips and Clear all.',
+  labels: [
+    { key: 'searchLandmark', type: 'string', state: 'Always: search landmark name' },
+    { key: 'searchLabel', type: 'string', state: 'Always: search input accessible name' },
+    { key: 'searchPlaceholder', type: 'string', state: 'Always: search input placeholder' },
+    { key: 'savedViewLabel', type: 'string', state: 'When views exist: Select accessible name' },
+    { key: 'savedViewPlaceholder', type: 'string', state: 'When no view selected: Select placeholder' },
+    { key: 'addFilter', type: 'string', state: 'Always: Add filter trigger text and name' },
+    { key: 'activeFilters', type: 'string', state: 'When filters or search exist: active-filters list name' },
+    { key: 'filters', type: 'string', state: 'When filters or search exist: chip section heading' },
+    { key: 'clearAll', type: 'string', state: 'When filters or search exist: clear button text and name' },
+    {
+      key: 'removeFilter',
+      type: '(field: string, value: string) => string',
+      state: 'When chip exists: remove button name; field and value are caller content',
+    },
+    {
+      key: 'resultCount',
+      type: '(count: number) => string',
+      state: 'When resultCount supplied: visible count and polite live region',
+    },
+  ] satisfies Array<{ key: keyof FilterBarLabels; type: string; state: string }>,
   uses: ['Input', 'SimpleSelect', 'Menu', 'MenuCheckboxItem', 'Token', 'Button'],
 };

package/src/tables/PaginationFooter/PaginationFooter.labels.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider } from '@gntik-ai/ui';
+import { PaginationFooter, type PaginationFooterLabels } from './PaginationFooter';
+
+it('replaces pagination chrome and renders formatter results verbatim through page and size changes', async () => {
+  const user = userEvent.setup();
+  const rangeSummary = vi.fn((from: number, to: number, total: number) => `${from}|${to}|${total} registros`);
+  const paginationNav = vi.fn((noun: string) => `Paginación: ${noun}`);
+  const page = vi.fn((n: number) => `Página ${n}`);
+  const labels: PaginationFooterLabels = {
+    rowsPerPage: 'Filas por página',
+    rowsPerPageLabel: 'Tamaño de página',
+    rangeSummary,
+    paginationNav,
+    previous: 'Anterior',
+    next: 'Siguiente',
+    page,
+  };
+  const { container } = render(<PaginationFooter labels={labels} noun="Items" />);
+  expect(screen.getByText('Filas por página')).toBeVisible();
+  expect(screen.getByRole('navigation', { name: 'Paginación: Items' })).toBeVisible();
+  expect(paginationNav).toHaveBeenCalledWith('Items');
+  expect(page).toHaveBeenCalledWith(10);
+  const summary = container.querySelector('[aria-live]');
+  expect(summary?.textContent).toBe('1|10|97 registros');
+  expect(rangeSummary).toHaveBeenLastCalledWith(1, 10, 97);
+  await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+  expect(summary?.textContent).toBe('11|20|97 registros');
+  expect(rangeSummary).toHaveBeenLastCalledWith(11, 20, 97);
+  await user.click(screen.getByRole('button', { name: 'Anterior' }));
+  await user.click(screen.getByRole('button', { name: 'Página 3' }));
+  expect(summary?.textContent).toBe('21|30|97 registros');
+  await user.click(screen.getByRole('combobox', { name: 'Tamaño de página' }));
+  await user.click(await screen.findByRole('option', { name: '25' }));
+  expect(summary?.textContent).toBe('1|25|97 registros');
+  expect(rangeSummary).toHaveBeenLastCalledWith(1, 25, 97);
+});
+
+it('merges individual overrides over provider translations and preserves default summary markup', () => {
+  const { container, rerender } = render(
+    <I18nProvider locale="es">
+      <PaginationFooter />
+    </I18nProvider>,
+  );
+  const original = container.querySelector('[aria-live]')?.outerHTML;
+  const nextName = screen.getAllByRole('button').at(-1)?.getAttribute('aria-label');
+  rerender(
+    <I18nProvider locale="es">
+      <PaginationFooter labels={{ rowsPerPage: 'Custom' }} />
+    </I18nProvider>,
+  );
+  expect(screen.getByText('Custom')).toBeVisible();
+  expect(container.querySelector('[aria-live]')?.outerHTML).toBe(original);
+  expect(screen.getAllByRole('button').at(-1)?.getAttribute('aria-label')).toBe(nextName);
+  expect(screen.getByRole('combobox')).not.toHaveAccessibleName('Custom');
+});

package/src/tables/PaginationFooter/PaginationFooter.tsx

@@ -1,7 +1,19 @@
 import { cn, Pagination, SimpleSelect, useI18n } from '@gntik-ai/ui';
 import { useState } from 'react';
 
+export interface PaginationFooterLabels {
+  rowsPerPage: string;
+  rowsPerPageLabel: string;
+  rangeSummary: (from: number, to: number, total: number) => string;
+  paginationNav: (noun: string) => string;
+  previous: string;
+  next: string;
+  page: (page: number) => string;
+}
+
 export interface PaginationFooterProps {
+  /** Per-key overrides; omitted keys retain the existing provider translations and defaults. */
+  labels?: Partial<PaginationFooterLabels>;
   /** Total number of rows. */
   total?: number;
   /** Current page, 1-based (controlled). */
@@ -32,6 +44,7 @@ export function PaginationFooter({
   noun: nounProp,
   locale: localeProp,
   className,
+  labels,
 }: PaginationFooterProps) {
   const { t, locale: providerLocale } = useI18n();
   const locale = localeProp ?? providerLocale;
@@ -63,10 +76,10 @@ export function PaginationFooter({
     <div className={cn('flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between', className)}>
       <div className="flex items-center gap-2.5">
         <span className="text-[12.5px] text-muted-foreground" aria-hidden>
-          {t('table.rowsPerPage')}
+          {labels?.rowsPerPage ?? t('table.rowsPerPage')}
         </span>
         <SimpleSelect
-          aria-label={t('table.rowsPerPage')}
+          aria-label={labels?.rowsPerPageLabel ?? t('table.rowsPerPage')}
           size="sm"
           className="w-[76px] font-mono"
           value={String(pageSize)}
@@ -76,17 +89,28 @@ export function PaginationFooter({
       </div>
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
         <p className="text-[12.5px] text-muted-foreground tabular-nums" aria-live="polite">
-          <span className="font-mono text-foreground">
-            {fmt(from)}–{fmt(to)}
-          </span>{' '}
-          {t('pagination.of')} <span className="font-mono text-foreground">{fmt(total)}</span>
+          {labels?.rangeSummary ? (
+            labels.rangeSummary(from, to, total)
+          ) : (
+            <>
+              <span className="font-mono text-foreground">
+                {fmt(from)}–{fmt(to)}
+              </span>{' '}
+              {t('pagination.of')} <span className="font-mono text-foreground">{fmt(total)}</span>
+            </>
+          )}
         </p>
         <Pagination
           page={page}
           pageCount={pageCount}
           onPageChange={goTo}
           size="sm"
-          labels={{ nav: t('table.pagination', { noun }) }}
+          labels={{
+            nav: labels?.paginationNav?.(noun) ?? t('table.pagination', { noun }),
+            previous: labels?.previous,
+            next: labels?.next,
+            page: labels?.page,
+          }}
         />
       </div>
     </div>

package/src/tables/PaginationFooter/block.meta.ts

@@ -1,4 +1,5 @@
 import type { BlockMeta } from '../../meta';
+import type { PaginationFooterLabels } from './PaginationFooter';
 
 export const meta: BlockMeta = {
   name: 'Pagination footer',
@@ -6,5 +7,27 @@ export const meta: BlockMeta = {
   status: 'beta',
   description:
     'Table footer with a rows-per-page Select, a "1–10 of 97" summary and numbered Pagination; controlled or uncontrolled.',
+  labels: [
+    { key: 'rowsPerPage', type: 'string', state: 'Always: visible page-size text' },
+    { key: 'rowsPerPageLabel', type: 'string', state: 'Always: page-size Select accessible name' },
+    {
+      key: 'rangeSummary',
+      type: '(from: number, to: number, total: number) => string',
+      state: 'Every page and page-size change: visible summary and polite live region',
+    },
+    {
+      key: 'paginationNav',
+      type: '(noun: string) => string',
+      state:
+        'Always: navigation accessible name; noun is caller content or defaults to the provider translation of rows',
+    },
+    { key: 'previous', type: 'string', state: 'Always: previous-page button name' },
+    { key: 'next', type: 'string', state: 'Always: next-page button name' },
+    {
+      key: 'page',
+      type: '(page: number) => string',
+      state: 'Always: numbered-page button name; number stays caller content',
+    },
+  ] satisfies Array<{ key: keyof PaginationFooterLabels; type: string; state: string }>,
   uses: ['SimpleSelect', 'Pagination'],
 };