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

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

@@ -0,0 +1,180 @@
+"use client";
+
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cn} from "cn";
+import {ArrowDownAZIcon, ArrowDownUpIcon, ArrowUpZAIcon, MoveDownIcon, MoveUpIcon} from "lucide-react";
+import type {ComponentType, ReactNode} from "react";
+import {useCallback, useState} from "react";
+
+import type {DataTableSortFn, DataTableSortView} from "../views/data-table-sort-view";
+import type {DataTableView, DataTableViewColumn} from "../views/data-table-view";
+import {useDataTableViewDetector} from "../views/data-table-view";
+import {DataTableRow} from "./data-table-row";
+
+export type DataTableSortIcon = ComponentType<{className?: string}>;
+
+export type DataTableSortRowMethod = {
+    id: string;
+    icon: DataTableSortIcon;
+    label?: string;
+    apply?: DataTableSortFn;
+};
+
+export type DataTableSortRowProps<T> = {
+    className?: string;
+    view: DataTableView<T>;
+    sortView: DataTableSortView<T>;
+    titles?: {[K: string]: ReactNode};
+    sorts?: {[K: string]: DataTableSortRowMethod[]};
+};
+
+export function DataTableSortRow<T>({className, view, sortView, titles, sorts, ...props}: DataTableSortRowProps<T>) {
+    const {columns} = useDataTableViewDetector<T>({view});
+    const [selectedIds, setSelectedId] = useState<{[K: string]: string | undefined}>({});
+    const handleSort = useCallback(
+        (columnId: string, currentId: string) => {
+            const sortList = sorts && columnId in sorts ? sorts[columnId] : undefined;
+            if (sortList) {
+                const index = sortList.findIndex((s) => s.id === currentId);
+                const nextIndex = index === -1 ? 0 : (index + 1) % sortList.length;
+                const nextSort = sortList[nextIndex];
+
+                if (nextSort?.apply) {
+                    // apply next sort
+                    setSelectedId({[columnId]: nextSort.id});
+                    sortView.setSorts({[columnId]: nextSort.apply});
+                } else {
+                    // no sort, remove sort
+                    setSelectedId({});
+                    sortView.setSorts({});
+                }
+            } else {
+                // no list, remove sort
+                setSelectedId({});
+                sortView.setSorts({});
+            }
+        },
+        [sortView, sorts],
+    );
+    const sortColumns = columns.map<DataTableViewColumn<undefined>>((column) => {
+        const columnId = column.id;
+        const title = titles && columnId in titles ? titles[columnId] : columnId;
+        const sortList = sorts && columnId in sorts ? sorts[columnId] : undefined;
+        if (sortList && sortList.length > 0) {
+            const sortId = selectedIds[columnId];
+            const sort = sortId ? sortList.find((s) => s.id === sortId) : sortList[0];
+            const usedId = sort ? sort.id : (sortList[0]?.id ?? "");
+            const SortIcon = sort?.icon;
+            const active = !!sort?.apply;
+            // right-aligned columns read better with the sort icon on the left of the label so it isn't
+            // crammed against the right edge; other alignments keep the label growing with the icon trailing
+            const alignRight = column.style.textAlign === "right";
+            const icon = SortIcon ? (
+                <SortIcon
+                    aria-hidden="true"
+                    className={cn("size-3.5 shrink-0", active ? "text-primary-text" : "text-muted-foreground")}
+                />
+            ) : null;
+            const label = <span className="min-w-0 truncate">{title}</span>;
+            return {
+                ...column,
+                cell: () => (
+                    <button
+                        type="button"
+                        data-slot="data-table-sort-button"
+                        data-active={active || undefined}
+                        title={sort?.label}
+                        aria-label={
+                            sort?.label ? `${typeof title === "string" ? title : columnId}: ${sort.label}` : undefined
+                        }
+                        onClick={() => handleSort(columnId, usedId)}
+                        className={cn(
+                            focusRing,
+                            "-mx-1 flex h-7 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md border border-transparent px-1 transition-[color,background-color,border-color,box-shadow] duration-100 select-none hover:bg-hover hover:text-foreground data-active:text-foreground",
+                            alignRight && "justify-end",
+                        )}
+                    >
+                        {alignRight ? (
+                            <>
+                                {icon}
+                                {label}
+                            </>
+                        ) : (
+                            <>
+                                {label}
+                                {icon}
+                            </>
+                        )}
+                    </button>
+                ),
+                cellProps: () => ({
+                    "aria-sort": active ? (sort?.id.endsWith("desc") ? "descending" : "ascending") : undefined,
+                }),
+                rawCell: () => undefined,
+            };
+        } else {
+            // fallback to regular title
+            return {
+                ...column,
+                cell: () => title,
+                cellProps: () => ({}),
+                rawCell: () => undefined,
+            };
+        }
+    });
+    return (
+        <DataTableRow
+            className={cn("data-table-sort-row", className)}
+            columns={sortColumns}
+            data={undefined}
+            head
+            {...props}
+        />
+    );
+}
+
+export function createDataTableStringSort(): DataTableSortRowMethod[] {
+    return [
+        {
+            id: "str-none",
+            icon: ArrowDownUpIcon,
+            label: "None",
+        },
+        {
+            id: "str-asc",
+            icon: ArrowDownAZIcon,
+            label: "Ascending",
+            apply: (a, b) => a.toString().localeCompare(b.toString()),
+        },
+        {
+            id: "str-desc",
+            icon: ArrowUpZAIcon,
+            label: "Descending",
+            apply: (a, b) => b.toString().localeCompare(a.toString()),
+        },
+    ];
+}
+
+export function createDataTableNumberSort(): DataTableSortRowMethod[] {
+    return [
+        {
+            id: "num-none",
+            icon: ArrowDownUpIcon,
+            label: "None",
+        },
+        {
+            id: "num-asc",
+            icon: MoveDownIcon,
+            label: "Ascending",
+            apply: (a, b) => a - b,
+        },
+        {
+            id: "num-desc",
+            icon: MoveUpIcon,
+            label: "Descending",
+            apply: (a, b) => b - a,
+        },
+    ];
+}
+
+export const createDataTableDateSort = createDataTableNumberSort; // alias

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

