@firecms/core 3.0.0-canary.20 → 3.0.0-canary.200

package/dist/core/Scaffold.d.ts

@@ -1,55 +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;
-    /**
-     * Whether to include the drawer in the scaffold
-     */
-    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.
-     */
-    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
-    /**
-     * Additional props passed to the custom AppBar
-     */
-    fireCMSAppBarProps?: 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/core/SideEntityView.d.ts

@@ -1,7 +0,0 @@
-import { User } from "../types";
-import { EntityEditViewProps } from "./EntityEditView";
-export type SideEntityViewProps<M extends Record<string, any>> = EntityEditViewProps<M> & {
-    formWidth?: number | string;
-    onClose?: () => void;
-};
-export declare function SideEntityView<M extends Record<string, any>, UserType extends User>({ path, entityId, selectedSubPath, copy, collection, parentCollectionIds, onValuesAreModified, formWidth, onUpdate, onClose }: SideEntityViewProps<M>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +0,0 @@
-import React from "react";
-interface ArrayContainerProps<T> {
-    value: T[];
-    name: string;
-    addLabel: string;
-    buildEntry: (index: number, internalId: number) => React.ReactNode;
-    disabled?: boolean;
-    small?: boolean;
-    onInternalIdAdded?: (id: number) => void;
-    includeAddButton?: boolean;
-    newDefaultEntry?: T | null;
-    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
-}
-/**
- * @group Form custom fields
- */
-export declare function FormikArrayContainer<T>({ name, addLabel, value, disabled, buildEntry, small, onInternalIdAdded, includeAddButton, newDefaultEntry, setFieldValue }: ArrayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

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/useBuildCustomizationController.d.ts

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

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/src/components/FireCMSAppBar.tsx

@@ -1,165 +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}>
-                    {user && <div className={"px-4 py-2 mb-2"}>
-                        {user.displayName && <Typography variant={"body1"} color={"secondary"}>
-                            {user.displayName}
-                        </Typography>}
-                        {user.email && <Typography variant={"body2"} color={"secondary"}>
-                            {user.email}
-                        </Typography>}
-                    </div>}
-
-                    {dropDownActions}
-
-                    {!dropDownActions && <MenuItem onClick={authController.signOut}>
-                        <LogoutIcon/>
-                        Log Out
-                    </MenuItem>}
-
-                </Menu>
-
-            </div>
-        </div>
-    );
-}

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -1,28 +0,0 @@
-import { ContentPasteIcon, IconButton, Typography } from "@firecms/ui";
-import { useCallback, useState } from "react";
-
-export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: string }) {
-
-    const [copied, setCopied] = useState(false);
-
-    return (
-        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
-            <div>
-                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
-                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
-                <Typography variant={"caption"} className={"text-white"}><code>{propertyId}</code></Typography>
-            </div>
-            {/*    Copy to clipboard button*/}
-            <IconButton size={"small"}>
-                <ContentPasteIcon size={"smallest"}
-                                  className={"text-white"}
-                                  onClick={useCallback(() => {
-                                      navigator.clipboard.writeText(propertyId);
-                                      setCopied(true);
-                                      setTimeout(() => setCopied(false), 2000);
-                                  }, [propertyId])}
-                />
-            </IconButton>
-        </div>
-    );
-}

package/src/components/common/useDataSourceEntityCollectionTableController.tsx

