@rebasepro/admin 0.0.1-canary.4f204c2

package/src/form/components/FormEntry.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ErrorBoundary } from "@rebasepro/ui";
+
+export function FormEntry({
+                              propertyKey,
+                              widthPercentage = 100,
+                              children
+                          }: {
+    propertyKey: string;
+    widthPercentage?: number;
+    children: React.ReactNode;
+}) {
+    return (
+        <div id={`form_field_${propertyKey}`}
+             className={"relative"}
+             style={{ width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)` }}>
+            <ErrorBoundary>
+                {children}
+            </ErrorBoundary>
+        </div>
+    );
+}

package/src/form/components/FormLayout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cls } from "@rebasepro/ui";
+
+export function FormLayout({
+    children,
+    className
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-8", className)}>
+            {children}
+        </div>
+    );
+}

package/src/form/components/LabelWithIcon.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from "react";
+import { cls } from "@rebasepro/ui";
+
+interface LabelWithIconProps {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
+    ({
+        icon,
+        title,
+        small,
+        className,
+        required
+    }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cls("align-middle inline-flex items-center my-0.5",
+                    small ? "gap-1" : "gap-2",
+                    className)}
+            >
+                {icon}
+                <span
+                    className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""
+                        }`}
+                >
+                    {(title ?? "") + (required ? " *" : "")}
+                </span>
+            </div>
+        );
+    }
+);
+
+LabelWithIcon.displayName = "LabelWithIcon";

