@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.81

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+
+import { canCreateEntity, canDeleteEntity, fullPathToCollectionSegments } from "../../util";
+import { useAuthController, useFireCMSContext, useLargeLayout } from "../../hooks";
+import { CollectionActionsProps, EntityCollection, SelectionController, EntityTableController } from "../../types";
+import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
+import { toArray } from "../../util/arrays";
+import { ErrorBoundary } from "../ErrorBoundary";
+
+export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
+    collection: EntityCollection<M>;
+    path: string;
+    relativePath: string;
+    parentCollectionIds: string[];
+    selectionEnabled: boolean;
+    onNewClick: () => void;
+    onMultipleDeleteClick: () => void;
+    selectionController: SelectionController<M>;
+    tableController: EntityTableController<M>;
+    collectionEntitiesCount: number;
+}
+
+export function EntityCollectionViewActions<M extends Record<string, any>>({
+                                                                               collection,
+                                                                               relativePath,
+                                                                               parentCollectionIds,
+                                                                               onNewClick,
+                                                                               onMultipleDeleteClick,
+                                                                               selectionEnabled,
+                                                                               path,
+                                                                               selectionController,
+                                                                               tableController,
+                                                                               collectionEntitiesCount
+                                                                           }: EntityCollectionViewActionsProps<M>) {
+
+    const context = useFireCMSContext();
+    const plugins = context.plugins ?? [];
+
+    const authController = useAuthController();
+
+    const largeLayout = useLargeLayout();
+
+    const selectedEntities = selectionController.selectedEntities;
+
+    const addButton = canCreateEntity(collection, authController, fullPathToCollectionSegments(path), null) &&
+        onNewClick && (largeLayout
+            ? <Button
+                id={`add_entity_${path}`}
+                onClick={onNewClick}
+                startIcon={<AddIcon/>}
+                variant="filled"
+                color="primary">
+                Add {collection.singularName ?? collection.name}
+            </Button>
+            : <Button
+                id={`add_entity_${path}`}
+                onClick={onNewClick}
+                size="medium"
+                variant="filled"
+                color="primary"
+            >
+                <AddIcon/>
+            </Button>);
+
+    const multipleDeleteEnabled = canDeleteEntity(collection, authController, fullPathToCollectionSegments(path), null);
+
+    let multipleDeleteButton: React.ReactNode | undefined;
+    if (selectionEnabled) {
+        const button = largeLayout
+            ? <Button
+                variant={"text"}
+                disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
+                startIcon={<DeleteIcon/>}
+                onClick={onMultipleDeleteClick}
+                color={"primary"}
+                className="lg:w-20"
+            >
+                ({selectedEntities?.length})
+            </Button>
+            : <IconButton
+                color={"primary"}
+                disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
+                onClick={onMultipleDeleteClick}>
+                <DeleteIcon/>
+            </IconButton>;
+        multipleDeleteButton =
+            <Tooltip
+                title={multipleDeleteEnabled ? "Delete" : "You have selected at least one entity you cannot delete"}>
+                {button}
+            </Tooltip>
+    }
+
+    const actionProps: CollectionActionsProps = {
+        path,
+        relativePath,
+        parentCollectionIds,
+        collection,
+        selectionController,
+        context,
+        tableController,
+        collectionEntitiesCount
+    };
+
+    const actions = toArray(collection.Actions)
+        .map((Action, i) => (
+            <ErrorBoundary key={`actions_${i}`}>
+                <Action {...actionProps} />
+            </ErrorBoundary>
+        ));
+
+    if (plugins) {
+        plugins.forEach((plugin, i) => {
+            if (plugin.collections?.CollectionActions) {
+                actions.push(...toArray(plugin.collections?.CollectionActions)
+                    .map((Action, j) => (
+                        <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
+                            <Action {...actionProps} {...plugin.collections?.collectionActionsProps}/>
+                        </ErrorBoundary>
+                    )));
+            }
+        });
+    }
+
+    return (
+        <>
+            {actions}
+            {multipleDeleteButton}
+            {addButton}
+        </>
+    );
+}

