@firecms/collection_editor 3.0.1 → 3.1.0-canary.768c91f

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,6 +1,7 @@
-import React from "react";
-import { EntityCollection, prettifyIdentifier, } from "@firecms/core";
-import { Card, Chip, cls, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
+import React, { useState } from "react";
+import { AIIcon, EntityCollection, prettifyIdentifier, } from "@firecms/core";
+import { Button, Card, Chip, cls, CodeIcon, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
+import { CollectionJsonImportDialog } from "./CollectionJsonImportDialog";
 
 import { productsCollectionTemplate } from "./templates/products_template";
 import { blogCollectionTemplate } from "./templates/blog_template";
@@ -9,17 +10,23 @@ import { ImportFileUpload } from "@firecms/data_import";
 import { pagesCollectionTemplate } from "./templates/pages_template";
 import { useFormex } from "@firecms/formex";
 import { useCollectionEditorController } from "../../useCollectionEditorController";
+import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
+import { CollectionGenerationCallback } from "../../api/generateCollectionApi";
 
 export function CollectionEditorWelcomeView({
-                                                path,
-                                                parentCollection,
-                                                onContinue,
-                                                existingCollectionPaths
-                                            }: {
+    path,
+    parentCollection,
+    onContinue,
+    existingCollectionPaths,
+    generateCollection,
+    onAnalyticsEvent
+}: {
     path: string;
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
+    generateCollection?: CollectionGenerationCallback;
+    onAnalyticsEvent?: (event: string, params?: object) => void;
 }) {
 
     const { pathSuggestions } = useCollectionEditorController();
@@ -33,6 +40,8 @@ export function CollectionEditorWelcomeView({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const [jsonImportOpen, setJsonImportOpen] = useState(false);
+
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
@@ -53,22 +62,22 @@ export function CollectionEditorWelcomeView({
                 {(filteredSuggestions ?? []).length > 0 && <div className={"my-2"}>
 
                     <Typography variant={"caption"}
-                                color={"secondary"}>
+                        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={"cyanLighter"}
-                                  onClick={() => {
-                                      setFieldValue("name", prettifyIdentifier(suggestion));
-                                      setFieldValue("id", suggestion);
-                                      setFieldValue("path", suggestion);
-                                      setFieldValue("properties", undefined);
-                                      onContinue();
-                                  }}
-                                  size="small">
+                                colorScheme={"cyanLighter"}
+                                onClick={() => {
+                                    setFieldValue("name", prettifyIdentifier(suggestion));
+                                    setFieldValue("id", suggestion);
+                                    setFieldValue("path", suggestion);
+                                    setFieldValue("properties", undefined);
+                                    onContinue();
+                                }}
+                                size="small">
                                 {suggestion}
                             </Chip>
                         ))}
@@ -76,61 +85,118 @@ export function CollectionEditorWelcomeView({
                     </div>
 
                 </div>}
+                <div className="flex flex-row gap-8">
 
-                <div className={"my-2"}>
-                    <Typography variant={"caption"}
-                                color={"secondary"}>
-                        ● Select a template:
-                    </Typography>
-
-                    <div className={"flex gap-4"}>
-                        <TemplateButton title={"Products"}
-                                        subtitle={"A collection of products with images, prices and stock"}
-                                        icon={<Icon size={"small"}
-                                                    iconKey={productsCollectionTemplate.icon! as string}/>}
-                                        onClick={() => {
-                                            setValues(productsCollectionTemplate);
-                                            onContinue();
-                                        }}/>
-                        <TemplateButton title={"Users"}
-                                        subtitle={"A collection of users with emails, names and roles"}
-                                        icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon! as string}/>}
-                                        onClick={() => {
-                                            setValues(usersCollectionTemplate);
-                                            onContinue();
-                                        }}/>
-                        <TemplateButton title={"Blog posts"}
-                                        subtitle={"A collection of blog posts with images, authors and complex content"}
-                                        icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon! as string}/>}
-                                        onClick={() => {
-                                            setValues(blogCollectionTemplate);
-                                            onContinue();
-                                        }}/>
-                        <TemplateButton title={"Pages"}
-                                        subtitle={"A collection of pages with images, authors and complex content"}
-                                        icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon! as string}/>}
-                                        onClick={() => {
-                                            setValues(pagesCollectionTemplate);
-                                            onContinue();
-                                        }}/>
+                    {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="outlined"
+                                        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={"outlined"}
+                            onClick={() => setJsonImportOpen(true)}
+                            startIcon={<CodeIcon size="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"}>
+                        color={"secondary"}
+                        className={"mb-2"}>
                         ● Create a collection from a file (csv, json, xls, xslx...)
                     </Typography>
 
-                    <ImportFileUpload onDataAdded={(data, propertiesOrder) => onContinue(data, propertiesOrder)}/>
+                    <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={<Icon size={"small"}
+                                iconKey={productsCollectionTemplate.icon! as string} />}
+                            onClick={() => {
+                                setValues(productsCollectionTemplate);
+                                onContinue();
+                            }} />
+                        <TemplateButton title={"Users"}
+                            subtitle={"A collection of users with emails, names and roles"}
+                            icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon! as string} />}
+                            onClick={() => {
+                                setValues(usersCollectionTemplate);
+                                onContinue();
+                            }} />
+                        <TemplateButton title={"Blog posts"}
+                            subtitle={"A collection of blog posts with images, authors and complex content"}
+                            icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon! as string} />}
+                            onClick={() => {
+                                setValues(blogCollectionTemplate);
+                                onContinue();
+                            }} />
+                        <TemplateButton title={"Pages"}
+                            subtitle={"A collection of pages with images, authors and complex content"}
+                            icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon! as string} />}
+                            onClick={() => {
+                                setValues(pagesCollectionTemplate);
+                                onContinue();
+                            }} />
+                    </div>
+
+                </div>
+
 
