@firecms/core 3.0.0-canary.27 → 3.0.0-canary.271

package/dist/types/fields.d.ts

@@ -1,6 +1,7 @@
-import { EntityValues } from "./entities";
-import { CMSType, PropertyOrBuilder } from "./properties";
+import { CMSType, Property, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
+import { FormexController } from "@firecms/formex";
+import { Entity } from "./entities";
 /**
  * When building a custom field you need to create a React component that takes
  * this interface as props.
@@ -17,9 +18,6 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      * Current value of this field
      */
     value: T;
-    /**
-     * Initial value of this field
-     */
     /**
      * Set value of field directly
      */
@@ -34,53 +32,50 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Is the form currently submitting
      */
-    isSubmitting: boolean;
+    isSubmitting?: boolean;
     /**
      * Should this field show the error indicator.
      * Note that there might be an error (like an empty field that should be
      * filled) but we don't want to show the error until the user has tried
      * saving.
      */
-    showError: boolean;
+    showError?: boolean;
     /**
      * Is there an error in this field. The error field has the same shape as
      * the field, replacing values with a string containing the error.
      * It takes the value `null` if there is no error
      */
-    error: any | null;
+    error?: any | null;
     /**
      * Has this field been touched
      */
-    touched: boolean;
+    touched?: boolean;
     /**
      * Property related to this field
      */
-    property: ResolvedProperty<T>;
+    property: Property<T> | ResolvedProperty<T>;
     /**
      * Should this field include a description
      */
-    includeDescription: boolean;
+    includeDescription?: boolean;
     /**
      * Flag to indicate that the underlying value has been updated in the
      * datasource
      */
-    underlyingValueHasChanged: boolean;
+    underlyingValueHasChanged?: boolean;
     /**
      * Is this field part of an array
      */
-    partOfArray: boolean;
-    /**
-     * Is this field part of a block (oneOf array)
-     */
-    partOfBlock: boolean;
+    partOfArray?: boolean;
     /**
-     * Is this field being rendered in the entity table popup
+     * Display the child properties directly, without being wrapped in an
+     * extendable panel. Note that this will also hide the title of this property.
      */
-    tableMode: boolean;
+    minimalistView?: boolean;
     /**
      * Should this field autofocus on mount
      */
-    autoFocus: boolean;
+    autoFocus?: boolean;
     /**
      * Additional properties set by the developer
      */
@@ -92,29 +87,29 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Flag to indicate if this field should be disabled
      */
-    disabled: boolean;
+    disabled?: boolean;
+    /**
+     * Size of the field
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Some properties might change internal state (like expanding a panel).
+     * This function should be called when the internal state changes.
+     * This is used to preserve state in array containers.
+     *
+     * @param property
+     */
+    onPropertyChange?: (property: Partial<Property<any>>) => void;
 }
 /**
  * Context passed to custom fields
  * @group Form custom fields
  */
 export interface FormContext<M extends Record<string, any> = any> {
-    /**
-     * Collection of the entity being modified
-     */
-    collection: ResolvedEntityCollection<M>;
     /**
      * Current values of the entity
      */
-    values: EntityValues<M>;
-    /**
-     * Entity id, it can be null if it's a new entity
-     */
-    entityId?: string;
-    /**
-     * Path this entity is located at
-     */
-    path: string;
+    values: M;
     /**
      * Update the value of a field
      * @param key
@@ -123,9 +118,32 @@ export interface FormContext<M extends Record<string, any> = any> {
      */
     setFieldValue: (key: string, value: any, shouldValidate?: boolean) => void;
     /**
-     * Save the entity
+     * Save the entity.
+     */
+    save: (values: M) => void;
+    /**
+     * Collection of the entity being modified
      */
-    save: (values: EntityValues<M>) => void;
+    collection?: ResolvedEntityCollection<M>;
+    /**
+     * Entity id, it can be null if it's a new entity
+     */
+    entityId: string;
+    /**
+     * Path this entity is located at
+     */
+    path?: string;
+    status: "new" | "existing" | "copy";
+    entity?: Entity<M>;
+    savingError?: Error;
+    openEntityMode: "side_panel" | "full_screen";
+    /**
+     * This is the underlying formex controller that powers the form.
+     * If you are in a red only mode, the formex controller is there, but you can't
+     * operate with it
+     */
+    formex: FormexController<M>;
+    disabled: boolean;
 }
 /**
  * In case you need to render a field bound to a Property inside your
@@ -156,18 +174,15 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      * field is being edited
      */
     underlyingValueHasChanged?: boolean;
