@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/collection_editor/ui/collection_editor/properties/DateTimePropertyField.tsx

@@ -0,0 +1,205 @@
+import { FieldCaption } from "../../../_cms_internals";
+import React from "react";
+import { getIn, useFormex } from "@rebasepro/formex";
+;
+import { NumberProperty, StringProperty } from "@rebasepro/types";
+import { Select, SelectItem } from "@rebasepro/ui";
+import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+
+// Common IANA timezones with human-readable labels
+const TIMEZONES = [
+    // UTC
+    { value: "UTC", label: "UTC (Coordinated Universal Time)" },
+    // Americas
+    { value: "America/New_York", label: "New York (US Eastern)" },
+    { value: "America/Chicago", label: "Chicago (US Central)" },
+    { value: "America/Denver", label: "Denver (US Mountain)" },
+    { value: "America/Los_Angeles", label: "Los Angeles (US Pacific)" },
+    { value: "America/Anchorage", label: "Anchorage (Alaska)" },
+    { value: "America/Toronto", label: "Toronto (Canada Eastern)" },
+    { value: "America/Vancouver", label: "Vancouver (Canada Pacific)" },
+    { value: "America/Mexico_City", label: "Mexico City" },
+    { value: "America/Sao_Paulo", label: "São Paulo (Brazil)" },
+    { value: "America/Buenos_Aires", label: "Buenos Aires (Argentina)" },
+    // Europe
+    { value: "Europe/London", label: "London (UK)" },
+    { value: "Europe/Paris", label: "Paris (France)" },
+    { value: "Europe/Berlin", label: "Berlin (Germany)" },
+    { value: "Europe/Madrid", label: "Madrid (Spain)" },
+    { value: "Europe/Rome", label: "Rome (Italy)" },
+    { value: "Europe/Amsterdam", label: "Amsterdam (Netherlands)" },
+    { value: "Europe/Brussels", label: "Brussels (Belgium)" },
+    { value: "Europe/Zurich", label: "Zurich (Switzerland)" },
+    { value: "Europe/Stockholm", label: "Stockholm (Sweden)" },
+    { value: "Europe/Vienna", label: "Vienna (Austria)" },
+    { value: "Europe/Warsaw", label: "Warsaw (Poland)" },
+    { value: "Europe/Prague", label: "Prague (Czech Republic)" },
+    { value: "Europe/Athens", label: "Athens (Greece)" },
+    { value: "Europe/Moscow", label: "Moscow (Russia)" },
+    { value: "Europe/Istanbul", label: "Istanbul (Turkey)" },
+    // Asia
+    { value: "Asia/Dubai", label: "Dubai (UAE)" },
+    { value: "Asia/Kolkata", label: "Mumbai / Delhi (India)" },
+    { value: "Asia/Bangkok", label: "Bangkok (Thailand)" },
+    { value: "Asia/Singapore", label: "Singapore" },
+    { value: "Asia/Hong_Kong", label: "Hong Kong" },
+    { value: "Asia/Shanghai", label: "Shanghai (China)" },
+    { value: "Asia/Tokyo", label: "Tokyo (Japan)" },
+    { value: "Asia/Seoul", label: "Seoul (South Korea)" },
+    { value: "Asia/Jakarta", label: "Jakarta (Indonesia)" },
+    // Oceania
+    { value: "Australia/Sydney", label: "Sydney (Australia Eastern)" },
+    { value: "Australia/Melbourne", label: "Melbourne (Australia)" },
+    { value: "Australia/Brisbane", label: "Brisbane (Australia)" },
+    { value: "Australia/Perth", label: "Perth (Australia Western)" },
+    { value: "Pacific/Auckland", label: "Auckland (New Zealand)" },
+    // Africa
+    { value: "Africa/Cairo", label: "Cairo (Egypt)" },
+    { value: "Africa/Johannesburg", label: "Johannesburg (South Africa)" },
+    { value: "Africa/Lagos", label: "Lagos (Nigeria)" },
+];
+
+export function DateTimePropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+
+    const {
+        values,
+        errors,
+        touched,
+        setFieldValue
+    } = useFormex<StringProperty | NumberProperty>();
+
+    const modePath = "mode";
+    const modeValue: string | undefined = getIn(values, modePath);
+    const modeError: string | undefined = getIn(touched, modePath) && getIn(errors, modePath);
+
+    const autoValuePath = "autoValue";
+    const autoValueValue: string | undefined = getIn(values, autoValuePath);
+    const autoValueError: string | undefined = getIn(touched, autoValuePath) && getIn(errors, autoValuePath);
+
+    const timezonePath = "timezone";
+    const timezoneValue: string | undefined = getIn(values, timezonePath);
+    const timezoneError: string | undefined = getIn(touched, timezonePath) && getIn(errors, timezonePath);
+
+    const columnTypePath = "columnType";
+    const columnTypeValue: string | undefined = getIn(values, columnTypePath);
+    const columnTypeError: string | undefined = getIn(touched, columnTypePath) && getIn(errors, columnTypePath);
+
+    return (
+        <>
+            <div className={"flex flex-col col-span-12 gap-2"}>
+                <div>
+                    <Select name={modePath}
+                        value={modeValue ?? "date"}
+                        error={Boolean(modeError)}
+                        onValueChange={(v) => setFieldValue(modePath, v)}
+                        label={"Mode"}
+                        fullWidth={true}
+                        renderValue={(v) => {
+                            switch (v) {
+                                case "date_time":
+                                    return "Date/Time";
+                                case "date":
+                                    return "Date";
+                                default:
+                                    return "";
+                            }
+                        }}
+                        disabled={disabled}>
+                        <SelectItem value={"date_time"}> Date/Time </SelectItem>
+                        <SelectItem value={"date"}> Date </SelectItem>
+                    </Select>
+                    <FieldCaption error={Boolean(modeError)}>
+                        {modeError}
+                    </FieldCaption>
+                </div>
+                <div>
+                    <Select name={autoValuePath}
+                        disabled={disabled}
+                        fullWidth={true}
+                        value={autoValueValue ?? ""}
+                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
+                        renderValue={(v) => {
+                            switch (v) {
+                                case "on_create":
+                                    return "On create";
+                                case "on_update":
+                                    return "On any update";
+                                default:
+                                    return "None";
+                            }
+                        }}
+                        error={Boolean(autoValueError)}
+                        label={"Automatic value"}>
+                        <SelectItem value={"none"}> None </SelectItem>
+                        <SelectItem value={"on_create"}> On create </SelectItem>
+                        <SelectItem value={"on_update"}> On any update </SelectItem>
+                    </Select>
+                    <FieldCaption error={Boolean(autoValueError)}>
+                        {autoValueError ?? "Update this field automatically when creating or updating the entity"}
+                    </FieldCaption>
+                </div>
+                <div>
+                    <Select name={timezonePath}
+                        disabled={disabled}
+                        fullWidth={true}
+                        value={timezoneValue ?? "__local__"}
+                        onValueChange={(v) => setFieldValue(timezonePath, v === "__local__" ? undefined : v)}
+                        renderValue={(v) => {
+                            if (!v || v === "__local__") return "Local timezone";
+                            const tz = TIMEZONES.find(t => t.value === v);
+                            return tz?.label ?? v;
+                        }}
+                        error={Boolean(timezoneError)}
+                        label={"Timezone"}>
+                        <SelectItem value={"__local__"}> Local timezone </SelectItem>
+                        {TIMEZONES.map((tz) => (
+                            <SelectItem key={tz.value} value={tz.value}>
+                                {tz.label}
+                            </SelectItem>
+                        ))}
+                    </Select>
+                    <FieldCaption error={Boolean(timezoneError)}>
+                        {timezoneError ?? "Timezone for displaying and inputting dates. Values are always stored in UTC."}
+                    </FieldCaption>
+                </div>
+
+            </div>
+            
+            <div className={"col-span-12"}>
+                <Select name={columnTypePath}
+                    disabled={disabled}
+                    fullWidth={true}
+                    value={columnTypeValue ?? "_default_"}
+                    onValueChange={(v) => setFieldValue(columnTypePath, v === "_default_" ? undefined : v)}
+                    renderValue={(v) => {
+                        switch (v) {
+                            case "timestamp": return "timestamp (with timezone)";
+                            case "date": return "date";
+                            case "time": return "time";
+                            case "_default_": return "Default (timestamp)";
+                            default: return "Default (timestamp)";
+                        }
+                    }}
+                    error={Boolean(columnTypeError)}
+                    label={"Database Column Type"}>
+                    <SelectItem value={"_default_"}> Default (timestamp) </SelectItem>
+                    <SelectItem value={"timestamp"}> timestamp (with timezone) </SelectItem>
+                    <SelectItem value={"date"}> date </SelectItem>
+                    <SelectItem value={"time"}> time </SelectItem>
+                </Select>
+                <FieldCaption error={Boolean(columnTypeError)}>
+                    {columnTypeError ?? "Optional database override for this date field."}
+                </FieldCaption>
+            </div>
+
+            <div className={"col-span-12"}>
+                <ValidationPanel>
+                    <GeneralPropertyValidation disabled={disabled} />
+                </ValidationPanel>
+            </div>
+        </>
+    );
+}

