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

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,17 +1,15 @@
-import type { Properties } from "@rebasepro/types";
 import type { FieldProps, PropertyFieldBindingProps } from "../../types/fields";
 import type { MapProperty } from "@rebasepro/types";
 import React from "react";
 ;
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 
 import { ErrorBoundary } from "@rebasepro/ui";
 import { getIconForProperty } from "../../util/property_utils";
 import { isHidden, isReadOnly } from "@rebasepro/common";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@rebasepro/ui";
-import { pick } from "@rebasepro/utils";
+import { cls, ExpandablePanel } from "@rebasepro/ui";
 
 /**
  * Field that renders the children property fields
@@ -35,37 +33,24 @@ export function MapFieldBinding({
     onPropertyChange
 }: FieldProps<MapProperty>) {
 
-    const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
-    const expanded = property.expanded === undefined ? true : property.expanded;
-    const minimalistView = minimalistViewProp || property.minimalistView;
+    const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
+    const minimalistView = minimalistViewProp || property.ui?.minimalistView;
     const { t } = useTranslation();
 
     if (!property.properties) {
-        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
+        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property '${propertyKey}'${property.name ? ` ("${property.name}")` : ""}`);
     }
 
-    let mapProperties: Properties;
-    if (pickOnlySomeKeys) {
-        if (value) {
-            mapProperties = pick(property.properties,
-                ...Object.keys(value)
-                    .filter(key => key in property.properties!)
-            ) as Properties;
-        } else {
-            mapProperties = {};
-        }
-    } else {
-        mapProperties = property.properties;
-    }
+    const mapProperties = property.properties;
 
     const mapFormView = <>
         <div
-            className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+            className={cls("py-1 flex flex-col space-y-2", minimalistView && property.ui?.widthPercentage !== undefined ? "mt-8" : undefined)}>
             {Object.entries(mapProperties)
                 .filter(([_, property]) => !isHidden(property))
                 .map(([entryKey, childProperty], index) => {
-                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
-                    const fieldBindingProps: PropertyFieldBindingProps<any> = {
+                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.ui?.disabled);
+                    const fieldBindingProps: PropertyFieldBindingProps<Record<string, unknown>> = {
                         propertyKey: `${propertyKey}.${entryKey}`,
                         disabled: disabled || thisDisabled,
                         property: childProperty,
@@ -96,7 +81,6 @@ export function MapFieldBinding({
             }
         </div>
 
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
 
     </>
         ;
@@ -105,12 +89,13 @@ export function MapFieldBinding({
         <ErrorBoundary>
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                onExpandedChange={(expanded) => {
+                onExpandedChange={(expanded: boolean) => {
                     onPropertyChange?.({
-                        expanded
+                        ui: { ...property.ui,
+expanded }
                     });
                 }}
-                className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
                 title={<LabelWithIconAndTooltip
                     propertyKey={propertyKey}
@@ -125,7 +110,7 @@ export function MapFieldBinding({
 
             <FieldHelperText includeDescription={includeDescription}
                 showError={showError ?? false}
-                error={error && !partOfArray ? error as any : undefined}
+                error={error && !partOfArray ? error : undefined}
                 disabled={disabled}
                 property={property}/>
 
@@ -133,30 +118,3 @@ export function MapFieldBinding({
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
-
-    const keys = Object.keys(properties)
-        .filter((key) => !value || !(key in value));
-
-    const handleAddProperty = (updatedValue: string | string[]) => {
-        setValue({
-            ...value,
-            [updatedValue as string]: null
-        });
-    };
-
-    if (!keys.length) return <></>;
-
-    return <div className={"m-4"}>
-        <InputLabel>Add property</InputLabel>
-        <Select
-            value={""}
-            fullWidth={true}
-            disabled={disabled}
-            onValueChange={handleAddProperty}
-            renderValue={(key) => (properties as Properties)[key].name || key}>
-            {keys.map((key) => <SelectItem key={key}
-                value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
-        </Select>
-    </div>;
-};

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -1,18 +1,27 @@
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
-import { useAuthController, useStorageSource } from "@rebasepro/core";
+import { useAuthController, useStorageSource } from "@rebasepro/app";
+import { useStorageSources } from "@rebasepro/app";
+import { resolveStorageSource } from "@rebasepro/common";
 import { getIconForProperty } from "../../util/property_utils";
 import type { FieldProps } from "../../types/fields";
 import type { ArrayProperty, StringProperty } from "@rebasepro/types";
-import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, IconButton, Skeleton } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
-import type { RebaseEditorProps } from "../../editor";
+import {
+    cls,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
+    IconButton,
+    Skeleton,
+    XIcon
+} from "@rebasepro/ui";
+import type { RichTextEditorProps } from "../../editor";
 import { resolveStorageFilenameString, resolveStoragePathString } from "@rebasepro/common";
 import { randomString } from "@rebasepro/utils";
 
 // Lazy-load ProseMirror editor + markdown parser/serializer (~300KB)
 // Only fetched when a markdown field is actually rendered.
-const RebaseEditor = lazy(() => import("../../editor").then(m => ({ default: m.RebaseEditor })));
+const RichTextEditor = lazy(() => import("../../editor").then(m => ({ default: m.RichTextEditor })));
 const loadMarkdownUtils = () => import("../../editor/markdown");
 let _markdownUtils: Awaited<ReturnType<typeof loadMarkdownUtils>> | null = null;
 const getMarkdownUtils = async () => {
@@ -22,7 +31,7 @@ const getMarkdownUtils = async () => {
 
 interface MarkdownEditorFieldProps {
     highlight?: { from: number, to: number };
-    editorProps?: Partial<RebaseEditorProps>
+    editorProps?: Partial<RichTextEditorProps>
 }
 
 /**
@@ -77,8 +86,17 @@ export function MarkdownEditorFieldBinding({
     const disabled = disabledProp || isSubmitting;
     const highlight = customProps?.highlight;
     const editorProps = customProps?.editorProps;
-    const storageSource = useStorageSource();
+    const defaultStorageSource = useStorageSource();
     const storage = property.storage;
+    const storageSources = useStorageSources();
+
+    // Resolve the correct storage source for this property.
+    // Mirrors the resolution in useStorageUploadController.
+    const storageSource = useMemo(() => resolveStorageSource({
+        sourceKey: storage?.storageSource,
+        sources: storageSources.sources,
+        defaultSource: defaultStorageSource
+    }), [storage?.storageSource, storageSources.sources, defaultStorageSource]);
 
     const entityValues = context.values;
     const entityId = context.entityId;
@@ -93,7 +111,7 @@ export function MarkdownEditorFieldBinding({
             // Update canonical ref with the proper round-tripped value now that ProseMirror is loaded
             canonicalRef.current = canonicalizeMarkdown(value);
         });
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    }, []);
 
     // Compute the canonical (round-tripped) form of the initial value ONCE.
     // This is what ProseMirror will produce after parse → serialize, so any
@@ -166,7 +184,7 @@ export function MarkdownEditorFieldBinding({
     }, [entityId, entityValues, path, property, propertyKey, storage]);
 
     const editor = <Suspense fallback={<Skeleton height={200} className="w-full rounded-md"/>}>
-        <RebaseEditor
+        <RichTextEditor
         content={value}
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
@@ -204,7 +222,7 @@ export function MarkdownEditorFieldBinding({
                     title={property.name ?? propertyKey}
                     className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
                 <div className="flex-grow"/>
-                {property.clearable && !disabled && (
+                {property.ui?.clearable && !disabled && (
                     <IconButton
                         size="small"
                         onClick={(e) => {

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -7,8 +7,7 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util/property_utils";
 import { enumToObjectEntries, getLabelOrConfigFrom } from "@rebasepro/common";
-import { MultiSelect, MultiSelectItem , iconSize } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import { iconSize, MultiSelect, MultiSelectItem, XIcon } from "@rebasepro/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -29,7 +28,7 @@ export function MultiSelectFieldBinding({
     includeDescription,
     size = "large",
     autoFocus
-}: FieldProps<ArrayProperty, any, any>) {
+}: FieldProps<ArrayProperty, unknown, Record<string, unknown>>) {
 
     const of = property.of;
     if (!of) {
@@ -75,7 +74,7 @@ export function MultiSelectFieldBinding({
                 onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    setValue((value ?? []).filter((v: any) => v !== enumKey));
+                    setValue((value ?? []).filter((v: string | number) => v !== enumKey));
                 }}
             >
                 <XIcon size={iconSize.smallest}/>

package/src/form/field_bindings/MultipleRelationFieldBinding.tsx

@@ -1,16 +1,15 @@
-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 } from "@rebasepro/types";
 import React, { useCallback } from "react";
-import { Entity, getDataSourceCapabilities } from "@rebasepro/types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
 import { getIconForProperty } from "../../util/property_utils";
 import { getRelationFrom, resolveRelationProperty } from "@rebasepro/common";
 
-import { useTranslation, ErrorView } from "@rebasepro/core";
-import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { ErrorView, useTranslation } from "@rebasepro/app";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, PencilIcon, Typography } from "@rebasepro/ui";
 import { RelationPreview } from "../../preview";
 
 /**
@@ -42,7 +41,7 @@ export function MultipleRelationFieldBinding({
     }
 
     const parentCollection = context.collection;
-    const capabilities = parentCollection ? getDataSourceCapabilities(parentCollection.driver) : undefined;
+    const capabilities = parentCollection ? getDataSourceCapabilities(parentCollection.engine) : undefined;
     if (!parentCollection || !capabilities?.supportsRelations || !("relations" in parentCollection) || !parentCollection.relations) {
         throw Error("RelationFieldBinding expected a collection with relations support");
     }
@@ -56,17 +55,17 @@ export function MultipleRelationFieldBinding({
     const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
     const collection = relation.target();
 
-    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<Record<string, unknown>>[]) => {
         setValue(entities.map(e => getRelationFrom(e)));
     }, [setValue]);
 
-    const referenceDialogController = useEntitySelectionDialog({
+    const referenceDialogController = useSelectionDialog({
         multiselect: true,
-        path: collection.slug,
+        path: getCollectionDataPath(collection),
         collection,
         onMultipleEntitiesSelected,
         selectedEntityIds,
-        forceFilter: property.forceFilter
+        fixedFilter: property.fixedFilter
     }
     );
 
@@ -87,7 +86,7 @@ export function MultipleRelationFieldBinding({
         return (
             <RelationPreview
                 key={internalId}
-                previewProperties={property.previewProperties}
+                previewProperties={property.ui?.previewProperties}
                 size={"medium"}
                 onClick={onEntryClick}
                 hover={!disabled}
@@ -96,7 +95,7 @@ export function MultipleRelationFieldBinding({
                 includeEntityLink={property.includeEntityLink}
             />
         );
-    }, [relation, property.previewProperties, value]);
+    }, [relation, property.ui?.previewProperties, value]);
 
     const title = (<>
         <LabelWithIconAndTooltip

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -8,7 +8,7 @@ import { PropertyPreview } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { getIconForProperty } from "../../util/property_utils";
-import { cls, paperMixin } from "@rebasepro/ui";
+import { cls } from "@rebasepro/ui";
 
 /**
  *
@@ -32,6 +32,8 @@ export function ReadOnlyFieldBinding({
     // if (!context.entityId)
     //     throw new Error("ReadOnlyFieldBinding: Entity id is null");
 
+    const skipCardWrapper = property.type === "relation" || property.type === "reference";
+
     return (
 
         <>
@@ -45,7 +47,12 @@ export function ReadOnlyFieldBinding({
             }
 
             <div
-                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                className={cls(
+                    "w-full overflow-x-scroll no-scrollbar flex items-center",
+                    skipCardWrapper
+                        ? ""
+                        : "rounded-lg border border-surface-200 dark:border-surface-700 px-4 md:px-6 min-h-10 opacity-80"
+                )}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -1,16 +1,16 @@
-import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { FieldProps } from "../../types/fields";
 import type { Property, ReferenceProperty } from "@rebasepro/types";
 import React, { useCallback, useMemo } from "react";
 
 import { Entity, EntityReference } from "@rebasepro/types";
-import { ErrorView } from "@rebasepro/core";
+import { ErrorView } from "@rebasepro/app";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
-import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { EntityPreviewContainer } from "../../components/EntityPreviewBinding";
 import { ReferencePreview } from "../../preview";
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import { getIconForProperty } from "../../util/property_utils";
 import { getReferenceFrom } from "@rebasepro/common";
 import { useClearRestoreValue } from "../useClearRestoreValue";
@@ -53,16 +53,18 @@ function ReferenceFieldBindingInternal({
         throw new Error("Property path is required for ReferenceFieldBinding");
     }
 
+    const refValue = value as EntityReference | null | undefined;
+
     useClearRestoreValue({
         property,
         value,
         setValue
     });
 
-    const validValue = value && value.isEntityReference && value.isEntityReference();
+    const validValue = refValue && typeof refValue === "object" && "isEntityReference" in refValue && refValue.isEntityReference();
 
     const collectionRegistryController = useCollectionRegistryController();
-    const collection: EntityCollection | undefined = useMemo(() => {
+    const collection: CollectionConfig | undefined = useMemo(() => {
         return property.path ? collectionRegistryController.getCollection(property.path) : undefined;
     }, [property.path]);
 
@@ -70,18 +72,18 @@ function ReferenceFieldBindingInternal({
         throw Error(`Couldn't find the corresponding collection for the path: ${property.path}`);
     }
 
-    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+    const onSingleEntitySelected = useCallback((e: Entity<Record<string, unknown>> | null) => {
         const ref = e ? getReferenceFrom(e) : null;
         setValue(ref);
     }, [setValue, propertyKey]);
 
-    const referenceDialogController = useEntitySelectionDialog({
+    const referenceDialogController = useSelectionDialog({
         multiselect: false,
         path: property.path,
         collection,
         onSingleEntitySelected,
-        selectedEntityIds: validValue ? [value.id] : undefined,
-        forceFilter: property.forceFilter
+        selectedEntityIds: validValue && refValue ? [refValue.id] : undefined,
+        fixedFilter: property.fixedFilter
     }
     );
 
@@ -104,18 +106,18 @@ function ReferenceFieldBindingInternal({
 
             {collection && <>
 
-                {value && <ReferencePreview
+                {refValue && <ReferencePreview
                     disabled={!property.path}
-                    previewProperties={property.previewProperties}
+                    previewProperties={property.ui?.previewProperties}
                     hover={!disabled}
                     size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
-                    reference={value}
+                    reference={refValue}
                     includeEntityLink={property.includeEntityLink}
                     includeId={property.includeId}
                 />}
 
-                {!value && <div className="justify-center text-left">
+                {!refValue && <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"