@rebasepro/core 0.0.1-canary.0

package/src/components/Debug/UIStyleGuide.tsx

@@ -0,0 +1,164 @@
+import React from "react";
+import {
+    Typography,
+    Button,
+    IconButton,
+    Paper,
+    Container,
+    Separator,
+    cls,
+    DeleteIcon
+} from "@rebasepro/ui";
+
+export const UIStyleGuide = () => {
+    const typographyVariants = [
+        "h1", "h2", "h3", "h4", "h5", "h6",
+        "subtitle1", "subtitle2",
+        "body1", "body2",
+        "caption", "label", "button"
+    ] as const;
+
+    const colors = ["primary", "secondary", "disabled", "error"] as const;
+    const buttonVariants = ["filled", "text"] as const;
+    const buttonColors = ["primary", "secondary", "text", "error", "neutral"] as const;
+    const buttonSizes = ["small", "medium", "large", "xl", "2xl"] as const;
+
+    const IconExample = () => (
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+        </svg>
+    );
+
+    return (
+        <Container className="py-10 max-w-5xl">
+            <Typography variant="h2" gutterBottom>Rebase UI Style Guide</Typography>
+            <Typography variant="body1" color="secondary" className="mb-8">
+                A showcase of all typography and button variants available in the @rebasepro/ui library.
+            </Typography>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Typography Variants</Typography>
+                <Paper className="p-6 space-y-6">
+                    {typographyVariants.map(variant => (
+                        <div key={variant} className="flex items-center gap-4 border-b border-surface-100 dark:border-surface-800 pb-4 last:border-0">
+                            <span className="w-24 text-[10px] uppercase tracking-wider text-text-disabled font-mono">{variant}</span>
+                            <Typography variant={variant}>
+                                The quick brown fox jumps over the lazy dog ({variant})
+                            </Typography>
+                        </div>
+                    ))}
+                </Paper>
+            </section>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Typography Colors</Typography>
+                <Paper className="p-6 space-y-4">
+                    {colors.map(color => (
+                        <div key={color} className="flex items-center gap-4">
+                            <span className="w-24 text-[10px] uppercase tracking-wider text-text-disabled font-mono">{color}</span>
+                            <Typography color={color}>
+                                This text is rendered with color="{color}"
+                            </Typography>
+                        </div>
+                    ))}
+                </Paper>
+            </section>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Button Discovery</Typography>
+
+                <div className="space-y-8">
+                    {buttonVariants.map(variant => (
+                        <div key={variant}>
+                            <Typography variant="h6" gutterBottom className="capitalize mb-4">{variant} Buttons</Typography>
+                            <Paper className="p-6">
+                                <div className="flex flex-wrap gap-4">
+                                    {buttonColors.map(color => (
+                                        <div key={color} className="flex flex-col items-center gap-2">
+                                            <Button variant={variant} color={color}>
+                                                {color}
+                                            </Button>
+                                            <span className="text-[10px] text-text-disabled font-mono">{color}</span>
+                                        </div>
+                                    ))}
+                                    <div className="flex flex-col items-center gap-2">
+                                        <Button variant={variant} color="primary" disabled>
+                                            Disabled
+                                        </Button>
+                                        <span className="text-[10px] text-text-disabled font-mono">disabled</span>
+                                    </div>
+                                </div>
+                            </Paper>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Button Sizes</Typography>
+                <Paper className="p-6">
+                    <div className="flex flex-wrap items-end gap-6 text-center">
+                        {buttonSizes.map(size => (
+                            <div key={size} className="flex flex-col items-center gap-4">
+                                <Button size={size} color="primary">
+                                    {size}
+                                </Button>
+                                <span className="text-[10px] text-text-disabled font-mono">{size}</span>
+                            </div>
+                        ))}
+                    </div>
+                </Paper>
+            </section>
+
+            <section className="mb-12">
+                <Typography variant="h4" gutterBottom className="border-b pb-2 mb-6">Icon Buttons</Typography>
+                <Paper className="p-6">
+                    <div className="flex flex-wrap gap-8 items-center">
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton color="primary">
+                                <IconExample />
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">primary</span>
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton color="secondary">
+                                <IconExample />
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">secondary</span>
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton size="small">
+                                <IconExample />
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">small</span>
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton disabled>
+                                <IconExample />
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">disabled</span>
+                        </div>
+                        <div className="flex flex-col items-center gap-2">
+                            <IconButton size="small" color="error">
+                                <DeleteIcon />
+                            </IconButton>
+                            <span className="text-[10px] text-text-disabled font-mono">delete</span>
+                        </div>
+                    </div>
+                </Paper>
+            </section>
+
+            <section className="mb-12">
+                <div className="flex justify-between items-center bg-surface-100 dark:bg-surface-800 p-8 rounded-xl border border-dashed border-surface-400">
+                    <div>
+                        <Typography variant="h5">Dark Mode Check</Typography>
+                        <Typography variant="body2" color="secondary">Typography and buttons should adapt automatically.</Typography>
+                    </div>
+                    <Button variant="filled" color="neutral" startIcon={<IconExample />}>
+                        Sample Action
+                    </Button>
+                </div>
+            </section>
+        </Container>
+    );
+};

package/src/components/DeleteEntityDialog.tsx

@@ -0,0 +1,181 @@
+import { Entity, EntityCallbacks, EntityCollection } from "@rebasepro/types";
+import React, { useCallback, useMemo, useState } from "react";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@rebasepro/ui";
+import {
+    deleteEntityWithCallbacks,
+    useAuthController,
+    useCustomizationController,
+    useDataSource,
+    useRebaseContext,
+    useSnackbarController
+} from "../hooks";
+import { EntityView } from "./EntityView";
+
+export interface DeleteEntityDialogProps<M extends Record<string, any>> {
+    entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],
+    path: string,
+    collection: EntityCollection<M>
+    open: boolean;
+    onClose: () => void;
+    callbacks?: EntityCallbacks<M>,
+
+    onEntityDelete?(path: string, entity: Entity<M>): void;
+
+    onMultipleEntitiesDelete?(path: string, entities: Entity<M>[]): void;
+}
+
+export function DeleteEntityDialog<M extends Record<string, any>>({
+    entityOrEntitiesToDelete,
+    collection,
+    onClose,
+    open,
+    callbacks,
+    onEntityDelete,
+    onMultipleEntitiesDelete,
+    path
+}: DeleteEntityDialogProps<M>) {
+    const authController = useAuthController();
+    const dataSource = useDataSource(collection);
+    const customizationController = useCustomizationController();
+    const snackbarController = useSnackbarController();
+    const [loading, setLoading] = useState(false);
+
+    const context = useRebaseContext();
+    const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
+        ? entityOrEntitiesToDelete[0]
+        : entityOrEntitiesToDelete;
+
+    const multipleEntities = Array.isArray(entityOrEntities);
+
+    const handleCancel = useCallback(() => {
+        onClose();
+    }, [onClose]);
+
+    const onDeleteSuccess = useCallback((entity: Entity<any>) => {
+        console.debug("Deleted", entity);
+    }, []);
+
+    const onDeleteFailure = useCallback((entity: Entity<any>, e: Error) => {
+        snackbarController.open({
+            type: "error",
+            title: "Error deleting",
+            message: e?.message
+        });
+
+        console.error("Error deleting entity");
+        console.error(e);
+    }, [collection.name]);
+
+
+
+    const performDelete = useCallback((entity: Entity<M>): Promise<boolean> =>
+        deleteEntityWithCallbacks({
+            dataSource,
+            entity,
+            collection: collection,
+            callbacks,
+            onDeleteSuccess,
+            onDeleteFailure,
+            context
+        }), [dataSource, collection, callbacks, onDeleteSuccess, onDeleteFailure, context]);
+
+    const handleOk = useCallback(async () => {
+        if (entityOrEntities) {
+
+            setLoading(true);
+
+            if (multipleEntities) {
+                Promise.all((entityOrEntities as Entity<M>[]).map(performDelete)).then((results) => {
+
+                    setLoading(false);
+
+                    if (onMultipleEntitiesDelete && entityOrEntities)
+                        onMultipleEntitiesDelete(path, entityOrEntities as Entity<M>[]);
+
+                    if (results.every(Boolean)) {
+                        snackbarController.open({
+                            type: "success",
+                            message: `${collection.name}: multiple deleted`
+                        });
+                    } else if (results.some(Boolean)) {
+                        snackbarController.open({
+                            type: "warning",
+                            message: `${collection.name}: Some of the entities have been deleted, but not all`
+                        });
+                    } else {
+                        snackbarController.open({
+                            type: "error",
+                            message: `${collection.name}: Error deleting entities`
+                        });
+                    }
+                    onClose();
+                });
+
+            } else {
+                performDelete(entityOrEntities as Entity<M>).then((success) => {
+                    setLoading(false);
+                    if (success) {
+                        if (onEntityDelete && entityOrEntities)
+                            onEntityDelete(path, entityOrEntities as Entity<M>);
+                        snackbarController.open({
+                            type: "success",
+                            message: `${collection.singularName ?? collection.name} deleted`
+                        });
+                        onClose();
+                    }
+                });
+            }
+        }
+    }, [entityOrEntities, multipleEntities, performDelete, onMultipleEntitiesDelete, path, onClose, snackbarController, collection.name, onEntityDelete]);
+
+    let content: React.ReactNode;
+    if (entityOrEntities && multipleEntities) {
+        content = <>Multiple entities</>;
+    } else {
+        const entity = entityOrEntities as Entity<M> | undefined;
+        content = entity
+            ? <EntityView
+                entity={entity}
+                collection={collection}
+                path={path} />
+            : <></>;
+    }
+
+    const dialogTitle = multipleEntities
+        ? <><b>{collection.name}</b>: Confirm multiple delete?</>
+        : `Would you like to delete this ${collection.singularName ?? collection.name}?`;
+
+    return (
+        <Dialog
+            maxWidth={multipleEntities ? "lg" : "2xl"}
+            aria-labelledby="delete-dialog"
+            open={open}
+            onOpenChange={(open) => !open ? onClose() : undefined}
+        >
+            <DialogTitle id="delete-dialog-title">
+                {dialogTitle}
+            </DialogTitle>
+            <DialogContent fullHeight={true}>
+                {!multipleEntities && <div className={"p-4"}>{content}</div>}
+            </DialogContent>
+            <DialogActions>
+
+                {loading && <CircularProgress size={"smallest"} />}
+
+                <Button onClick={handleCancel}
+                    disabled={loading}
+                    variant="text">
+                    Cancel
+                </Button>
+                <Button
+                    autoFocus
+                    disabled={loading}
+                    onClick={handleOk}
+                    variant="filled">
+                    Ok
+                </Button>
+            </DialogActions>
+
+        </Dialog>
+    );
+}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -0,0 +1,225 @@
+import React, { MouseEvent, useCallback } from "react";
+
+import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "@rebasepro/types";
+import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@rebasepro/ui";
+import { useRebaseContext, useLargeLayout } from "../../hooks";
+import { getEntityFromCache } from "../../util/entity_cache";
+import { getLocalChangesBackup } from "@rebasepro/common";
+
+/**
+ *
+ * @param entity
+ * @param width
+ * @param frozen
+ * @param isSelected
+ * @param selectionEnabled
+ * @param size
+ * @param toggleEntitySelection
+ * @param hideId
+ *
+ * @group Collection components
+ */
+export const EntityCollectionRowActions = function EntityCollectionRowActions({
+    entity,
+    collection,
+    path,
+    width,
+    frozen,
+    isSelected,
+    selectionEnabled,
+    size,
+    highlightEntity,
+    onCollectionChange,
+    unhighlightEntity,
+    actions = [],
+    hideId,
+    selectionController,
+    openEntityMode,
+    sortableNodeRef,
+    sortableStyle,
+    sortableAttributes,
+    isDragging,
+    isDraggable
+}:
+    {
+        entity: Entity<any>,
+        collection?: EntityCollection<any>,
+        path?: string,
+        width: number,
+        frozen?: boolean,
+        size: CollectionSize,
+        isSelected?: boolean,
+        selectionEnabled?: boolean,
+        actions?: EntityAction[],
+        hideId?: boolean,
+        onCollectionChange?: () => void,
+        selectionController?: SelectionController;
+        highlightEntity?: (entity: Entity<any>) => void;
+        unhighlightEntity?: (entity: Entity<any>) => void;
+        openEntityMode: "side_panel" | "full_screen";
+        // Sortable props for dnd-kit integration
+        sortableNodeRef?: (node: HTMLElement | null) => void;
+        sortableStyle?: React.CSSProperties;
+        sortableAttributes?: Record<string, any>;
+        isDragging?: boolean;
+        isDraggable?: boolean;
+    }) {
+
+    const largeLayout = useLargeLayout();
+
+    const context = useRebaseContext();
+
+    const onCheckedChange = useCallback((checked: boolean) => {
+        selectionController?.toggleEntitySelection(entity, checked);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const hasActions = actions.length > 0;
+    const hasCollapsedActions = actions.some(a => a.collapsed || a.collapsed === undefined);
+
+    const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
+    const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
+    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(path + "/" + entity.id) : false;
+    const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
+
+    const content = (
+        <div
+            className={cls(
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50/90 dark:bg-surface-900/90 z-10",
+                frozen ? "sticky left-0" : ""
+            )}
+            onClick={useCallback((event: React.MouseEvent) => {
+                event.stopPropagation();
+            }, [])}
+            style={{
+                width,
+                position: frozen ? "sticky" : "initial",
+                left: frozen ? 0 : "initial",
+                contain: "strict"
+            }}>
+
+            {(hasActions || selectionEnabled) &&
+                <div className="w-34 flex justify-center">
+
+                    {uncollapsedActions.map((action, index) => {
+                        const isEditAction = action.key === "edit";
+                        const tooltip = isEditAction && hasDraft ? "Local unsaved changes" : action.name;
+
+                        let iconButton = <IconButton
+                            onClick={(event: MouseEvent) => {
+                                event.stopPropagation();
+                                action.onClick({
+                                    view: "collection",
+                                    entity,
+                                    path,
+                                    collection,
+                                    context,
+                                    selectionController,
+                                    highlightEntity,
+                                    unhighlightEntity,
+                                    onCollectionChange,
+                                    openEntityMode: openEntityMode ?? collection?.openEntityMode
+                                });
+                            }}
+                            size={iconSize}>
+                            {action.icon}
+                        </IconButton>;
+                        if (isEditAction && hasDraft) {
+                            iconButton = (
+                                <Badge color={"warning"}>
+                                    {iconButton}
+                                </Badge>
+                            );
+                        }
+                        return (
+                            <Tooltip key={index}
+                                title={tooltip}
+                                asChild={true}>
+                                {iconButton}
+                            </Tooltip>
+                        );
+                    })}
+
+                    {hasCollapsedActions &&
+                        <Menu
+                            trigger={<IconButton
+                                size={iconSize}>
+                                <MoreVertIcon />
+                            </IconButton>}>
+                            {collapsedActions.map((action, index) => (
+                                <MenuItem
+                                    key={index}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        action.onClick({
+                                            view: "collection",
+                                            entity,
+                                            path,
+                                            collection,
+                                            context,
+                                            selectionController,
+                                            highlightEntity,
+                                            unhighlightEntity,
+                                            onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
+                                        });
+                                    }}>
+                                    {action.icon}
+                                    {action.name}
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    }
+
+                    {selectionEnabled &&
+                        <Tooltip title={`Select ${entity.id}`}>
+                            <Checkbox
+                                size={iconSize}
+                                checked={Boolean(isSelected)}
+                                onCheckedChange={onCheckedChange}
+                            />
+                        </Tooltip>}
+
+                </div>}
+
+            {!hideId && size !== "xs" && (
+                <div
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}>
+                    <span className="min-w-0 truncate text-center">
+                        {entity
+                            ? entity.id
+                            : <Skeleton />
+                        }
+                    </span>
+                </div>
+            )}
+
+        </div>
+    );
+
+    // Wrap with sortable outer div when sortable props are provided
+    // Remove tabIndex from attributes to avoid capturing focus before cell content
+    if (sortableNodeRef) {
+        const { tabIndex: _tabIndex, ...sortableAttrsWithoutTabIndex } = sortableAttributes ?? {};
+        return (
+            <div
+                ref={sortableNodeRef}
+                style={sortableStyle}
+                className={cls(
+                    "flex-shrink-0",
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-950"
+                )}
+                {...sortableAttrsWithoutTabIndex}
+            >
+                {content}
+            </div>
+        );
+    }
+
+    return content;
+
+};