David
ba034794c6
- Introduced `ColumnBrowserFixture` component for testing column visibility and interactions. - Created `entity-column-configuration.ts` to define types and utility functions for managing entity columns. - Implemented Playwright tests in `columns-ui.test.py` to validate column behavior and preferences. - Added `visual-audit-volume.py` script to enhance the visual audit setup with synthetic data.
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { Button } from "@repo/shadcn-ui/components/button";
|
|
import { useState } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
|
|
import type { EntityColumn } from "./components/entity-list";
|
|
import { EntityTable } from "./components/entity-list";
|
|
|
|
/** Fixture importada solo por Vite desde las pruebas MCP; no registra rutas ni endpoints. */
|
|
function ColumnBrowserFixture({ locale }: { locale: string }) {
|
|
const [catalog, setCatalog] = useState("initial");
|
|
const english = locale.startsWith("en");
|
|
const columns: EntityColumn<{ id: string; name: string }>[] = [
|
|
{
|
|
id: "name",
|
|
label: english ? "Name" : "Nombre",
|
|
hideable: false,
|
|
value: (item) => item.name,
|
|
render: (item) => item.name,
|
|
},
|
|
...(catalog === "removed"
|
|
? []
|
|
: [
|
|
{
|
|
id: "detail",
|
|
label: english ? "Notes" : "Notas",
|
|
keywords: ["revisión técnica"],
|
|
defaultVisible: false,
|
|
render: () => "Detalles",
|
|
},
|
|
]),
|
|
{ id: "year", label: english ? "Year" : "Año", value: () => 2026, render: () => 2026 },
|
|
...(catalog === "new"
|
|
? [
|
|
{
|
|
id: "late",
|
|
label: english ? "New field" : "Campo nuevo",
|
|
defaultVisible: false,
|
|
render: () => "Campo posterior",
|
|
},
|
|
]
|
|
: []),
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 p-4">
|
|
<div className="flex gap-2">
|
|
<Button onClick={() => setCatalog("new")}>Añadir campo</Button>
|
|
<Button onClick={() => setCatalog("removed")}>Retirar campo</Button>
|
|
</div>
|
|
<EntityTable
|
|
columns={columns}
|
|
columnVisibilityStorageKey="columns-test-current"
|
|
items={[{ id: "one", name: "Identidad" }]}
|
|
locale={locale}
|
|
title={english ? "Sample" : "Muestra"}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function mountColumnFixture(target: HTMLElement, locale: string) {
|
|
const root = createRoot(target);
|
|
|
|
root.render(<ColumnBrowserFixture locale={locale} />);
|
|
|
|
return root;
|
|
}
|