@useatlas/create 0.0.6 → 0.0.7

package/templates/nextjs-standalone/src/components/data-table/data-table-sort-list.tsx

@@ -0,0 +1,407 @@
+"use client";
+
+import type { ColumnSort, SortDirection, Table } from "@tanstack/react-table";
+import {
+  ArrowDownUp,
+  ChevronsUpDown,
+  GripVertical,
+  Trash2,
+} from "lucide-react";
+import * as React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sortable,
+  SortableContent,
+  SortableItem,
+  SortableItemHandle,
+  SortableOverlay,
+} from "@/components/ui/sortable";
+import { dataTableConfig } from "@/config/data-table";
+import { cn } from "@/lib/utils";
+
+const SORT_SHORTCUT_KEY = "s";
+const REMOVE_SORT_SHORTCUTS = ["backspace", "delete"];
+
+interface DataTableSortListProps<TData>
+  extends React.ComponentProps<typeof PopoverContent> {
+  table: Table<TData>;
+  disabled?: boolean;
+}
+
+export function DataTableSortList<TData>({
+  table,
+  disabled,
+  ...props
+}: DataTableSortListProps<TData>) {
+  const id = React.useId();
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const [open, setOpen] = React.useState(false);
+  const addButtonRef = React.useRef<HTMLButtonElement>(null);
+
+  const sorting = table.getState().sorting;
+  const onSortingChange = table.setSorting;
+
+  const { columnLabels, columns } = React.useMemo(() => {
+    const labels = new Map<string, string>();
+    const sortingIds = new Set(sorting.map((s) => s.id));
+    const availableColumns: { id: string; label: string }[] = [];
+
+    for (const column of table.getAllColumns()) {
+      if (!column.getCanSort()) continue;
+
+      const label = column.columnDef.meta?.label ?? column.id;
+      labels.set(column.id, label);
+
+      if (!sortingIds.has(column.id)) {
+        availableColumns.push({ id: column.id, label });
+      }
+    }
+
+    return {
+      columnLabels: labels,
+      columns: availableColumns,
+    };
+  }, [sorting, table]);
+
+  const onSortAdd = React.useCallback(() => {
+    const firstColumn = columns[0];
+    if (!firstColumn) return;
+
+    onSortingChange((prevSorting) => [
+      ...prevSorting,
+      { id: firstColumn.id, desc: false },
+    ]);
+  }, [columns, onSortingChange]);
+
+  const onSortUpdate = React.useCallback(
+    (sortId: string, updates: Partial<ColumnSort>) => {
+      onSortingChange((prevSorting) => {
+        if (!prevSorting) return prevSorting;
+        return prevSorting.map((sort) =>
+          sort.id === sortId ? { ...sort, ...updates } : sort,
+        );
+      });
+    },
+    [onSortingChange],
+  );
+
+  const onSortRemove = React.useCallback(
+    (sortId: string) => {
+      onSortingChange((prevSorting) =>
+        prevSorting.filter((item) => item.id !== sortId),
+      );
+    },
+    [onSortingChange],
+  );
+
+  const onSortingReset = React.useCallback(
+    () => onSortingChange(table.initialState.sorting),
+    [onSortingChange, table.initialState.sorting],
+  );
+
+  React.useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (
+        event.target instanceof HTMLInputElement ||
+        event.target instanceof HTMLTextAreaElement ||
+        (event.target instanceof HTMLElement &&
+          event.target.contentEditable === "true")
+      ) {
+        return;
+      }
+
+      if (
+        event.key.toLowerCase() === SORT_SHORTCUT_KEY &&
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey
+      ) {
+        event.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const onTriggerKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (
+        REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase()) &&
+        sorting.length > 0
+      ) {
+        event.preventDefault();
+        onSortingReset();
+      }
+    },
+    [sorting.length, onSortingReset],
+  );
+
+  return (
+    <Sortable
+      value={sorting}
+      onValueChange={onSortingChange}
+      getItemValue={(item) => item.id}
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="font-normal"
+            onKeyDown={onTriggerKeyDown}
+            disabled={disabled}
+          >
+            <ArrowDownUp className="text-muted-foreground" />
+            Sort
+            {sorting.length > 0 && (
+              <Badge
+                variant="secondary"
+                className="h-[18.24px] rounded-[3.2px] px-[5.12px] font-mono font-normal text-[10.4px]"
+              >
+                {sorting.length}
+              </Badge>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          aria-labelledby={labelId}
+          aria-describedby={descriptionId}
+          className="flex w-full max-w-(--radix-popover-content-available-width) flex-col gap-3.5 p-4 sm:min-w-[380px]"
+          {...props}
+        >
+          <div className="flex flex-col gap-1">
+            <h4 id={labelId} className="font-medium leading-none">
+              {sorting.length > 0 ? "Sort by" : "No sorting applied"}
+            </h4>
+            <p
+              id={descriptionId}
+              className={cn(
+                "text-muted-foreground text-sm",
+                sorting.length > 0 && "sr-only",
+              )}
+            >
+              {sorting.length > 0
+                ? "Modify sorting to organize your rows."
+                : "Add sorting to organize your rows."}
+            </p>
+          </div>
+          {sorting.length > 0 && (
+            <SortableContent asChild>
+              <div
+                role="list"
+                className="flex max-h-[300px] flex-col gap-2 overflow-y-auto p-1"
+              >
+                {sorting.map((sort) => (
+                  <DataTableSortItem
+                    key={sort.id}
+                    sort={sort}
+                    sortItemId={`${id}-sort-${sort.id}`}
+                    columns={columns}
+                    columnLabels={columnLabels}
+                    onSortUpdate={onSortUpdate}
+                    onSortRemove={onSortRemove}
+                  />
+                ))}
+              </div>
+            </SortableContent>
+          )}
+          <div className="flex w-full items-center gap-2">
+            <Button
+              size="sm"
+              className="rounded"
+              ref={addButtonRef}
+              onClick={onSortAdd}
+              disabled={columns.length === 0}
+            >
+              Add sort
+            </Button>
+            {sorting.length > 0 && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="rounded"
+                onClick={onSortingReset}
+              >
+                Reset sorting
+              </Button>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+      <SortableOverlay>
+        <div className="flex items-center gap-2">
+          <div className="h-8 w-[180px] rounded-sm bg-primary/10" />
+          <div className="h-8 w-24 rounded-sm bg-primary/10" />
+          <div className="size-8 shrink-0 rounded-sm bg-primary/10" />
+          <div className="size-8 shrink-0 rounded-sm bg-primary/10" />
+        </div>
+      </SortableOverlay>
+    </Sortable>
+  );
+}
+
+interface DataTableSortItemProps {
+  sort: ColumnSort;
+  sortItemId: string;
+  columns: { id: string; label: string }[];
+  columnLabels: Map<string, string>;
+  onSortUpdate: (sortId: string, updates: Partial<ColumnSort>) => void;
+  onSortRemove: (sortId: string) => void;
+}
+
+function DataTableSortItem({
+  sort,
+  sortItemId,
+  columns,
+  columnLabels,
+  onSortUpdate,
+  onSortRemove,
+}: DataTableSortItemProps) {
+  const fieldListboxId = `${sortItemId}-field-listbox`;
+  const fieldTriggerId = `${sortItemId}-field-trigger`;
+  const directionListboxId = `${sortItemId}-direction-listbox`;
+
+  const [showFieldSelector, setShowFieldSelector] = React.useState(false);
+  const [showDirectionSelector, setShowDirectionSelector] =
+    React.useState(false);
+
+  const onItemKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (
+        event.target instanceof HTMLInputElement ||
+        event.target instanceof HTMLTextAreaElement
+      ) {
+        return;
+      }
+
+      if (showFieldSelector || showDirectionSelector) {
+        return;
+      }
+
+      if (REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase())) {
+        event.preventDefault();
+        onSortRemove(sort.id);
+      }
+    },
+    [sort.id, showFieldSelector, showDirectionSelector, onSortRemove],
+  );
+
+  return (
+    <SortableItem value={sort.id} asChild>
+      <div
+        role="listitem"
+        id={sortItemId}
+        tabIndex={-1}
+        className="flex items-center gap-2"
+        onKeyDown={onItemKeyDown}
+      >
+        <Popover open={showFieldSelector} onOpenChange={setShowFieldSelector}>
+          <PopoverTrigger asChild>
+            <Button
+              id={fieldTriggerId}
+              aria-controls={fieldListboxId}
+              variant="outline"
+              size="sm"
+              className="w-44 justify-between rounded font-normal"
+            >
+              <span className="truncate">{columnLabels.get(sort.id)}</span>
+              <ChevronsUpDown className="opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            id={fieldListboxId}
+            className="w-(--radix-popover-trigger-width) p-0"
+          >
+            <Command>
+              <CommandInput placeholder="Search fields..." />
+              <CommandList>
+                <CommandEmpty>No fields found.</CommandEmpty>
+                <CommandGroup>
+                  {columns.map((column) => (
+                    <CommandItem
+                      key={column.id}
+                      value={column.id}
+                      onSelect={(value) => onSortUpdate(sort.id, { id: value })}
+                    >
+                      <span className="truncate">{column.label}</span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        <Select
+          open={showDirectionSelector}
+          onOpenChange={setShowDirectionSelector}
+          value={sort.desc ? "desc" : "asc"}
+          onValueChange={(value: SortDirection) =>
+            onSortUpdate(sort.id, { desc: value === "desc" })
+          }
+        >
+          <SelectTrigger
+            aria-controls={directionListboxId}
+            size="sm"
+            className="w-24 rounded"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent
+            id={directionListboxId}
+            className="min-w-(--radix-select-trigger-width)"
+          >
+            {dataTableConfig.sortOrders.map((order) => (
+              <SelectItem key={order.value} value={order.value}>
+                {order.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          aria-controls={sortItemId}
+          aria-label={`Remove ${columnLabels.get(sort.id) ?? sort.id} sort`}
+          variant="outline"
+          size="icon"
+          className="size-8 shrink-0 rounded"
+          onClick={() => onSortRemove(sort.id)}
+        >
+          <Trash2 />
+        </Button>
+        <SortableItemHandle asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-8 shrink-0 rounded"
+            aria-label="Reorder sort"
+          >
+            <GripVertical />
+          </Button>
+        </SortableItemHandle>
+      </div>
+    </SortableItem>
+  );
+}

package/templates/nextjs-standalone/src/components/data-table/data-table-toolbar.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import type { Column, Table } from "@tanstack/react-table";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { DataTableDateFilter } from "@/components/data-table/data-table-date-filter";
+import { DataTableFacetedFilter } from "@/components/data-table/data-table-faceted-filter";
+import { DataTableSliderFilter } from "@/components/data-table/data-table-slider-filter";
+import { DataTableViewOptions } from "@/components/data-table/data-table-view-options";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+interface DataTableToolbarProps<TData> extends React.ComponentProps<"div"> {
+  table: Table<TData>;
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  children,
+  className,
+  ...props
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+
+  const columns = React.useMemo(
+    () => table.getAllColumns().filter((column) => column.getCanFilter()),
+    [table],
+  );
+
+  const onReset = React.useCallback(() => {
+    table.resetColumnFilters();
+  }, [table]);
+
+  return (
+    <div
+      role="toolbar"
+      aria-orientation="horizontal"
+      className={cn(
+        "flex w-full items-start justify-between gap-2 p-1",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-1 flex-wrap items-center gap-2">
+        {columns.map((column) => (
+          <DataTableToolbarFilter key={column.id} column={column} />
+        ))}
+        {isFiltered && (
+          <Button
+            aria-label="Reset filters"
+            variant="outline"
+            size="sm"
+            className="border-dashed"
+            onClick={onReset}
+          >
+            <X />
+            Reset
+          </Button>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        {children}
+        <DataTableViewOptions table={table} align="end" />
+      </div>
+    </div>
+  );
+}
+interface DataTableToolbarFilterProps<TData> {
+  column: Column<TData>;
+}
+
+function DataTableToolbarFilter<TData>({
+  column,
+}: DataTableToolbarFilterProps<TData>) {
+  {
+    const columnMeta = column.columnDef.meta;
+
+    const onFilterRender = React.useCallback(() => {
+      if (!columnMeta?.variant) return null;
+
+      switch (columnMeta.variant) {
+        case "text":
+          return (
+            <Input
+              placeholder={columnMeta.placeholder ?? columnMeta.label}
+              value={(column.getFilterValue() as string) ?? ""}
+              onChange={(event) => column.setFilterValue(event.target.value)}
+              className="h-8 w-40 lg:w-56"
+            />
+          );
+
+        case "number":
+          return (
+            <div className="relative">
+              <Input
+                type="number"
+                inputMode="numeric"
+                placeholder={columnMeta.placeholder ?? columnMeta.label}
+                value={(column.getFilterValue() as string) ?? ""}
+                onChange={(event) => column.setFilterValue(event.target.value)}
+                className={cn("h-8 w-[120px]", columnMeta.unit && "pr-8")}
+              />
+              {columnMeta.unit && (
+                <span className="absolute top-0 right-0 bottom-0 flex items-center rounded-r-md bg-accent px-2 text-muted-foreground text-sm">
+                  {columnMeta.unit}
+                </span>
+              )}
+            </div>
+          );
+
+        case "range":
+          return (
+            <DataTableSliderFilter
+              column={column}
+              title={columnMeta.label ?? column.id}
+            />
+          );
+
+        case "date":
+        case "dateRange":
+          return (
+            <DataTableDateFilter
+              column={column}
+              title={columnMeta.label ?? column.id}
+              multiple={columnMeta.variant === "dateRange"}
+            />
+          );
+
+        case "select":
+        case "multiSelect":
+          return (
+            <DataTableFacetedFilter
+              column={column}
+              title={columnMeta.label ?? column.id}
+              options={columnMeta.options ?? []}
+              multiple={columnMeta.variant === "multiSelect"}
+            />
+          );
+
+        default:
+          return null;
+      }
+    }, [column, columnMeta]);
+
+    return onFilterRender();
+  }
+}

package/templates/nextjs-standalone/src/components/data-table/data-table-view-options.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+import { Check, Settings2 } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface DataTableViewOptionsProps<TData>
+  extends React.ComponentProps<typeof PopoverContent> {
+  table: Table<TData>;
+  disabled?: boolean;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+  disabled,
+  ...props
+}: DataTableViewOptionsProps<TData>) {
+  const columns = React.useMemo(
+    () =>
+      table
+        .getAllColumns()
+        .filter(
+          (column) =>
+            typeof column.accessorFn !== "undefined" && column.getCanHide(),
+        ),
+    [table],
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          aria-label="Toggle columns"
+          role="combobox"
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 font-normal lg:flex"
+          disabled={disabled}
+        >
+          <Settings2 className="text-muted-foreground" />
+          View
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-44 p-0" {...props}>
+        <Command>
+          <CommandInput placeholder="Search columns..." />
+          <CommandList>
+            <CommandEmpty>No columns found.</CommandEmpty>
+            <CommandGroup>
+              {columns.map((column) => (
+                <CommandItem
+                  key={column.id}
+                  onSelect={() =>
+                    column.toggleVisibility(!column.getIsVisible())
+                  }
+                >
+                  <span className="truncate">
+                    {column.columnDef.meta?.label ?? column.id}
+                  </span>
+                  <Check
+                    className={cn(
+                      "ml-auto size-4 shrink-0",
+                      column.getIsVisible() ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}