Data List View

"use client";

import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { renderCellByKind } from "@/components/f-ui/data-list-view/render-cell-by-kind";
import { EmptyCellPlaceholder } from "@/components/f-ui/data-list-view/empty-cell-placeholder";
import { f } from "@/components/f-ui/field-types/catalog";

type Row = {
  orderNumber: string;
  status: "confirmed" | "shipped";
  amount: number;
  notes: string;
};

const schema = defineDataListSchema<Row>({
  orderNumber: f.text({ label: "Order #", copyable: true }),
  status: f.enum({
    render: "status",
    label: "Status",
    variants: {
      confirmed: { label: "Confirmed", tone: "success" },
      shipped: { label: "Shipped", tone: "info" },
    },
  }),
  amount: f.currency({ label: "Amount", currency: "USD" }),
  notes: f.text({ label: "Notes" }),
});

const row: Row = {
  orderNumber: "ORD-1001",
  status: "confirmed",
  amount: 1280,
  notes: "",
};

const CELLS = [
  { key: "orderNumber" as const, label: "Order #" },
  { key: "status" as const, label: "Status" },
  { key: "amount" as const, label: "Amount" },
  { key: "notes" as const, label: "Notes" },
];

/** Shared `renderCellByKind` — same formatters Table, List View, and Descriptions use. */
export function DataListViewDemo() {
  return (
    <dl className="grid max-w-md gap-3">
      {CELLS.map(({ key, label }) => {
        const field = schema.definition[key];
        const value = row[key];
        return (
          <div key={key} className="flex items-baseline justify-between gap-4">
            <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
            <dd className="min-w-0 text-sm">
              {renderCellByKind(value, row, field, { variant: "detail", align: "start" })}
            </dd>
          </div>
        );
      })}
      <div className="flex items-baseline justify-between gap-4">
        <dt className="text-xs font-medium text-muted-foreground">Standalone empty</dt>
        <dd className="text-sm">
          <EmptyCellPlaceholder />
        </dd>
      </div>
    </dl>
  );
}

"use client";

import { PencilIcon, Share2Icon, Trash2Icon } from "lucide-react";

import type { RowAction } from "@/components/f-ui/data-list-internals/row-actions/row-action-types";
import { useDataListViewI18n } from "@/components/f-ui/data-list-view/hooks/use-data-list-view-i18n";
import { DataListRowActionsCell } from "@/components/f-ui/data-list-view/row-actions-cell";
import { List } from "@/components/f-ui/list/list";
import { TooltipProvider } from "@/components/ui/tooltip";

type Member = {
  id: string;
  name: string;
  email: string;
};

const MEMBER: Member = {
  id: "ada",
  name: "Ada Lovelace",
  email: "ada@example.com",
};

const ACTIONS: RowAction<Member>[] = [
  {
    id: "edit",
    label: "Edit",
    icon: <PencilIcon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "share",
    label: "Share",
    icon: <Share2Icon className="size-3.5" />,
    onClick: () => {},
  },
  {
    id: "remove",
    label: "Remove",
    icon: <Trash2Icon className="size-3.5" />,
    variant: "destructive",
    placement: "trailing",
    confirm: false,
    onClick: () => {},
  },
];

/** Compose `DataListRowActionsCell` into presentational List `actions` — same cell Table uses. */
export function DataListViewRowActionsDemo() {
  const { t } = useDataListViewI18n();

  return (
    <TooltipProvider>
      <List>
        <List.Item
          extra="Owner"
          actions={[
            <DataListRowActionsCell
              key="ops"
              row={MEMBER}
              actions={ACTIONS}
              display="inline"
              inlinePresentation="icon"
              maxInline={2}
              t={t}
            />,
          ]}
        >
          <List.Meta title={MEMBER.name} description={MEMBER.email} />
        </List.Item>
      </List>
    </TooltipProvider>
  );
}