@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/field_configs.tsx

@@ -0,0 +1,442 @@
+import type { DefaultFieldConfig } from "../types/fields";
+import type { ArrayProperty, NumberProperty, Property, PropertyConfig, StringProperty } from "@rebasepro/types";
+import { ArrayCustomShapedFieldBinding } from "../form/field_bindings/ArrayCustomShapedFieldBinding";
+import { ArrayOfReferencesFieldBinding } from "../form/field_bindings/ArrayOfReferencesFieldBinding";
+import { BlockFieldBinding } from "../form/field_bindings/BlockFieldBinding";
+import { DateTimeFieldBinding } from "../form/field_bindings/DateTimeFieldBinding";
+import { KeyValueFieldBinding } from "../form/field_bindings/KeyValueFieldBinding";
+import { MapFieldBinding } from "../form/field_bindings/MapFieldBinding";
+import { MarkdownEditorFieldBinding } from "../form/field_bindings/MarkdownEditorFieldBinding";
+import { MultiSelectFieldBinding } from "../form/field_bindings/MultiSelectFieldBinding";
+import { ReferenceAsStringFieldBinding } from "../form/field_bindings/ReferenceAsStringFieldBinding";
+import { ReferenceFieldBinding } from "../form/field_bindings/ReferenceFieldBinding";
+import { RepeatFieldBinding } from "../form/field_bindings/RepeatFieldBinding";
+import { SelectFieldBinding } from "../form/field_bindings/SelectFieldBinding";
+import { StorageUploadFieldBinding } from "../form/field_bindings/StorageUploadFieldBinding";
+import { SwitchFieldBinding } from "../form/field_bindings/SwitchFieldBinding";
+import { TextFieldBinding } from "../form/field_bindings/TextFieldBinding";
+import { isPropertyBuilder } from "@rebasepro/common";
+
+import {
+    AddLinkIcon,
+    BallotIcon,
+    DriveFolderUploadIcon,
+    FlagIcon,
+    FormatListNumberedIcon,
+    FormatQuoteIcon,
+    HttpIcon,
+    LinkIcon,
+    ListAltIcon,
+    ListIcon,
+    MailIcon,
+    NumbersIcon, PersonIcon,
+    RepeatIcon,
+    ScheduleIcon,
+    ShortTextIcon,
+    SubjectIcon,
+    UploadFileIcon,
+    VerifiedUserIcon,
+    ViewStreamIcon
+} from "@rebasepro/ui";
+import { RelationFieldBinding } from "../form/field_bindings/RelationFieldBinding";
+import { UserSelectFieldBinding } from "../form/field_bindings/UserSelectFieldBinding";
+import { mergeDeep } from "@rebasepro/utils";
+
+export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> = {
+    text_field: {
+        key: "text_field",
+        name: "Text field",
+        description: "Simple short text",
+        Icon: ShortTextIcon,
+        color: "#2d7ff9",
+        property: {
+            type: "string",
+            Field: TextFieldBinding
+        }
+    },
+    multiline: {
+        key: "multiline",
+        name: "Multiline",
+        description: "Text with multiple lines",
+        Icon: SubjectIcon,
+        color: "#2d7ff9",
+        property: {
+            type: "string",
+            multiline: true,
+            Field: TextFieldBinding
+        }
+    },
+    markdown: {
+        key: "markdown",
+        name: "Markdown",
+        description: "Text with advanced markdown syntax",
+        Icon: FormatQuoteIcon,
+        color: "#2d7ff9",
+        property: {
+            type: "string",
+            markdown: true,
+            Field: MarkdownEditorFieldBinding
+        }
+    },
+    url: {
+        key: "url",
+        name: "Url",
+        description: "Text with URL validation",
+        Icon: HttpIcon,
+        color: "#154fb3",
+        property: {
+            type: "string",
+            url: true,
+            Field: TextFieldBinding
+        }
+    },
+    email: {
+        key: "email",
+        name: "Email",
+        description: "Text with email validation",
+        Icon: MailIcon,
+        color: "#154fb3",
+        property: {
+            type: "string",
+            email: true,
+            Field: TextFieldBinding
+        }
+    },
+    switch: {
+        key: "switch",
+        name: "Switch",
+        description: "Boolean true or false field (or yes or no, 0 or 1...)",
+        Icon: FlagIcon,
+        color: "#20d9d2",
+        property: {
+            type: "boolean",
+            Field: SwitchFieldBinding
+        }
+    },
+    select: {
+        key: "select",
+        name: "Select/enum",
+        description: "Select one text value from within an enumeration",
+        Icon: ListIcon,
+        color: "#4223c9",
+        property: {
+            type: "string",
+            enum: [],
+            Field: SelectFieldBinding
+        }
+    },
+    multi_select: {
+        key: "multi_select",
+        name: "Multi select (enum)",
+        description: "Select multiple text values from within an enumeration",
+        Icon: ListAltIcon,
+        color: "#4223c9",
+        property: {
+            type: "array",
+            of: {
+                type: "string",
+                enum: [],
+            },
+            Field: MultiSelectFieldBinding
+        }
+    },
+    user_select: {
+        key: "user_select",
+        name: "User select",
+        description: "Select a user from the user management system. Store the user ID.",
+        Icon: PersonIcon,
+        property: {
+            type: "string",
+            Field: UserSelectFieldBinding
+        }
+    },
+    number_input: {
+        key: "number_input",
+        name: "Number input",
+        description: "Simple number field with validation",
+        Icon: NumbersIcon,
+        color: "#bec920",
+        property: {
+            type: "number",
+            Field: TextFieldBinding
+        }
+    },
+    number_select: {
+        key: "number_select",
+        name: "Number select",
+        description: "Select a number value from within an enumeration",
+        Icon: FormatListNumberedIcon,
+        color: "#bec920",
+        property: {
+            type: "number",
+            enum: [],
+            Field: SelectFieldBinding
+        }
+    },
+    multi_number_select: {
+        key: "multi_number_select",
+        name: "Multiple number select",
+        description: "Select multiple number values from within an enumeration",
+        Icon: FormatListNumberedIcon,
+        color: "#bec920",
+        property: {
+            type: "array",
+            of: {
+                type: "number",
+                enum: [],
+            },
+            Field: MultiSelectFieldBinding
+        }
+    },
+    file_upload: {
+        key: "file_upload",
+        name: "File upload",
+        description: "Input for uploading single files",
+        Icon: UploadFileIcon,
+        color: "#f92d9a",
+        property: {
+            type: "string",
+            storage: {
+                storagePath: "{path}"
+            },
+            Field: StorageUploadFieldBinding
+        }
+    },
+    multi_file_upload: {
+        key: "multi_file_upload",
+        name: "Multiple file upload",
+        description: "Input for uploading multiple files",
+        Icon: DriveFolderUploadIcon,
+        color: "#f92d9a",
+        property: {
+            type: "array",
+            of: {
+                type: "string",
+                storage: {
+                    storagePath: "{path}"
+                }
+            },
+            Field: StorageUploadFieldBinding
+        }
+    },
+    reference_as_string: {
+        key: "reference_as_string",
+        name: "Reference (as string)",
+        description: "The value refers to a different collection (it is saved as a string)",
+        Icon: LinkIcon,
+        color: "#154fb3",
+        property: {
+            type: "string",
+            Field: ReferenceAsStringFieldBinding
+        }
+    },
+    reference: {
+        key: "reference",
+        name: "Reference",
+        description: "The value refers to a different collection (it is saved as a reference)",
+        Icon: LinkIcon,
+        color: "#ff0042",
+        property: {
+            type: "reference",
+            Field: ReferenceFieldBinding
+        }
+    },
+    multi_references: {
+        key: "multi_references",
+        name: "Multiple references",
+        description: "Multiple values that refer to a different collection",
+        Icon: AddLinkIcon,
+        color: "#ff0042",
+        property: {
+            type: "array",
+            of: {
+                type: "reference",
+            },
+            Field: ArrayOfReferencesFieldBinding
+        }
+    },
+    relation: {
+        key: "relation",
+        name: "Relation",
+        description: "Multiple values that refer to a different collection",
+        Icon: AddLinkIcon,
+        color: "#ff0042",
+        property: {
+            relationName: "",
+            type: "relation",
+            Field: RelationFieldBinding
+        }
+    },
+    date_time: {
+        key: "date_time",
+        name: "Date/time",
+        description: "A date time select field",
+        Icon: ScheduleIcon,
+        color: "#8b46ff",
+        property: {
+            type: "date",
+            Field: DateTimeFieldBinding
+        }
+    },
+    group: {
+        key: "group",
+        name: "Group",
+        description: "Group of multiple fields",
+        Icon: BallotIcon,
+        color: "#ff9408",
+        property: {
+            type: "map",
+            properties: {},
+            Field: MapFieldBinding
+        }
+    },
+    key_value: {
+        key: "key_value",
+        name: "Key-value",
+        description: "Flexible field that allows the user to add multiple key-value pairs",
+        Icon: BallotIcon,
+        color: "#ff9408",
+        property: {
+            type: "map",
+            keyValue: true,
+            Field: KeyValueFieldBinding
+        }
+    },
+    repeat: {
+        key: "repeat",
+        name: "Repeat/list",
+        description: "A field that gets repeated multiple times (e.g. multiple text fields)",
+        Icon: RepeatIcon,
+        color: "#ff9408",
+        property: {
+            type: "array",
+            of: {
+                type: "string",
+            },
+            Field: RepeatFieldBinding
+        }
+    },
+    custom_array: {
+        key: "custom_array",
+        name: "Custom array",
+        description: "A field that saved its value as an array of custom objects",
+        Icon: RepeatIcon,
+        color: "#ff9408",
+        property: {
+            type: "array",
+            Field: ArrayCustomShapedFieldBinding
+        }
+    },
+    block: {
+        key: "block",
+        name: "Block",
+        description: "A complex field that allows the user to compose different fields together, with a key/value format",
+        Icon: ViewStreamIcon,
+        color: "#ff9408",
+        property: {
+            type: "array",
+            oneOf: {
+                properties: {},
+            },
+            Field: BlockFieldBinding
+        }
+    }
+};
+
+export function getDefaultFieldConfig(property: Property): PropertyConfig | undefined {
+    const fieldId = getDefaultFieldId(property);
+    if (!fieldId) {
+        console.error("No field id found for property", property);
+        return undefined;
+    }
+    return DEFAULT_FIELD_CONFIGS[fieldId];
+}
+
+export function getFieldConfig(property: Property, propertyConfigs: Record<string, PropertyConfig>): PropertyConfig | undefined {
+    const fieldId = getFieldId(property);
+    const defaultFieldId = getDefaultFieldId(property);
+    if (!defaultFieldId) {
+        console.error("No field id found for property", property);
+        return undefined;
+    }
+    const defaultFieldConfig = DEFAULT_FIELD_CONFIGS[defaultFieldId];
+    const customField = fieldId ? propertyConfigs[fieldId] : undefined;
+    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {} as PropertyConfig);
+}
+
+export function getDefaultFieldId(property: Property) {
+    if (property.type === "string") {
+        if (property.multiline) {
+            return "multiline";
+        } else if (property.markdown) {
+            return "markdown";
+        } else if (property.storage) {
+            return "file_upload";
+        } else if (property.url) {
+            return "url";
+        } else if (property.email) {
+            return "email";
+        } else if (property.enum) {
+            return "select";
+        } else if (property.userSelect) {
+            return "user_select";
+        } else if (property.reference) {
+            return "reference_as_string";
+        } else {
+            return "text_field";
+        }
+    } else if (property.type === "number") {
+        if (property.enum) {
+            return "number_select";
+        }
+        return "number_input";
+    } else if (property.type === "map") {
+        if (property.keyValue)
+            return "key_value";
+        return "group";
+    } else if (property.type === "array") {
+        const of = (property as ArrayProperty).of;
+        const oneOf = (property as ArrayProperty).oneOf;
+        if (oneOf) {
+            return "block";
+        } else if (Array.isArray(of)) {
+            return "custom_array";
+        } else if (isPropertyBuilder(of)) {
+            return "repeat";
+        } else if (of) {
+            const ofProperty = of as Property;
+            if (ofProperty.type === "string" && (ofProperty as StringProperty).enum) {
+                return "multi_select";
+            } else if (ofProperty.type === "number" && (ofProperty as NumberProperty).enum) {
+                return "multi_number_select";
+            } else if (ofProperty.type === "string" && (ofProperty as StringProperty).storage) {
+                return "multi_file_upload";
+            } else if (ofProperty.type === "reference") {
+                return "multi_references";
+            } else if (of?.type === "relation") {
+                throw new Error("The 'relation' type is not supported inside arrays. Use 'reference' instead.");
+            } else {
+                return "repeat";
+            }
+        } else {
+            return "repeat";
+        }
+    } else if (property.type === "boolean") {
+        return "switch";
+    } else if (property.type === "date") {
+        return "date_time";
+    } else if (property.type === "relation") {
+        return "relation";
+    } else if (property.type === "reference") {
+        return "reference";
+    }
+
+    console.error("Unsupported field config mapping", property);
+    return undefined;
+}
+
+export function getFieldId(property: Property): string | undefined {
+    if (property.propertyConfig)
+        return property.propertyConfig;
+    return getDefaultFieldId(property);
+}

