@firecms/core 3.0.0-beta.1 → 3.0.0-beta.10

package/dist/core/Scaffold.d.ts

@@ -1,52 +0,0 @@
-import React from "react";
-import { DrawerProps } from "./Drawer";
-import { FireCMSAppBarProps } from "../components";
-export declare const DRAWER_WIDTH = 280;
-/**
- * @group Core
- */
-export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = object> {
-    /**
-     * Name of the app, displayed as the main title and in the tab title
-     */
-    name: string;
-    /**
-     * Logo to be displayed in the drawer of the CMS
-     */
-    logo?: string;
-    includeDrawer?: boolean;
-    /**
-     * In case you need to override the view that gets rendered as a drawer
-     * @see DefaultDrawer
-     */
-    Drawer?: React.ComponentType<DrawerProps<ExtraDrawerProps>>;
-    /**
-     * Additional props passed to the custom Drawer
-     */
-    drawerProps?: Partial<DrawerProps> & ExtraDrawerProps;
-    /**
-     * Open the drawer on hover
-     */
-    autoOpenDrawer?: boolean;
-    /**
-     * A component that gets rendered on the upper side of the main toolbar.
-     * `toolbarExtraWidget` has no effect if this is set.
-     */
-    FireCMSAppBarComponent?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
-    /**
-     * Additional props passed to the custom AppBar
-     */
-    fireCMSAppBarComponentProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
-}
-/**
- * This view acts as a scaffold for FireCMS.
- *
- * It is in charge of displaying the navigation drawer, top bar and main
- * collection views.
- * This component needs a parent {@link FireCMS}
- *
- * @param props
- * @constructor
- * @group Core
- */
-export declare const Scaffold: React.NamedExoticComponent<React.PropsWithChildren<ScaffoldProps<object, object>>>;

package/dist/form/EntityForm.d.ts

