@firecms/core 3.0.0-canary.4 → 3.0.0-canary.41

package/src/util/icons.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { CMSView, EntityCollection } from "../types";
 import { hashString } from "./hash";
 import { coolIconKeys, Icon, iconKeys } from "@firecms/ui";
 import { slugify } from "./strings";
@@ -14,8 +13,17 @@ export function getIcon(iconKey?: string, className?: string): React.ReactElemen
     return iconKey in iconKeysMap ? <Icon iconKey={iconKey} size={"medium"} className={className}/> : undefined;
 }
 
+export type IconViewProps = {
+    path: string;
+    name: string;
+    singularName?: string;
+    group?: string;
+    icon?: string;
+}
+
 export const IconForView = React.memo(
-    function IconForView({ collectionOrView, className }: { collectionOrView: EntityCollection | CMSView, className?: string }): React.ReactElement {
+    function IconForView({ collectionOrView, className }: { collectionOrView?: IconViewProps, className?: string }): React.ReactElement {
+        if (!collectionOrView) return <></>;
         const icon = getIcon(collectionOrView.icon, className);
         if (collectionOrView?.icon && icon)
             return icon;
@@ -39,7 +47,7 @@ export const IconForView = React.memo(
 
         return <Icon iconKey={key} size={"medium"} className={className}/>;
     }, (prevProps, nextProps) => {
-        return equal(prevProps.collectionOrView.icon, nextProps.collectionOrView.icon);
+        return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon);
     });
 
 const iconKeysMap: Record<string, string> = iconKeys.reduce((acc: Record<string, string>, key) => {

package/src/util/navigation_utils.ts

@@ -60,14 +60,14 @@ export function resolveCollectionPathIds(path: string, allCollections: EntityCol
 /**
  * Find the corresponding view at any depth for a given path.
  * Note that path or segments of the paths can be collection aliases.
- * @param pathOrAlias
+ * @param pathOrId
  * @param collections
  */
-export function getCollectionByPathOrId(pathOrAlias: string, collections: EntityCollection[]): EntityCollection | undefined {
+export function getCollectionByPathOrId(pathOrId: string, collections: EntityCollection[]): EntityCollection | undefined {
 
-    const subpaths = removeInitialAndTrailingSlashes(pathOrAlias).split("/");
+    const subpaths = removeInitialAndTrailingSlashes(pathOrId).split("/");
     if (subpaths.length % 2 === 0) {
-        throw Error(`getCollectionByPathOrAlias: Collection paths must have an odd number of segments: ${pathOrAlias}`);
+        throw Error(`getCollectionByPathOrId: Collection paths must have an odd number of segments: ${pathOrId}`);
     }
 
     const subpathCombinations = getCollectionPathsCombinations(subpaths);
@@ -80,10 +80,10 @@ export function getCollectionByPathOrId(pathOrAlias: string, collections: Entity
 
         if (navigationEntry) {
 
-            if (subpathCombination === pathOrAlias) {
+            if (subpathCombination === pathOrId) {
                 result = navigationEntry;
             } else if (navigationEntry.subcollections) {
-                const newPath = pathOrAlias.replace(subpathCombination, "").split("/").slice(2).join("/");
+                const newPath = pathOrId.replace(subpathCombination, "").split("/").slice(2).join("/");
                 if (newPath.length > 0)
                     result = getCollectionByPathOrId(newPath, navigationEntry.subcollections);
             }

package/src/util/permissions.ts

@@ -1,4 +1,5 @@
 import { AuthController, Entity, EntityCollection, Permissions, User } from "../types";
+import { fullPathToCollectionSegments } from "./paths";
 
 const DEFAULT_PERMISSIONS = {
     read: true,
@@ -10,8 +11,8 @@ const DEFAULT_PERMISSIONS = {
 export function resolvePermissions<M extends Record<string, any>, UserType extends User>
 (collection: EntityCollection<M>,
  authController: AuthController<UserType>,
- pathSegments: string[],
- entity: Entity<M> | null): Permissions {
+ path: string,
+ entity: Entity<M> | null): Permissions | undefined {
 
     const permission = collection.permissions;
     if (permission === undefined) {
@@ -19,8 +20,10 @@ export function resolvePermissions<M extends Record<string, any>, UserType exten
     } else if (typeof permission === "object") {
         return permission as Permissions;
     } else if (typeof permission === "function") {
+        const pathSegments = fullPathToCollectionSegments(path);
         return permission({
             entity,
+            path,
             user: authController.user,
             authController,
             collection,
@@ -35,27 +38,27 @@ export function canEditEntity<M extends Record<string, any>, UserType extends Us
 (
     collection: EntityCollection<M>,
     authController: AuthController<UserType>,
-    paths: string[],
+    path: string,
     entity: Entity<M> | null): boolean {
-    return resolvePermissions(collection, authController, paths, entity).edit ?? DEFAULT_PERMISSIONS.edit;
+    return resolvePermissions(collection, authController, path, entity)?.edit ?? DEFAULT_PERMISSIONS.edit;
 }
 
 export function canCreateEntity<M extends Record<string, any>, UserType extends User>
 (
     collection: EntityCollection<M>,
     authController: AuthController<UserType>,
-    paths: string[],
+    path: string,
     entity: Entity<M> | null): boolean {
-    return resolvePermissions(collection, authController, paths, entity).create ?? DEFAULT_PERMISSIONS.create;
+    return resolvePermissions(collection, authController, path, entity)?.create ?? DEFAULT_PERMISSIONS.create;
 }
 
 export function canDeleteEntity<M extends Record<string, any>, UserType extends User>
 (
     collection: EntityCollection<M>,
     authController: AuthController<UserType>,
-    paths: string[],
+    path: string,
     entity: Entity<M> | null): boolean {
-    return resolvePermissions(collection, authController, paths, entity).delete ?? DEFAULT_PERMISSIONS.delete;
+    return resolvePermissions(collection, authController, path, entity)?.delete ?? DEFAULT_PERMISSIONS.delete;
 }
 
 // export function resolveCollectionsPermissions(roles: Role[]): Record<string, Permissions> {

package/src/util/references.ts

@@ -1,11 +1,12 @@
-import { EntityCollection, PropertyConfig } from "../types";
+import { EntityCollection, PropertyConfig, ResolvedEntityCollection } from "../types";
 import { isReferenceProperty } from "./property_utils";
 import { isPropertyBuilder } from "./entities";
+import { getFieldConfig } from "../core";
 
-export function getReferencePreviewKeys(targetCollection: EntityCollection<any>,
-                                        fields: Record<string, PropertyConfig>,
-                                        previewProperties?: string[],
-                                        limit = 3) {
+export function getEntityPreviewKeys(targetCollection: EntityCollection<any>,
+                                     fields: Record<string, PropertyConfig>,
+                                     previewProperties?: string[],
+                                     limit = 3) {
     const allProperties = Object.keys(targetCollection.properties);
     let listProperties = previewProperties?.filter(p => allProperties.includes(p as string));
     if (listProperties && listProperties.length > 0) {
@@ -18,3 +19,33 @@ export function getReferencePreviewKeys(targetCollection: EntityCollection<any>,
         }).slice(0, limit);
     }
 }
+
+export function getEntityTitlePropertyKey<M extends Record<string, any>>(collection: EntityCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): string | undefined {
+    if (collection.titleProperty) {
+        return collection.titleProperty as string;
+    }
+    // find first text field property
+    for (const key in collection.properties) {
+        const property = collection.properties[key];
+        if (!isPropertyBuilder(property)) {
+            const field = getFieldConfig(property, propertyConfigs);
+            if (field?.key === "text_field") {
+                return key;
+            }
+        }
+    }
+    return undefined;
+}
+
+export function getEntityImagePreviewPropertyKey<M extends object>(collection: ResolvedEntityCollection<M>): string | undefined {
+
+    // find first text field property
+    for (const key in collection.properties) {
+        const property = collection.properties[key];
+        if (property.dataType === "string" && property.storage?.acceptedFiles?.includes("image/*")) {
+            return key;
+        }
+
+    }
+    return undefined;
+}

package/src/util/strings.ts

@@ -56,8 +56,8 @@ export function unslugify(slug?: string): string {
         const result = slug.replace(/[-_]/g, " ");
         return result.replace(/\w\S*/g, function (txt) {
             return txt.charAt(0).toUpperCase() + txt.substr(1);
-        });
+        }).trim();
     } else {
-        return slug;
+        return slug.trim();
     }
 }

package/src/util/useTraceUpdate.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-function printChanged(props: any, prev: any, path = "", depth = 0, maxDepth: number) {
+export function printChanged(props: any, prev: any, path: string | undefined = "", depth: number | undefined = 0, maxDepth: number | undefined = 10) {
     if (depth > maxDepth) {
         return;
     }
@@ -17,6 +17,7 @@ function printChanged(props: any, prev: any, path = "", depth = 0, maxDepth: num
 export function useTraceUpdate(props: any, maxDepth = 3) {
     const prev = useRef(props);
     useEffect(() => {
+        console.log("Changed props:");
         printChanged(props, prev.current, "", 0, maxDepth);
         prev.current = props;
     });

package/dist/internal/useLocaleConfig.d.ts

@@ -1 +0,0 @@
-export declare function useLocaleConfig(locale?: string): void;

package/src/components/HomePage/NavigationCollectionCard.tsx

@@ -1,146 +0,0 @@
-import { useNavigate } from "react-router-dom";
-
-import { useCustomizationController, useFireCMSContext } from "../../hooks";
-import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
-import { IconForView } from "../../util";
-import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { ArrowForwardIcon, Card, cn, IconButton, Markdown, StarBorderIcon, StarIcon, Typography } from "@firecms/ui";
-
-/**
- * This is the component used in the home page to render a card for each
- * collection.
- * @group Components
- * @param view
- * @param path
- * @param collection
- * @param url
- * @param name
- * @param description
- * @param onClick
- * @constructor
- */
-export function NavigationCollectionCard({
-                                             view,
-                                             path,
-                                             collection,
-                                             url,
-                                             name,
-                                             description,
-                                             onClick
-                                         }: TopNavigationEntry & {
-    onClick?: () => void
-}) {
-
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
-
-    const navigate = useNavigate();
-    const context = useFireCMSContext();
-    const customizationController = useCustomizationController();
-
-    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
-
-    let actions: React.ReactNode | undefined;
-    if (customizationController.plugins && collection) {
-        const actionProps: PluginHomePageActionsProps = {
-            path,
-            collection,
-            context
-        };
-        actions = <>
-            {customizationController.plugins.map((plugin, i) => (
-                plugin.homePage?.CollectionActions
-                    ? <plugin.homePage.CollectionActions
-                        key={`actions_${i}`}
-                        {...actionProps}
-                        extraProps={plugin.homePage.extraProps}
-                    />
-                    : null
-            ))}
-        </>
-        ;
-    }
-
-    return (
-        <Card
-            className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
-            onClick={() => {
-                onClick?.();
-                navigate(url);
-                if (userConfigurationPersistence) {
-                    userConfigurationPersistence.setRecentlyVisitedPaths(
-                        [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
-                    );
-                }
-            }}>
-
-            <div className="flex flex-col items-start h-full">
-                <div
-                    className="flex-grow w-full">
-
-                    <div
-                        className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
-
-                        {collectionIcon}
-
-                        <div
-                            className="flex items-center gap-1"
-                            onClick={(event: React.MouseEvent) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                            }}>
-
-                            {actions}
-
-                            {userConfigurationPersistence &&
-                                <IconButton
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        if (favourite) {
-                                            userConfigurationPersistence.setFavouritePaths(
-                                                userConfigurationPersistence.favouritePaths.filter(p => p !== path)
-                                            );
-                                        } else {
-                                            userConfigurationPersistence.setFavouritePaths(
-                                                [...userConfigurationPersistence.favouritePaths, path]
-                                            );
-                                        }
-                                    }}>
-                                    {
-                                        favourite
-                                            ? <StarIcon
-                                                size={18}
-                                                className={"text-secondary"}/>
-                                            : <StarBorderIcon
-                                                size={18}
-                                                className={"text-gray-400 dark:text-gray-500"}/>}
-                                </IconButton>}
-
-                        </div>
-
-                    </div>
-
-                    <Typography gutterBottom variant="h5"
-                                component="h2">
-                        {name}
-                    </Typography>
-
-                    {description && <Typography variant="body2"
-                                                color="secondary"
-                                                component="div">
-                        <Markdown source={description}/>
-                    </Typography>}
-                </div>
-
-                <div style={{ alignSelf: "flex-end" }}>
-
-                    <div className={"p-4"}>
-                        <ArrowForwardIcon className="text-primary"/>
-                    </div>
-                </div>
-
-            </div>
-
-        </Card>);
-}

package/src/internal/useLocaleConfig.tsx

@@ -1,18 +0,0 @@
-import * as locales from "date-fns/locale";
-// @ts-ignore
-import { registerLocale, setDefaultLocale } from "react-datepicker";
-import { useEffect } from "react";
-
-export function useLocaleConfig(locale?: string) {
-    useEffect(() => {
-        if (!locale) {
-            return;
-        }
-        // @ts-ignore
-        const dateFnsLocale = locales[locale];
-        if (dateFnsLocale) {
-            registerLocale(locale, dateFnsLocale);
-            setDefaultLocale(locale);
-        }
-    }, [locale])
-}