@firecms/core 3.0.0-canary.28 → 3.0.0-canary.280

package/src/types/properties.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { FieldProps } from "./fields";
 import { PropertyPreviewProps } from "../preview";
-import { EntityReference, EntityValues, GeoPoint } from "./entities";
+import { EntityReference, EntityValues, GeoPoint, Vector } from "./entities";
 import { ResolvedArrayProperty, ResolvedStringProperty } from "./resolved_entities";
 import { FilterValues } from "./collections";
 import { ChipColorKey, ChipColorScheme } from "@firecms/ui";
+import { AuthController } from "./auth";
 
 /**
  * @group Entity properties
@@ -15,9 +16,10 @@ export type DataType<T extends CMSType = CMSType> =
             T extends boolean ? "boolean" :
                 T extends Date ? "date" :
                     T extends GeoPoint ? "geopoint" :
-                        T extends EntityReference ? "reference" :
-                            T extends Array<CMSType> ? "array" :
-                                T extends Record<string, any> ? "map" : never;
+                        T extends Vector ? "vector" :
+                            T extends EntityReference ? "reference" :
+                                T extends Array<any> ? "array" :
+                                    T extends Record<string, any> ? "map" : never;
 
 /**
  * @group Entity properties
@@ -48,7 +50,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 :
@@ -148,13 +150,19 @@ 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
      * save the new config. The saved config will then become the source of truth.
      */
     editable?: boolean;
+
+    /**
+     * A number between 0 and 100 that indicates the width of the field in the form view.
+     * It defaults to 100, but you can set it to 50 to have two fields in the same row.
+     */
+    widthPercentage?: number;
 }
 
 /**
@@ -263,6 +271,11 @@ export type PropertyBuilderProps<M extends Record<string, any> = any> =
          * Entity ID
          */
         entityId?: string;
+
+        /**
+         * Controller to manage authentication
+         */
+        authController: AuthController;
     };
 
 /**
@@ -276,21 +289,23 @@ export type PropertyBuilder<T extends CMSType = any, M extends Record<string, an
          values,
          previousValues,
          propertyValue,
+         index,
          path,
-         entityId
+         entityId,
+         authController
      }: PropertyBuilderProps<M>) => Property<T> | null;
 
 /**
  * @group Entity properties
  */
-export type PropertyOrBuilder<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>> =
+export type PropertyOrBuilder<T extends CMSType = CMSType, M extends Record<string, any> = any> =
     Property<T>
     | PropertyBuilder<T, M>;
 
 /**
  * @group Entity properties
  */
-export type PropertiesOrBuilders<M extends Record<string, any> = Record<string, any>> =
+export type PropertiesOrBuilders<M extends Record<string, any> = any> =
     {
         [k in keyof M]: PropertyOrBuilder<M[k], M>;
     };
@@ -369,10 +384,20 @@ export interface StringProperty extends BaseProperty<string> {
 
     /**
      * You can specify a `Storage` configuration. It is used to
-     * indicate that this string refers to a path in Google Cloud Storage.
+     * indicate that this string refers to a path in your storage provider.
      */
     storage?: StorageConfig;
 
+    /**
+     * This property is used to indicate that the string is a user ID, and
+     * it will be rendered as a user picker.
+     * Note that the user ID needs to be the one used in your authentication
+     * provider, e.g. Firebase Auth.
+     * You can also use a property builder to specify the user path dynamically
+     * based on other values of the entity.
+     */
+    userSelect?: boolean;
+
     /**
      * If the value of this property is a URL, you can set this flag to true
      * to add a link, or one of the supported media types to render a preview
@@ -398,12 +423,20 @@ export interface StringProperty extends BaseProperty<string> {
      * Add an icon to clear the value and set it to `null`. Defaults to `false`
      */
     clearable?: boolean;
+
+    /**
+     * You can use this property (a string) to behave as a reference to another
+     * collection. The stored value is the ID of the entity in the
+     * collection, and the `path` prop is used to
+     * define the collection this reference points to.
+     */
+    reference?: ReferenceProperty;
 }
 
 /**
  * @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";
 
@@ -467,6 +500,24 @@ export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSTyp
      */
     expanded?: boolean;
 