package/src/components/history/EntityHistoryEntry.tsx

@@ -0,0 +1,175 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { Property } from "@rebasepro/types";
+import * as React from "react";
+
+import {
+    Chip,
+    cls,
+    defaultBorderMixin,
+    KeyboardBackspaceIcon,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
+import { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { getPropertyInPath } from "../../util/property_utils";
+import { PropertyPreview, SkeletonPropertyComponent } from "../../preview";
+import { useAuthController } from "@rebasepro/core";
+import { UserChip } from "./UserChip";
+import { HistoryEntryData } from "../../hooks";
+import { getValueInPath } from "@rebasepro/utils";
+
+/**
+ * Shallow-deep equality: uses JSON.stringify for objects, strict equality for primitives.
+ */
+function deepEqual(a: unknown, b: unknown): boolean {
+    if (a === b) return true;
+    if (a == null || b == null) return a === b;
+    if (typeof a === "object" && typeof b === "object") {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    return false;
+}
+
+export type EntityHistoryEntryProps = {
+    size: PreviewSize;
+    actions?: React.ReactNode;
+    collection?: EntityCollection;
+    hover?: boolean;
+    entry: HistoryEntryData;
+    onClick?: (e: React.SyntheticEvent) => void;
+};
+
+function PreviousValueView({
+    previousValueInPath,
+    childProperty,
+    propertyKey
+}: {
+    previousValueInPath: unknown;
+    childProperty: Property;
+    propertyKey: string;
+}) {
+    if (typeof previousValueInPath === "string" || typeof previousValueInPath === "number") {
+        return <Typography variant={"caption"} color={"secondary"} className="line-through">
+            {previousValueInPath}
+        </Typography>;
+    } else if (typeof previousValueInPath === "boolean") {
+        return <Typography variant={"caption"} color={"secondary"} className="line-through">
+            {previousValueInPath ? "true" : "false"}
+        </Typography>;
+    } else {
+        return <Tooltip
+            side={"left"}
+            title={<div className={"flex flex-col gap-2"}>
+                <Typography variant={"caption"} color={"secondary"}>
+                    Previous value
+                </Typography>
+                <PropertyPreview
+                    propertyKey={propertyKey as string}
+                    value={previousValueInPath as never}
+                    property={childProperty as Property}
+                    size={"small"} />
+            </div>}>
+            <KeyboardBackspaceIcon size={"smallest"} color={"disabled"} className={"mb-1"} />
+        </Tooltip>
+    }
+}
+
+/**
+ * Displays a single entity history revision entry.
+ * Adapted from the entity_history plugin — now reads from backend API data.
+ */
+export function EntityHistoryEntry({
+    actions,
+    hover,
+    collection,
+    size,
+    entry
+}: EntityHistoryEntryProps) {
+
+    const authController = useAuthController();
+
+    const changedFields = entry.changed_fields;
+    const previousValues = entry.previous_values;
+    const updatedOn = new Date(entry.updated_at);
+    const updatedBy = entry.updated_by;
+
+    // Resolve user display
+    const currentUser = authController.user;
+    const userDisplay = updatedBy === currentUser?.uid
+        ? currentUser
+        : undefined;
+
+    return <div className={"w-full flex flex-col gap-2 mt-4"}>
+        <div className={"ml-4 flex items-center gap-4"}>
+            <Typography variant={"body2"} color={"secondary"}>
+                {updatedOn.toLocaleString()}
+            </Typography>
+            <Chip size={"small"}>
+                {entry.action}
+            </Chip>
+            {!userDisplay && updatedBy && <Chip size={"small"}>{updatedBy}</Chip>}
+            {userDisplay && <UserChip user={userDisplay} />}
+        </div>
+        <div
+            className={cls(
+                "bg-white dark:bg-surface-900",
+                "min-h-[44px]",
+                "w-full",
+                "items-center",
+                hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800" : "",
+                size === "small" ? "p-1" : "px-2 py-1",
+                "flex border rounded-lg",
+                defaultBorderMixin
+            )}>
+
+            {actions}
+
+            <div className={"flex flex-col grow w-full m-1 shrink min-w-0"}>
+
+                {changedFields && collection && changedFields.map((key: string) => {
+                    const childProperty = getPropertyInPath(collection.properties, key);
+                    const valueInPath = entry.values ? getValueInPath(entry.values, key) : undefined;
+                    const previousValueInPath = previousValues ? getValueInPath(previousValues, key) : undefined;
+
+                    const element = childProperty
+                        ? <PropertyPreview
+                            propertyKey={key}
+                            value={valueInPath as never}
+                            property={childProperty as Property}
+                            size={"small"} />
+                        : <Typography variant={"body2"}>
+                            {typeof valueInPath === "string" ? valueInPath : JSON.stringify(valueInPath)}
+                        </Typography>;
+
+                    return (
+                        <div key={"ref_prev_" + key}
+                            className="flex w-full my-1 items-center">
+                            <Typography variant={"caption"}
+                                color={"secondary"}
+                                className="min-w-[140px] md:min-w-[200px] w-1/5 pr-8 overflow-hidden text-ellipsis text-right">
+                                {key}
+                            </Typography>
+                            <div className="w-4/5">
+                                {previousValueInPath !== undefined && !deepEqual(previousValueInPath, valueInPath) &&
+                                    <PreviousValueView previousValueInPath={previousValueInPath}
+                                        childProperty={childProperty as Property}
+                                        propertyKey={key} />
+                                }
+                                {element}
+                            </div>
+                        </div>
+                    );
+                })}
+
+                {(!changedFields || changedFields.length === 0) && (
+                    <Typography variant={"caption"} color={"secondary"} className="ml-4">
+                        {entry.action === "create" ? "Entity created" :
+                            entry.action === "delete" ? "Entity deleted" : "No field changes recorded"}
+                    </Typography>
+                )}
+
+            </div>
+
+        </div>
+    </div>;
+}