@rebasepro/cms 0.17.3 → 0.18.0

package/src/collection_editor/ui/HomePageEditorCollectionAction.tsx

@@ -1,114 +0,0 @@
-import {
-    ConfirmationDialog,
-    useAuthController,
-    useSnackbarController,
-    useTranslation
-} from "@rebasepro/app";
-import { PluginHomePageActionsProps } from "@rebasepro/cms-types";
-import { CopyIcon, IconButton, Menu, MenuItem, MoreVerticalIcon, SettingsIcon, Trash2Icon } from "@rebasepro/ui";
-import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useState } from "react";
-import { useCollectionsConfigController } from "../useCollectionsConfigController";
-
-export function HomePageEditorCollectionAction({
-    slug,
-    collection
-}: PluginHomePageActionsProps) {
-
-    const snackbarController = useSnackbarController();
-    const authController = useAuthController();
-    const configController = useCollectionsConfigController();
-    const collectionEditorController = useCollectionEditorController();
-    const { t } = useTranslation();
-
-    const canCreateCollections = !configController.readOnly;
-    const canEditCollections = !configController.readOnly;
-    const canDeleteCollections = !configController.readOnly;
-
-    const onEditCollectionClicked = () => {
-        collectionEditorController?.editCollection({
-            id: collection.slug,
-            parentCollectionSlugs: [],
-            parentEntityIds: []
-        });
-    };
-
-    const onDuplicateCollectionClicked = () => {
-        // Use copyFrom to duplicate the collection with all properties
-        // The editor will handle clearing name, path, and id
-        collectionEditorController?.createCollection({
-            copyFrom: collection,
-            parentCollectionSlugs: [],
-            parentEntityIds: [],
-            redirect: true,
-            sourceClick: "home_page_duplicate"
-        });
-    };
-
-    const [deleteRequested, setDeleteRequested] = useState(false);
-
-    const deleteCollection = () => {
-        configController?.deleteCollection({ id: collection.slug }).then(() => {
-            setDeleteRequested(false);
-            snackbarController.open({
-                message: t("studio_home_collection_deleted"),
-                type: "success"
-            });
-        });
-    };
-
-    return <>
-
-        <div>
-            {canDeleteCollections &&
-                <Menu
-                    trigger={<IconButton size={"small"}>
-                        <MoreVerticalIcon/>
-                    </IconButton>}
-                >
-                    {canCreateCollections &&
-                        <MenuItem
-                            dense={true}
-                            onClick={(event: React.MouseEvent) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                                onDuplicateCollectionClicked();
-                            }}>
-                            <CopyIcon/>
-                            {t("studio_home_duplicate_collection")}
-                        </MenuItem>
-                    }
-                    <MenuItem
-                        dense={true}
-                        onClick={(event: React.MouseEvent) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            setDeleteRequested(true);
-                        }}>
-                        <Trash2Icon/>
-                        {t("studio_home_delete")}
-                    </MenuItem>
-
-                </Menu>
-
-            }
-
-            {canEditCollections &&
-                <IconButton
-                    size={"small"}
-                    onClick={(event: React.MouseEvent) => {
-                         onEditCollectionClicked();
-                    }}>
-                    <SettingsIcon/>
-                </IconButton>}
-        </div>
-
-        <ConfirmationDialog
-            open={deleteRequested}
-            onAccept={deleteCollection}
-            onCancel={() => setDeleteRequested(false)}
-            title={<>{t("studio_home_confirm_delete_title")}</>}
-            body={<>{t("studio_home_confirm_delete_no_data")}</>}/>
-    </>;
-
-}

package/src/collection_editor/ui/KanbanSetupAction.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { useTranslation } from "@rebasepro/app";
-
-import { Button } from "@rebasepro/ui";
-import { useCollectionEditorController } from "../useCollectionEditorController";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-/**
- * Component rendered when Kanban view is missing orderProperty configuration.
- * Provides a CTA button to open the collection editor to configure Kanban.
- */
-export function KanbanSetupAction({
-    collection,
-    fullPath,
-    parentCollectionSlugs,
-    parentEntityIds
-}: {
-    collection: AdminCollection;
-    fullPath: string;
-    parentCollectionSlugs: string[], parentEntityIds: string[];
-}) {
-    const collectionEditorController = useCollectionEditorController();
-    const { t } = useTranslation();
-
-    const handleConfigureClick = () => {
-        collectionEditorController.editCollection({
-            id: collection.slug,
-            parentCollectionSlugs,
-parentEntityIds,
-            initialView: "display",
-            expandKanban: true
-        });
-    };
-
-    return (
-        <Button
-            variant="filled"
-            onClick={handleConfigureClick}
-        >
-            {t("studio_kanban_configure")}
-        </Button>
-    );
-}

