@studiolxd/brand 40.1.0 → 41.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +41 -0
- package/dist/_types/messages/BrandMessages.d.ts +5 -1
- package/dist/_types/messages/index.d.ts +1 -1
- package/dist/_types/molecules/Table/Table.d.ts +30 -7
- package/dist/_types/organisms/DataTable/DataTable.d.ts +28 -6
- package/dist/data-table.js +300 -299
- package/dist/table.js +53 -52
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,47 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
|
|
|
7
7
|
regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
|
|
8
8
|
para breaking changes.
|
|
9
9
|
|
|
10
|
+
## [41.0.0] — 2026-09-15
|
|
11
|
+
|
|
12
|
+
> **Major.** Segunda familia al proveedor de textos: `Table` y `DataTable` pierden sus
|
|
13
|
+
> textos castellano por defecto.
|
|
14
|
+
|
|
15
|
+
### Las tablas leen del proveedor
|
|
16
|
+
|
|
17
|
+
Mismo mecanismo que estrenó `Pagination` en la v40.0.0 y mismo orden —**prop → proveedor →
|
|
18
|
+
error**—, ahora en la familia que más superficie ocupa en una aplicación. `BrandMessages`
|
|
19
|
+
gana dos espacios:
|
|
20
|
+
|
|
21
|
+
- **`table`** — `actions`, `sortable`, `sortedAscending`, `sortedDescending`.
|
|
22
|
+
- **`dataTable`** — `empty`, `search`.
|
|
23
|
+
|
|
24
|
+
Los cinco calcan clave a clave el catálogo de la suite, así que montarlos es mapear y no
|
|
25
|
+
traducir de nuevo. Es incompatible **en tiempo de compilación**, que es justo lo que se
|
|
26
|
+
busca: el contrato exige los dos espacios, así que ninguna aplicación compila hasta
|
|
27
|
+
añadirlos — nadie se entera en producción de que le falta un texto.
|
|
28
|
+
|
|
29
|
+
### Lo que NO se fue al proveedor, y por qué
|
|
30
|
+
|
|
31
|
+
La distinción que gobierna toda la campaña: al catálogo común va lo que el componente emite
|
|
32
|
+
**por su cuenta** e igual en toda la suite; se queda como prop lo que es **contenido de esa
|
|
33
|
+
pantalla**.
|
|
34
|
+
|
|
35
|
+
- `Table.caption` y `TableRow.label` nombran ESA tabla y ESA fila.
|
|
36
|
+
- `DataTable.ariaLabel` nombra ESA lista.
|
|
37
|
+
- `DataTable.emptyMessage` **sobrevive como anulación**: el catálogo pone el aviso genérico,
|
|
38
|
+
y la prop queda para el que explica algo del dominio —«todavía no has invitado a nadie»—.
|
|
39
|
+
No es una concesión: en la suite ya hay pantallas que dan un vacío distinto según haya
|
|
40
|
+
filtros o no, y eso ningún catálogo común puede saberlo.
|
|
41
|
+
|
|
42
|
+
`DataTable.searchClearLabel` se queda como **reenvío puro**: ese texto no lo emite la tabla,
|
|
43
|
+
lo emite el `InputField` que lleva dentro, y ese átomo todavía no está migrado.
|
|
44
|
+
|
|
45
|
+
### Lo que esta ola enseña sobre las que vienen
|
|
46
|
+
|
|
47
|
+
Una familia no queda limpia del todo mientras reenvíe texto a un componente sin migrar, y
|
|
48
|
+
eso **no se ve desde dentro de la familia**. De ahí que las olas siguientes se ordenen para
|
|
49
|
+
que los átomos de formulario caigan pronto: medio catálogo termina reenviando a ellos.
|
|
50
|
+
|
|
10
51
|
## [40.1.0] — 2026-09-15
|
|
11
52
|
|
|
12
53
|
> **Minor.** `AnnotationThread` gana un tercer estado y una ranura para la coordenada de
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import type { PaginationMessages } from '../molecules/Pagination/Pagination';
|
|
2
|
+
import type { TableMessages } from '../molecules/Table/Table';
|
|
3
|
+
import type { DataTableMessages } from '../organisms/DataTable/DataTable';
|
|
2
4
|
/**
|
|
3
5
|
* El contrato de textos de la librería: un espacio por componente, y dentro
|
|
4
6
|
* de cada espacio **todas las claves obligatorias**.
|
|
@@ -22,5 +24,7 @@ import type { PaginationMessages } from '../molecules/Pagination/Pagination';
|
|
|
22
24
|
*/
|
|
23
25
|
export interface BrandMessages {
|
|
24
26
|
pagination: PaginationMessages;
|
|
27
|
+
table: TableMessages;
|
|
28
|
+
dataTable: DataTableMessages;
|
|
25
29
|
}
|
|
26
|
-
export type { PaginationMessages };
|
|
30
|
+
export type { PaginationMessages, TableMessages, DataTableMessages };
|
|
@@ -2,4 +2,4 @@ export { BrandMessagesProvider } from './BrandMessagesProvider';
|
|
|
2
2
|
export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
|
|
3
3
|
export { useBrandMessages } from './BrandMessagesContext';
|
|
4
4
|
export type { BrandMessagesReader } from './BrandMessagesContext';
|
|
5
|
-
export type { BrandMessages, PaginationMessages } from './BrandMessages';
|
|
5
|
+
export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, } from './BrandMessages';
|
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import './Table.css';
|
|
3
|
+
/**
|
|
4
|
+
* Los textos que la tabla emite por su cuenta: el cromo de la cabecera —el
|
|
5
|
+
* estado de ordenación y el rótulo de la columna de acciones—, igual en toda
|
|
6
|
+
* la suite. Los nombres calcan el espacio `table` del catálogo, así que
|
|
7
|
+
* montarlo es mapear clave a clave y no traducir de nuevo.
|
|
8
|
+
*
|
|
9
|
+
* Lo que NO está aquí es deliberado: el `caption` de una tabla y el `label`
|
|
10
|
+
* de una fila son contenido de ESA pantalla, no cromo del componente, y
|
|
11
|
+
* siguen siendo props sin valor por defecto.
|
|
12
|
+
*/
|
|
13
|
+
export interface TableMessages {
|
|
14
|
+
/** Rótulo oculto de la cabecera de la columna de acciones. */
|
|
15
|
+
actions: string;
|
|
16
|
+
/** Texto oculto de una columna ordenable que todavía no ordena. */
|
|
17
|
+
sortable: string;
|
|
18
|
+
/** Texto oculto de la columna ordenada de forma ascendente. */
|
|
19
|
+
sortedAscending: string;
|
|
20
|
+
/** Texto oculto de la columna ordenada de forma descendente. */
|
|
21
|
+
sortedDescending: string;
|
|
22
|
+
}
|
|
3
23
|
export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
|
|
4
24
|
/**
|
|
5
25
|
* Texto de `<caption>` (se oculta visualmente). **Opcional**: sin `caption` no se
|
|
@@ -19,7 +39,10 @@ export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellEl
|
|
|
19
39
|
onSort?: () => void;
|
|
20
40
|
/** Marca esta columna como columna de acciones: ancho mínimo y cabecera oculta visualmente */
|
|
21
41
|
actions?: boolean;
|
|
22
|
-
/**
|
|
42
|
+
/**
|
|
43
|
+
* Texto accesible de la cabecera de acciones. Sin default: cuando no se
|
|
44
|
+
* pasa, sale de `table.actions` del `BrandMessagesProvider`.
|
|
45
|
+
*/
|
|
23
46
|
actionsLabel?: string;
|
|
24
47
|
/**
|
|
25
48
|
* Pega la columna al borde final (`inset-inline-end: 0`) cuando la tabla
|
|
@@ -29,13 +52,13 @@ export interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableCellEl
|
|
|
29
52
|
*/
|
|
30
53
|
sticky?: 'end';
|
|
31
54
|
/**
|
|
32
|
-
* Texto accesible del estado de ordenación ascendente.
|
|
33
|
-
*
|
|
55
|
+
* Texto accesible del estado de ordenación ascendente. Sin default:
|
|
56
|
+
* `table.sortedAscending`.
|
|
34
57
|
*/
|
|
35
58
|
sortedAscLabel?: string;
|
|
36
|
-
/** Texto accesible del estado descendente.
|
|
59
|
+
/** Texto accesible del estado descendente. Sin default: `table.sortedDescending`. */
|
|
37
60
|
sortedDescLabel?: string;
|
|
38
|
-
/** Texto accesible de la columna ordenable sin ordenar.
|
|
61
|
+
/** Texto accesible de la columna ordenable sin ordenar. Sin default: `table.sortable`. */
|
|
39
62
|
sortableLabel?: string;
|
|
40
63
|
/**
|
|
41
64
|
* Impide que el rótulo de esta columna se parta en dos líneas. Mismo valor
|
|
@@ -55,8 +78,8 @@ export interface TableRowProps extends Omit<React.HTMLAttributes<HTMLTableRowEle
|
|
|
55
78
|
/**
|
|
56
79
|
* Nombre accesible de la fila. Por defecto el rol `row` toma su nombre del
|
|
57
80
|
* contenido de sus celdas; pásalo solo cuando ese texto no identifique la
|
|
58
|
-
* fila (celdas de solo iconos, datos crípticos).
|
|
59
|
-
*
|
|
81
|
+
* fila (celdas de solo iconos, datos crípticos). No sale del catálogo
|
|
82
|
+
* común: identifica a ESTA fila, así que lo escribe el consumidor.
|
|
60
83
|
*/
|
|
61
84
|
label?: string;
|
|
62
85
|
children: ReactNode;
|
|
@@ -3,6 +3,18 @@ import { type ColumnDef, type RowData } from '@tanstack/react-table';
|
|
|
3
3
|
import { type PaginationProps } from '../../molecules/Pagination/Pagination';
|
|
4
4
|
import { type TableHeaderProps } from '../../molecules/Table/Table';
|
|
5
5
|
import './DataTable.css';
|
|
6
|
+
/**
|
|
7
|
+
* Los textos que la tabla de datos emite por su cuenta. Son dos, y los dos son
|
|
8
|
+
* cromo: el rótulo del buscador y el aviso de que no hay filas. El resto de su
|
|
9
|
+
* texto o llega por props de contenido (`ariaLabel`) o lo ponen sus piezas
|
|
10
|
+
* (`Table`, `Pagination`), cada una desde su propio espacio.
|
|
11
|
+
*/
|
|
12
|
+
export interface DataTableMessages {
|
|
13
|
+
/** Aviso del estado vacío cuando no hay filas que pintar. */
|
|
14
|
+
empty: string;
|
|
15
|
+
/** Rótulo —oculto a la vista— y placeholder del buscador. */
|
|
16
|
+
search: string;
|
|
17
|
+
}
|
|
6
18
|
/** Alineación del contenido de una columna. `start` es el default. */
|
|
7
19
|
export type DataTableAlign = 'start' | 'center' | 'end';
|
|
8
20
|
declare module '@tanstack/react-table' {
|
|
@@ -66,9 +78,15 @@ export interface DataTableProps<TData, TValue> {
|
|
|
66
78
|
value: string;
|
|
67
79
|
onChange: (value: string) => void;
|
|
68
80
|
};
|
|
69
|
-
/**
|
|
81
|
+
/**
|
|
82
|
+
* Placeholder y nombre accesible del buscador. Sin default: cuando no se
|
|
83
|
+
* pasa, sale de `dataTable.search` del `BrandMessagesProvider`.
|
|
84
|
+
*/
|
|
70
85
|
searchPlaceholder?: string;
|
|
71
|
-
/**
|
|
86
|
+
/**
|
|
87
|
+
* Nombre accesible del botón que vacía el buscador. `DataTable` no le pone
|
|
88
|
+
* ninguno: sin esta prop manda el de `InputField`.
|
|
89
|
+
*/
|
|
72
90
|
searchClearLabel?: string;
|
|
73
91
|
/** Se renderiza a la derecha del buscador. */
|
|
74
92
|
toolbar?: ReactNode;
|
|
@@ -81,7 +99,11 @@ export interface DataTableProps<TData, TValue> {
|
|
|
81
99
|
footerActions?: ReactNode;
|
|
82
100
|
/** Filas por página cuando la tabla pagina en cliente. */
|
|
83
101
|
pageSize?: number;
|
|
84
|
-
/**
|
|
102
|
+
/**
|
|
103
|
+
* Texto del estado vacío. Sin default: sale de `dataTable.empty`. Pásalo
|
|
104
|
+
* cuando esta pantalla tenga algo propio que decir («Aún no has invitado a
|
|
105
|
+
* nadie»), que un catálogo común no puede saber.
|
|
106
|
+
*/
|
|
85
107
|
emptyMessage?: string;
|
|
86
108
|
isLoading?: boolean;
|
|
87
109
|
pagination?: DataTableServerPagination;
|
|
@@ -94,8 +116,8 @@ export interface DataTableProps<TData, TValue> {
|
|
|
94
116
|
* paginación (en cliente o en servidor) sobre el `Table` y el `Pagination` del
|
|
95
117
|
* DS. El comportamiento lo aporta TanStack Table.
|
|
96
118
|
*
|
|
97
|
-
*
|
|
98
|
-
* `
|
|
99
|
-
*
|
|
119
|
+
* Ningún texto viene puesto: los propios salen del espacio `dataTable` del
|
|
120
|
+
* `BrandMessagesProvider`, y los de sus piezas de los suyos (`table`,
|
|
121
|
+
* `pagination`). Las props de texto siguen ahí como anulación puntual.
|
|
100
122
|
*/
|
|
101
123
|
export declare function DataTable<TData, TValue>({ columns, data, ariaLabel, ariaLabelledBy, searchColumnId, search, searchPlaceholder, searchClearLabel, toolbar, footerActions, pageSize, emptyMessage, isLoading, pagination, headerLabels, paginationLabels, className, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|