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

package/src/types/fields.tsx

@@ -1,6 +1,6 @@
-import { EntityValues } from "./entities";
-import { CMSType, PropertyOrBuilder } from "./properties";
+import { CMSType, Property, 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,55 +45,50 @@ 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
      */
-    property: ResolvedProperty<T>;
+    property: Property<T> | ResolvedProperty<T>;
 
     /**
      * 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;
-
-    /**
-     * Is this field part of a block (oneOf array)
-     */
-    partOfBlock: boolean;
+    partOfArray?: boolean;
 
     /**
-     * Is this field being rendered in the entity table popup
+     * Should this field render with the minimal amount of UI elements
      */
-    tableMode: boolean;
+    minimalistView?: boolean;
 
     /**
      * Should this field autofocus on mount
      */
-    autoFocus: boolean;
+    autoFocus?: boolean;
 
     /**
      * Additional properties set by the developer
@@ -113,7 +103,12 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Flag to indicate if this field should be disabled
      */
-    disabled: boolean;
+    disabled?: boolean;
+
+    /**
+     * Size of the field
+     */
+    size?: "smallest" | "small" | "medium";
 
 }
 
@@ -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>;
 }
 
 /**
@@ -192,11 +192,6 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      */
     underlyingValueHasChanged?: boolean;
 
-    /**
-     * Is this field being rendered in a table
-     */
-    tableMode?: boolean;
-
     /**
      * Is this field part of an array
      */
@@ -205,7 +200,7 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
     /**
      * Is this field part of a block (oneOf array)
      */
-    partOfBlock?: boolean;
+    minimalistView?: boolean;
 
     /**
      * Should the field take focus when rendered. When opening the popup view
@@ -217,4 +212,15 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      * Should this field be disabled
      */
     disabled?: boolean;
+
+    /**
+     * Index of the field in the array.
+     * Only used when the field is part of an array.
+     */
+    index?: number;
+
+    /**
+     * The size of the field
+     */
+    size?: "smallest" | "small" | "medium",
 }

package/src/types/navigation.ts

@@ -173,6 +173,7 @@ export interface CMSView {
      * You can use any of the icons in the Material specs:
      * https://fonts.google.com/icons
      * e.g. 'account_tree' or 'person'
+     * Find all the icons in https://firecms.co/docs/icons
      */
     icon?: string;
 

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

@@ -17,7 +17,7 @@ export type DataType<T extends CMSType = CMSType> =
                     T extends GeoPoint ? "geopoint" :
                         T extends Vector ? "vector" :
                             T extends EntityReference ? "reference" :
-                                T extends Array<CMSType> ? "array" :
+                                T extends Array<any> ? "array" :
                                     T extends Record<string, any> ? "map" : never;
 
 /**
@@ -49,7 +49,7 @@ export type AnyProperty =
 /**
  * @group Entity properties
  */
-export type Property<T extends CMSType = CMSType> =
+export type Property<T extends CMSType = any> =
     T extends string ? StringProperty :
         T extends number ? NumberProperty :
             T extends boolean ? BooleanProperty :
@@ -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
@@ -277,6 +277,7 @@ export type PropertyBuilder<T extends CMSType = any, M extends Record<string, an
          values,
          previousValues,
          propertyValue,
+         index,
          path,
          entityId
      }: PropertyBuilderProps<M>) => Property<T> | null;
