@firecms/core 3.0.0-canary.5 → 3.0.0-canary.51

package/src/preview/components/ReferencePreview.tsx

@@ -1,21 +1,17 @@
 import * as React from "react";
-import { useMemo } from "react";
 
-import { Entity, EntityCollection, EntityReference, ResolvedProperty } from "../../types";
-
-import { getReferencePreviewKeys, getValueInPath, resolveCollection } from "../../util";
+import { Entity, EntityCollection, EntityReference } from "../../types";
 import {
     useCustomizationController,
     useEntityFetch,
     useNavigationController,
     useSideEntityController
 } from "../../hooks";
-import { PropertyPreview } from "../PropertyPreview";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { SkeletonPropertyComponent } from "../property_previews/SkeletonPropertyComponent";
-import { cn, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { IconButton, KeyboardTabIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { ErrorView } from "../../components";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
+import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -23,7 +19,7 @@ export type ReferencePreviewProps = {
     size: PreviewSize;
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
-    onHover?: boolean;
+    hover?: boolean;
     allowEntityNavigation?: boolean;
 };
 
@@ -34,12 +30,12 @@ export const ReferencePreview = React.memo<ReferencePreviewProps>(function Refer
     const reference = props.reference;
     if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
-        return <ReferencePreviewContainer
+        return <EntityPreviewContainer
             onClick={props.onClick}
             size={props.size}>
             <ErrorView error={"Unexpected value. Click to edit"}
                        tooltip={JSON.stringify(reference)}/>
-        </ReferencePreviewContainer>;
+        </EntityPreviewContainer>;
     }
     return <ReferencePreviewInternal {...props} />;
 }, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
@@ -47,7 +43,7 @@ export const ReferencePreview = React.memo<ReferencePreviewProps>(function Refer
 function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewProps) {
     return prevProps.disabled === nextProps.disabled &&
         prevProps.size === nextProps.size &&
-        prevProps.onHover === nextProps.onHover &&
+        prevProps.hover === nextProps.hover &&
         prevProps.reference?.id === nextProps.reference?.id &&
         prevProps.reference?.path === nextProps.reference?.path &&
         prevProps.allowEntityNavigation === nextProps.allowEntityNavigation
@@ -59,7 +55,7 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
                                                                      reference,
                                                                      previewProperties,
                                                                      size,
-                                                                     onHover,
+                                                                     hover,
                                                                      onClick,
                                                                      allowEntityNavigation = true
                                                                  }: ReferencePreviewProps) {
@@ -68,7 +64,7 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
 
     const navigationController = useNavigationController();
 
-    const collection = navigationController.getCollection<EntityCollection<M>>(reference.path);
+    const collection = navigationController.getCollection(reference.path);
     if (!collection) {
         if (customizationController.components?.missingReference) {
             return <customizationController.components.missingReference path={reference.path}/>;
@@ -85,18 +81,22 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
         disabled={disabled}
         allowEntityNavigation={allowEntityNavigation}
         onClick={onClick}
-        onHover={onHover}/>
+        hover={hover}/>
 }
 
-function ReferencePreviewExisting<M extends Record<string, any> = any>({ reference, collection, previewProperties, size, disabled, allowEntityNavigation, onClick, onHover }: ReferencePreviewProps & {
+function ReferencePreviewExisting<M extends Record<string, any> = any>({
+                                                                           reference,
+                                                                           collection,
+                                                                           previewProperties,
+                                                                           size,
+                                                                           disabled,
+                                                                           allowEntityNavigation,
+                                                                           onClick,
+                                                                           hover
+                                                                       }: ReferencePreviewProps & {
     collection: EntityCollection<M>
 }) {
 
-    const customizationController = useCustomizationController();
-
-    const analyticsController = useAnalyticsController();
-    const sideEntityController = useSideEntityController();
-
     const {
         entity,
         dataLoading,
@@ -114,145 +114,53 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
 
     const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
 
-    const resolvedCollection = useMemo(() => resolveCollection({
-        collection,
-        path: reference.path,
-        values: usedEntity?.values,
-        fields: customizationController.propertyConfigs
-    }), [collection]);
-
-    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
-        [previewProperties, resolvedCollection, size]);
-
     let body: React.ReactNode;
 
-    if (!resolvedCollection) {
-        return <ErrorView
-            error={"Could not find collection with id " + resolvedCollection}/>
-    }
-
     if (!reference) {
         body = <ErrorView error={"Reference not set"}/>;
     } else if (usedEntity && !usedEntity.values) {
         body = <ErrorView error={"Reference does not exist"}
                           tooltip={reference.path}/>;
-    } else {
-        body = (
-            <>
-                <div
-                    className="flex flex-col flex-grow w-full max-w-[calc(100%-52px)] m-1">
-
-                    {size !== "tiny" && (
-                        reference
-                            ? <div className={`${
-                                size !== "medium"
-                                    ? "block whitespace-nowrap overflow-hidden truncate"
-                                    : ""
-                            }`}>
-                                <Typography variant={"caption"}
-                                            className={"font-mono"}>
-                                    {reference.id}
-                                </Typography>
-                            </div>
-                            : <Skeleton/>)}
-
-                    {listProperties && listProperties.map((key) => {
-                        const childProperty = resolvedCollection.properties[key as string];
-                        if (!childProperty) return null;
-
-                        return (
-                            <div key={"ref_prev_" + (key as string)}
-                                 className={listProperties.length > 1 ? "my-0.5" : "my-0"}>
-                                {
-                                    usedEntity
-                                        ? <PropertyPreview
-                                            propertyKey={key as string}
-                                            value={getValueInPath(usedEntity.values, key)}
-                                            property={childProperty as ResolvedProperty}
-                                            // entity={usedEntity}
-                                            size={"tiny"}/>
-                                        : <SkeletonPropertyComponent
-                                            property={childProperty as ResolvedProperty}
-                                            size={"tiny"}/>
-                                }
-                            </div>
-                        );
-                    })}
-
-                </div>
-                <div className={`my-${size === "tiny" ? 2 : 4}`}>
-                    {!disabled && usedEntity && allowEntityNavigation &&
-                        <Tooltip title={`See details for ${usedEntity.id}`}>
-                            <IconButton
-                                color={"inherit"}
-                                size={"small"}
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
-                                        path: usedEntity.path,
-                                        entityId: usedEntity.id
-                                    });
-                                    sideEntityController.open({
-                                        entityId: usedEntity.id,
-                                        path: usedEntity.path,
-                                        collection: resolvedCollection,
-                                        updateUrl: true
-                                    });
-                                }}>
-                                <KeyboardTabIcon size={"small"}/>
-                            </IconButton>
-                        </Tooltip>}
-                </div>
-            </>
+    }
+    if (body) {
+
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                {body}
+            </EntityPreviewContainer>
         );
     }
 
-    return (
-        <ReferencePreviewContainer onClick={disabled ? undefined : onClick}
-                                   onHover={disabled ? undefined : onHover}
-                                   size={size}>
-            {body}
-        </ReferencePreviewContainer>
-    );
-}
-
-export function ReferencePreviewContainer({
-                                              children,
-                                              onHover,
-                                              size,
-                                              onClick
-                                          }: {
-    children: React.ReactNode;
-    onHover?: boolean;
-    size: PreviewSize;
-    onClick?: (e: React.SyntheticEvent) => void;
-}) {
-    return <Typography variant={"label"}
-                       className={cn("bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60",
-                           "w-full",
-                           "flex",
-                           "rounded-md",
-                           "overflow-hidden",
-                           onHover ? "hover:bg-opacity-90 dark:hover:bg-opacity-90" : "",
-                           size === "medium" ? "p-2" : "p-1",
-                           size === "tiny" ? "items-center" : "",
-                           "transition-colors duration-300 ease-in-out ",
-                           // onHover ? "shadow-outline" : "",
-                           onClick ? "cursor-pointer" : "")}
-                       style={{
-                           // @ts-ignore
-                           tabindex: 0
-                       }}
-                       onClick={(event) => {
-                           if (onClick) {
-                               event.preventDefault();
-                               onClick(event);
-                           }
-                       }}>
+    if (dataLoading && !usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                <Skeleton/>
+            </EntityPreviewContainer>
+        );
+    }
 
