@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -0,0 +1,155 @@
+import type { FieldProps } from "../../types/fields";
+import type { NumberProperty, StringProperty } from "@rebasepro/types";
+import React, { useCallback } from "react";
+
+import { CloseIcon, Collapse, IconButton, TextField, TextareaAutosize, fieldBackgroundHoverMixin, fieldBackgroundMixin, cls } from "@rebasepro/ui";
+import { PreviewType } from "@rebasepro/types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { PropertyPreview } from "../../preview";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+import { getIconForProperty } from "../../util/property_utils";
+
+/**
+ * Generic text field.
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function TextFieldBinding<T extends string | number>({
+    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;
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+    }, [setValue]);
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (inputType === "number") {
+            const numberValue = event.target.value ? parseFloat(event.target.value) : undefined;
+            if (numberValue && isNaN(numberValue)) {
+                setValue(null);
+            } else if (numberValue !== undefined && numberValue !== null) {
+                setValue(numberValue as T);
+            } else {
+                setValue(null);
+            }
+        } else {
+            setValue(event.target.value as T);
+        }
+    };
+
+    const isMultiline = Boolean(multiline);
+
+    let inputType: "number" | "email" | "url" | undefined = undefined;
+    if (property.type === "number") {
+        inputType = "number";
+    } else if (property.type === "string") {
+        if (property.email) inputType = "email";
+        else if (property.url) inputType = "url";
+    }
+
+    const label = (
+        <LabelWithIcon
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required || property.isId === true}
+            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}
+                    </div>
+                    <TextareaAutosize
+                        value={value ?? ""}
+                        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.clearable && (
+                        <div className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4">
+                            <IconButton onClick={handleClearClick}>
+                                <CloseIcon />
+                            </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}>
+                            <CloseIcon />
+                        </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} />
+
+        {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

@@ -0,0 +1,98 @@
+import type { FieldProps } from "../../types/fields";
+import type { StringProperty } from "@rebasepro/types";
+import React, { useCallback } from "react";
+
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { getIconForProperty } from "../../util/property_utils";
+import { CloseIcon, cls, IconButton, Select, SelectItem } from "@rebasepro/ui";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+import { useInternalUserManagementController } from "@rebasepro/core";
+import { UserDisplay } from "@rebasepro/core";
+import { User } from "@rebasepro/types";
+
+type UserSelectProps = FieldProps<StringProperty>;
+
+/**
+ * Field binding for selecting a user from the internal user management system.
+ * Renders a select dropdown with user information including name and email.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function UserSelectFieldBinding({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    disabled,
+    autoFocus,
+    touched,
+    property,
+    includeDescription,
+    size = "large"
+}: UserSelectProps) {
+
+    const userManagementContext = useInternalUserManagementController<User>();
+    const users = userManagementContext?.users ?? [];
+    const getUser = userManagementContext?.getUser;
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+    }, [setValue]);
+
+    return (
+        <>
+            <Select
+                value={value !== undefined && value != null ? value.toString() : ""}
+                disabled={disabled}
+                size={size}
+                fullWidth={true}
+                position="item-aligned"
+                inputClassName={cls("w-full")}
+                label={
+                    <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                        <LabelWithIcon
+                            icon={getIconForProperty(property, "small")}
+                            required={property.validation?.required}
+                            title={property.name}
+                            className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
+                        />
+                    </PropertyIdCopyTooltip>}
+                endAdornment={
+                    property.clearable && !disabled && value && <IconButton
+                        size="small"
+                        onClick={handleClearClick}>
+                        <CloseIcon size={"small"} />
+                    </IconButton>
+                }
+                onValueChange={(updatedValue: string) => {
+                    const newValue = updatedValue || null;
+                    return setValue(newValue);
+                }}
+                renderValue={(userId: string) => {
+                    const user = users.find((u: User) => u.uid === userId) || getUser?.(userId) || null;
+                    return <UserDisplay user={user} />;
+                }}
+            >
+                {users && users.map((user: User) => {
+                    return <SelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay user={user} />
+                    </SelectItem>
+                })}
+            </Select>
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+
+        </>
+    );
+}

package/src/form/index.tsx

@@ -0,0 +1,27 @@
+export {
+    EntityForm,
+    zodToFormErrors,
+} from "./EntityForm";
+// EntityFormProps is exported from @rebasepro/types
+
+export { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
+export { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
+export { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
+export { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
+export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
+export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
+export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
+export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
+export { ReferenceAsStringFieldBinding } from "./field_bindings/ReferenceAsStringFieldBinding";
+export { MapFieldBinding } from "./field_bindings/MapFieldBinding";
+export { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
+export { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
+export { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
+export { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
+export { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
+export { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
+
+export * from "./components";
+
+export { PropertyFieldBinding } from "./PropertyFieldBinding";
+export * from "./useClearRestoreValue";

package/src/form/useClearRestoreValue.tsx

@@ -0,0 +1,36 @@
+import type { Property } from "@rebasepro/types";
+import { useEffect, useRef } from "react";
+;
+
+/**
+ * Hook we use to restore a value after it has been cleared
+ * @param property
+ * @param value
+ * @param setValue
+ * @ignore
+ */
+export function useClearRestoreValue<T>({
+    property,
+    value,
+    setValue
+}:
+    {
+        property: Property,
+        value: T | null,
+        setValue: (value: T | null, shouldValidate?: boolean) => void
+    }) {
+
+    const clearedValueRef = useRef<T | null>(null);
+    useEffect(() => {
+        const shouldClearValueIfDisabled = typeof property.disabled === "object" && Boolean(property.disabled.clearOnDisabled);
+        if (shouldClearValueIfDisabled) {
+            if (value != null) {
+                clearedValueRef.current = value;
+                setValue(null);
+            }
+        } else if (clearedValueRef.current) {
+            setValue(clearedValueRef.current);
+            clearedValueRef.current = null;
+        }
+    }, [property]);
+}