lkd-web-kit 0.10.2 → 0.10.4

package/codex/skills/create-table-component/SKILL.md

@@ -1,189 +0,0 @@
----
-name: create-table-component
-description: Crear, extraer o refactorizar tablas/listados tabulares en proyectos internos usando el patron estricto de componente encapsulado con MyTable, TableWrapper y createColumnHelper. Usar cuando Codex deba mostrar datos en tabla, mover columnas/hook de servicio a un componente de tabla, agregar paginacion, header/footer de tabla, acciones por fila, tablas verticales o adaptar una vista para no usar MyTablePagination.
----
-
-# Create Table Component
-
-Usar este skill para crear o refactorizar tablas del proyecto.
-
-## Workflow obligatorio
-
-1. Leer primero `docs/local-components.md` y `docs/lkd-web-kit.md`.
-2. Si toca Next.js, leer la documentacion relevante en `node_modules/next/dist/docs/`.
-3. Revisar un ejemplo cercano antes de editar; preferir `Table{EntityPlural}.tsx`.
-4. Crear o mantener la tabla en un componente encapsulado junto a la vista/feature que la consume.
-5. Usar `createColumnHelper<RowData>()`; no declarar `any`.
-6. Importar `MyTable` y `TableWrapper*` desde `lkd-web-kit`.
-7. Usar `MyTable` para renderizar la tabla.
-8. Usar `TableWrapper` como raiz visual de la tabla.
-9. No usar `MyTablePagination` para nuevas tablas.
-
-## Checklist antes de escribir columnas
-
-- Definir si la tabla es horizontal o `variant="vertical"`.
-- Definir que representa cada header: solo deben ser columnas/campos reales de la tabla.
-- Distinguir contenido superior/inferior de estructura tabular: titulos, subtitulos, emails, filtros, secciones y acciones van en `TableWrapperHeader`/`TableWrapperFooter`, no en columnas falsas.
-- Definir si la data representa registros completos o pares label/value. Para `variant="vertical"`, preferir registros completos con campos reales.
-
-## Decisiones que hay que preguntar
-
-Si el usuario no lo especifica y no se puede inferir del codigo cercano, preguntar:
-
-- Si la tabla lleva contenido arriba de la tabla.
-- Si la tabla lleva contenido abajo de la tabla.
-- Si la tabla lleva paginacion.
-- Si la tabla debe ser horizontal o `variant="vertical"`.
-
-No asumir que `TableWrapperHeader` implica titulo. Usarlo para cualquier contenido superior: titulo, filtros, acciones, botones, tabs, resumen, subtitulo, email o encabezado de seccion.
-
-No asumir que `TableWrapperFooter` implica paginacion. Usarlo para cualquier contenido inferior: paginacion, totales, leyendas, acciones o resumen.
-
-Si hay titulo, usar `TableWrapperTitle` dentro de `TableWrapperHeader`.
-
-Si hay paginacion, usar `TableWrapperPagination` dentro de `TableWrapperFooter`.
-
-## Paginacion
-
-- Usar `TableWrapperPagination`, nunca `MyTablePagination` en tablas nuevas.
-- Usar `variant="short"` para paginacion compacta con texto tipo `1-10 de 15 filas`; queda alineada a la derecha por defecto.
-- Para `variant="short"`, pasar siempre `pageSize`. Si los datos vienen async, usar un fallback estable como `pageSize={currentPage?.pageSize ?? 10}`.
-- No armar el texto de rango en la vista si alcanza con metadata: pasar `totalRows`, `pageSize` y `currentRows`.
-- Usar `text` solo como override manual del texto calculado.
-- Mantener `variant="long"` o sin `variant` para la paginacion completa.
-
-## Tablas verticales
-
-Para `MyTable variant="vertical"`, modelar los campos como columnas reales y la data como una fila/registro completo. Los nombres de campos van en `column.header`; los valores van en `column.cell`.
-
-No simular una tabla vertical con una columna `entry`, `{ field, value }` o un `grid` dentro de una celda.
-
-Ejemplo:
-
-```tsx
-type UserInformationRow = {
-  name: string | undefined;
-  lastName: string | undefined;
-  email: string | undefined;
-};
-
-const columnHelper = createColumnHelper<UserInformationRow>();
-
-const columns = [
-  columnHelper.accessor("name", {
-    header: "Nombre",
-    cell: (cell) => cell.getValue() ?? "-",
-  }),
-  columnHelper.accessor("lastName", {
-    header: "Apellido",
-    cell: (cell) => cell.getValue() ?? "-",
-  }),
-  columnHelper.accessor("email", {
-    header: "Email",
-    cell: (cell) => cell.getValue() ?? "-",
-  }),
-];
-
-<TableWrapper>
-  <TableWrapperHeader>
-    <TableWrapperTitle>Informacion del usuario</TableWrapperTitle>
-    <span>{user.email}</span>
-    <div>Datos personales</div>
-  </TableWrapperHeader>
-  <MyTable columns={columns} data={[user]} variant="vertical" />
-</TableWrapper>;
-```
-
-## Encapsulacion
-
-- Mover `columns` al componente `Table{EntityPlural}`.
-- Si la tabla consulta datos, mover el hook/servicio al componente de tabla.
-- Si la tabla pagina, mover `pageIndex` y `setPageIndex` al componente de tabla.
-- El padre solo debe pasar entradas externas reales: filtros ya aplicados, ids, callbacks o flags.
-- Al cambiar filtros externos, resetear la pagina dentro del componente de tabla con `useEffect` si aplica.
-
-## Patron base
-
-```tsx
-"use client";
-
-import { createColumnHelper } from "@tanstack/react-table";
-import {
-  MyTable,
-  TableWrapper,
-  TableWrapperFooter,
-  TableWrapperHeader,
-  TableWrapperPagination,
-  TableWrapperTitle,
-} from "lkd-web-kit";
-import { useMemo, useState } from "react";
-
-type ItemTableData = {
-  id: string;
-  name: string;
-};
-
-type TableItemsProps = {
-  selectedFilters: Record<string, unknown>;
-};
-
-const columnHelper = createColumnHelper<ItemTableData>();
-
-const TableItems = ({ selectedFilters }: TableItemsProps) => {
-  const [pageIndex, setPageIndex] = useState(0);
-
-  const columns = useMemo(
-    () => [
-      columnHelper.accessor("name", {
-        header: "Nombre",
-        cell: (cell) => cell.getValue(),
-      }),
-    ],
-    [],
-  );
-
-  return (
-    <TableWrapper>
-      <TableWrapperHeader>
-        <TableWrapperTitle>Items</TableWrapperTitle>
-      </TableWrapperHeader>
-      <MyTable columns={columns} data={[]} />
-      <TableWrapperFooter>
-        <TableWrapperPagination
-          total={1}
-          value={pageIndex + 1}
-          onChange={(page) => setPageIndex(page - 1)}
-        />
-      </TableWrapperFooter>
-    </TableWrapper>
-  );
-};
-
-export default TableItems;
-```
-
-Ejemplo short:
-
-```tsx
-<TableWrapperPagination
-  variant="short"
-  total={pageData?.total.pages ?? 1}
-  value={(pageData?.currentPage.pageIndex ?? 0) + 1}
-  totalRows={pageData?.total.elements}
-  pageSize={pageData?.currentPage.pageSize ?? 10}
-  currentRows={pageData?.currentPage.elements}
-  onChange={(page) => setPageIndex(page - 1)}
-/>;
-```
-
-## Antipatrones
-
-- No dejar columnas o hooks de servicio de la tabla en la vista padre.
-- No crear wrappers nuevos si `TableWrapper` y `MyTable` alcanzan.
-- No usar `Paper` directamente para la tabla cuando el patron pide `TableWrapper`.
-- No usar `MyTablePagination` en codigo nuevo.
-- No usar `paginationVariant` ni `paginationText` en `TableWrapperPagination`; usar `variant` y `text`.
-- No calcular `1-10 de 15 filas` en la vista si `TableWrapperPagination` puede calcularlo.
-- No agregar abstracciones compartidas antes de tener reutilizacion real.
-- No crear `MyTableVertical` si `MyTable variant="vertical"` resuelve el caso.
-- No poner titulos de seccion como "Datos personales" o "Informacion del usuario" como headers de columna.

