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

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

@@ -0,0 +1,147 @@
+"use client";
+
+import type {CSSProperties, HTMLAttributes, ReactNode} from "react";
+import {useEffect, useState} from "react";
+
+export type DataTableViewDetectorProps<T> = {
+    view: DataTableView<T>;
+};
+
+export type DataTableViewDetectorData<T> = {
+    columns: DataTableViewColumn<T>[];
+    data: T[];
+};
+
+export type DataTableViewListener<T> = (columns: DataTableViewColumn<T>[], data: T[]) => void;
+
+export function useDataTableViewDetector<T>({view}: DataTableViewDetectorProps<T>) {
+    const [viewData, setViewData] = useState<DataTableViewDetectorData<T>>({
+        columns: view.getColumns(),
+        data: view.getData(),
+    });
+
+    useEffect(() => {
+        const updateCallback: DataTableViewListener<T> = (columns, data) => {
+            setViewData({columns, data});
+        };
+        view.onUpdate(updateCallback);
+        // sync immediately in case the view changed between render and effect
+        setViewData({columns: view.getColumns(), data: view.getData()});
+        return () => {
+            view.offUpdate(updateCallback);
+        };
+    }, [view, setViewData]);
+
+    return viewData;
+}
+
+export type DataTableColumn<T> = {
+    id: string;
+
+    cell: ((data: T) => ReactNode) | keyof T;
+    cellProps?: ((data: T) => HTMLAttributes<HTMLDivElement>) | HTMLAttributes<HTMLDivElement>;
+    rawCell?: ((data: T) => any) | keyof T;
+
+    width: number; // width in px
+    minWidth?: number;
+    maxWidth?: number;
+    grow?: number;
+    shrink?: number;
+    align?: "left" | "right" | "center";
+};
+
+export type DataTableViewColumn<T> = {
+    id: string;
+
+    cell: (data: T) => ReactNode;
+    cellProps: (data: T) => HTMLAttributes<HTMLDivElement>;
+    rawCell: (data: T) => any;
+
+    width: number;
+    style: CSSProperties;
+};
+
+export function convertColumn<T>({
+    id,
+
+    cell,
+    cellProps,
+    rawCell,
+
+    width,
+    minWidth,
+    maxWidth,
+    grow,
+    shrink,
+    align,
+}: DataTableColumn<T>): DataTableViewColumn<T> {
+    return {
+        id,
+
+        cell: typeof cell === "function" ? cell : (row: T) => <>{row[cell]}</>,
+        cellProps:
+            cellProps !== undefined ? (typeof cellProps === "function" ? cellProps : () => cellProps) : () => ({}),
+        rawCell:
+            rawCell !== undefined
+                ? typeof rawCell === "function"
+                    ? rawCell
+                    : (row: T) => row[rawCell]
+                : typeof cell === "function"
+                  ? cell
+                  : (row: T) => row[cell],
+
+        width,
+
+        style: {
+            width: `${width}px`,
+            minWidth: minWidth !== undefined ? `${minWidth}px` : undefined,
+            maxWidth: maxWidth !== undefined ? `${maxWidth}px` : undefined,
+            flex: `${grow || 0} ${shrink || 0} auto`,
+            textAlign: align || "left",
+            justifyContent: align
+                ? {
+                      left: "flex-start",
+                      right: "flex-end",
+                      center: "center",
+                  }[align]
+                : "flex-start",
+        },
+    };
+}
+
+export abstract class DataTableView<T> {
+    protected columns: DataTableViewColumn<T>[];
+    protected data: T[];
+    private listeners: DataTableViewListener<T>[];
+
+    constructor() {
+        this.data = [];
+        this.columns = [];
+        this.listeners = [];
+    }
+    // event pipeline
+    onUpdate(fn: DataTableViewListener<T>) {
+        this.listeners.push(fn);
+    }
+    offUpdate(fn: DataTableViewListener<T>) {
+        const index = this.listeners.indexOf(fn);
+        if (index >= 0) {
+            this.listeners.splice(index, 1);
+        }
+    }
+    protected emitUpdate() {
+        this.listeners.forEach((listener) => {
+            listener(this.getColumns(), this.getData());
+        });
+    }
+    // data flow
+    getColumns(): DataTableViewColumn<T>[] {
+        return this.columns;
+    }
+    getData(): T[] {
+        return this.data;
+    }
+    getRowProps(_row: T): HTMLAttributes<HTMLDivElement> {
+        return {};
+    }
+}

