@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/form/field_bindings/RelationFieldBinding.tsx

@@ -1,184 +1,185 @@
-import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
+import { useSelectionDialog } from "../../hooks/useSelectionDialog";
 import type { FieldProps } from "../../types/fields";
 import type { RelationProperty } from "@rebasepro/types";
+import { Entity, getCollectionDataPath, getDataSourceCapabilities, Relation } from "@rebasepro/types";
 import React, { useCallback } from "react";
-import { Entity, getDataSourceCapabilities } from "@rebasepro/types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
-import { EntityPreviewContainer } from "../../components/EntityPreview";
-import { IconForView } from "@rebasepro/core";
+import { EntityPreviewContainer } from "../../components/EntityPreviewBinding";
+import { ErrorView, IconForView } from "@rebasepro/app";
 import { getIconForProperty } from "../../util/property_utils";
-import { getRelationFrom, resolveRelationProperty, normalizeToEntityRelation } from "@rebasepro/common";
-
-import { ErrorView } from "@rebasepro/core";
+import { getRelationFrom, normalizeToEntityRelation, resolveRelationProperty } from "@rebasepro/common";
 import { cls } from "@rebasepro/ui";
 import { RelationPreview } from "../../preview";
 import { RelationSelector } from "../../components/RelationSelector";
 import { MultipleRelationFieldBinding } from "./MultipleRelationFieldBinding";
 