package/src/collection_editor/ui/collection_editor/properties/EnumPropertyField.tsx

@@ -0,0 +1,124 @@
+import React, { useMemo } from "react";
+import { getIn, useFormex } from "@rebasepro/formex";
+import { useSnackbarController } from "@rebasepro/core";
+import { EnumValueConfig } from "@rebasepro/types";
+import { resolveEnumValues } from "@rebasepro/common";
+import { Select, SelectItem } from "@rebasepro/ui";
+import { EnumForm } from "../EnumForm";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { PropertyWithId } from "../PropertyEditView";
+
+export function EnumPropertyField({
+    multiselect,
+    updateIds,
+    disabled,
+    showErrors,
+    allowDataInference,
+    getData,
+    propertyNamespace
+}: {
+    multiselect: boolean;
+    updateIds: boolean;
+    disabled: boolean;
+    showErrors: boolean;
+    allowDataInference?: boolean;
+    getData?: () => Promise<object[]>;
+    propertyNamespace?: string;
+}) {
+
+    const {
+        values,
+        setFieldError,
+        setFieldValue
+    } = useFormex<PropertyWithId>();
+
+    const snackbarContext = useSnackbarController();
+
+    const enumValuesPath = multiselect ? "of.enum" : "enum";
+
+    const defaultValue = getIn(values, "defaultValue");
+
+    const valuesEnumValues = getIn(values, enumValuesPath);
+    const enumValues: EnumValueConfig[] = useMemo(() => {
+        if (!valuesEnumValues || typeof valuesEnumValues === "boolean")
+            return [] as EnumValueConfig[];
+        return resolveEnumValues(valuesEnumValues) ?? [] as EnumValueConfig[];
+    }, [valuesEnumValues]);
+
+    const onValuesChanged = (value: EnumValueConfig[]) => {
+        if (!values)
+            return;
+        setFieldValue(enumValuesPath, value);
+        if (!multiselect) {
+            const enumIds = value.filter(v => Boolean(v?.id)).map((v: EnumValueConfig) => v.id);
+            if (defaultValue && !enumIds.includes(defaultValue)) {
+                setFieldValue("defaultValue", undefined);
+                snackbarContext.open({
+                    type: "warning",
+                    message: "Default value was cleared"
+                })
+            }
+        }
+    };
+
+    // Build full path including namespace for nested properties (e.g., "address.status")
+    const fullPropertyPath = values.id
+        ? (propertyNamespace ? `${propertyNamespace}.${values.id}` : values.id)
+        : undefined;
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+                <EnumForm enumValues={enumValues}
+                    updateIds={updateIds}
+                    disabled={disabled}
+                    allowDataInference={allowDataInference}
+                    onError={(hasError) => {
+                        setFieldError(enumValuesPath, hasError ? "This enum property is missing some values" : undefined);
+                    }}
+                    getData={getData && fullPropertyPath
+                        ? () => getData()
+                            .then(res => res.map(entry => getIn(entry, fullPropertyPath)).filter(Boolean))
+                        : undefined}
+                    onValuesChanged={onValuesChanged} />
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    {!multiselect &&
+                        <StringPropertyValidation disabled={disabled}
+                            showErrors={showErrors} />}
+                    {multiselect &&
+                        <ArrayPropertyValidation disabled={disabled} />}
+                </ValidationPanel>
+
+            </div>
+
+            {!multiselect && <div className={"col-span-12"}>
+
+                <Select
+                    disabled={disabled}
+                    position={"item-aligned"}
+                    fullWidth={true}
+                    onValueChange={(value: string) => {
+                        setFieldValue("defaultValue", value);
+                    }}
+                    label={"Default value"}
+                    value={defaultValue ?? ""}>
+                    {enumValues
+                        .filter((enumValue) => Boolean(enumValue?.id))
+                        .map((enumValue) => (
+                            <SelectItem key={enumValue.id}
+                                value={enumValue.id?.toString()}>
+                                {enumValue.label}
+                            </SelectItem>
+                        ))}
+                </Select>
+
+            </div>}
+        </>
+    );
+}

