@firecms/collection_editor 3.0.0-alpha.17 → 3.0.0-alpha.19

package/src/components/collection_editor/PropertyFieldPreview.tsx

@@ -0,0 +1,205 @@
+import {
+    cardClickableMixin,
+    cardMixin,
+    cardSelectedMixin,
+    cn,
+    ErrorBoundary,
+    FieldConfigBadge,
+    FunctionsIcon,
+    getFieldConfig,
+    isPropertyBuilder,
+    Paper,
+    Property,
+    PropertyOrBuilder,
+    RemoveCircleIcon,
+    Typography,
+    useFireCMSContext
+} from "@firecms/core";
+
+import { editableProperty } from "../../utils/entities";
+
+export function PropertyFieldPreview({
+                                         property,
+                                         onClick,
+                                         hasError,
+                                         includeName,
+                                         includeEditButton,
+                                         selected
+                                     }: {
+    property: Property,
+    hasError?: boolean,
+    selected?: boolean,
+    includeName?: boolean,
+    includeEditButton?: boolean;
+    onClick?: () => void
+}) {
+
+    const { fields } = useFireCMSContext();
+
+    const fieldConfig = getFieldConfig(property, fields);
+    const disabled = !editableProperty(property);
+
+    const borderColorClass = hasError
+        ? "border-red-500"
+        : (selected ? "border-blue-500" : "border-transparent");
+
+    return <ErrorBoundary>
+        <div
+            onClick={onClick}
+            className="flex flex-row w-full cursor-pointer">
+            <div className={"m-4"}>
+                <FieldConfigBadge fieldConfig={fieldConfig}/>
+            </div>
+            <Paper
+                className={cn(
+                    "pl-2 w-full flex flex-row gap-4 items-center",
+                    cardMixin,
+                    onClick ? cardClickableMixin : "",
+                    selected ? cardSelectedMixin : "",
+                    "flex-grow p-4 border transition-colors duration-200",
+                    borderColorClass
+                )}
+            >
+
+                <div className="w-full flex flex-col">
+
+                    {includeName &&
+                        <ErrorBoundary>
+                            <Typography variant="body1"
+                                        component="span"
+                                        className="flex-grow pr-2">
+                                {property.name
+                                    ? property.name
+                                    : "\u00a0"
+                                }
+                            </Typography>
+                        </ErrorBoundary>}
+
+                    <div className="flex flex-row items-center">
+                        <ErrorBoundary>
+                            <Typography className="flex-grow pr-2"
+                                        variant={includeName ? "body2" : "subtitle1"}
+                                        component="span"
+                                        color="secondary">
+                                {fieldConfig?.name}
+                            </Typography>
+                        </ErrorBoundary>
+                        <ErrorBoundary>
+                            <Typography variant="body2"
+                                        component="span"
+                                        color="disabled">
+                                {property.dataType}
+                            </Typography>
+                        </ErrorBoundary>
+
+                        {disabled && <div
+                            className="text-xs h-3 ml-0.5">
+                            <RemoveCircleIcon color={"disabled"}/>
+                        </div>}
+                    </div>
+                </div>
+
+                {includeEditButton && <Typography variant={"button"}>
+                    EDIT
+                </Typography>}
+
+            </Paper>
+        </div>
+    </ErrorBoundary>
+}
+
+export function NonEditablePropertyPreview({
+                                               name,
+                                               selected,
+                                               onClick,
+                                               property
+                                           }: {
+    name: string,
+    selected: boolean,
+    onClick?: () => void,
+    property?: PropertyOrBuilder
+}) {
+
+    const { fields } = useFireCMSContext();
+
+    const fieldConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, fields) : undefined;
+
+    return (
+        <div
+            onClick={onClick}
+            className="flex flex-row w-full cursor-pointer">
+            <div className={"relative m-4"}>
+                {fieldConfig && <FieldConfigBadge fieldConfig={fieldConfig}/>}
+                {!fieldConfig && <div
+                    className={"h-8 w-8 p-1 rounded-full shadow text-white bg-gray-500"}>
+                    <FunctionsIcon color={"inherit"} size={"medium"}/>
+                </div>}
+                <RemoveCircleIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
+            </div>
+            <Paper
+                className={cn(
+                    "pl-2 w-full flex flex-row gap-4 items-center",
+                    cardMixin,
+                    onClick ? cardClickableMixin : "",
+                    selected ? cardSelectedMixin : "",
+                    "flex-grow p-4 border transition-colors duration-200",
+                    selected ? "border-blue-500" : "border-transparent")}
+            >
+
+                <div className="w-full flex flex-col">
+                    <Typography variant="body1"
+                                component="span"
+                                className="flex-grow pr-2">
+                        {property?.name
+                            ? property.name
+                            : name
+                        }
+                    </Typography>
+
+                    <div className="flex flex-row items-center">
+                        {fieldConfig && <Typography className="flex-grow pr-2"
+                                                    variant={"body2"}
+                                                    component="span"
+                                                    color="secondary">
+                            {fieldConfig?.name}
+                        </Typography>}
+
+                        {property && !isPropertyBuilder(property) && <ErrorBoundary>
+                            <Typography variant="body2"
+                                        component="span"
+                                        color="disabled">
+                                {property.dataType}
+                            </Typography>
+                        </ErrorBoundary>}
+
+                        {property && isPropertyBuilder(property) && <ErrorBoundary>
+                            <Typography variant="body2"
+                                        component="span"
+                                        color="disabled">
+                                This property is defined as a property builder in code
+                            </Typography>
+                        </ErrorBoundary>}
+
+                        {!property && <ErrorBoundary>
+                            <Typography variant="body2"
+                                        component="span"
+                                        color="disabled">
+                                This field is defined as an additional field in code
+                            </Typography>
+                        </ErrorBoundary>}
+
+                    </div>
+
+                    {/*<div className="flex flex-row text-xs">*/}
+                    {/*    <Typography className="flex-grow pr-2"*/}
+                    {/*                variant="body2"*/}
+                    {/*                component="span"*/}
+                    {/*                color="secondary">*/}
+                    {/*        This field can only be edited in code*/}
+                    {/*    </Typography>*/}
+                    {/*</div>*/}
+                </div>
+
+            </Paper>
+        </div>)
+}