package/src/collection_editor/ui/MissingReferenceWidget.tsx

@@ -1,35 +0,0 @@
-import { useCollectionRegistryController } from "../_cms_internals";
-import { ErrorView, useTranslation } from "@rebasepro/app";
-import { useCollectionEditorController } from "../useCollectionEditorController";
-import { Button } from "@rebasepro/ui";
-import { prettifyIdentifier } from "@rebasepro/utils";
-import { getLastSegment } from "@rebasepro/app";
-
-export function MissingReferenceWidget({ path: pathProp }: {
-    path: string
-}) {
-    const registry = useCollectionRegistryController();
-    const path = getLastSegment(pathProp);
-    const parentCollectionSlugs = registry.getParentCollectionSlugs(pathProp);
-    const parentEntityIds = registry.getParentEntityIds(pathProp);
-    const collectionEditor = useCollectionEditorController();
-    const { t } = useTranslation();
-    return <div className={"p-1 flex flex-col items-center"}>
-        <ErrorView error={t("studio_missing_reference_error", { path })}/>
-        <Button className={"mx-2"}
-            size={"small"}
-            onClick={() => {
-                collectionEditor.createCollection({
-                    initialValues: { path,
-name: prettifyIdentifier(path) },
-                    parentCollectionSlugs,
-parentEntityIds,
-                    redirect: false,
-                    sourceClick: "missing_reference"
-                });
-            }}>
-            {t("studio_missing_reference_create")}
-        </Button>
-    </div>;
-}
-

package/src/collection_editor/ui/NewCollectionButton.tsx

@@ -1,27 +0,0 @@
-import { Button, PlusIcon } from "@rebasepro/ui";
-import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useAdminModeController, useTranslation } from "@rebasepro/app";
-
-export function NewCollectionButton() {
-    const adminModeController = useAdminModeController();
-    const collectionEditorController = useCollectionEditorController();
-    const { t } = useTranslation();
-
-    if (adminModeController.mode === "studio") {
-        return null;
-    }
-
-    return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded-xs"}>
-        <Button className={"min-w-fit"}
-
-            onClick={() => collectionEditorController.createCollection({
-                parentCollectionSlugs: [],
-                parentEntityIds: [],
-                redirect: true,
-                sourceClick: "new_collection_button"
-            })}>
-            <PlusIcon/>
-            {t("studio_new_collection")}
-        </Button>
-    </div>
-}

package/src/collection_editor/ui/NewCollectionCard.tsx

@@ -1,48 +0,0 @@
-import {
-    useAuthController,
-    useTranslation
-} from "@rebasepro/app";
-import { PluginHomePageAdditionalCardsProps } from "@rebasepro/cms-types";
-import { Card, cls, PlusIcon, Typography } from "@rebasepro/ui";
-import { useCollectionEditorController } from "../useCollectionEditorController";
-
-export function NewCollectionCard({
-    group,
-    context
-}: PluginHomePageAdditionalCardsProps) {
-
-    const authController = useAuthController();
-    const collectionEditorController = useCollectionEditorController();
-    const { t } = useTranslation();
-
-    if (!context.navigationStateController?.topLevelNavigation)
-        return null;
-    const canCreateCollections = !collectionEditorController?.configController?.readOnly;
-
-    return (
-        <Card className={cls("h-full p-4 min-h-[124px]")}
-            onClick={collectionEditorController && canCreateCollections
-                ? () => collectionEditorController.createCollection({
-                    initialValues: group ? { group } : undefined,
-                    parentCollectionSlugs: [],
-                    parentEntityIds: [],
-                    redirect: true,
-                    sourceClick: "new_collection_card"
-                })
-                : undefined}>
-
-            <div
-                className="flex items-center justify-center h-full w-full grow flex-col">
-                <PlusIcon className="text-primary"/>
-                <Typography color="primary"
-                    variant={"caption"}
-                    className={"font-medium"}>{t("studio_new_collection_add").toUpperCase()}</Typography>
-
-                {!canCreateCollections &&
-                    <Typography variant={"caption"}>{t("studio_new_collection_no_permission")}</Typography>
-                }
-            </div>
-
-        </Card>
-    );
-}