-    /**
-     * Is this field being rendered in a table
-     */
-    tableMode?: boolean;
     /**
      * Is this field part of an array
      */
     partOfArray?: boolean;
     /**
-     * Is this field part of a block (oneOf array)
+     * Display the child properties directly, without being wrapped in an
+     * extendable panel. Note that this will also hide the title of this property.
      */
-    partOfBlock?: boolean;
+    minimalistView?: boolean;
     /**
      * Should the field take focus when rendered. When opening the popup view
      * in table mode, it makes sense to put the focus on the only field rendered.
@@ -177,4 +192,21 @@ 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?: "small" | "medium" | "large";
+    /**
+     * Some properties might change internal state (like expanding a panel).
+     * This function should be called when the internal state changes.
+     * This is used to preserve state in array containers.
+     *
+     * @param property
+     */
+    onPropertyChange?: (property: Partial<Property<any>>) => void;
 }

package/dist/types/firecms.d.ts

@@ -12,6 +12,7 @@ import { EntityLinkBuilder } from "./entity_link_builder";
 import { UserConfigurationPersistence } from "./local_config_persistence";
 import { FireCMSPlugin } from "./plugins";
 import { CMSAnalyticsEvent } from "./analytics";
+import { EntityAction } from "./entity_actions";
 /**
  * Use this callback to build entity collections dynamically.
  * You can use the user to decide which collections to show.
@@ -44,7 +45,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @group Models
  */
-export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
+export type FireCMSProps<USER extends User> = {
     /**
      * Use this function to return the components you want to render under
      * FireCMS
@@ -62,6 +63,10 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
          */
         loading: boolean;
     }) => React.ReactNode;
+    /**
+     * If you have a custom API key, you can use it here.
+     */
+    apiKey?: string;
     /**
      * Record of custom form fields to be used in the CMS.
      * You can use the key to reference the custom field in
@@ -81,6 +86,13 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
      * You can also define an entity view from the UI.
      */
     entityViews?: EntityCustomView[];
+    /**
+     * List of actions that can be performed on entities.
+     * These actions are displayed in the entity view and in the collection view.
+     * You can later reuse these actions in the `entityActions` prop of a collection,
+     * by specifying the `key` of the action.
+     */
+    entityActions?: EntityAction[];
     /**
      * Format of the dates in the CMS.
      * Defaults to 'MMMM dd, yyyy, HH:mm:ss'
@@ -101,7 +113,7 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
     /**
      * Delegate for implementing your auth operations.
      */
-    authController: AuthController<UserType>;
+    authController: AuthController<USER>;
     /**
      * Use this controller to access the configuration that is stored locally,
      * and not defined in code
@@ -109,7 +121,8 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
     userConfigPersistence?: UserConfigurationPersistence;
     /**
      * Use plugins to modify the behaviour of the CMS.
-     * Currently, in ALPHA, and likely subject to change.
+     * DEPRECATED: use the `plugins` prop in the `useBuildNavigationController` instead.
+     * This prop will work as a fallback for the `plugins` prop in the `useBuildNavigationController`.
      */
     plugins?: FireCMSPlugin<any, any, any>[];
     /**

package/dist/types/firecms_context.d.ts

@@ -17,7 +17,7 @@ import { AnalyticsController } from "./analytics_controller";
  * @group Hooks and utilities
  * @see useFireCMSContext
  */