+    /**
+     * Display the child properties directly, without being wrapped in an
+     * extendable panel.
+     */
+    minimalistView?: boolean;
+
+    /**
+     * Can the elements in this array be reordered. Defaults to `true`.
+     * This prop has no effect if `disabled` is set to true.
+     */
+    sortable?: boolean;
+
+    /**
+     * Can the elements in this array be added. Defaults to `true`
+     * This prop has no effect if `disabled` is set to true.
+     */
+    canAddElements?: boolean;
+
 }
 
 /**
@@ -515,6 +566,12 @@ export interface MapProperty<T extends Record<string, CMSType> = Record<string,
      */
     spreadChildren?: boolean;
 
+    /**
+     * Display the child properties directly, without being wrapped in an
+     * extendable panel. Note that this will also hide the title of this property.
+     */
+    minimalistView?: boolean;
+
     /**
      * Should the field be initially expanded. Defaults to `true`
      */
@@ -591,7 +648,7 @@ export interface ReferenceProperty extends BaseProperty<EntityReference> {
      * You can leave this prop undefined if the path is not yet know, e.g.
      * you are using a property builder and the path depends on a different
      * property.
-     * Note that you can also use a collection alias.
+     * Note that you can also use a collection id.
      */
     path?: string;
 
@@ -608,6 +665,16 @@ export interface ReferenceProperty extends BaseProperty<EntityReference> {
      */
     previewProperties?: string[];
 
+    /**
+     * Should the reference include the ID of the entity. Defaults to `true`
+     */
+    includeId?: boolean;
+
+    /**
+     * Should the reference include a link to the entity (open the entity details). Defaults to `true`
+     */
+    includeEntityLink?: boolean;
+
 }
 
 /**
@@ -722,13 +789,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
      */
@@ -739,13 +806,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);
 
@@ -766,12 +833,24 @@ export type StorageConfig = {
      */
     maxSize?: number,
 
+    /**
+     * Use this callback to process the file before uploading it to the storage.
+     * If nothing is returned, the file is uploaded as it is.
+     * @param file
+     */
+    processFile?: (file: File) => Promise<File> | undefined;
+
     /**
      * Postprocess the saved value (storage path or URL)
      * after it has been resolved.
      */
     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;
 }
 
 /**
@@ -801,7 +880,7 @@ export interface UploadedFileContext {
     /**
      * Entity path. E.g. `products/PID/locales`
      */
-    path: string;
+    path?: string;
 
     /**
      * Values of the current entity

package/src/types/property_config.tsx

@@ -23,8 +23,6 @@ export type PropertyConfig<T extends CMSType = any> = {
      * Default config for the property.
      * This property or builder will be used as the base values for the resulting property.
      * You can also use a builder function to generate the base property.
-     * You can use a builder function to generate the property based on the values or the path.
-     * You can also define a custom Field as a React component to be used for this property.
      */
     property: PropertyOrBuilder<T>;
 
@@ -54,6 +52,7 @@ export type PropertyConfigId =
     "markdown" |
     "url" |
     "email" |
+    "user_select" |
     "select" |
     "multi_select" |
     "number_input" |
@@ -64,6 +63,7 @@ export type PropertyConfigId =
     "group" |
     "key_value" |
     "reference" |
+    "reference_as_string" |
     "multi_references" |
     "switch" |
     "date_time" |

package/src/types/roles.ts