@@ -404,7 +405,7 @@ export interface StringProperty extends BaseProperty<string> {
 /**
  * @group Entity properties
  */
-export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSType = CMSType> extends BaseProperty<T> {
+export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSType = any> extends BaseProperty<T> {
 
     dataType: "array";
 
@@ -733,13 +734,13 @@ export type StorageConfig = {
      * You can use this prop to customize the uploaded filename.
      * You can use a function as a callback or a string where you
      * specify some placeholders that get replaced with the corresponding values.
-     * - {file} - Full file name
-     * - {file.name} - Name of the file without extension
-     * - {file.ext} - Extension of the file
-     * - {rand} - Random value used to avoid name collisions
-     * - {entityId} - ID of the entity
-     * - {propertyKey} - ID of this property
-     * - {path} - Path of this entity
+     * - `{file}` - Full file name
+     * - `{file.name}` - Name of the file without extension
+     * - `{file.ext}` - Extension of the file
+     * - `{rand}` - Random value used to avoid name collisions
+     * - `{entityId}` - ID of the entity
+     * - `{propertyKey}` - ID of this property
+     * - `{path}` - Path of this entity
      *
      * @param context
      */
@@ -750,13 +751,13 @@ export type StorageConfig = {
      *
      * You can use a function as a callback or a string where you
      * specify some placeholders that get replaced with the corresponding values.
-     * - {file} - Full file name
-     * - {file.name} - Name of the file without extension
-     * - {file.ext} - Extension of the file
-     * - {rand} - Random value used to avoid name collisions
-     * - {entityId} - ID of the entity
-     * - {propertyKey} - ID of this property
-     * - {path} - Path of this entity
+     * - `{file}` - Full file name
+     * - `{file.name}` - Name of the file without extension
+     * - `{file.ext}` - Extension of the file
+     * - `{rand}` - Random value used to avoid name collisions
+     * - `{entityId}` - ID of the entity
+     * - `{propertyKey}` - ID of this property
+     * - `{path}` - Path of this entity
      */
     storagePath: string | ((context: UploadedFileContext) => string);
 
@@ -783,6 +784,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 +818,7 @@ export interface UploadedFileContext {
     /**
      * Entity path. E.g. `products/PID/locales`
      */
-    path: string;
+    path?: string;
 
     /**
      * Values of the current entity

package/src/types/side_dialogs_controller.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 /**
  * Controller to open the side dialog
  * @group Hooks and utilities
@@ -14,6 +16,12 @@ export interface SideDialogsController {
      */
     sidePanels: SideDialogPanelProps[];
 
+    /**
+     * Override the current side panels
+     * @param panels
+     */
+    setSidePanels: (panels: SideDialogPanelProps[]) => void;
+
     /**
      * Open one or multiple side panels
      * @param props
@@ -65,4 +73,9 @@ export interface SideDialogPanelProps {
      * Callback when the panel is closed
      */
     onClose?: () => void;
+
+    /**
+     * Use this prop to store additional data in the panel
+     */
+    additional?: any;
 }

package/src/types/storage.ts

@@ -102,4 +102,86 @@ export interface StorageSource {
      * @param bucket
      */
     getFile: (path: string, bucket?: string) => Promise<File | null>;
+
+    /**
+     * Delete a file.
+     * @param path
+     * @param bucket
+     */
+    deleteFile: (path: string, bucket?: string) => Promise<void>;
+
+    /**
+     * List the contents of a path.
+     * @param path
+     * @param options
+     */
+    list: (path: string, options?: {
+        bucket?: string,
+        maxResults?: number,
+        pageToken?: string
+    }) => Promise<StorageListResult>;
+
+}
+
+/**
+ * Result returned by list().
+ * @public
+ */
+export declare interface StorageListResult {
+    /**
+     * References to prefixes (sub-folders). You can call list() on them to
+     * get its contents.
+     *
+     * Folders are implicit based on '/' in the object paths.
+     * For example, if a bucket has two objects '/a/b/1' and '/a/b/2', list('/a')
+     * will return '/a/b' as a prefix.
+     */
+    prefixes: StorageReference[];
+    /**
+     * Objects in this directory.
+     * You can call getMetadata() and getDownloadUrl() on them.
+     */
+    items: StorageReference[];
+    /**
+     * If set, there might be more results for this list. Use this token to resume the list.
+     */
+    nextPageToken?: string;
+}
+
+/**
+ * Represents a reference to a Google Cloud Storage object. Developers can
+ * upload, download, and delete objects, as well as get/set object metadata.
+ * @public
+ */
+export declare interface StorageReference {
+    /**
+     * Returns a gs:// URL for this object in the form
+     *   `gs://<bucket>/<path>/<to>/<object>`
+     * @returns The gs:// URL.
+     */
+    toString(): string;
+
+    /**
+     * A reference to the root of this object's bucket.
+     */
+    root: StorageReference;
+    /**
+     * The name of the bucket containing this reference's object.
+     */
+    bucket: string;
+    /**
+     * The full path of this object.
+     */
+    fullPath: string;
+    /**
+     * The short name of this object, which is the last component of the full path.
+     * For example, if fullPath is 'full/path/image.png', name is 'image.png'.
+     */
+    name: string;
+
+    /**
+     * A reference pointing to the parent location of this reference, or null if
+     * this reference is the root.
+     */
+    parent: StorageReference | null;
 }

package/src/util/entities.ts

@@ -15,7 +15,7 @@ import {
 } from "../types";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "./common";
 
-export function isReadOnly(property: Property | ResolvedProperty): boolean {
+export function isReadOnly(property: Property<any> | ResolvedProperty<any>): boolean {
     if (property.readOnly)
         return true;
     if (property.dataType === "date") {
@@ -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/icon_list.ts

@@ -1,17 +1,22 @@
 import { iconSynonyms } from "./icon_synonyms";
 import { iconKeys } from "@firecms/ui";
+import Fuse from "fuse.js";
 
-// @ts-ignore
-import * as JsSearch from "js-search";
 
-export const iconsSearch = new JsSearch.Search("key");
-iconsSearch.addIndex("synonyms");
-
-iconsSearch.addDocuments(iconKeys
+const map = iconKeys
     .map((importName) => {
+        // @ts-ignore
+        const iconSynonym = importName in iconSynonyms ? iconSynonyms[importName] : "";
         return {
             key: importName,
-            // @ts-ignore
-            synonyms: iconSynonyms[importName] ?? [],
+            synonyms: iconSynonym,
         }
-    }));
+    });
+export const iconsSearch = new Fuse(map, {
+    isCaseSensitive: false,
+    shouldSort: true,
+    distance: 0,
+    keys: ["key", "synonyms"]
+})
+
+

package/src/util/icons.tsx

@@ -22,7 +22,13 @@ export type IconViewProps = {
 }
 
 export const IconForView = React.memo(
-    function IconForView({ collectionOrView, className }: { collectionOrView?: IconViewProps, className?: string }): React.ReactElement {
+    function IconForView({
+                             collectionOrView,
+                             className,
+                             size = "medium"
+                         }: {
+        collectionOrView?: IconViewProps, className?: string, size?: "smallest" | "small" | "medium" | "large" | number,
+    }): React.ReactElement {
         if (!collectionOrView) return <></>;
         const icon = getIcon(collectionOrView.icon, className);
         if (collectionOrView?.icon && icon)
@@ -45,7 +51,7 @@ export const IconForView = React.memo(
         if (!key)
             key = coolIconKeys[hashString(collectionOrView.path) % iconsCount];
 
-        return <Icon iconKey={key} size={"medium"} className={className}/>;
+        return <Icon iconKey={key} size={size} className={className}/>;
     }, (prevProps, nextProps) => {
         return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon);
     });

package/src/util/index.ts

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

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

@@ -1,7 +1,6 @@
 /**
  * Returns the plural of an English word.
  *
- * @export
  * @param {string} word
  * @param {number} [amount]
  * @returns {string}
@@ -92,7 +91,6 @@ export function plural(word: string, amount?: number): string {
 /**
  * Returns the singular of an English word.
  *
- * @export
  * @param {string} word
  * @param {number} [amount]
  * @returns {string}

package/src/util/property_utils.tsx

@@ -35,7 +35,7 @@ export function getIconForWidget(widget: PropertyConfig | undefined,
 }
 
 export function getIconForProperty(
-    property: PropertyOrBuilder | ResolvedProperty,
+    property: PropertyOrBuilder<any> | ResolvedProperty<any>,
     size: "small" | "medium" | "large" = "small",
     fields: Record<string, PropertyConfig> = {}
 ): React.ReactNode {

package/src/util/references.ts

@@ -9,6 +9,9 @@ export function getEntityPreviewKeys(targetCollection: EntityCollection<any>,
                                      limit = 3) {
     const allProperties = Object.keys(targetCollection.properties);
     let listProperties = previewProperties?.filter(p => allProperties.includes(p as string));
+    if (!listProperties && targetCollection.previewProperties) {
+        listProperties = targetCollection.previewProperties?.filter(p => allProperties.includes(p as string));
+    }
     if (listProperties && listProperties.length > 0) {
         return listProperties;
     } else {