@rebasepro/cms 0.17.3 → 0.18.0

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

@@ -1,250 +0,0 @@
-import { FieldCaption } from "../../../_cms_internals";
-import React from "react";
-import { getIn, useFormex } from "@rebasepro/forms";
-;
-import { NumberProperty, StringProperty } from "@rebasepro/types";
-import { Select, SelectItem } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-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 { t } = useTranslation();
-
-    const modePath = "mode";
-    const modeValue: string | undefined = getIn(values, modePath) as string | undefined;
-    const modeError: string | undefined = (getIn(touched, modePath) && getIn(errors, modePath)) as string | undefined;
-
-    const autoValuePath = "autoValue";
-    const autoValueValue: string | undefined = getIn(values, autoValuePath) as string | undefined;
-    const autoValueError: string | undefined = (getIn(touched, autoValuePath) && getIn(errors, autoValuePath)) as string | undefined;
-
-    const timezonePath = "timezone";
-    const timezoneValue: string | undefined = getIn(values, timezonePath) as string | undefined;
-    const timezoneError: string | undefined = (getIn(touched, timezonePath) && getIn(errors, timezonePath)) as string | undefined;
-
-    const columnTypePath = "columnType";
-    const columnTypeValue: string | undefined = getIn(values, columnTypePath) as string | undefined;
-    const columnTypeError: string | undefined = (getIn(touched, columnTypePath) && getIn(errors, columnTypePath)) as string | undefined;
-
-    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={t("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={t("datetime_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={t("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={t("db_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

@@ -1,126 +0,0 @@
-import React, { useMemo } from "react";
-import { getIn, useFormex } from "@rebasepro/forms";
-import { useTranslation } from "@rebasepro/app";
-import { useSafeSnackbarController } from "../../../useSafeSnackbarController";
-import { EnumValueConfig, EnumValues } 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 type { 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 = useSafeSnackbarController();
-    const { t } = useTranslation();
-
-    const enumValuesPath = multiselect ? "of.enum" : "enum";
-
-    const defaultValue = getIn(values, "defaultValue") as string | number | undefined;
-
-    const valuesEnumValues = getIn(values, enumValuesPath) as EnumValues | undefined;
-    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) as string).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={t("default_value")}
-                    value={defaultValue?.toString() ?? ""}>
-                    {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

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

@@ -1,153 +0,0 @@
-import { FieldCaption } from "../../../_cms_internals";
-import React, { useState } from "react";
-;
-import { MapProperty, Property } from "@rebasepro/types";
-import { PropertyConfig } from "@rebasepro/cms-types";
-import { BooleanSwitchWithLabel, Button, Paper, PlusIcon, Typography } from "@rebasepro/ui";
-import { PropertyFormDialog } from "../PropertyEditView";
-import { getIn, useFormex } from "@rebasepro/forms";
-import { useTranslation } from "@rebasepro/app";
-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 { t } = useTranslation();
-
-    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) as string[] | undefined) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)) as object ?? {});
-
-        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"}>{t("properties_in_this_group")}</Typography>
-                    <Button
-                        onClick={() => setPropertyDialogOpen(true)}
-                        startIcon={<PlusIcon/>}
-                    >
-                        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={t("spread_children_as_columns")}
-                    onValueChange={(v) => setFieldValue("admin.spreadChildren", v)}
-                    value={values.admin?.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 as Property | undefined}
-                existingProperty={Boolean(selectedPropertyKey)}
-                autoUpdateId={!selectedPropertyKey}
-                autoOpenTypeSelect={!selectedPropertyKey}
-                onPropertyChanged={onPropertyCreated}
-                existingPropertyKeys={selectedPropertyKey ? undefined : propertiesOrder}
-                propertyConfigs={propertyConfigs}
-            />
-
-        </>);
-}