package/src/components/data-table.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+// Public entry for the data table (the package maps "./components/*" to "./src/components/*.tsx").
+
+// utils
+export * from "./data-table/data-table-utils";
+export * from "./data-table/set-utils";
+
+// UI building blocks
+export * from "./data-table/elements/data-table-base";
+export * from "./data-table/elements/data-table-body";
+export * from "./data-table/elements/data-table-cell";
+export * from "./data-table/elements/data-table-foot";
+export * from "./data-table/elements/data-table-head";
+export * from "./data-table/elements/data-table-row";
+export * from "./data-table/elements/data-table-scroll";
+export * from "./data-table/elements/data-table-virtualized-body";
+
+// UI special rows
+export * from "./data-table/elements/data-table-filter-row";
+export * from "./data-table/elements/data-table-info-row";
+export * from "./data-table/elements/data-table-sort-row";
+export * from "./data-table/elements/data-table-title-row";
+
+// Views
+export * from "./data-table/views/data-table-filter-view";
+export * from "./data-table/views/data-table-prop-view";
+export * from "./data-table/views/data-table-root-view";
+export * from "./data-table/views/data-table-sort-view";
+export * from "./data-table/views/data-table-view";

package/src/components/date-picker.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import {Button} from "@repraze/kernelkit/components/button";
+import {Calendar} from "@repraze/kernelkit/components/calendar";
+import {Popover, PopoverContent, PopoverTrigger} from "@repraze/kernelkit/components/popover";
+import {cn} from "cn";
+import {format as formatDate} from "date-fns";
+import {CalendarIcon} from "lucide-react";
+import * as React from "react";
+import type {DateRange} from "react-day-picker";
+
+type CalendarProps = React.ComponentProps<typeof Calendar>;
+
+interface DatePickerBaseProps {
+    /** Trigger text when nothing is picked. */
+    placeholder?: React.ReactNode;
+    /** date-fns format string for the trigger label. */
+    format?: string;
+    size?: "sm" | "default" | "lg";
+    disabled?: boolean;
+    "aria-invalid"?: boolean;
+    id?: string;
+    className?: string;
+    /** Extra props for the Calendar (disabled days, captionLayout, startMonth…). */
+    calendarProps?: Omit<CalendarProps, "mode" | "selected" | "onSelect">;
+    /** Popover alignment against the trigger. */
+    align?: "start" | "center" | "end";
+}
+
+function useControllable<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (value: T) => void) {
+    const [inner, setInner] = React.useState(defaultValue);
+    const controlled = value !== undefined;
+    const current = controlled ? value : inner;
+    const set = React.useCallback(
+        (next: T) => {
+            if (!controlled) {
+                setInner(next);
+            }
+            onChange?.(next);
+        },
+        [controlled, onChange],
+    );
+    return [current, set] as const;
+}
+
+function DatePickerTrigger({
+    label,
+    placeholder,
+    size = "default",
+    className,
+    ...props
+}: React.ComponentProps<typeof Button> & {label?: string; placeholder: React.ReactNode}) {
+    return (
+        <PopoverTrigger
+            data-slot="date-picker-trigger"
+            data-empty={label ? undefined : ""}
+            render={
+                <Button
+                    variant="outline"
+                    size={size}
+                    className={cn(
+                        "w-60 justify-start text-left font-normal data-empty:text-muted-foreground data-popup-open:bg-hover [&>svg]:text-muted-foreground",
+                        className,
+                    )}
+                    {...props}
+                />
+            }
+        >
+            <CalendarIcon data-icon="inline-start" />
+            <span className="truncate">{label ?? placeholder}</span>
+        </PopoverTrigger>
+    );
+}
+
+interface DatePickerProps extends DatePickerBaseProps {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onValueChange?: (date: Date | null) => void;
+}
+
+/** A date field: outline trigger that opens a Calendar in a Popover. Closes on pick. */
+function DatePicker({
+    value,
+    defaultValue = null,
+    onValueChange,
+    placeholder = "Pick a date",
+    format = "PPP",
+    calendarProps,
+    align = "start",
+    className,
+    ...trigger
+}: DatePickerProps) {
+    const [open, setOpen] = React.useState(false);
+    const [date, setDate] = useControllable<Date | null>(value, defaultValue, onValueChange);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <DatePickerTrigger
+                label={date ? formatDate(date, format) : undefined}
+                placeholder={placeholder}
+                className={className}
+                {...trigger}
+            />
+            <PopoverContent data-slot="date-picker-content" className="w-auto p-0" align={align}>
+                <Calendar
+                    {...calendarProps}
+                    mode="single"
+                    selected={date ?? undefined}
+                    defaultMonth={date ?? calendarProps?.defaultMonth}
+                    onSelect={(next) => {
+                        setDate(next ?? null);
+                        setOpen(false);
+                    }}
+                />
+            </PopoverContent>
+        </Popover>
+    );
+}
+
+interface DateRangePickerProps extends DatePickerBaseProps {
+    value?: DateRange | null;
+    defaultValue?: DateRange | null;
+    onValueChange?: (range: DateRange | null) => void;
+    /** Months shown side by side. */
+    numberOfMonths?: number;
+}
+
+/** A date range field: stays open until both ends are picked. */
+function DateRangePicker({
+    value,
+    defaultValue = null,
+    onValueChange,
+    placeholder = "Pick a date range",
+    format = "LLL d, y",
+    numberOfMonths = 2,
+    calendarProps,
+    align = "start",
+    className,
+    ...trigger
+}: DateRangePickerProps) {
+    const [range, setRange] = useControllable<DateRange | null>(value, defaultValue, onValueChange);
+    const label = range?.from
+        ? range.to
+            ? `${formatDate(range.from, format)} – ${formatDate(range.to, format)}`
+            : formatDate(range.from, format)
+        : undefined;
+
+    return (
+        <Popover>
+            <DatePickerTrigger label={label} placeholder={placeholder} className={cn("w-72", className)} {...trigger} />
+            <PopoverContent data-slot="date-picker-content" className="w-auto p-0" align={align}>
+                <Calendar
+                    {...calendarProps}
+                    mode="range"
+                    numberOfMonths={numberOfMonths}
+                    selected={range ?? undefined}
+                    defaultMonth={range?.from ?? calendarProps?.defaultMonth}
+                    onSelect={(next) => setRange(next ?? null)}
+                />
+            </PopoverContent>
+        </Popover>
+    );
+}
+
+export {DatePicker, DatePickerTrigger, DateRangePicker};
+export type {DatePickerProps, DateRangePickerProps};

