@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/master-list/master-list-desk.tsx

@@ -0,0 +1,370 @@
+import { useMemo, useState, type HTMLAttributes, type ReactNode } from "react";
+import {
+  ArrowDownWideNarrow,
+  ChevronDown,
+  Ellipsis,
+  List,
+  Monitor,
+  PauseCircle,
+  Pencil,
+  Plus,
+  RefreshCw,
+  SlidersHorizontal,
+  Trash2,
+  X,
+} from "lucide-react";
+import { Button } from "@devxcrew/react-ui/components/button";
+import { Checkbox } from "@devxcrew/react-ui/components/checkbox";
+import { Input } from "@devxcrew/react-ui/components/input";
+import { DataTableRowActions } from "@devxcrew/react-ui/blocks/table";
+import { TopologyRegion, type InterfaceTopologyController } from "@devxcrew/react-ui/features/interface-topology";
+import { cn } from "@devxcrew/react-ui/lib/utils";
+
+export type MasterListDeskFilter = {
+  id: string;
+  label: string;
+  operator?: boolean;
+};
+
+export type MasterListDeskColumn<TRecord> = {
+  id: string;
+  label: string;
+  render: (record: TRecord) => ReactNode;
+  width?: string;
+};
+
+export type MasterListDeskRecord = {
+  age?: string;
+  commentCount?: number;
+  favorite?: boolean;
+  id: string;
+};
+
+export type MasterListDeskProps<TRecord extends MasterListDeskRecord> = {
+  columns: readonly MasterListDeskColumn<TRecord>[];
+  filters: readonly MasterListDeskFilter[];
+  records: readonly TRecord[];
+  title: string;
+  primaryActionLabel: string;
+  getFilterValue: (record: TRecord, filterId: string) => string;
+  filterPlacement?: "top" | "columns";
+  onPrimaryAction?: () => void;
+  onEdit?: (record: TRecord) => void;
+  onDelete?: (record: TRecord) => void;
+  onSuspend?: (record: TRecord) => void;
+  onRefresh?: () => void;
+  sortLabel?: string;
+  totalLabel?: string;
+  topology?: InterfaceTopologyController;
+  topologyIds?: {
+    content?: string;
+    deskFilters?: string;
+    filterActions?: string;
+    filterRow?: string;
+    header?: string;
+    loadMore?: string;
+    newButton?: string;
+    pagination?: string;
+    rowHeader?: string;
+    rows?: string;
+    title?: string;
+  };
+};
+
+function DeskRegion({
+  as = "div",
+  children,
+  className,
+  id,
+  topology,
+  ...props
+}: {
+  as?: "div" | "header" | "footer" | "h2";
+  children: ReactNode;
+  className?: string;
+  id?: string;
+  topology?: InterfaceTopologyController;
+} & Omit<HTMLAttributes<HTMLElement>, "id">) {
+  if (topology && id) {
+    return (
+      <TopologyRegion as={as} className={className} id={id} topology={topology} {...props}>
+        {children}
+      </TopologyRegion>
+    );
+  }
+  const Component = as;
+  return (
+    <Component className={className} {...props}>
+      {children}
+    </Component>
+  );
+}
+
+export function MasterListDesk<TRecord extends MasterListDeskRecord>({
+  columns,
+  filters,
+  records,
+  title,
+  primaryActionLabel,
+  getFilterValue,
+  filterPlacement = "top",
+  onPrimaryAction,
+  onEdit,
+  onDelete,
+  onSuspend,
+  onRefresh,
+  sortLabel = "Last Updated",
+  totalLabel,
+  topology,
+  topologyIds,
+}: MasterListDeskProps<TRecord>) {
+  const [filterValues, setFilterValues] = useState<Record<string, string>>({});
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+  const [pageSize, setPageSize] = useState(20);
+  const visibleRecords = useMemo(
+    () =>
+      records.filter((record) =>
+        filters.every((filter) => {
+          const query = filterValues[filter.id]?.trim().toLowerCase();
+          return !query || getFilterValue(record, filter.id).toLowerCase().includes(query);
+        }),
+      ),
+    [filterValues, filters, getFilterValue, records],
+  );
+  const gridTemplateColumns = `32px ${columns.map((column) => column.width ?? "minmax(140px, 1fr)").join(" ")} 52px`;
+  const allSelected = visibleRecords.length > 0 && visibleRecords.every(({ id }) => selectedIds.has(id));
+  const activeFilterCount = Object.values(filterValues).filter((value) => value.trim()).length;
+
+  function toggleAll(checked: boolean) {
+    setSelectedIds(checked ? new Set(visibleRecords.map(({ id }) => id)) : new Set());
+  }
+
+  function toggleRecord(recordId: string, checked: boolean) {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      if (checked) next.add(recordId);
+      else next.delete(recordId);
+      return next;
+    });
+  }
+
+  return (
+    <section className="w-full bg-background text-sm">
+      <DeskRegion
+        as="header"
+        className="flex min-h-12 flex-wrap items-center justify-between gap-3 border-b px-3 py-2"
+        id={topologyIds?.header}
+        topology={topology}
+      >
+        <DeskRegion
+          as="h2"
+          className="flex items-center gap-2 font-semibold"
+          id={topologyIds?.title}
+          topology={topology}
+        >
+          <Monitor className="size-4 text-muted-foreground" />
+          <span aria-hidden="true">/</span>
+          {title}
+        </DeskRegion>
+        <DeskRegion className="flex flex-wrap items-center gap-2" id={topologyIds?.newButton} topology={topology}>
+          <Button size="sm" variant="secondary">
+            <List />
+            List View
+            <ChevronDown />
+          </Button>
+          <Button size="sm" variant="secondary">
+            Saved Filters
+            <ChevronDown />
+          </Button>
+          <Button aria-label="Refresh list" onClick={onRefresh} size="icon-sm" variant="secondary">
+            <RefreshCw />
+          </Button>
+          <Button aria-label="More list actions" size="icon-sm" variant="secondary">
+            <Ellipsis />
+          </Button>
+          <Button onClick={onPrimaryAction} size="sm">
+            <Plus />
+            {primaryActionLabel}
+          </Button>
+        </DeskRegion>
+      </DeskRegion>
+
+      <div className="flex flex-col gap-3 p-3">
+        {filterPlacement === "top" ? (
+          <DeskRegion
+            className="flex flex-wrap items-start justify-between gap-3"
+            id={topologyIds?.deskFilters}
+            topology={topology}
+          >
+            <div className="grid min-w-0 flex-1 grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-6">
+              {filters.map((filter) => (
+                <div className="relative" key={filter.id}>
+                  <Input
+                    aria-label={filter.label}
+                    className="h-8 rounded-sm border-transparent bg-muted pr-8 shadow-none focus-visible:bg-background"
+                    onChange={(event) =>
+                      setFilterValues((current) => ({ ...current, [filter.id]: event.target.value }))
+                    }
+                    value={filterValues[filter.id] ?? ""}
+                  />
+                  {filter.operator ? (
+                    <SlidersHorizontal className="pointer-events-none absolute right-2 top-2 size-4 text-muted-foreground" />
+                  ) : null}
+                </div>
+              ))}
+            </div>
+            <DeskRegion className="flex shrink-0 gap-2" id={topologyIds?.filterActions} topology={topology}>
+              <Button size="sm" variant="secondary">
+                <SlidersHorizontal />
+                Filter{activeFilterCount ? ` ${activeFilterCount}` : ""}
+              </Button>
+              {activeFilterCount ? (
+                <Button
+                  aria-label="Clear all filters"
+                  onClick={() => setFilterValues({})}
+                  size="icon-sm"
+                  variant="secondary"
+                >
+                  <X />
+                </Button>
+              ) : null}
+              <Button size="sm" variant="secondary">
+                <ArrowDownWideNarrow />
+                {sortLabel}
+                <ChevronDown />
+              </Button>
+            </DeskRegion>
+          </DeskRegion>
+        ) : null}
+
+        <DeskRegion className="overflow-x-auto border-y border-border/70" id={topologyIds?.content} topology={topology}>
+          <div className="min-w-[1180px]">
+            <DeskRegion
+              className="grid min-h-8 items-center border-b border-border bg-muted px-2 text-sm text-muted-foreground"
+              aria-label="Table header"
+              id={topologyIds?.rowHeader}
+              topology={topology}
+              role="row"
+              style={{ gridTemplateColumns }}
+            >
+              <Checkbox aria-label="Select all" checked={allSelected} onCheckedChange={toggleAll} />
+              {columns.map((column) => (
+                <span className="truncate px-2" key={column.id}>
+                  {column.label}
+                </span>
+              ))}
+              <span aria-label={`${visibleRecords.length} of ${totalLabel ?? records.length}`} />
+            </DeskRegion>
+            {filterPlacement === "columns" ? (
+              <DeskRegion
+                aria-label="Column filters"
+                className="grid min-h-10 items-center border-t border-border/60 bg-background px-2"
+                data-row="filters"
+                id={topologyIds?.filterRow}
+                topology={topology}
+                role="row"
+                style={{ gridTemplateColumns }}
+              >
+                <span aria-hidden="true" />
+                {columns.map((column) => {
+                  const filter = filters.find((candidate) => candidate.id === column.id);
+                  return (
+                    <div className="min-w-0 px-2" key={column.id}>
+                      {filter ? (
+                        <Input
+                          aria-label={filter.label}
+                          className="h-7 rounded-sm border-transparent bg-muted px-2 text-xs shadow-none focus-visible:bg-background"
+                          onChange={(event) =>
+                            setFilterValues((current) => ({ ...current, [filter.id]: event.target.value }))
+                          }
+                          value={filterValues[filter.id] ?? ""}
+                        />
+                      ) : null}
+                    </div>
+                  );
+                })}
+                <span aria-hidden="true" />
+              </DeskRegion>
+            ) : null}
+            <DeskRegion id={topologyIds?.rows} topology={topology}>
+              {visibleRecords.map((record) => (
+                <div
+                  className="grid min-h-10 items-center border-t border-border/60 px-2 hover:bg-muted/70"
+                  key={record.id}
+                  role="row"
+                  style={{ gridTemplateColumns }}
+                >
+                  <Checkbox
+                    aria-label={`Select ${record.id}`}
+                    checked={selectedIds.has(record.id)}
+                    onCheckedChange={(checked) => toggleRecord(record.id, checked)}
+                  />
+                  {columns.map((column, index) => (
+                    <div
+                      className={cn(
+                        "truncate px-2 text-muted-foreground",
+                        index === 0 && "font-medium text-foreground",
+                      )}
+                      key={column.id}
+                    >
+                      {column.render(record)}
+                    </div>
+                  ))}
+                  <DataTableRowActions
+                    actions={[
+                      { id: "edit", label: "Edit", icon: <Pencil />, onSelect: () => onEdit?.(record) },
+                      {
+                        id: "suspend",
+                        label: "Suspend",
+                        icon: <PauseCircle />,
+                        onSelect: () => onSuspend?.(record),
+                      },
+                      {
+                        id: "delete",
+                        label: "Delete",
+                        icon: <Trash2 />,
+                        onSelect: () => onDelete?.(record),
+                        separatorBefore: true,
+                        tone: "destructive",
+                      },
+                    ]}
+                    label={`Actions for ${record.id}`}
+                  />
+                </div>
+              ))}
+            </DeskRegion>
+            {!visibleRecords.length ? (
+              <p className="p-8 text-center text-muted-foreground">No records match these filters.</p>
+            ) : null}
+          </div>
+        </DeskRegion>
+
+        <DeskRegion
+          as="footer"
+          className="flex items-center justify-between gap-3"
+          id={topologyIds?.pagination}
+          topology={topology}
+        >
+          <div className="flex items-center gap-1" aria-label="Rows per page">
+            {[20, 100, 500, 2500].map((size) => (
+              <Button
+                aria-pressed={pageSize === size}
+                key={size}
+                onClick={() => setPageSize(size)}
+                size="xs"
+                variant={pageSize === size ? "secondary" : "ghost"}
+              >
+                {size}
+              </Button>
+            ))}
+          </div>
+          <DeskRegion id={topologyIds?.loadMore} topology={topology}>
+            <Button size="sm" variant="secondary">
+              Load More
+            </Button>
+          </DeskRegion>
+        </DeskRegion>
+      </div>
+    </section>
+  );
+}