@@ -30,6 +30,9 @@ export type Role = {
      */
     collectionPermissions?: Record<string, Permissions>;
 
+    /**
+     * Permissions related to editing the collections
+     */
     config?: {
 
         createCollections?: boolean;

package/src/types/side_dialogs_controller.tsx

@@ -1,3 +1,6 @@
+import React from "react";
+import { EntityFormProps } from "../form";
+
 /**
  * Controller to open the side dialog
  * @group Hooks and utilities
@@ -14,6 +17,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 +74,10 @@ 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/side_entity_controller.tsx

@@ -2,6 +2,7 @@ import { EntityCollection } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 import { Entity } from "./entities";
 import { EntityOverrides } from "./entity_overrides";
+import { EntityFormProps } from "../form";
 
 /**
  * Props used to open a side dialog
@@ -14,6 +15,11 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      */
     path: string;
 
+    /**
+     * Full CMS path of the entity, including the collection and sub-collections.
+     */
+    fullIdPath?: string;
+
     /**
      * ID of the entity, if not set, it means we are creating a new entity
      */
@@ -28,7 +34,7 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      * Open the entity with a selected sub-collection view. If the panel for this
      * entity was already open, it is replaced.
      */
-    selectedSubPath?: string;
+    selectedTab?: string;
 
     /**
      * Use this prop to override the width of the form view.
@@ -66,6 +72,15 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      */
     closeOnSave?: boolean;
 
+    /**
+     * Override some form properties
+     */
+    formProps?: Partial<EntityFormProps<M>>;
+
+    /**
+     * Allow the user to open the entity fullscreen
+     */
+    allowFullScreen?: boolean;
 }
 
 /**

package/src/types/storage.ts

@@ -101,5 +101,87 @@ export interface StorageSource {
      * @param props
      * @param bucket
      */
-    getFile: (path:string, bucket?: string) => Promise<File | null>;
+    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/types/user.ts

@@ -37,8 +37,10 @@ export type User = {
     readonly isAnonymous: boolean;
 
     /**
-     *
+     * Custom roles assigned to the user.
      */
     roles?: Role[];
 
+    getIdToken?: (forceRefresh?: boolean) => Promise<string>;
+
 };

package/src/util/builders.ts

@@ -26,10 +26,12 @@ import {
  * @param collection
  * @group Builder
  */
-export function buildCollection<M extends Record<string, any> = any,
-    UserType extends User = User>(
-    collection: EntityCollection<M, UserType>
-): EntityCollection<M, UserType> {
+export function buildCollection<
+    M extends Record<string, any> = any,
+    USER extends User = User>
+(
+    collection: EntityCollection<M, USER>
+): EntityCollection<M, USER> {
     return collection;
 }
 
@@ -39,7 +41,7 @@ export function buildCollection<M extends Record<string, any> = any,
  * @param property
  * @group Builder
  */
-export function buildProperty<T extends CMSType = CMSType, P extends PropertyOrBuilder<T> = PropertyOrBuilder<T>, M extends Record<string, any> = Record<string, any>>(
+export function buildProperty<T extends CMSType = CMSType, P extends PropertyOrBuilder<T> = PropertyOrBuilder<T>, M extends Record<string, any> = any>(
     property: P
 ):
     P extends StringProperty ? StringProperty :
@@ -120,9 +122,9 @@ export function buildEntityCallbacks<M extends Record<string, any> = any>(
  * @param additionalFieldDelegate
  * @group Builder
  */
-export function buildAdditionalFieldDelegate<M extends Record<string, any>, UserType extends User = User>(
-    additionalFieldDelegate: AdditionalFieldDelegate<M, UserType>
-): AdditionalFieldDelegate<M, UserType> {
+export function buildAdditionalFieldDelegate<M extends Record<string, any>, USER extends User = User>(
+    additionalFieldDelegate: AdditionalFieldDelegate<M, USER>
+): AdditionalFieldDelegate<M, USER> {
     return additionalFieldDelegate;
 }
 

package/src/util/callbacks.ts

@@ -0,0 +1,119 @@
+import { EntityCallbacks } from "../types";
+
+export const mergeCallbacks = (
+    baseCallbacks: EntityCallbacks = {},
+    pluginCallbacks: EntityCallbacks = {}
+): EntityCallbacks | undefined => {
+
+    if (!baseCallbacks && !pluginCallbacks) {
+        return undefined;
+    }
+
+    const mergedCallbacks: EntityCallbacks = {};
+
+    // Handle onFetch - returns Entity<M> or Promise<Entity<M>>
+    if (baseCallbacks.onFetch || pluginCallbacks.onFetch) {
+        mergedCallbacks.onFetch = async (props) => {
+            let entity = props.entity;
+            if (baseCallbacks.onFetch) {
+                entity = await Promise.resolve(baseCallbacks.onFetch(props));
+            }
+            if (pluginCallbacks.onFetch) {
+                entity = await Promise.resolve(pluginCallbacks.onFetch({
+                    ...props,
+                    entity
+                }));
+            }
+            return entity;
+        };
+    }
+
+    // Handle onSaveSuccess - returns void or Promise<void>
+    if (baseCallbacks.onSaveSuccess || pluginCallbacks.onSaveSuccess) {
+        mergedCallbacks.onSaveSuccess = async (props) => {
+            if (baseCallbacks.onSaveSuccess) {
+                await Promise.resolve(baseCallbacks.onSaveSuccess(props));
+            }
+            if (pluginCallbacks.onSaveSuccess) {
+                await Promise.resolve(pluginCallbacks.onSaveSuccess(props));
+            }
+        };
+    }
+
+    // Handle onSaveFailure - returns void or Promise<void>
+    if (baseCallbacks.onSaveFailure || pluginCallbacks.onSaveFailure) {
+        mergedCallbacks.onSaveFailure = async (props) => {
+            if (baseCallbacks.onSaveFailure) {
+                await Promise.resolve(baseCallbacks.onSaveFailure(props));
+            }
+            if (pluginCallbacks.onSaveFailure) {
+                await Promise.resolve(pluginCallbacks.onSaveFailure(props));
+            }
+        };
+    }
+
+    // Handle onPreSave - returns Partial<EntityValues<M>> or Promise<Partial<EntityValues<M>>>
+    if (baseCallbacks.onPreSave || pluginCallbacks.onPreSave) {
+        mergedCallbacks.onPreSave = async (props) => {
+            let values = { ...props.values };
+            if (baseCallbacks.onPreSave) {
+                const baseValues = await Promise.resolve(baseCallbacks.onPreSave(props));
+                values = { ...values, ...baseValues };
+            }
+            if (pluginCallbacks.onPreSave) {
+                const pluginValues = await Promise.resolve(pluginCallbacks.onPreSave({
+                    ...props,
+                    values
+                }));
+                values = { ...values, ...pluginValues };
+            }
+            return values;
+        };
+    }
+
+    // Handle onPreDelete - returns void
+    if (baseCallbacks.onPreDelete || pluginCallbacks.onPreDelete) {
+        mergedCallbacks.onPreDelete = (props) => {
+            if (baseCallbacks.onPreDelete) {
+                baseCallbacks.onPreDelete(props);
+            }
+            if (pluginCallbacks.onPreDelete) {
+                pluginCallbacks.onPreDelete(props);
+            }
+        };
+    }
+
+    // Handle onDelete - returns void
+    if (baseCallbacks.onDelete || pluginCallbacks.onDelete) {
+        mergedCallbacks.onDelete = (props) => {
+            if (baseCallbacks.onDelete) {
+                baseCallbacks.onDelete(props);
+            }
+            if (pluginCallbacks.onDelete) {
+                pluginCallbacks.onDelete(props);
+            }
+        };
+    }
+
+    // Handle onIdUpdate - returns string or Promise<string>
+    if (baseCallbacks.onIdUpdate || pluginCallbacks.onIdUpdate) {
+        mergedCallbacks.onIdUpdate = async (props) => {
+            let id = props.entityId || "";
+
+            if (baseCallbacks.onIdUpdate) {
+                id = await Promise.resolve(baseCallbacks.onIdUpdate(props));
+            }
+
+            if (pluginCallbacks.onIdUpdate) {
+                id = await Promise.resolve(pluginCallbacks.onIdUpdate({
+                    ...props,
+                    entityId: id
+                }));
+            }
+
+            return id;
+        };
+    }
+
+    return Object.keys(mergedCallbacks).length > 0 ? mergedCallbacks : undefined;
+};