package/src/components/collection_editor/PropertySelectItem.tsx

@@ -0,0 +1,31 @@
+import { cn, FieldConfig, FieldConfigBadge, SelectItem, Typography } from "@firecms/core";
+
+export interface PropertySelectItemProps {
+    value: string;
+    optionDisabled: boolean;
+    fieldConfig: FieldConfig;
+    existing: boolean;
+}
+
+export function PropertySelectItem({ value, optionDisabled, fieldConfig, existing }: PropertySelectItemProps) {
+    return <SelectItem value={value}
+                       disabled={optionDisabled}
+                       className={"flex flex-row items-center"}>
+        <div
+            className={cn(
+                "flex flex-row items-center text-base min-h-[52px]",
+                optionDisabled ? "w-full" : "")}>
+            <div className={"mr-8"}>
+                <FieldConfigBadge fieldConfig={fieldConfig}/>
+            </div>
+            <div>
+                <div>{fieldConfig.name}</div>
+                <Typography variant={"caption"}
+                            color={"disabled"}
+                            className={"max-w-sm"}>
+                    {existing && optionDisabled ? "You can only switch to widgets that use the same data type" : fieldConfig.description}
+                </Typography>
+            </div>
+        </div>
+    </SelectItem>
+}

package/src/components/collection_editor/PropertyTree.tsx

