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

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -9,7 +9,8 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
 import { isReadOnly } from "@rebasepro/common";
 import { getIconForProperty } from "../../util/property_utils";
-import { useAuthController, useSnackbarController, useStorageSource, useTranslation } from "@rebasepro/core";
+import { useAuthController, useSnackbarController, useStorageSource, useTranslation } from "@rebasepro/app";
+import { StorageSourceContext } from "@rebasepro/app";
 import {
     closestCenter,
     DndContext,
@@ -27,7 +28,7 @@ import {
     useSortable
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { StorageFieldItem, useStorageUploadController } from "@rebasepro/core";
+import { StorageFieldItem, useStorageUploadController } from "@rebasepro/app";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
 import { StorageItemPreview } from "../components/StorageItemPreview";
 import {
@@ -47,23 +48,23 @@ 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();
 
-    const storageSource = useStorageSource(context.collection);
-    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting || context.disabled;
+    const storageSource = useStorageSource();
+    const disabled = isReadOnly(property) || !!property.ui?.disabled || isSubmitting || context.disabled;
 
     const {
         internalValue,
@@ -72,14 +73,15 @@ export function StorageUploadFieldBinding({
         storage,
         onFileUploadComplete,
         storagePathBuilder,
-        multipleFilesSupported
+        multipleFilesSupported,
+        resolvedStorageSource
     } = useStorageUploadController({
         entityValues: context.values,
         entityId: context.entityId,
         path: context.path,
         property,
         propertyKey,
-        value,
+        value: value as string | string[] | null,
         storageSource,
         disabled: disabled ?? false,
         onChange: setValue
@@ -87,7 +89,7 @@ export function StorageUploadFieldBinding({
 
     useClearRestoreValue<string | string[]>({
         property,
-        value,
+        value: value as string | string[] | null,
         setValue
     });
 
@@ -103,25 +105,27 @@ export function StorageUploadFieldBinding({
                     title={property.name ?? propertyKey}
                     className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
-            <StorageUpload
-                value={internalValue}
-                name={propertyKey}
-                disabled={disabled ?? false}
-                autoFocus={autoFocus ?? false}
-                property={property}
-                onChange={setValue}
-                setInternalValue={setInternalValue}
-                onFilesAdded={onFilesAdded}
-                onFileUploadComplete={onFileUploadComplete}
-                storagePathBuilder={storagePathBuilder}
-                storage={storage}
-                multipleFilesSupported={multipleFilesSupported}/>
+            <StorageSourceContext.Provider value={resolvedStorageSource}>
+                <StorageUpload
+                    value={internalValue}
+                    name={propertyKey}
+                    disabled={disabled ?? false}
+                    autoFocus={autoFocus ?? false}
+                    property={property}
+                    onChange={setValue}
+                    setInternalValue={setInternalValue}
+                    onFilesAdded={onFilesAdded}
+                    onFileUploadComplete={onFileUploadComplete}
+                    storagePathBuilder={storagePathBuilder}
+                    storage={storage}
+                    multipleFilesSupported={multipleFilesSupported}/>
+            </StorageSourceContext.Provider>
 
             <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
 
         </>
     );
@@ -134,22 +138,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 +222,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 +245,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 +262,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 +340,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 +361,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;
@@ -481,7 +485,7 @@ export function StorageUpload({
                 onDragStart={handleDragStart}
                 onDragEnd={handleDragEnd}
             >
-                <SortableContext items={value.map(v => v.id)} strategy={horizontalListSortingStrategy}>
+                <SortableContext items={(value ?? []).map(v => v.id)} strategy={horizontalListSortingStrategy}>
                     <FileDropComponent {...fileDropProps}/>
                 </SortableContext>
             </DndContext>

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,10 +40,10 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
 
             <PropertyIdCopyTooltip propertyKey={propertyKey}>
                 <BooleanSwitchWithLabel
-                    value={value}
+                    value={value as boolean | null}
                     onValueChange={(v) => setValue(v)}
                     error={showError}
-                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                    className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}
@@ -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

@@ -2,8 +2,16 @@ import type { FieldProps } from "../../types/fields";
 import type { NumberProperty, StringProperty } from "@rebasepro/types";
 import React, { useCallback } from "react";
 
-import { Collapse, IconButton, TextField, TextareaAutosize, fieldBackgroundHoverMixin, fieldBackgroundMixin, cls } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import {
+    cls,
+    Collapse,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
+    IconButton,
+    TextareaAutosize,
+    TextField,
+    XIcon
+} from "@rebasepro/ui";
 import { PreviewType } from "@rebasepro/types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyPreview } from "../../preview";
@@ -18,23 +26,23 @@ 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;
     if (property.type === "string") {
-        multiline = property.multiline;
-        url = property.url;
+        multiline = property.ui?.multiline;
+        url = property.ui?.url;
     }
 
     useClearRestoreValue({
@@ -43,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();
@@ -71,7 +81,7 @@ export function TextFieldBinding<T extends string | number>({
         inputType = "number";
     } else if (property.type === "string") {
         if (property.email) inputType = "email";
-        else if (property.url) inputType = "url";
+        else if (property.ui?.url) inputType = "url";
     }
 
     const label = (
@@ -81,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.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.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.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.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>}
 
-    </>
+        </>
     );
 
 }

package/src/form/field_bindings/UserSelectFieldBinding.tsx

@@ -19,18 +19,18 @@ type UserSelectProps = FieldProps<StringProperty>;
  * @group Form fields
  */
 export function UserSelectFieldBinding({
-    propertyKey,
-    value,
-    setValue,
-    error,
-    showError,
-    disabled,
-    autoFocus,
-    touched,
-    property,
-    includeDescription,
-    size = "large"
-}: UserSelectProps) {
+                                           propertyKey,
+                                           value,
+                                           setValue,
+                                           error,
+                                           showError,
+                                           disabled,
+                                           autoFocus,
+                                           touched,
+                                           property,
+                                           includeDescription,
+                                           size = "large"
+                                       }: UserSelectProps) {
 
     const selectorSize: "small" | "medium" | undefined = size === "large" ? "medium" : size;
 
@@ -46,20 +46,20 @@ export function UserSelectFieldBinding({
             </PropertyIdCopyTooltip>
 
             <UserSelector
-                value={value ?? null}
+                value={value as string | null | undefined}
                 onValueChange={(userId) => {
                     setValue(userId);
                 }}
                 disabled={disabled}
-                clearable={property.clearable}
+                clearable={property.ui?.clearable}
                 size={selectorSize}
             />
 
             <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
 
         </>
     );