@firecms/core 3.0.0-canary.1 → 3.0.0-canary.100

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ResolvedMapProperty } from "../../types";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 import { EmptyValue } from "../components/EmptyValue";
 
@@ -61,7 +61,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                     return (
                         <div
                             key={`map_preview_table_${key}}`}
-                            className={cn(defaultBorderMixin, "last:border-b-0 border-b")}>
+                            className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                             <div
                                 className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
                                 <div
@@ -87,7 +87,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                             </div>
 
                             {(childProperty.dataType === "map" || childProperty === "array") &&
-                                <div className={cn(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
+                                <div className={cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={(value)[key]}
@@ -113,7 +113,7 @@ export function KeyValuePreview({ value }: { value: any }) {
             Object.entries(value).map(([key, childValue]) => (
                 <div
                     key={`map_preview_table_${key}}`}
-                    className={cn(defaultBorderMixin, "last:border-b-0 border-b")}>
+                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                     <div
                         className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
                         <div
@@ -135,7 +135,7 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                     </div>
                     {typeof childValue === "object" &&
-                        <div className={cn(defaultBorderMixin, "border-l pl-4")}>
+                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
                             <KeyValuePreview value={childValue}/>
                         </div>
                     }

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, cls, 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={cls("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 = 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,10 +29,16 @@ 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
      */
-    signOut: () => void;
+    signOut: () => Promise<void>;
 
     /**
      * Error initializing the authentication
@@ -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,8 +107,12 @@ 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>[];
+    propertiesOrder?: (Extract<keyof M, string> | `subcollection:${string}`)[];
 
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
@@ -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;
 }
 
 /**
@@ -334,19 +362,18 @@ 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;
 }
 
 /**
  * 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 +463,10 @@ 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;
 }
 
 /**
@@ -446,8 +476,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>>;
     }
 
@@ -508,7 +552,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/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
@@ -8,7 +9,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>
 }
 
 /**
@@ -65,9 +66,8 @@ export interface DeleteEntityProps<M extends Record<string, any> = any> {
 }
 
 /**
- * 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 {
@@ -216,6 +216,19 @@ export interface DataSource {
      * @param props
      */
     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 = {
@@ -240,6 +253,17 @@ export type ListenCollectionDelegateProps<M extends Record<string, any> = any> =
 };
 
 export interface DataSourceDelegate {
+
+    /**
+     * Key that identifies this data source delegate
+     */
+    key: string;
+
+    /**
+     * If the data source has been initialised
+     */
+    initialised?: boolean;
+
     /**
      * Fetch data from a collection
      * @param path
@@ -318,8 +342,8 @@ export interface DataSourceDelegate {
     /**
      * 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>({
@@ -362,28 +386,21 @@ export interface DataSourceDelegate {
      */
     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,
-
     /**
      * 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,
+        collection: EntityCollection,
+        parentCollectionIds?: string[]
+    }) => Promise<boolean>;
 }

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
      */
@@ -56,6 +56,10 @@ export class EntityReference<M extends Record<string, any> = any> {
     get pathWithId() {
         return `${this.path}/${this.id}`;
     }
+
+    isEntityReference() {
+        return true;
+    }
 }
 
 export class GeoPoint {
@@ -74,3 +78,11 @@ export class GeoPoint {
         this.longitude = longitude;
     }
 }
+
+export class Vector {
+    readonly value: number[];
+
+    constructor(value: number[]) {
+        this.value = value;
+    }
+}

package/src/types/entity_actions.tsx

@@ -5,9 +5,25 @@ import { EntityCollection, SelectionController } from "./collections";
 import { User } from "./user";
 import { SideEntityController } from "./side_entity_controller";
 
+/**
+ * An entity action is a custom action that can be performed on an entity.
+ * They are displayed in the entity view and in the collection view.
+ */
 export type EntityAction<M extends object = any, UserType extends User = User> = {
+    /**
+     * Title of the action
+     */
     name: string;
+
+    /**
+     * Icon of the action
+     */
     icon?: React.ReactElement;
+
+    /**
+     * Callback when the action is clicked
+     * @param props
+     */
     onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void> | void;
 
     /**
@@ -21,6 +37,7 @@ export type EntityAction<M extends object = any, UserType extends User = User> =
      * Show this action in the form, defaults to true
      */
     includeInForm?: boolean;
+
 }
 
 export type EntityActionClickProps<M extends object, UserType extends User = User> = {

package/src/types/entity_callbacks.ts

@@ -78,7 +78,7 @@ export interface EntityOnFetchProps<M extends Record<string, any> = any, UserTyp
     /**
      * Collection of the entity
      */
-    collection: EntityCollection<M>;
+    collection: EntityCollection<M, UserType>;
 
     /**
      * Full path of the CMS where this collection is being fetched.
@@ -193,7 +193,7 @@ export interface EntityOnDeleteProps<M extends Record<string, any> = any, UserTy
     /**
      * Context of the app status
      */
-    context: FireCMSContext;
+    context: FireCMSContext<UserType>;
 }
 
 /**

package/src/types/entity_overrides.tsx

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