@@ -0,0 +1,228 @@
+import {
+    AdditionalFieldDelegate,
+    AutoAwesomeIcon,
+    CMSType,
+    defaultBorderMixin,
+    DragHandleIcon,
+    ErrorBoundary,
+    IconButton, isPropertyBuilder,
+    PropertiesOrBuilders, PropertyOrBuilder,
+    RemoveIcon,
+    Tooltip
+} from "@firecms/core";
+import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
+import { DragDropContext, Draggable, DraggableProvided, Droppable } from "@hello-pangea/dnd";
+import { getFullId, idToPropertiesPath } from "./util";
+import { getIn } from "formik";
+import { editableProperty } from "../../utils/entities";
+import { useCallback } from "react";
+
+export function PropertyTree<M extends {
+    [Key: string]: CMSType
+}>({
+       namespace,
+       selectedPropertyKey,
+       onPropertyClick,
+       properties,
+       propertiesOrder: propertiesOrderProp,
+       additionalFields,
+       errors,
+       onPropertyMove,
+       onPropertyRemove,
+       className,
+       inferredPropertyKeys
+   }: {
+    namespace?: string;
+    selectedPropertyKey?: string;
+    onPropertyClick?: (propertyKey: string, namespace?: string) => void;
+    properties: PropertiesOrBuilders<M>;
+    propertiesOrder?: string[];
+    additionalFields?: AdditionalFieldDelegate<M>[];
+    errors: Record<string, any>;
+    onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
+    onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
+    className?: string;
+    inferredPropertyKeys?: string[];
+}) {
+
+    const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
+
+    const onDragEnd = useCallback((result: any) => {
+        // dropped outside the list
+        if (!result.destination) {
+            return;
+        }
+        const startIndex = result.source.index;
+        const endIndex = result.destination.index;
+
+        const newPropertiesOrder = Array.from(propertiesOrder);
+        const [removed] = newPropertiesOrder.splice(startIndex, 1);
+        newPropertiesOrder.splice(endIndex, 0, removed);
+        if (onPropertyMove)
+            onPropertyMove(newPropertiesOrder, namespace);
+    }, [namespace, onPropertyMove, propertiesOrder])
+
+    return (
+        <>
+
+            <DragDropContext onDragEnd={onDragEnd}>
+                <Droppable droppableId={`droppable_${namespace}`}>
+                    {(droppableProvided, droppableSnapshot) => (
+                        <div
+                            {...droppableProvided.droppableProps}
+                            ref={droppableProvided.innerRef}
+                            className={className}>
+                            {propertiesOrder && propertiesOrder
+                                // .filter((propertyKey) => Boolean(properties[propertyKey]))
+                                .map((propertyKey: string, index: number) => {
+                                    const property = properties[propertyKey] as PropertyOrBuilder;
+                                    const additionalField = additionalFields?.find(field => field.id === propertyKey);
+
+                                    if (!property && !additionalField) {
+                                        console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
+                                        return null;
+                                    }
+                                    return (
+                                        <Draggable
+                                            key={`array_field_${namespace}_${propertyKey}}`}
+                                            draggableId={`array_field_${namespace}_${propertyKey}}`}
+                                            index={index}>
+                                            {(provided, snapshot) => {
+                                                return (
+                                                    <ErrorBoundary>
+                                                        <PropertyTreeEntry
+                                                            propertyKey={propertyKey as string}
+                                                            propertyOrBuilder={property}
+                                                            additionalField={additionalField}
+                                                            provided={provided}
+                                                            errors={errors}
+                                                            namespace={namespace}
+                                                            inferredPropertyKeys={inferredPropertyKeys}
+                                                            onPropertyMove={onPropertyMove}
+                                                            onPropertyRemove={onPropertyRemove}
+                                                            onPropertyClick={snapshot.isDragging ? undefined : onPropertyClick}
+                                                            selectedPropertyKey={selectedPropertyKey}
+                                                        />
+                                                    </ErrorBoundary>
+                                                );
+                                            }}
+                                        </Draggable>);
+                                }).filter(Boolean)}
+
+                            {droppableProvided.placeholder}
+
+                        </div>
+                    )}
+                </Droppable>
+            </DragDropContext>
+
+        </>
+    );
+}
+
+export function PropertyTreeEntry({
+                                      propertyKey,
+                                      namespace,
+                                      propertyOrBuilder,
+                                      additionalField,
+                                      provided,
+                                      selectedPropertyKey,
+                                      errors,
+                                      onPropertyClick,
+                                      onPropertyMove,
+                                      onPropertyRemove,
+                                      inferredPropertyKeys
+                                  }: {
+    propertyKey: string;
+    namespace?: string;
+    propertyOrBuilder: PropertyOrBuilder;
+    additionalField?: AdditionalFieldDelegate<any>;
+    selectedPropertyKey?: string;
+    provided: DraggableProvided;
+    errors: Record<string, any>;
+    onPropertyClick?: (propertyKey: string, namespace?: string) => void;
+    onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
+    onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
+    inferredPropertyKeys?: string[];
+}) {
+
+    const isPropertyInferred = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
+
+    const fullId = getFullId(propertyKey, namespace);
+    let subtree;
+    if (typeof propertyOrBuilder === "object") {
+        const property = propertyOrBuilder;
+        if (property.dataType === "map" && property.properties) {
+            subtree = <PropertyTree
+                selectedPropertyKey={selectedPropertyKey}
+                namespace={fullId}
+                properties={property.properties}
+                propertiesOrder={property.propertiesOrder}
+                errors={errors}
+                onPropertyClick={onPropertyClick}
+                onPropertyMove={onPropertyMove}
+                onPropertyRemove={onPropertyRemove}/>
+        }
+    }
+
+    const hasError = fullId ? getIn(errors, idToPropertiesPath(fullId)) : false;
+    const selected = selectedPropertyKey === fullId;
+    const editable = propertyOrBuilder && editableProperty(propertyOrBuilder);
+
+    return (
+        <div
+            ref={provided.innerRef}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            className="relative -ml-8"
+        >
+            {subtree && <div
+                className={"absolute border-l " + defaultBorderMixin}
+                style={{
+                    left: "32px",
+                    top: "64px",
+                    bottom: "16px"
+                }}/>}
+
+            {!isPropertyBuilder(propertyOrBuilder) && !additionalField && editable
+                ? <PropertyFieldPreview
+                    property={propertyOrBuilder}
+                    onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
+                    includeName={true}
+                    selected={selected}
+                    hasError={hasError}/>
+                : <NonEditablePropertyPreview name={propertyKey}
+                                              property={propertyOrBuilder}
+                                              onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
+                                              selected={selected}/>}
+
+            <div className="absolute top-2 right-2 flex flex-row ">
+
+                {isPropertyInferred && <Tooltip title={"Inferred property"}>
+                    <AutoAwesomeIcon size="small" className={"p-2"}/>
+                </Tooltip>}
+
+                {onPropertyRemove && <Tooltip title={"Remove"}>
+                    <IconButton size="small"
+                                color="inherit"
+                                onClick={() => onPropertyRemove(propertyKey, namespace)}>
+                        <RemoveIcon size={"small"}/>
+                    </IconButton>
+                </Tooltip>}
+
+                {onPropertyMove && <Tooltip title={"Move"}>
+                    <IconButton
+                        component={"span"}
+                        size="small"
+                    >
+                        <DragHandleIcon size={"small"}/>
+                    </IconButton>
+                </Tooltip>}
+            </div>
+
+
+            {subtree && <div className={"ml-16"}>{subtree}</div>}
+        </div>
+    );
+
+}

