@rebasepro/ui 0.6.1 → 0.8.0

package/dist/views/TableView.d.ts

@@ -0,0 +1,6 @@
+export { VirtualTable as TableView } from "../components/VirtualTable/VirtualTable";
+export type { VirtualTableProps as TableViewProps } from "../components/VirtualTable/VirtualTableProps";
+export type OnColumnResizeParams = {
+    width: number;
+    key: string;
+};

package/dist/views/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./ListView";
+export * from "./CardView";
+export * from "./KanbanView";
+export * from "./TableView";
+export * from "./CollectionView";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"

package/src/components/Sheet.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { usePortalContainer } from "../hooks/PortalContainerContext";
+import { usePortalContainer, PortalContainerProvider } from "../hooks/PortalContainerContext";
 
 interface SheetProps {
     children: React.ReactNode;
@@ -45,6 +45,7 @@ export const Sheet: React.FC<SheetProps> = ({
     ...props
 }) => {
     const [displayed, setDisplayed] = useState(false);
+    const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);
 
     // Get the portal container from context
     const contextContainer = usePortalContainer();
@@ -90,7 +91,8 @@ export const Sheet: React.FC<SheetProps> = ({
                 />}
                 <DialogPrimitive.Content
                     {...props}
-                    onFocusCapture={(event) => event.preventDefault()}
+                    ref={setContentEl}
+                    onOpenAutoFocus={(event) => event.preventDefault()}
                     onPointerDownOutside={onPointerDownOutside}
                     onInteractOutside={onInteractOutside}
                     className={cls(
@@ -112,10 +114,12 @@ export const Sheet: React.FC<SheetProps> = ({
                     )}
                     style={style}
                 >
-                    <DialogPrimitive.Title autoFocus tabIndex={0} className="sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0">
+                    <DialogPrimitive.Title className="sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0">
                         {title ?? "Sheet"}
                     </DialogPrimitive.Title>
-                    {children}
+                    <PortalContainerProvider container={contentEl}>
+                        {children}
+                    </PortalContainerProvider>
                 </DialogPrimitive.Content>
             </DialogPrimitive.Portal>
         </DialogPrimitive.Root>

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { cls } from "../../../util";
+import { focusedDisabled } from "../../../styles";
+import { DateTimeField } from "../../DateTimeField";
+
+export function VirtualTableDateField(props: {
+    name?: string;
+    error?: Error;
+    mode?: "date" | "date_time";
+    timezone?: string;
+    internalValue: Date | undefined | null;
+    updateValue: (newValue: (Date | null)) => void;
+    focused: boolean;
+    disabled: boolean;
+    locale?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+    const { disabled, error, mode, timezone, internalValue, updateValue, locale } = props;
+
+    return (
+        <DateTimeField
+            value={internalValue ?? undefined}
+            onChange={(dateValue) => updateValue(dateValue ?? null)}
+            invisible={true}
+            inputClassName={cls("w-full h-full", focusedDisabled)}
+            className={cls("w-full h-full", focusedDisabled)}
+            mode={mode}
+            timezone={timezone}
+            locale={locale}
+        />
+    );
+}

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback";
+import { focusedDisabled } from "../../../styles";
+import { TextareaAutosize } from "../../TextareaAutosize";
+
+export function VirtualTableInput(props: {
+    error?: Error;
+    value: string;
+    multiline?: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (string | null)) => void;
+    onBlur?: () => void;
+}) {
+    const ref = React.useRef<HTMLTextAreaElement>(null);
+    const { disabled, value, multiline = false, updateValue, focused } = props;
+    const prevValue = useRef<string | null>(value);
+    const [internalValue, setInternalValue] = useState<typeof value>(value);
+    const focusedState = useRef<boolean>(false);
+
+    useEffect(() => {
+        if (prevValue.current !== value && value !== internalValue)
+            setInternalValue(value);
+        prevValue.current = value;
+    }, [value]);
+
+    const doUpdate = React.useCallback(() => {
+        const emptyInitialValue = !value;
+        if (emptyInitialValue && !internalValue) return;
+        if (internalValue !== value && internalValue !== prevValue.current) {
+            prevValue.current = internalValue;
+            updateValue(internalValue);
+        }
+    }, [internalValue, updateValue, value]);
+
+    useDebouncedCallback(internalValue, doUpdate, !focused, 400);
+
+    useEffect(() => {
+        if (ref.current && focused && !focusedState.current) {
+            focusedState.current = true;
+            ref.current.focus({ preventScroll: true });
+            ref.current.selectionStart = ref.current.value.length;
+            ref.current.selectionEnd = ref.current.value.length;
+        } else {
+            focusedState.current = focused;
+        }
+    }, [focused, ref]);
+
+    return (
+        <TextareaAutosize
+            className={focusedDisabled}
+            ref={ref}
+            style={{
+                padding: 0,
+                margin: 0,
+                width: "100%",
+                color: "unset",
+                fontWeight: "unset",
+                fontSize: "unset",
+                fontFamily: "unset",
+                background: "unset",
+                border: "unset",
+                resize: "none",
+                outline: "none"
+            }}
+            value={internalValue ?? ""}
+            onChange={(evt) => {
+                const newValue = evt.target.value as string;
+                if (multiline || !newValue.endsWith("\n"))
+                    setInternalValue(newValue);
+            }}
+            onFocus={() => {
+                focusedState.current = true;
+            }}
+            onBlur={() => {
+                focusedState.current = false;
+                doUpdate();
+                if (props.onBlur) props.onBlur();
+            }}
+        />
+    );
+}

package/src/components/VirtualTable/fields/VirtualTableNumberInput.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "../../../hooks/useDebouncedCallback";
+import { cls } from "../../../util";
+import { focusedDisabled } from "../../../styles";
+import { TextField } from "../../TextField";
+
+export function VirtualTableNumberInput(props: {
+    error?: Error;
+    value: number;
+    align?: "right" | "left" | "center";
+    updateValue: (newValue: (number | null)) => void;
+    focused: boolean;
+    disabled: boolean;
+}) {
+    const { align = "left", value, updateValue, focused } = props;
+    const propStringValue = (value && typeof value === "number") ? value.toString() : "";
+    const [internalValue, setInternalValue] = useState<string | null>(propStringValue);
+    const prevValue = useRef<number | null>(value);
+
+    useEffect(() => {
+        if (prevValue.current !== value && String(value) !== internalValue)
+            setInternalValue(value ? value.toString() : null);
+        prevValue.current = value;
+    }, [value]);
+
+    const doUpdate = React.useCallback(() => {
+        if (internalValue !== propStringValue) {
+            if (internalValue !== undefined && internalValue !== null) {
+                const numberValue = parseFloat(internalValue);
+                if (isNaN(numberValue)) return;
+                updateValue(numberValue);
+            } else {
+                updateValue(null);
+            }
+        }
+    }, [internalValue, value]);
+
+    useDebouncedCallback(internalValue, doUpdate, !focused, 400);
+
+    useEffect(() => {
+        if (!focused && propStringValue !== internalValue)
+            setInternalValue(value !== undefined && value !== null ? value.toString() : null);
+    }, [value, focused]);
+
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (inputRef.current && focused) {
+            inputRef.current.focus({ preventScroll: true });
+        }
+    }, [focused, inputRef]);
+
+    const regexp = /^-?[0-9]+[,.]?[0-9]*$/;
+
+    return (
+        <TextField
+            inputRef={inputRef}
+            invisible={true}
+            size="small"
+            className="w-full"
+            inputClassName={cls("p-0 m-0 bg-transparent border-none outline-hidden font-normal leading-normal text-unset", focusedDisabled)}
+            inputStyle={{ textAlign: align }}
+            value={internalValue ?? ""}
+            onChange={(evt) => {
+                const newValue = evt.target.value.replace(",", ".");
+                if (newValue.length === 0) setInternalValue(null);
+                if (regexp.test(newValue) || newValue.startsWith("-")) setInternalValue(newValue);
+            }}
+        />
+    );
+}

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -0,0 +1,107 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { Select, SelectItem } from "../../Select";
+import { MultiSelect, MultiSelectItem } from "../../MultiSelect";
+import { Chip } from "../../Chip";
+
+export interface VirtualTableSelectOption {
+    value: string | number;
+    label: string;
+    color?: string;
+}
+
+export function VirtualTableSelect(props: {
+    options: VirtualTableSelectOption[];
+    error?: Error;
+    multiple?: boolean;
+    disabled: boolean;
+    small?: boolean;
+    value: string | number | string[] | number[] | undefined;
+    updateValue: (newValue: (string | number | string[] | number[] | null)) => void;
+    focused: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+    const { options, value, disabled, small = false, focused, updateValue, multiple = false } = props;
+    const validValue = (Array.isArray(value) && multiple) || (!Array.isArray(value) && !multiple);
+    const ref = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current?.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const onChange = useCallback((updatedValue: string | string[]) => {
+        if (multiple) {
+            const isNumber = options.some(o => typeof o.value === "number");
+            const newValue = (updatedValue as string[]).map((v) => {
+                const opt = options.find(o => String(o.value) === v);
+                return typeof opt?.value === "number" ? parseFloat(v) : v;
+            });
+            if (isNumber) {
+                updateValue(newValue as number[]);
+            } else {
+                updateValue(newValue as string[]);
+            }
+        } else {
+            const opt = options.find(o => String(o.value) === updatedValue);
+            updateValue(typeof opt?.value === "number" ? parseFloat(updatedValue as string) : (updatedValue as string || null));
+        }
+    }, [multiple, updateValue, options]);
+
+    const renderValue = (val?: string | number) => {
+        const option = options.find(o => o.value === val);
+        return (
+            <Chip size={small ? "small" : "medium"}>
+                {option ? option.label : String(val)}
+            </Chip>
+        );
+    };
+
+    const handleOpenChange = useCallback((open: boolean) => {
+        if (!open && ref.current) {
+            setTimeout(() => {
+                ref.current?.focus({ preventScroll: true });
+            }, 0);
+        }
+    }, []);
+
+    return multiple ? (
+        <MultiSelect
+            inputRef={ref}
+            className="w-full h-full p-0 bg-transparent outline-none"
+            position={"item-aligned"}
+            disabled={disabled}
+            includeClear={false}
+            useChips={false}
+            value={validValue ? (value as (string | number)[]).map(v => String(v)) : []}
+            onValueChange={onChange}
+            onOpenChange={handleOpenChange}
+        >
+            {options.map((opt) => (
+                <MultiSelectItem key={String(opt.value)} value={String(opt.value)}>
+                    <Chip size={small ? "small" : "medium"}>{opt.label}</Chip>
+                </MultiSelectItem>
+            ))}
+        </MultiSelect>
+    ) : (
+        <Select
+            inputRef={ref}
+            fullWidth
+            className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
+            inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
+            position={"item-aligned"}
+            disabled={disabled}
+            padding={false}
+            value={validValue ? String(value) : ""}
+            onValueChange={onChange}
+            onOpenChange={handleOpenChange}
+            renderValue={renderValue}
+        >
+            {options.map((opt) => (
+                <SelectItem key={String(opt.value)} value={String(opt.value)}>
+                    <Chip size={small ? "small" : "medium"}>{opt.label}</Chip>
+                </SelectItem>
+            ))}
+        </Select>
+    );
+}

package/src/components/VirtualTable/fields/VirtualTableSwitch.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from "react";
+import { BooleanSwitch } from "../../BooleanSwitch";
+
+export function VirtualTableSwitch(props: {
+    error?: Error;
+    internalValue?: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (boolean | null)) => void;
+}) {
+    const { internalValue, updateValue, focused } = props;
+    const ref = React.useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    return (
+        <BooleanSwitch
+            ref={ref}
+            size={"small"}
+            value={Boolean(internalValue)}
+            onValueChange={updateValue}
+        />
+    );
+}

package/src/components/VirtualTable/index.tsx

@@ -1,3 +1,10 @@
 export { VirtualTable } from "./VirtualTable";
 export * from "./VirtualTableProps";
 export type { FilterFormFieldProps } from "./VirtualTableHeader";
+export * from "./selection/SelectionStore";
+export * from "./selection/SelectionContext";
+export * from "./fields/VirtualTableInput";
+export * from "./fields/VirtualTableNumberInput";
+export * from "./fields/VirtualTableSwitch";
+export * from "./fields/VirtualTableDateField";
+export * from "./fields/VirtualTableSelect";

package/src/components/VirtualTable/selection/SelectionContext.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useContext } from "react";
+import { VirtualTableSelectionStore, SelectedCell } from "./SelectionStore";
+
+export interface VirtualTableSelectionContextProps<T extends SelectedCell = SelectedCell> {
+    selectionStore: VirtualTableSelectionStore<T>;
+    select: (cell: T | undefined) => void;
+}
+
+const SelectionContext = createContext<VirtualTableSelectionContextProps<any> | null>(null);
+
+export const VirtualTableSelectionProvider = <T extends SelectedCell = SelectedCell>({
+    store,
+    children
+}: {
+    store: VirtualTableSelectionStore<T>;
+    children: React.ReactNode;
+}) => {
+    const value = React.useMemo(() => ({
+        selectionStore: store,
+        select: store.select
+    }), [store]);
+
+    return (
+        <SelectionContext.Provider value={value}>
+            {children}
+        </SelectionContext.Provider>
+    );
+};
+
+export const useVirtualTableSelection = <T extends SelectedCell = SelectedCell>() => {
+    const context = useContext(SelectionContext);
+    if (!context) {
+        throw new Error("useVirtualTableSelection must be used within a VirtualTableSelectionProvider");
+    }
+    return context as VirtualTableSelectionContextProps<T>;
+};

package/src/components/VirtualTable/selection/SelectionStore.ts

@@ -0,0 +1,54 @@
+import { useSyncExternalStore, useCallback, useRef } from "react";
+
+export interface SelectedCell {
+    columnKey: string;
+    rowId: string | number;
+    cellRect?: DOMRect;
+    width?: number;
+    height?: number;
+}
+
+export function createVirtualTableSelectionStore<T extends SelectedCell = SelectedCell>() {
+    let selectedCell: T | undefined = undefined;
+    const listeners = new Set<() => void>();
+
+    function getSnapshot(): T | undefined {
+        return selectedCell;
+    }
+
+    function subscribe(listener: () => void): () => void {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    }
+
+    function select(cell: T | undefined) {
+        selectedCell = cell;
+        listeners.forEach(l => l());
+    }
+
+    return {
+        getSnapshot,
+        subscribe,
+        select
+    };
+}
+
+export type VirtualTableSelectionStore<T extends SelectedCell = SelectedCell> = ReturnType<typeof createVirtualTableSelectionStore<T>>;
+
+export function useVirtualTableCellSelected<T extends SelectedCell = SelectedCell>(
+    store: VirtualTableSelectionStore<T>,
+    columnKey: string,
+    rowId: string | number
+): boolean {
+    const selectorRef = useRef({ columnKey, rowId });
+    selectorRef.current = { columnKey, rowId };
+
+    const getSnapshot = useCallback(() => {
+        const cell = store.getSnapshot();
+        if (!cell) return false;
+        const s = selectorRef.current;
+        return cell.columnKey === s.columnKey && cell.rowId === s.rowId;
+    }, [store]);
+
+    return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}

package/src/icons/index.ts

@@ -74,7 +74,9 @@ export {
     LanguagesIcon,
     LayoutGridIcon,
     LinkIcon,
+    Link2Icon,
     ListIcon,
+    LockIcon,
     ListOrderedIcon,
     LoaderIcon,
     LogOutIcon,
@@ -121,6 +123,7 @@ export {
     UploadIcon,
     UserCheckIcon,
     UserIcon,
+    UserPlus,
     VideoIcon,
     VoteIcon,
     Wand2Icon,

package/src/index.ts

@@ -1,5 +1,45 @@
+// =============================================================================
+// Components
+// =============================================================================
 export * from "./components";
-export * from "./styles";
-export * from "./util";
+
+// =============================================================================
+// Views
+// =============================================================================
+export * from "./views";
+
+// =============================================================================
+// Icons
+// =============================================================================
 export * from "./icons";
-export * from "./hooks";
+
+// =============================================================================
+// Design System Utilities
+// =============================================================================
+export * from "./styles";
+export { cls } from "./util/cls";
+export { CHIP_COLORS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
+
+// =============================================================================
+// Public Hooks
+// =============================================================================
+export { useOutsideAlerter } from "./hooks/useOutsideAlerter";
+export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
+export { useDebounceCallback } from "./hooks/useDebounceCallback";
+export { useDebounceValue } from "./hooks/useDebounceValue";
+export { useInjectStyles } from "./hooks/useInjectStyles";
+export { PortalContainerProvider, usePortalContainer } from "./hooks/PortalContainerContext";
+export type { PortalContainerContextType, PortalContainerProviderProps } from "./hooks/PortalContainerContext";
+
+// =============================================================================
+// Lower-level utilities (used by framework packages)
+// =============================================================================
+export { debounce } from "./util/debounce";
+export type { Cancelable } from "./util/debounce";
+
+// =============================================================================
+// NOT exported (internal plumbing — import directly if needed):
+//
+//   ./util/hash                   – hashString
+//   ./util/key_to_icon_component  – keyToIconComponent
+// =============================================================================

package/src/styles.ts

@@ -5,7 +5,7 @@ export const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
 export const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
 export const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
 export const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
-export const defaultBorderMixin = "border-surface-200 dark:border-surface-700 ";
+export const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
 export const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
 export const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
 export const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";