@@ -1,225 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-
-import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
-import { useDataOrder } from "../../hooks/data/useDataOrder";
-import {
-    Entity,
-    EntityCollection,
-    EntityTableController,
-    FilterValues,
-    FireCMSContext,
-    SelectedCellProps,
-    User
-} from "../../types";
-import { useDebouncedData } from "./useDebouncedData";
-
-const DEFAULT_PAGE_SIZE = 50;
-
-export type DataSourceEntityCollectionTableControllerProps<M extends Record<string, any> = any> = {
-    /**
-     * Full path where the data of this table is located
-     */
-    fullPath: string;
-    /**
-     * The collection that is represented by this config.
-     */
-    collection: EntityCollection<M>;
-    /**
-     * List of entities that will be displayed on top, no matter the ordering.
-     * This is used for reference fields selection
-     */
-    entitiesDisplayedFirst?: Entity<M>[];
-
-    lastDeleteTimestamp?: number;
-    forceFilter?: FilterValues<string>;
-}
-
-/**
- * Use this hook to build a controller for the {@link EntityCollectionTable}.
- * This controller is bound to data in a path in your specified datasource.
- *
- * Note that you can build your own hook returning a {@link EntityTableController}
- * if you would like to display different data.
- *
- * @param fullPath
- * @param collection
- * @param entitiesDisplayedFirst
- * @param lastDeleteTimestamp
- * @param forceFilterFromProps
- */
-export function useDataSourceEntityCollectionTableController<M extends Record<string, any> = any, UserType extends User = User>(
-    {
-        fullPath,
-        collection,
-        entitiesDisplayedFirst,
-        lastDeleteTimestamp,
-        forceFilter: forceFilterFromProps,
-    }: DataSourceEntityCollectionTableControllerProps<M>)
-    : EntityTableController<M> {
-
-    const {
-        initialFilter,
-        initialSort,
-        forceFilter: forceFilterFromCollection
-    } = collection;
-
-    const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
-    const navigation = useNavigationController();
-    const dataSource = useDataSource(collection);
-    const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
-
-    const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
-    const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
-    const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
-
-    const [searchString, setSearchString] = React.useState<string | undefined>();
-    const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? pageSize : undefined);
-
-    const initialSortInternal = useMemo(() => {
-        if (initialSort && forceFilter && !checkFilterCombination(forceFilter, initialSort)) {
-            console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
-            return undefined;
-        }
-        return initialSort;
-    }, [initialSort, forceFilter]);
-
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
-    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
-
-    const sortByProperty = sortBy ? sortBy[0] : undefined;
-    const currentSort = sortBy ? sortBy[1] : undefined;
-
-    const context: FireCMSContext<UserType> = useFireCMSContext();
-
-    const [rawData, setRawData] = useState<Entity<M>[]>([]);
-
-    const [dataLoading, setDataLoading] = useState<boolean>(false);
-    const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
-    const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
-
-    const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
-                                                sortBy?: [string, "asc" | "desc"]) => {
-        if (!dataSource.isFilterCombinationValid)
-            return true;
-        return dataSource.isFilterCombinationValid({
-            path: resolvedPath,
-            collection,
-            filterValues,
-            sortBy
-        })
-    }, []);
-
-    const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
-
-    const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {
-        if (forceFilter) {
-            console.warn("Filter is not compatible with the force filter. Ignoring filter");
-            return;
-        }
-        if (updatedFilter && Object.keys(updatedFilter).length === 0) {
-            setFilterValues(undefined);
-        } else {
-            setFilterValues(updatedFilter);
-        }
-    }, [forceFilter]);
-
-    useEffect(() => {
-
-        setDataLoading(true);
-
-        const onEntitiesUpdate = async (entities: Entity<M>[]) => {
-            if (collection.callbacks?.onFetch) {
-                try {
-                    entities = await Promise.all(
-                        entities.map((entity) =>
-                            collection.callbacks!.onFetch!({
-                                collection,
-                                path: resolvedPath,
-                                entity,
-                                context
-                            })));
-                } catch (e: any) {
-                    console.error(e);
-                }
-            }
-            setDataLoading(false);
-            setDataLoadingError(undefined);
-            setRawData(entities.map(e => ({
-                ...e,
-                // values: sanitizeData(e.values, resolvedCollection.properties)
-            })));
-            setNoMoreToLoad(!itemCount || entities.length < itemCount);
-        };
-
-        const onError = (error: Error) => {
-            console.error("ERROR", error);
-            setDataLoading(false);
-            setRawData([]);
-            setDataLoadingError(error);
-        };
-
-        if (dataSource.listenCollection) {
-            return dataSource.listenCollection<M>({
-                path: resolvedPath,
-                collection,
-                onUpdate: onEntitiesUpdate,
-                onError,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            });
-        } else {
-            dataSource.fetchCollection<M>({
-                path: resolvedPath,
-                collection,
-                searchString,
-                filter: filterValues,
-                limit: itemCount,
-                startAfter: undefined,
-                orderBy: sortByProperty,
-                order: currentSort
-            })
-                .then(onEntitiesUpdate)
-                .catch(onError);
-            return () => {
-            };
-        }
-    }, [resolvedPath, itemCount, currentSort, sortByProperty, filterValues, searchString]);
-
-    const orderedData = useDataOrder({
-        data: rawData,
-        entitiesDisplayedFirst
-    });
-
-    // hack to fix Firestore listeners firing with incomplete data
-    const data = useDebouncedData(orderedData, {
-        filterValues,
-        sortBy,
-        searchString,
-        lastDeleteTimestamp
-    });
-
-    return {
-        data,
-        dataLoading,
-        noMoreToLoad,
-        dataLoadingError,
-        filterValues,
-        setFilterValues: updateFilterValues,
-        sortBy,
-        setSortBy,
-        searchString,
-        setSearchString,
-        clearFilter,
-        itemCount,
-        setItemCount,
-        paginationEnabled,
-        pageSize,
-        checkFilterCombination,
-        popupCell,
-        setPopupCell
-    }
-}