package/src/components/collection_editor/SelectIcons.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import synonyms from "../../utils/synonyms";
+import { iconsSearch } from "../../utils/icons";
+import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/core";
+
+const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
+
+if (process.env.NODE_ENV !== "production") {
+    Object.keys(synonyms).forEach((icon: string) => {
+        if (!iconKeys.includes(icon)) {
+            console.warn(`The icon ${icon} no longer exists. Remove it from \`synonyms\``);
+        }
+    });
+}
+
+interface SearchIconsProps {
+    selectedIcon?: string;
+    onIconSelected: (icon: string) => void;
+}
+
+export function SearchIcons({ selectedIcon = "", onIconSelected }: SearchIconsProps) {
+    const [keys, setKeys] = React.useState<string[] | null>(null);
+    const [query, setQuery] = React.useState<string>("");
+
+    const updateSearchResults = React.useMemo(() =>
+        debounce((value: string) => {
+            if (!value || value === "") {
+                setKeys(null);
+            } else {
+                const searchResult = iconsSearch.search(value);
+                setKeys(searchResult.map((e:any) => e.key));
+            }
+        }, UPDATE_SEARCH_INDEX_WAIT_MS), []
+    );
+
+    React.useEffect(() => {
+        updateSearchResults(query);
+        return () => {
+            updateSearchResults.clear();
+        };
+    }, [query, updateSearchResults]);
+
+    const icons = keys === null ? coolIconKeys : keys;
+
+    return (
+        <>
+            <SearchBar
+                autoFocus
+                className={"w-full sticky top-0 z-10"}
+                onTextSearch={(value?: string) => setQuery(value ?? "")}
+                placeholder="Search for more icons…"
+            />
+
+            <div className={"flex max-w-full flex-wrap mt-4"}>
+                {icons.map((icon: string) => {
+                    return (
+                        <Tooltip title={icon} key={icon}>
+                            <IconButton
+                                shape={"square"}
+                                toggled={selectedIcon === icon}
+                                onClick={() => onIconSelected(icon)}
+                                className="box-content m-1"
+                            >
+                                <Icon iconKey={icon} size={24} />
+                            </IconButton>
+                        </Tooltip>
+                    );
+                })}
+            </div>
+        </>
+    );
+}