@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

package/dist/esm/components/core/Form.js

@@ -0,0 +1,522 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, typeof as _typeof, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useCallback, useState, useId } from 'react';
+import { useForm, FormProvider, Controller } from 'react-hook-form';
+import { cn } from '../../utils/cn.js';
+import Input from './Input.js';
+import Select from './Select.js';
+import DatePicker from './DatePicker.js';
+import Button from './Button.js';
+import Switch from './Switch.js';
+import ColorPicker from './ColorPicker.js';
+
+var _excluded = ["fields", "onSubmit", "defaultValues", "validationSchema", "className", "submitText", "resetText", "submitButtonClass", "resetButtonClass", "showReset", "submitDisabled"],
+  _excluded2 = ["type", "name", "label", "required", "options", "placeholder", "helperText"],
+  _excluded3 = ["onChange", "ref", "value"];
+/**
+ * Error / helper line rendered under Form-owned field markup (textarea,
+ * checkbox, radio, file, switch, color). Mirrors Input / Select / DatePicker:
+ * the error replaces the helper text while present, and the rendered line's
+ * id is what the control's `aria-describedby` points at.
+ */
+var FieldMessage = function FieldMessage(_ref) {
+  var fieldId = _ref.fieldId,
+    error = _ref.error,
+    helperText = _ref.helperText;
+  if (error) {
+    return jsx("p", {
+      id: "".concat(fieldId, "-error"),
+      className: "mt-1 text-sm text-error-500",
+      children: error
+    });
+  }
+  if (helperText) {
+    return jsx("p", {
+      id: "".concat(fieldId, "-helper"),
+      className: "mt-1 text-sm text-muted",
+      children: helperText
+    });
+  }
+  return null;
+};
+var describedByFor = function describedByFor(fieldId, error, helperText) {
+  return error ? "".concat(fieldId, "-error") : helperText ? "".concat(fieldId, "-helper") : undefined;
+};
+var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
+  var _ref2$fields = _ref2.fields,
+    fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+    onSubmit = _ref2.onSubmit,
+    _ref2$defaultValues = _ref2.defaultValues,
+    defaultValues = _ref2$defaultValues === void 0 ? {} : _ref2$defaultValues,
+    validationSchema = _ref2.validationSchema,
+    className = _ref2.className,
+    _ref2$submitText = _ref2.submitText,
+    submitText = _ref2$submitText === void 0 ? "Submit" : _ref2$submitText,
+    _ref2$resetText = _ref2.resetText,
+    resetText = _ref2$resetText === void 0 ? "Reset" : _ref2$resetText,
+    submitButtonClass = _ref2.submitButtonClass,
+    resetButtonClass = _ref2.resetButtonClass,
+    _ref2$showReset = _ref2.showReset,
+    showReset = _ref2$showReset === void 0 ? true : _ref2$showReset,
+    _ref2$submitDisabled = _ref2.submitDisabled,
+    submitDisabled = _ref2$submitDisabled === void 0 ? false : _ref2$submitDisabled,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var methods = useForm({
+    defaultValues: defaultValues,
+    resolver: validationSchema
+  });
+  var handleSubmit = methods.handleSubmit,
+    reset = methods.reset,
+    control = methods.control,
+    _methods$formState = methods.formState,
+    errors = _methods$formState.errors,
+    isSubmitting = _methods$formState.isSubmitting;
+  var handleFormSubmit = useCallback(function (data) {
+    onSubmit === null || onSubmit === void 0 || onSubmit(data);
+  }, [onSubmit]);
+  var handleReset = useCallback(function () {
+    reset(defaultValues);
+  }, [reset, defaultValues]);
+  // NEW: File input preview state
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    filePreviews = _useState2[0],
+    setFilePreviews = _useState2[1];
+  var formId = useId();
+  var renderField = function renderField(field) {
+    var _errors$name;
+    var type = field.type,
+      name = field.name,
+      label = field.label,
+      required = field.required,
+      options = field.options,
+      placeholder = field.placeholder,
+      helperText = field.helperText,
+      fieldProps = _objectWithoutProperties(field, _excluded2);
+    var error = (_errors$name = errors[name]) === null || _errors$name === void 0 ? void 0 : _errors$name.message;
+    // Stable per-field id for Form-owned markup (label <-> control, helper).
+    var fieldId = "".concat(formId, "-").concat(name);
+    var describedBy = describedByFor(fieldId, error, helperText);
+    // `options` is a choice list (array) for select / radio fields, and only
+    // those consume it. A plain-object `options` is the documented escape
+    // hatch for extra component props and is still spread. An array must
+    // never be spread: it leaked index keys ("0", "1", …) as props/attributes.
+    var extraProps = options && _typeof(options) === "object" && !Array.isArray(options) ? options : undefined;
+    var commonProps = _objectSpread2(_objectSpread2({
+      name: name,
+      label: label,
+      required: required,
+      error: error,
+      placeholder: placeholder
+    }, fieldProps), extraProps);
+    switch (type) {
+      case "text":
+      case "email":
+      case "password":
+      case "number":
+      case "tel":
+      case "url":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref3) {
+            var _ref3$field = _ref3.field,
+              onChange = _ref3$field.onChange,
+              value = _ref3$field.value,
+              ref = _ref3$field.ref;
+            return jsx(Input, _objectSpread2({
+              type: type,
+              value: value || "",
+              onChange: onChange,
+              ref: ref,
+              helperText: helperText
+            }, commonProps));
+          }
+        }, name);
+      case "select":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref4) {
+            var _ref4$field = _ref4.field,
+              onChange = _ref4$field.onChange,
+              value = _ref4$field.value,
+              ref = _ref4$field.ref;
+            return jsx(Select, _objectSpread2({
+              value: value,
+              onChange: onChange,
+              ref: ref,
+              options: options,
+              helperText: helperText
+            }, commonProps));
+          }
+        }, name);
+      case "date":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref5) {
+            var _ref5$field = _ref5.field,
+              onChange = _ref5$field.onChange,
+              value = _ref5$field.value,
+              ref = _ref5$field.ref;
+            return jsx(DatePicker, _objectSpread2({
+              value: value,
+              onChange: onChange,
+              ref: ref,
+              helperText: helperText
+            }, commonProps));
+          }
+        }, name);
+      case "textarea":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref6) {
+            var _ref6$field = _ref6.field,
+              onChange = _ref6$field.onChange,
+              value = _ref6$field.value,
+              ref = _ref6$field.ref;
+            return jsxs("div", {
+              className: "w-full",
+              children: [label && jsxs("label", {
+                htmlFor: fieldId,
+                className: "block text-sm font-medium mb-1",
+                children: [label, required && jsx("span", {
+                  className: "text-error-500 ml-1",
+                  children: "*"
+                })]
+              }), jsx("textarea", {
+                ref: ref,
+                id: fieldId,
+                "aria-invalid": error ? true : undefined,
+                "aria-describedby": describedBy,
+                className: cn("flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-primary-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
+                  "border-error-500 focus:ring-error-500": error
+                }),
+                placeholder: placeholder,
+                required: required,
+                rows: fieldProps.rows || 3,
+                value: value || "",
+                onChange: onChange
+              }), jsx(FieldMessage, {
+                fieldId: fieldId,
+                error: error,
+                helperText: helperText
+              })]
+            });
+          }
+        }, name);
+      case "checkbox":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref7) {
+            var _ref7$field = _ref7.field,
+              _onChange = _ref7$field.onChange,
+              value = _ref7$field.value,
+              ref = _ref7$field.ref;
+            return jsxs("div", {
+              className: "w-full",
+              children: [jsxs("div", {
+                className: "flex items-center",
+                children: [jsx("input", {
+                  ref: ref,
+                  id: fieldId,
+                  type: "checkbox",
+                  checked: !!value,
+                  onChange: function onChange(e) {
+                    return _onChange(e.target.checked);
+                  },
+                  "aria-invalid": error ? true : undefined,
+                  "aria-describedby": describedBy,
+                  className: "rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                }), label && jsxs("label", {
+                  htmlFor: fieldId,
+                  className: "ml-2 text-sm",
+                  children: [label, required && jsx("span", {
+                    className: "text-error-500 ml-1",
+                    children: "*"
+                  })]
+                })]
+              }), jsx(FieldMessage, {
+                fieldId: fieldId,
+                error: error,
+                helperText: helperText
+              })]
+            });
+          }
+        }, name);
+      case "radio":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref8) {
+            var _ref8$field = _ref8.field,
+              _onChange2 = _ref8$field.onChange,
+              value = _ref8$field.value,
+              ref = _ref8$field.ref;
+            return jsxs("div", {
+              className: "w-full",
+              children: [label && jsxs("label", {
+                className: "block text-sm font-medium mb-2",
+                children: [label, required && jsx("span", {
+                  className: "text-error-500 ml-1",
+                  children: "*"
+                })]
+              }), jsx("div", {
+                className: "space-y-2",
+                role: "radiogroup",
+                "aria-label": typeof label === "string" ? label : undefined,
+                "aria-describedby": describedBy,
+                children: options === null || options === void 0 ? void 0 : options.map(function (option) {
+                  return jsxs("div", {
+                    className: "flex items-center",
+                    children: [jsx("input", {
+                      ref: ref,
+                      type: "radio",
+                      checked: value === option.value,
+                      onChange: function onChange() {
+                        return _onChange2(option.value);
+                      },
+                      className: "text-primary-600 focus:ring-primary-500"
+                    }), jsx("label", {
+                      className: "ml-2 text-sm",
+                      children: option.label
+                    })]
+                  }, option.value);
+                })
+              }), jsx(FieldMessage, {
+                fieldId: fieldId,
+                error: error,
+                helperText: helperText
+              })]
+            });
+          }
+        }, name);
+      // NEW: File input type
+      case "file":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref9) {
+            var _ref9$field = _ref9.field,
+              _onChange3 = _ref9$field.onChange,
+              ref = _ref9$field.ref,
+              value = _ref9$field.value,
+              field = _objectWithoutProperties(_ref9$field, _excluded3);
+            return jsxs("div", {
+              className: "w-full",
+              children: [label && jsxs("label", {
+                className: "block text-sm font-medium mb-1",
+                children: [label, required && jsx("span", {
+                  className: "text-error-500 ml-1",
+                  children: "*"
+                })]
+              }), jsxs("div", {
+                className: "mt-1 flex items-center",
+                children: [jsxs("label", {
+                  htmlFor: name,
+                  className: cn("cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", {
+                    "border-error-500": error
+                  }),
+                  children: [jsx("svg", {
+                    className: "-ml-1 mr-2 h-5 w-5 text-primary-400",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: jsx("path", {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                    })
+                  }), "Choose File"]
+                }), jsx("input", _objectSpread2(_objectSpread2({}, field), {}, {
+                  id: name,
+                  ref: ref,
+                  type: "file",
+                  "aria-describedby": describedBy,
+                  className: "sr-only",
+                  onChange: function onChange(e) {
+                    var _e$target$files;
+                    var file = (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0];
+                    _onChange3(file);
+                    // Create preview for image files
+                    if (file && file.type.startsWith("image/")) {
+                      var reader = new FileReader();
+                      reader.onloadend = function () {
+                        setFilePreviews(function (prev) {
+                          return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, name, reader.result));
+                        });
+                      };
+                      reader.readAsDataURL(file);
+                    } else {
+                      setFilePreviews(function (prev) {
+                        return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, name, null));
+                      });
+                    }
+                  },
+                  accept: fieldProps.accept,
+                  multiple: fieldProps.multiple
+                })), jsx("span", {
+                  className: "ml-3 text-sm text-primary-500",
+                  children: (value === null || value === void 0 ? void 0 : value.name) || "No file chosen"
+                }), value && jsx("button", {
+                  type: "button",
+                  onClick: function onClick() {
+                    _onChange3(null);
+                    setFilePreviews(function (prev) {
+                      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, name, null));
+                    });
+                  },
+                  className: "ml-3 text-sm text-error-600 hover:text-error-800",
+                  children: "Remove"
+                })]
+              }), filePreviews[name] && jsx("div", {
+                className: "mt-3",
+                children: jsx("img", {
+                  src: filePreviews[name],
+                  alt: "Preview",
+                  className: "h-32 w-32 object-cover rounded"
+                })
+              }), fieldProps.accept && jsxs("p", {
+                className: "mt-1 text-xs text-primary-500",
+                children: ["Accepted: ", fieldProps.accept]
+              }), jsx(FieldMessage, {
+                fieldId: fieldId,
+                error: error,
+                helperText: helperText
+              })]
+            });
+          }
+        }, name);
+      case "switch":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref0) {
+            var _ref0$field = _ref0.field,
+              onChange = _ref0$field.onChange,
+              value = _ref0$field.value,
+              ref = _ref0$field.ref;
+            return jsxs("div", {
+              className: "w-full",
+              children: [jsx(Switch, _objectSpread2({
+                checked: !!value,
+                onChange: onChange,
+                ref: ref,
+                label: label,
+                disabled: fieldProps.disabled,
+                "aria-describedby": describedBy
+              }, commonProps)), jsx(FieldMessage, {
+                fieldId: fieldId,
+                error: error,
+                helperText: helperText
+              })]
+            });
+          }
+        }, name);
+      // Color field: mounts the library ColorPicker. The stored value is the
+      // string ColorPicker emits (`rgb(r, g, b)`, or `rgba(r, g, b, a)` when
+      // alpha < 1); any hex / rgb(a) string is
+      // accepted as a default value.
+      case "color":
+        return jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref1) {
+            var _ref1$field = _ref1.field,
+              onChange = _ref1$field.onChange,
+              value = _ref1$field.value,
+              ref = _ref1$field.ref;
+            return jsxs("div", {
+              className: "w-full",
+              children: [jsx(ColorPicker, {
+                ref: ref,
+                id: fieldId,
+                role: "group",
+                "aria-label": typeof label === "string" ? label : undefined,
+                "aria-describedby": describedBy,
+                value: value || undefined,
+                onChange: onChange,
+                label: jsxs(Fragment, {
+                  children: [label !== null && label !== void 0 ? label : "Pick a color", required && jsx("span", {
+                    className: "text-error-500 ml-1",
+                    children: "*"
+                  })]
+                }),
+                swatches: fieldProps.swatches,
+                showAlpha: fieldProps.showAlpha,
+                size: fieldProps.size,
+                disabled: fieldProps.disabled
+              }), jsx(FieldMessage, {
+                fieldId: fieldId,
+                error: error,
+                helperText: helperText
+              })]
+            });
+          }
+        }, name);
+      case "custom":
+        return fieldProps.render ? jsx(Controller, {
+          name: name,
+          control: control,
+          render: function render(_ref10) {
+            var field = _ref10.field;
+            return fieldProps.render(field);
+          }
+        }, name) : null;
+      default:
+        return null;
+    }
+  };
+  var renderFieldGroup = function renderFieldGroup(group) {
+    if (group.type === "group") {
+      return jsxs("div", {
+        className: "space-y-4",
+        children: [group.title && jsx("h3", {
+          className: "text-lg font-medium text-primary-900",
+          children: group.title
+        }), group.description && jsx("p", {
+          className: "text-sm text-primary-600",
+          children: group.description
+        }), jsx("div", {
+          className: cn("grid gap-4", group.gridCols ? "grid-cols-".concat(group.gridCols) : "grid-cols-1"),
+          children: group.fields.map(renderField)
+        })]
+      }, group.name);
+    }
+    return renderField(group);
+  };
+  return jsx(FormProvider, _objectSpread2(_objectSpread2({}, methods), {}, {
+    children: jsxs("form", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: cn("space-y-6", className),
+      onSubmit: handleSubmit(handleFormSubmit)
+    }, props), {}, {
+      children: [fields.map(renderFieldGroup), jsxs("div", {
+        className: "flex gap-4 pt-4",
+        children: [jsx(Button, {
+          type: "submit",
+          loading: isSubmitting,
+          disabled: isSubmitting || submitDisabled,
+          className: submitButtonClass,
+          children: submitText
+        }), showReset && jsx(Button, {
+          type: "button",
+          variant: "outline",
+          onClick: handleReset,
+          disabled: isSubmitting,
+          className: resetButtonClass,
+          children: resetText
+        })]
+      })]
+    }))
+  }));
+});
+Form.displayName = "Form";
+
+export { Form as default };