@@ -1,75 +0,0 @@
-import { Entity, EntityCollection, EntityStatus, EntityValues, FormContext, ResolvedEntityCollection } from "../types";
-/**
- * @group Components
- */
-export interface EntityFormProps<M extends Record<string, any>> {
-    /**
-     * New or existing status
-     */
-    status: EntityStatus;
-    /**
-     * Path of the collection this entity is located
-     */
-    path: string;
-    /**
-     * The collection is used to build the fields of the form
-     */
-    collection: EntityCollection<M>;
-    /**
-     * The updated entity is passed from the parent component when the underlying data
-     * has changed in the datasource
-     */
-    entity?: Entity<M>;
-    /**
-     * The callback function called when Save is clicked and validation is correct
-     */
-    onEntitySaveRequested: (props: EntityFormSaveParams<M>) => Promise<void>;
-    /**
-     * The callback function called when discard is clicked
-     */
-    onDiscard?: () => void;
-    /**
-     * The callback function when the form is dirty, so the values are different
-     * from the original ones
-     */
-    onModified?: (dirty: boolean) => void;
-    /**
-     * The callback function when the form original values have been modified
-     */
-    onValuesChanged?: (values?: EntityValues<M>) => void;
-    /**
-     *
-     * @param id
-     */
-    onIdChange?: (id: string) => void;
-    currentEntityId?: string;
-    onFormContextChange?: (formContext: FormContext<M>) => void;
-    hideId?: boolean;
-    autoSave?: boolean;
-    onIdUpdateError?: (error: any) => void;
-}
-export type EntityFormSaveParams<M extends Record<string, any>> = {
-    collection: ResolvedEntityCollection<M>;
-    path: string;
-    entityId: string | undefined;
-    values: EntityValues<M>;
-    previousValues?: EntityValues<M>;
-    closeAfterSave: boolean;
-    autoSave: boolean;
-};
-/**
- * This is the form used internally by the CMS
- * @param status
- * @param path
- * @param collection
- * @param entity
- * @param onEntitySave
- * @param onDiscard
- * @param onModified
- * @param onValuesChanged
- * @constructor
- * @group Components
- */
-export declare const EntityForm: typeof EntityFormInternal;
-declare function EntityFormInternal<M extends Record<string, any>>({ status, path, collection: inputCollection, entity, onEntitySaveRequested, onDiscard, onModified, onValuesChanged, onIdChange, onFormContextChange, hideId, autoSave, onIdUpdateError }: EntityFormProps<M>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/form/components/SubmitListener.d.ts

@@ -1 +0,0 @@
-export declare function SubmitListener(): null;

package/dist/form/components/SwitchControl.d.ts

@@ -1,8 +0,0 @@
-import { FieldProps } from "formik";
-export declare function SwitchControl({ field, form, label, tooltip, disabled, size, allowIndeterminate }: FieldProps & {
-    label: string;
-    tooltip?: string;
-    disabled?: boolean;
-    size: "small" | "medium";
-    allowIndeterminate?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/form/field_bindings/MarkdownFieldBinding.d.ts

@@ -1,9 +0,0 @@
-import { FieldProps } from "../../types";
-/**
- * Render a markdown field that allows edition and seeing the preview.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export declare function MarkdownFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, tableMode, includeDescription, context }: FieldProps<string>): import("react/jsx-runtime").JSX.Element;

package/dist/internal/EntityView.d.ts

@@ -1,22 +0,0 @@
-import { Entity, EntityCollection, User } from "../types";
-export interface EntityViewProps<M extends Record<string, any>> {
-    path: string;
-    collection: EntityCollection<M>;
-    entityId?: string;
-    copy?: boolean;
-    selectedSubPath?: string;
-    parentCollectionIds: string[];
-    formWidth?: number | string;
-    onValuesAreModified: (modified: boolean) => void;
-    onUpdate?: (params: {
-        entity: Entity<any>;
-    }) => void;
-    onClose?: () => void;
-}
-/**
- * This is the default view that is used as the content of a side panel when
- * an entity is opened.
- * You probably don't want to use this view directly since it is bound to the
- * side panel. Instead, you might want to use {@link EntityForm} or {@link EntityCollectionView}
- */
-export declare function EntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, parentCollectionIds, onValuesAreModified, formWidth, onUpdate, onClose }: EntityViewProps<M>): import("react/jsx-runtime").JSX.Element;

package/dist/internal/useBuildCustomizationController.d.ts

@@ -1,2 +0,0 @@
-import { CustomizationController } from "../types/customization_controller";
-export declare function useBuildCustomizationController(controller: CustomizationController): CustomizationController;

package/dist/internal/useBuildNavigationController.d.ts

@@ -1,14 +0,0 @@
-import { AuthController, CMSView, CMSViewsBuilder, DataSourceDelegate, EntityCollection, EntityCollectionsBuilder, FireCMSPlugin, NavigationController, User, UserConfigurationPersistence } from "../types";
-type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
-    basePath?: string;
-    baseCollectionPath?: string;
-    authController: AuthController<UserType>;
-    collections?: EC[] | EntityCollectionsBuilder<EC>;
-    views?: CMSView[] | CMSViewsBuilder;
-    userConfigPersistence?: UserConfigurationPersistence;
-    plugins?: FireCMSPlugin[];
-    dataSource: DataSourceDelegate;
-};
-export declare function useBuildNavigationController<EC extends EntityCollection, UserType extends User>({ basePath, baseCollectionPath, authController, collections: baseCollections, views: baseViews, userConfigPersistence, plugins, dataSource }: BuildNavigationContextProps<EC, UserType>): NavigationController;
-export declare function getSidePanelKey(path: string, entityId?: string): string;
-export {};

package/dist/internal/useLocaleConfig.d.ts

@@ -1 +0,0 @@
-export declare function useLocaleConfig(locale?: string): void;

package/dist/types/appcheck.d.ts

@@ -1,26 +0,0 @@
-import { FirebaseApp } from "firebase/app";
-/**
- * @group Firebase
- */
-export interface AppCheck {
-    firebaseApp?: FirebaseApp;
-}
-/**
- * @group Firebase
- */
-export interface AppCheckOptions {
-    providerKey: string;
-    useEnterpriseRecaptcha: boolean;
-    isTokenAutoRefreshEnabled?: boolean;
-    debugToken?: string;
-    forceRefresh?: boolean;
-}
-/**
- * @group Firebase
- */
-export declare interface AppCheckTokenResult {
-    /**
-     * The token string in JWT format.
-     */
-    readonly token: string;
-}

package/dist/util/useDebounce.d.ts

@@ -1 +0,0 @@
-export declare function useDebounce<T>(value: T, callback: () => void, immediate: boolean, timeoutMs?: number): void;

package/src/components/FieldConfigBadge.tsx

@@ -1,17 +0,0 @@
-import { getIconForWidget } from "../util";
-import { PropertyConfig } from "../types";
-import { getDefaultFieldConfig } from "../core";
-
-export function FieldConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
-
-    const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
-
-    return <div
-        className={classes}
-        style={{
-            background: propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888"
-        }}>
-        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium")}
-    </div>
-}

