@repraze/kernelkit 0.0.0-stage → 0.1.0-alpha.0

package/src/components/data-table/elements/data-table-body.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import {cn} from "cn";
+import type {HTMLAttributes} from "react";
+
+import {useDataTableSizing} from "../data-table-utils";
+import type {DataTableView} from "../views/data-table-view";
+import {useDataTableViewDetector} from "../views/data-table-view";
+import {DataTableRow} from "./data-table-row";
+import {DataTableScroll} from "./data-table-scroll";
+
+export type DataTableBodyProps<T> = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    view: DataTableView<T>;
+};
+
+export function DataTableBody<T>({className, view, ...props}: DataTableBodyProps<T>) {
+    const {columns, data} = useDataTableViewDetector({view});
+    const {ref, innerWidth} = useDataTableSizing({columns});
+
+    return (
+        <div
+            data-slot="data-table-body-container"
+            className={cn("relative flex min-h-0 flex-1 flex-col", className)}
+            ref={ref}
+            {...props}
+        >
+            <DataTableScroll
+                className="min-h-0 w-full flex-1"
+                viewportClassName="[&_[data-slot=data-table-row]:not(:last-child)]:border-b"
+                style={{minWidth: `${innerWidth}px`}}
+            >
+                {data.map((row, index) => {
+                    const rowProps = view.getRowProps(row);
+                    return (
+                        <DataTableRow
+                            key={index}
+                            data={row}
+                            columns={columns}
+                            even={index % 2 === 1}
+                            first={index === 0}
+                            last={index === data.length - 1}
+                            {...rowProps}
+                        />
+                    );
+                })}
+            </DataTableScroll>
+        </div>
+    );
+}