-export type FireCMSContext<UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>> = {
+export type FireCMSContext<USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>> = {
     /**
      * Connector to your database, e.g. your Firestore database
      */

package/dist/types/index.d.ts

@@ -23,7 +23,6 @@ export * from "./plugins";
 export * from "./analytics";
 export * from "./firecms";
 export * from "./roles";
-export * from "./appcheck";
 export * from "./export_import";
 export * from "./modify_collections";
 export * from "./analytics_controller";

package/dist/types/navigation.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { EntityCollection } from "./collections";
 import { EntityReference } from "./entities";
+import { FireCMSPlugin } from "./plugins";
 /**
  * Controller that includes the resolved navigation and utility methods and
  * attributes.
+ * This controller holds the state of the navigation including the collections.
  * @group Models
  */
 export type NavigationController<EC extends EntityCollection = EntityCollection<any>> = {
@@ -29,7 +31,7 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * level of the navigation (e.g. in the home page or the navigation
      * drawer)
      */
-    topLevelNavigation?: TopNavigationResult;
+    topLevelNavigation?: NavigationResult;
     /**
      * Is the navigation loading (the configuration persistence has not
      * loaded yet, or a specified navigation builder has not completed)
@@ -47,9 +49,13 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * Get the collection configuration for a given path.
      * The collection is resolved from the given path or alias.
      */
-    getCollection: (pathOrAlias: string, entityId?: string, includeUserOverride?: boolean) => EC | undefined;
+    getCollection: (pathOrId: string, includeUserOverride?: boolean) => EC | undefined;
     /**
-     * Get the collection configuration from its parent path segments.
+     * Get the top level collection configuration for a given id
+     */
+    getCollectionById: (id: string) => EC | undefined;
+    /**
+     * Get the collection configuration from its parent ids.
      */
     getCollectionFromIds: (ids: string[]) => EC | undefined;
     /**
@@ -57,11 +63,13 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     getCollectionFromPaths: (pathSegments: string[]) => EC | undefined;
     /**
-     * Default path under the navigation routes of the CMS will be created
+     * Default path under the navigation routes of the CMS will be created.
+     * Defaults to '/'. You may want to change this `basepath` to 'admin' for example.
      */
     basePath: string;
     /**
-     * Default path under the collection routes of the CMS will be created
+     * Default path under the collection routes of the CMS will be created.
+     * It defaults to '/c'
      */
     baseCollectionPath: string;
     /**
@@ -72,14 +80,6 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * @param cmsPath
      */
     urlPathToDataPath: (cmsPath: string) => string;
-    /**
-     * Convert a collection or entity path to a URL path
-     * @param path
-     */
-    buildCMSUrlPath: (path: string) => string;
-    buildUrlEditCollectionPath: (props: {
-        path: string;
-    }) => string;
     /**
      * Base url path for the home screen
      */
@@ -97,10 +97,11 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     buildUrlCollectionPath: (path: string) => string;
     /**
-     * Turn a path with aliases into a resolved path
+     * Turn a path with collection ids into a resolved path.
+     * The ids (typically used in urls) will be replaced with relative paths (typically used in database paths)
      * @param pathWithAliases
      */
-    resolveAliasesFrom: (pathWithAliases: string) => string;
+    resolveIdsFrom: (pathWithAliases: string) => string;
     /**
      * Call this method to recalculate the navigation
      */
@@ -120,6 +121,31 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * @param ids
      */
     convertIdsToPaths: (ids: string[]) => string[];
+    /**
+     * A function to navigate to a specified route or URL.
+     *
+     * @param {string} to - The target route or URL to navigate to.
+     * @param {NavigateOptions} [options] - Optional configuration settings for navigation, such as replace behavior or state data.
+     */
+    navigate: (to: string, options?: NavigateOptions) => void;
+    /**
+     * Plugin system allowing to extend the CMS functionality.
+     */
+    plugins?: FireCMSPlugin<any, any, any>[];
+};
+export interface NavigateOptions {
+    replace?: boolean;
+    state?: any;
+    preventScrollReset?: boolean;
+    relative?: "route" | "path";
+    flushSync?: boolean;
+    viewTransition?: boolean;
+}
+export type NavigationBlocker = {
+    updateBlockListener: (path: string, block: boolean, basePath?: string) => () => void;
+    isBlocked: (path: string) => boolean;
+    proceed?: () => void;
+    reset?: () => void;
 };
 /**
  * Custom additional views created by the developer, added to the main
@@ -144,8 +170,9 @@ 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;
+    icon?: string | React.ReactNode;
     /**
      * Should this view be hidden from the main navigation panel.
      * It will still be accessible if you reach the specified path
@@ -163,7 +190,21 @@ export interface CMSView {
      */
     group?: string;
 }
-export interface TopNavigationEntry {
+/**
+ * Used to group navigation entries in the main navigation.
+ */
+export interface NavigationGroupMapping {
+    /**
+     * Name of the group, used to display the group header in the UI
+     */
+    name: string;
+    /**
+     * List of collection ids or view paths that belong to this group.
+     */
+    entries: string[];
+}
+export interface NavigationEntry {
+    id: string;
     url: string;
     name: string;
     path: string;
@@ -173,7 +214,9 @@ export interface TopNavigationEntry {
     description?: string;
     group: string;
 }
-export type TopNavigationResult = {
-    navigationEntries: TopNavigationEntry[];
+export type NavigationResult = {
+    allowDragAndDrop: boolean;
+    navigationEntries: NavigationEntry[];
     groups: string[];
+    onNavigationEntriesUpdate: (entries: NavigationGroupMapping[]) => void;
 };

package/dist/types/permissions.d.ts

@@ -30,7 +30,7 @@ export interface Permissions {
  * Props passed to a {@link PermissionsBuilder}
  * @group Models
  */
-export interface PermissionsBuilderProps<EC extends EntityCollection = EntityCollection, UserType extends User = User, M extends object = InferCollectionType<EC>> {
+export interface PermissionsBuilderProps<EC extends EntityCollection = EntityCollection, USER extends User = User, M extends object = InferCollectionType<EC>> {
     /**
      * Entity being edited, might be null in some cases, when the operation
      * refers to the collection.
@@ -49,7 +49,7 @@ export interface PermissionsBuilderProps<EC extends EntityCollection = EntityCol
     /**
      * Logged in user
      */
-    user: UserType | null;
+    user: USER | null;
     /**
      * Collection these permissions apply to
      */
@@ -57,11 +57,11 @@ export interface PermissionsBuilderProps<EC extends EntityCollection = EntityCol
     /**
      * Auth controller
      */
-    authController: AuthController<UserType>;
+    authController: AuthController<USER>;
 }
 /**
  * Builder used to assign permissions to entities,
  * based on the logged user or collection.
  * @group Models
  */
-export type PermissionsBuilder<EC extends EntityCollection = EntityCollection, UserType extends User = User, M extends object = InferCollectionType<EC>> = (({ pathSegments, user, collection, authController }: PermissionsBuilderProps<EC, UserType, M>) => Permissions | undefined);
+export type PermissionsBuilder<EC extends EntityCollection = EntityCollection, USER extends User = User, M extends object = InferCollectionType<EC>> = (({ pathSegments, user, collection, authController }: PermissionsBuilderProps<EC, USER, M>) => Permissions | undefined);

package/dist/types/plugins.d.ts

@@ -1,17 +1,18 @@
 import React, { PropsWithChildren } from "react";
 import { FireCMSContext } from "./firecms_context";
-import { CollectionActionsProps, EntityCollection } from "./collections";
+import { CollectionActionsProps, EntityCollection, EntityTableController } from "./collections";
 import { User } from "./user";
 import { FieldProps, FormContext } from "./fields";
 import { CMSType, Property } from "./properties";
 import { EntityStatus } from "./entities";
 import { ResolvedProperty } from "./resolved_entities";
+import { NavigationGroupMapping } from "./navigation";
 /**
  * Interface used to define plugins for FireCMS.
  * NOTE: This is a work in progress and the API is not stable yet.
  * @group Core
  */
-export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection, COL_ACTIONS_PROPS = any> = {
+export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection, COL_ACTIONS_PROPS = any, COL_ACTIONS_START__PROPS = any> = {
     /**
      * Key of the plugin. This is used to identify the plugin in the CMS.
      */
@@ -70,6 +71,17 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             title: string;
             children: React.ReactNode;
         };
+        /**
+         * Allow reordering with drag and drop of the collections in the home page.
+         */
+        allowDragAndDrop?: boolean;
+        navigationEntries?: NavigationGroupMapping[];
+        /**
+         * This method will be called when the entries are updated in the home page.
+         * group => navigationEntriesOrder (path)
+         * @param entries
+         */
+        onNavigationEntriesUpdate?: (entries: NavigationGroupMapping[]) => void;
     };
     collectionView?: {
         /**
@@ -78,6 +90,14 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
          */
         CollectionActions?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS>[];
         collectionActionsProps?: COL_ACTIONS_PROPS;
+        CollectionActionsStart?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS>[];
+        collectionActionsStartProps?: COL_ACTIONS_START__PROPS;
+        blockSearch?: (props: {
+            context: FireCMSContext;
+            path: string;
+            collection: EC;
+            parentCollectionIds?: string[];
+        }) => boolean;
         showTextSearchBar?: (props: {
             context: FireCMSContext;
             path: string;
@@ -101,6 +121,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             parentCollectionIds: string[];
             onHover: boolean;
             collection: EC;
+            tableController: EntityTableController;
         }>;
         /**
          * If you add this callback to your plugin, an add button will be added to the collection table.
@@ -110,6 +131,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             fullPath: string;
             parentCollectionIds: string[];
             collection: EC;
+            tableController: EntityTableController;
         }>;
     };
     form?: {
@@ -117,10 +139,29 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
             Component: React.ComponentType<PropsWithChildren<FORM_PROPS & PluginFormActionProps<any, EC>>>;
             props?: FORM_PROPS;
         };
+        /**
+         * Add custom actions to the default ones ("Save", "Discard"...)
+         */
         Actions?: React.ComponentType<PluginFormActionProps<any, EC>>;
+        /**
+         * Add custom actions to the top of the form
+         */
+        ActionsTop?: React.ComponentType<PluginFormActionProps<any, EC>>;
         fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T, any, EC>) => React.ComponentType<FieldProps<T>> | null;
         fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
     };
+    collection?: {
+        /**
+         * Use this method to modify a single collection before it is rendered.
+         * @param collection
+         */
+        modifyCollection?: (collection: EntityCollection) => EntityCollection;
+        /**
+         * Use this method to modify, add or remove collections.
+         * @param collections
+         */
+        injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
+    };
 };
 /**
  * Props passed to the {@link FireCMSPlugin.homePage.CollectionActions} method.
@@ -128,7 +169,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
  *
  * @group Models
  */
-export interface PluginHomePageActionsProps<EP extends object = object, M extends Record<string, any> = any, UserType extends User = User, EC extends EntityCollection<M> = EntityCollection<M>> {
+export interface PluginHomePageActionsProps<EP extends object = object, M extends Record<string, any> = any, USER extends User = User, EC extends EntityCollection<M> = EntityCollection<M>> {
     /**
      * Collection path of this entity. This is the full path, like
      * `users/1234/addresses`
@@ -141,17 +182,19 @@ export interface PluginHomePageActionsProps<EP extends object = object, M extend
     /**
      * Context of the app status
      */
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
     extraProps?: EP;
 }
-export interface PluginFormActionProps<UserType extends User = User, EC extends EntityCollection = EntityCollection> {
+export interface PluginFormActionProps<USER extends User = User, EC extends EntityCollection = EntityCollection> {
     entityId?: string;
     path: string;
+    parentCollectionIds: string[];
     status: EntityStatus;
     collection: EC;
+    disabled: boolean;
     formContext?: FormContext<any>;
-    context: FireCMSContext<UserType>;
-    currentEntityId?: string;
+    context: FireCMSContext<USER>;
+    openEntityMode: "side_panel" | "full_screen";
 }
 export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {
     fieldConfigId: string;
@@ -159,13 +202,13 @@ export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Reco
     property: Property<T> | ResolvedProperty<T>;
     Field: React.ComponentType<FieldProps<T, any, M>>;
     plugin: FireCMSPlugin;
-    path: string;
-    collection: EC;
+    path?: string;
+    collection?: EC;
 };
-export interface PluginGenericProps<UserType extends User = User> {
-    context: FireCMSContext<UserType>;
+export interface PluginGenericProps<USER extends User = User> {
+    context: FireCMSContext<USER>;
 }
-export interface PluginHomePageAdditionalCardsProps<UserType extends User = User> {
+export interface PluginHomePageAdditionalCardsProps<USER extends User = User> {
     group?: string;
-    context: FireCMSContext<UserType>;
+    context: FireCMSContext<USER>;
 }