package/src/components/FireCMSAppBar.tsx

@@ -1,157 +0,0 @@
-import React from "react";
-
-import { Link as ReactLink } from "react-router-dom";
-import { ErrorBoundary } from "../components";
-import {
-    Avatar,
-    cn,
-    DarkModeIcon,
-    IconButton,
-    LightModeIcon,
-    LogoutIcon,
-    Menu,
-    MenuItem,
-    Skeleton,
-    Typography
-} from "@firecms/ui";
-import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
-import { User } from "../types";
-
-export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
-    title: string;
-    /**
-     * A component that gets rendered on the upper side of the main toolbar
-     */
-    endAdornment?: React.ReactNode;
-
-    startAdornment?: React.ReactNode;
-
-    dropDownActions?: React.ReactNode;
-
-    includeDrawer?: boolean;
-
-    drawerOpen: boolean;
-
-    className?: string;
-
-    style?: React.CSSProperties;
-
-    user?: User;
-} & ADDITIONAL_PROPS;
-
-/**
- * This component renders the main app bar of FireCMS.
- * You will likely not need to use this component directly.
- *
- * @param title
- * @param toolbarExtraWidget
- * @param drawerOpen
- * @constructor
- */
-export const FireCMSAppBar = function FireCMSAppBar({
-                                                        title,
-                                                        endAdornment,
-                                                        startAdornment,
-                                                        drawerOpen,
-                                                        dropDownActions,
-                                                        includeDrawer,
-                                                        className,
-                                                        style,
-                                                        user: userProp
-                                                    }: FireCMSAppBarProps) {
-    const navigation = useNavigationController();
-
-    const authController = useAuthController();
-    const {
-        mode,
-        toggleMode
-    } = useModeController();
-
-    const largeLayout = useLargeLayout();
-
-    const user = userProp ?? authController.user;
-
-    let avatarComponent: JSX.Element;
-    if (user && user.photoURL) {
-        avatarComponent = <Avatar
-            src={user.photoURL}/>;
-    } else if (user === undefined || authController.initialLoading) {
-        avatarComponent = <div className={"p-1 flex justify-center"}>
-            <Skeleton className={"w-10 h-10 rounded-full"}/>
-        </div>;
-    } else {
-        const initial = user?.displayName
-            ? user.displayName[0].toUpperCase()
-            : (user?.email ? user.email[0].toUpperCase() : "A");
-        avatarComponent = <Avatar>{initial}</Avatar>;
-    }
-
-    return (
-        <div
-            style={style}
-            className={cn("pr-2",
-                {
-                    "ml-[17rem]": drawerOpen && largeLayout,
-                    "ml-16": includeDrawer && !(drawerOpen && largeLayout) && !startAdornment,
-                    "h-16": true,
-                    "z-10": largeLayout,
-                    "transition-all": true,
-                    "ease-in": true,
-                    "duration-75": true,
-                    "w-full": !includeDrawer,
-                    "w-[calc(100%-64px)]": includeDrawer && !(drawerOpen && largeLayout),
-                    "w-[calc(100%-17rem)]": includeDrawer && (drawerOpen && largeLayout),
-                    "duration-150": drawerOpen && largeLayout,
-                    fixed: true,
-                },
-                className)}>
-
-            <div className="flex flex-row gap-2 px-4 h-full items-center">
-
-                {startAdornment}
-
-                {navigation && <div className="mr-8 hidden lg:block">
-                    <ReactLink
-                        className="visited:text-inherit visited:dark:text-inherit"
-                        to={navigation?.basePath ?? "/"}
-                    >
-                        <Typography variant="subtitle1"
-                                    noWrap
-                                    className={"ml-2 !font-medium"}>
-                            {title}
-                        </Typography>
-                    </ReactLink>
-                </div>}
-
-                <div className={"flex-grow"}/>
-
-                {endAdornment &&
-                    <ErrorBoundary>
-                        {endAdornment}
-                    </ErrorBoundary>}
-
-                <IconButton
-                    color="inherit"
-                    aria-label="Open drawer"
-                    onClick={toggleMode}
-                    size="large">
-                    {mode === "dark"
-                        ? <DarkModeIcon/>
-                        : <LightModeIcon/>}
-                </IconButton>
-
-                <Menu trigger={avatarComponent}>
-
-                    {dropDownActions}
-
-                    {!dropDownActions && <MenuItem onClick={authController.signOut}>
-                        <LogoutIcon/>
-                        Log Out
-                    </MenuItem>}
-
-                </Menu>
-
-            </div>
-        </div>
-    );
-}