package/src/components/data-table/elements/data-table-cell.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+import type {HTMLAttributes, ReactNode} from "react";
+
+const dataTableCellVariants = cva(
+    // `dividers` draws vertical separators between columns (driven by the group on DataTable)
+    "flex flex-row flex-nowrap items-center overflow-hidden p-2 text-ellipsis whitespace-nowrap group-data-dividers/data-table:not-last:border-r group-data-dividers/data-table:border-border",
+    {
+        variants: {
+            head: {
+                // same micro label as <TableHead>
+                true: "h-10 py-0 text-xs font-medium text-muted-foreground",
+                false: "",
+            },
+        },
+        defaultVariants: {
+            head: false,
+        },
+    },
+);
+
+export type DataTableCellProps = HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof dataTableCellVariants> & {
+        className?: string;
+        children?: ReactNode;
+    };
+
+export function DataTableCell({className, head, children, ...props}: DataTableCellProps) {
+    return (
+        <div
+            data-slot={head ? "data-table-head-cell" : "data-table-cell"}
+            className={cn(dataTableCellVariants({head}), className)}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+}
+
+export {dataTableCellVariants};

package/src/components/data-table/elements/data-table-filter-row.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import {Input} from "@repraze/kernelkit/components/input";
+import {NativeSelect, NativeSelectOption} from "@repraze/kernelkit/components/native-select";
+import {cn} from "cn";
+import type {ChangeEventHandler, ComponentProps, ComponentType} from "react";
+import {useCallback} from "react";
+
+import type {DataTableFilterFn, DataTableFilterView} from "../views/data-table-filter-view";
+import type {DataTableView, DataTableViewColumn} from "../views/data-table-view";
+import {useDataTableViewDetector} from "../views/data-table-view";
+import type {DataTableCellProps} from "./data-table-cell";
+import {DataTableRow} from "./data-table-row";
+
+export type DataTableFilterCellProps = DataTableCellProps & {
+    onFilter: (filter: DataTableFilterFn) => void;
+};
+
+export type DataTableFilterRowProps<T> = {
+    className?: string;
+    view: DataTableView<T>;
+    filterView: DataTableFilterView<T>;
+    filters?: {[K: string]: ComponentType<DataTableFilterCellProps>};
+};
+
+export function DataTableFilterRow<T>({className, view, filterView, filters, ...props}: DataTableFilterRowProps<T>) {
+    const {columns} = useDataTableViewDetector<T>({view});
+    const handleFilter = useCallback(
+        (columnId: string, filter: DataTableFilterFn) => {
+            const filters = filterView.getFilters();
+            // not making a copy for speed
+            filters[columnId] = filter;
+            filterView.setFilters(filters);
+        },
+        [filterView],
+    );
+    const filterColumns = columns.map<DataTableViewColumn<undefined>>((column) => ({
+        ...column,
+        cell: () => {
+            const columnId = column.id;
+            const FilterCell = filters && columnId in filters ? filters[columnId] : undefined;
+            if (FilterCell) {
+                return <FilterCell onFilter={(filter) => handleFilter(columnId, filter)} />;
+            } else {
+                return null;
+            }
+        },
+        cellProps: () => ({
+            className: "px-1.5",
+        }),
+        rawCell: () => undefined,
+    }));
+    return (
+        <DataTableRow
+            className={cn("data-table-filter-row", className)}
+            columns={filterColumns}
+            data={undefined}
+            head
+            {...props}
+        />
+    );
+}
+
+type InputProps = ComponentProps<typeof Input>;
+
+export type DataTableStringFilterProps = {
+    exact?: boolean;
+    sensitive?: boolean;
+    inputProps?: InputProps;
+};
+
+export function createDataTableStringFilter({
+    exact,
+    sensitive,
+    inputProps,
+}: DataTableStringFilterProps = {}): ComponentType<DataTableFilterCellProps> {
+    let method = (_fv: string, _rv: any) => false; // dummy
+    if (exact) {
+        if (sensitive) {
+            method = (fv: string, rv: any) => !fv || `${rv}` === fv;
+        } else {
+            method = (fv: string, rv: any) => !fv || `${rv}`.toLowerCase() === fv.toLowerCase();
+        }
+    } else {
+        if (sensitive) {
+            method = (fv: string, rv: any) => !fv || `${rv}`.includes(fv);
+        } else {
+            method = (fv: string, rv: any) => !fv || `${rv}`.toLowerCase().includes(fv.toLowerCase());
+        }
+    }
+    return function StringFilter({onFilter}) {
+        return (
+            <Input
+                type="text"
+                className="h-7 rounded-md px-2"
+                onChange={(e) => onFilter(method.bind(undefined, e.target.value))}
+                {...inputProps}
+            />
+        );
+    };
+}
+
+export type DataTableNumberFilterProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    pattern?: string;
+    inputProps?: InputProps;
+};
+
+export function createDataTableNumberFilter({
+    min,
+    max,
+    step,
+    pattern,
+    inputProps,
+}: DataTableNumberFilterProps = {}): ComponentType<DataTableFilterCellProps> {
+    const method = (fv: number, cv: any) => !fv || cv == fv; // weak equality to match strings to numbers
+    return function NumberFilter({onFilter}) {
+        return (
+            <Input
+                type="number"
+                className="h-7 rounded-md px-2"
+                min={min}
+                max={max}
+                step={step}
+                pattern={pattern}
+                onChange={(e) => onFilter(method.bind(undefined, e.target.valueAsNumber))}
+                {...inputProps}
+            />
+        );
+    };
+}
+
+export type DataTableDateFilterProps = DataTableNumberFilterProps;
+
+const DAY = 1000 * 60 * 60 * 24;
+export function createDataTableDateFilter({
+    min,
+    max,
+    step,
+    pattern,
+    inputProps,
+}: DataTableDateFilterProps = {}): ComponentType<DataTableFilterCellProps> {
+    function withinDay(fv: Date, cv: any) {
+        if (cv !== undefined) {
+            const b = fv.getTime();
+            const t = "getTime" in cv ? cv.getTime() : cv;
+            return t >= b && t < b + DAY;
+        }
+        return false;
+    }
+    const method = (fv: Date | undefined, cv: any) => fv === undefined || withinDay(fv, cv); // within 1 day
+    return function DateFilter({onFilter}) {
+        const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+            (event) => {
+                const date = event.target.valueAsDate;
+                if (date) {
+                    // force beginning of local day
+                    date.setMilliseconds(0);
+                    date.setSeconds(0);
+                    date.setMinutes(0);
+                    date.setHours(0);
+                    onFilter(method.bind(undefined, date));
+                } else {
+                    onFilter(method.bind(undefined, undefined));
+                }
+            },
+            [onFilter],
+        );
+        return (
+            <Input
+                type="date"
+                className="h-7 rounded-md px-2"
+                min={min}
+                max={max}
+                step={step}
+                pattern={pattern}
+                onChange={handleChange}
+                {...inputProps}
+            />
+        );
+    };
+}
+
+export type DataTableBooleanFilterProps = {
+    selectProps?: Omit<ComponentProps<"select">, "size">;
+};
+
+enum BOOLEAN_FILTER_VALUE {
+    All = "all",
+    True = "true",
+    False = "false",
+}
+
+export function createDataTableBooleanFilter({
+    selectProps,
+}: DataTableBooleanFilterProps = {}): ComponentType<DataTableFilterCellProps> {
+    const method = (fv: boolean | undefined, cv: any) => fv === undefined || fv == cv; // weak equality
+    return function BooleanFilter({onFilter}) {
+        const handleChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
+            (event) => {
+                const value = event.target.value;
+                if (value === BOOLEAN_FILTER_VALUE.All) {
+                    onFilter(method.bind(undefined, undefined));
+                } else if (value === BOOLEAN_FILTER_VALUE.True) {
+                    onFilter(method.bind(undefined, true));
+                } else {
+                    onFilter(method.bind(undefined, false));
+                }
+            },
+            [onFilter],
+        );
+        return (
+            <NativeSelect size="sm" className="w-full" onChange={handleChange} {...selectProps}>
+                <NativeSelectOption value={BOOLEAN_FILTER_VALUE.All}>All</NativeSelectOption>
+                <NativeSelectOption value={BOOLEAN_FILTER_VALUE.True}>Yes</NativeSelectOption>
+                <NativeSelectOption value={BOOLEAN_FILTER_VALUE.False}>No</NativeSelectOption>
+            </NativeSelect>
+        );
+    };
+}