-                {/*<div style={{ height: "52px" }}/>*/}
 
             </Container>
         </div>
@@ -138,11 +204,11 @@ export function CollectionEditorWelcomeView({
 }
 
 export function TemplateButton({
-                                   title,
-                                   subtitle,
-                                   icon,
-                                   onClick
-                               }: {
+    title,
+    subtitle,
+    icon,
+    onClick
+}: {
     title: string,
     icon: React.ReactNode,
     subtitle: string,
@@ -151,12 +217,12 @@ export function TemplateButton({
 
     return (
         <Tooltip title={subtitle}
-                 asChild={true}>
+            asChild={true}>
             <Card
                 onClick={onClick}
                 className={cls(
-                    "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
-                    "text-surface-700 dark:text-surface-accent-300",
+                    "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 "
                 )}
@@ -164,7 +230,7 @@ export function TemplateButton({
                 {icon}
                 <div className={"flex flex-col items-start"}>
 
-                    <Typography variant={"subtitle1"}>
+                    <Typography variant={"subtitle2"}>
                         {title}
                     </Typography>
 

package/src/ui/collection_editor/CollectionJsonImportDialog.tsx

@@ -0,0 +1,171 @@
+import React, { useCallback, useState } from "react";
+import {
+    Button,
+    cls,
+    CodeIcon,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Typography
+} from "@firecms/ui";
+import { EntityCollection } from "@firecms/core";
+import { validateCollectionJson, CollectionValidationError } from "../../utils/validateCollectionJson";
+
+const EXAMPLE_JSON = `{
+  "id": "products",
+  "name": "Products",
+  "path": "products",
+  "icon": "shopping_cart",
+  "properties": {
+    "name": {
+      "dataType": "string",
+      "name": "Name",
+      "validation": { "required": true }
+    },
+    "price": {
+      "dataType": "number",
+      "name": "Price"
+    },
+    "available": {
+      "dataType": "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="small" />
+                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-900",
+                        "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>
+    );
+}