@rebasepro/admin 0.0.1-canary.4f204c2

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

@@ -0,0 +1,286 @@
+import { AIIcon } from "@rebasepro/core";
+;
+import React, { useState } from "react";
+;
+import { EntityCollection } from "@rebasepro/types";
+import { Button, Card, Chip, cls, Container, Tooltip, Typography , iconSize } from "@rebasepro/ui";
+import { CodeIcon, TableIcon, ShoppingCartIcon, UserIcon, FileTextIcon, FileIcon } from "lucide-react";
+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/formex";
+import { useCollectionEditorController } from "../../useCollectionEditorController";
+import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
+import { CollectionGenerationCallback } from "../../api/generateCollectionApi";
+import { prettifyIdentifier } from "@rebasepro/utils";
+
+export function CollectionEditorWelcomeView({
+    path,
+    parentCollection,
+    onContinue,
+    existingCollectionPaths,
+    generateCollection,
+    onAnalyticsEvent,
+    unmappedTables,
+    onImportFromTable
+}: {
+    path: string;
+    parentCollection?: EntityCollection;
+    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<EntityCollection>();
+
+    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

@@ -0,0 +1,164 @@
+
+import React, { useCallback, useState } from "react";
+import { Button, cls, Dialog, DialogActions, DialogContent, DialogTitle, Typography , iconSize } from "@rebasepro/ui";
+import { CodeIcon } from "lucide-react";
+import { EntityCollection } from "@rebasepro/types";
+import { validateCollectionJson, CollectionValidationError } from "../../validateCollectionJson";
+
+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: EntityCollection) => 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<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>
+
+                <textarea
+                    value={jsonValue}
+                    onChange={handleJsonChange}
+                    placeholder={EXAMPLE_JSON}
+                    rows={12}
+                    className={cls(
+                        "w-full p-3 font-mono text-sm rounded-md border resize-none overflow-y-auto",
+                        "bg-surface-50 dark:bg-surface-800",
+                        "focus:outline-none focus:ring-2 focus:ring-primary",
+                        "h-[300px]",
+                        errors.length > 0 && touched
+                            ? "border-red-500 dark:border-red-400"
+                            : "border-surface-300 dark:border-surface-600"
+                    )}
+                />
+
+                {errors.length > 0 && touched && (
+                    <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-md border border-red-200 dark:border-red-800">
+                        <Typography variant="body2" className="font-medium text-red-700 dark:text-red-400 mb-2">
+                            Validation errors:
+                        </Typography>
+                        <ul className="list-disc list-inside space-y-1">
+                            {errors.map((error, index) => (
+                                <li key={index} className="text-sm text-red-600 dark:text-red-400">
+                                    {error.path ? (
+                                        <>
+                                            <code className="bg-red-100 dark:bg-red-900/40 px-1 rounded">
+                                                {error.path}
+                                            </code>
+                                            : {error.message}
+                                        </>
+                                    ) : (
+                                        error.message
+                                    )}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+
+                {isValid && (
+                    <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-md border border-green-200 dark:border-green-800">
+                        <Typography variant="body2" className="text-green-700 dark:text-green-400">
+                            ✓ JSON is valid and ready to import
+                        </Typography>
+                    </div>
+                )}
+            </DialogContent>
+            <DialogActions>
+                <Button
+                    variant="text"
+                    onClick={handleClose}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    variant="filled"
+                    color="primary"
+                    onClick={handleImport}
+                    disabled={!isValid}
+                >
+                    Import Collection
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}