@rebasepro/cms 0.0.1-canary.4d4fb3e

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

@@ -0,0 +1,296 @@
+import {
+    DataNewPropertiesMapping,
+    getInferenceType,
+    ImportConfig,
+    ImportNewPropertyFieldPreview
+} from "../../../_cms_internals";
+import { getIn, useFormex } from "@rebasepro/formex";
+
+import { getFieldConfig, getFieldId, PropertyConfigBadge } from "../../../_cms_internals";
+import { EntityCollection, Properties, Property, PropertyConfig } from "@rebasepro/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/schema-inference";
+
+export function CollectionEditorImportMapping({
+    importConfig,
+    propertyConfigs
+}:
+    {
+        importConfig: ImportConfig,
+        propertyConfigs: Record<string, PropertyConfig>,
+    }) {
+
+    // const {
+    //     values,
+    //     setFieldValue,
+    //     setFieldTouched,
+    //     setValues,
+    //     submitCount
+    // } = useFormex();
+
+    const {
+        setFieldValue,
+        setFieldTouched,
+        values
+    } = useFormex<EntityCollection>();
+    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

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

@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { AddIcon, Button, Paper, Typography } from "@rebasepro/ui";
+import { getIn, useFormex } from "@rebasepro/formex";
+import { OnPropertyChangedParams, PropertyFormDialog } from "../PropertyEditView";
+import {
+    getFullId,
+    getFullIdPath,
+    idToPropertiesPath,
+    namespaceToPropertiesOrderPath,
+    namespaceToPropertiesPath
+} from "../util";
+import { PropertyTree } from "../PropertyTree";
+import { ArrayProperty, PropertyConfig } from "@rebasepro/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) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
+        setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
+
+        setPropertyDialogOpen(false);
+        setSelectedPropertyKey(undefined);
+        setSelectedPropertyNamespace(undefined);
+    };
+
+    const addChildButton = <Button
+        autoFocus
+        onClick={() => setPropertyDialogOpen(true)}
+        startIcon={<AddIcon />}
+    >
+        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}
+                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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
+
+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

@@ -0,0 +1,111 @@
+import { FieldCaption } from "../../../_cms_internals";
+import { Field, getIn, useFormex } from "@rebasepro/formex";
+import { DebouncedTextField } from "@rebasepro/ui";
+import { PropertyWithId } from "../PropertyEditView";
+import React from "react";
+;
+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 name = "name";
+        const nameError = showErrors && getIn(errors, name);
+
+        const id = "id";
+        const idError = showErrors && getIn(errors, id);
+
+        const description = "description";
+        const descriptionError = showErrors && getIn(errors, description);
+
+        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={"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={"Description"}
+                        disabled={disabled}
+                        error={Boolean(descriptionError)} />
+                    <FieldCaption error={Boolean(descriptionError)}>
+                        {descriptionError}
+                    </FieldCaption>
+                </div>
+
+            </div>
+        );
+
+    }
+);