package/src/form/components/LabelWithIconAndTooltip.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { LabelWithIcon } from "./LabelWithIcon";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+
+interface LabelWithIconAndTooltip {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+    propertyKey: string
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export function LabelWithIconAndTooltip({
+                                            propertyKey,
+                                            className,
+                                            ...props
+                                        }: LabelWithIconAndTooltip) {
+    return (
+        <PropertyIdCopyTooltip propertyKey={propertyKey} className={className}>
+            <LabelWithIcon {...props}/>
+        </PropertyIdCopyTooltip>
+    );
+}

package/src/form/components/LocalChangesMenu.tsx

@@ -0,0 +1,132 @@
+
+import type { Properties } from "@rebasepro/types";
+import React, { useState } from "react";
+import { Button, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, Menu, MenuItem, Typography , iconSize } from "@rebasepro/ui";
+import { XCircleIcon, CheckIcon, ChevronDownIcon, EyeIcon, AlertTriangleIcon } from "lucide-react";
+import { FormexController } from "@rebasepro/formex";
+import { useSnackbarController, useTranslation } from "@rebasepro/core";
+import { flattenKeys, removeEntityFromCache } from "@rebasepro/core";
+;
+import { PropertyCollectionView } from "../../components/PropertyCollectionView";
+import { mergeDeep } from "@rebasepro/utils";
+
+interface LocalChangesMenuProps<M extends Record<string, unknown>> {
+    cacheKey: string;
+    cachedData: Partial<M>;
+    formex: FormexController<M>;
+    onClearLocalChanges?: () => void;
+    properties: Properties;
+}
+
+export function LocalChangesMenu<M extends Record<string, unknown>>({
+    cachedData,
+    formex,
+    onClearLocalChanges,
+    cacheKey,
+    properties
+}: LocalChangesMenuProps<M>) {
+
+    const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
+    const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
+    const [open, setOpen] = useState(false);
+
+    const handleOpenMenu = () => setOpen(true);
+    const handleCloseMenu = () => setOpen(false);
+
+    const handlePreview = () => {
+        setPreviewDialogOpen(true);
+        handleCloseMenu();
+    };
+
+    const handleApply = () => {
+        const mergedValues = mergeDeep(formex.values, cachedData, true);
+        const touched = { ...formex.touched };
+        const cachedKeys = flattenKeys(cachedData);
+        cachedKeys.forEach((key) => {
+            touched[key] = true;
+        });
+
+        formex.setTouched(touched);
+        formex.setValues(mergedValues);
+        snackbarController.open({
+            type: "info",
+            message: t("local_changes_applied")
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    const handleDiscard = () => {
+        removeEntityFromCache(cacheKey);
+        snackbarController.open({
+            type: "info",
+            message: t("local_changes_discarded")
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    return (
+        <>
+            <Menu
+                trigger={
+                    <Button
+                        size={"small"}
+                        className={
+                            "font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200"
+                        }
+                        onClick={handleOpenMenu}
+                    >
+                        <AlertTriangleIcon size={iconSize.smallest} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
+                        {t("unsaved_local_changes")}
+                        <ChevronDownIcon size={iconSize.smallest}/>
+                    </Button>
+                }
+                open={open}
+                onOpenChange={setOpen}
+            >
+                <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
+                    {t("unsaved_local_changes_description")}
+                </div>
+                <MenuItem dense onClick={handlePreview}><EyeIcon size={iconSize.small}/>{t("preview_changes")}</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={iconSize.small}/>{t("apply_changes")}</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><XCircleIcon size={iconSize.small}/>{t("discard_local_changes")}</MenuItem>
+            </Menu>
+
+            <Dialog
+                open={previewDialogOpen}
+                onOpenChange={setPreviewDialogOpen}
+                maxWidth={"4xl"}
+            >
+                <DialogTitle variant={"h6"}>{t("preview_local_changes")}</DialogTitle>
+                <DialogContent className={"my-4"}>
+                    <Typography variant={"body2"} className={"mb-4"}>
+                        {t("preview_local_changes_description")}
+                    </Typography>
+                    <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
+                        maxHeight: 520,
+                        overflow: "auto"
+                    }}>
+                        <div className="p-4">
+                            <PropertyCollectionView data={cachedData}
+                                properties={properties as Properties}/>
+                        </div>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setPreviewDialogOpen(false)}>{t("close")}</Button>
+                    <Button
+                        variant={"filled"}
+                        onClick={() => {
+                            handleApply();
+                            setPreviewDialogOpen(false);
+                        }}
+                    >
+                        {t("apply_changes")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/form/components/StorageItemPreview.tsx

@@ -0,0 +1,82 @@
+import type { StringProperty } from "@rebasepro/types";
+import React from "react";
+
+import { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { PropertyPreview } from "../../preview";
+
+import { cls, IconButton, paperMixin, Tooltip } from "@rebasepro/ui";
+import { FileTextIcon, MinusIcon } from "lucide-react";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
+
+interface StorageItemPreviewProps {
+    name: string;
+    property: StringProperty;
+    value: string,
+    onRemove: (value: string) => void;
+    size: PreviewSize;
+    disabled: boolean;
+    placeholder?: boolean;
+    className?: string;
+}
+
+export function StorageItemPreview({
+    name,
+    property,
+    value,
+    onRemove,
+    disabled,
+    size,
+    placeholder,
+    className
+}: StorageItemPreviewProps) {
+    const { t } = useTranslation();
+
+    return (
+        <div className={cls(
+            "relative border-box flex items-center justify-center",
+            size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
+            paperMixin,
+            className)}>
+
+            {!placeholder && !disabled &&
+                <div
+                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900">
+
+                    <Tooltip
+                        asChild={true}
+                        title={t("remove")}>
+                        <IconButton
+                            size={"small"}
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                onRemove(value);
+                            }}>
+                            <MinusIcon/>
+                        </IconButton>
+                    </Tooltip>
+                </div>
+            }
+
+            {!placeholder && value &&
+                <ErrorBoundary>
+                    <PropertyPreview propertyKey={name}
+                        value={value}
+                        property={property}
+                        interactive={false}
+                        size={size}/>
+                </ErrorBoundary>
+            }
+
+            {placeholder &&
+                <div
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center w-full h-full">
+                    <FileTextIcon className="text-surface-700 dark:text-surface-300"/>
+                </div>
+            }
+
+        </div>
+    );
+
+}

package/src/form/components/StorageUploadProgress.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback } from "react";
+
+import { useSnackbarController, useStorageSource } from "@rebasepro/core";
+import { StorageFieldItem } from "@rebasepro/core";
+import { ErrorView } from "@rebasepro/core";
+import { cls, paperMixin, Skeleton } from "@rebasepro/ui";
+
+export interface StorageUploadItemProps {
+    storagePath: string;
+    metadata?: any,
+    entry: StorageFieldItem,
+    onFileUploadComplete: (value: string,
+        entry: StorageFieldItem,
+        metadata?: any,
+        uploadedUrl?: string) => Promise<void>;
+    imageSize: number;
+    simple: boolean;
+}
+
+export function StorageUploadProgress({
+    storagePath,
+    entry,
+    metadata,
+    onFileUploadComplete,
+    imageSize,
+    simple
+}: StorageUploadItemProps) {
+
+    const storageSource = useStorageSource();
+
+    const snackbarController = useSnackbarController();
+
+    const [error, setError] = React.useState<Error | undefined>();
+    const [loading, setLoading] = React.useState<boolean>(false);
+    const mounted = React.useRef(false);
+    const uploading = React.useRef(false);
+
+    const upload = useCallback((file: File, fileName?: string) => {
+
+        if (uploading.current) return;
+        uploading.current = true;
+        setError(undefined);
+        setLoading(true);
+
+        const key = storagePath && fileName ? `${storagePath}/${fileName}` : fileName || storagePath || "unnamed";
+        storageSource.putObject({
+            file,
+            key,
+            metadata
+        })
+            .then(async ({ key: resultKey, storageUrl }) => {
+                console.debug("Upload successful", resultKey);
+                await onFileUploadComplete(resultKey, entry, metadata, storageUrl);
+                if (mounted.current)
+                    setLoading(false);
+            })
+            .catch((e) => {
+                console.warn("Upload error", e);
+                if (mounted.current) {
+                    setError(e);
+                    setLoading(false);
+                    snackbarController.open({
+                        type: "error",
+                        message: "Error uploading file: " + e.message
+                    });
+                }
+            })
+            .finally(() => {
+                uploading.current = false;
+            });
+    }, [entry, metadata, onFileUploadComplete, storageSource, storagePath]);
+
+    React.useEffect(() => {
+        mounted.current = true;
+        if (entry.file)
+            upload(entry.file, entry.fileName);
+        return () => {
+            mounted.current = false;
+        };
+    }, [entry.file, entry.fileName, upload]);
+
+    if (simple) {
+        return <div className={`w-${imageSize} h-${imageSize}`}>
+
+            {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
+
+        </div>
+    }
+    return (
+
+        <div className={cls(paperMixin,
+            "p-4 relative border-box flex items-center justify-center",
+            `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
+
+            {loading &&
+                <Skeleton className="w-full h-full"/>}
+
+            {error && <ErrorView title={"Error uploading file"}
+                error={error}/>}
+
+        </div>
+
+    );
+
+}

package/src/form/components/index.tsx

@@ -0,0 +1,5 @@
+export * from "./FieldHelperText";
+export * from "./LabelWithIcon";
+export * from "./LabelWithIconAndTooltip";
+export * from "./FormEntry";
+export * from "./FormLayout";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -0,0 +1,107 @@
+import type { FieldProps } from "../../types/fields";
+import type { ArrayProperty, Property } from "@rebasepro/types";
+import React from "react";
+;
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { ExpandablePanel, Typography } from "@rebasepro/ui";
+import { getArrayResolvedProperties, isReadOnly } from "@rebasepro/common";
+import { getIconForProperty } from "../../util/property_utils";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "@rebasepro/core";
+
+/**
+ * Array field used for custom
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ArrayCustomShapedFieldBinding({
+    propertyKey,
+    value,
+    error,
+    showError,
+    isSubmitting,
+    setValue,
+    setFieldValue,
+    customProps,
+    minimalistView: minimalistViewProp,
+    property,
+    includeDescription,
+    context,
+    disabled
+}: FieldProps<ArrayProperty | ArrayProperty>) {
+
+    const authController = useAuthController();
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
+    const resolvedProperties: Property[] | undefined = getArrayResolvedProperties({
+        propertyValue: value,
+        propertyKey,
+        property,
+        ignoreMissingFields: false,
+        authController
+    })
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name ?? propertyKey}
+            className={"h-8 grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
+
+    const body = (resolvedProperties ?? []).map((childProperty, index) => {
+        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+        const fieldProps = {
+            propertyKey: `${propertyKey}[${index}]`,
+            disabled: disabled || thisDisabled,
+            property: childProperty,
+            includeDescription,
+            context,
+            partOfArray: true,
+            minimalistView: false,
+            autoFocus: false,
+            value,
+            setValue,
+            setFieldValue,
+            customProps
+        } as FieldProps<any>;
+        return <div key={`custom_shaped_array_${index}`} className="pb-4">
+            <PropertyFieldBinding {...fieldProps}/>
+        </div>;
+    });
+
+    return (
+
+        <>
+
+            {!minimalistView &&
+                <ExpandablePanel initiallyExpanded={expanded}
+                    title={title}
+                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                    {body}
+                </ExpandablePanel>}
+
+            {minimalistView && body}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+
+        </>
+    );
+}