package/src/blocks/master-list/master-list.tsx

@@ -0,0 +1,189 @@
+import { useMemo, useState } from "react";
+import { MoreHorizontal, Plus } from "lucide-react";
+import { Button } from "@devxcrew/react-ui/components/button";
+import { Input } from "@devxcrew/react-ui/components/input";
+import {
+  createDataTableColumnHelper,
+  DataTableBlock,
+  DataTableRowActions,
+  type DataTableColumn,
+} from "@devxcrew/react-ui/blocks/table";
+import type { InterfaceTopologyController } from "@devxcrew/react-ui/features/interface-topology";
+import type { MasterField, MasterRecord, MasterValue } from "./types";
+
+export type MasterListProps = {
+  fields: readonly MasterField[];
+  records: readonly MasterRecord[];
+  title: string;
+  description?: string;
+  emptyMessage?: string;
+  createLabel?: string;
+  variant?: "table" | "cards";
+  showHeader?: boolean;
+  showHeaderDivider?: boolean;
+  searchTopSpacing?: boolean;
+  topology?: InterfaceTopologyController;
+  topologyIds?: {
+    header: string;
+    search: string;
+    content: string;
+    pagination: string;
+    searchBar?: string;
+    columnFilter?: string;
+    rowHeader?: string;
+    rows?: string;
+    pageSize?: string;
+    pageNavigation?: string;
+  };
+  onCreate?: () => void;
+  onView?: (record: MasterRecord) => void;
+  onEdit?: (record: MasterRecord) => void;
+  onDelete?: (record: MasterRecord) => void;
+  onSuspend?: (record: MasterRecord) => void;
+};
+
+const columnHelper = createDataTableColumnHelper<MasterRecord>();
+
+function displayValue(field: MasterField, record: MasterRecord) {
+  const value: MasterValue = record[field.id];
+  if (field.format) return field.format(value, record);
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return value ?? "—";
+}
+
+function recordActions(record: MasterRecord, props: MasterListProps) {
+  return [
+    ...(props.onView ? [{ id: "view", label: "View", onSelect: () => props.onView?.(record) }] : []),
+    ...(props.onEdit ? [{ id: "edit", label: "Edit", onSelect: () => props.onEdit?.(record) }] : []),
+    ...(props.onSuspend ? [{ id: "suspend", label: "Suspend", onSelect: () => props.onSuspend?.(record) }] : []),
+    ...(props.onDelete
+      ? [
+          {
+            id: "delete",
+            label: "Delete",
+            tone: "destructive" as const,
+            separatorBefore: true,
+            onSelect: () => props.onDelete?.(record),
+          },
+        ]
+      : []),
+  ];
+}
+
+function MasterCards(props: MasterListProps & { visibleFields: readonly MasterField[] }) {
+  const [search, setSearch] = useState("");
+  const headingField = props.visibleFields.find((field) => field.id === "name") ?? props.visibleFields[0];
+  const filtered = props.records.filter((record) =>
+    props.visibleFields.some((field) =>
+      String(record[field.id] ?? "")
+        .toLowerCase()
+        .includes(search.trim().toLowerCase()),
+    ),
+  );
+  return (
+    <section className="w-full space-y-4">
+      {props.showHeader !== false ? (
+        <header className="flex flex-wrap items-start justify-between gap-4 border-b pb-4">
+          <div>
+            <h2 className="text-2xl font-semibold tracking-tight">{props.title}</h2>
+            {props.description ? <p className="mt-1 text-sm text-muted-foreground">{props.description}</p> : null}
+          </div>
+          {props.onCreate ? (
+            <Button onClick={props.onCreate}>
+              <Plus />
+              {props.createLabel ?? "Add record"}
+            </Button>
+          ) : null}
+        </header>
+      ) : null}
+      <Input
+        aria-label={`Search ${props.title}`}
+        className="max-w-sm"
+        onChange={(event) => setSearch(event.target.value)}
+        placeholder="Search records"
+        value={search}
+      />
+      {filtered.length ? (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {filtered.map((record) => (
+            <article className="min-w-0 rounded-lg border bg-card p-4 shadow-sm" key={record.id}>
+              <div className="flex items-start justify-between gap-2">
+                <h3 className="truncate font-semibold">{String(record[headingField?.id] ?? record.id)}</h3>
+                <DataTableRowActions actions={recordActions(record, props)} label={`Actions for ${record.id}`} />
+              </div>
+              <dl className="mt-4 grid gap-3 text-sm">
+                {props.visibleFields
+                  .filter((field) => field.id !== headingField?.id)
+                  .map((field) => (
+                    <div className="flex justify-between gap-3" key={field.id}>
+                      <dt className="text-muted-foreground">{field.label}</dt>
+                      <dd className="min-w-0 truncate text-right">{displayValue(field, record)}</dd>
+                    </div>
+                  ))}
+              </dl>
+            </article>
+          ))}
+        </div>
+      ) : (
+        <p className="rounded-lg border p-8 text-center text-sm text-muted-foreground">
+          {props.emptyMessage ?? "No records found."}
+        </p>
+      )}
+    </section>
+  );
+}
+
+export function MasterList(props: MasterListProps) {
+  const visibleFields = useMemo(() => props.fields.filter((field) => field.showInList !== false), [props.fields]);
+  const statusField = visibleFields.find((field) => field.id === "status");
+  const columns = useMemo(() => {
+    const result: DataTableColumn<MasterRecord>[] = visibleFields.map((field) =>
+      columnHelper.display({ id: field.id, header: field.label, cell: ({ row }) => displayValue(field, row.original) }),
+    );
+    if (props.onView || props.onEdit || props.onSuspend || props.onDelete) {
+      result.push(
+        columnHelper.display({
+          id: "actions",
+          header: () => <MoreHorizontal aria-label="Actions" size={16} />,
+          enableHiding: false,
+          cell: ({ row }) => (
+            <DataTableRowActions
+              actions={recordActions(row.original, props)}
+              label={`Actions for ${row.original.id}`}
+            />
+          ),
+        }),
+      );
+    }
+    return result;
+  }, [visibleFields, props.onView, props.onEdit, props.onSuspend, props.onDelete]);
+
+  if (props.variant === "cards") return <MasterCards {...props} visibleFields={visibleFields} />;
+  return (
+    <DataTableBlock
+      columns={columns}
+      data={[...props.records]}
+      description={props.showHeader === false ? undefined : props.description}
+      emptyMessage={props.emptyMessage ?? "No records found."}
+      getRowId={(row) => row.id}
+      getSearchText={(row) => visibleFields.map((field) => String(row[field.id] ?? "")).join(" ")}
+      filterOptions={statusField?.options}
+      getFilterValue={(row) => String(row.status ?? "")}
+      itemLabel="records"
+      pageWidth="full"
+      showHeaderDivider={props.showHeaderDivider}
+      searchTopSpacing={props.searchTopSpacing}
+      primaryAction={
+        props.showHeader === false ? undefined : props.onCreate ? (
+          <Button onClick={props.onCreate}>
+            <Plus />
+            {props.createLabel ?? "Add record"}
+          </Button>
+        ) : undefined
+      }
+      title={props.showHeader === false ? undefined : props.title}
+      topology={props.topology}
+      topologyIds={props.topologyIds}
+    />
+  );
+}

package/src/blocks/master-list/types.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export type MasterValue = string | number | boolean | null | undefined;
+
+export type MasterRecord = { id: string } & Record<string, MasterValue>;
+
+export type MasterField = {
+  id: string;
+  label: string;
+  type?: 'text' | 'email' | 'number' | 'textarea' | 'select';
+  options?: readonly { label: string; value: string }[];
+  placeholder?: string;
+  required?: boolean;
+  showInList?: boolean;
+  format?: (value: MasterValue, record: MasterRecord) => ReactNode;
+};
+
+export type MasterFormValues = Record<string, string>;

package/src/blocks/mermaid-preview/index.ts

@@ -0,0 +1 @@
+export { MermaidPreview } from './mermaid-preview'