@rebasepro/cms 0.17.3 → 0.18.0

package/src/collection_editor/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -1,296 +0,0 @@
-import { DataNewPropertiesMapping } from "../../../../data_import/components/DataNewPropertiesMapping";
-import { getInferenceType } from "../../../../data_import/utils/get_import_inference_type";
-import { ImportConfig } from "../../../../data_import/types";
-import { ImportNewPropertyFieldPreview } from "../../../../data_import/components/ImportNewPropertyFieldPreview";
-import { getIn, useFormex } from "@rebasepro/forms";
-
-import { getFieldConfig, getFieldId } from "../../../../components/field_configs";
-import { PropertyConfigBadge } from "../../../../components/PropertyConfigBadge";
-import { Properties, Property } from "@rebasepro/types";
-import { PropertyConfig, AdminCollection } from "@rebasepro/cms-types";
-import { cls, Container, Select, SelectItem, Tooltip, Typography } from "@rebasepro/ui";
-import React, { useState } from "react";
-import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
-import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
-import { updatePropertyFromWidget } from "../utils/update_property_for_widget";
-import { supportedFields } from "../utils/supported_fields";
-import { buildPropertyFromData } from "@rebasepro/inference";
-
-export function CollectionEditorImportMapping({
-    importConfig,
-    propertyConfigs
-}:
-    {
-        importConfig: ImportConfig,
-        propertyConfigs: Record<string, PropertyConfig>,
-    }) {
-
-    // const {
-    //     values,
-    //     setFieldValue,
-    //     setFieldTouched,
-    //     setValues,
-    //     submitCount
-    // } = useFormex();
-
-    const {
-        setFieldValue,
-        setFieldTouched,
-        values
-    } = useFormex<AdminCollection>();
-    const [selectedProperty, setSelectedProperty] = useState<PropertyWithId | undefined>(undefined);
-
-    const currentPropertiesOrderRef = React.useRef<{
-        [key: string]: string[]
-    }>(values.propertiesOrder ? { "": values.propertiesOrder } : {});
-
-    const propertyKey = selectedProperty ? selectedProperty.id : undefined;
-    const property = selectedProperty || undefined;
-
-    const onPropertyChanged = ({
-        id,
-        property,
-        previousId,
-        namespace
-    }: OnPropertyChangedParams) => {
-
-        const fullId = id ? getFullId(id, namespace) : undefined;
-        const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
-
-        // setSelectedProperty(property);
-        const getCurrentPropertiesOrder = (namespace?: string) => {
-            if (!namespace) return currentPropertiesOrderRef.current[""];
-            return currentPropertiesOrderRef.current[namespace] ?? getIn(values, namespaceToPropertiesOrderPath(namespace));
-        }
-
-        const updatePropertiesOrder = (newPropertiesOrder: string[], namespace?: string) => {
-            const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
-
-            setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
-            currentPropertiesOrderRef.current[namespace ?? ""] = newPropertiesOrder;
-
-        };
-
-        // If the id has changed we need to a little cleanup
-        if (previousId && previousId !== id) {
-            const previousFullId = getFullId(previousId, namespace);
-            const previousPropertyPath = idToPropertiesPath(previousFullId);
-
-            const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
-
-            // replace previousId with id in propertiesOrder
-            const newPropertiesOrder = currentPropertiesOrder
-                .map((p) => p === previousId ? id : p)
-                .filter((p) => p !== undefined) as string[];
-            updatePropertiesOrder(newPropertiesOrder, namespace);
-
-            // replace previousId with id in headersMapping
-            const newHeadersMapping = { ...importConfig.headersMapping };
-            Object.keys(newHeadersMapping).forEach((key) => {
-                if (newHeadersMapping[key] === previousId) {
-                    newHeadersMapping[key] = id ?? "";
-                }
-            });
-            importConfig.setHeadersMapping(newHeadersMapping);
-
-            // if (id) {
-            //     setSelectedPropertyIndex(newPropertiesOrder.indexOf(id));
-            //     setSelectedPropertyKey(id);
-            // }
-            setFieldValue(previousPropertyPath, undefined, false);
-            setFieldTouched(previousPropertyPath, false, false);
-        }
-
-        if (propertyPath) {
-            setFieldValue(propertyPath, property, false);
-            setFieldTouched(propertyPath, true, false);
-        }
-    };
-    const onPropertyTypeChanged = async ({
-        id,
-        importKey,
-        property,
-        namespace
-    }: OnPropertyChangedParams & {
-        importKey: string
-    }) => {
-
-        const fullId = id ? getFullId(id, namespace) : undefined;
-        const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
-
-        // we try to infer the rest of the properties of a property, from the type and the data
-        const propertyData = importConfig.importData.map((d) => getIn(d, importKey));
-        const inferredNewProperty = {
-            ...buildPropertyFromData(propertyData, property, getInferenceType)
-        };
-
-        if (propertyPath) {
-            if (inferredNewProperty) {
-                setFieldValue(propertyPath, inferredNewProperty, false);
-            } else {
-                setFieldValue(propertyPath, property, false);
-            }
-            setFieldTouched(propertyPath, true, false);
-        }
-    };
-
-    return (
-
-        <div className={"overflow-auto my-auto"}>
-            <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
-
-                <Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
-
-                <DataNewPropertiesMapping importConfig={importConfig}
-                    destinationProperties={values.properties as Properties}
-                    buildPropertyView={({
-                        property,
-                        propertyKey,
-                        importKey,
-                        isIdColumn
-                    }) => {
-                        if (isIdColumn) {
-                            return <Typography> This column will be used as ID</Typography>
-                        }
-
-                        return <ImportNewPropertyFieldPreview
-                            property={property}
-                            propertyKey={propertyKey}
-                            onPropertyNameChanged={(propertyKey: string, value: string) => setFieldValue(`properties.${propertyKey}.name`, value, false)}
-                            onEditClick={() => {
-                                if (!propertyKey || !property) return;
-                                setSelectedProperty({
-                                    ...property,
-                                    id: propertyKey
-                                });
-                            }}
-                            propertyTypeView={<PropertySelect property={property}
-                                disabled={false}
-                                onPropertyChanged={(props) => onPropertyTypeChanged({
-                                    ...props,
-                                    importKey
-                                })}
-                                propertyKey={propertyKey}
-                                propertyConfigs={propertyConfigs}/>}
-                        />;
-                    }}/>
-            </Container>
-
-            <PropertyFormDialog
-                open={selectedProperty !== undefined}
-                propertyKey={propertyKey}
-                property={property}
-                inArray={false}
-                autoUpdateId={false}
-                onPropertyChanged={onPropertyChanged}
-                allowDataInference={false}
-
-                onOkClicked={() => {
-                    setSelectedProperty(undefined);
-                }}
-                onCancel={() => {
-                    setSelectedProperty(undefined);
-                }}
-                autoOpenTypeSelect={false}
-                existingProperty={false}
-                propertyConfigs={propertyConfigs}/>
-
-            <div style={{ height: "52px" }}/>
-        </div>
-    );
-
-}
-
-function PropertySelect({
-    property,
-    onPropertyChanged,
-    propertyKey,
-    propertyConfigs,
-    disabled
-}: {
-    property: Property | null,
-    propertyKey: string | null,
-    onPropertyChanged: ({
-        id,
-        property,
-        previousId,
-        namespace
-    }: OnPropertyChangedParams) => void,
-    propertyConfigs: Record<string, PropertyConfig>,
-    disabled?: boolean
-}) {
-
-    const fieldId = property ? getFieldId(property) : null;
-    const widget = property ? getFieldConfig(property, propertyConfigs) : null;
-
-    const [selectOpen, setSelectOpen] = useState(false);
-
-    return <Tooltip title={property && widget ? `${widget?.name} - ${property.type}` : undefined}
-        open={selectOpen ? false : undefined}>
-        <Select
-            open={selectOpen}
-            onOpenChange={setSelectOpen}
-            invisible={true}
-            className={"w-full"}
-            disabled={disabled}
-            error={!widget}
-            fullWidth={true}
-            value={fieldId ?? ""}
-            placeholder={"Select a property widget"}
-            position={"item-aligned"}
-            renderValue={(value) => {
-                if (!widget) return null;
-                return <PropertyConfigBadge propertyConfig={widget}/>
-            }}
-            onValueChange={(newSelectedWidgetId) => {
-                const newProperty = updatePropertyFromWidget(property, newSelectedWidgetId, propertyConfigs)
-                if (!propertyKey) return;
-                onPropertyChanged({
-                    id: propertyKey,
-                    property: newProperty,
-                    previousId: propertyKey,
-                    namespace: undefined
-                });
-            }}>
-            {Object.entries(supportedFields).map(([key, widget]) => {
-                return <ImportPropertySelectItem
-                    key={key}
-                    value={key}
-                    optionDisabled={false}
-                    propertyConfig={widget}
-                    existing={false}/>;
-            })
-            }
-        </Select>
-    </Tooltip>;
-}
-
-export interface ImportPropertySelectItemProps {
-    value: string;
-    optionDisabled: boolean;
-    propertyConfig: PropertyConfig;
-    existing: boolean;
-}
-
-export function ImportPropertySelectItem({ value, optionDisabled, propertyConfig, existing }: ImportPropertySelectItemProps) {
-    return <SelectItem value={value}
-        disabled={optionDisabled}
-        className={"flex flex-row items-center"}>
-        <div
-            className={cls(
-                "flex flex-row items-center text-base min-h-[48px]",
-                optionDisabled ? "w-full" : "")}>
-            <div className={"mr-8"}>
-                <PropertyConfigBadge propertyConfig={propertyConfig}/>
-            </div>
-            <div>
-                <div>{propertyConfig.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" : propertyConfig.description}
-                </Typography>
-            </div>
-        </div>
-    </SelectItem>
-}

package/src/collection_editor/ui/collection_editor/import/clean_import_data.ts

@@ -1,57 +0,0 @@
-import { Properties } from "@rebasepro/types";
-import { ImportConfig } from "../../../_cms_internals";
-import { slugify } from "@rebasepro/utils";
-
-export function cleanPropertiesFromImport(properties: Properties, parentSlug = ""): {
-    headersMapping: ImportConfig["headersMapping"],
-    properties: Properties,
-    idColumn?: ImportConfig["idColumn"],
-} {
-
-    const result = Object.keys(properties).reduce((acc, key) => {
-        const property = properties[key];
-        const slug = slugify(key);
-        const fullSlug = parentSlug ? `${parentSlug}.${slug}` : slug;
-
-        if (property.type === "map" && property.properties) {
-            const slugifiedResult = cleanPropertiesFromImport(property.properties as Properties, fullSlug);
-            return {
-                headersMapping: { ...acc.headersMapping,
-[key]: fullSlug },
-                properties: {
-                    ...acc.properties,
-                    [slug]: {
-                        ...property,
-                        properties: slugifiedResult.properties,
-                        propertiesOrder: Object.keys(slugifiedResult.properties)
-                    }
-                }
-            }
-        }
-
-        const updatedProperties = {
-            ...acc.properties,
-            [slug]: property
-        } as Properties;
-
-        const headersMapping = { ...acc.headersMapping,
-[key]: fullSlug } as Record<string, string>;
-
-        return {
-            headersMapping,
-            properties: updatedProperties
-        }
-    }, { headersMapping: {},
-properties: {} });
-
-    const firstKey = Object.keys(result.headersMapping)?.[0];
-    let idColumn: string | undefined;
-    if (firstKey?.includes("id") || firstKey?.includes("key")) {
-        idColumn = firstKey;
-    }
-
-    return {
-        ...result,
-        idColumn
-    };
-}

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

@@ -1,147 +0,0 @@
-import React, { useState } from "react";
-import { Button, Paper, PlusIcon, Typography } from "@rebasepro/ui";
-import { getIn, useFormex } from "@rebasepro/forms";
-import { OnPropertyChangedParams, PropertyFormDialog } from "../PropertyEditView";
-import {
-    getFullId,
-    getFullIdPath,
-    idToPropertiesPath,
-    namespaceToPropertiesOrderPath,
-    namespaceToPropertiesPath
-} from "../util";
-import { PropertyTree } from "../PropertyTree";
-import { ArrayProperty, Property } from "@rebasepro/types";
-import { PropertyConfig } from "@rebasepro/cms-types";
-
-export function BlockPropertyField({
-    disabled,
-    getData,
-    allowDataInference,
-    propertyConfigs
-}: {
-    disabled: boolean;
-    getData?: () => Promise<object[]>;
-    allowDataInference: boolean;
-    propertyConfigs: Record<string, PropertyConfig>,
-}) {
-
-    const {
-        values,
-        setFieldValue
-    } = useFormex<ArrayProperty>();
-
-    const [propertyDialogOpen, setPropertyDialogOpen] = useState<boolean>(false);
-    const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();
-    const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState<string | undefined>();
-
-    const onPropertyChanged = ({
-        id,
-        namespace,
-        property
-    }: OnPropertyChangedParams) => {
-        if (!id)
-            throw Error();
-
-        setFieldValue("oneOf." + getFullIdPath(id, namespace), property, false);
-
-        const currentPropertiesOrder = values.oneOf?.propertiesOrder ?? Object.keys(values.oneOf?.properties ?? {});
-        const newPropertiesOrder = currentPropertiesOrder.includes(id) ? currentPropertiesOrder : [...currentPropertiesOrder, id];
-        setFieldValue("oneOf." + namespaceToPropertiesOrderPath(namespace), newPropertiesOrder, false);
-        setPropertyDialogOpen(false);
-    };
-
-    const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
-    const selectedProperty = selectedPropertyFullId ? getIn(values.oneOf?.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
-
-    const deleteProperty = (propertyKey?: string, namespace?: string) => {
-        const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
-        if (!fullId)
-            throw Error("collection editor miss config");
-
-        setFieldValue(`oneOf.${idToPropertiesPath(fullId)}`, undefined, false);
-        const propertiesOrderPath = `oneOf.${namespaceToPropertiesOrderPath(namespace)}`;
-        const currentPropertiesOrder: string[] = (getIn(values, propertiesOrderPath) as string[] | undefined) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)) as object ?? {});
-        setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
-
-        setPropertyDialogOpen(false);
-        setSelectedPropertyKey(undefined);
-        setSelectedPropertyNamespace(undefined);
-    };
-
-    const addChildButton = <Button
-        autoFocus
-        onClick={() => setPropertyDialogOpen(true)}
-        startIcon={<PlusIcon/>}
-    >
-        Add property to {values.name ?? "this block"}
-    </Button>;
-
-    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
-        setFieldValue(`oneOf.${namespaceToPropertiesOrderPath(namespace)}`, propertiesOrder, false);
-    };
-
-    return (
-        <>
-            <div className={"col-span-12"}>
-                <div className={"flex justify-between items-end mt-8 mb-4"}>
-                    <Typography variant={"subtitle2"}>
-                        Properties in this block
-                    </Typography>
-                    {addChildButton}
-                </div>
-                <Paper className="p-2 pl-8">
-
-                    <PropertyTree
-                        properties={values.oneOf?.properties ?? {}}
-                        propertiesOrder={values.oneOf?.propertiesOrder}
-                        errors={{}}
-
-                        onPropertyClick={disabled
-                            ? undefined
-                            : (propertyKey, namespace) => {
-                                setSelectedPropertyKey(propertyKey);
-                                setSelectedPropertyNamespace(namespace);
-                                setPropertyDialogOpen(true);
-                            }}
-                        onPropertyMove={disabled
-                            ? undefined
-                            : onPropertyMove}/>
-
-                    {!disabled && (values.oneOf?.propertiesOrder?.length === 0) &&
-                        <div className="h-full flex items-center justify-center p-4">
-                            Add the first property to this block
-                        </div>}
-
-                </Paper>
-            </div>
-
-            {!disabled && <PropertyFormDialog
-                inArray={false}
-                forceShowErrors={false}
-                open={propertyDialogOpen}
-                getData={getData}
-                allowDataInference={allowDataInference}
-                onCancel={() => {
-                    setPropertyDialogOpen(false);
-                    setSelectedPropertyKey(undefined);
-                    setSelectedPropertyNamespace(undefined);
-                }}
-                onOkClicked={() => {
-                    setPropertyDialogOpen(false);
-                    setSelectedPropertyKey(undefined);
-                    setSelectedPropertyNamespace(undefined);
-                }}
-
-                onDelete={deleteProperty}
-                propertyKey={selectedPropertyKey}
-                propertyNamespace={selectedPropertyNamespace}
-                property={selectedProperty as Property | undefined}
-                existingProperty={Boolean(selectedPropertyKey)}
-                autoUpdateId={!selectedPropertyKey}
-                autoOpenTypeSelect={!selectedPropertyKey}
-                onPropertyChanged={onPropertyChanged}
-                existingPropertyKeys={selectedPropertyKey ? undefined : values.oneOf?.propertiesOrder}
-                propertyConfigs={propertyConfigs}/>}
-
-        </>);
-}

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