-        {children}
+    if (!usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                <ErrorView error={"Entity not found"}/>
+            </EntityPreviewContainer>
+        );
+    }
+    return <EntityPreview size={size}
+                          previewProperties={previewProperties}
+                          disabled={disabled}
+                          entity={usedEntity}
+                          collection={collection}
+                          onClick={onClick}
+                          includeEntityNavigation={allowEntityNavigation}
+                          hover={hover}/>;
 
-    </Typography>
 }
 
 const referencesCache = new Map<string, Entity<any>>();

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -20,7 +20,6 @@ export function ArrayOfMapsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -18,7 +18,6 @@ export function ArrayOfReferencesPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -23,7 +23,6 @@ export function ArrayOfStorageComponentsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -21,7 +21,6 @@ export function ArrayOfStringsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -23,7 +23,6 @@ export function ArrayOneOfPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -23,7 +23,6 @@ export function ArrayPropertyPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -6,7 +6,7 @@ import { PreviewType } from "../../types";
 import { UrlComponentPreview } from "../components/UrlComponentPreview";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ErrorBoundary } from "../../components";
-import { Chip, getColorSchemeForSeed } from "@firecms/ui";
+import { Chip, cn, getColorSchemeForSeed } from "@firecms/ui";
 
 /**
  * @group Preview components
@@ -24,14 +24,14 @@ export function StringPropertyPreview({
         return <EnumValuesChip
             enumKey={enumKey}
             enumValues={resolvedProperty.enumValues}
-            size={size !== "medium" ? "small" : "medium"}/>;
+            size={size}/>;
     } else if (property.previewAsTag) {
         const colorScheme = getColorSchemeForSeed(propertyKey ?? "");
         return (
             <ErrorBoundary>
                 <Chip
                     colorScheme={colorScheme}
-                    size={size !== "medium" ? "small" : "medium"}>
+                    size={size}>
                     {value}
                 </Chip>
             </ErrorBoundary>);
@@ -45,15 +45,16 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={"overflow-x-scroll"}>
+            ? <div className={cn("overflow-x-scroll", size === "tiny" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>
                         {index !== lines.length - 1 && <br/>}
                     </React.Fragment>)}
             </div>
-            : <>
-                {value}
-            </>;
+            : (size === "tiny"
+                    ? <span className={"text-sm"}>{value}</span>
+                    : <>{value}</>
+            );
     }
 }

package/src/types/analytics.ts

@@ -26,6 +26,7 @@ export type CMSAnalyticsEvent =
     | "home_navigate_to_collection"
     | "home_favorite_navigate_to_collection"
     | "home_navigate_to_view"
+    | "home_navigate_to_admin_view"
     | "home_favorite_navigate_to_view"
 
     | "collection_inline_editing"

package/src/types/auth.tsx

@@ -1,4 +1,7 @@
 import { User } from "./user";
+import { Role } from "./roles";
+import { DataSourceDelegate } from "./datasource";
+import { StorageSource } from "./storage";
 
 /**
  * Controller for retrieving the logged user or performing auth related operations.
@@ -6,7 +9,7 @@ import { User } from "./user";
  * to do it as the result of a hook.
  * @group Hooks and utilities
  */