package/src/components/HomePage/NavigationCollectionCard.tsx

@@ -1,146 +0,0 @@
-import { useNavigate } from "react-router-dom";
-
-import { useCustomizationController, useFireCMSContext } from "../../hooks";
-import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
-import { IconForView } from "../../util";
-import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { ArrowForwardIcon, Card, cn, IconButton, Markdown, StarBorderIcon, StarIcon, Typography } from "@firecms/ui";
-
-/**
- * This is the component used in the home page to render a card for each
- * collection.
- * @group Components
- * @param view
- * @param path
- * @param collection
- * @param url
- * @param name
- * @param description
- * @param onClick
- * @constructor
- */
-export function NavigationCollectionCard({
-                                             view,
-                                             path,
-                                             collection,
-                                             url,
-                                             name,
-                                             description,
-                                             onClick
-                                         }: TopNavigationEntry & {
-    onClick?: () => void
-}) {
-
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
-
-    const navigate = useNavigate();
-    const context = useFireCMSContext();
-    const customizationController = useCustomizationController();
-
-    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
-
-    let actions: React.ReactNode | undefined;
-    if (customizationController.plugins && collection) {
-        const actionProps: PluginHomePageActionsProps = {
-            path,
-            collection,
-            context
-        };
-        actions = <>
-            {customizationController.plugins.map((plugin, i) => (
-                plugin.homePage?.CollectionActions
-                    ? <plugin.homePage.CollectionActions
-                        key={`actions_${i}`}
-                        {...actionProps}
-                        extraProps={plugin.homePage.extraProps}
-                    />
-                    : null
-            ))}
-        </>
-        ;
-    }
-
-    return (
-        <Card
-            className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
-            onClick={() => {
-                onClick?.();
-                navigate(url);
-                if (userConfigurationPersistence) {
-                    userConfigurationPersistence.setRecentlyVisitedPaths(
-                        [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
-                    );
-                }
-            }}>
-
-            <div className="flex flex-col items-start h-full">
-                <div
-                    className="flex-grow w-full">
-
-                    <div
-                        className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
-
-                        {collectionIcon}
-
-                        <div
-                            className="flex items-center gap-1"
-                            onClick={(event: React.MouseEvent) => {
-                                event.preventDefault();
-                                event.stopPropagation();
-                            }}>
-
-                            {actions}
-
-                            {userConfigurationPersistence &&
-                                <IconButton
-                                    onClick={(e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        if (favourite) {
-                                            userConfigurationPersistence.setFavouritePaths(
-                                                userConfigurationPersistence.favouritePaths.filter(p => p !== path)
-                                            );
-                                        } else {
-                                            userConfigurationPersistence.setFavouritePaths(
-                                                [...userConfigurationPersistence.favouritePaths, path]
-                                            );
-                                        }
-                                    }}>
-                                    {
-                                        favourite
-                                            ? <StarIcon
-                                                size={18}
-                                                className={"text-secondary"}/>
-                                            : <StarBorderIcon
-                                                size={18}
-                                                className={"text-gray-400 dark:text-gray-500"}/>}
-                                </IconButton>}
-
-                        </div>
-
-                    </div>
-
-                    <Typography gutterBottom variant="h5"
-                                component="h2">
-                        {name}
-                    </Typography>
-
-                    {description && <Typography variant="body2"
-                                                color="secondary"
-                                                component="div">
-                        <Markdown source={description}/>
-                    </Typography>}
-                </div>
-
-                <div style={{ alignSelf: "flex-end" }}>
-
-                    <div className={"p-4"}>
-                        <ArrowForwardIcon className="text-primary"/>
-                    </div>
-                </div>
-
-            </div>
-
-        </Card>);
-}

package/src/components/LabelWithIcon.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-
-interface LabelWithIconProps {
-    icon: React.ReactNode;
-    title?: string;
-    small?: boolean;
-    className?: string;
-    required?: boolean;
-}
-
-/**
- * Render the label of with an icon and the title of a property
- * @group Form custom fields
- */
-export function LabelWithIcon({
-                                  icon,
-                                  title,
-                                  small,
-                                  className,
-                                  required
-                              }: LabelWithIconProps) {
-    return (
-        <span
-            className={`inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}>
-
-            {icon}
-
-            <span
-                className={`font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
-
-        </span>
-    );
-}