@firecms/collection_editor 3.0.0-rc.4 → 3.0.0-tw4.13

package/dist/types/collection_editor_controller.d.ts

@@ -34,4 +34,5 @@ export interface CollectionEditorController {
         existingEntities: Entity<any>[];
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
+    pathSuggestions: string[] | undefined;
 }

package/dist/ui/collection_editor/CollectionEditorDialog.d.ts

@@ -24,7 +24,6 @@ export interface CollectionEditorDialogProps {
         }>;
         icon: React.ReactNode;
     };
-    pathSuggestions?: (path?: string) => Promise<string[]>;
     getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;

package/dist/ui/collection_editor/CollectionEditorWelcomeView.d.ts

@@ -1,12 +1,11 @@
 import React from "react";
 import { EntityCollection } from "@firecms/core";
-export declare function CollectionEditorWelcomeView({ path, pathSuggestions, parentCollection, onContinue, existingCollectionPaths }: {
+export declare function CollectionEditorWelcomeView({ path, parentCollection, onContinue, existingCollectionPaths }: {
     path: string;
-    pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function TemplateButton({ title, subtitle, icon, onClick }: {
     title: string;
     icon: React.ReactNode;

package/dist/useCollectionEditorPlugin.d.ts

@@ -26,6 +26,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
         icon: React.ReactNode;
     };
     collectionInference?: CollectionInference;
+    pathSuggestions?: string[];
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     getUser?: (uid: string) => USER | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
@@ -42,5 +43,5 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getUser, collectionInference, getData, onAnalyticsEvent, includeIntroView }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getUser, collectionInference, getData, onAnalyticsEvent, includeIntroView, pathSuggestions }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
 export declare function IntroWidget(): import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-rc.4",
+  "version": "3.0.0-tw4.13",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-rc.4",
-    "@firecms/data_import": "^3.0.0-rc.4",
-    "@firecms/data_import_export": "^3.0.0-rc.4",
-    "@firecms/formex": "^3.0.0-rc.4",
-    "@firecms/schema_inference": "^3.0.0-rc.4",
-    "@firecms/ui": "^3.0.0-rc.4",
+    "@firecms/data_export": "^3.0.0-tw4.13",
+    "@firecms/data_import": "^3.0.0-tw4.13",
+    "@firecms/data_import_export": "^3.0.0-tw4.13",
+    "@firecms/formex": "^3.0.0-tw4.13",
+    "@firecms/schema_inference": "^3.0.0-tw4.13",
+    "@firecms/ui": "^3.0.0-tw4.13",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.1"
   },
@@ -49,18 +49,18 @@
     ]
   },
   "devDependencies": {
-    "@jest/globals": "^30.1.2",
+    "@jest/globals": "^30.2.0",
     "@types/react": "^18.3.24",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.7.0",
     "babel-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-af1b7da-20250417",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
-    "react-router": "^6.30.1",
-    "react-router-dom": "^6.30.1",
-    "ts-jest": "^29.4.3",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.6"
+    "react-router": "^6.30.2",
+    "react-router-dom": "^6.30.2",
+    "ts-jest": "^29.4.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
   },
   "files": [
     "dist",
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5fab14c8d1fff7dd606512b5d9b3f1842e601f8c"
+  "gitHead": "eca601fe784ee2a697eb0ef0a9b4a4fedd13a1e9"
 }

package/src/ConfigControllerProvider.tsx

@@ -49,6 +49,8 @@ export interface ConfigControllerProviderProps {
         icon: React.ReactNode
     };
 
+    pathSuggestions?: string[];
+
     getUser?: (uid: string) => User | null;
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
@@ -68,6 +70,7 @@ export const ConfigControllerProvider = React.memo(
                                           getUser,
                                           getData,
                                           onAnalyticsEvent,
+                                          pathSuggestions
                                       }: PropsWithChildren<ConfigControllerProviderProps>) {
 
         const navigation = useNavigationController();
@@ -87,7 +90,8 @@ export const ConfigControllerProvider = React.memo(
                 name?: string
             },
             redirect: boolean,
-            existingEntities?: Entity<any>[]
+            existingEntities?: Entity<any>[],
+            pathSuggestions?: string[];
         }>();
 
         const [currentPropertyDialog, setCurrentPropertyDialog] = React.useState<{
@@ -134,7 +138,8 @@ export const ConfigControllerProvider = React.memo(
                 isNewCollection: false,
                 parentCollection,
                 redirect: false,
-                existingEntities
+                existingEntities,
+                pathSuggestions
             });
         };
 