package/src/collection_editor/ui/collection_editor/properties/KeyValuePropertyField.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
+
+export function KeyValuePropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+                    <GeneralPropertyValidation disabled={disabled}/>
+                </ValidationPanel>
+
+            </div>
+        </>
+    );
+}

package/src/collection_editor/ui/collection_editor/properties/MapPropertyField.tsx

@@ -0,0 +1,150 @@
+import { FieldCaption } from "../../../_cms_internals";
+import React, { useState } from "react";
+;
+import { MapProperty, Property, PropertyConfig } from "@rebasepro/types";
+import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@rebasepro/ui";
+import { PropertyFormDialog } from "../PropertyEditView";
+import { getIn, useFormex } from "@rebasepro/formex";
+import { PropertyTree } from "../PropertyTree";
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
+
+export function MapPropertyField({ disabled, getData, allowDataInference, propertyConfigs }: {
+    disabled: boolean;
+    getData?: () => Promise<object[]>;
+    allowDataInference: boolean;
+    propertyConfigs: Record<string, PropertyConfig>,
+}) {
+
+    const {
+        values,
+        setFieldValue
+    } = useFormex<MapProperty>();
+
+    const [propertyDialogOpen, setPropertyDialogOpen] = useState<boolean>(false);
+    const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();
+    const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState<string | undefined>();
+
+    const propertiesOrder = values.propertiesOrder ?? Object.keys(values.properties ?? {});
+    const onPropertyCreated = ({
+        id,
+        property
+    }: { id?: string, property: Property }) => {
+        if (!id)
+            throw Error();
+        setFieldValue("properties", {
+            ...(values.properties ?? {}),
+            [id]: property
+        }, false);
+
+        const currentPropertiesOrder = values.propertiesOrder ?? Object.keys(values.properties ?? {});
+        const newPropertiesOrder = currentPropertiesOrder.includes(id) ? currentPropertiesOrder : [...currentPropertiesOrder, id];
+        setFieldValue("propertiesOrder", newPropertiesOrder, false);
+
+        setPropertyDialogOpen(false);
+    };
+
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
+        const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
+        if (!fullId)
+            throw Error("collection editor miss config");
+
+        const propertiesPath = idToPropertiesPath(fullId);
+        const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
+
+        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
+
+        setFieldValue(propertiesPath, undefined, false);
+        setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
+
+        setPropertyDialogOpen(false);
+        setSelectedPropertyKey(undefined);
+        setSelectedPropertyNamespace(undefined);
+    };
+
+    const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
+    const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
+
+    const empty = !propertiesOrder || propertiesOrder.length < 1;
+
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
+        setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
+    };
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+                <div className="flex justify-between items-end my-4">
+                    <Typography variant={"subtitle2"}>Properties in this group</Typography>
+                    <Button
+                        onClick={() => setPropertyDialogOpen(true)}
+                        startIcon={<AddIcon />}
+                    >
+                        Add property to {values.name ?? "this group"}
+                    </Button>
+                </div>
+                <Paper className="p-2 pl-8">
+                    <PropertyTree
+                        properties={values.properties ?? {}}
+                        propertiesOrder={propertiesOrder}
+                        errors={{}}
+
+                        onPropertyClick={(propertyKey, namespace) => {
+                            setSelectedPropertyKey(propertyKey);
+                            setSelectedPropertyNamespace(namespace);
+                            setPropertyDialogOpen(true);
+                        }}
+                        onPropertyMove={onPropertyMove} />
+
+                    {empty &&
+                        <Typography variant={"label"}
+                            className="h-full flex items-center justify-center p-4">
+                            Add the first property to this group
+                        </Typography>}
+                </Paper>
+            </div>
+
+            <div className={"col-span-12"}>
+                <BooleanSwitchWithLabel
+                    position={"start"}
+                    size={"medium"}
+                    label="Spread children as columns"
+                    onValueChange={(v) => setFieldValue("spreadChildren", v)}
+                    value={values.spreadChildren ?? false}
+                />
+                <FieldCaption>
+                    Set this flag to true if you want to display the children of this group as individual columns. This
+                    will only work for top level groups.
+                </FieldCaption>
+            </div>
+
+            <PropertyFormDialog
+                inArray={false}
+                forceShowErrors={false}
+                open={propertyDialogOpen}
+                allowDataInference={allowDataInference}
+
+                onCancel={() => {
+                    setPropertyDialogOpen(false);
+                    setSelectedPropertyKey(undefined);
+                    setSelectedPropertyNamespace(undefined);
+                }}
+                onOkClicked={() => {
+                    setPropertyDialogOpen(false);
+                    setSelectedPropertyKey(undefined);
+                    setSelectedPropertyNamespace(undefined);
+                }}
+                getData={getData}
+                onDelete={deleteProperty}
+                propertyKey={selectedPropertyKey}
+                propertyNamespace={selectedPropertyNamespace}
+                property={selectedProperty}
+                existingProperty={Boolean(selectedPropertyKey)}
+                autoUpdateId={!selectedPropertyKey}
+                autoOpenTypeSelect={!selectedPropertyKey}
+                onPropertyChanged={onPropertyCreated}
+                existingPropertyKeys={selectedPropertyKey ? undefined : propertiesOrder}
+                propertyConfigs={propertyConfigs}
+            />
+
+        </>);
+}