package/src/components/data-table/elements/data-table-foot.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import {cn} from "cn";
+import type {HTMLAttributes, ReactNode} from "react";
+
+import {useDataTableSizing} from "../data-table-utils";
+import type {DataTableView} from "../views/data-table-view";
+import {useDataTableViewDetector} from "../views/data-table-view";
+
+export type DataTableFootProps<T> = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    view: DataTableView<T>;
+    children?: ReactNode;
+};
+
+export function DataTableFoot<T>({className, view, children, ...props}: DataTableFootProps<T>) {
+    const {columns} = useDataTableViewDetector({view});
+    const {ref, innerWidth} = useDataTableSizing({columns});
+
+    return (
+        <div
+            data-slot="data-table-foot-container"
+            className={cn("relative flex shrink-0 grow-0 basis-auto flex-col", className)}
+            ref={ref}
+            {...props}
+        >
+            <div
+                data-slot="data-table-foot"
+                className="flex w-full shrink-0 grow-0 flex-col *:data-[slot=data-table-row]:border-t *:data-[slot=data-table-row]:border-border *:data-[slot=data-table-row]:bg-muted/50 *:data-[slot=data-table-row]:text-foreground *:data-[slot=data-table-row]:font-medium"
+                style={{minWidth: `${innerWidth}px`}}
+            >
+                {children}
+            </div>
+        </div>
+    );
+}

package/src/components/data-table/elements/data-table-head.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import {cn} from "cn";
+import type {HTMLAttributes, ReactNode} from "react";
+
+import {useDataTableSizing} from "../data-table-utils";
+import type {DataTableView} from "../views/data-table-view";
+import {useDataTableViewDetector} from "../views/data-table-view";
+
+export type DataTableHeadProps<T> = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    view: DataTableView<T>;
+    children?: ReactNode;
+};
+
+export function DataTableHead<T>({className, view, children, ...props}: DataTableHeadProps<T>) {
+    const {columns} = useDataTableViewDetector({view});
+    const {ref, innerWidth} = useDataTableSizing({columns});
+
+    return (
+        <div
+            data-slot="data-table-head-container"
+            className={cn("relative flex shrink-0 grow-0 basis-auto flex-col", className)}
+            ref={ref}
+            {...props}
+        >
+            <div
+                data-slot="data-table-head"
+                className="flex w-full shrink-0 grow-0 flex-col *:data-[slot=data-table-row]:border-b *:data-[slot=data-table-row]:border-border"
+                style={{minWidth: `${innerWidth}px`}}
+            >
+                {children}
+            </div>
+        </div>
+    );
+}

