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

package/src/types/collections.ts

@@ -51,6 +51,12 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      */
     path: string;
 
+    /**
+     * Optional database id of this collection. If not specified, the default
+     * database id will be used.
+     */
+    databaseId?: string;
+
     /**
      * If this collection is a top level navigation entry, you can set this
      * property to `true` to indicate that this collection is a collection group.
@@ -61,7 +67,8 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Icon key to use in this collection.
      * You can use any of the icons in the Material specs:
      * https://fonts.google.com/icons
-     * e.g. 'account_tree' or 'person'
+     * e.g. 'account_tree' or 'person'.
+     * Find all the icons in https://firecms.co/docs/icons
      */
     icon?: string;
 
@@ -82,7 +89,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * as the title in entity related views and references.
      * If not specified, the first property simple text property will be used.
      */
-    titleProperty?: keyof M,
+    titleProperty?: keyof M;
 
     /**
      * Can this collection be edited by the end user.
@@ -304,6 +311,11 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Width of the side dialog (in pixels) when opening an entity in this collection.
      */
     sideDialogWidth?: number | string;
+
+    /**
+     * Default preview properties displayed when this collection is referenced to.
+     */
+    previewProperties?: string[];
 }
 
 /**
@@ -362,14 +374,13 @@ export interface CollectionActionsProps<M extends Record<string, any> = any, Use
 /**
  * Use this controller to retrieve the selected entities or modify them in
  * an {@link EntityCollection}
- * If you want to pass a `SelectionController` to
  * @group Models
  */
 export type SelectionController<M extends Record<string, any> = any> = {
     selectedEntities: Entity<M>[];
     setSelectedEntities: Dispatch<SetStateAction<Entity<M>[]>>;
     isEntitySelected: (entity: Entity<M>) => boolean;
-    toggleEntitySelection: (entity: Entity<M>) => void;
+    toggleEntitySelection: (entity: Entity<M>, newSelectedState?: boolean) => void;
 }
 
 /**

package/src/types/datasource.ts

@@ -1,4 +1,4 @@
-import { Entity, EntityReference, EntityStatus, EntityValues, GeoPoint } from "./entities";
+import { Entity, EntityStatus, EntityValues } from "./entities";
 import { EntityCollection, FilterValues } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 import { FireCMSContext } from "./firecms_context";
@@ -18,6 +18,7 @@ export interface FetchEntityProps<M extends Record<string, any> = any> {
 export type ListenEntityProps<M extends Record<string, any> = any> =
     FetchEntityProps<M>
     & {
+    databaseId?: string;
     onUpdate: (entity: Entity<M>) => void,
     onError?: (error: Error) => void,
 }
@@ -63,12 +64,12 @@ export interface SaveEntityProps<M extends Record<string, any> = any> {
  */
 export interface DeleteEntityProps<M extends Record<string, any> = any> {
     entity: Entity<M>;
+    collection?: EntityCollection<M> | ResolvedEntityCollection<M>;
 }
 
 /**
- * Implement this interface and pass it to a {@link FireCMS}
- * to connect it to your data source.
- * A Firestore implementation of this interface can be found in {@link useFirestoreDataSource}
+ * Component in charge of communicating with the data source.
+ * Usually you won't need to implement this interface, but a {@link DataSourceDelegate} instead.
  * @group Datasource
  */
 export interface DataSource {
@@ -182,7 +183,8 @@ export interface DataSource {
      */
     deleteEntity<M extends Record<string, any> = any>(
         {
-            entity
+            entity,
+            collection
         }: DeleteEntityProps<M>
     ): Promise<void>;
 
@@ -191,7 +193,7 @@ export interface DataSource {
      * @param path Collection path
      * @param name of the property
      * @param value
-     * @param property
+     * @param collection
      * @param entityId
      * @return `true` if there are no other fields besides the given entity
      */
@@ -199,13 +201,14 @@ export interface DataSource {
         path: string,
         name: string,
         value: any,
-        entityId?: string
+        entityId?: string,
+        collection?: EntityCollection
     ): Promise<boolean>;
 
     /**
      * Generate an id for a new entity
      */
-    generateEntityId(path: string): string;
+    generateEntityId(path: string, collection: EntityCollection): string;
 
     /**
      * Count the number of entities in a collection
@@ -239,21 +242,29 @@ export type FilterCombinationValidProps = {
     sortBy?: [string, "asc" | "desc"];
 };
 
-export type SaveEntityDelegateProps<M extends Record<string, any> = any> = Omit<SaveEntityProps<M>, "collection">;
+export type SaveEntityDelegateProps<M extends Record<string, any> = any> = SaveEntityProps<M>;
 
-export type FetchCollectionDelegateProps<M extends Record<string, any> = any> =
-    Omit<FetchCollectionProps<M>, "collection">
-    & {
-    isCollectionGroup?: boolean
-};
+export type FetchCollectionDelegateProps<M extends Record<string, any> = any> = FetchCollectionProps<M>;
 
-export type ListenCollectionDelegateProps<M extends Record<string, any> = any> =
-    ListenCollectionProps<M>
-    & {
-    isCollectionGroup?: boolean;
-};
+export type ListenCollectionDelegateProps<M extends Record<string, any> = any> = ListenCollectionProps<M>;
 
 export interface DataSourceDelegate {
+
+    /**
+     * Key that identifies this data source delegate
+     */
+    key: string;
+
+    /**
+     * If the data source has been initialised
+     */
+    initialised?: boolean;
+
+    /**
+     * If the user is authenticated to use the data source
+     */
+    authenticated?: boolean;
+
     /**
      * Fetch data from a collection
      * @param path
@@ -311,7 +322,7 @@ export interface DataSourceDelegate {
     fetchEntity<M extends Record<string, any> = any>({
                                                          path,
                                                          entityId,
-                                                     }: Omit<FetchEntityProps<M>, "collection">): Promise<Entity<M> | undefined>;
+                                                     }: FetchEntityProps<M>): Promise<Entity<M> | undefined>;
 
     /**
      * Get realtime updates on one entity.
@@ -327,13 +338,13 @@ export interface DataSourceDelegate {
                                                            entityId,
                                                            onUpdate,
                                                            onError
-                                                       }: Omit<ListenEntityProps<M>, "collection">): () => void;
+                                                       }: ListenEntityProps<M>): () => void;
 
     /**
      * Save entity to the specified path
      * @param path
-     * @param id
-     * @param collection
+     * @param entityId
+     * @param values
      * @param status
      */
     saveEntity<M extends Record<string, any> = any>({
@@ -356,14 +367,15 @@ export interface DataSourceDelegate {
      * @param name of the property
      * @param value
      * @param entityId
+     * @param collection
      * @return `true` if there are no other fields besides the given entity
      */
-    checkUniqueField(path: string, name: string, value: any, entityId?: string): Promise<boolean>;
+    checkUniqueField(path: string, name: string, value: any, entityId?: string, collection?: EntityCollection): Promise<boolean>;
 
     /**
      * Generate an id for a new entity
      */
-    generateEntityId(path: string): string;
+    generateEntityId(path: string, collection?: EntityCollection): string;
 
     /**
      * Count the number of entities in a collection
@@ -374,12 +386,14 @@ export interface DataSourceDelegate {
      * Check if the given filter combination is valid
      * @param props
      */
-    isFilterCombinationValid?(props: Omit<FilterCombinationValidProps, "collection">): boolean;
+    isFilterCombinationValid?(props: Omit<FilterCombinationValidProps, "collection"> & {
+        databaseId?: string
+    }): boolean;
 
     /**
      * Get the object to generate the current time in the datasource
      */
-    currentTime(): any;
+    currentTime?: () => any;
 
     delegateToCMSModel: (data: any) => any;
 
@@ -390,6 +404,7 @@ export interface DataSourceDelegate {
     initTextSearch?: (props: {
         context: FireCMSContext,
         path: string,
+        databaseId?: string,
         collection: EntityCollection,
         parentCollectionIds?: string[]
     }) => Promise<boolean>;

package/src/types/entities.ts

@@ -25,6 +25,8 @@ export interface Entity<M extends object> {
      * Current values
      */
     values: EntityValues<M>;
+
+    databaseId?: string;
 }
 
 /**

package/src/types/entity_overrides.tsx

@@ -1,7 +1,7 @@
-import { DataSource } from "./datasource";
+import { DataSource, DataSourceDelegate } from "./datasource";
 import { StorageSource } from "./storage";
 
 export type EntityOverrides = {
-    dataSource?: DataSource;
+    dataSourceDelegate?: DataSourceDelegate;
     storageSource?: StorageSource;
 };

package/src/types/fields.tsx

@@ -1,4 +1,4 @@
-import { CMSType, PropertyOrBuilder } from "./properties";
+import { CMSType, Property, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
 import { FormexController } from "@firecms/formex";
 
@@ -62,7 +62,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Property related to this field
      */
-    property: ResolvedProperty<T>;
+    property: Property<T> | ResolvedProperty<T>;
 
     /**
      * Should this field include a description
@@ -81,14 +81,9 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     partOfArray?: boolean;
 
     /**
-     * Is this field part of a block (oneOf array)
-     */
-    partOfBlock?: 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
@@ -98,7 +93,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Additional properties set by the developer
      */
-    customProps?: CustomProps
+    customProps: CustomProps
 
     /**
      * Additional values related to the state of the form or the entity
@@ -110,6 +105,11 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      */
     disabled?: boolean;
 
+    /**
+     * Size of the field
+     */
+    size?: "smallest" | "small" | "medium";
+
 }
 
 /**
@@ -144,7 +144,7 @@ export interface FormContext<M extends Record<string, any> = any> {
     /**
      * Entity id, it can be null if it's a new entity
      */
-    entityId?: string;
+    entityId: string;
 
     /**
      * Path this entity is located at
@@ -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/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 :
@@ -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);
 

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") {

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/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 {