@@ -0,0 +1,33 @@
+"use client";
+
+import {cn} from "cn";
+import type {ReactNode} from "react";
+
+import type {DataTableView, DataTableViewColumn} from "../views/data-table-view";
+import {useDataTableViewDetector} from "../views/data-table-view";
+import {DataTableRow} from "./data-table-row";
+
+export type DataTableTitleRow<T> = {
+    className?: string;
+    view: DataTableView<T>;
+    titles?: {[K: string]: ReactNode};
+};
+
+export function DataTableTitleRow<T>({className, view, titles, ...props}: DataTableTitleRow<T>) {
+    const {columns} = useDataTableViewDetector<T>({view});
+    const titleColumns = columns.map<DataTableViewColumn<undefined>>((column) => ({
+        ...column,
+        cell: () => (titles && column.id in titles ? titles[column.id] : column.id),
+        cellProps: () => ({}),
+        rawCell: () => undefined,
+    }));
+    return (
+        <DataTableRow
+            className={cn("data-table-title-row", className)}
+            columns={titleColumns}
+            data={undefined}
+            head
+            {...props}
+        />
+    );
+}

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

@@ -0,0 +1,87 @@
+"use client";
+
+import {useVirtualizer} from "@tanstack/react-virtual";
+import {cn} from "cn";
+import type {HTMLAttributes} from "react";
+import {useState} 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 DataTableVirtualizedBodyProps<T> = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    view: DataTableView<T>;
+    innerRowHeight?: number;
+    overscan?: number;
+};
+
+export function DataTableVirtualizedBody<T>({
+    className,
+    view,
+    innerRowHeight,
+    overscan = 12,
+    ...props
+}: DataTableVirtualizedBodyProps<T>) {
+    const {columns, data} = useDataTableViewDetector({view});
+    const {ref, innerWidth, rowHeight} = useDataTableSizing({columns, innerRowHeight});
+
+    // callback-ref + state so the virtualizer re-runs once the ScrollArea viewport (the real scrolling
+    // element) is mounted; a plain ref wouldn't trigger the re-render TanStack needs to pick it up
+    const [scrollElement, setScrollElement] = useState<HTMLDivElement | null>(null);
+
+    const virtualizer = useVirtualizer({
+        count: data.length,
+        getScrollElement: () => scrollElement,
+        estimateSize: () => rowHeight,
+        overscan,
+    });
+
+    const virtualItems = virtualizer.getVirtualItems();
+
+    return (
+        <div
+            data-slot="data-table-body-container"
+            className={cn("relative flex min-h-0 flex-1 flex-col", className)}
+            ref={ref}
+            {...props}
+        >
+            <DataTableScroll
+                viewportRef={setScrollElement}
+                className="min-h-0 w-full flex-1"
+                style={{minWidth: `${innerWidth}px`}}
+            >
+                <div style={{height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative"}}>
+                    {virtualItems.map((virtualItem) => {
+                        const index = virtualItem.index;
+                        const row = data[index] as T;
+                        const {style: viewStyle, className: rowClassName, ...rowProps} = view.getRowProps(row);
+                        return (
+                            <DataTableRow
+                                key={virtualItem.key}
+                                data={row}
+                                columns={columns}
+                                even={index % 2 === 1}
+                                first={index === 0}
+                                last={index === data.length - 1}
+                                className={cn("border-b", rowClassName)}
+                                style={{
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    width: "100%",
+                                    height: `${virtualItem.size}px`,
+                                    transform: `translateY(${virtualItem.start}px)`,
+                                    ...viewStyle,
+                                }}
+                                {...rowProps}
+                            />
+                        );
+                    })}
+                </div>
+            </DataTableScroll>
+        </div>
+    );
+}

package/src/components/data-table/set-utils.ts

@@ -0,0 +1,103 @@
+/**
+ * Elements in `a` that are not in `b`.
+ * @example setDifference(new Set([1,2,3]), new Set([2,3,4])) // Set {1}
+ */
+export function setDifference<T>(a: Set<T>, b: Set<T>): Set<T> {
+    const result = new Set<T>();
+    for (const item of a) {
+        if (!b.has(item)) {
+            result.add(item);
+        }
+    }
+    return result;
+}
+
+/**
+ * All elements from both `a` and `b`.
+ * @example setUnion(new Set([1,2]), new Set([2,3])) // Set {1,2,3}
+ */
+export function setUnion<T>(a: Set<T>, b: Set<T>): Set<T> {
+    const result = new Set<T>(a);
+    for (const item of b) {
+        result.add(item);
+    }
+    return result;
+}
+
+/**
+ * Elements present in both `a` and `b`.
+ * @example setIntersection(new Set([1,2,3]), new Set([2,3,4])) // Set {2,3}
+ */
+export function setIntersection<T>(a: Set<T>, b: Set<T>): Set<T> {
+    const result = new Set<T>();
+    for (const item of a) {
+        if (b.has(item)) {
+            result.add(item);
+        }
+    }
+    return result;
+}
+
+/**
+ * Elements in `a` or `b` but not both.
+ * @example setSymmetricDifference(new Set([1,2,3]), new Set([2,3,4])) // Set {1,4}
+ */
+export function setSymmetricDifference<T>(a: Set<T>, b: Set<T>): Set<T> {
+    const result = new Set<T>();
+    for (const item of a) {
+        if (!b.has(item)) {
+            result.add(item);
+        }
+    }
+    for (const item of b) {
+        if (!a.has(item)) {
+            result.add(item);
+        }
+    }
+    return result;
+}
+
+/**
+ * True if every element of `a` is in `b`.
+ * @example isSubset(new Set([1,2]), new Set([1,2,3])) // true
+ */
+export function isSubset<T>(a: Set<T>, b: Set<T>): boolean {
+    for (const item of a) {
+        if (!b.has(item)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+/**
+ * True if `a` contains every element of `b`.
+ * @example isSuperset(new Set([1,2,3]), new Set([1,2])) // true
+ */
+export function isSuperset<T>(a: Set<T>, b: Set<T>): boolean {
+    return isSubset(b, a);
+}
+
+/**
+ * True if `a` and `b` share no elements.
+ * @example isDisjoint(new Set([1,2]), new Set([3,4])) // true
+ */
+export function isDisjoint<T>(a: Set<T>, b: Set<T>): boolean {
+    for (const item of a) {
+        if (b.has(item)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+/**
+ * True if `a` and `b` contain exactly the same elements.
+ * @example areSetsEqual(new Set([1,2,3]), new Set([3,1,2])) // true
+ */
+export function areSetsEqual<T>(a: Set<T>, b: Set<T>): boolean {
+    if (a.size !== b.size) {
+        return false;
+    }
+    return isSubset(a, b);
+}

package/src/components/data-table/views/data-table-filter-view.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import type {DataTableViewListener} from "./data-table-view";
+import {DataTableView} from "./data-table-view";
+
+export type DataTableFilterFn = (cell: any) => boolean;
+
+export type DataTableFiltersValue = {[K: string]: DataTableFilterFn};
+
+export class DataTableFilterView<T> extends DataTableView<T> {
+    private parent: DataTableView<T>;
+    private filters: DataTableFiltersValue;
+    private parentListener: DataTableViewListener<T>;
+
+    constructor(parent: DataTableView<T>, filters: DataTableFiltersValue = {}) {
+        super();
+        this.parent = parent;
+        this.filters = filters;
+
+        this.parentListener = () => {
+            this.filterParentData();
+            this.emitUpdate();
+        };
+        this.setParent(parent);
+    }
+    setParent(parent: DataTableView<T>) {
+        // unregister previous
+        this.parent.offUpdate(this.parentListener);
+
+        this.parent = parent;
+        this.parent.onUpdate(this.parentListener);
+
+        this.filterParentData();
+        this.emitUpdate();
+    }
+    setFilters(filters: DataTableFiltersValue = {}) {
+        this.filters = filters;
+        this.filterParentData();
+        this.emitUpdate();
+    }
+    getFilters() {
+        return this.filters;
+    }
+
+    // process
+    private filterParentData() {
+        const parentData = this.parent.getData();
+        const columns = this.getColumns();
+        const filters = this.filters;
+        this.data = parentData.filter((row) => {
+            for (const {id, rawCell} of columns) {
+                if (id in filters) {
+                    const filter = filters[id];
+                    if (filter !== undefined) {
+                        const cellData = rawCell(row);
+                        if (!filter(cellData)) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        });
+    }
+
+    // data flow
+    getColumns() {
+        // columns same as parent
+        return this.parent.getColumns();
+    }
+    getRowProps(row: T) {
+        // row props same as parent
+        return this.parent.getRowProps(row);
+    }
+}

package/src/components/data-table/views/data-table-prop-view.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import type {HTMLAttributes} from "react";
+
+import type {DataTableViewListener} from "./data-table-view";
+import {DataTableView} from "./data-table-view";
+
+export type DataTablePropsValue<T> = (row: T) => HTMLAttributes<HTMLDivElement>;
+
+export class DataTablePropView<T> extends DataTableView<T> {
+    private parent: DataTableView<T>;
+    private props: DataTablePropsValue<T>;
+    private parentListener: DataTableViewListener<T>;
+
+    constructor(parent: DataTableView<T>, props: DataTablePropsValue<T> = () => ({})) {
+        super();
+        this.parent = parent;
+        this.props = props;
+
+        this.parentListener = () => {
+            this.emitUpdate();
+        };
+        this.setParent(parent);
+    }
+    setParent(parent: DataTableView<T>) {
+        // unregister previous
+        this.parent.offUpdate(this.parentListener);
+
+        this.parent = parent;
+        this.parent.onUpdate(this.parentListener);
+
+        this.emitUpdate();
+    }
+    setProps(props: DataTablePropsValue<T> = () => ({})) {
+        this.props = props;
+        this.emitUpdate();
+    }
+    getProps() {
+        return this.props;
+    }
+
+    // data flow
+    getColumns() {
+        // columns same as parent
+        return this.parent.getColumns();
+    }
+    getData(): T[] {
+        // data same as parent
+        return this.parent.getData();
+    }
+    getRowProps(row: T) {
+        // merge props with parent
+        return {...this.parent.getRowProps(row), ...this.props(row)};
+    }
+}

package/src/components/data-table/views/data-table-root-view.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type {DataTableColumn} from "./data-table-view";
+import {convertColumn, DataTableView} from "./data-table-view";
+
+export class DataTableRootView<T> extends DataTableView<T> {
+    constructor(columns: DataTableColumn<T>[], data: T[]) {
+        super();
+        this.columns = columns.map(convertColumn);
+        this.data = data;
+    }
+    setColumns(columns: DataTableColumn<T>[]) {
+        this.columns = columns.map(convertColumn);
+        this.emitUpdate();
+    }
+    setData(data: T[]) {
+        this.data = data;
+        this.emitUpdate();
+    }
+}

package/src/components/data-table/views/data-table-sort-view.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import type {DataTableViewListener} from "./data-table-view";
+import {DataTableView} from "./data-table-view";
+
+export type DataTableSortFn = (cellA: any, cellB: any) => number;
+
+export type DataTableSortsValue = {[K: string]: DataTableSortFn};
+
+export class DataTableSortView<T> extends DataTableView<T> {
+    private parent: DataTableView<T>;
+    private sorts: DataTableSortsValue;
+    private parentListener: DataTableViewListener<T>;
+
+    constructor(parent: DataTableView<T>, sorts: DataTableSortsValue = {}) {
+        super();
+        this.parent = parent;
+        this.sorts = sorts;
+
+        this.parentListener = () => {
+            this.sortParentData();
+            this.emitUpdate();
+        };
+        this.setParent(parent);
+    }
+    setParent(parent: DataTableView<T>) {
+        // unregister previous
+        this.parent.offUpdate(this.parentListener);
+
+        this.parent = parent;
+        this.parent.onUpdate(this.parentListener);
+
+        this.sortParentData();
+        this.emitUpdate();
+    }
+    setSorts(sorts: DataTableSortsValue = {}) {
+        this.sorts = sorts;
+        this.sortParentData();
+        this.emitUpdate();
+    }
+    getSorts() {
+        return this.sorts;
+    }
+
+    // process
+    private sortParentData() {
+        const parentData = this.parent.getData();
+        const columns = this.getColumns();
+        const sorts = this.sorts;
+        if (Object.keys(sorts).length > 0) {
+            this.data = parentData.slice().sort((rowA, rowB) => {
+                // always sort left to right
+                for (const {id, rawCell} of columns) {
+                    const sort = sorts[id];
+                    if (sort) {
+                        const cellDataA = rawCell(rowA);
+                        const cellDataB = rawCell(rowB);
+                        const compare = sort(cellDataA, cellDataB);
+                        if (compare !== 0) {
+                            return compare;
+                        }
+                    }
+                }
+                return 0;
+            });
+        } else {
+            // avoids unnecessary copy
+            this.data = parentData;
+        }
+    }
+
+    // data flow
+    getColumns() {
+        // columns same as parent
+        return this.parent.getColumns();
+    }
+    getRowProps(row: T) {
+        // row props same as parent
+        return this.parent.getRowProps(row);
+    }
+}