package/src/components/EntityCollectionView/useColumnsIds.tsx

@@ -0,0 +1,100 @@
+import { useMemo } from "react";
+import { EntityCollection, ResolvedEntityCollection, ResolvedProperty } from "../../types";
+import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
+import { PropertyColumnConfig } from "../EntityCollectionTable/EntityCollectionTableProps";
+
+const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
+
+export function useColumnIds<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
+    return useMemo(() => {
+        if (collection.propertiesOrder)
+            return hideAndExpandKeys(collection, collection.propertiesOrder);
+        return getDefaultColumnKeys(collection, includeSubcollections);
+    }, [collection, includeSubcollections]);
+}
+
+function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, keys: string[]): PropertyColumnConfig[] {
+
+    return keys.flatMap((key) => {
+        const property = collection.properties[key];
+        if (property) {
+            if (property.hideFromCollection)
+                return [null];
+            if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden)
+                return [null];
+            if (property.dataType === "map" && property.spreadChildren && property.properties) {
+                return getColumnKeysForProperty(property, key);
+            }
+            return [{
+                key,
+                disabled: Boolean(property.disabled) || Boolean(property.readOnly)
+            }];
+        }
+
+        const additionalField = collection.additionalFields?.find(field => field.key === key);
+        if (additionalField) {
+            return [{
+                key,
+                disabled: true
+            }];
+        }
+
+        if (collection.subcollections) {
+            const subCollection = collection.subcollections.find(subCol => getSubcollectionColumnId(subCol) === key);
+            if (subCollection) {
+                return [{
+                    key,
+                    disabled: true
+                }];
+            }
+        }
+
+        if (collection.collectionGroup && key === COLLECTION_GROUP_PARENT_ID) {
+            return [{
+                key,
+                disabled: true
+            }];
+        }
+
+        return [null];
+    }).filter(Boolean) as PropertyColumnConfig[];
+}
+
+function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: ResolvedEntityCollection<M>, includeSubCollections: boolean) {
+    const propertyKeys = Object.keys(collection.properties);
+
+    const additionalFields = collection.additionalFields ?? [];
+    const subCollections: EntityCollection[] = collection.subcollections ?? [];
+
+    const columnIds: string[] = [
+        ...propertyKeys,
+        ...additionalFields.map((field) => field.key)
+    ];
+
+    if (includeSubCollections) {
+        const subCollectionIds = subCollections
+            .map((collection) => getSubcollectionColumnId(collection));
+        columnIds.push(...subCollectionIds.filter((subColId) => !columnIds.includes(subColId)));
+    }
+
+    if (collection.collectionGroup) {
+        columnIds.push(COLLECTION_GROUP_PARENT_ID);
+    }
+
+    return hideAndExpandKeys(collection, columnIds);
+}
+
+export function getColumnKeysForProperty(property: ResolvedProperty, key: string, disabled?: boolean): PropertyColumnConfig[] {
+    if (property.dataType === "map" && property.spreadChildren && property.properties) {
+        return Object.entries(property.properties)
+            .flatMap(([childKey, childProperty]) => getColumnKeysForProperty(
+                childProperty,
+                `${key}.${childKey}`,
+                disabled || Boolean(property.disabled) || Boolean(property.readOnly))
+            );
+    }
+    return [{
+        key,
+        disabled: disabled || Boolean(property.disabled) || Boolean(property.readOnly)
+    }];
+}