@@ -1,41 +0,0 @@
-import React from "react";
-import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/forms";
-
-import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
-import { ValidationPanel } from "./validation/ValidationPanel";
-import { SwitchControl } from "../SwitchControl";
-
-export function BooleanPropertyField({ disabled }: {
-    disabled: boolean;
-}) {
-    const { values } = useFormex();
-    const defaultValue = getIn(values, "defaultValue");
-
-    return (
-        <>
-            <div className={"col-span-12"}>
-
-                <ValidationPanel>
-                    <GeneralPropertyValidation disabled={disabled}/>
-                </ValidationPanel>
-
-            </div>
-
-            <div className={"col-span-12"}>
-
-                <Field
-                    name={"defaultValue"}>
-                    {({ field, form }: FormexFieldProps) => {
-                        return <SwitchControl
-                            size={"medium"}
-                            label={defaultValue === null || defaultValue === undefined ? "Default value not set" : ("Default value is " + defaultValue.toString())}
-                            disabled={disabled}
-                            allowIndeterminate={true} field={field}
-                            form={form}/>
-                    }}
-                </Field>
-
-            </div>
-        </>
-    );
-}

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

@@ -1,113 +0,0 @@
-import { FieldCaption } from "../../../_cms_internals";
-import { Field, getIn, useFormex } from "@rebasepro/forms";
-import { DebouncedTextField } from "@rebasepro/ui";
-import type { PropertyWithId } from "../PropertyEditView";
-import React from "react";
-import { useTranslation } from "@rebasepro/app";
-;
-import { prettifyIdentifier, toSnakeCase } from "@rebasepro/utils";
-
-type CommonPropertyFieldsProps = {
-    showErrors: boolean,
-    disabledId: boolean,
-    disabled: boolean;
-    isNewProperty: boolean;
-    autoUpdateId: boolean;
-};
-
-export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPropertyFieldsProps>(
-    function CommonPropertyFields({
-        showErrors,
-        disabledId,
-        disabled,
-        autoUpdateId,
-        isNewProperty
-    }, ref) {
-
-        const {
-            errors,
-            values,
-            setFieldValue,
-            setFieldTouched,
-            touched,
-            validate
-        } = useFormex<PropertyWithId>();
-        const { t } = useTranslation();
-
-        const name = "name";
-        const nameError = showErrors && (getIn(errors, name) as string | undefined);
-
-        const id = "id";
-        const idError = showErrors && (getIn(errors, id) as string | undefined);
-
-        const description = "description";
-        const descriptionError = showErrors && (getIn(errors, description) as string | undefined);
-
-        return (
-            <div className={"flex flex-col gap-2 col-span-12"}>
-
-                <div>
-                    <Field
-                        name={name}
-                        inputRef={ref}
-                        as={DebouncedTextField}
-                        value={values[name]}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                            const newNameValue = e.target.value;
-                            const idTouched = getIn(touched, id);
-                            if (!idTouched && autoUpdateId) {
-                                setFieldValue(id, newNameValue ? toSnakeCase(newNameValue) : "", false)
-                            }
-                            setFieldValue(name, newNameValue, true);
-                            setFieldTouched(name, true);
-                        }}
-                        style={{ fontSize: 20 }}
-                        placeholder={t("field_name")}
-                        required
-                        disabled={disabled}
-                        error={Boolean(nameError)}/>
-
-                    <FieldCaption error={Boolean(nameError)}>
-                        {nameError}
-                    </FieldCaption>
-                </div>
-
-                <div>
-                    <DebouncedTextField
-                        name={id}
-                        label={"ID"}
-                        value={values[id]}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-                            const newIdValue = e.target.value;
-                            const nameTouched = getIn(touched, name);
-                            if (!nameTouched && autoUpdateId) {
-                                setFieldValue(name, newIdValue ? prettifyIdentifier(newIdValue) : "")
-                            }
-                            setFieldValue(id, newIdValue, true);
-                            setFieldTouched(id, true);
-                        }}
-                        disabled={disabledId || disabled}
-                        required
-                        size="small"
-                        error={Boolean(idError)}/>
-                    <FieldCaption error={Boolean(idError)}>
-                        {idError}
-                    </FieldCaption>
-                </div>
-
-                <div>
-                    <Field name={description}
-                        as={DebouncedTextField}
-                        label={t("description")}
-                        disabled={disabled}
-                        error={Boolean(descriptionError)}/>
-                    <FieldCaption error={Boolean(descriptionError)}>
-                        {descriptionError}
-                    </FieldCaption>
-                </div>
-
-            </div>
-        );
-
-    }
-);