package/src/collection_editor/ui/PropertyAddColumnComponent.tsx

@@ -1,49 +0,0 @@
-import {
-    useAuthController,
-    useTranslation
-} from "@rebasepro/app";
-import { getDefaultPropertiesOrder } from "../_cms_internals";
-
-import { EntityTableController, AdminCollection } from "@rebasepro/cms-types";
-import { PlusIcon, Tooltip } from "@rebasepro/ui";
-import { useCollectionEditorController } from "../useCollectionEditorController";
-
-export function PropertyAddColumnComponent({
-    path,
-    parentCollectionSlugs, parentEntityIds,
-    collection,
-    tableController
-}: {
-    path: string,
-    parentCollectionSlugs: string[], parentEntityIds: string[],
-    collection: AdminCollection;
-    tableController: EntityTableController;
-}) {
-
-    const authController = useAuthController();
-    const collectionEditorController = useCollectionEditorController();
-    const { t } = useTranslation();
-    const canEditCollection = !collectionEditorController.configController?.readOnly;
-
-    return (
-        <Tooltip
-            asChild={true}
-            title={canEditCollection ? t("studio_property_add_column") : t("studio_property_add_column_no_permission")}>
-            <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100/40 bg-surface-100/40 hover:bg-surface-100 dark:bg-surface-900 dark:bg-opacity-40 dark:bg-surface-900/40 dark:hover:bg-surface-800"}
-                // className={onHover ? "bg-white dark:bg-surface-900" : undefined}
-                onClick={canEditCollection ? () => {
-                    collectionEditorController.editProperty({
-                        editedCollectionId: collection.slug,
-                        parentCollectionSlugs,
-parentEntityIds,
-                        currentPropertiesOrder: getDefaultPropertiesOrder(collection),
-                        collection,
-                        existingEntities: tableController.data
-                    });
-                } : undefined}>
-                <PlusIcon/>
-            </div>
-        </Tooltip>
-    )
-}

package/src/collection_editor/ui/collection_editor/AICollectionGeneratorPopover.tsx

