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

package/src/components/command.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@repraze/kernelkit/components/dialog";
+import {fieldSurface, listSeparator} from "@repraze/kernelkit/lib/recipes";
+import {Command as CommandPrimitive} from "cmdk";
+import {cn} from "cn";
+import {CheckIcon, SearchIcon} from "lucide-react";
+import * as React from "react";
+
+/**
+ * cmdk renders `data-selected` / `data-disabled` as "true" | "false", so the `listItem` recipe (which keys on
+ * attribute presence) can't be used as is: this is the same row, keyed on `=true`.
+ */
+const commandItemClass =
+    "group/command-item relative flex min-h-8 cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[selected=true]:[&_svg:not([class*='text-'])]:text-accent-foreground";
+
+function Command({className, ...props}: React.ComponentProps<typeof CommandPrimitive>) {
+    return (
+        <CommandPrimitive
+            data-slot="command"
+            className={cn(
+                "flex size-full flex-col overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground",
+                // inside CommandDialog the dialog is the surface
+                "in-data-[slot=dialog-content]:rounded-none in-data-[slot=dialog-content]:border-0",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandDialog({
+    title = "Command palette",
+    description = "Search for a command to run…",
+    children,
+    className,
+    showCloseButton = false,
+    initialFocus,
+    finalFocus,
+    ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> &
+    Pick<React.ComponentProps<typeof DialogContent>, "initialFocus" | "finalFocus"> & {
+        title?: string;
+        description?: string;
+        className?: string;
+        showCloseButton?: boolean;
+        children: React.ReactNode;
+    }) {
+    return (
+        <Dialog {...props}>
+            <DialogContent
+                data-slot="command-dialog"
+                className={cn("top-1/4 translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-lg", className)}
+                showCloseButton={showCloseButton}
+                // where focus goes on open/close (e.g. the search input)
+                initialFocus={initialFocus}
+                finalFocus={finalFocus}
+            >
+                <DialogHeader className="sr-only">
+                    <DialogTitle>{title}</DialogTitle>
+                    <DialogDescription>{description}</DialogDescription>
+                </DialogHeader>
+                {children}
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+function CommandInput({className, ...props}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+    return (
+        <div
+            data-slot="command-input-wrapper"
+            className={cn(
+                fieldSurface,
+                "mb-1 flex h-8 shrink-0 items-center gap-2 px-2.5 focus-within:border-ring has-disabled:opacity-50",
+                "in-data-[slot=dialog-content]:h-9",
+            )}
+        >
+            <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+            <CommandPrimitive.Input
+                data-slot="command-input"
+                className={cn(
+                    "h-full w-full min-w-0 bg-transparent text-base outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm",
+                    className,
+                )}
+                {...props}
+            />
+        </div>
+    );
+}
+
+function CommandList({className, ...props}: React.ComponentProps<typeof CommandPrimitive.List>) {
+    return (
+        <CommandPrimitive.List
+            data-slot="command-list"
+            className={cn(
+                "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandEmpty({className, ...props}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+    return (
+        <CommandPrimitive.Empty
+            data-slot="command-empty"
+            className={cn("py-6 text-center text-sm text-muted-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function CommandGroup({className, ...props}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+    return (
+        <CommandPrimitive.Group
+            data-slot="command-group"
+            className={cn(
+                // group heading = the `listLabel` recipe
+                "overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandSeparator({className, ...props}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+    return (
+        <CommandPrimitive.Separator data-slot="command-separator" className={cn(listSeparator, className)} {...props} />
+    );
+}
+
+function CommandItem({className, children, ...props}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+    return (
+        <CommandPrimitive.Item data-slot="command-item" className={cn(commandItemClass, className)} {...props}>
+            {children}
+            <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+        </CommandPrimitive.Item>
+    );
+}
+
+function CommandShortcut({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="command-shortcut"
+            className={cn(
+                "ml-auto pl-4 font-mono text-xs text-muted-foreground group-data-[selected=true]/command-item:text-accent-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Command,
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    commandItemClass,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+};

package/src/components/context-menu.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import {ContextMenu as ContextMenuPrimitive} from "@base-ui/react/context-menu";
+import {
+    menuContentClass,
+    menuIndicatorClass,
+    type MenuItemVariant,
+    menuItemVariants,
+    menuShortcutClass,
+    resolveItemVariant,
+} from "@repraze/kernelkit/components/dropdown-menu";
+import {listLabel, listSeparator} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+import {CheckIcon, ChevronRightIcon} from "lucide-react";
+import * as React from "react";
+
+function ContextMenu({...props}: ContextMenuPrimitive.Root.Props) {
+    return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuPortal({...props}: ContextMenuPrimitive.Portal.Props) {
+    return <ContextMenuPrimitive.Portal container={usePortalContainer()} data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuTrigger({className, ...props}: ContextMenuPrimitive.Trigger.Props) {
+    return (
+        <ContextMenuPrimitive.Trigger
+            data-slot="context-menu-trigger"
+            className={cn("select-none", className)}
+            {...props}
+        />
+    );
+}
+
+function ContextMenuContent({
+    className,
+    align = "start",
+    alignOffset = 4,
+    side = "right",
+    sideOffset = 0,
+    ...props
+}: ContextMenuPrimitive.Popup.Props &
+    Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+    return (
+        <ContextMenuPrimitive.Portal container={usePortalContainer()}>
+            <ContextMenuPrimitive.Positioner
+                className="isolate z-50 outline-none"
+                align={align}
+                alignOffset={alignOffset}
+                side={side}
+                sideOffset={sideOffset}
+            >
+                <ContextMenuPrimitive.Popup
+                    data-slot="context-menu-content"
+                    className={cn(menuContentClass, "min-w-44", className)}
+                    {...props}
+                />
+            </ContextMenuPrimitive.Positioner>
+        </ContextMenuPrimitive.Portal>
+    );
+}
+
+function ContextMenuGroup({...props}: ContextMenuPrimitive.Group.Props) {
+    return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+/** Plain caption: works inside or outside a `ContextMenuGroup`. */
+function ContextMenuLabel({
+    className,
+    inset,
+    ...props
+}: React.ComponentProps<"div"> & {
+    inset?: boolean;
+}) {
+    return (
+        <div
+            data-slot="context-menu-label"
+            data-inset={inset}
+            className={cn(listLabel, "data-inset:pl-8", className)}
+            {...props}
+        />
+    );
+}
+
+function ContextMenuItem({
+    className,
+    inset,
+    variant = "default",
+    ...props
+}: ContextMenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: MenuItemVariant;
+}) {
+    const v = resolveItemVariant(variant);
+    return (
+        <ContextMenuPrimitive.Item
+            data-slot="context-menu-item"
+            data-inset={inset}
+            data-variant={v}
+            className={cn(menuItemVariants({variant: v}), className)}
+            {...props}
+        />
+    );
+}
+
+function ContextMenuSub({...props}: ContextMenuPrimitive.SubmenuRoot.Props) {
+    return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+    className,
+    inset,
+    children,
+    ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <ContextMenuPrimitive.SubmenuTrigger
+            data-slot="context-menu-sub-trigger"
+            data-inset={inset}
+            className={cn(
+                menuItemVariants(),
+                "data-popup-open:bg-accent data-popup-open:text-accent-foreground",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronRightIcon className="ml-auto" />
+        </ContextMenuPrimitive.SubmenuTrigger>
+    );
+}
+
+function ContextMenuSubContent({
+    alignOffset = -5,
+    sideOffset = 0,
+    ...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+    return (
+        <ContextMenuContent
+            data-slot="context-menu-sub-content"
+            side="right"
+            alignOffset={alignOffset}
+            sideOffset={sideOffset}
+            {...props}
+        />
+    );
+}
+
+function ContextMenuCheckboxItem({
+    className,
+    children,
+    checked,
+    inset,
+    ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <ContextMenuPrimitive.CheckboxItem
+            data-slot="context-menu-checkbox-item"
+            data-inset={inset}
+            className={cn(menuItemVariants(), "pr-8", className)}
+            checked={checked}
+            {...props}
+        >
+            <span className={menuIndicatorClass} data-slot="context-menu-checkbox-item-indicator">
+                <ContextMenuPrimitive.CheckboxItemIndicator>
+                    <CheckIcon />
+                </ContextMenuPrimitive.CheckboxItemIndicator>
+            </span>
+            {children}
+        </ContextMenuPrimitive.CheckboxItem>
+    );
+}
+
+function ContextMenuRadioGroup({...props}: ContextMenuPrimitive.RadioGroup.Props) {
+    return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuRadioItem({
+    className,
+    children,
+    inset,
+    ...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+}) {
+    return (
+        <ContextMenuPrimitive.RadioItem
+            data-slot="context-menu-radio-item"
+            data-inset={inset}
+            className={cn(menuItemVariants(), "pr-8", className)}
+            {...props}
+        >
+            <span className={menuIndicatorClass} data-slot="context-menu-radio-item-indicator">
+                <ContextMenuPrimitive.RadioItemIndicator>
+                    <CheckIcon />
+                </ContextMenuPrimitive.RadioItemIndicator>
+            </span>
+            {children}
+        </ContextMenuPrimitive.RadioItem>
+    );
+}
+
+function ContextMenuSeparator({className, ...props}: ContextMenuPrimitive.Separator.Props) {
+    return (
+        <ContextMenuPrimitive.Separator
+            data-slot="context-menu-separator"
+            className={cn(listSeparator, className)}
+            {...props}
+        />
+    );
+}
+
+function ContextMenuShortcut({className, ...props}: React.ComponentProps<"span">) {
+    return <span data-slot="context-menu-shortcut" className={cn(menuShortcutClass, className)} {...props} />;
+}
+
+export {
+    ContextMenu,
+    ContextMenuCheckboxItem,
+    ContextMenuContent,
+    ContextMenuGroup,
+    ContextMenuItem,
+    ContextMenuLabel,
+    ContextMenuPortal,
+    ContextMenuRadioGroup,
+    ContextMenuRadioItem,
+    ContextMenuSeparator,
+    ContextMenuShortcut,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+};

package/src/components/copy-button.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import {Button, type ButtonProps} from "@repraze/kernelkit/components/button";
+import {cn} from "cn";
+import {CheckIcon, CopyIcon} from "lucide-react";
+import * as React from "react";
+
+interface CopyButtonProps extends Omit<ButtonProps, "value" | "onCopy"> {
+    /** Text to copy, or a function returning it (read at click time). */
+    value: string | (() => string);
+    /** Called after a successful copy. */
+    onCopy?: (value: string) => void;
+    /** How long the check mark shows, in ms. */
+    timeout?: number;
+    /** Accessible name before / after copying. */
+    label?: string;
+    copiedLabel?: string;
+}
+
+/**
+ * Copies `value` to the clipboard and shows a check for `timeout` ms. Icon-only by default (ghost,
+ * `size="icon"`; `"default"` when it has children); pass children for a labelled button, e.g. `<CopyButton size="sm">Copy</CopyButton>`.
+ */
+function CopyButton({
+    value,
+    onCopy,
+    timeout = 2000,
+    label = "Copy to clipboard",
+    copiedLabel = "Copied",
+    variant = "ghost",
+    size,
+    className,
+    children,
+    onClick,
+    ...props
+}: CopyButtonProps) {
+    const [copied, setCopied] = React.useState(false);
+    const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+
+    const copy: ButtonProps["onClick"] = async (event) => {
+        onClick?.(event);
+        const text = typeof value === "function" ? value() : value;
+        try {
+            await navigator.clipboard.writeText(text);
+        } catch {
+            return;
+        }
+        setCopied(true);
+        onCopy?.(text);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), timeout);
+    };
+
+    const Icon = copied ? CheckIcon : CopyIcon;
+    const iconOnly = children === undefined;
+
+    return (
+        <Button
+            data-slot="copy-button"
+            data-copied={copied || undefined}
+            variant={variant}
+            size={size ?? (iconOnly ? "icon" : "default")}
+            aria-label={iconOnly ? (copied ? copiedLabel : label) : undefined}
+            className={cn("data-copied:[&_svg]:text-success", className)}
+            onClick={copy}
+            {...props}
+        >
+            <Icon data-icon={iconOnly ? undefined : "inline-start"} />
+            {children}
+            <span className="sr-only" aria-live="polite">
+                {copied ? copiedLabel : ""}
+            </span>
+        </Button>
+    );
+}
+
+export {CopyButton};
+export type {CopyButtonProps};

package/src/components/data-table/data-table-utils.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import {useEffect, useMemo, useRef, useState} from "react";
+
+import type {DataTableView, DataTableViewColumn} from "./views/data-table-view";
+
+// default row height: p-2 (16) + text-sm line-height (20) + 1px border = 37px, matching <Table /> rows
+const DEFAULT_ROW_HEIGHT = 37;
+const ROW_VERTICAL_PADDING = 16; // p-2 top + bottom
+const ROW_BORDER = 1;
+
+export function getTotalColumnWidth<T>(columns: DataTableViewColumn<T>[]): number {
+    return columns.reduce((w, c) => w + c.width, 0);
+}
+
+// the body uses an overlay scrollbar (ScrollArea) that consumes no width, so no scrollbar gap to add
+export function getInnerTableWidth<T>(columns: DataTableViewColumn<T>[], containerWidth?: number): number {
+    const columnsWidth = getTotalColumnWidth(columns);
+    return Math.max(columnsWidth, containerWidth || 0);
+}
+
+export type DataTableSizingProps<T> = {
+    columns: DataTableViewColumn<T>[];
+    innerRowHeight?: number;
+};
+
+export type DataTableSizing = {
+    ref: React.RefObject<HTMLDivElement | null>;
+    width?: number;
+    height?: number;
+    inited: boolean;
+    innerWidth: number;
+    rowHeight: number;
+};
+
+export function useDataTableSizing<T>({columns, innerRowHeight}: DataTableSizingProps<T>): DataTableSizing {
+    const ref = useRef<HTMLDivElement>(null);
+
+    const [size, setSize] = useState<{width?: number; height?: number}>({});
+
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry) {
+                const {width, height} = entry.contentRect;
+                setSize((prev) => (prev.width === width && prev.height === height ? prev : {width, height}));
+            }
+        });
+        observer.observe(element);
+
+        // initial measure
+        const rect = element.getBoundingClientRect();
+        setSize({width: rect.width, height: rect.height});
+
+        return () => observer.disconnect();
+    }, []);
+
+    return useMemo(() => {
+        return {
+            ref,
+            width: size.width,
+            height: size.height,
+            inited: size.width !== undefined,
+            innerWidth: getInnerTableWidth(columns, size.width),
+            rowHeight:
+                innerRowHeight !== undefined ? ROW_VERTICAL_PADDING + innerRowHeight + ROW_BORDER : DEFAULT_ROW_HEIGHT,
+        };
+    }, [columns, size.width, size.height, innerRowHeight]);
+}
+
+export function viewToCsv<T>(view: DataTableView<T>) {
+    const columns = view.getColumns();
+    const data = view.getData();
+
+    const rows: string[][] = [];
+    const cells: string[] = [];
+    function addCell(s: any) {
+        if (typeof s === "string") {
+            if (s.includes('"') || s.includes(",")) {
+                cells.push(`"${s.replace(/"/g, '""')}"`);
+            } else {
+                cells.push(s);
+            }
+        } else {
+            cells.push(s.toString());
+        }
+    }
+    function commitRow() {
+        const row = cells.splice(0, cells.length);
+        rows.push(row);
+    }
+
+    // fill table
+    if (columns.length > 0) {
+        columns.forEach((c) => {
+            addCell(c.id);
+        });
+        commitRow();
+
+        data.forEach((d) => {
+            columns.forEach((c) => {
+                addCell(c.rawCell(d));
+            });
+            commitRow();
+        });
+    }
+
+    // convert to csv string
+    const out = rows.reduce((out, row) => {
+        const rowLen = row.length;
+        return `${
+            out +
+            row.reduce((out, cell, i) => {
+                return out + cell + (i < rowLen - 1 ? "," : "");
+            }, "")
+        }\n`;
+    }, "");
+
+    return out;
+}

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

@@ -0,0 +1,78 @@
+"use client";
+
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import type {CSSProperties, HTMLAttributes, ReactNode} from "react";
+import {createContext, useContext, useMemo} from "react";
+
+// `striped` is provided via context (not the group) so it can be applied as a plain background class on
+// each row. That lets a per-row override (e.g. a data-driven highlight passed through DataTablePropView)
+// win via tailwind-merge instead of losing to the higher-specificity group selector.
+const DataTableContext = createContext<{striped?: boolean}>({});
+
+export function useDataTableContext() {
+    return useContext(DataTableContext);
+}
+
+/** The frame. Same flags as `<Table>`: `bordered`, `striped`, `hoverable` (default on), `dividers`. */
+export const dataTableVariants = cva(
+    "group/data-table relative flex max-w-full flex-col overflow-x-auto overflow-y-hidden text-sm data-expand:min-w-full",
+    {
+        variants: {
+            bordered: {
+                true: "rounded-lg border border-border",
+                false: "",
+            },
+        },
+        defaultVariants: {bordered: false},
+    },
+);
+
+export type DataTableProps = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    /** Stretch to the container width (min-w-full). */
+    expand?: boolean;
+    /** Zebra-stripe odd rows. */
+    striped?: boolean;
+    /** Row hover wash (on by default). */
+    hoverable?: boolean;
+    /** Rounded border frame (matches the bordered `<Table>`). */
+    bordered?: boolean;
+    /** Vertical separators between columns. */
+    dividers?: boolean;
+    children?: ReactNode;
+};
+
+export function DataTable({
+    className,
+    expand,
+    striped,
+    hoverable = true,
+    bordered,
+    dividers,
+    style,
+    children,
+    ...props
+}: DataTableProps) {
+    const mergedStyle: CSSProperties = {height: 250, ...style};
+
+    const context = useMemo(() => ({striped}), [striped]);
+
+    return (
+        <DataTableContext.Provider value={context}>
+            <div
+                data-slot="data-table"
+                data-expand={expand || undefined}
+                data-hoverable={hoverable || undefined}
+                data-bordered={bordered || undefined}
+                data-striped={striped || undefined}
+                data-dividers={dividers || undefined}
+                className={cn(dataTableVariants({bordered: !!bordered}), className)}
+                style={mergedStyle}
+                {...props}
+            >
+                {children}
+            </div>
+        </DataTableContext.Provider>
+    );
+}