package/src/components/dialog.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import {Dialog as DialogPrimitive} from "@base-ui/react/dialog";
+import {Button} from "@repraze/kernelkit/components/button";
+import {backdrop, heading} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+import {XIcon} from "lucide-react";
+import * as React from "react";
+
+/** Centered modal panel (GUIDELINES §3: `rounded-xl`, §4: `p-4`). */
+const dialogContentVariants = cva(
+    "group/dialog-content fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-popover p-4 text-sm text-popover-foreground shadow-xl shadow-(color:--shadow-color) duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none",
+    {
+        variants: {
+            size: {
+                sm: "sm:max-w-xs",
+                default: "sm:max-w-sm",
+                lg: "sm:max-w-lg",
+                xl: "sm:max-w-2xl",
+            },
+        },
+        defaultVariants: {size: "default"},
+    },
+);
+
+function Dialog({...props}: DialogPrimitive.Root.Props) {
+    return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({...props}: DialogPrimitive.Trigger.Props) {
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({...props}: DialogPrimitive.Portal.Props) {
+    return <DialogPrimitive.Portal container={usePortalContainer()} data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({...props}: DialogPrimitive.Close.Props) {
+    return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({className, ...props}: DialogPrimitive.Backdrop.Props) {
+    return <DialogPrimitive.Backdrop data-slot="dialog-overlay" className={cn(backdrop, className)} {...props} />;
+}
+
+function DialogContent({
+    className,
+    children,
+    size = "default",
+    showCloseButton = true,
+    ...props
+}: DialogPrimitive.Popup.Props &
+    VariantProps<typeof dialogContentVariants> & {
+        showCloseButton?: boolean;
+    }) {
+    return (
+        <DialogPortal>
+            <DialogOverlay />
+            <DialogPrimitive.Popup
+                data-slot="dialog-content"
+                data-size={size}
+                data-close-button={showCloseButton || undefined}
+                className={cn(dialogContentVariants({size}), className)}
+                {...props}
+            >
+                {children}
+                {showCloseButton && (
+                    <DialogPrimitive.Close
+                        data-slot="dialog-close"
+                        render={<Button variant="ghost" className="absolute top-2.5 right-2.5" size="icon-sm" />}
+                    >
+                        <XIcon />
+                        <span className="sr-only">Close</span>
+                    </DialogPrimitive.Close>
+                )}
+            </DialogPrimitive.Popup>
+        </DialogPortal>
+    );
+}
+
+function DialogHeader({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="dialog-header"
+            className={cn("flex flex-col gap-2 group-data-close-button/dialog-content:pr-8", className)}
+            {...props}
+        />
+    );
+}
+
+function DialogBody({className, ...props}: React.ComponentProps<"div">) {
+    return <div data-slot="dialog-body" className={cn("flex min-w-0 flex-col gap-4", className)} {...props} />;
+}
+
+function DialogFooter({
+    className,
+    showCloseButton = false,
+    children,
+    ...props
+}: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}) {
+    return (
+        <div
+            data-slot="dialog-footer"
+            className={cn(
+                "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            {showCloseButton && (
+                <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
+            )}
+        </div>
+    );
+}
+
+function DialogTitle({className, ...props}: DialogPrimitive.Title.Props) {
+    return (
+        <DialogPrimitive.Title
+            data-slot="dialog-title"
+            className={cn(heading, "text-base leading-none", className)}
+            {...props}
+        />
+    );
+}
+
+function DialogDescription({className, ...props}: DialogPrimitive.Description.Props) {
+    return (
+        <DialogPrimitive.Description
+            data-slot="dialog-description"
+            className={cn(
+                "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Dialog,
+    DialogBody,
+    DialogClose,
+    DialogContent,
+    dialogContentVariants,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogOverlay,
+    DialogPortal,
+    DialogTitle,
+    DialogTrigger,
+};

package/src/components/direction.tsx

@@ -0,0 +1,3 @@
+"use client";
+
+export {DirectionProvider, useDirection} from "@base-ui/react/direction-provider";