@rebasepro/core 0.0.1-canary.0

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,144 @@
+import React, { useState } from "react";
+import {
+    Button,
+    CancelIcon,
+    CheckIcon,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    KeyboardArrowDownIcon,
+    Menu,
+    MenuItem,
+    Typography,
+    VisibilityIcon,
+    WarningIcon
+} from "@rebasepro/ui";
+import { FormexController } from "@rebasepro/formex";
+import { useSnackbarController } from "../../hooks";
+import { mergeDeep } from "@rebasepro/common";
+import { flattenKeys, removeEntityFromCache } from "../../util/entity_cache";
+import { Properties } from "@rebasepro/types";
+import { PropertyCollectionView } from "../../components/PropertyCollectionView";
+
+interface LocalChangesMenuProps<M extends Record<string, any>> {
+    cacheKey: string;
+    cachedData: Partial<M>;
+    formex: FormexController<M>;
+    onClearLocalChanges?: () => void;
+    properties: Properties;
+}
+
+export function LocalChangesMenu<M extends Record<string, any>>({
+    cachedData,
+    formex,
+    onClearLocalChanges,
+    cacheKey,
+    properties
+}: LocalChangesMenuProps<M>) {
+
+    const snackbarController = useSnackbarController();
+    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);
+        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: "Local changes applied to the form"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    const handleDiscard = () => {
+        removeEntityFromCache(cacheKey);
+        snackbarController.open({
+            type: "info",
+            message: "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}
+                    >
+                        <WarningIcon size={"smallest"} className={"mr-1 text-yellow-600 dark:text-yellow-400"} />
+                        Unsaved Local changes
+                        <KeyboardArrowDownIcon size={"smallest"} />
+                    </Button>
+                }
+                open={open}
+                onOpenChange={setOpen}
+            >
+                <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
+                    This document was edited locally and has unsaved changes. These local changes will be lost if you
+                    don't apply them.
+                </div>
+                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"} />Preview Changes</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"} />Apply Changes</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"} />Discard Local Changes</MenuItem>
+            </Menu>
+
+            <Dialog
+                open={previewDialogOpen}
+                onOpenChange={setPreviewDialogOpen}
+                maxWidth={"4xl"}
+            >
+                <DialogTitle variant={"h6"}>Preview Local Changes</DialogTitle>
+                <DialogContent className={"my-4"}>
+                    <Typography variant={"body2"} className={"mb-4"}>
+                        These are the local changes that will be applied to the form.
+                    </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)}>Close</Button>
+                    <Button
+                        variant={"filled"}
+                        onClick={() => {
+                            handleApply();
+                            setPreviewDialogOpen(false);
+                        }}
+                    >
+                        Apply changes
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/form/components/StorageItemPreview.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+
+import { PreviewSize, StringProperty } from "@rebasepro/types";
+import { PropertyPreview } from "../../preview";
+
+import { cls, DescriptionIcon, IconButton, paperMixin, RemoveIcon, Tooltip } from "@rebasepro/ui";
+import { ErrorBoundary } from "../../components";
+
+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) {
+
+    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="Remove">
+                        <IconButton
+                            size={"small"}
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                onRemove(value);
+                            }}>
+                            <RemoveIcon size={"small"} />
+                        </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">
+                    <DescriptionIcon 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 "../../hooks";
+import { StorageFieldItem } from "../../util/useStorageUploadController";
+import { ErrorView } from "../../components";
+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);
+
+        storageSource.uploadFile({
+            file,
+            fileName,
+            path: storagePath,
+            metadata
+        })
+            .then(async ({ path, storageUrl }) => {
+                console.debug("Upload successful", path);
+                await onFileUploadComplete(path, 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,105 @@
+import React from "react";
+import { ArrayProperty, FieldProps, Property } from "@rebasepro/types";
+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";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
+
+/**
+ * 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} />
+
+        </>
+    );
+}

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -0,0 +1,163 @@
+import React, { useCallback, useMemo } from "react";
+import { ArrayProperty, Entity, EntityCollection, EntityReference, FieldProps, Property } from "@rebasepro/types";
+import { ReferencePreview } from "../../preview";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
+import { getIconForProperty } from "../../util";
+import { getReferenceFrom } from "@rebasepro/common";
+
+import { useEntitySelectionDialog, useCollectionRegistryController } from "../../hooks";
+import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@rebasepro/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+type ArrayOfReferencesFieldProps = FieldProps<ArrayProperty, EntityReference[]>;
+
+/**
+ * This field allows selecting multiple references.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ArrayOfReferencesFieldBinding({
+    propertyKey,
+    value,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    minimalistView: minimalistViewProp,
+    property,
+    includeDescription,
+    setValue,
+    setFieldValue
+}: ArrayOfReferencesFieldProps) {
+
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
+    const ofProperty = property.of as Property;
+    if (ofProperty.type !== "reference") {
+        throw Error("ArrayOfReferencesField expected a property containing references");
+    }
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const navigationController = useCollectionRegistryController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return ofProperty.path ? navigationController.getCollection(ofProperty.path) : undefined;
+    }, [ofProperty.path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${ofProperty.path}`);
+    }
+
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+        setValue(entities.map(e => getReferenceFrom(e)));
+    }, [setValue]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: true,
+        path: ofProperty.path,
+        collection,
+        onMultipleEntitiesSelected,
+        selectedEntityIds,
+        forceFilter: ofProperty.forceFilter
+    }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    const buildEntry = useCallback(({
+        index,
+        internalId,
+        storedProps,
+        storeProps
+    }: ArrayEntryParams) => {
+        const entryValue = value && value.length > index ? value[index] : undefined;
+        if (!entryValue)
+            return <div>Internal ERROR</div>;
+        return (
+            <ReferencePreview
+                key={internalId}
+                disabled={!ofProperty.path}
+                previewProperties={ofProperty.previewProperties}
+                size={"medium"}
+                onClick={onEntryClick}
+                hover={!disabled}
+                reference={entryValue}
+                includeId={ofProperty.includeId}
+                includeEntityLink={ofProperty.includeEntityLink}
+            />
+        );
+    }, [ofProperty.path, ofProperty.previewProperties, value]);
+
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name ?? propertyKey}
+            className={"h-8 flex grow text-text-secondary dark:text-text-secondary-dark"} />
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
+
+    const body = <>
+        {!collection && <ErrorView
+            error={"The specified collection does not exist. Check console"} />}
+
+        {collection && <div className={"group"}>
+
+            <ArrayContainer droppableId={propertyKey}
+                value={value}
+                disabled={isSubmitting}
+                buildEntry={buildEntry}
+                canAddElements={false}
+                addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
+                newDefaultEntry={property.of && "defaultValue" in property.of ? property.of?.defaultValue : null}
+                onValueChange={(value) => setFieldValue(propertyKey, value)}
+            />
+
+            <Button
+                className="ml-3.5 my-4 justify-center text-left"
+                variant="text"
+                disabled={isSubmitting}
+                onClick={onEntryClick}>
+                <EditIcon size={"small"} />
+                Edit {property.name}
+            </Button>
+        </div>}
+    </>;
+
+    return (
+        <>
+
+            {!minimalistView &&
+                <ExpandablePanel
+                    titleClassName={fieldBackgroundMixin}
+                    innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                    initiallyExpanded={expanded}
+                    title={title}>
+                    {body}
+                </ExpandablePanel>}
+
+            {minimalistView && body}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+}