@firecms/core 3.0.0-beta.7 → 3.0.0-beta.8

package/src/types/fields.tsx

@@ -1,6 +1,6 @@
-import { EntityValues } from "./entities";
 import { CMSType, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
+import { FormexController } from "@firecms/formex";
 
 /**
  * When building a custom field you need to create a React component that takes
@@ -21,11 +21,6 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      */
     value: T;
 
-    /**
-     * Initial value of this field
-     */
-    // initialValue: T | undefined;
-
     /**
      * Set value of field directly
      */
@@ -42,7 +37,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Is the form currently submitting
      */
-    isSubmitting: boolean;
+    isSubmitting?: boolean;
 
     /**
      * Should this field show the error indicator.
@@ -50,19 +45,19 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      * filled) but we don't want to show the error until the user has tried
      * saving.
      */
-    showError: boolean;
+    showError?: boolean;
 
     /**
      * Is there an error in this field. The error field has the same shape as
      * the field, replacing values with a string containing the error.
      * It takes the value `null` if there is no error
      */
-    error: any | null;
+    error?: any | null;
 
     /**
      * Has this field been touched
      */
-    touched: boolean;
+    touched?: boolean;
 
     /**
      * Property related to this field
@@ -72,38 +67,38 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Should this field include a description
      */
-    includeDescription: boolean;
+    includeDescription?: boolean;
 
     /**
      * Flag to indicate that the underlying value has been updated in the
      * datasource
      */
-    underlyingValueHasChanged: boolean;
+    underlyingValueHasChanged?: boolean;
 
     /**
      * Is this field part of an array
      */
-    partOfArray: boolean;
+    partOfArray?: boolean;
 
     /**
      * Is this field part of a block (oneOf array)
      */
-    partOfBlock: boolean;
+    partOfBlock?: boolean;
 
     /**
      * Is this field being rendered in the entity table popup
      */
-    tableMode: boolean;
+    tableMode?: boolean;
 
     /**
      * Should this field autofocus on mount
      */
-    autoFocus: boolean;
+    autoFocus?: boolean;
 
     /**
      * Additional properties set by the developer
      */
-    customProps: CustomProps
+    customProps?: CustomProps
 
     /**
      * Additional values related to the state of the form or the entity
@@ -113,7 +108,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Flag to indicate if this field should be disabled
      */
-    disabled: boolean;
+    disabled?: boolean;
 
 }
 
@@ -124,37 +119,42 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
 export interface FormContext<M extends Record<string, any> = any> {
 
     /**
-     * Collection of the entity being modified
+     * Current values of the entity
      */
-    collection: ResolvedEntityCollection<M>;
+    values: M;
 
     /**
-     * Current values of the entity
+     * Update the value of a field
+     * @param key
+     * @param value
+     * @param shouldValidate
      */
-    values: EntityValues<M>;
+    setFieldValue: (key: string, value: any, shouldValidate?: boolean) => void;
 
     /**
-     * Entity id, it can be null if it's a new entity
+     * Save the entity.
      */
-    entityId?: string;
+    save: (values: M) => void;
 
     /**
-     * Path this entity is located at
+     * Collection of the entity being modified
      */
-    path: string;
+    collection?: ResolvedEntityCollection<M>;
 
     /**
-     * Update the value of a field
-     * @param key
-     * @param value
-     * @param shouldValidate
+     * Entity id, it can be null if it's a new entity
      */
-    setFieldValue: (key: string, value: any, shouldValidate?: boolean) => void;
+    entityId?: string;
+
+    /**
+     * Path this entity is located at
+     */
+    path?: string;
 
     /**
-     * Save the entity
+     * This is the underlying formex controller that powers the form
      */
-    save: (values: EntityValues<M>) => void;
+    formex: FormexController<M>;
 }
 
 /**

package/src/types/plugins.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 
 import { FireCMSContext } from "./firecms_context";
-import { CollectionActionsProps, EntityCollection } from "./collections";
+import { CollectionActionsProps, EntityCollection, EntityTableController } from "./collections";
 import { User } from "./user";
 import { FieldProps, FormContext } from "./fields";
 import { CMSType, Property } from "./properties";
@@ -98,6 +98,13 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         CollectionActionsStart?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS>[];
         collectionActionsStartProps?: COL_ACTIONS_START__PROPS;
 
+        blockSearch?: (props: {
+            context: FireCMSContext,
+            path: string,
+            collection: EC,
+            parentCollectionIds?: string[]
+        }) => boolean;
+
         showTextSearchBar?: (props: {
             context: FireCMSContext,
             path: string,
@@ -123,6 +130,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             parentCollectionIds: string[],
             onHover: boolean,
             collection: EC;
+            tableController: EntityTableController;
         }>;
 
         /**
@@ -133,6 +141,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             fullPath: string,
             parentCollectionIds: string[],
             collection: EC;
+            tableController: EntityTableController;
         }>;
     }
 
@@ -194,8 +203,8 @@ export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Reco
     property: Property<T> | ResolvedProperty<T>;
     Field: React.ComponentType<FieldProps<T, any, M>>;
     plugin: FireCMSPlugin;
-    path: string;
-    collection: EC;
+    path?: string;
+    collection?: EC;
 };
 
 export interface PluginGenericProps<UserType extends User = User> {

package/src/types/properties.ts

@@ -149,7 +149,7 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
     /**
      * This value will be set by default for new entities.
      */
