@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -0,0 +1,322 @@
+import type { ArrayProperty, StringProperty } from "@rebasepro/types";
+import * as React from "react";
+import { useMemo } from "react";
+
+import { Entity, StorageConfig } from "@rebasepro/types";
+import { PreviewSize } from "../../../types";
+import { useDropzone } from "react-dropzone";
+import { PropertyPreview } from "../../../preview";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { PencilIcon } from "lucide-react";
+import { useSnackbarController, useStorageSource, useTranslation, StorageFieldItem, useStorageUploadController } from "@rebasepro/core";
+import { getThumbnailMeasure } from "../../../preview/util";
+import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
+import { cls, IconButton, Typography } from "@rebasepro/ui";
+import { EntityTableCellActions } from "../internal/EntityTableCellActions";
+
+const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
+const activeDropClasses = "pt-0 border-2 border-solid"
+const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500 bg-green-50 dark:bg-green-900"
+const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500 bg-red-50 dark:bg-red-900"
+
+/**
+ * Field that allows to upload files to Google Cloud Storage.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function TableStorageUpload(props: {
+    propertyKey: string;
+    error: Error | undefined;
+    disabled: boolean;
+    value: string | string[] | null;
+    updateValue: (newValue: (string | string[] | null)) => void;
+    selected: boolean;
+    focused: boolean;
+    property: StringProperty | ArrayProperty;
+    entity: Entity<any>;
+    path: string;
+    previewSize: PreviewSize;
+    openPopup?: (cellRect?: DOMRect) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        propertyKey,
+        error,
+        selected,
+        openPopup,
+        value,
+        disabled,
+        property,
+        entity,
+        path,
+        previewSize,
+        updateValue
+    } = props;
+
+    const storageSource = useStorageSource();
+
+    const {
+        internalValue,
+        setInternalValue,
+        onFilesAdded,
+        storage,
+        onFileUploadComplete,
+        storagePathBuilder,
+        multipleFilesSupported
+    } = useStorageUploadController({
+        entityValues: entity.values,
+        entityId: entity.id,
+        path,
+        property: property as StringProperty,
+        propertyKey,
+        storageSource,
+        onChange: updateValue,
+        value,
+        disabled
+    });
+
+    return (
+
+        <StorageUpload
+            internalValue={internalValue}
+            setInternalValue={setInternalValue}
+            name={propertyKey}
+            disabled={disabled}
+            autoFocus={false}
+            openPopup={openPopup}
+            error={error}
+            selected={selected}
+            property={property}
+            onChange={updateValue}
+            entity={entity}
+            storagePathBuilder={storagePathBuilder}
+            storage={storage}
+            multipleFilesSupported={multipleFilesSupported}
+            onFilesAdded={onFilesAdded}
+            onFileUploadComplete={onFileUploadComplete}
+            previewSize={previewSize}/>
+
+    );
+}
+
+interface StorageUploadProps {
+    internalValue: StorageFieldItem[];
+    setInternalValue: (v: StorageFieldItem[]) => void;
+    name: string;
+    error?: Error;
+    property: StringProperty | ArrayProperty;
+    onChange: (value: string | string[] | null) => void;
+    multipleFilesSupported: boolean;
+    autoFocus: boolean;
+    selected: boolean;
+    disabled: boolean;
+    entity: Entity<any>;
+    previewSize: PreviewSize;
+    storage: StorageConfig;
+    onFilesAdded: (acceptedFiles: File[]) => void;
+    storagePathBuilder: (file: File) => string;
+    openPopup?: (cellRect?: DOMRect) => void;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+}
+
+function StorageUpload({
+    property,
+    name,
+    internalValue,
+    setInternalValue,
+    openPopup,
+    entity,
+    selected,
+    error,
+    onChange,
+    multipleFilesSupported,
+    previewSize: previewSizeInput,
+    disabled,
+    autoFocus,
+    storage,
+    onFilesAdded,
+    onFileUploadComplete,
+    storagePathBuilder
+}: StorageUploadProps) {
+
+    const previewSize = previewSizeInput;
+    if (multipleFilesSupported) {
+        const arrayProperty = property as ArrayProperty;
+        if (Array.isArray(arrayProperty.of)) {
+            throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+        }
+        if (arrayProperty.of) {
+            if (arrayProperty.of.type !== "string") {
+                throw Error("Storage field using array must be of data type string");
+            }
+        } else {
+            throw Error("Storage field using array must be of data type string");
+        }
+    }
+
+    const metadata: any | undefined = storage?.metadata;
+    const hasValue = Boolean(internalValue);
+
+    const snackbarContext = useSnackbarController();
+    const { t } = useTranslation();
+
+    const {
+        open,
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject
+    } = useDropzone({
+        accept: storage.acceptedFiles ? storage.acceptedFiles.map(e => ({ [e]: [] })).reduce((a, b) => ({ ...a,
+...b }), {}) : undefined,
+        disabled,
+        maxSize: storage.maxSize,
+        noClick: true,
+        noKeyboard: true,
+        onDrop: onFilesAdded,
+        onDropRejected: (fileRejections, event) => {
+            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: t("error_uploading_file_size", { maxSize: String(storage.maxSize) })
+                        });
+                    } else if (error.code === "file-invalid-type") {
+                        snackbarContext.open({
+                            type: "error",
+                            message: t("error_uploading_file_type")
+                        });
+                    }
+                }
+            }
+        }
+    }
+    );
+
+    const { ...rootProps } = getRootProps();
+
+    const helpText = multipleFilesSupported
+        ? t("drag_drop_files")
+        : t("drag_drop_file");
+
+    const renderProperty = multipleFilesSupported
+        ? (property as ArrayProperty).of as StringProperty
+        : property as StringProperty;
+
+    const imageSize = useMemo(() => getThumbnailMeasure(previewSize), [previewSize]);
+    const showError = !disabled && error;
+
+    return (
+        <div {...rootProps}
+            className={cls(dropZoneClasses,
+                "relative w-full h-full flex",
+                `justify-${hasValue ? "start" : "center"}`,
+                isDragActive ? activeDropClasses : "",
+                isDragAccept ? acceptDropClasses : "",
+                isDragReject ? rejectDropClasses : ""
+            )}
+        >
+
+            <input autoFocus={autoFocus} {...getInputProps()}/>
+
+            {internalValue.map((entry, index) => {
+                let child;
+                if (entry.storagePathOrDownloadUrl) {
+                    child = (
+                        <TableStorageItemPreview
+                            key={`storage_preview_${index}`}
+                            propertyKey={name}
+                            property={renderProperty}
+                            value={entry.storagePathOrDownloadUrl}
+                            entity={entity}
+                            size={previewSize}/>
+                    );
+                } else if (entry.file) {
+                    child = (
+                        <StorageUploadProgress
+                            key={`storage_progress_${index}`}
+                            entry={entry}
+                            metadata={metadata}
+                            storagePath={storagePathBuilder(entry.file)}
+                            onFileUploadComplete={onFileUploadComplete}
+                            imageSize={imageSize}
+                            simple={true}
+                        />
+                    );
+                }
+
+                return child;
+            })}
+
+            {!internalValue && <div
+                className="grow m-2 max-w-[200px]"
+                onClick={open}>
+                <Typography
+                    className="text-surface-400 dark:text-surface-600"
+                    variant={"body2"}
+                    align={"center"}>
+                    {helpText}
+                </Typography>
+            </div>}
+
+            <EntityTableCellActions
+                showError={showError}
+                disabled={disabled}
+                showExpandIcon={true}
+                selected={selected}
+                openPopup={!disabled ? openPopup : undefined}>
+                <IconButton
+                    color={"inherit"}
+                    size={"small"}
+                    onClick={open}>
+                    <PencilIcon className={"text-surface-500"}/>
+                </IconButton>
+            </EntityTableCellActions>
+
+        </div>
+    );
+
+}
+
+interface TableStorageItemPreviewProps {
+    propertyKey: string;
+    property: StringProperty;
+    value: string,
+    size: PreviewSize;
+    entity: Entity<any>;
+}
+
+export function TableStorageItemPreview({
+    propertyKey,
+    property,
+    value,
+    size,
+    entity
+}: TableStorageItemPreviewProps) {
+
+    return (
+        <div
+            className={"relative p-2 max-w-full"}
+        >
+
+            {value &&
+                <ErrorBoundary>
+                    <PropertyPreview
+                        propertyKey={propertyKey}
+                        value={value}
+                        property={property}
+                        // entity={entity}
+                        size={size}/>
+                </ErrorBoundary>
+            }
+
+        </div>
+    );
+
+}

package/src/components/EntityCollectionTable/fields/VirtualTableDateField.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { cls, DateTimeField, focusedDisabled } from "@rebasepro/ui";
+import { useCustomizationController } from "@rebasepro/core";
+
+export function VirtualTableDateField(props: {
+    name: string;
+    error: Error | undefined;
+    mode?: "date" | "date_time";
+    timezone?: string;
+    internalValue: Date | undefined | null;
+    updateValue: (newValue: (Date | null)) => void;
+    focused: boolean;
+    disabled: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const { locale } = useCustomizationController();
+    const {
+        disabled,
+        error,
+        mode,
+        timezone,
+        internalValue,
+        updateValue
+    } = props;
+
+    return (
+        <DateTimeField
+            value={internalValue ?? undefined}
+            onChange={(dateValue) => updateValue(dateValue ?? null)}
+            invisible={true}
+            inputClassName={cls("w-full h-full", focusedDisabled)}
+            className={cls("w-full h-full", focusedDisabled)}
+            mode={mode}
+            timezone={timezone}
+            locale={locale}
+        />
+    );
+}

package/src/components/EntityCollectionTable/fields/VirtualTableInput.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { useDebouncedCallback, focusedDisabled, TextareaAutosize } from "@rebasepro/ui";
+
+export function VirtualTableInput(props: {
+    error: Error | undefined;
+    value: string;
+    multiline: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (string | null)) => void;
+    onBlur?: () => void;
+}) {
+
+    const ref = React.useRef<HTMLTextAreaElement>(null);
+
+    const {
+        disabled,
+        value,
+        multiline,
+        updateValue,
+        focused
+    } = props;
+
+    const prevValue = useRef<string | null>(value);
+
+    const [internalValue, setInternalValue] = useState<typeof value>(value);
+    const focusedState = useRef<boolean>(false);
+
+    useEffect(() => {
+        if (prevValue.current !== value && value !== internalValue)
+            setInternalValue(value);
+        prevValue.current = value;
+    }, [value]);
+
+    const doUpdate = React.useCallback(() => {
+        const emptyInitialValue = !value;
+        if (emptyInitialValue && !internalValue)
+            return;
+        if (internalValue !== value && internalValue !== prevValue.current) {
+            prevValue.current = internalValue;
+            updateValue(internalValue);
+        }
+    }, [internalValue, updateValue, value]);
+    useDebouncedCallback(internalValue, doUpdate, !focused, 400);
+    useEffect(() => {
+        if (ref.current && focused && !focusedState.current) {
+            focusedState.current = true;
+            ref.current.focus({ preventScroll: true });
+            ref.current.selectionStart = ref.current.value.length;
+            ref.current.selectionEnd = ref.current.value.length;
+        } else {
+            focusedState.current = focused;
+        }
+    }, [focused, ref]);
+
+    return (
+        <TextareaAutosize
+            className={focusedDisabled}
+            ref={ref}
+            style={{
+                padding: 0,
+                margin: 0,
+                width: "100%",
+                color: "unset",
+                fontWeight: "unset",
+                fontSize: "unset",
+                fontFamily: "unset",
+                background: "unset",
+                border: "unset",
+                resize: "none",
+                outline: "none"
+            }}
+            value={internalValue ?? ""}
+            onChange={(evt) => {
+                const newValue = evt.target.value as string;
+                if (multiline || !newValue.endsWith("\n"))
+                    setInternalValue(newValue);
+            }}
+            onFocus={() => {
+                focusedState.current = true;
+            }}
+            onBlur={() => {
+                focusedState.current = false;
+                doUpdate();
+                if (props.onBlur) props.onBlur();
+            }}
+        />
+    );
+}

package/src/components/EntityCollectionTable/fields/VirtualTableNumberInput.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback, cls, focusedDisabled } from "@rebasepro/ui";
+
+export function VirtualTableNumberInput(props: {
+    error: Error | undefined;
+    value: number;
+    align: "right" | "left" | "center";
+    updateValue: (newValue: (number | null)) => void;
+    focused: boolean;
+    disabled: boolean;
+}) {
+
+    const {
+        align,
+        value,
+        updateValue,
+        focused
+    } = props;
+    const propStringValue = (value && typeof value === "number") ? value.toString() : "";
+    const [internalValue, setInternalValue] = useState<string | null>(propStringValue);
+
+    const prevValue = useRef<number | null>(value);
+
+    useEffect(() => {
+        if (prevValue.current !== value && String(value) !== internalValue)
+            setInternalValue(value ? value.toString() : null);
+        prevValue.current = value;
+    }, [value]);
+
+    const doUpdate = React.useCallback(() => {
+        if (internalValue !== propStringValue) {
+            if (internalValue !== undefined && internalValue !== null) {
+                const numberValue = parseFloat(internalValue);
+                if (isNaN(numberValue))
+                    return;
+                if (numberValue !== undefined && numberValue !== null)
+                    updateValue(numberValue);
+            } else {
+                updateValue(null);
+            }
+        }
+
+    }, [internalValue, value]);
+    useDebouncedCallback(internalValue, doUpdate, !focused, 400);
+    useEffect(
+        () => {
+            if (!focused && propStringValue !== internalValue)
+                setInternalValue(value !== undefined && value !== null ? value.toString() : null);
+        },
+        [value, focused]
+    );
+
+    const ref = React.useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const regexp = /^-?[0-9]+[,.]?[0-9]*$/;
+
+    return (
+        <input
+            ref={ref}
+            className={cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-hidden font-normal leading-normal text-unset", focusedDisabled)}
+            style={{
+                textAlign: align
+            }}
+            value={internalValue ?? ""}
+            onChange={(evt) => {
+                const newValue = evt.target.value.replace(",", ".");
+                if (newValue.length === 0)
+                    setInternalValue(null);
+                if (regexp.test(newValue) || newValue.startsWith("-"))
+                    setInternalValue(newValue);
+            }}
+        />
+    );
+}

package/src/components/EntityCollectionTable/fields/VirtualTableSelect.tsx

@@ -0,0 +1,133 @@
+import { EnumValues } from "@rebasepro/types";
+import { EnumValuesChip } from "../../../preview";
+import React, { useCallback, useEffect } from "react";
+import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@rebasepro/ui";
+import { resolveEnumValues } from "@rebasepro/common";
+
+export function VirtualTableSelect(props: {
+    name: string;
+    enumValues: EnumValues;
+    error: Error | undefined;
+    multiple: boolean;
+    disabled: boolean;
+    small: boolean;
+    internalValue: string | number | string[] | number[] | undefined;
+    valueType: "string" | "number";
+    updateValue: (newValue: (string | number | string[] | number[] | null)) => void;
+    focused: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        enumValues,
+        internalValue,
+        disabled,
+        small,
+        focused,
+        updateValue,
+        multiple,
+        valueType
+    } = props;
+
+    const validValue = (Array.isArray(internalValue) && multiple) ||
+        (!Array.isArray(internalValue) && !multiple);
+
+    const ref = React.useRef<HTMLButtonElement>(null);
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current?.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const onChange = useCallback((updatedValue: string | string[]) => {
+        console.trace("onChange");
+        if (valueType === "number") {
+            if (multiple) {
+                const newValue = (updatedValue as string[]).map((v) => parseFloat(v));
+                updateValue(newValue);
+            } else {
+                updateValue(parseFloat(updatedValue as string));
+            }
+        } else if (valueType === "string") {
+            if (!updatedValue)
+                updateValue(null)
+            else
+                updateValue(updatedValue);
+        } else {
+            throw Error("Missing mapping in TableSelect");
+        }
+    }, [multiple, updateValue, valueType]);
+
+    const resolvedEnumValues = resolveEnumValues(enumValues);
+
+    const renderValue = (enumKey?: string | number) => {
+        return <EnumValuesChip
+            key={`${enumKey}`}
+            enumKey={String(enumKey)}
+            enumValues={enumValues}
+            size={small ? "small" : "medium"}/>;
+    };
+
+    // When the dropdown closes (including on escape), restore focus to the trigger
+    const handleOpenChange = useCallback((open: boolean) => {
+        if (!open && ref.current) {
+            // Use setTimeout to ensure focus is restored after Radix finishes its cleanup
+            setTimeout(() => {
+                ref.current?.focus({ preventScroll: true });
+            }, 0);
+        }
+    }, []);
+
+    return (
+        multiple
+            ? <MultiSelect
+                inputRef={ref}
+                className="w-full h-full p-0 bg-transparent outline-none"
+                position={"item-aligned"}
+                disabled={disabled}
+                includeClear={false}
+                useChips={false}
+                value={validValue
+                    ? ((internalValue as (string | number)[]).map(v => v.toString()))
+                    : ([])}
+                onValueChange={onChange}
+                onOpenChange={handleOpenChange}>
+                {resolvedEnumValues?.map((enumConfig) => (
+                    <MultiSelectItem
+                        key={enumConfig.id}
+                        value={String(enumConfig.id)}>
+                        <EnumValuesChip
+                            enumKey={enumConfig.id}
+                            enumValues={enumValues}
+                            size={small ? "small" : "medium"}/>
+                    </MultiSelectItem>
+                ))}
+            </MultiSelect>
+            : <Select
+                inputRef={ref}
+                fullWidth={true}
+                className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
+                inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
+                position={"item-aligned"}
+                disabled={disabled}
+                padding={false}
+                value={validValue
+                    ? internalValue?.toString()
+                    : ""}
+                onValueChange={onChange}
+                onOpenChange={handleOpenChange}
+                renderValue={renderValue}>
+                {resolvedEnumValues?.map((enumConfig) => (
+                    <SelectItem
+                        key={enumConfig.id}
+                        value={String(enumConfig.id)}>
+                        <EnumValuesChip
+                            enumKey={enumConfig.id}
+                            enumValues={enumValues}
+                            size={small ? "small" : "medium"}/>
+                    </SelectItem>
+                ))}
+            </Select>
+
+    );
+}

package/src/components/EntityCollectionTable/fields/VirtualTableSwitch.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import { BooleanSwitch } from "@rebasepro/ui";
+
+export function VirtualTableSwitch(props: {
+    error: Error | undefined;
+    internalValue?: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (boolean | null)) => void;
+}) {
+    const {
+        internalValue,
+        updateValue,
+        focused
+    } = props;
+    const ref = React.useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    return (
+        <BooleanSwitch
+            ref={ref}
+            size={"small"}
+            value={Boolean(internalValue)}
+            onValueChange={updateValue}
+        />
+    );
+}