@rebasepro/cms 0.17.3 → 0.18.0

package/src/collection_editor/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,301 +0,0 @@
-import { AIIcon } from "@rebasepro/app";
-;
-import React, { useState } from "react";
-;
-
-import {
-    Button,
-    Card,
-    Chip,
-    cls,
-    CodeIcon,
-    Container,
-    FileIcon,
-    FileTextIcon,
-    iconSize,
-    ShoppingCartIcon,
-    TableIcon,
-    Tooltip,
-    Typography,
-    UserIcon
-} from "@rebasepro/ui";
-import { CollectionJsonImportDialog } from "./CollectionJsonImportDialog";
-
-import { productsCollectionTemplate } from "./templates/products_template";
-import { blogCollectionTemplate } from "./templates/blog_template";
-import { usersCollectionTemplate } from "./templates/users_template";
-import { ImportFileUpload } from "../../_cms_internals";
-import { pagesCollectionTemplate } from "./templates/pages_template";
-import { useFormex } from "@rebasepro/forms";
-import { useCollectionEditorController } from "../../useCollectionEditorController";
-import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
-import { CollectionGenerationCallback } from "../../api/generateCollectionApi";
-import { prettifyIdentifier } from "@rebasepro/utils";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-export function CollectionEditorWelcomeView({
-    path,
-    parentCollection,
-    onContinue,
-    existingCollectionPaths,
-    generateCollection,
-    onAnalyticsEvent,
-    unmappedTables,
-    onImportFromTable
-}: {
-    path: string;
-    parentCollection?: AdminCollection;
-    onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
-    existingCollectionPaths?: string[];
-    generateCollection?: CollectionGenerationCallback;
-    onAnalyticsEvent?: (event: string, params?: object) => void;
-    unmappedTables?: string[];
-    onImportFromTable?: (tableName: string) => void;
-}) {
-
-    const { pathSuggestions } = useCollectionEditorController();
-
-    const filteredSuggestions = (pathSuggestions ?? []).filter(s => !(existingCollectionPaths ?? []).find(c => c.trim().toLowerCase() === s.trim().toLowerCase()));
-
-    const {
-        values,
-        setFieldValue,
-        setValues,
-        submitCount
-    } = useFormex<AdminCollection>();
-
-    const [jsonImportOpen, setJsonImportOpen] = useState(false);
-    const [importingTable, setImportingTable] = useState<string | null>(null);
-
-    // Filter unmapped tables that aren't already mapped
-    const filteredUnmappedTables = (unmappedTables ?? []).filter(
-        t => !(existingCollectionPaths ?? []).find(c => c.trim().toLowerCase() === t.trim().toLowerCase())
-    );
-
-    return (
-        <div className={"overflow-auto my-auto"}>
-            <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
-
-                <div
-                    className="flex flex-row py-2 pt-3 items-center">
-                    <Typography variant={"h4"} className={"grow"}>
-                        New collection
-                    </Typography>
-                </div>
-
-                {parentCollection && <Chip colorScheme={"teal"}>
-                    <Typography variant={"caption"}>
-                        This is a subcollection of <b>{parentCollection.name}</b>
-                    </Typography>
-                </Chip>}
-
-                {filteredUnmappedTables.length > 0 && <div className={"my-2"}>
-
-                    <Typography variant={"caption"}
-                        color={"secondary"}>
-                        ● Import from an existing database table:
-                    </Typography>
-                    <div className={"flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7"}>
-
-                        {filteredUnmappedTables.map((tableName) => (
-                            <Chip key={tableName}
-                                colorScheme={"purple"}
-                                onClick={() => {
-                                    if (onImportFromTable) {
-                                        setImportingTable(tableName);
-                                        onImportFromTable(tableName);
-                                    } else {
-                                        // Fallback: just set path/name like pathSuggestions
-                                        setFieldValue("name", prettifyIdentifier(tableName));
-                                        setFieldValue("id", tableName);
-                                        setFieldValue("path", tableName);
-                                        onContinue();
-                                    }
-                                }}
-                                size="small">
-                                <TableIcon size={iconSize.smallest}/>
-                                {importingTable === tableName ? "Loading..." : tableName}
-                            </Chip>
-                        ))}
-
-                    </div>
-
-                </div>}
-
-                {(filteredSuggestions ?? []).length > 0 && <div className={"my-2"}>
-
-                    <Typography variant={"caption"}
-                        color={"secondary"}>
-                        ● Use one of the existing paths in your database:
-                    </Typography>
-                    <div className={"flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7"}>
-
-                        {filteredSuggestions?.map((suggestion, index) => (
-                            <Chip key={suggestion}
-                                colorScheme={"cyan"}
-                                onClick={() => {
-                                    setFieldValue("name", prettifyIdentifier(suggestion));
-                                    setFieldValue("id", suggestion);
-                                    setFieldValue("path", suggestion);
-                                    setFieldValue("properties", undefined);
-                                    onContinue();
-                                }}
-                                size="small">
-                                {suggestion}
-                            </Chip>
-                        ))}
-
-                    </div>
-
-                </div>}
-                <div className="flex flex-row gap-8">
-
-                    {generateCollection && (
-                        <div className={"my-2"}>
-                            <Typography variant={"caption"}
-                                color={"secondary"}
-                                className={"mb-2"}>
-                                ● Describe your collection to AI:
-                            </Typography>
-
-                            <AICollectionGeneratorPopover
-                                onGenerated={(generatedCollection) => {
-                                    setValues(generatedCollection);
-                                    onContinue();
-                                }}
-                                generateCollection={generateCollection}
-                                onAnalyticsEvent={onAnalyticsEvent}
-                                trigger={
-                                    <Button
-                                        variant="filled"
-                                        color="neutral"
-                                        startIcon={<AIIcon size="small"/>}
-                                    >
-                                        Generate with AI
-                                    </Button>
-                                }
-                            />
-                        </div>
-                    )}
-
-                    <div className={"my-2"}>
-                        <Typography variant={"caption"}
-                            color={"secondary"}
-                            className={"mb-2"}>
-                            ● Create from JSON configuration:
-                        </Typography>
-
-                        <Button
-                            variant="filled"
-                            color="neutral"
-                            onClick={() => setJsonImportOpen(true)}
-                            startIcon={<CodeIcon size={iconSize.small}/>}
-                        >
-                            Paste JSON Configuration
-                        </Button>
-
-                        <CollectionJsonImportDialog
-                            open={jsonImportOpen}
-                            onClose={() => setJsonImportOpen(false)}
-                            onImport={(collection) => {
-                                setValues(collection);
-                                onContinue();
-                            }}
-                        />
-                    </div>
-
-                </div>
-
-                {!parentCollection && <div>
-
-                    <Typography variant={"caption"}
-                        color={"secondary"}
-                        className={"mb-2"}>
-                        ● Create a collection from a file (csv, json, xls, xslx...)
-                    </Typography>
-
-                    <ImportFileUpload onDataAdded={(data, propertiesOrder) => onContinue(data, propertiesOrder)}/>
-
-                </div>}
-
-                <div className={"my-2"}>
-                    <Typography variant={"caption"}
-                        color={"secondary"}>
-                        ● Select a template:
-                    </Typography>
-
-                    <div className={"flex gap-2"}>
-                        <TemplateButton title={"Products"}
-                            subtitle={"A collection of products with images, prices and stock"}
-                            icon={<ShoppingCartIcon size={iconSize.small}/>}
-                            onClick={() => {
-                                setValues(productsCollectionTemplate);
-                                onContinue();
-                            }}/>
-                        <TemplateButton title={"Users"}
-                            subtitle={"A collection of users with emails, names and roles"}
-                            icon={<UserIcon size={iconSize.small}/>}
-                            onClick={() => {
-                                setValues(usersCollectionTemplate);
-                                onContinue();
-                            }}/>
-                        <TemplateButton title={"Blog posts"}
-                            subtitle={"A collection of blog posts with images, authors and complex content"}
-                            icon={<FileTextIcon size={iconSize.small}/>}
-                            onClick={() => {
-                                setValues(blogCollectionTemplate);
-                                onContinue();
-                            }}/>
-                        <TemplateButton title={"Pages"}
-                            subtitle={"A collection of pages with images, authors and complex content"}
-                            icon={<FileIcon size={iconSize.small}/>}
-                            onClick={() => {
-                                setValues(pagesCollectionTemplate);
-                                onContinue();
-                            }}/>
-                    </div>
-
-                </div>
-
-            </Container>
-        </div>
-    );
-}
-
-export function TemplateButton({
-    title,
-    subtitle,
-    icon,
-    onClick
-}: {
-    title: string,
-    icon: React.ReactNode | any,
-    subtitle: string,
-    onClick?: () => void
-}) {
-
-    return (
-        <Tooltip title={subtitle}
-            asChild={true}>
-            <Card
-                onClick={onClick}
-                className={cls(
-                    "my-2 rounded-md border px-4 py-3 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
-                    "text-text-secondary dark:text-text-secondary-dark",
-                    "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
-                    "border-surface-400 dark:border-surface-600 "
-                )}
-            >
-                {icon}
-                <div className={"flex flex-col items-start"}>
-
-                    <Typography variant={"subtitle2"}>
-                        {title}
-                    </Typography>
-
-                </div>
-            </Card>
-        </Tooltip>
-    );
-
-}

