@firecms/core 3.0.0-beta.2 → 3.0.0-beta.4.pre.1

package/src/types/plugins.tsx

@@ -7,6 +7,7 @@ import { FieldProps, FormContext } from "./fields";
 import { CMSType, Property } from "./properties";
 import { EntityStatus } from "./entities";
 import { ResolvedProperty } from "./resolved_entities";
+import { CMSView } from "./navigation";
 
 /**
  * Interface used to define plugins for FireCMS.
@@ -26,31 +27,6 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
      */
     loading?: boolean;
 
-    collections?: {
-
-        /**
-         * Use this component to add custom actions to the entity collections
-         * toolbar.
-         */
-        CollectionActions?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS>[];
-
-        collectionActionsProps?: COL_ACTIONS_PROPS;
-
-    }
-
-    form?: {
-        provider?: {
-            Component: React.ComponentType<PropsWithChildren<FORM_PROPS & PluginFormActionProps<any, EC>>>;
-            props?: FORM_PROPS;
-        }
-
-        Actions?: React.ComponentType<PluginFormActionProps<any, EC>>;
-
-        fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T, any, EC>) => React.ComponentType<FieldProps<T>> | null;
-
-        fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
-    }
-
     /**
      * You can use this prop to add higher order components to the CMS.
      * The components will be added to the root of the CMS, so any component
@@ -113,6 +89,14 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
 
     collectionView?: {
 
+        /**
+         * Use this component to add custom actions to the entity collections
+         * toolbar.
+         */
+        CollectionActions?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS>[];
+
+        collectionActionsProps?: COL_ACTIONS_PROPS;
+
         showTextSearchBar?: (props: {
             context: FireCMSContext,
             path: string,
@@ -151,6 +135,19 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         }>;
     }
 
+    form?: {
+        provider?: {
+            Component: React.ComponentType<PropsWithChildren<FORM_PROPS & PluginFormActionProps<any, EC>>>;
+            props?: FORM_PROPS;
+        }
+
+        Actions?: React.ComponentType<PluginFormActionProps<any, EC>>;
+
+        fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T, any, EC>) => React.ComponentType<FieldProps<T>> | null;
+
+        fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
+    }
+
 }
 
 /**

package/src/types/properties.ts

@@ -695,7 +695,7 @@ export interface ArrayPropertyValidationSchema extends PropertyValidationSchema
  * Additional configuration related to Storage related fields
  * @group Entity properties
  */
-export interface StorageConfig {
+export type StorageConfig = {
 
     /**
      * File MIME types that can be uploaded to this reference. Don't specify for

package/src/types/property_config.tsx

@@ -11,7 +11,7 @@ export type PropertyConfig<T extends CMSType = any> = {
     /**
      * Key used to identify this property config.
      */
-    key: string,
+    key: PropertyConfigId | string;
 
     /**
      * Name of this field type.
@@ -48,7 +48,7 @@ export type PropertyConfig<T extends CMSType = any> = {
 
 }
 
-export type FieldConfigId =
+export type PropertyConfigId =
     "text_field" |
     "multiline" |
     "markdown" |

package/src/types/side_entity_controller.tsx

@@ -1,6 +1,7 @@
 import { EntityCollection } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 import { Entity } from "./entities";
+import { EntityOverrides } from "./entity_overrides";
 
 /**
  * Props used to open a side dialog

package/src/util/collections.ts

@@ -1,6 +1,8 @@
 import {
     DefaultSelectedViewBuilder,
     DefaultSelectedViewParams,
+    EntityCollection,
+    PermissionsBuilder,
     PropertiesOrBuilders,
     PropertyOrBuilder
 } from "../types";
@@ -48,3 +50,23 @@ export function resolveDefaultSelectedView(
         return defaultSelectedView(params);
     }
 }
+
+/**
+ * If a collection is not applying permissions, we apply the given permissionsBuilder.
+ * This is used to apply the role permissions to the collections, unless they are already
+ * applying permissions.
+ * @param collections
+ * @param permissionsBuilder
+ */
+export const applyPermissionsFunctionIfEmpty = (collections: EntityCollection[], permissionsBuilder?: PermissionsBuilder): EntityCollection[] => {
+
+    return collections.map(collection => {
+        if (collection.permissions) {
+            return collection;
+        }
+        return ({
+            ...collection,
+            permissions: permissionsBuilder
+        });
+    });
+}

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/index.ts

@@ -20,3 +20,4 @@ export * from "./flatten_object";
 export * from "./make_properties_editable";
 export * from "./join_collections";
 export * from "./builders";
+export * from "./useTraceUpdate";

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/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>);
-}