-    defaultValue?: T;
+    defaultValue?: T | null;
 
     /**
      * Should this property be editable. If set to true, the user will be able to modify the property and
@@ -783,6 +783,11 @@ export type StorageConfig = {
      */
     postProcess?: (pathOrUrl: string) => Promise<string>;
 
+    /**
+     * You can use this prop in order to provide a custom preview URL.
+     * Useful when the file's path is different from the original field value
+     */
+    previewUrl?: (fileName: string) => string;
 }
 
 /**
@@ -812,7 +817,7 @@ export interface UploadedFileContext {
     /**
      * Entity path. E.g. `products/PID/locales`
      */
-    path: string;
+    path?: string;
 
     /**
      * Values of the current entity

package/src/util/entities.ts

@@ -48,12 +48,12 @@ export function getDefaultValuesFor<M extends Record<string, any>>(properties: P
 
 export function getDefaultValueFor(property: PropertyOrBuilder) {
     if (isPropertyBuilder(property)) return undefined;
-    if (property.dataType === "map" && property.properties) {
+    if (property.defaultValue || property.defaultValue === null) {
+        return property.defaultValue;
+    } else if (property.dataType === "map" && property.properties) {
         const defaultValuesFor = getDefaultValuesFor(property.properties as Properties);
         if (Object.keys(defaultValuesFor).length === 0) return undefined;
         return defaultValuesFor;
-    } else if (property.defaultValue) {
-        return property.defaultValue;
     } else {
         return getDefaultValueForDataType(property.dataType);
     }
@@ -152,6 +152,7 @@ export function traverseValuesProperties<M extends Record<string, any>>(
         .map(([key, property]) => {
             const inputValue = inputValues && (inputValues)[key];
             const updatedValue = traverseValueProperty(inputValue, property as Property, operation);
+            if (updatedValue === null) return null;
             if (updatedValue === undefined) return undefined;
             return ({ [key]: updatedValue });
         })

package/src/util/objects.ts

@@ -141,15 +141,25 @@ export function removePropsIfExisting(source: any, comparison: any) {
 
     const res = isArray(source) ? [...source] : { ...source };
 
-    Object.keys(comparison).forEach(key => {
-        if (key in res) {
-            if (isObject(res[key]) && isObject(comparison[key])) {
-                res[key] = removePropsIfExisting(res[key], comparison[key]);
-            } else if (res[key] === comparison[key]) {
-                isArray(res) ? res.splice(key, 1) : delete res[key];
+    if (isArray(res)) {
+        for (let i = res.length - 1; i >= 0; i--) {
+            if (res[i] === comparison[i]) {
+                res.splice(i, 1);
+            } else if (isObject(res[i]) && isObject(comparison[i])) {
+                res[i] = removePropsIfExisting(res[i], comparison[i]);
             }
         }
-    });
+    } else {
+        Object.keys(comparison).forEach(key => {
+            if (key in res) {
+                if (isObject(res[key]) && isObject(comparison[key])) {
+                    res[key] = removePropsIfExisting(res[key], comparison[key]);
+                } else if (res[key] === comparison[key]) {
+                    delete res[key];
+                }
+            }
+        });
+    }
 
     return res;
 }

package/src/util/permissions.ts

@@ -49,6 +49,7 @@ export function canCreateEntity<M extends Record<string, any>, UserType extends
     authController: AuthController<UserType>,
     path: string,
     entity: Entity<M> | null): boolean {
+    if (collection.collectionGroup) return false;
     return resolvePermissions(collection, authController, path, entity)?.create ?? DEFAULT_PERMISSIONS.create;
 }
 

package/src/util/storage.ts

@@ -7,15 +7,28 @@ import {
 } from "../types";
 import { randomString } from "./strings";
 
+interface ResolveFilenameStringParams<M extends object> {
+    input: string | ((context: UploadedFileContext) => (Promise<string> | string));
+    storage: StorageConfig;
+    values: EntityValues<M>;
+    entityId: string;
+    path?: string;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    file: File;
+    propertyKey: string;
+}
+
 export async function resolveFilenameString<M extends object>(
-    input: string | ((context: UploadedFileContext) => Promise<string> | string),
-    storage: StorageConfig,
-    values: EntityValues<M>,
-    entityId: string,
-    path: string,
-    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
-    file: File,
-    propertyKey: string): Promise<string> {
+    {
+        input,
+        storage,
+        values,
+        entityId,
+        path,
+        property,
+        file,
+        propertyKey
+    }: ResolveFilenameStringParams<M>): Promise<string> {
     let result;
     if (typeof input === "function") {
         result = await input({
@@ -30,7 +43,13 @@ export async function resolveFilenameString<M extends object>(
         if (!result)
             console.warn("Storage callback returned empty result. Using default name value")
     } else {
-        result = replacePlaceholders(file, input, entityId, propertyKey, path);
+        result = replacePlaceholders({
+            file,
+            input,
+            entityId,
+            propertyKey,
+            path
+        });
     }
 
     if (!result)
@@ -39,15 +58,28 @@ export async function resolveFilenameString<M extends object>(
     return result;
 }
 
+interface ResolveStoragePathStringParams<M extends object> {
+    input: string | ((context: UploadedFileContext) => string);
+    storage: StorageConfig;
+    values: EntityValues<M>;
+    entityId: string;
+    path?: string;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    file: File;
+    propertyKey: string;
+}
+
 export function resolveStoragePathString<M extends object>(
-    input: string | ((context: UploadedFileContext) => string),
-    storage: StorageConfig,
-    values: EntityValues<M>,
-    entityId: string,
-    path: string,
-    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
-    file: File,
-    propertyKey: string): string {
+    {
+        input,
+        storage,
+        values,
+        entityId,
+        path,
+        property,
+        file,
+        propertyKey
+    }: ResolveStoragePathStringParams<M>): string {
     let result;
     if (typeof input === "function") {
         result = input({
@@ -62,7 +94,13 @@ export function resolveStoragePathString<M extends object>(
         if (!result)
             console.warn("Storage callback returned empty result. Using default name value")
     } else {
-        result = replacePlaceholders(file, input, entityId, propertyKey, path);
+        result = replacePlaceholders({
+            file,
+            input,
+            entityId,
+            propertyKey,
+            path
+        });
     }
 
     if (!result)
@@ -71,14 +109,30 @@ export function resolveStoragePathString<M extends object>(
     return result;
 }
 
-function replacePlaceholders(file: File, input: string, entityId: string, propertyKey: string, path: string) {
+interface Placeholders {
+    file: File;
+    input: string;
+    entityId: string;
+    propertyKey: string;
+    path?: string;
+}
+
+function replacePlaceholders({
+                                 file,
+                                 input,
+                                 entityId,
+                                 propertyKey,
+                                 path
+                             }: Placeholders) {
     const ext = file.name.split(".").pop();
     let result = input.replace("{entityId}", entityId)
         .replace("{propertyKey}", propertyKey)
         .replace("{rand}", randomString())
         .replace("{file}", file.name)
-        .replace("{file.type}", file.type)
-        .replace("{path}", path);
+        .replace("{file.type}", file.type);
+    if (path) {
+        result = result.replace("{path}", path);
+    }
     if (ext) {
         result = result.replace("{file.ext}", ext);
         const name = file.name.replace(`.${ext}`, "");

package/src/util/useStorageUploadController.tsx

@@ -46,7 +46,7 @@ export function useStorageUploadController<M extends object>({
                                                                      entityId: string,
                                                                      entityValues: EntityValues<M>,
                                                                      value: string | string[] | null;
-                                                                     path: string,
+                                                                     path?: string,
                                                                      propertyKey: string,
                                                                      property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
                                                                      storageSource: StorageSource,
@@ -95,7 +95,16 @@ export function useStorageUploadController<M extends object>({
 
     const fileNameBuilder = useCallback(async (file: File) => {
         if (storage.fileName) {
-            const fileName = await resolveFilenameString(storage.fileName, storage, entityValues, entityId, path, property, file, propertyKey);
+            const fileName = await resolveFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property,
+                file,
+                propertyKey
+            });
             if (!fileName || fileName.length === 0) {
                 throw Error("You need to return a valid filename");
             }
@@ -105,7 +114,16 @@ export function useStorageUploadController<M extends object>({
     }, [entityId, entityValues, path, property, propertyKey, storage]);
 
     const storagePathBuilder = useCallback((file: File) => {
-        return resolveStoragePathString(storage.storagePath, storage, entityValues, entityId, path, property, file, propertyKey) ?? "/";
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property,
+            file,
+            propertyKey
+        }) ?? "/";
     }, [entityId, entityValues, path, property, propertyKey, storage]);
 
     const onFileUploadComplete = useCallback(async (uploadedPath: string,

package/dist/core/Drawer.d.ts

@@ -1,16 +0,0 @@
-/**
- * Props used in case you need to override the default drawer
- * @group Core
- */
-export type DrawerProps = {
-    hovered: boolean;
-    drawerOpen: boolean;
-    openDrawer: () => void;
-    closeDrawer: () => void;
-    autoOpenDrawer?: boolean;
-};
-/**
- * Default drawer used in the CMS
- * @group Core
- */
-export declare function Drawer(): import("react/jsx-runtime").JSX.Element;