@@ -215,7 +220,8 @@ export const ConfigControllerProvider = React.memo(
                 parentCollectionIds,
                 parentCollection,
                 initialValues,
-                redirect
+                redirect,
+                pathSuggestions
             });
         };
 
@@ -227,6 +233,7 @@ export const ConfigControllerProvider = React.memo(
                         createCollection,
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
+                        pathSuggestions
                     }}>
 
                     {children}

package/src/types/collection_editor_controller.tsx

@@ -41,4 +41,6 @@ export interface CollectionEditorController {
 
     configPermissions: CollectionEditorPermissionsBuilder;
 
+    pathSuggestions: string[] | undefined;
+
 }

package/src/ui/MissingReferenceWidget.tsx

@@ -1,4 +1,4 @@
-import { ErrorView, unslugify, useNavigationController } from "@firecms/core";
+import { ErrorView, prettifyIdentifier, useNavigationController } from "@firecms/core";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { Button } from "@firecms/ui";
 
@@ -15,7 +15,7 @@ export function MissingReferenceWidget({ path: pathProp }: {
                 size={"small"}
                 onClick={() => {
                     collectionEditor.createCollection({
-                        initialValues: { path, name: unslugify(path) },
+                        initialValues: { path, name: prettifyIdentifier(path) },
                         parentCollectionIds,
                         redirect: false,
                         sourceClick: "missing_reference"

package/src/ui/PropertyAddColumnComponent.tsx

@@ -29,7 +29,7 @@ export function PropertyAddColumnComponent({
             asChild={true}
             title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950"}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 bg-surface-100/40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:bg-surface-950/40 dark:hover:bg-surface-950"}
                 // className={onHover ? "bg-white dark:bg-surface-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -241,7 +241,7 @@ export function CollectionDetailsForm({
                             expanded={advancedPanelExpanded}
                             onExpandedChange={setAdvancedPanelExpanded}
                             title={
-                                <div className="flex flex-row text-surface-500">
+                                <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
                                     <SettingsIcon/>
                                     <Typography variant={"subtitle2"}
                                                 className="ml-2">

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -80,7 +80,6 @@ export interface CollectionEditorDialogProps {
         }>,
         icon: React.ReactNode
     };
-    pathSuggestions?: (path?: string) => Promise<string[]>;
     getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;
@@ -241,7 +240,6 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                                                      extraView,
                                                                      handleCancel,
                                                                      setFormDirty,
-                                                                     pathSuggestions,
                                                                      getUser,
                                                                      parentCollection,
                                                                      getData,
@@ -555,6 +553,15 @@ function CollectionEditorInternal<M extends Record<string, any>>({
         });
     };
 
+    const onWelcomeScreenContinue = (importData?: object[], propertiesOrder?: string[]) => {
+        if (importData) {
+            onImportDataSet(importData, propertiesOrder);
+            setCurrentView("import_data_mapping");
+        } else {
+            setCurrentView("details");
+        }
+    };
+
     return <DialogContent fullHeight={true}>
         <Formex value={formController}>
 
@@ -593,18 +600,9 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "welcome" &&
                         <CollectionEditorWelcomeView
                             path={path}
-                            onContinue={(importData, propertiesOrder) => {
-                                // console.log("Import data", importData, propertiesOrder)
-                                if (importData) {
-                                    onImportDataSet(importData, propertiesOrder);
-                                    setCurrentView("import_data_mapping");
-                                } else {
-                                    setCurrentView("details");
-                                }
-                            }}
+                            onContinue={onWelcomeScreenContinue}
                             existingCollectionPaths={existingPaths}
-                            parentCollection={parentCollection}
-                            pathSuggestions={pathSuggestions}/>}
+                            parentCollection={parentCollection}/>}
 
                     {currentView === "import_data_mapping" && importConfig &&
                         <CollectionEditorImportMapping importConfig={importConfig}
@@ -688,7 +686,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 </IconButton>}/>
                     }
 
-                    {currentView !== "welcome" && <DialogActions
+                    <DialogActions
                         position={"absolute"}>
                         {error && <ErrorView error={error}/>}
 
@@ -717,7 +715,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
                         {isNewCollection && includeTemplates && currentView === "details" &&
                             <Button variant={"text"}
-                                    color={"primary"}
+                                    color={"neutral"}
                                     type="button"
                                     onClick={() => setCurrentView("welcome")}>
                                 <ArrowBackIcon/>
@@ -726,20 +724,25 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
                         {isNewCollection && currentView === "properties" && <Button variant={"text"}
                                                                                     type="button"
-                                                                                    color={"primary"}
+                                                                                    color={"neutral"}
                                                                                     onClick={() => setCurrentView("details")}>
                             <ArrowBackIcon/>
                             Back
                         </Button>}
 
                         <Button variant={"text"}
-                                color={"primary"}
+                                color={"neutral"}
                                 onClick={() => {
                                     handleCancel();
                                 }}>
                             Cancel
                         </Button>
 
+                        {currentView === "welcome" &&
+                            <Button variant={"text"} onClick={() => onWelcomeScreenContinue()}>
+                                Continue from scratch
+                            </Button>}
+
                         {isNewCollection && currentView === "import_data_mapping" &&
                             <Button
                                 variant={"filled"}
@@ -784,7 +787,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             Update collection
                         </LoadingButton>}
 
-                    </DialogActions>}
+                    </DialogActions>
                 </form>
             </>
 

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
-import { EntityCollection, unslugify, } from "@firecms/core";
-import { Button, Card, Chip, CircularProgress, cls, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
+import React from "react";
+import { EntityCollection, prettifyIdentifier, } from "@firecms/core";
+import { Card, Chip, cls, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
 
 import { productsCollectionTemplate } from "./templates/products_template";
 import { blogCollectionTemplate } from "./templates/blog_template";
@@ -8,34 +8,23 @@ import { usersCollectionTemplate } from "./templates/users_template";
 import { ImportFileUpload } from "@firecms/data_import";
 import { pagesCollectionTemplate } from "./templates/pages_template";
 import { useFormex } from "@firecms/formex";
+import { useCollectionEditorController } from "../../useCollectionEditorController";
 
 export function CollectionEditorWelcomeView({
                                                 path,
-                                                pathSuggestions,
                                                 parentCollection,
                                                 onContinue,
                                                 existingCollectionPaths
                                             }: {
     path: string;
-    pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
 }) {
 
-    const [loadingPathSuggestions, setLoadingPathSuggestions] = useState(false);
-    const [filteredPathSuggestions, setFilteredPathSuggestions] = useState<string[] | undefined>();
-    useEffect(() => {
-        if (pathSuggestions && existingCollectionPaths) {
-            setLoadingPathSuggestions(true);
-            pathSuggestions(path)
-                .then(suggestions => {
-                    const filteredSuggestions = suggestions.filter(s => !(existingCollectionPaths ?? []).find(c => c.trim().toLowerCase() === s.trim().toLowerCase()));
-                    setFilteredPathSuggestions(filteredSuggestions);
-                })
-                .finally(() => setLoadingPathSuggestions(false));
-        }
-    }, [existingCollectionPaths, path, pathSuggestions]);
+    const { pathSuggestions } = useCollectionEditorController();
+
+    const filteredSuggestions = (pathSuggestions ?? []).filter(s => !(existingCollectionPaths ?? []).find(c => c.trim().toLowerCase() === s.trim().toLowerCase()));
 
     const {
         values,
@@ -44,11 +33,6 @@ export function CollectionEditorWelcomeView({
         submitCount
     } = useFormex<EntityCollection>();
 
-    const noSuggestions = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0;
-    if (!noSuggestions) {
-        return null;
-    }
-
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
@@ -66,20 +50,19 @@ export function CollectionEditorWelcomeView({
                     </Typography>
                 </Chip>}
 
-                <div className={"my-2"}>
+                {(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"}>
 
-                        {loadingPathSuggestions && !filteredPathSuggestions && <CircularProgress size={"small"}/>}
-
-                        {filteredPathSuggestions?.map((suggestion, index) => (
+                        {filteredSuggestions?.map((suggestion, index) => (
                             <Chip key={suggestion}
                                   colorScheme={"cyanLighter"}
                                   onClick={() => {
-                                      setFieldValue("name", unslugify(suggestion));
+                                      setFieldValue("name", prettifyIdentifier(suggestion));
                                       setFieldValue("id", suggestion);
                                       setFieldValue("path", suggestion);
                                       setFieldValue("properties", undefined);
@@ -89,15 +72,10 @@ export function CollectionEditorWelcomeView({
                                 {suggestion}
                             </Chip>
                         ))}
-                        {(filteredPathSuggestions ?? []).length === 0 && !loadingPathSuggestions && <Typography
-                            variant={"caption"}
-                            color={"secondary"}>
-                            No existing paths found
-                        </Typography>}
 
                     </div>
 
-                </div>
+                </div>}
 
                 <div className={"my-2"}>
                     <Typography variant={"caption"}
@@ -151,12 +129,6 @@ export function CollectionEditorWelcomeView({
 
                 </div>}
 
-                <div>
-
-                    <Button variant={"text"} onClick={() => onContinue()} className={"my-2"}>
-                        Continue from scratch
-                    </Button>
-                </div>
 
                 {/*<div style={{ height: "52px" }}/>*/}
 
@@ -184,7 +156,7 @@ export function TemplateButton({
                 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",
+                    "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 "
                 )}

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -303,7 +303,7 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950"}>
+        <div className={"grid grid-cols-12 gap-2 h-full bg-surface dark:bg-surface-dark"}>
             <div className={cls(
                 "bg-surface-50 dark:bg-surface-900",
                 "p-4 md:p-8 pb-20 md:pb-20",

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -42,7 +42,7 @@ export function PropertyFieldPreview({
     const disabled = !editableProperty(property);
 
     const borderColorClass = hasError
-        ? "border-red-500 dark:border-red-500 border-opacity-100 dark:border-opacity-100 ring-0 dark:ring-0"
+        ? "border-red-500 dark:border-red-500 border-opacity-100 dark:border-opacity-100 border-red-500/100 dark:border-red-500/100 ring-0 dark:ring-0"
         : (selected ? "border-primary" : "border-transparent");
 
     return <ErrorBoundary>

package/src/ui/collection_editor/properties/CommonPropertyFields.tsx

@@ -2,7 +2,7 @@ import { Field, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { PropertyWithId } from "../PropertyEditView";
 import React from "react";
-import { FieldCaption, toSnakeCase, unslugify } from "@firecms/core";
+import { FieldCaption, prettifyIdentifier, toSnakeCase } from "@firecms/core";
 
 type CommonPropertyFieldsProps = {
     showErrors: boolean,
@@ -78,7 +78,7 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                             const newIdValue = e.target.value;
                             const nameTouched = getIn(touched, name);
                             if (!nameTouched && autoUpdateId) {
-                                setFieldValue(name, newIdValue ? unslugify(newIdValue) : "")
+                                setFieldValue(name, newIdValue ? prettifyIdentifier(newIdValue) : "")
                             }
                             setFieldValue(id, newIdValue, true);
                             setFieldTouched(id, true);

package/src/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -87,7 +87,7 @@ export function StoragePropertyField({
 
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-surface-500">
+                        <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
                             <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-4">

package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -12,7 +12,7 @@ export function ValidationPanel({
             asField={true}
             innerClassName="p-4"
             title={
-                <div className="flex flex-row text-surface-500">
+                <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
                     <RuleIcon/>
                     <Typography variant={"subtitle2"}
                                 className="ml-4">

package/src/useCollectionEditorPlugin.tsx

@@ -44,6 +44,8 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     collectionInference?: CollectionInference;
 
+    pathSuggestions?: string[];
+
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
 
     getUser?: (uid: string) => USER | null;
@@ -75,7 +77,8 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      collectionInference,
      getData,
      onAnalyticsEvent,
-     includeIntroView = true
+     includeIntroView = true,
+     pathSuggestions
  }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
@@ -92,6 +95,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 getUser,
                 getData,
                 onAnalyticsEvent,
+                pathSuggestions
             }
         },
         homePage: {