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

package/src/preview/components/UrlComponentPreview.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import { ImagePreview } from "./ImagePreview";
 import { getThumbnailMeasure } from "../util";
 import { PreviewType } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
+import { cls, DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
 import { EmptyValue } from "./EmptyValue";
 
 /**
@@ -14,12 +14,15 @@ export function UrlComponentPreview({
                                         url,
                                         previewType,
                                         size,
-                                        hint
+                                        hint,
+                                        interactive = true
                                     }: {
     url: string,
     previewType?: PreviewType,
     size: PreviewSize,
-    hint?: string
+    hint?: string,
+    // for video controls
+    interactive?: boolean
 }): React.ReactElement {
 
     if (!previewType) {
@@ -43,17 +46,13 @@ export function UrlComponentPreview({
                              size={size}/>;
     } else if (previewType === "audio") {
         return <audio controls
+                      className={"max-w-100%"}
                       src={url}>
             Your browser does not support the
             <code>audio</code> element.
         </audio>;
     } else if (previewType === "video") {
-        return <video
-            className={`max-w-${size === "small" ? "sm" : "md"}`}
-            controls
-        >
-            <source src={url}/>
-        </video>;
+        return <VideoPreview size={size} src={url} interactive={interactive}/>;
     } else {
         return (
             <a
@@ -66,7 +65,7 @@ export function UrlComponentPreview({
                     width: getThumbnailMeasure(size),
                     height: getThumbnailMeasure(size)
                 }}>
-                <DescriptionIcon className="flex-grow"/>
+                <DescriptionIcon className="text-gray-700 dark:text-gray-300"/>
                 {hint &&
                     <Tooltip title={hint}>
                         <Typography
@@ -77,3 +76,37 @@ export function UrlComponentPreview({
         );
     }
 }
+
+function VideoPreview({
+                          size,
+                          src,
+                          interactive
+                      }: { size: PreviewSize, src: string, interactive: boolean }) {
+
+    const imageSize = useMemo(() => {
+        if (size === "smallest")
+            return "140px";
+        else if (size === "small")
+            return "240px";
+        else if (size === "medium")
+            return "100%";
+        else throw new Error("Invalid size");
+    }, [size]);
+
+    const videoProps = {
+        controls: interactive
+    };
+    return <video
+        style={{
+            position: "relative",
+            objectFit: "cover",
+            width: imageSize,
+            minWidth: "140px",
+            // height: imageSize,
+            maxHeight: "100%"
+        }}
+        {...videoProps}
+        className={cls("max-w-100% rounded", { "pointer-events-none": !interactive })}>
+        <source src={src}/>
+    </video>;
+}

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -54,7 +54,7 @@ export function ArrayOfMapsPreview({
                     values.map((v, index) => {
                         return (
                             <div key={`table_${v}_${index}`}
-                                 className="border-b last:border-b-0">
+                                 className="border-b last:border-b-0 py-2">
                                 {mapProperties && mapProperties.map(
                                     (key) => (
                                         <div

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -28,7 +28,7 @@ export function ArrayOfReferencesPreview({
     if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
         throw Error("Picked wrong preview component ArrayOfReferencesPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className="flex flex-col w-full">

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -33,7 +33,7 @@ export function ArrayOfStorageComponentsPreview({
     if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
         throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className={"flex flex-wrap gap-2"}>

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -37,7 +37,7 @@ export function ArrayOneOfPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
     const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
@@ -49,7 +49,7 @@ export function ArrayOneOfPreview({
                 values.map((value, index) =>
                     <React.Fragment
                         key={"preview_array_" + value + "_" + index}>
-                        <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                        <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0 py-2")}>
                             <ErrorBoundary>
                                 {value && <PropertyPreview
                                     propertyKey={propertyKey}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -37,7 +37,7 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className="flex flex-col gap-2">

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -34,7 +34,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
 
     const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
 
-    if (size === "tiny")
+    if (size === "smallest")
         return (
             <div className="w-full flex flex-col space-y-1 md:space-y-2">
                 {mapPropertyKeys.map((key, index) => (

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -87,7 +87,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
         mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
         if (size === "small")
             mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-        else if (size === "tiny")
+        else if (size === "smallest")
             mapPropertyKeys = mapPropertyKeys.slice(0, 1);
     }
 
@@ -226,7 +226,7 @@ function renderUrlAudioComponent() {
 
 export function renderSkeletonImageThumbnail(size: PreviewSize) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+    const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
                   height={imageSize}/>

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -45,14 +45,14 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={cls("overflow-x-scroll", size === "tiny" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll", size === "smallest" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>
                         {index !== lines.length - 1 && <br/>}
                     </React.Fragment>)}
             </div>
-            : (size === "tiny"
+            : (size === "smallest"
                     ? <span className={"text-sm"}>{value}</span>
                     : <>{value}</>
             );

package/src/preview/util.ts

@@ -6,7 +6,7 @@ export const SMALL_THUMBNAIL = 100;
 export const REGULAR_THUMBNAIL = 200;
 
 export function getThumbnailMeasure(size: PreviewSize): number {
-    if (size === "tiny")
+    if (size === "smallest")
         return TINY_THUMBNAIL;
     else if (size === "small")
         return SMALL_THUMBNAIL;
@@ -19,7 +19,7 @@ export function getPreviewSizeFrom(size: CollectionSize): PreviewSize {
     switch (size) {
         case "xs":
         case "s":
-            return "tiny";
+            return "smallest";
         case "m":
             return "small";
         case "l":

package/src/types/auth.tsx

@@ -9,7 +9,7 @@ import { StorageSource } from "./storage";
  * to do it as the result of a hook.
  * @group Hooks and utilities
  */
-export type AuthController<UserType extends User = any, ExtraData extends any = any> = {
+export type AuthController<UserType extends User = any, ExtraData = any> = {
 
     /**
      * The user currently logged in
@@ -38,7 +38,7 @@ export type AuthController<UserType extends User = any, ExtraData extends any =
     /**
      * Sign out
      */
-    signOut: () => void;
+    signOut: () => Promise<void>;
 
     /**
      * Error initializing the authentication

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;
 }
 
 /**
@@ -477,8 +488,22 @@ export interface AdditionalFieldDelegate<M extends Record<string, any> = any,
  */
 export type EntityCustomView<M extends Record<string, any> = any> =
     {
+        /**
+         * Key of this custom view.
+         */
         key: string,
+        /**
+         * Name of this custom view.
+         */
         name: string,
+        /**
+         * If set to true, the actions of the entity will be included in the
+         * bottom of the panel (save buttons, delete buttons, etc.)
+         */
+        includeActions?: boolean;
+        /**
+         * Builder for rendering the custom view
+         */
         Builder?: React.ComponentType<EntityCustomViewParams<M>>;
     }
 

package/src/types/customization_controller.tsx

@@ -24,7 +24,6 @@ export type CustomizationController = {
      *
      * You can also define an entity view from the UI.
      */
-
     entityViews?: EntityCustomView[];
 
     /**

package/src/types/datasource.ts

@@ -1,6 +1,7 @@
-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";
 
 /**
  * @group Datasource
@@ -17,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,
 }
@@ -62,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 {
@@ -181,7 +183,8 @@ export interface DataSource {
      */
     deleteEntity<M extends Record<string, any> = any>(
         {
-            entity
+            entity,
+            collection
         }: DeleteEntityProps<M>
     ): Promise<void>;
 
@@ -190,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
      */
@@ -198,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
@@ -217,6 +221,18 @@ export interface DataSource {
      */
     isFilterCombinationValid?(props: FilterCombinationValidProps): boolean;
 
+    /**
+     * Called when the user clicks on the search bar in a collection view.
+     * Useful for initializing a text search index.
+     * @param props
+     */
+    initTextSearch?: (props: {
+        context: FireCMSContext,
+        path: string,
+        collection: EntityCollection,
+        parentCollectionIds?: string[]
+    }) => Promise<boolean>;
+
 }
 
 export type FilterCombinationValidProps = {
@@ -226,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
@@ -298,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.
@@ -314,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>({
@@ -343,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
@@ -361,32 +386,26 @@ export interface DataSourceDelegate {
      * Check if the given filter combination is valid
      * @param props
      */
-    isFilterCombinationValid?(props: Omit<FilterCombinationValidProps, "collection">): boolean;
-
-    /**
-     * Convert a FireCMS reference to a reference that can be used by the datasource
-     * @param reference
-     */
-    // buildReference: (reference: EntityReference) => any,
-
-    /**
-     * Convert a FireCMS GeoPoint to a GeoPoint that can be used by the datasource
-     * @param geoPoint
-     */
-    // buildGeoPoint: (geoPoint: GeoPoint) => any,
+    isFilterCombinationValid?(props: Omit<FilterCombinationValidProps, "collection"> & {
+        databaseId?: string
+    }): boolean;
 
     /**
      * Get the object to generate the current time in the datasource
      */
-    currentTime(): any;
-
-    // buildDate: (date: Date) => any;
-
-    // buildDeleteFieldValue: () => any;
+    currentTime?: () => any;
 
     delegateToCMSModel: (data: any) => any;
 
     cmsToDelegateModel: (data: any) => any;
 
     setDateToMidnight: (input?: any) => any;
+
+    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;
 };