package/src/collection_editor/ui/collection_editor/CollectionJsonImportDialog.tsx

@@ -1,172 +0,0 @@
-
-import React, { useCallback, useState } from "react";
-import {
-    Alert,
-    Button,
-    cls,
-    CodeIcon,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    iconSize,
-    TextField,
-    Typography
-} from "@rebasepro/ui";
-
-import { validateCollectionJson, CollectionValidationError } from "../../validateCollectionJson";
-import type { AdminCollection } from "@rebasepro/cms-types";
-
-const EXAMPLE_JSON = `{
-  "id": "products",
-  "name": "Products",
-  "path": "products",
-  "icon": "shopping_cart",
-  "properties": {
-    "name": {
-      "type": "string",
-      "name": "Name",
-      "validation": { "required": true }
-    },
-    "price": {
-      "type": "number",
-      "name": "Price"
-    },
-    "available": {
-      "type": "boolean",
-      "name": "Available"
-    }
-  }
-}`;
-
-export interface CollectionJsonImportDialogProps {
-    open: boolean;
-    onClose: () => void;
-    onImport: (collection: AdminCollection) => void;
-}
-
-export function CollectionJsonImportDialog({
-    open,
-    onClose,
-    onImport
-}: CollectionJsonImportDialogProps) {
-    const [jsonValue, setJsonValue] = useState<string>("");
-    const [errors, setErrors] = useState<CollectionValidationError[]>([]);
-    const [touched, setTouched] = useState(false);
-
-    const handleJsonChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        const value = e.target.value;
-        setJsonValue(value);
-        setTouched(true);
-
-        if (!value.trim()) {
-            setErrors([]);
-            return;
-        }
-
-        const result = validateCollectionJson(value);
-        setErrors(result.errors);
-    }, []);
-
-    const handleImport = useCallback(() => {
-        const result = validateCollectionJson(jsonValue);
-        if (result.valid && result.collection) {
-            onImport(result.collection);
-            setJsonValue("");
-            setErrors([]);
-            setTouched(false);
-            onClose();
-        }
-    }, [jsonValue, onImport, onClose]);
-
-    const handleClose = useCallback(() => {
-        setJsonValue("");
-        setErrors([]);
-        setTouched(false);
-        onClose();
-    }, [onClose]);
-
-    const isValid = touched && jsonValue.trim() && errors.length === 0;
-
-    return (
-        <Dialog
-            open={open}
-            onOpenChange={(open) => !open && handleClose()}
-            maxWidth="2xl"
-        >
-            <DialogTitle className="flex items-center gap-2">
-                <CodeIcon size={iconSize.smallest}/>
-                Import Collection from JSON
-            </DialogTitle>
-            <DialogContent className="flex flex-col gap-4">
-                <Typography variant="body2" color="secondary">
-                    Paste a JSON object representing your collection configuration.
-                    The JSON must include <code className="bg-surface-200 dark:bg-surface-700 px-1 rounded">id</code>,
-                    <code className="bg-surface-200 dark:bg-surface-700 px-1 rounded">name</code>,
-                    <code className="bg-surface-200 dark:bg-surface-700 px-1 rounded">path</code>, and
-                    <code className="bg-surface-200 dark:bg-surface-700 px-1 rounded">properties</code>.
-                </Typography>
-
-                <TextField
-                    multiline
-                    minRows={12}
-                    aria-label="Collection JSON"
-                    value={jsonValue}
-                    onChange={handleJsonChange}
-                    placeholder={EXAMPLE_JSON}
-                    error={errors.length > 0 && touched}
-                    className="w-full"
-                    inputClassName="font-mono text-sm resize-none overflow-y-auto h-[300px]"
-                />
-
-                {errors.length > 0 && touched && (
-                    <Alert color="error">
-                        <Typography variant="body2" className="font-medium mb-2">
-                            Validation errors:
-                        </Typography>
-                        <ul className="list-disc list-inside space-y-1">
-                            {errors.map((error, index) => (
-                                <li key={index} className="text-sm">
-                                    {error.path ? (
-                                        <>
-                                            <code className="bg-red-100 dark:bg-red-900/40 px-1 rounded">
-                                                {error.path}
-                                            </code>
-                                            : {error.message}
-                                        </>
-                                    ) : (
-                                        error.message
-                                    )}
-                                </li>
-                            ))}
-                        </ul>
-                    </Alert>
-                )}
-
-                {isValid && (
-                    <Alert color="success">
-                        <Typography variant="body2">
-                            ✓ JSON is valid and ready to import
-                        </Typography>
-                    </Alert>
-                )}
-            </DialogContent>
-            <DialogActions>
-                <Button
-                    variant="text"
-                    onClick={handleClose}
-                >
-                    Cancel
-                </Button>
-                <Button
-                    variant="filled"
-                    color="primary"
-                    onClick={handleImport}
-                    disabled={!isValid}
-                >
-                    Import Collection
-                </Button>
-            </DialogActions>
-        </Dialog>
-    );
-}