package/dist/core/Scaffold.d.ts

@@ -1,51 +0,0 @@
-import React from "react";
-import { DrawerProps } from "./Drawer";
-import { FireCMSAppBarProps } from "../components";
-export declare const DRAWER_WIDTH = 280;
-export declare function useDrawer(): DrawerProps;
-/**
- * @group Core
- */
-export interface ScaffoldProps<ExtraAppbarProps = object> {
-    /**
-     * Name of the app, displayed as the main title and in the tab title
-     */
-    name?: React.ReactNode;
-    /**
-     * Logo to be displayed in the drawer of the CMS
-     */
-    logo?: string;
-    /**
-     * Whether to include the drawer in the scaffold
-     */
-    includeDrawer?: boolean;
-    /**
-     * You can define a custom drawer to be displayed in the scaffold.
-     * Use the hook `useDrawer` to access the context values.
-     */
-    drawer?: React.ReactNode;
-    /**
-     * Open the drawer on hover
-     */
-    autoOpenDrawer?: boolean;
-    /**
-     * The AppBar component to be used in the scaffold.
-     */
-    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
-    /**
-     * Additional props passed to the custom AppBar
-     */
-    fireCMSAppBarProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
-}
-/**
- * This view acts as a scaffold for FireCMS.
- *
- * It is in charge of displaying the navigation drawer, top bar and main
- * collection views.
- * This component needs a parent {@link FireCMS}
- *
- * @param props
- * @constructor
- * @group Core
- */
-export declare const Scaffold: React.NamedExoticComponent<React.PropsWithChildren<ScaffoldProps<object>>>;

