@rebasepro/ui 0.17.3 → 0.18.0

package/src/util/hash.ts

@@ -1,11 +0,0 @@
-export function hashString(str: string): number {
-    let hash = 0;
-    let i;
-    let chr;
-    for (i = 0; i < str.length; i++) {
-        chr = str.charCodeAt(i);
-        hash = ((hash << 5) - hash) + chr;
-        hash |= 0; // Convert to 32bit integer
-    }
-    return Math.abs(hash);
-}

package/src/util/index.ts

@@ -1,4 +0,0 @@
-export * from "./cls";
-export * from "./debounce";
-export * from "./chip_colors";
-export * from "./key_to_icon_component";

package/src/util/key_to_icon_component.ts

@@ -1,11 +0,0 @@
-export function keyToIconComponent(key: string) {
-    const startsWithNumber = key.match(/^\d/);
-
-    // convert key to came case
-    const componentName = (startsWithNumber ? "_" : "") +
-        key.split("_").map((word: string) => {
-            return word.charAt(0).toUpperCase() + word.slice(1);
-        }).join("") +
-        "Icon";
-    return componentName;
-}

package/src/util/lazy_chunk.ts

@@ -1,101 +0,0 @@
-import React from "react";
-
-/**
- * Dynamic imports that survive a redeploy.
- *
- * A built SPA names its chunks by content hash and a deploy replaces the whole
- * `assets/` directory, so a tab opened before the deploy still holds the *old*
- * entry chunk. The first lazy route that tab opens asks for a hash that no
- * longer exists on the server, the import rejects, and the view is dead until
- * the user thinks to reload — which nothing on screen tells them to do. The
- * browser's own wording ("Failed to fetch dynamically imported module: …") reads
- * like a build bug, so this is usually reported as one.
- *
- * `loadChunk` retries once — that covers a transient network failure — and then
- * gives up with an error tagged as a chunk load failure, so `ErrorBoundary` can
- * offer a reload instead of printing the browser's message.
- */
-
-/**
- * Marker property set on the error thrown after a failed retry. Read by
- * `isChunkLoadError`, which is what the UI matches on.
- */
-const CHUNK_LOAD_ERROR_FLAG = "rebaseChunkLoadError";
-
-/**
- * Each engine words this differently, and the message is the only signal — none
- * of them use a distinguishable error type. The MIME variants matter as much as
- * the fetch ones: a server whose SPA fallback answers a missing `/assets/x.js`
- * with `index.html` returns 200 HTML, and the browser rejects it as a module.
- */
-const CHUNK_ERROR_PATTERNS = [
-    "failed to fetch dynamically imported module",
-    "error loading dynamically imported module",
-    "importing a module script failed",
-    "failed to load module script",
-    "expected a javascript",
-    "unable to preload css"
-];
-
-/**
- * Does this error mean a chunk could not be loaded — rather than the chunk's
- * own code throwing once it did load?
- *
- * Errors raised anywhere are matched, not just ones `loadChunk` produced: React
- * `lazy()` calls that still import directly, and Vite's own CSS preloads, fail
- * the same way and deserve the same recovery.
- */
-export function isChunkLoadError(error: unknown): boolean {
-    if (!error || typeof error !== "object") return false;
-    if ((error as Record<string, unknown>)[CHUNK_LOAD_ERROR_FLAG] === true) return true;
-    const message = (error as { message?: unknown }).message;
-    if (typeof message !== "string") return false;
-    const lower = message.toLowerCase();
-    return CHUNK_ERROR_PATTERNS.some(pattern => lower.includes(pattern));
-}
-
-function chunkLoadError(cause: unknown): Error {
-    const error = new Error(
-        "This app was updated while the tab was open, so part of it could not be loaded. Reload to continue."
-    );
-    Object.assign(error, { [CHUNK_LOAD_ERROR_FLAG]: true,
-cause });
-    return error;
-}
-
-/**
- * Run a dynamic import, retrying once before declaring the chunk unreachable.
- *
- * Errors that are not chunk load failures — the imported module throwing while
- * it evaluates, say — are re-thrown untouched and never retried: running a
- * module's side effects twice is worse than the original failure.
- */
-export async function loadChunk<T>(loader: () => Promise<T>): Promise<T> {
-    try {
-        return await loader();
-    } catch (error) {
-        if (!isChunkLoadError(error)) throw error;
-        // A blip resolves inside a few hundred ms; a stale hash never will.
-        await new Promise(resolve => setTimeout(resolve, 250));
-        try {
-            return await loader();
-        } catch (retryError) {
-            throw chunkLoadError(retryError);
-        }
-    }
-}
-
-/**
- * `React.lazy` with the retry above. A drop-in replacement — use it for every
- * lazy route or dialog, since any one of them can be the first chunk a stale
- * tab reaches for.
- *
- * Note that React caches the rejection: once a lazy component has failed, later
- * renders re-throw without calling the loader again. Resetting an error boundary
- * therefore cannot recover it, which is why the boundary offers a reload.
- */
-export function lazyChunk<T extends React.ComponentType<any>>(
-    loader: () => Promise<{ default: T }>
-): React.LazyExoticComponent<T> {
-    return React.lazy(() => loadChunk(loader));
-}

