@rebasepro/admin 0.2.1 → 0.2.4

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -65,7 +65,7 @@ export function MapFieldBinding({
                 .filter(([_, property]) => !isHidden(property))
                 .map(([entryKey, childProperty], index) => {
                     const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.ui?.disabled);
-                    const fieldBindingProps: PropertyFieldBindingProps<any> = {
+                    const fieldBindingProps: PropertyFieldBindingProps<Record<string, unknown>> = {
                         propertyKey: `${propertyKey}.${entryKey}`,
                         disabled: disabled || thisDisabled,
                         property: childProperty,
@@ -133,7 +133,7 @@ export function MapFieldBinding({
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
+const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: Record<string, unknown> | null) => void, value: Record<string, unknown> | undefined) => {
 
     const keys = Object.keys(properties)
         .filter((key) => !value || !(key in value));

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -28,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) {
@@ -74,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

@@ -55,7 +55,7 @@ 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]);
 

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -71,7 +71,7 @@ path });
         throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
     }
 
-    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+    const onSingleEntitySelected = useCallback((e: Entity<Record<string, unknown>> | null) => {
         setValue(e ? String(e.id) : null);
     }, [setValue]);
 

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -53,13 +53,15 @@ 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(() => {
@@ -70,7 +72,7 @@ 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]);
@@ -80,7 +82,7 @@ function ReferenceFieldBindingInternal({
         path: property.path,
         collection,
         onSingleEntitySelected,
-        selectedEntityIds: validValue ? [value.id] : undefined,
+        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.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"

package/src/form/field_bindings/RelationFieldBinding.tsx

@@ -2,7 +2,7 @@ import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
 import type { FieldProps } from "../../types/fields";
 import type { RelationProperty } from "@rebasepro/types";
 import React, { useCallback } from "react";
-import { Entity, getDataSourceCapabilities } from "@rebasepro/types";
+import { Entity, EntityRelation, getDataSourceCapabilities, Relation } from "@rebasepro/types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { EntityPreviewContainer } from "../../components/EntityPreview";
 import { IconForView } from "@rebasepro/core";
@@ -56,7 +56,7 @@ function RelationSelectorBinding({
     setValue,
     relation,
     manyRelation
-}: FieldProps<RelationProperty> & { relation: any; manyRelation: boolean }) {
+}: 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 : [];
@@ -108,7 +108,7 @@ function SingleRelationFieldBinding({
     includeDescription,
     setValue,
     relation
-}: FieldProps<RelationProperty> & { relation: any }) {
+}: FieldProps<RelationProperty> & { relation: Relation | undefined }) {
     const normalizedValue = value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null;
     const validValue = !!normalizedValue;
 
@@ -118,7 +118,7 @@ function SingleRelationFieldBinding({
         throw Error(`Couldn't find the corresponding collection for the relation: ${propertyKey}`);
     }
 
-    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+    const onSingleEntitySelected = useCallback((e: Entity<Record<string, unknown>> | null) => {
         setValue(e ? getRelationFrom(e) : null);
     }, [setValue]);
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -95,7 +95,7 @@ export function RepeatFieldBinding({
     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.ui?.disabled)}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -79,7 +79,7 @@ export function SelectFieldBinding({
                         : null;
                     return setValue(newValue);
                 }}
-                renderValue={(enumKey: any) => {
+                renderValue={(enumKey: string) => {
                     return <EnumValuesChip
                         enumKey={enumKey}
                         enumValues={enumValues}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -47,18 +47,18 @@ const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0
 const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500"
 
 export function StorageUploadFieldBinding({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    autoFocus,
-    minimalistView,
-    property,
-    includeDescription,
-    context,
-    isSubmitting
-}: FieldProps<StringProperty | ArrayProperty>) {
+                                              propertyKey,
+                                              value,
+                                              setValue,
+                                              error,
+                                              showError,
+                                              autoFocus,
+                                              minimalistView,
+                                              property,
+                                              includeDescription,
+                                              context,
+                                              isSubmitting
+                                          }: FieldProps<StringProperty | ArrayProperty>) {
 
     const authController = useAuthController();
 
@@ -79,7 +79,7 @@ export function StorageUploadFieldBinding({
         path: context.path,
         property,
         propertyKey,
-        value,
+        value: value as string | string[] | null,
         storageSource,
         disabled: disabled ?? false,
         onChange: setValue
@@ -87,7 +87,7 @@ export function StorageUploadFieldBinding({
 
     useClearRestoreValue<string | string[]>({
         property,
-        value,
+        value: value as string | string[] | null,
         setValue
     });
 
@@ -118,10 +118,10 @@ export function StorageUploadFieldBinding({
                 multipleFilesSupported={multipleFilesSupported}/>
 
             <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
 
         </>
     );
@@ -134,22 +134,22 @@ interface SortableStorageItemProps {
     name: string;
     metadata?: Record<string, unknown>;
     storagePathBuilder: (file: File) => string;
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>;
     onClear: (clearedStoragePathOrDownloadUrl: string) => void;
     disabled: boolean;
     isSortable: boolean; // Kept for consistency, though dnd-kit handles sortability via context
 }
 
 function SortableStorageItem({
-    id,
-    entry,
-    property,
-    metadata,
-    storagePathBuilder,
-    onFileUploadComplete,
-    onClear,
-    disabled
-}: SortableStorageItemProps) {
+                                 id,
+                                 entry,
+                                 property,
+                                 metadata,
+                                 storagePathBuilder,
+                                 onFileUploadComplete,
+                                 onClear,
+                                 disabled
+                             }: SortableStorageItemProps) {
 
     const {
         attributes,
@@ -218,21 +218,21 @@ function SortableStorageItem({
 }
 
 function FileDropComponent({
-    storage,
-    disabled,
-    onFilesAdded,
-    multipleFilesSupported,
-    autoFocus,
-    internalValue,
-    property,
-    onClear,
-    metadata,
-    storagePathBuilder,
-    onFileUploadComplete,
-    name,
-    helpText,
-    isDndItemDragging
-}: {
+                               storage,
+                               disabled,
+                               onFilesAdded,
+                               multipleFilesSupported,
+                               autoFocus,
+                               internalValue,
+                               property,
+                               onClear,
+                               metadata,
+                               storagePathBuilder,
+                               onFileUploadComplete,
+                               name,
+                               helpText,
+                               isDndItemDragging
+                           }: {
     storage: StorageConfig,
     disabled: boolean,
     onFilesAdded: (acceptedFiles: File[]) => Promise<void>,
@@ -241,9 +241,9 @@ function FileDropComponent({
     internalValue: StorageFieldItem[],
     property: StringProperty,
     onClear: (clearedStoragePathOrDownloadUrl: string) => void,
-    metadata?: any,
+    metadata?: Record<string, unknown>,
     storagePathBuilder: (file: File) => string,
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>,
     name: string,
     helpText: string,
     isDndItemDragging?: boolean
@@ -258,33 +258,33 @@ function FileDropComponent({
         isDragAccept,
         isDragReject
     } = useDropzone({
-        accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
-            ...acc,
-            [ext]: []
-        }), {}) : undefined,
-        disabled: disabled || isDndItemDragging,
-        noDragEventsBubbling: true,
-        maxSize: storage.maxSize,
-        onDrop: onFilesAdded,
-        onDropRejected: (fileRejections) => {
-            for (const fileRejection of fileRejections) {
-                for (const error of fileRejection.errors) {
-                    console.error("Error uploading file: ", error);
-                    if (error.code === "file-too-large") {
-                        snackbarContext.open({
-                            type: "error",
-                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                        });
-                    } else if (error.code === "file-invalid-type") {
-                        snackbarContext.open({
-                            type: "error",
-                            message: "Error uploading file: File type is not supported"
-                        });
+            accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
+                ...acc,
+                [ext]: []
+            }), {}) : undefined,
+            disabled: disabled || isDndItemDragging,
+            noDragEventsBubbling: true,
+            maxSize: storage.maxSize,
+            onDrop: onFilesAdded,
+            onDropRejected: (fileRejections) => {
+                for (const fileRejection of fileRejections) {
+                    for (const error of fileRejection.errors) {
+                        console.error("Error uploading file: ", error);
+                        if (error.code === "file-too-large") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                            });
+                        } else if (error.code === "file-invalid-type") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: "Error uploading file: File type is not supported"
+                            });
+                        }
                     }
                 }
             }
         }
-    }
     );
 
     return (
@@ -336,8 +336,8 @@ function FileDropComponent({
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                    variant={"label"}
-                    className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
+                            variant={"label"}
+                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>
@@ -357,23 +357,23 @@ export interface StorageUploadProps {
     storage: StorageConfig;
     onFilesAdded: (acceptedFiles: File[]) => Promise<void>; // Updated from useStorageUploadController
     storagePathBuilder: (file: File) => string;
-    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: Record<string, unknown>) => Promise<void>;
 }
 
 export function StorageUpload({
-    property,
-    name,
-    value, // This is internalValue from useStorageUploadController
-    setInternalValue,
-    onChange,
-    multipleFilesSupported,
-    onFileUploadComplete,
-    disabled,
-    onFilesAdded,
-    autoFocus,
-    storage,
-    storagePathBuilder
-}: StorageUploadProps) {
+                                  property,
+                                  name,
+                                  value, // This is internalValue from useStorageUploadController
+                                  setInternalValue,
+                                  onChange,
+                                  multipleFilesSupported,
+                                  onFileUploadComplete,
+                                  disabled,
+                                  onFilesAdded,
+                                  autoFocus,
+                                  storage,
+                                  storagePathBuilder
+                              }: StorageUploadProps) {
 
     if (multipleFilesSupported) {
         const arrayProperty = property as ArrayProperty;

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -17,17 +17,17 @@ import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
  * @group Form fields
  */
 export const SwitchFieldBinding = function SwitchFieldBinding({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    autoFocus,
-    disabled,
-    size = "large",
-    property,
-    includeDescription
-}: FieldProps<BooleanProperty>) {
+                                                                  propertyKey,
+                                                                  value,
+                                                                  setValue,
+                                                                  error,
+                                                                  showError,
+                                                                  autoFocus,
+                                                                  disabled,
+                                                                  size = "large",
+                                                                  property,
+                                                                  includeDescription
+                                                              }: FieldProps<BooleanProperty>) {
 
     useClearRestoreValue({
         property,
@@ -40,7 +40,7 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
 
             <PropertyIdCopyTooltip propertyKey={propertyKey}>
                 <BooleanSwitchWithLabel
-                    value={value}
+                    value={value as boolean | null}
                     onValueChange={(v) => setValue(v)}
                     error={showError}
                     className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
@@ -55,10 +55,10 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
             </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
         </>
 
     );

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -26,17 +26,17 @@ import { getIconForProperty } from "../../util/property_utils";
  * @group Form fields
  */
 export function TextFieldBinding<T extends string | number>({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    disabled,
-    autoFocus,
-    property,
-    includeDescription,
-    size = "large"
-}: FieldProps<StringProperty | NumberProperty>) {
+                                                                propertyKey,
+                                                                value,
+                                                                setValue,
+                                                                error,
+                                                                showError,
+                                                                disabled,
+                                                                autoFocus,
+                                                                property,
+                                                                includeDescription,
+                                                                size = "large"
+                                                            }: FieldProps<StringProperty | NumberProperty>) {
 
     let multiline: boolean | undefined;
     let url: boolean | PreviewType | undefined;
@@ -51,6 +51,8 @@ export function TextFieldBinding<T extends string | number>({
         setValue
     });
 
+    const displayValue = (value !== undefined && value !== null) ? String(value) : "";
+
     const handleClearClick = useCallback((e: React.MouseEvent) => {
         e.stopPropagation();
         e.preventDefault();
@@ -89,76 +91,78 @@ export function TextFieldBinding<T extends string | number>({
             title={property.name ?? propertyKey}/>
     );
     return (<>
-        <PropertyIdCopyTooltip propertyKey={propertyKey}>
-            {isMultiline ? (
-                <div className={cls(
-                    "rounded-md relative max-w-full min-h-[64px]",
-                    fieldBackgroundMixin,
-                    fieldBackgroundHoverMixin,
-                    showError && error ? "border border-red-500 dark:border-red-600" : "",
-                    property.ui?.widthPercentage !== undefined ? "mt-8" : undefined
-                )}>
-                    <div className="pointer-events-none absolute top-1 text-xs font-medium px-3 text-text-secondary dark:text-text-secondary-dark">
-                        {label}
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                {isMultiline ? (
+                    <div className={cls(
+                        "rounded-md relative max-w-full min-h-[64px]",
+                        fieldBackgroundMixin,
+                        fieldBackgroundHoverMixin,
+                        showError && error ? "border border-red-500 dark:border-red-600" : "",
+                        property.ui?.widthPercentage !== undefined ? "mt-8" : undefined
+                    )}>
+                        <div
+                            className="pointer-events-none absolute top-1 text-xs font-medium px-3 text-text-secondary dark:text-text-secondary-dark">
+                            {label}
+                        </div>
+                        <TextareaAutosize
+                            value={displayValue}
+                            onChange={onChange}
+                            autoFocus={autoFocus}
+                            disabled={disabled}
+                            className={cls(
+                                "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
+                                disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
+                                showError && error ? "text-red-500 dark:text-red-600" : ""
+                            )}
+                        />
+                        {property.ui?.clearable && (
+                            <div
+                                className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4">
+                                <IconButton onClick={handleClearClick}>
+                                    <XIcon/>
+                                </IconButton>
+                            </div>
+                        )}
                     </div>
-                    <TextareaAutosize
-                        value={value ?? ""}
+                ) : (
+                    <TextField
+                        size={size}
+                        value={displayValue}
                         onChange={onChange}
                         autoFocus={autoFocus}
+                        className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
+                        label={<LabelWithIcon
+                            icon={getIconForProperty(property, "small")}
+                            required={property.validation?.required || property.isId === true}
+                            title={property.name ?? propertyKey}/>}
+                        type={inputType}
                         disabled={disabled}
-                        className={cls(
-                            "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
-                            disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
-                            showError && error ? "text-red-500 dark:text-red-600" : ""
-                        )}
-                    />
-                    {property.ui?.clearable && (
-                        <div className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4">
-                            <IconButton onClick={handleClearClick}>
+                        endAdornment={
+                            property.ui?.clearable && <IconButton
+                                onClick={handleClearClick}>
                                 <XIcon/>
                             </IconButton>
-                        </div>
-                    )}
-                </div>
-            ) : (
-                <TextField
-                    size={size}
-                    value={value ?? ""}
-                    onChange={onChange}
-                    autoFocus={autoFocus}
-                    className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
-                    label={<LabelWithIcon
-                        icon={getIconForProperty(property, "small")}
-                        required={property.validation?.required || property.isId === true}
-                        title={property.name ?? propertyKey}/>}
-                    type={inputType}
-                    disabled={disabled}
-                    endAdornment={
-                        property.ui?.clearable && <IconButton
-                            onClick={handleClearClick}>
-                            <XIcon/>
-                        </IconButton>
-                    }
-                    error={showError ? !!error : undefined}
-                    inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
-            )}
-        </PropertyIdCopyTooltip>
-        <FieldHelperText includeDescription={includeDescription}
-            showError={showError}
-            error={error}
-            disabled={disabled}
-            property={property}/>
+                        }
+                        error={showError ? !!error : undefined}
+                        inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
+                )}
+            </PropertyIdCopyTooltip>
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
 
-        {url && <Collapse
-            className="mt-1 ml-1"
-            in={Boolean(value)}>
-            <PropertyPreview
-                value={value}
-                property={property}
-                size={size}/>
-        </Collapse>}
+            {url && <Collapse
+                className="mt-1 ml-1"
+                in={Boolean(value)}>
+                <PropertyPreview
+                    value={value}
+                    property={property}
+                    size={size}/>
+            </Collapse>}
 
-    </>
+        </>
     );
 
 }