package/src/components/EntityPreview.tsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from "react";
+import { PropertyPreview } from "../preview";
+import { Entity, EntityCollection, FireCMSContext, ResolvedEntityCollection, ResolvedProperties } from "../types";
+import { resolveCollection } from "../util";
+import { useFireCMSContext } from "../hooks";
+import { cn, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+
+/**
+ * @group Components
+ */
+export interface EntityPreviewProps<M extends Record<string, any>> {
+    entity: Entity<M>;
+    collection: EntityCollection<M>;
+    path: string;
+    className?: string;
+}
+
+export function EntityPreview<M extends Record<string, any>>(
+    {
+        entity,
+        collection,
+        path,
+        className
+    }: EntityPreviewProps<M>) {
+
+    const context = useFireCMSContext();
+    const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
+        collection,
+        path,
+        entityId: entity.id,
+        values: entity.values,
+        fields: context.propertyConfigs
+    }), [collection, path, entity]);
+
+    const appConfig: FireCMSContext | undefined = useFireCMSContext();
+
+    const properties: ResolvedProperties = resolvedCollection.properties;
+
+    return (
+        <div className={"w-full " + className}>
+            <div className={"w-full mb-4"}>
+                <div className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                    <div className="flex items-center w-1/4">
+                        <span className="pl-2 text-sm text-gray-600">Id</span>
+                    </div>
+                    <div className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                        <span className="flex-grow mr-2">{entity.id}</span>
+                        {appConfig?.entityLinkBuilder &&
+                            <a href={appConfig.entityLinkBuilder({ entity })}
+                               rel="noopener noreferrer"
+                               target="_blank">
+                                <IconButton>
+                                    <OpenInNewIcon
+                                        size={"small"}/>
+                                </IconButton>
+                            </a>}
+                    </div>
+                </div>
+                {Object.entries(properties)
+                    .map(([key, property]) => {
+                        const value = (entity.values)[key];
+                        return (
+                            <div
+                                key={`reference_previews_${key}`}
+                                className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                                <div className="flex items-center w-1/4">
+                                    <span className="pl-2 text-sm text-gray-600">{property.name}</span>
+                                </div>
+                                <div className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                                    <PropertyPreview
+                                        propertyKey={key}
+                                        value={value}
+                                        // entity={entity}
+                                        property={property}
+                                        size={"medium"}/>
+                                </div>
+                            </div>
+                        )
+                    })}
+            </div>
+        </div>
+    );
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,40 @@
+import React, { ErrorInfo, PropsWithChildren } from "react";
+
+import { ErrorIcon, Typography } from "@firecms/ui";
+
+export class ErrorBoundary extends React.Component<PropsWithChildren<Record<string, unknown>>, {
+    error: Error | null
+}> {
+    constructor(props: any) {
+        super(props);
+        this.state = { error: null };
+    }
+
+    // eslint-disable-next-line n/handle-callback-err
+    static getDerivedStateFromError(error: Error) {
+        return { error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error(error);
+        // logErrorToMyService(error, errorInfo);
+    }
+
+    render() {
+        if (this.state.error) {
+            return (
+                <div className="flex flex-col m-2">
+                    <div className="flex items-center m-2">
+                        <ErrorIcon color={"error"} size={"small"}/>
+                        <div className="ml-4">Error</div>
+                    </div>
+                    <Typography variant={"caption"}>
+                        {this.state.error?.message ?? "See the error in the console"}
+                    </Typography>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}

package/src/components/ErrorTooltip.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Tooltip, TooltipProps } from "@firecms/ui";
+
+export function ErrorTooltip(props: TooltipProps) {
+    return (
+        <Tooltip {...props}
+                 tooltipClassName={"!text-red-500 bg-red-50"}>
+            {props.children}
+        </Tooltip>
+    );
+}

package/src/components/ErrorView.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ErrorTooltip } from "./ErrorTooltip";
+import { ErrorIcon, Typography } from "@firecms/ui";
+
+/**
+ * @group Components
+ */
+export interface ErrorViewProps {
+    title?: string;
+    error: Error | React.ReactElement | string,
+    tooltip?: string
+}
+
+/**
+ * Generic error view. Displayed for example when an unexpected value comes
+ * from the datasource in a collection view.
+ * @param title
+ * @param error
+ * @param tooltip
+ * @constructor
+ * @group Components
+ */
+export function ErrorView({
+                              title,
+                              error,
+                              tooltip
+                          }: ErrorViewProps): React.ReactElement {
+    const component = error instanceof Error ? error.message : error;
+    console.error("ErrorView", error)
+
+    const body = (
+        <div
+            className="flex items-center m-2">
+            <ErrorIcon size={"small"} color={"error"}/>
+            <div className="pl-2">
+                {title && <Typography
+                    variant={"body2"}
+                    className="font-medium">{title}</Typography>}
+                <Typography variant={"body2"}>{component}</Typography>
+            </div>
+        </div>
+    );
+
+    if (tooltip) {
+        return (
+            <ErrorTooltip title={tooltip}>
+                {body}
+            </ErrorTooltip>
+        );
+    }
+    return body;
+}

package/src/components/FieldConfigBadge.tsx

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,157 @@
+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/FireCMSLogo.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+export function FireCMSLogo({
+                                width,
+                                height,
+                                className,
+                                style
+                            }: {
+    width?: string,
+    height?: string,
+    className?: string,
+    style?: React.CSSProperties
+}) {
+    return (
+        <svg
+            width={width ?? "100%"} height={height ?? "100%"}
+            viewBox="0 0 599 599" version="1.1"
+            style={style}
+            className={className}
+            xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <radialGradient cx="28.6213569%" cy="43.1133328%"
+                                fx="28.6213569%"
+                                fy="43.1133328%" r="71.5003456%"
+                                gradientTransform="translate(0.286214,0.431133),rotate(3.343450),scale(1.000000,0.996175),translate(-0.286214,-0.431133)"
+                                id="radialGradient-1">
+                    <stop stopColor="#FF5B79" offset="0%"/>
+                    <stop stopColor="#FA5574" offset="28.0930803%"/>
+                    <stop stopColor="#EC4C51" offset="44.7242531%"/>
+                    <stop stopColor="#9543C1" offset="71.4578165%"/>
+                    <stop stopColor="#3857B3" offset="100%"/>
+                </radialGradient>
+                <radialGradient cx="53.6205516%" cy="47.2473036%"
+                                fx="53.6205516%"
+                                fy="47.2473036%" r="50.8229649%"
+                                gradientTransform="translate(0.536206,0.472473),rotate(90.000000),scale(1.000000,1.206631),translate(-0.536206,-0.472473)"
+                                id="radialGradient-2">
+                    <stop stopColor="#68294F" stopOpacity="0" offset="0%"/>
+                    <stop stopColor="#5E2548" stopOpacity="0.04641108"
+                          offset="75.3503173%"/>
+                    <stop stopColor="#0D060B" stopOpacity="0.437431709"
+                          offset="100%"/>
+                </radialGradient>
+                <radialGradient cx="53.8605015%" cy="48.1990423%"
+                                fx="53.8605015%"
+                                fy="48.1990423%" r="59.9151549%"
+                                gradientTransform="translate(0.538605,0.481990),rotate(180.000000),scale(1.000000,0.925027),translate(-0.538605,-0.481990)"
+                                id="radialGradient-3">
+                    <stop stopColor="#68294F" stopOpacity="0" offset="0%"/>
+                    <stop stopColor="#5E2548" stopOpacity="0.04641108"
+                          offset="84.0867343%"/>
+                    <stop stopColor="#FF0000" stopOpacity="0.567324765"
+                          offset="100%"/>
+                </radialGradient>
+            </defs>
+            <g id="Page-1" stroke="none" strokeWidth="1" fill="none"
+               fillRule="evenodd">
+                <g id="firecms_logo">
+                    <circle fill="url(#radialGradient-1)" cx="299.5"
+                            cy="299.5"
+                            r="299.5"/>
+                    <circle fill="url(#radialGradient-2)" cx="299.5"
+                            cy="299.5"
+                            r="299.5"/>
+                    <circle fill="url(#radialGradient-3)" cx="299.5"
+                            cy="299.5"
+                            r="299.5"/>
+                </g>
+            </g>
+        </svg>
+    );
+
+}