@@ -1,260 +0,0 @@
-
-import { AIIcon, useTranslation } from "@rebasepro/app";
-import { useCollectionRegistryController } from "../../_cms_internals";
-import React, { useState } from "react";
-import { useSafeSnackbarController } from "../../useSafeSnackbarController";
-
-import {
-    Button,
-    CircularProgress,
-    IconButton,
-    Menu,
-    SendIcon,
-    TextField,
-    Tooltip,
-    Typography
-} from "@rebasepro/ui";
-import {
-    CollectionGenerationCallback,
-    CollectionGenerationApiError,
-    CollectionOperation
-} from "../../api/generateCollectionApi";
-import { useCollectionsConfigController } from "../../useCollectionsConfigController";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-export interface AICollectionGeneratorPopoverProps {
-    /**
-     * Current collection being edited (if modifying an existing collection)
-     */
-    existingCollection?: AdminCollection<any>;
-
-    /**
-     * Callback when a collection is generated or modified.
-     * Includes the collection and optionally the operations that were applied.
-     */
-    onGenerated: (collection: AdminCollection, operations?: CollectionOperation[]) => void;
-
-    /**
-     * Callback function for generating/modifying collections.
-     * The plugin is API-agnostic - the consumer provides the implementation.
-     */
-    generateCollection: CollectionGenerationCallback;
-
-    /**
-     * Optional custom trigger button. If not provided, a default AI button is used.
-     */
-    trigger?: React.ReactNode | any;
-
-    /**
-     * Size of the button
-     */
-    size?: "small" | "medium" | "large";
-
-    /**
-     * Whether to show the label text
-     */
-    showLabel?: boolean;
-
-    /**
-     * Optional analytics callback
-     */
-    onAnalyticsEvent?: (event: string, params?: object) => void;
-}
-
-export function AICollectionGeneratorPopover({
-    existingCollection,
-    onGenerated,
-    generateCollection,
-    trigger,
-    size = "small",
-    showLabel = true,
-    onAnalyticsEvent
-}: AICollectionGeneratorPopoverProps) {
-    const { t } = useTranslation();
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [prompt, setPrompt] = useState("");
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const collectionRegistry = useCollectionRegistryController();
-    const configController = useCollectionsConfigController();
-    const snackbarController = useSafeSnackbarController();
-
-    const existingCollections = collectionRegistry.collections ?? [];
-
-    const handleGenerate = async () => {
-        if (!prompt.trim()) return;
-
-        setLoading(true);
-        setError(null);
-
-        const mode = existingCollection ? "modify" : "create";
-        onAnalyticsEvent?.("ai_collection_generate_start", { mode });
-
-        try {
-            const collectionsContext = existingCollections.map(c => ({
-                slug: c.slug,
-                name: c.name,
-                properties: c.properties,
-                propertiesOrder: c.propertiesOrder
-            } as Partial<AdminCollection>));
-
-            const result = await generateCollection({
-                prompt: prompt.trim(),
-                existingCollections: collectionsContext.slice(0, 30),
-                ...(existingCollection && {
-                    existingCollection: {
-                        slug: existingCollection.slug,
-                        name: existingCollection.name,
-                        properties: existingCollection.properties,
-                        propertiesOrder: existingCollection.propertiesOrder
-                    } as Partial<AdminCollection>
-                })
-            });
-
-            onGenerated(result.collection, result.operations);
-            setMenuOpen(false);
-            setPrompt("");
-            onAnalyticsEvent?.("ai_collection_generate_success", {
-                mode,
-                operationsCount: result.operations?.length
-            });
-            snackbarController?.open({
-                type: "success",
-                message: existingCollection
-                    ? "Collection updated with AI suggestions"
-                    : "Collection generated successfully"
-            });
-        } catch (e) {
-            console.error("Error generating collection:", e);
-            const errorMessage = e instanceof CollectionGenerationApiError
-                ? e.message
-                : "Failed to generate collection. Please try again.";
-            setError(errorMessage);
-            onAnalyticsEvent?.("ai_collection_generate_error", {
-                mode,
-                error: errorMessage
-            });
-            snackbarController?.open({
-                type: "error",
-                message: errorMessage
-            });
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            handleGenerate();
-        }
-    };
-
-    const tooltipTitle = configController?.readOnly
-        ? (configController.readOnlyReason || "Collection generation is disabled")
-        : undefined;
-
-    const defaultTrigger = showLabel ? (
-        <Tooltip title={tooltipTitle} asChild={true}>
-            <Button
-                variant="text"
-                size={size}
-                disabled={loading || configController?.readOnly}
-                startIcon={loading
-                    ? <CircularProgress size="smallest"/>
-                    : <AIIcon size="small"/>
-                }
-            >
-                AI Assist
-            </Button>
-        </Tooltip>
-    ) : (
-        <Tooltip title={tooltipTitle} asChild={true}>
-            <IconButton
-                size={size}
-                disabled={loading || configController?.readOnly}
-                aria-label="AI Assist"
-            >
-                {loading
-                    ? <CircularProgress size="smallest"/>
-                    : <AIIcon size="small"/>
-                }
-            </IconButton>
-        </Tooltip>
-    );
-
-    return (
-        <Menu
-            open={menuOpen}
-            onOpenChange={(open) => {
-                setMenuOpen(open);
-                if (!open) {
-                    setError(null);
-                }
-            }}
-            trigger={trigger ?? defaultTrigger}
-        >
-            <div className="p-4 flex flex-col gap-3 min-w-[360px] max-w-[480px]">
-                <div className="flex items-center gap-2">
-                    <AIIcon size="small"/>
-                    <Typography variant="subtitle2">
-                        {existingCollection ? "Modify Collection with AI" : "Generate Collection with AI"}
-                    </Typography>
-                </div>
-
-                <Typography variant="caption" color="secondary">
-                    {existingCollection
-                        ? t("describe_changes_to_make")
-                        : t("describe_collection_to_create")
-                    }
-                </Typography>
-
-                <TextField
-                    size="small"
-                    multiline
-                    autoFocus
-                    aria-label={existingCollection
-                        ? t("describe_changes_to_make")
-                        : t("describe_collection_to_create")
-                    }
-                    className="w-full text-text-primary dark:text-text-primary-dark"
-                    value={prompt}
-                    onChange={(e) => setPrompt(e.target.value)}
-                    onKeyDown={handleKeyDown}
-                    placeholder={existingCollection
-                        ? "e.g., Add a thumbnail image field with storage, make price required..."
-                        : "e.g., Create a products collection with name, price, description, and category..."
-                    }
-                    disabled={loading}
-                />
-
-                {error && (
-                    <Typography variant="caption" className="text-red-500">
-                        {error}
-                    </Typography>
-                )}
-
-                <div className="flex justify-end gap-2">
-                    <Button
-                        variant="text"
-                        size="small"
-                        onClick={() => setMenuOpen(false)}
-                        disabled={loading}
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="filled"
-                        size="small"
-                        onClick={handleGenerate}
-                        disabled={!prompt.trim() || loading}
-                        startIcon={loading ? <CircularProgress size="smallest"/> : undefined}
-                    >
-                        {loading ? "Generating..." : "Generate"}
-                    </Button>
-                </div>
-            </div>
-        </Menu>
-    );
-}