package/src/components/data-table/elements/data-table-info-row.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import {cn} from "cn";
+
+import type {DataTableView, DataTableViewColumn} from "../views/data-table-view";
+import {convertColumn, useDataTableViewDetector} from "../views/data-table-view";
+import {DataTableRow} from "./data-table-row";
+
+export type DataTableInfoRowProps<T> = {
+    className?: string;
+    view: DataTableView<T>;
+};
+
+export function DataTableInfoRow<T>({className, view, ...props}: DataTableInfoRowProps<T>) {
+    const {columns, data} = useDataTableViewDetector<T>({view});
+    const columnCount = columns.length;
+    const rowCount = data.length;
+    const columnWidth = columns.reduce((w, c) => w + c.width, 0);
+    const infoColumn: DataTableViewColumn<undefined> = convertColumn({
+        id: "info",
+        cell: () => (
+            <span className="font-mono tabular-nums">
+                {rowCount.toLocaleString()} rows · {columnCount} columns
+            </span>
+        ),
+        width: columnWidth,
+        grow: 1,
+    });
+    return (
+        <DataTableRow
+            className={cn("data-table-row-info", className)}
+            columns={[infoColumn]}
+            data={undefined}
+            head
+            {...props}
+        />
+    );
+}

package/src/components/data-table/elements/data-table-row.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import {cn} from "cn";
+import type {HTMLAttributes} from "react";
+
+import type {DataTableViewColumn} from "../views/data-table-view";
+import {useDataTableContext} from "./data-table-base";
+import {DataTableCell} from "./data-table-cell";
+
+export type DataTableRowProps<T> = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    data: T;
+    columns: DataTableViewColumn<T>[];
+    head?: boolean;
+    even?: boolean;
+    first?: boolean;
+    last?: boolean;
+};
+
+export function DataTableRow<T>({
+    className,
+    data,
+    columns,
+    head,
+    even,
+    first: _first,
+    last: _last,
+    ...props
+}: DataTableRowProps<T>) {
+    const {striped} = useDataTableContext();
+
+    return (
+        <div
+            data-slot="data-table-row"
+            data-head={head || undefined}
+            className={cn(
+                "relative flex flex-row border-border transition-colors duration-100",
+                // striped is a plain class so a per-row highlight in `className` wins via tailwind-merge
+                !head && striped && even && "bg-muted/50",
+                // hover is gated by the `hoverable` flag on DataTable and skips header rows
+                !head && "group-data-hoverable/data-table:hover:bg-hover",
+                // selected = accent tint + a 2px primary indicator (never shade alone)
+                "data-[state=selected]:bg-accent! data-[state=selected]:text-accent-foreground data-[state=selected]:shadow-[inset_2px_0_0_var(--primary-text)]",
+                className,
+            )}
+            {...props}
+        >
+            {columns.map((column) => {
+                const cellProps = column.cellProps(data);
+                return (
+                    <DataTableCell key={column.id} style={column.style} head={head} {...cellProps}>
+                        {column.cell(data)}
+                    </DataTableCell>
+                );
+            })}
+        </div>
+    );
+}

package/src/components/data-table/elements/data-table-scroll.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import {ScrollArea as ScrollAreaPrimitive} from "@base-ui/react/scroll-area";
+import {ScrollBar} from "@repraze/kernelkit/components/scroll-area";
+import {cn} from "cn";
+import type {CSSProperties, ReactNode, Ref} from "react";
+
+export type DataTableScrollProps = {
+    className?: string;
+    viewportClassName?: string;
+    viewportRef?: Ref<HTMLDivElement>;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+
+/** Vertical overlay scroller for the body (consumes no width, so head and body columns stay aligned). */
+export function DataTableScroll({className, viewportClassName, viewportRef, style, children}: DataTableScrollProps) {
+    return (
+        <ScrollAreaPrimitive.Root data-slot="data-table-scroll" className={cn("relative", className)} style={style}>
+            <ScrollAreaPrimitive.Viewport
+                ref={viewportRef}
+                data-slot="data-table-viewport"
+                className={cn(
+                    "size-full rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset",
+                    viewportClassName,
+                )}
+            >
+                {children}
+            </ScrollAreaPrimitive.Viewport>
+            <ScrollBar className="opacity-0 transition-opacity duration-150 data-hovering:opacity-100 data-scrolling:opacity-100 motion-reduce:transition-none" />
+        </ScrollAreaPrimitive.Root>
+    );
+}