package/src/views/CardView.tsx

@@ -1,281 +0,0 @@
-import React, { useCallback, useEffect, useRef } from "react";
-import {
-    CircularProgress,
-    Typography
-} from "../components";
-import { cls } from "../util";
-
-import { CollectionSize } from "./ListView";
-
-export type CardViewProps<T> = {
-    data: T[];
-    dataLoading?: boolean;
-    noMoreToLoad?: boolean;
-    dataLoadingError?: Error;
-    itemCount?: number;
-    setItemCount?: (itemCount: number) => void;
-    pageSize?: number;
-    paginationEnabled?: boolean;
-
-    onItemClick?: (item: T) => void;
-    selectedIds?: Set<string | number>;
-    highlightedIds?: Set<string | number>;
-    selectionEnabled?: boolean;
-    onSelectionChange?: (item: T, selected: boolean) => void;
-
-    onScroll?: (props: {
-        scrollDirection: "forward" | "backward";
-        scrollOffset: number;
-        scrollUpdateWasRequested: boolean;
-    }) => void;
-    initialScroll?: number;
-
-    size?: CollectionSize;
-    renderCard: (
-        item: T,
-        extra: {
-            selected: boolean;
-            highlighted: boolean;
-            onSelectionChange: (selected: boolean) => void;
-            onClick: (e: React.MouseEvent) => void;
-        }
-    ) => React.ReactNode;
-    emptyComponent?: React.ReactNode;
-};
-
-function getGridColumnsClass(size: CollectionSize): string {
-    switch (size) {
-        case "xs":
-            return "grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10";
-        case "s":
-            return "grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8";
-        case "m":
-            return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
-        case "l":
-            return "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4";
-        case "xl":
-            return "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3";
-        default:
-            return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
-    }
-}
-
-function getScrollParent(element: HTMLElement | null): HTMLElement | null {
-    if (!element) return null;
-    let parent = element.parentElement;
-    while (parent) {
-        const overflowY = window.getComputedStyle(parent).overflowY;
-        if (overflowY === "auto" || overflowY === "scroll") {
-            return parent;
-        }
-        parent = parent.parentElement;
-    }
-    return document.documentElement;
-}
-
-export function CardView<T>({
-    data,
-    dataLoading = false,
-    noMoreToLoad = false,
-    dataLoadingError,
-    itemCount,
-    setItemCount,
-    pageSize = 50,
-    paginationEnabled = true,
-
-    onItemClick,
-    selectedIds,
-    highlightedIds,
-    selectionEnabled = true,
-    onSelectionChange,
-
-    onScroll,
-    initialScroll,
-    size = "m",
-    renderCard,
-    emptyComponent
-}: CardViewProps<T>) {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const hasRestoredScroll = useRef(false);
-    const isLoadingMore = useRef(false);
-
-    // Sync mutable ref with pagination settings to avoid resetting listeners
-    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, itemCount, pageSize });
-    useEffect(() => {
-        paginationStateRef.current = { paginationEnabled, noMoreToLoad, itemCount, pageSize };
-    }, [paginationEnabled, noMoreToLoad, itemCount, pageSize]);
-
-    useEffect(() => {
-        if (!dataLoading) isLoadingMore.current = false;
-    }, [dataLoading]);
-
-    // Infinite scroll and resize observer
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el) return;
-        const scrollEl = getScrollParent(el);
-        if (!scrollEl) return;
-
-        let rafId: number | null = null;
-
-        const update = () => {
-            rafId = null;
-            const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
-            if (
-                pe &&
-                !nm &&
-                !isLoadingMore.current &&
-                scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 400
-            ) {
-                isLoadingMore.current = true;
-                setItemCount?.((ic ?? ps) + ps);
-            }
-        };
-
-        const onScrollEvent = () => {
-            if (rafId === null) rafId = requestAnimationFrame(update);
-        };
-
-        scrollEl.addEventListener("scroll", onScrollEvent, { passive: true });
-        const ro = new ResizeObserver(() => update());
-        ro.observe(scrollEl);
-        update();
-
-        return () => {
-            scrollEl.removeEventListener("scroll", onScrollEvent);
-            ro.disconnect();
-            if (rafId !== null) cancelAnimationFrame(rafId);
-        };
-    }, [setItemCount]);
-
-    // Scroll restoration
-    useEffect(() => {
-        if (!containerRef.current || !initialScroll || hasRestoredScroll.current || data.length === 0) return;
-
-        const scrollEl = getScrollParent(containerRef.current);
-        if (!scrollEl) return;
-
-        let attempts = 0;
-        const maxAttempts = 5;
-
-        const tryRestore = () => {
-            if (scrollEl.scrollHeight >= initialScroll || attempts >= maxAttempts) {
-                scrollEl.scrollTop = initialScroll;
-                hasRestoredScroll.current = true;
-            } else {
-                attempts++;
-                requestAnimationFrame(tryRestore);
-            }
-        };
-
-        requestAnimationFrame(tryRestore);
-    }, [initialScroll, data.length]);
-
-    // Scroll tracking: call onScroll callback
-    const lastScrollOffset = useRef(0);
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el || !onScroll) return;
-        const scrollEl = getScrollParent(el);
-        if (!scrollEl) return;
-
-        const handleScroll = () => {
-            const currentOffset = scrollEl.scrollTop;
-            const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
-            lastScrollOffset.current = currentOffset;
-            onScroll({
-                scrollDirection: direction,
-                scrollOffset: currentOffset,
-                scrollUpdateWasRequested: false
-            });
-        };
-
-        scrollEl.addEventListener("scroll", handleScroll, { passive: true });
-        return () => scrollEl.removeEventListener("scroll", handleScroll);
-    }, [onScroll]);
-
-    const getItemId = useCallback((item: T): string | number => {
-        if (item && typeof item === "object" && "id" in item) {
-            const id = (item as Record<"id", unknown>).id;
-            return typeof id === "number" ? id : String(id);
-        }
-        return String(item);
-    }, []);
-
-    const gridColumnsClass = getGridColumnsClass(size);
-
-    const isInitialLoading = dataLoading && data.length === 0 && !dataLoadingError;
-    const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;
-
-    return (
-        <div
-            ref={containerRef}
-            className="w-full p-4"
-        >
-            {dataLoadingError && data.length === 0 ? (
-                <div className="h-full flex items-center justify-center p-8">
-                    <Typography className="text-red-500">
-                        Error loading data: {dataLoadingError.message}
-                    </Typography>
-                </div>
-            ) : isInitialLoading ? (
-                <div className="flex items-center justify-center py-12 px-8">
-                    <CircularProgress size="small"/>
-                </div>
-            ) : isEmpty ? (
-                <div className="w-full flex items-center justify-center py-12 px-8">
-                    {emptyComponent ?? (
-                        <Typography variant="label" color="secondary">
-                            No entries found
-                        </Typography>
-                    )}
-                </div>
-            ) : (
-                <div className="max-w-7xl mx-auto">
-                    <div className={cls("grid gap-4", gridColumnsClass)}>
-                        {data.map((item, index) => {
-                            const id = getItemId(item);
-                            const selected = selectedIds?.has(id) ?? false;
-                            const highlighted = highlightedIds?.has(id) ?? false;
-
-                            const handleClick = (e: React.MouseEvent) => {
-                                if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
-                                    e.preventDefault();
-                                    onSelectionChange?.(item, !selected);
-                                    return;
-                                }
-                                onItemClick?.(item);
-                            };
-
-                            const handleSelectionChange = (val: boolean) => {
-                                onSelectionChange?.(item, val);
-                            };
-
-                            return (
-                                <React.Fragment key={id || index}>
-                                    {renderCard(item, {
-                                        selected,
-                                        highlighted,
-                                        onSelectionChange: handleSelectionChange,
-                                        onClick: handleClick
-                                    })}
-                                </React.Fragment>
-                            );
-                        })}
-                    </div>
-
-                    <div className="flex items-center justify-center py-8">
-                        {dataLoading && (
-                            <CircularProgress size="small"/>
-                        )}
-                        {!dataLoading && noMoreToLoad && data.length > 0 && (
-                            <Typography variant="caption" color="secondary">
-                                All {data.length} entries loaded
-                            </Typography>
-                        )}
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}

package/src/views/CollectionView/CollectionCardView.tsx

@@ -1,265 +0,0 @@
-"use client";
-import React, { useCallback, useMemo } from "react";
-import { CardView } from "../CardView";
-import { Card } from "../../components/Card";
-import { Typography } from "../../components/Typography";
-import { Checkbox } from "../../components/Checkbox";
-import { DefaultCellRenderer } from "./DefaultCellRenderer";
-import { cls } from "../../util";
-import { cardSelectedMixin, fieldBackgroundMixin } from "../../styles";
-import type {
-    CollectionPropertyConfig,
-    CollectionDataController,
-    CellRendererOverride,
-    CollectionViewSize,
-    CollectionSelectionController,
-} from "./CollectionViewTypes";
-import { resolveTitlePropertyKey } from "./resolveTitleProperty";
-
-import { getValueInPath } from "./utils";
-
-/**
- * Props for the {@link CollectionCardView} component.
- * @group Collection View
- */
-export type CollectionCardViewProps<T = Record<string, unknown>> = {
-    dataController: CollectionDataController<T>;
-    properties: Record<string, CollectionPropertyConfig>;
-    propertiesOrder?: string[];
-    idProperty?: string;
-    titleProperty?: string;
-    onRowClick?: (row: T) => void;
-    cellRenderer?: CellRendererOverride<T>;
-    size?: CollectionViewSize;
-    selectionEnabled?: boolean;
-    selectionController?: CollectionSelectionController<T>;
-    highlightedItems?: T[];
-    emptyComponent?: React.ReactNode;
-    className?: string;
-};
-
-/**
- * Headless card grid view that wraps {@link CardView}.
- *
- * Renders each item as a card with an optional image, title,
- * preview properties, and selection support.
- *
- * @group Collection View
- */
-export function CollectionCardView<T extends Record<string, unknown> = Record<string, unknown>>({
-    dataController,
-    properties,
-    propertiesOrder,
-    idProperty = "id",
-    titleProperty,
-    onRowClick,
-    cellRenderer,
-    size = "m",
-    selectionEnabled,
-    selectionController,
-    highlightedItems,
-    emptyComponent,
-    className,
-}: CollectionCardViewProps<T>) {
-    const order = useMemo(
-        () => propertiesOrder ?? Object.keys(properties),
-        [propertiesOrder, properties]
-    );
-
-    // ── Resolve title property ───────────────────────────────────────
-    const titlePropertyKey = useMemo(
-        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
-        [titleProperty, order, properties, idProperty]
-    );
-
-    // ── Resolve image property ───────────────────────────────────────
-    const imageProperty = useMemo(() => {
-        for (const key of order) {
-            const prop = properties[key];
-            if (prop && prop.type === "string" && prop.storage) {
-                return key;
-            }
-        }
-        return undefined;
-    }, [order, properties]);
-
-    // ── Preview properties (up to 3) ─────────────────────────────────
-    const previewProperties = useMemo(() => {
-        const result: { key: string; property: CollectionPropertyConfig }[] = [];
-        for (const key of order) {
-            if (key === titlePropertyKey || key === imageProperty) continue;
-            const prop = properties[key];
-            if (prop && !prop.hideFromCollection) {
-                result.push({ key, property: prop });
-                if (result.length >= 3) break;
-            }
-        }
-        return result;
-    }, [order, properties, titlePropertyKey, imageProperty]);
-
-    // ── Selection IDs ────────────────────────────────────────────────
-    const selectedIds = useMemo(() => {
-        if (!selectionController?.selectedItems) return undefined;
-        const ids = new Set<string | number>();
-        for (const item of selectionController.selectedItems) {
-            const id = getValueInPath(item as Record<string, unknown>, idProperty);
-            if (id !== undefined && id !== null) {
-                ids.add(id as string | number);
-            }
-        }
-        return ids;
-    }, [selectionController?.selectedItems, idProperty]);
-
-    // ── Highlighted IDs ──────────────────────────────────────────────
-    const highlightedIds = useMemo(() => {
-        if (!highlightedItems) return undefined;
-        const ids = new Set<string | number>();
-        for (const item of highlightedItems) {
-            const id = getValueInPath(item as Record<string, unknown>, idProperty);
-            if (id !== undefined && id !== null) {
-                ids.add(id as string | number);
-            }
-        }
-        return ids;
-    }, [highlightedItems, idProperty]);
-
-    // ── Selection handler ────────────────────────────────────────────
-    const handleSelectionChange = useCallback(
-        (item: T, selected: boolean) => {
-            if (!selectionController) return;
-            selectionController.setSelectedItems((prev) => {
-                if (selected) {
-                    return [...prev, item];
-                }
-                const itemId = getValueInPath(item as Record<string, unknown>, idProperty);
-                return prev.filter((existing) => {
-                    const existingId = getValueInPath(existing as Record<string, unknown>, idProperty);
-                    return existingId !== itemId;
-                });
-            });
-        },
-        [selectionController, idProperty]
-    );
-
-    // ── Render card ──────────────────────────────────────────────────
-    const renderCard = useCallback(
-        (
-            item: T,
-            extra: {
-                selected: boolean;
-                highlighted: boolean;
-                onSelectionChange: (selected: boolean) => void;
-                onClick: (e: React.MouseEvent) => void;
-            }
-        ): React.ReactNode => {
-            const titleValue = getValueInPath(item as Record<string, unknown>, titlePropertyKey);
-            const imageValue = imageProperty
-                ? getValueInPath(item as Record<string, unknown>, imageProperty)
-                : undefined;
-            const hasImage = typeof imageValue === "string" && imageValue.length > 0;
-
-            return (
-                <Card
-                    onClick={(e) => { if (e) extra.onClick(e); }}
-                    className={cls(
-                        "overflow-hidden relative",
-                        extra.selected && cardSelectedMixin,
-                        extra.highlighted && !extra.selected && "ring-1 ring-primary/50"
-                    )}
-                >
-                    {/* Image */}
-                    {imageProperty && (
-                        hasImage ? (
-                            <img
-                                src={imageValue as string}
-                                alt=""
-                                className="w-full h-32 object-cover rounded-t-lg"
-                            />
-                        ) : (
-                            <div className={cls("h-24 rounded-t-lg", fieldBackgroundMixin)} />
-                        )
-                    )}
-
-                    {/* Selection checkbox */}
-                    {selectionEnabled && (
-                        <div
-                            className="absolute top-2 right-2"
-                            onClick={(e) => e.stopPropagation()}
-                        >
-                            <Checkbox
-                                checked={extra.selected}
-                                onCheckedChange={extra.onSelectionChange}
-                                size="small"
-                            />
-                        </div>
-                    )}
-
-                    {/* Title */}
-                    <Typography variant="subtitle2" noWrap className="px-3 pt-2 pb-1">
-                        {String(titleValue ?? "")}
-                    </Typography>
-
-                    {/* Preview properties */}
-                    {previewProperties.map(({ key, property }) => {
-                        const value = getValueInPath(item as Record<string, unknown>, key);
-
-                        if (cellRenderer) {
-                            const custom = cellRenderer({
-                                row: item,
-                                propertyKey: key,
-                                property,
-                                value,
-                                size: "small",
-                            });
-                            if (custom !== undefined) {
-                                return (
-                                    <div key={key} className="px-3 py-0.5">
-                                        {custom}
-                                    </div>
-                                );
-                            }
-                        }
-
-                        return (
-                            <div key={key} className="px-3 py-0.5">
-                                <DefaultCellRenderer
-                                    row={item}
-                                    propertyKey={key}
-                                    property={property}
-                                    value={value}
-                                    size="small"
-                                />
-                            </div>
-                        );
-                    })}
-
-                    <div className="pb-2" />
-                </Card>
-            );
-        },
-        [titlePropertyKey, imageProperty, previewProperties, cellRenderer, selectionEnabled]
-    );
-
-    return (
-        <div className={cls("w-full h-full overflow-auto", className)}>
-            <CardView<T>
-                data={dataController.data}
-                dataLoading={dataController.loading}
-                noMoreToLoad={dataController.noMoreToLoad}
-                dataLoadingError={dataController.error}
-                itemCount={dataController.itemCount}
-                setItemCount={dataController.setItemCount}
-                pageSize={dataController.pageSize}
-                paginationEnabled={dataController.paginationEnabled}
-                onItemClick={onRowClick}
-                selectedIds={selectedIds}
-                highlightedIds={highlightedIds}
-                selectionEnabled={!!selectionEnabled}
-                onSelectionChange={handleSelectionChange}
-                size={size}
-                renderCard={renderCard}
-                emptyComponent={emptyComponent}
-            />
-        </div>
-    );
-}