Data List Chrome

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";

import { DataListActiveFilters } from "@/components/f-ui/data-list-chrome/data-list-active-filters";
import { DataListPagination } from "@/components/f-ui/data-list-chrome/data-list-pagination";
import { DataListSearchInput } from "@/components/f-ui/data-list-chrome/data-list-search-input";
import { DataListRefresh } from "@/components/f-ui/data-list-chrome/data-list-refresh";
import { DataListSelectionBar } from "@/components/f-ui/data-list-chrome/data-list-selection-bar";
import { DataListToolbar } from "@/components/f-ui/data-list-chrome/data-list-toolbar";
import { DataListToolbarTabs } from "@/components/f-ui/data-list-chrome/data-list-toolbar-tabs";
import { DataListProvider } from "@/components/f-ui/data-list-chrome/layout/data-list-provider";
import { DataListShell } from "@/components/f-ui/data-list-chrome/layout/data-list-shell";
import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { f } from "@/components/f-ui/field-types/catalog";
import { Table } from "@/components/f-ui/table/table";

type Order = {
  id: string;
  orderNumber: string;
  customer: string;
  status: "open" | "shipped";
  amount: number;
};

const ORDERS: Order[] = [
  { id: "1", orderNumber: "ORD-1001", customer: "Acme Corp", status: "open", amount: 2499 },
  { id: "2", orderNumber: "ORD-1002", customer: "Globex Inc", status: "shipped", amount: 849.5 },
  { id: "3", orderNumber: "ORD-1003", customer: "Initech", status: "open", amount: 120 },
  { id: "4", orderNumber: "ORD-1004", customer: "Umbrella", status: "shipped", amount: 640 },
];

const schema = defineDataListSchema<Order>({
  orderNumber: f.text({ label: "Order #", sortable: true }),
  customer: f.text({ label: "Customer" }),
  status: f.enum({
    render: "status",
    label: "Status",
    variants: {
      open: { label: "Open", tone: "warning" },
      shipped: { label: "Shipped", tone: "info" },
    },
  }),
  amount: f.currency({ label: "Amount", currency: "USD", sortable: true }),
});

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

const TABS = [
  { id: "all", label: "All" },
  { id: "open", label: "Open" },
  { id: "shipped", label: "Shipped" },
];

function DataListChromeDemoInner() {
  const [tab, setTab] = useState("all");
  const handle = useDataList({
    schema,
    listCode: "demo-data-list-chrome",
    data: tab === "all" ? ORDERS : ORDERS.filter((row) => row.status === tab),
    getRowId: (row) => row.id,
    defaultPageSize: 3,
    features: { filters: true, selection: true, pagination: { mode: "offset" } },
  });

  return (
    <DataListProvider dataList={handle}>
      <DataListShell
        className="h-[min(480px,70vh)] min-h-80 gap-0 overflow-hidden rounded-xl border bg-card p-4"
        toolbar={
          <DataListToolbar
            title="Orders"
            tabs={<DataListToolbarTabs tabs={TABS} value={tab} onChange={setTab} />}
            toolsStart={<DataListSearchInput className="sm:w-56" />}
            refresh={<DataListRefresh />}
          />
        }
        footer={<DataListPagination className="border-border border-t pt-2" />}
      >
        <DataListActiveFilters className="mb-2 shrink-0" />
        <DataListSelectionBar variant="embedded" className="mb-2 rounded-none border-0" />
        <Table dataList={handle} fillHeight columns={{ amount: { align: "end" } }} />
      </DataListShell>
    </DataListProvider>
  );
}

/** Host-composed list shell: toolbar, search, selection, pagination around Table. */
export function DataListChromeDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <DataListChromeDemoInner />
    </QueryClientProvider>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { DataListEmpty } from "@/components/f-ui/data-list-chrome/data-list-empty";
import { DataListErrorState } from "@/components/f-ui/data-list-chrome/data-list-error-state";
import { DataListToolbar } from "@/components/f-ui/data-list-chrome/data-list-toolbar";
import { DataListProvider } from "@/components/f-ui/data-list-chrome/layout/data-list-provider";
import { DataListShell } from "@/components/f-ui/data-list-chrome/layout/data-list-shell";
import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { f } from "@/components/f-ui/field-types/catalog";

type Order = {
  id: string;
  orderNumber: string;
};

const schema = defineDataListSchema<Order>({
  orderNumber: f.text({ label: "Order #" }),
});

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false } },
});

function EmptyShell() {
  const handle = useDataList({
    schema,
    listCode: "demo-data-list-chrome-empty",
    data: [] as Order[],
    getRowId: (row) => row.id,
    features: { filters: true },
  });

  return (
    <DataListProvider dataList={handle}>
      <DataListShell
        className="min-h-56 overflow-hidden rounded-xl border bg-card p-4"
        toolbar={<DataListToolbar title="Orders" />}
      >
        <DataListEmpty />
      </DataListShell>
    </DataListProvider>
  );
}

/** Empty vs fetch-error chrome. Empty is a successful empty set; Error needs Retry. */
export function DataListChromeStatesDemo() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="grid gap-4 md:grid-cols-2">
        <EmptyShell />
        <DataListShell className="min-h-56 overflow-hidden rounded-xl border bg-card p-4">
          <DataListErrorState
            error={new Error("Could not load orders.")}
            onRetry={() => {}}
          />
        </DataListShell>
      </div>
    </QueryClientProvider>
  );
}