zemion
6d37aa527f
Verified with the coordinated workspace changes by devkit full run 2026-09-08T225814-186389-0000-3e3ed7cd (all seven phases passed). This shared UI pass does not mark the individual module reviews complete.
47 lines
3.7 KiB
TypeScript
Executable File
47 lines
3.7 KiB
TypeScript
Executable File
import { useState } from "react";
|
|
import { Eye } from "lucide-react";
|
|
import Button from "../src/components/Button";
|
|
import Card from "../src/components/Card";
|
|
import ConnectionTree from "../src/components/ConnectionTree";
|
|
import ContentSection from "../src/components/ContentSection";
|
|
import LoadingFrame from "../src/components/LoadingFrame";
|
|
import DataGrid, { type DataGridColumn } from "../src/components/table/DataGrid";
|
|
import TableActionGroup from "../src/components/table/TableActionGroup";
|
|
|
|
type Row = { id: string; name: string; detail: string };
|
|
const rows: Row[] = ["Alpha", "Beta", "Gamma"].map((name) => ({ id: name, name, detail: "A long configured value ".repeat(12) }));
|
|
|
|
/** The real shared surfaces, without module-local inset or width overrides. */
|
|
export default function CardTableLayoutScenario() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [inspected, setInspected] = useState("");
|
|
const columns: DataGridColumn<Row>[] = [
|
|
{ id: "name", header: "Name", minWidth: 160, value: (row) => row.name },
|
|
{ id: "detail", header: "Details", minWidth: 220, value: (row) => row.detail },
|
|
{ id: "actions", header: "Actions", columnType: "actions", sticky: "end", render: (row) => <TableActionGroup actions={[
|
|
{ id: "inspect", label: `Inspect ${row.name}`, icon: <Eye />, onClick: () => setInspected(row.name) }
|
|
]} /> }
|
|
];
|
|
const grid = (id: string) => <DataGrid id={`card-table-${id}`} rows={rows} columns={columns} getRowKey={(row) => row.id} />;
|
|
const tree = () => <ConnectionTree rows={rows} columns={[{ id: "name", header: "Name", render: (row: Row) => row.name }]} getRowKey={(row) => row.id} />;
|
|
return <main style={{ padding: 16, minWidth: 0, display: "grid", gap: 16, gridTemplateColumns: "minmax(0, 1fr)" }}>
|
|
<Button onClick={() => setLoading((value) => !value)}>Toggle loading</Button>
|
|
<output data-testid="card-table-inspected">{inspected}</output>
|
|
<Card title="Direct table" data-testid="direct-table">{grid("direct")}</Card>
|
|
<Card title="Collapsible table" data-testid="collapsible-table" collapsible persistCollapse={false}>{grid("collapsible")}</Card>
|
|
<Card title="Loading table" data-testid="loading-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{grid("loading")}</LoadingFrame></Card>
|
|
<Card title="Admin table" data-testid="admin-table"><div className="admin-table-surface">{grid("admin")}</div></Card>
|
|
<Card title="Loading admin table" data-testid="loading-admin-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows"><div className="admin-table-surface">{grid("loading-admin")}</div></LoadingFrame></Card>
|
|
<Card title="Connection table" data-testid="connection-table">{tree()}</Card>
|
|
<Card title="Loading connection table" data-testid="loading-connection-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{tree()}</LoadingFrame></Card>
|
|
<Card title="Explicit table" data-testid="explicit-table" bodyLayout="table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{grid("explicit")}</LoadingFrame></Card>
|
|
<Card title="Table with context" data-testid="table-with-context" bodyLayout="table">
|
|
<ContentSection density="default" spacing="none">Meaningful table context</ContentSection>
|
|
{grid("context")}
|
|
</Card>
|
|
<Card title="Mixed content" data-testid="mixed-content"><p>Ordinary content keeps its inset.</p>{grid("mixed")}</Card>
|
|
<Card title="Loading mixed content" data-testid="loading-mixed-content"><LoadingFrame loading={loading} indicator="none" label="Loading rows"><p>Ordinary content keeps its inset.</p>{grid("loading-mixed")}</LoadingFrame></Card>
|
|
<div data-testid="standalone-table">{grid("standalone")}</div>
|
|
</main>;
|
|
}
|