-export function RelationFieldBinding({
-    propertyKey,
-    value,
-    size,
-    error,
-    showError,
-    disabled,
-    isSubmitting,
-    property,
-    includeDescription,
-    setValue,
-    setFieldValue,
-    context,
-    customProps
-}: FieldProps<RelationProperty>) {
+export function RelationFieldBinding(props: FieldProps<RelationProperty>) {
+    const { property, propertyKey, context } = props;
 
     if (property.type !== "relation") {
         throw Error("RelationFieldBinding expected a property containing a relation");
     }
     const collection = context.collection;
-    const capabilities = collection ? getDataSourceCapabilities(collection.driver) : undefined;
+    const capabilities = collection ? getDataSourceCapabilities(collection.engine) : undefined;
     if (!collection || !capabilities?.supportsRelations || !("relations" in collection) || !collection.relations) {
         throw Error("RelationFieldBinding expected a collection with relations support");
     }
-    const resolvedProperty = resolveRelationProperty(property, collection.relations, propertyKey)
+    const resolvedProperty = resolveRelationProperty(property, collection.relations, propertyKey);
     const relation = resolvedProperty.relation;
 
     const manyRelation = relation?.cardinality === "many";
-
-    // Inline selector mode
-    const widget = property.widget ?? "select";
+    const widget = property.ui?.widget ?? "select";
 
     if (widget === "select" && relation) {
-        const normalizedSingle = (!manyRelation && value && !Array.isArray(value)) ? normalizeToEntityRelation(value) : null;
-        const singleValue = normalizedSingle ?? null;
-        const multipleValue = (manyRelation && Array.isArray(value)) ? value : [];
-
-        const selectorSize: "small" | "medium" | undefined = size === "large" ? "medium" : size;
-
-        return (
-            <div className="">
-                <LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-
-                <RelationSelector
-                    relation={relation}
-                    value={manyRelation ? multipleValue : singleValue}
-                    onValueChange={(newVal) => {
-                        if (manyRelation) {
-                            setValue(Array.isArray(newVal) ? newVal : []);
-                        } else {
-                            setValue(!Array.isArray(newVal) ? (newVal ?? null) : null);
-                        }
-                    }}
-                    disabled={disabled || isSubmitting}
-                    forceFilter={property.forceFilter}
-                    size={selectorSize}
-                />
-
-                <FieldHelperText includeDescription={includeDescription}
-                    showError={showError}
-                    error={error}
-                    disabled={disabled}
-                    property={property}/>
-            </div>
-        );
+        return <RelationSelectorBinding {...props} relation={relation} manyRelation={manyRelation} />;
     }
 
     if (manyRelation) {
-        return <MultipleRelationFieldBinding
-            propertyKey={propertyKey}
-            value={Array.isArray(value) ? value : []}
-            error={error}
-            showError={showError}
-            disabled={disabled}
-            isSubmitting={isSubmitting}
-            property={property}
-            includeDescription={includeDescription}
-            setValue={setValue}
-            setFieldValue={setFieldValue}
-            context={context}
-            customProps={customProps}
-        />
-    } else {
-
-        const normalizedValue = value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null;
-        const validValue = !!normalizedValue;
-
-        const collection = relation?.target();
-
-        if (!collection) {
-            throw Error(`Couldn't find the corresponding collection for the relation: ${propertyKey}`);
-        }
-
-        const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
-            setValue(e ? getRelationFrom(e) : null);
-        }, [setValue]);
-
-        const referenceDialogController = useEntitySelectionDialog({
-            multiselect: false,
-            path: collection.slug,
-            collection,
-            onSingleEntitySelected,
-            selectedEntityIds: validValue && normalizedValue ? [normalizedValue.id] : undefined,
-            forceFilter: property.forceFilter
-        }
-        );
-
-        const onEntryClick = (e: React.SyntheticEvent) => {
-            e.preventDefault();
-            referenceDialogController.open();
-        };
-
-        const usedRelation = Array.isArray(value) ? undefined : normalizedValue ?? undefined;
-        return (
-            <>
-                <LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name ?? propertyKey}
-                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-
-                {!collection && <ErrorView
-                    error={"The specified collection does not exist. Check console"}/>}
-
-                {collection && <>
-
-                    {usedRelation && <RelationPreview
-                        disabled={!usedRelation}
-                        previewProperties={property.previewProperties}
-                        hover={!disabled}
-                        size={size}
-                        onClick={disabled || isSubmitting ? undefined : onEntryClick}
-                        relation={usedRelation}
-                        includeEntityLink={property.includeEntityLink}
-                        includeId={property.includeId}
-                    />}
-
-                    {!value && <div className="justify-center text-left">
-                        <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
-                            disabled || isSubmitting
-                                ? "text-surface-accent-500"
-                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
-                            onClick={onEntryClick}
-                            size={"medium"}>
-                            <IconForView collectionOrView={collection}
-                                className={"text-surface-300 dark:text-surface-600"}/>
-                            {`Edit ${property.name}`.toUpperCase()}
-                        </EntityPreviewContainer>
-                    </div>}
-                </>}
-
-                <FieldHelperText includeDescription={includeDescription}
-                    showError={showError}
-                    error={error}
-                    disabled={disabled}
-                    property={property}/>
-
-            </>
-        );
+        return <MultipleRelationFieldBinding {...props} />;
     }