package/src/collection_editor/ui/collection_editor/AIModifiedPathsContext.tsx

@@ -1,90 +0,0 @@
-import React, { createContext, useCallback, useContext, useState, useMemo } from "react";
-import { CollectionOperation } from "../../api/generateCollectionApi";
-
-export interface AIModifiedPathsContextType {
-    /** Set of paths that were modified by AI */
-    modifiedPaths: Set<string>;
-    /** Counter that increments each time AI modifies the collection - use in keys to force remount */
-    generationCounter: number;
-    /** Add paths from operations */
-    addModifiedPaths: (operations: CollectionOperation[]) => void;
-    /** Clear a specific path (when user edits that field) */
-    clearPath: (path: string) => void;
-    /** Clear all paths (on save or cancel) */
-    clearAllPaths: () => void;
-    /** Check if a path is modified */
-    isPathModified: (path: string) => boolean;
-}
-
-const AIModifiedPathsContext = createContext<AIModifiedPathsContextType | null>(null);
-
-export function AIModifiedPathsProvider({ children }: { children: React.ReactNode | any }) {
-    const [modifiedPaths, setModifiedPaths] = useState<Set<string>>(new Set());
-    const [generationCounter, setGenerationCounter] = useState(0);
-
-    const addModifiedPaths = useCallback((operations: CollectionOperation[]) => {
-        setModifiedPaths(prev => {
-            const newSet = new Set(prev);
-            operations.forEach(op => {
-                // Add the path and all parent paths for nested modifications
-                newSet.add(op.path);
-                // For properties modifications, also mark the property itself
-                // e.g., "properties.email.description" -> also adds "properties.email"
-                const parts = op.path.split(".");
-                if (parts[0] === "properties" && parts.length >= 2) {
-                    newSet.add(`properties.${parts[1]}`);
-                }
-            });
-            return newSet;
-        });
-        // Increment counter to force property form remount
-        setGenerationCounter(prev => prev + 1);
-    }, []);
-
-    const clearPath = useCallback((path: string) => {
-        setModifiedPaths(prev => {
-            const newSet = new Set(prev);
-            // Remove exact path and any child paths
-            for (const p of newSet) {
-                if (p === path || p.startsWith(path + ".")) {
-                    newSet.delete(p);
-                }
-            }
-            return newSet;
-        });
-    }, []);
-
-    const clearAllPaths = useCallback(() => {
-        setModifiedPaths(new Set());
-    }, []);
-
-    const isPathModified = useCallback((path: string): boolean => {
-        // Check if this exact path or any parent path is modified
-        if (modifiedPaths.has(path)) return true;
-        // Check if any child paths are modified
-        for (const p of modifiedPaths) {
-            if (p.startsWith(path + ".")) return true;
-        }
-        return false;
-    }, [modifiedPaths]);
-
-    const contextValue = useMemo(() => ({
-        modifiedPaths,
-        generationCounter,
-        addModifiedPaths,
-        clearPath,
-        clearAllPaths,
-        isPathModified
-    }), [modifiedPaths, generationCounter, addModifiedPaths, clearPath, clearAllPaths, isPathModified]);
-
-    return (
-        <AIModifiedPathsContext.Provider value={contextValue}>
-            {children}
-        </AIModifiedPathsContext.Provider>
-    );
-}
-
-export function useAIModifiedPaths(): AIModifiedPathsContextType | null {
-    return useContext(AIModifiedPathsContext);
-}
-