@useatlas/create 0.0.6 → 0.0.7

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

@@ -0,0 +1,122 @@
+"use client";
+
+import type { Column } from "@tanstack/react-table";
+import * as React from "react";
+
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import type { ExtendedColumnFilter } from "@/types/data-table";
+
+interface DataTableRangeFilterProps<TData> extends React.ComponentProps<"div"> {
+  filter: ExtendedColumnFilter<TData>;
+  column: Column<TData>;
+  inputId: string;
+  onFilterUpdate: (
+    filterId: string,
+    updates: Partial<Omit<ExtendedColumnFilter<TData>, "filterId">>,
+  ) => void;
+}
+
+export function DataTableRangeFilter<TData>({
+  filter,
+  column,
+  inputId,
+  onFilterUpdate,
+  className,
+  ...props
+}: DataTableRangeFilterProps<TData>) {
+  const meta = column.columnDef.meta;
+
+  const [min, max] = React.useMemo(() => {
+    const range = column.columnDef.meta?.range;
+    if (range) return range;
+
+    const values = column.getFacetedMinMaxValues();
+    if (!values) return [0, 100];
+
+    return [values[0], values[1]];
+  }, [column]);
+
+  const formatValue = React.useCallback(
+    (value: string | number | undefined) => {
+      if (value === undefined || value === "") return "";
+      const numValue = Number(value);
+      return Number.isNaN(numValue)
+        ? ""
+        : numValue.toLocaleString(undefined, {
+            maximumFractionDigits: 0,
+          });
+    },
+    [],
+  );
+
+  const value = React.useMemo(() => {
+    if (Array.isArray(filter.value)) return filter.value.map(formatValue);
+    return [formatValue(filter.value), ""];
+  }, [filter.value, formatValue]);
+
+  const onRangeValueChange = React.useCallback(
+    (value: string, isMin?: boolean) => {
+      const numValue = Number(value);
+      const currentValues = Array.isArray(filter.value)
+        ? filter.value
+        : ["", ""];
+      const otherValue = isMin
+        ? (currentValues[1] ?? "")
+        : (currentValues[0] ?? "");
+
+      if (
+        value === "" ||
+        (!Number.isNaN(numValue) &&
+          (isMin
+            ? numValue >= min && numValue <= (Number(otherValue) || max)
+            : numValue <= max && numValue >= (Number(otherValue) || min)))
+      ) {
+        onFilterUpdate(filter.filterId, {
+          value: isMin ? [value, otherValue] : [otherValue, value],
+        });
+      }
+    },
+    [filter.filterId, filter.value, min, max, onFilterUpdate],
+  );
+
+  return (
+    <div
+      data-slot="range"
+      className={cn("flex w-full items-center gap-2", className)}
+      {...props}
+    >
+      <Input
+        id={`${inputId}-min`}
+        type="number"
+        aria-label={`${meta?.label} minimum value`}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        data-slot="range-min"
+        inputMode="numeric"
+        placeholder={min.toString()}
+        min={min}
+        max={max}
+        className="h-8 w-full rounded"
+        defaultValue={value[0]}
+        onChange={(event) => onRangeValueChange(event.target.value, true)}
+      />
+      <span className="sr-only shrink-0 text-muted-foreground">to</span>
+      <Input
+        id={`${inputId}-max`}
+        type="number"
+        aria-label={`${meta?.label} maximum value`}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        data-slot="range-max"
+        inputMode="numeric"
+        placeholder={max.toString()}
+        min={min}
+        max={max}
+        className="h-8 w-full rounded"
+        defaultValue={value[1]}
+        onChange={(event) => onRangeValueChange(event.target.value)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,256 @@
+"use client";
+
+import type { Column } from "@tanstack/react-table";
+import { PlusCircle, XCircle } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Slider } from "@/components/ui/slider";
+import { cn } from "@/lib/utils";
+
+interface Range {
+  min: number;
+  max: number;
+}
+
+type RangeValue = [number, number];
+
+function getIsValidRange(value: unknown): value is RangeValue {
+  return (
+    Array.isArray(value) &&
+    value.length === 2 &&
+    typeof value[0] === "number" &&
+    typeof value[1] === "number"
+  );
+}
+
+function parseValuesAsNumbers(value: unknown): RangeValue | undefined {
+  if (
+    Array.isArray(value) &&
+    value.length === 2 &&
+    value.every(
+      (v) =>
+        (typeof v === "string" || typeof v === "number") && !Number.isNaN(v),
+    )
+  ) {
+    return [Number(value[0]), Number(value[1])];
+  }
+
+  return undefined;
+}
+
+interface DataTableSliderFilterProps<TData> {
+  column: Column<TData, unknown>;
+  title?: string;
+}
+
+export function DataTableSliderFilter<TData>({
+  column,
+  title,
+}: DataTableSliderFilterProps<TData>) {
+  const id = React.useId();
+
+  const columnFilterValue = parseValuesAsNumbers(column.getFilterValue());
+
+  const defaultRange = column.columnDef.meta?.range;
+  const unit = column.columnDef.meta?.unit;
+
+  const { min, max, step } = React.useMemo<Range & { step: number }>(() => {
+    let minValue = 0;
+    let maxValue = 100;
+
+    if (defaultRange && getIsValidRange(defaultRange)) {
+      [minValue, maxValue] = defaultRange;
+    } else {
+      const values = column.getFacetedMinMaxValues();
+      if (values && Array.isArray(values) && values.length === 2) {
+        const [facetMinValue, facetMaxValue] = values;
+        if (
+          typeof facetMinValue === "number" &&
+          typeof facetMaxValue === "number"
+        ) {
+          minValue = facetMinValue;
+          maxValue = facetMaxValue;
+        }
+      }
+    }
+
+    const rangeSize = maxValue - minValue;
+    const step =
+      rangeSize <= 20
+        ? 1
+        : rangeSize <= 100
+          ? Math.ceil(rangeSize / 20)
+          : Math.ceil(rangeSize / 50);
+
+    return { min: minValue, max: maxValue, step };
+  }, [column, defaultRange]);
+
+  const range = React.useMemo((): RangeValue => {
+    return columnFilterValue ?? [min, max];
+  }, [columnFilterValue, min, max]);
+
+  const formatValue = React.useCallback((value: number) => {
+    return value.toLocaleString(undefined, { maximumFractionDigits: 0 });
+  }, []);
+
+  const onFromInputChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const numValue = Number(event.target.value);
+      if (!Number.isNaN(numValue) && numValue >= min && numValue <= range[1]) {
+        column.setFilterValue([numValue, range[1]]);
+      }
+    },
+    [column, min, range],
+  );
+
+  const onToInputChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const numValue = Number(event.target.value);
+      if (!Number.isNaN(numValue) && numValue <= max && numValue >= range[0]) {
+        column.setFilterValue([range[0], numValue]);
+      }
+    },
+    [column, max, range],
+  );
+
+  const onSliderValueChange = React.useCallback(
+    (value: RangeValue) => {
+      if (Array.isArray(value) && value.length === 2) {
+        column.setFilterValue(value);
+      }
+    },
+    [column],
+  );
+
+  const onReset = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (event.target instanceof HTMLDivElement) {
+        event.stopPropagation();
+      }
+      column.setFilterValue(undefined);
+    },
+    [column],
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="border-dashed font-normal"
+        >
+          {columnFilterValue ? (
+            <div
+              role="button"
+              aria-label={`Clear ${title} filter`}
+              tabIndex={0}
+              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              onClick={onReset}
+            >
+              <XCircle />
+            </div>
+          ) : (
+            <PlusCircle />
+          )}
+          <span>{title}</span>
+          {columnFilterValue ? (
+            <>
+              <Separator
+                orientation="vertical"
+                className="mx-0.5 data-[orientation=vertical]:h-4"
+              />
+              {formatValue(columnFilterValue[0])} -{" "}
+              {formatValue(columnFilterValue[1])}
+              {unit ? ` ${unit}` : ""}
+            </>
+          ) : null}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="flex w-auto flex-col gap-4">
+        <div className="flex flex-col gap-3">
+          <p className="font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+            {title}
+          </p>
+          <div className="flex items-center gap-4">
+            <Label htmlFor={`${id}-from`} className="sr-only">
+              From
+            </Label>
+            <div className="relative">
+              <Input
+                id={`${id}-from`}
+                type="number"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                inputMode="numeric"
+                pattern="[0-9]*"
+                placeholder={min.toString()}
+                min={min}
+                max={max}
+                value={range[0]?.toString()}
+                onChange={onFromInputChange}
+                className={cn("h-8 w-24", unit && "pr-8")}
+              />
+              {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">
+                  {unit}
+                </span>
+              )}
+            </div>
+            <Label htmlFor={`${id}-to`} className="sr-only">
+              to
+            </Label>
+            <div className="relative">
+              <Input
+                id={`${id}-to`}
+                type="number"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                inputMode="numeric"
+                pattern="[0-9]*"
+                placeholder={max.toString()}
+                min={min}
+                max={max}
+                value={range[1]?.toString()}
+                onChange={onToInputChange}
+                className={cn("h-8 w-24", unit && "pr-8")}
+              />
+              {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">
+                  {unit}
+                </span>
+              )}
+            </div>
+          </div>
+          <Label htmlFor={`${id}-slider`} className="sr-only">
+            {title} slider
+          </Label>
+          <Slider
+            id={`${id}-slider`}
+            min={min}
+            max={max}
+            step={step}
+            value={range}
+            onValueChange={onSliderValueChange}
+          />
+        </div>
+        <Button
+          aria-label={`Clear ${title} filter`}
+          variant="outline"
+          size="sm"
+          onClick={onReset}
+        >
+          Clear
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+}