package/codex/skills/create-table-component/agents/openai.yaml

@@ -1,3 +0,0 @@
-display_name: Create Table Component
-short_description: Create encapsulated project tables with MyTable and TableWrapper.
-default_prompt: Create or refactor a table component using this project's MyTable and TableWrapper pattern.

package/codex/skills/rhf-lkd-forms/SKILL.md

@@ -1,186 +0,0 @@
----
-name: rhf-lkd-forms
-description: Crear y revisar formularios, filtros, campos controlados, integraciones con React Hook Form, validaciones Zod, reglas superRefine, botones de submit y patrones Form* de lkd-web-kit. Usar cuando Codex trabaje en interfaces de formularios, filtros, wrappers de campos, schemas, valores iniciales, mapeo de payloads, flujos de submit o comportamiento de validación en proyectos que usan React Hook Form, Zod y lkd-web-kit.
----
-
-# Formularios RHF + lkd-web-kit
-
-Usar este skill para formularios, filtros y campos controlados construidos con React Hook Form, Zod y `lkd-web-kit`.
-
-## Workflow obligatorio
-
-1. Leer primero la documentación de formularios del proyecto: `docs/lkd-web-kit.md` o el equivalente local.
-2. Reutilizar la familia `Form*` existente antes de crear algo nuevo:
-   `Form`, `FormTextInput`, `FormSelect`, `FormMultiSelect`, `FormTextarea`,
-   `FormNumberInput`, `FormMonthPickerInput`, `FormCheckbox`,
-   `FormRadioGroup`, `FormSubmitButton` y wrappers cercanos del proyecto.
-3. Importar primero desde `lkd-web-kit`. Usar wrappers locales solo cuando el proyecto ya los tenga y agreguen estilos o comportamiento propio.
-4. No crear un wrapper nuevo si el kit o el proyecto ya tienen un campo equivalente.
-5. Para formularios con validación, usar `useForm` con `zodResolver(schema)`.
-6. Pasar `mode` solo cuando la API del componente lo soporte. No inventar props.
-
-## Estructura recomendada
-
-- Mantener formularios triviales inline.
-- Cuando un formulario mapea datos de API o construye un payload, separar lo repetitivo:
-  - `schema`: objeto Zod y tipo inferido.
-  - `createDefaultValues`: datos de API/dominio a valores del formulario.
-  - `createPayload`: valores del formulario a payload de API.
-- Usar `z.input<typeof schema>` para defaults cuando haya transforms o preprocess.
-- Usar `z.infer<typeof schema>` para datos ya validados en submit.
-- Colocar el código privado junto a la ruta o feature, salvo que sea realmente compartido.
-
-## Validaciones con Zod
-
-- Poner reglas de campo en el schema base.
-- No poner mensajes textuales en reglas base de Zod como `min(1, "Texto")`; usar la configuración global de errores o la capa de traducciones del proyecto.
-- Usar `superRefine` para reglas cruzadas entre campos y reglas de negocio.
-- En `superRefine`, asociar el issue al campo que el usuario puede corregir usando `path`.
-- Permitir mensajes custom en `superRefine` cuando el proyecto no tenga un mapeo de códigos para esa regla de negocio.
-- Preferir `ctx.addIssue(...)`; usar `ctx.issues.push(...)` solo si ya es el patrón local.
-
-## Campos y filtros
-
-- Todo input que modifique estado de React Hook Form debe ser un componente `Form*`.
-- Usar `My*` o inputs Mantine solo para UI standalone fuera de React Hook Form.
-- Preferir componentes de campo del proyecto, como `NameField` o `StatusField`, cuando ya provean `name`, labels, opciones traducidas o carga de datos.
-- Los filtros siguen el mismo patrón: `useForm` + `Form` + `Form*`.
-- El submit de filtros puede actualizar query params, estado local o estado del padre según el proyecto; no agregar una librería de estado solo por un filtro.
-- Si un campo client lee catálogos o datos cacheados, verificar que la página o el padre carguen esos datos según la convención del proyecto.
-
-## Submit y errores
-
-- Usar `FormSubmitButton` para acciones de submit. No usar aliases como `FormButtonSubmit` salvo que el proyecto realmente los exporte.
-- Dejar que `FormSubmitButton` maneje el loading de submit mediante React Hook Form.
-- En submits async, mostrar la notificación de éxito o error esperada por el proyecto.
-- En `catch`, mostrar la notificación de error y luego hacer `throw error` para que el wrapper del formulario pueda reaccionar visualmente.
-- Recortar o normalizar valores en el límite donde se arma el payload de API, no en handlers sueltos de campos.
-
-## Antipatrones
-
-- No usar `register` directamente para campos ya cubiertos por `Form*`.
-- No duplicar wrappers tipo `FormTextInput` o `FormSelect`.
-- No usar `any`; tipar valores del formulario desde el schema.
-- No agregar helpers custom de validación cuando Zod ya cubre la regla.
-- No mezclar campos Mantine no controlados dentro de un formulario de React Hook Form.
-- No agregar dependencias nuevas para estado de formulario, validación de campos o filtros comunes.
-
-## Ejemplos mínimos
-
-Formulario de edición:
-
-```tsx
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  FormSelect,
-  FormSubmitButton,
-  FormTextInput,
-} from "lkd-web-kit";
-import { useForm } from "react-hook-form";
-import z from "zod";
-import Form from "src/components/form/Form";
-
-const editSchema = z.object({
-  name: z.string().min(1),
-  status: z.string().nullable(),
-});
-
-type EditValues = z.infer<typeof editSchema>;
-
-const createDefaultValues = (item: { name: string; status: string | null }): EditValues => ({
-  name: item.name,
-  status: item.status,
-});
-
-const createPayload = (data: EditValues) => ({
-  name: data.name.trim(),
-  status: data.status || undefined,
-});
-
-export function EditItemForm({ item }: { item: { name: string; status: string | null } }) {
-  const methods = useForm<EditValues>({
-    defaultValues: createDefaultValues(item),
-    resolver: zodResolver(
-      editSchema.superRefine((data, ctx) => {
-        if (data.status === "published" && data.name.trim().length < 3) {
-          ctx.addIssue({
-            code: "custom",
-            message: "El nombre es demasiado corto para publicar",
-            path: ["name"],
-          });
-        }
-      }),
-    ),
-  });
-
-  return (
-    <Form
-      methods={methods}
-      onSubmit={async (data) => {
-        try {
-          await updateItem(createPayload(data));
-        } catch (error) {
-          showErrorNotification();
-          throw error;
-        }
-      }}
-    >
-      <FormTextInput name="name" label="Nombre" />
-      <FormSelect
-        name="status"
-        label="Estado"
-        data={[
-          { value: "draft", label: "Borrador" },
-          { value: "published", label: "Publicado" },
-        ]}
-      />
-      <FormSubmitButton>Guardar</FormSubmitButton>
-    </Form>
-  );
-}
-```
-
-Filtro:
-
-```tsx
-"use client";
-
-import { FormSelect, FormSubmitButton, FormTextInput } from "lkd-web-kit";
-import { useForm } from "react-hook-form";
-import Form from "src/components/form/Form";
-
-type FilterValues = {
-  search: string;
-  status: string | null;
-};
-
-export function ItemFilters({
-  onApply,
-}: {
-  onApply: (values: FilterValues) => void;
-}) {
-  const methods = useForm<FilterValues>({
-    defaultValues: {
-      search: "",
-      status: null,
-    },
-  });
-
-  return (
-    <Form methods={methods} onSubmit={onApply}>
-      <FormTextInput name="search" label="Buscar" />
-      <FormSelect
-        name="status"
-        label="Estado"
-        data={[
-          { value: "draft", label: "Borrador" },
-          { value: "published", label: "Publicado" },
-        ]}
-      />
-      <FormSubmitButton>Aplicar</FormSubmitButton>
-    </Form>
-  );
-}
-```