@firecms/collection_editor 3.0.0-canary.26 → 3.0.0-canary.261

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

@@ -1,10 +1,9 @@
 import React from "react";
 import {
     Button,
-    Checkbox,
+    CloudUploadIcon,
     DebouncedTextField,
     ExpandablePanel,
-    FileUploadIcon,
     MultiSelect,
     MultiSelectItem,
     Typography
@@ -44,11 +43,13 @@ export function StoragePropertyField({
 
     const metadata = `${baseStoragePath}.metadata`;
     const fileName = `${baseStoragePath}.fileName`;
+    const maxSize = `${baseStoragePath}.maxSize`;
     const storagePath = `${baseStoragePath}.storagePath`;
     const storeUrl = `${baseStoragePath}.storeUrl`;
 
     const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
     const storagePathValue = getIn(values, storagePath) ?? "/";
+    const maxSizeValue = getIn(values, maxSize);
 
     const storedValue = getIn(values, acceptedFiles);
     const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
@@ -56,10 +57,10 @@ export function StoragePropertyField({
 
     const handleTypesChange = (value: string[]) => {
         if (!value) setFieldValue(acceptedFiles, undefined);
-        else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
-        else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
-        else if (allFileTypesSelected)
-            setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
+        // else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
+        // else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
+        // else if (allFileTypesSelected)
+        //     setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
         else setFieldValue(acceptedFiles, value);
     };
 
@@ -73,8 +74,8 @@ export function StoragePropertyField({
 
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-gray-500">
-                            <FileUploadIcon/>
+                        <div className="flex flex-row text-surface-500">
+                            <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-2">
                                 File upload config
@@ -87,10 +88,12 @@ export function StoragePropertyField({
                         <div className={"col-span-12"}>
 
                             <MultiSelect
+                                className={"w-full"}
+                                placeholder={"All file types allowed"}
                                 disabled={disabled}
                                 name={acceptedFiles}
                                 value={fileTypesValue ?? []}
-                                onMultiValueChange={handleTypesChange}
+                                onValueChange={handleTypesChange}
                                 label={allFileTypesSelected ? undefined : "Allowed file types"}
                                 renderValues={(selected) => {
                                     if (!selected || selected.length === 0) return "All file types allowed";
@@ -99,21 +102,15 @@ export function StoragePropertyField({
                                         .join(", ");
                                 }}>
 
-                                <MultiSelectItem key={"all"} value={"all"} className={"flex items-center gap-2"}>
-                                    <Checkbox
-                                        checked={!fileTypesValue}/>
-                                    All
-                                </MultiSelectItem>
-
                                 {Object.entries(fileTypes).map(([value, label]) => (
                                     <MultiSelectItem key={value} value={value} className={"flex items-center gap-2"}>
-                                        <Checkbox
-                                            checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>
+                                        {/*<Checkbox*/}
+                                        {/*    checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>*/}
                                         <div className={"flex-grow"}>
                                             {label}
                                         </div>
                                         <Button size={"small"}
-                                                variant={"outlined"}
+                                                variant={"text"}
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
@@ -161,7 +158,10 @@ export function StoragePropertyField({
 
                             <Field name={storeUrl}
                                    type="checkbox">
-                                {({ field, form }: FormexFieldProps) => {
+                                {({
+                                      field,
+                                      form
+                                  }: FormexFieldProps) => {
                                     return <SwitchControl
                                         label={"Save URL instead of storage path"}
                                         disabled={existing || disabled}
@@ -178,6 +178,21 @@ export function StoragePropertyField({
                                 You can only change this prop upon creation.
                             </Typography>
                         </div>
+
+                        <div className={"col-span-12"}>
+                            <DebouncedTextField name={maxSize}
+                                                type={"number"}
+                                                label={"Max size (in bytes)"}
+                                                size={"small"}
+                                                value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
+                                                onChange={(e) => {
+                                                    const value = e.target.value;
+                                                    if (value === "") setFieldValue(maxSize, undefined);
+                                                    else setFieldValue(maxSize, parseInt(value));
+                                                }}
+                            />
+                        </div>
+
                     </div>
                 </ExpandablePanel>
 

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

@@ -10,7 +10,7 @@ export function StringPropertyField({
                                         disabled,
                                         showErrors
                                     }: {
-    widgetId: "text_field" | "multiline" | "markdown" | "email";
+    widgetId: "text_field" | "multiline" | "email";
     disabled: boolean;
     showErrors: boolean;
 }) {
@@ -42,15 +42,6 @@ export function StringPropertyField({
                                                   trim={true}
                                                   uppercase={true}
                                                   showErrors={showErrors}/>}
-                    {widgetId === "markdown" &&
-                        <StringPropertyValidation disabled={disabled}
-                                                  length={true}
-                                                  lowercase={true}
-                                                  max={true}
-                                                  min={true}
-                                                  trim={true}
-                                                  uppercase={true}
-                                                  showErrors={showErrors}/>}
 
                     {widgetId === "email" &&
                         <StringPropertyValidation disabled={disabled}

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

@@ -24,6 +24,7 @@ export function UrlPropertyField({
                 <Select
                     disabled={disabled}
                     position={"item-aligned"}
+                    fullWidth={true}
                     onValueChange={(value: string) => {
                         if (value === "[NONE]")
                             setFieldValue("url", true);

package/src/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -19,6 +19,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             label={"Hide from collection"}
+                            size={"medium"}
                             disabled={disabled}
                             form={form}
                             tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
@@ -33,6 +34,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             label={"Read only"}
+                            size={"medium"}
                             disabled={disabled}
                             tooltip={"Is this a read only field. Display only as a preview"}
                             form={form}

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

@@ -10,9 +10,9 @@ export function ValidationPanel({
         <ExpandablePanel
             initiallyExpanded={false}
             asField={true}
-            className="p-4"
+            innerClassName="p-4"
             title={
-                <div className="flex flex-row text-gray-500">
+                <div className="flex flex-row text-surface-500">
                     <RuleIcon/>
                     <Typography variant={"subtitle2"}
                                 className="ml-2">

package/src/ui/collection_editor/templates/pages_template.ts

@@ -19,7 +19,7 @@ export const pagesCollectionTemplate: EntityCollection = {
             validation: {
                 required: true,
                 unique: true,
-                matches: /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
+                matches: "^[a-z0-9]+(?:-[a-z0-9]+)*$",
                 matchesMessage: "Must be lowercase, alphanumeric, and hyphenated"
             }
         },
@@ -178,11 +178,6 @@ export const pagesCollectionTemplate: EntityCollection = {
             name: "Is Published",
             columnWidth: 100,
             description: "Should this page be live on the site?"
-        },
-        author_uid: {
-            dataType: "reference",
-            name: "Author",
-            path: "users"
         }
     }
 };

package/src/ui/collection_editor/utils/strings.ts

@@ -1,9 +1,16 @@
 export function camelCase(str: string): string {
     if (!str) return "";
-    return (str.slice(0, 1).toLowerCase() + str.slice(1))
-        .replace(/([-_ ]){1,}/g, " ")
-        .split(/[-_ ]/)
-        .reduce((cur, acc) => {
-            return cur + acc[0].toUpperCase() + acc.substring(1);
-        }, "");
+    if (str.length === 1) return str.toLowerCase();
+
+    // Split by hyphens, underscores, or spaces and filter out empty strings
+    const parts = str.split(/[-_ ]+/).filter(Boolean);
+
+    if (parts.length === 0) return "";
+
+    // Start with first part in lowercase
+    return parts[0].toLowerCase() +
+        // Transform remaining parts to have first letter uppercase
+        parts.slice(1)
+            .map(part => part.charAt(0).toUpperCase() + part.substring(1).toLowerCase())
+            .join('');
 }

package/src/ui/collection_editor/utils/supported_fields.tsx

@@ -14,6 +14,7 @@ export const supportedFieldsIds: PropertyConfigId[] = [
     "file_upload",
     "multi_file_upload",
     "reference",
+    "reference_as_string",
     "multi_references",
     "switch",
     "date_time",

package/src/ui/collection_editor/utils/update_property_for_widget.ts

@@ -208,6 +208,15 @@ export function updatePropertyFromWidget(propertyData: any,
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
             } satisfies Property
         );
+    } else if (selectedWidgetId === "reference_as_string") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                dataType: "string",
+                propertyConfig: "reference_as_string",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true
+            } satisfies Property
+        );
     } else if (selectedWidgetId === "multi_references") {
         updatedProperty = mergeDeep(
             propertyData,

package/src/useCollectionEditorPlugin.tsx

@@ -4,18 +4,19 @@ import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./ui/EditorCollectionAction";
 import { HomePageEditorCollectionAction } from "./ui/HomePageEditorCollectionAction";
-import { NewCollectionCard } from "./ui/NewCollectionCard";
 import { PersistedCollection } from "./types/persisted_collection";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
-import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
 import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
 import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 import { NewCollectionButton } from "./ui/NewCollectionButton";
-import { AddIcon, Button, Typography } from "@firecms/ui";
+import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "./useCollectionEditorController";
+import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
+import { NewCollectionCard } from "./ui/NewCollectionCard";
+import { EditorEntityAction } from "./ui/EditorEntityAction";
 
-export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
+export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
 
     /**
      * Firebase app where the configuration is saved.
@@ -25,14 +26,14 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     /**
      * Define what actions can be performed on the configuration.
      */
-    configPermissions?: CollectionEditorPermissionsBuilder<UserType, EC>;
+    configPermissions?: CollectionEditorPermissionsBuilder<USER, EC>;
 
     /**
      * The words you define here will not be allowed to be used as group
      * names when creating collections.
      * e.g. ["admin"]
      */
-    reservedGroups: string[];
+    reservedGroups?: string[];
 
     extraView?: {
         View: React.ComponentType<{
@@ -41,17 +42,15 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
         icon: React.ReactNode
     };
 
-    pathSuggestions?: (path: string) => Promise<string[]>;
-
     collectionInference?: CollectionInference;
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
 
-    getUser: (uid: string) => UserType | null;
+    getUser?: (uid: string) => USER | null;
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
-    introMode?: "new_project" | "existing_project";
+    includeIntroView?: boolean;
 
 }
 
@@ -62,23 +61,22 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param configPermissions
  * @param reservedGroups
  * @param extraView
- * @param pathSuggestions
+ * @param getData
  * @param getUser
  * @param collectionInference
  */
-export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
+export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>
 ({
      collectionConfigController,
-     introMode,
      configPermissions,
      reservedGroups,
      extraView,
-     pathSuggestions,
      getUser,
      collectionInference,
      getData,
-     onAnalyticsEvent
- }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
+     onAnalyticsEvent,
+     includeIntroView = true
+ }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
         key: "collection_editor",
@@ -91,30 +89,33 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 collectionInference,
                 reservedGroups,
                 extraView,
-                pathSuggestions,
                 getUser,
                 getData,
-                onAnalyticsEvent
+                onAnalyticsEvent,
             }
         },
         homePage: {
             additionalActions: <NewCollectionButton/>,
-            additionalChildrenStart: introMode ? <IntroWidget introMode={introMode}/> : undefined,
-            additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
+            additionalChildrenStart: includeIntroView ? <IntroWidget/> : undefined,
             CollectionActions: HomePageEditorCollectionAction,
-            AdditionalCards: introMode ? undefined : NewCollectionCard,
+            AdditionalCards: NewCollectionCard,
+            allowDragAndDrop: true,
+            navigationEntries: collectionConfigController.navigationEntries,
+            onNavigationEntriesUpdate: collectionConfigController.saveNavigationEntries,
         },
         collectionView: {
+            CollectionActionsStart: EditorCollectionActionStart,
             CollectionActions: EditorCollectionAction,
             HeaderAction: CollectionViewHeaderAction,
             AddColumnComponent: PropertyAddColumnComponent
+        },
+        form: {
+            ActionsTop: EditorEntityAction,
         }
     };
 }
 
-export function IntroWidget({ introMode }: {
-    introMode?: "new_project" | "existing_project";
-}) {
+export function IntroWidget() {
 
     const navigation = useNavigationController();
     if (!navigation.topLevelNavigation)
@@ -129,17 +130,19 @@ export function IntroWidget({ introMode }: {
         }).createCollections
         : true;
 
+    if (!navigation.initialised || (navigation.collections ?? []).length > 0) {
+        return null;
+    }
+
     return (
-        <div className={"mt-8 flex flex-col mt-8 p-2"}>
-            <Typography variant={"h4"} className="mb-4">Welcome</Typography>
-            <Typography paragraph={true}>Your admin panel is ready ✌️</Typography>
-            <Typography paragraph={true}>
+        <Paper
+            className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2"}>
+            <Typography variant={"subtitle2"} className={"uppercase"}>No collections found</Typography>
+            <Typography>
                 Start building collections in FireCMS easily. Map them to your existing
-                database data, import from files, or use our templates. Simplify your data management process
-                now.
+                database data, import from files, or use our templates.
             </Typography>
             {canCreateCollections && <Button
-                className={"mt-4"}
                 onClick={collectionEditorController && canCreateCollections
                     ? () => collectionEditorController.createCollection({
                         parentCollectionIds: [],
@@ -149,6 +152,9 @@ export function IntroWidget({ introMode }: {
                     : undefined}>
                 <AddIcon/>Create your first collection
             </Button>}
-        </div>
+            <Typography color={"secondary"}>
+                You can also define collections programmatically.
+            </Typography>
+        </Paper>
     );
 }

package/src/utils/collections.ts

@@ -0,0 +1,46 @@
+import {
+    EntityCallbacks,
+    EntityCollection,
+    joinCollectionLists,
+    makePropertiesEditable,
+    ModifyCollectionProps,
+    Properties
+} from "@firecms/core";
+import { PersistedCollection } from "../types/persisted_collection";
+
+/**
+ * Function in charge of merging collections defined in code with those stored in the backend.
+ */
+export const mergeCollections = (baseCollections: EntityCollection[],
+                                 backendCollections: PersistedCollection[] = [],
+                                 modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
+) => {
+
+    const markAsEditable = (c: PersistedCollection) => {
+        makePropertiesEditable(c.properties as Properties);
+        c.subcollections?.forEach(markAsEditable);
+    };
+
+    backendCollections.forEach(markAsEditable);
+
+    const result = joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
+
+    // sort the collections so they are in the same order as the base collections
+    result.sort((a, b) => {
+        const indexA = baseCollections.findIndex(c => c.id === a.id);
+        const indexB = baseCollections.findIndex(c => c.id === b.id);
+
+        if (indexA === -1 && indexB === -1) {
+            return 0; // Keep original order for items not in baseCollections
+        }
+        if (indexA === -1) {
+            return 1; // a is not in base, so it goes to the end
+        }
+        if (indexB === -1) {
+            return -1; // b is not in base, so it goes to the end
+        }
+        return indexA - indexB;
+    });
+
+    return result;
+}

package/dist/ui/RootCollectionSuggestions.d.ts

@@ -1,3 +0,0 @@
-export declare function RootCollectionSuggestions({ introMode }: {
-    introMode?: "new_project" | "existing_project";
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +0,0 @@
-import { PropertyConfig } from "@firecms/core";
-export interface PropertySelectItemProps {
-    value: string;
-    optionDisabled: boolean;
-    propertyConfig: PropertyConfig;
-    existing: boolean;
-}
-export declare function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps): import("react/jsx-runtime").JSX.Element;

package/src/ui/RootCollectionSuggestions.tsx

@@ -1,63 +0,0 @@
-import { unslugify, useAuthController, useNavigationController } from "@firecms/core";
-import { AddIcon, Chip, CircularProgress, Collapse, Typography, } from "@firecms/ui";
-import { useCollectionEditorController } from "../useCollectionEditorController";
-import React from "react";
-
-export function RootCollectionSuggestions({ introMode }: { introMode?: "new_project" | "existing_project" }) {
-
-    const authController = useAuthController();
-    const navigationController = useNavigationController();
-
-    const collectionEditorController = useCollectionEditorController();
-    const canCreateCollections = collectionEditorController.configPermissions
-        ? collectionEditorController.configPermissions({
-            user: authController.user
-        }).createCollections
-        : true;
-
-    const rootPathSuggestions = collectionEditorController.rootPathSuggestions;
-
-    const showSuggestions = (rootPathSuggestions ?? []).length > 3 || ((navigationController.collections ?? []).length === 0 && (rootPathSuggestions ?? []).length > 0);
-    const forceShowSuggestions = introMode === "existing_project";
-    return <Collapse
-        in={forceShowSuggestions || showSuggestions}>
-
-        <div
-            className={"flex flex-col gap-1 p-2 my-4"}>
-
-            {!introMode && <Typography variant={"body2"} color={"secondary"}>
-                Create a collection <b>automatically</b> from your data:
-            </Typography>}
-
-            {introMode === "existing_project" && <Typography>
-                You will see your <b>database collections</b> here, a few seconds after project creation
-            </Typography>}
-
-            <div
-                className={"flex flex-row gap-1 overflow-scroll no-scrollbar "}>
-                {(rootPathSuggestions ?? []).map((path) => {
-                    return (
-                        <div key={path}>
-                            <Chip
-                                icon={<AddIcon size={"small"}/>}
-                                colorScheme={"cyanLighter"}
-                                onClick={collectionEditorController && canCreateCollections
-                                    ? () => collectionEditorController.createCollection({
-                                        initialValues: { path, name: unslugify(path) },
-                                        parentCollectionIds: [],
-                                        redirect: true,
-                                        sourceClick: "root_collection_suggestion"
-                                    })
-                                    : undefined}
-                                size="small">
-                                {path}
-                            </Chip>
-                        </div>
-                    );
-                })}
-                {rootPathSuggestions === undefined && <CircularProgress size={"small"}/>}
-                {rootPathSuggestions?.length === 0 && <Typography variant={"caption"}>No suggestions</Typography>}
-            </div>
-        </div>
-    </Collapse>
-}

package/src/ui/collection_editor/PropertySelectItem.tsx

@@ -1,32 +0,0 @@
-import { PropertyConfigBadge, PropertyConfig } from "@firecms/core";
-import { cn, SelectItem, Typography } from "@firecms/ui";
-
-export interface PropertySelectItemProps {
-    value: string;
-    optionDisabled: boolean;
-    propertyConfig: PropertyConfig;
-    existing: boolean;
-}
-
-export function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps) {
-    return <SelectItem value={value}
-                       disabled={optionDisabled}
-                       className={"flex flex-row items-center"}>
-        <div
-            className={cn(
-                "flex flex-row items-center text-base min-h-[52px]",
-                optionDisabled ? "w-full" : "")}>
-            <div className={"mr-8"}>
-                <PropertyConfigBadge propertyConfig={propertyConfig}/>
-            </div>
-            <div>
-                <div>{propertyConfig.name}</div>
-                <Typography variant={"caption"}
-                            color={"disabled"}
-                            className={"max-w-sm"}>
-                    {existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description}
-                </Typography>
-            </div>
-        </div>
-    </SelectItem>
-}