-export type AuthController<UserType extends User = User> = {
+export type AuthController<UserType extends User = any, ExtraData extends any = any> = {
 
     /**
      * The user currently logged in
@@ -14,6 +17,11 @@ export type AuthController<UserType extends User = User> = {
      */
     user: UserType | null;
 
+    /**
+     * Roles related to the logged user
+     */
+    roles?: Role[];
+
     /**
      * Initial loading flag. It is used not to display the login screen
      * when the app first loads, and it has not been checked whether the user
@@ -21,6 +29,12 @@ export type AuthController<UserType extends User = User> = {
      */
     initialLoading?: boolean;
 
+    /**
+     * Loading flag. It is used to display a loading screen when the user is
+     * logging in or out.
+     */
+    authLoading: boolean;
+
     /**
      * Sign out
      */
@@ -46,4 +60,39 @@ export type AuthController<UserType extends User = User> = {
      */
     loginSkipped: boolean;
 
+    extra: ExtraData;
+
+    setExtra: (extra: ExtraData) => void;
+
+    // setUser?: (user: UserType | null) => void;
+
+    // setRoles?: (roles: Role[]) => void;
 };
+
+/**
+ * Implement this function to allow access to specific users.
+ * @group Hooks and utilities
+ */
+export type Authenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>> = (props: {
+
+    /**
+     * Logged-in user or null
+     */
+    user: UserType | null;
+
+    /**
+     * AuthController
+     */
+    authController: Controller;
+
+    /**
+     * Connector to your database, e.g. your Firestore database
+     */
+    dataSourceDelegate: DataSourceDelegate;
+
+    /**
+     * Used storage implementation
+     */
+    storageSource: StorageSource;
+
+}) => boolean | Promise<boolean>;

package/src/types/collections.ts

@@ -8,6 +8,7 @@ import { EnumValues, PropertiesOrBuilders } from "./properties";
 import { FormContext } from "./fields";
 import { EntityAction } from "./entity_actions";
 import { ExportConfig } from "./export_import";
+import { EntityOverrides } from "./entity_overrides";
 
 /**
  * This interface represents a view that includes a collection of entities.
@@ -16,7 +17,7 @@ import { ExportConfig } from "./export_import";
  *
  * @group Models
  */
-export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
+export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = any> {
 
     /**
      * You can set an alias that will be used internally instead of the `path`.
@@ -76,6 +77,13 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      */
     properties: PropertiesOrBuilders<M>;
 
+    /**
+     * Title property of the entity. This is the property that will be used
+     * as the title in entity related views and references.
+     * If not specified, the first property simple text property will be used.
+     */
+    titleProperty?: keyof M,
+
     /**
      * Can this collection be edited by the end user.
      * Defaults to `true`.
@@ -99,6 +107,10 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      *       `subcollection:`. e.g. `subcollection:orders`.
      *     - If you are using a collection group, you will also have an
      *       additional `collectionGroupParent` column.
+     * You can use this prop to hide some properties from the table view.
+     * Note that if you set this prop, other ways to hide fields, like
+     * `hidden` in the property definition,will be ignored.
+     * `propertiesOrder` has precedence over `hidden`.
      */
     propertiesOrder?: Extract<keyof M, string>[];
 
@@ -139,7 +151,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * is being created, updated or deleted.
      * Useful for adding your own logic or blocking the execution of the operation.
      */
-    callbacks?: EntityCallbacks<M>;
+    callbacks?: EntityCallbacks<M, UserType>;
 
     /**
      * Builder for rendering additional components such as buttons in the
@@ -276,6 +288,22 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      *
      */
     exportable?: boolean | ExportConfig<UserType>;
+
+    /**
+     * User id of the owner of this collection. This is used only by plugins, or if you
+     * are writing custom code
+     */
+    ownerId?: string;
+
+    /**
+     * Overrides for the entity view, like the data source or the storage source.
+     */
+    overrides?: EntityOverrides;
+
+    /**
+     * Width of the side dialog (in pixels) when opening an entity in this collection.
+     */
+    sideDialogWidth?: number | string;
 }
 
 /**
@@ -346,7 +374,7 @@ export type SelectionController<M extends Record<string, any> = any> = {
 
 /**
  * Filter conditions in a `Query.where()` clause are specified using the
- * strings '<', '<=', '==', '>=', '>', 'array-contains', 'in', and 'array-contains-any'.
+ * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.
  * @group Models
  */
 export type WhereFilterOp =
@@ -436,7 +464,7 @@ export interface AdditionalFieldDelegate<M extends Record<string, any> = any,
      * view.
      * @param entity
      */
-    value?: (props: { entity: Entity<M>, context: FireCMSContext }) => string | number | Promise<string | number> | undefined;
+    value?: (props: { entity: Entity<M>, context: FireCMSContext<any> }) => string | number | Promise<string | number> | undefined;
 }
 
 /**
@@ -508,7 +536,7 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     filterValues?: FilterValues<Extract<keyof M, string>>;
     setFilterValues?: (filterValues: FilterValues<Extract<keyof M, string>>) => void;
     sortBy?: [Extract<keyof M, string>, "asc" | "desc"];
-    setSortBy?: (sortBy: [Extract<keyof M, string>, "asc" | "desc"]) => void;
+    setSortBy?: (sortBy?: [Extract<keyof M, string>, "asc" | "desc"]) => void;
     searchString?: string;
     setSearchString?: (searchString?: string) => void;
     clearFilter?: () => void;

package/src/types/datasource.ts

@@ -8,7 +8,7 @@ import { ResolvedEntityCollection } from "./resolved_entities";
 export interface FetchEntityProps<M extends Record<string, any> = any> {
     path: string;
     entityId: string;
-    collection?: EntityCollection<M>
+    collection?: EntityCollection<M, any>
 }
 
 /**
@@ -216,6 +216,7 @@ export interface DataSource {
      * @param props
      */
     isFilterCombinationValid?(props: FilterCombinationValidProps): boolean;
+
 }
 
 export type FilterCombinationValidProps = {
@@ -366,24 +367,26 @@ export interface DataSourceDelegate {
      * Convert a FireCMS reference to a reference that can be used by the datasource
      * @param reference
      */
-    buildReference: (reference: EntityReference) => any,
+    // buildReference: (reference: EntityReference) => any,
 
     /**
      * Convert a FireCMS GeoPoint to a GeoPoint that can be used by the datasource
      * @param geoPoint
      */
-    buildGeoPoint: (geoPoint: GeoPoint) => any,
+    // buildGeoPoint: (geoPoint: GeoPoint) => any,
 
     /**
      * Get the object to generate the current time in the datasource
      */
     currentTime(): any;
 
-    buildDate: (date: Date) => any;
+    // buildDate: (date: Date) => any;
 
-    buildDeleteFieldValue: () => any;
+    // buildDeleteFieldValue: () => any;
 
     delegateToCMSModel: (data: any) => any;
 
+    cmsToDelegateModel: (data: any) => any;
+
     setDateToMidnight: (input?: any) => any;
 }

package/src/types/entities.ts

@@ -37,7 +37,7 @@ export type EntityValues<M extends object> = M;
 /**
  * Class used to create a reference to an entity in a different path
  */
-export class EntityReference<M extends Record<string, any> = any> {
+export class EntityReference {
     /**
      * ID of the entity
      */
@@ -78,3 +78,11 @@ export class GeoPoint {
         this.longitude = longitude;
     }
 }
+
+export class Vector {
+    readonly value: number[];
+
+    constructor(value: number[]) {
+        this.value = value;
+    }
+}