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;
|
||
|
|
}
|