package/dist/form/EntityForm.d.ts

@@ -1,77 +0,0 @@
-import { Entity, EntityCollection, EntityStatus, EntityValues, FormContext, ResolvedEntityCollection } from "../types";
-import { ValidationError } from "yup";
-/**
- * @group Components
- */
-export interface EntityFormProps<M extends Record<string, any>> {
-    /**
-     * New or existing status
-     */
-    status: EntityStatus;
-    /**
-     * Path of the collection this entity is located
-     */
-    path: string;
-    /**
-     * The collection is used to build the fields of the form
-     */
-    collection: EntityCollection<M>;
-    /**
-     * The updated entity is passed from the parent component when the underlying data
-     * has changed in the datasource
-     */
-    entity?: Entity<M>;
-    /**
-     * The callback function called when Save is clicked and validation is correct
-     */
-    onEntitySaveRequested: (props: EntityFormSaveParams<M>) => Promise<void>;
-    /**
-     * The callback function called when discard is clicked
-     */
-    onDiscard?: () => void;
-    /**
-     * The callback function when the form is dirty, so the values are different
-     * from the original ones
-     */
-    onModified?: (dirty: boolean) => void;
-    /**
-     * The callback function when the form original values have been modified
-     */
-    onValuesChanged?: (values?: EntityValues<M>) => void;
-    /**
-     *
-     * @param id
-     */
-    onIdChange?: (id: string) => void;
-    currentEntityId?: string;
-    onFormContextChange?: (formContext: FormContext<M>) => void;
-    hideId?: boolean;
-    autoSave?: boolean;
-    onIdUpdateError?: (error: any) => void;
-}
-export type EntityFormSaveParams<M extends Record<string, any>> = {
-    collection: ResolvedEntityCollection<M>;
-    path: string;
-    entityId: string | undefined;
-    values: EntityValues<M>;
-    previousValues?: EntityValues<M>;
-    closeAfterSave: boolean;
-    autoSave: boolean;
-};
-/**
- * This is the form used internally by the CMS
- * @param status
- * @param path
- * @param collection
- * @param entity
- * @param onEntitySave
- * @param onDiscard
- * @param onModified
- * @param onValuesChanged
- * @constructor
- * @group Components
- */
-export declare const EntityForm: typeof EntityFormInternal;
-declare function EntityFormInternal<M extends Record<string, any>>({ status, path, collection: inputCollection, entity, onEntitySaveRequested, onDiscard, onModified, onValuesChanged, onIdChange, onFormContextChange, hideId, autoSave, onIdUpdateError, }: EntityFormProps<M>): import("react/jsx-runtime").JSX.Element;
-export declare function yupToFormErrors(yupError: ValidationError): Record<string, any>;
-export {};