+
+    return <SingleRelationFieldBinding {...props} relation={relation} />;
+}
+
+function RelationSelectorBinding({
+    propertyKey,
+    value,
+    size,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    property,
+    includeDescription,
+    setValue,
+    relation,
+    manyRelation
+}: FieldProps<RelationProperty> & { relation: Relation; manyRelation: boolean }) {
+    const normalizedSingle = (!manyRelation && value && !Array.isArray(value)) ? normalizeToEntityRelation(value) : null;
+    const singleValue = normalizedSingle ?? null;
+    const multipleValue = (manyRelation && Array.isArray(value)) ? value : [];
+
+    const selectorSize: "small" | "medium" | undefined = size === "large" ? "medium" : size;
+
+    return (
+        <div className="">
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+
+            <RelationSelector
+                relation={relation}
+                value={manyRelation ? multipleValue : singleValue}
+                onValueChange={(newVal) => {
+                    if (manyRelation) {
+                        setValue(Array.isArray(newVal) ? newVal : []);
+                    } else {
+                        setValue(!Array.isArray(newVal) ? (newVal ?? null) : null);
+                    }
+                }}
+                disabled={disabled || isSubmitting}
+                fixedFilter={property.fixedFilter}
+                size={selectorSize}
+            />
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+        </div>
+    );
+}
+
+function SingleRelationFieldBinding({
+    propertyKey,
+    value,
+    size,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    property,
+    includeDescription,
+    setValue,
+    relation
+}: FieldProps<RelationProperty> & { relation: Relation | undefined }) {
+    const normalizedValue = value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null;
+    const validValue = !!normalizedValue;
+
+    const collection = relation?.target();
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the relation: ${propertyKey}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<Record<string, unknown>> | null) => {
+        setValue(e ? getRelationFrom(e) : null);
+    }, [setValue]);
+
+    const referenceDialogController = useSelectionDialog({
+        multiselect: false,
+        path: getCollectionDataPath(collection),
+        collection,
+        onSingleEntitySelected,
+        selectedEntityIds: validValue && normalizedValue ? [normalizedValue.id] : undefined,
+        fixedFilter: property.fixedFilter
+    });
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    const usedRelation = Array.isArray(value) ? undefined : normalizedValue ?? undefined;
+
+    return (
+        <>
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {usedRelation && <RelationPreview
+                    disabled={!usedRelation}
+                    previewProperties={property.ui?.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    relation={usedRelation}
+                    includeEntityLink={property.includeEntityLink}
+                    includeId={property.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                        disabled || isSubmitting
+                            ? "text-surface-accent-500"
+                            : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                            className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+        </>
+    );
 }

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -10,7 +10,7 @@ import { getIconForProperty } from "../../util/property_utils";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
-import { useAuthController, useTranslation } from "@rebasepro/core";
+import { useAuthController, useTranslation } from "@rebasepro/app";
 import { mergeDeep } from "@rebasepro/utils";
 
 /**
@@ -43,7 +43,7 @@ export function RepeatFieldBinding({
         throw Error("RepeatFieldBinding misconfiguration. Property `type` is not `array`");
     }
 
-    const minimalistView = minimalistViewProp || property.minimalistView;
+    const minimalistView = minimalistViewProp || property.ui?.minimalistView;
 
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
@@ -56,7 +56,7 @@ export function RepeatFieldBinding({
         authController
     })
 
-    const expanded = property.expanded === undefined ? true : property.expanded;
+    const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
     const ofProperty = property.of;
 
     const [lastAddedId, setLastAddedId] = useState<number | undefined>();
@@ -91,19 +91,19 @@ export function RepeatFieldBinding({
         </ErrorBoundary>;
     };
 
-    const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
+    const canAddElements = !property.ui?.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
     const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
         addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
-        value={value ?? []}
+        value={(value as unknown[]) ?? []}
         buildEntry={buildEntry}
         onInternalIdAdded={setLastAddedId}
-        disabled={isSubmitting || Boolean(property.disabled)}
+        disabled={isSubmitting || Boolean(property.ui?.disabled)}
         canAddElements={canAddElements}
         sortable={sortable}
         newDefaultEntry={getDefaultValueFor(property.of)}
         onValueChange={(value) => setFieldValue(propertyKey, value)}
-        className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+        className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
     />;
 
     const title = (<>
@@ -130,7 +130,7 @@ export function RepeatFieldBinding({
 
             <FieldHelperText includeDescription={includeDescription}
                 showError={showError}
-                error={error as any}
+                error={error}
                 disabled={disabled}
                 property={property}/>
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -6,8 +6,7 @@ import React, { useCallback } from "react";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util/property_utils";
-import { cls, IconButton, Select, SelectItem } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import { cls, IconButton, Select, SelectItem, XIcon } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
 import { resolveEnumValues } from "@rebasepro/common";
@@ -68,7 +67,7 @@ export function SelectFieldBinding({
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={
-                    property.clearable && !disabled && <IconButton
+                    property.ui?.clearable && !disabled && <IconButton
                         size="small"
                         onClick={handleClearClick}>
                         <XIcon/>
@@ -80,7 +79,7 @@ export function SelectFieldBinding({
                         : null;
                     return setValue(newValue);
                 }}
-                renderValue={(enumKey: any) => {
+                renderValue={(enumKey: string) => {
                     return <EnumValuesChip
                         enumKey={enumKey}
                         enumValues={enumValues}