@opensite/ui 1.9.8 → 2.0.0

package/dist/contact-maintenance.js

@@ -1,18 +1,14 @@
 "use client";
 import * as React from 'react';
-import React__default from 'react';
-import { useForm, Form, Field } from '@page-speed/forms';
-import { TextInput as TextInput$1, TextArea as TextArea$1 } from '@page-speed/forms/inputs';
+import React__default, { useMemo } from 'react';
+import { Form } from '@page-speed/forms';
+import { useFileUpload, useContactForm, getColumnSpanClass, DynamicFormField } from '@page-speed/forms/integration';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { submitPageSpeedForm, PageSpeedFormSubmissionError } from '@page-speed/forms/integration';
 
 // components/blocks/contact/contact-maintenance.tsx
-var TextInput = TextInput$1;
-var TextArea = TextArea$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -457,22 +453,6 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function Label({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    LabelPrimitive.Root,
-    {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -848,15 +828,60 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "first_name",
+    type: "text",
+    label: "First Name",
+    placeholder: "John",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "last_name",
+    type: "text",
+    label: "Last Name",
+    placeholder: "Doe",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "john@example.com",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "phone",
+    type: "tel",
+    label: "Phone",
+    placeholder: "+1 (555) 000-0000",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "message",
+    type: "textarea",
+    label: "Message",
+    placeholder: "Your message...",
+    required: true,
+    rows: 4,
+    columnSpan: 12
+  }
+];
 function ContactMaintenance({
   heading,
   description,
-  buttonText,
+  buttonText = "Submit",
   buttonIcon,
   actions,
   actionsSlot,
+  formFields = DEFAULT_FORM_FIELDS,
+  successMessage = "Thank you! Your message has been sent successfully.",
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -864,6 +889,8 @@ function ContactMaintenance({
   cardContentClassName,
   formClassName,
   submitClassName,
+  successMessageClassName,
+  errorMessageClassName,
   background = "white",
   spacing = "xl",
   pattern,
@@ -873,56 +900,27 @@ function ContactMaintenance({
   onSuccess,
   onError
 }) {
-  const form = useForm({
-    initialValues: {
-      first_name: "",
-      last_name: "",
-      email: "",
-      phone: "",
-      message: ""
-    },
-    validationSchema: {
-      first_name: (value) => !value ? "First name is required" : void 0,
-      last_name: (value) => !value ? "Last name is required" : void 0,
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-          return "Please enter a valid email address";
-        return void 0;
-      },
-      phone: (value) => !value ? "Phone is required" : void 0,
-      message: (value) => !value ? "Message is required" : void 0
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
     },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
+    onError,
+    resetOnSuccess: formConfig?.resetOnSuccess !== false,
+    uploadTokens
   });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const actionsContent = React.useMemo(() => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
@@ -960,7 +958,8 @@ function ContactMaintenance({
       pattern,
       patternOpacity,
       className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-4xl", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
@@ -987,80 +986,42 @@ function ContactMaintenance({
           Form,
           {
             form,
-            action: formConfig?.endpoint,
-            method: formMethod,
-            className: cn("space-y-4", formClassName),
+            notificationConfig: {
+              submissionError,
+              successMessage
+            },
+            styleConfig: {
+              formClassName: cn("space-y-4", formClassName),
+              successMessageClassName,
+              errorMessageClassName
+            },
+            formConfig: {
+              endpoint: formConfig?.endpoint,
+              method: formMethod,
+              submissionConfig: formConfig?.submissionConfig
+            },
+            onNewSubmission: () => {
+              resetUpload();
+              resetSubmissionState();
+            },
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                /* @__PURE__ */ jsx(Field, { name: "first_name", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "first-name", children: "First Name" }),
-                  /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      id: "first-name",
-                      placeholder: "John",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "First Name"
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsx(Field, { name: "last_name", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
-                  /* @__PURE__ */ jsx(
-                    TextInput,
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: getColumnSpanClass(field.columnSpan),
+                  children: /* @__PURE__ */ jsx(
+                    DynamicFormField,
                     {
-                      ...field,
-                      id: "last-name",
-                      placeholder: "Doe",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Last Name"
+                      field,
+                      uploadProgress,
+                      onFileUpload: uploadFiles,
+                      onFileRemove: removeFile,
+                      isUploading
                     }
                   )
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsx(Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    ...field,
-                    id: "email",
-                    type: "email",
-                    placeholder: "john@example.com",
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Email"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsx(Field, { name: "phone", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsx(Label, { htmlFor: "phone", children: "Phone" }),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    ...field,
-                    id: "phone",
-                    type: "tel",
-                    placeholder: "+1 (555) 000-0000",
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Phone"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsx(Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsx(Label, { htmlFor: "message", children: "Message" }),
-                /* @__PURE__ */ jsx(
-                  TextArea,
-                  {
-                    ...field,
-                    id: "message",
-                    placeholder: "Your message...",
-                    rows: 4,
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Message"
-                  }
-                )
-              ] }) }),
+                },
+                field.name
+              )) }),
               actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
                 Pressable,
                 {

package/dist/contact-map.cjs

@@ -3,13 +3,11 @@
 
 var React = require('react');
 var forms = require('@page-speed/forms');
-var inputs = require('@page-speed/forms/inputs');
+var integration = require('@page-speed/forms/integration');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var LabelPrimitive = require('@radix-ui/react-label');
-var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,11 +28,8 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 
 // components/blocks/contact/contact-map.tsx
-var TextInput = inputs.TextInput;
-var TextArea = inputs.TextArea;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -479,22 +474,6 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function Label({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    LabelPrimitive__namespace.Root,
-    {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -870,15 +849,60 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "first_name",
+    type: "text",
+    label: "First Name",
+    placeholder: "John",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "last_name",
+    type: "text",
+    label: "Last Name",
+    placeholder: "Doe",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "john@example.com",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "phone",
+    type: "tel",
+    label: "Phone",
+    placeholder: "+1 (555) 000-0000",
+    required: true,
+    columnSpan: 12
+  },
+  {
+    name: "message",
+    type: "textarea",
+    label: "Message",
+    placeholder: "Your message...",
+    required: true,
+    rows: 4,
+    columnSpan: 12
+  }
+];
 function ContactMap({
   heading,
   description,
-  buttonText,
+  buttonText = "Submit",
   buttonIcon,
   actions,
   actionsSlot,
+  formFields = DEFAULT_FORM_FIELDS,
+  successMessage = "Thank you! Your message has been sent successfully.",
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -886,6 +910,8 @@ function ContactMap({
   cardContentClassName,
   formClassName,
   submitClassName,
+  successMessageClassName,
+  errorMessageClassName,
   background = "white",
   spacing = "xl",
   pattern,
@@ -895,56 +921,27 @@ function ContactMap({
   onSuccess,
   onError
 }) {
-  const form = forms.useForm({
-    initialValues: {
-      first_name: "",
-      last_name: "",
-      email: "",
-      phone: "",
-      message: ""
-    },
-    validationSchema: {
-      first_name: (value) => !value ? "First name is required" : void 0,
-      last_name: (value) => !value ? "Last name is required" : void 0,
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-          return "Please enter a valid email address";
-        return void 0;
-      },
-      phone: (value) => !value ? "Phone is required" : void 0,
-      message: (value) => !value ? "Message is required" : void 0
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = integration.useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
     },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await integration.submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof integration.PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
+    onError,
+    resetOnSuccess: formConfig?.resetOnSuccess !== false,
+    uploadTokens
   });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const actionsContent = React__namespace.useMemo(() => {
+  const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
@@ -982,7 +979,8 @@ function ContactMap({
       pattern,
       patternOpacity,
       className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-4xl", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
@@ -1009,80 +1007,42 @@ function ContactMap({
           forms.Form,
           {
             form,
-            action: formConfig?.endpoint,
-            method: formMethod,
-            className: cn("space-y-4", formClassName),
+            notificationConfig: {
+              submissionError,
+              successMessage
+            },
+            styleConfig: {
+              formClassName: cn("space-y-4", formClassName),
+              successMessageClassName,
+              errorMessageClassName
+            },
+            formConfig: {
+              endpoint: formConfig?.endpoint,
+              method: formMethod,
+              submissionConfig: formConfig?.submissionConfig
+            },
+            onNewSubmission: () => {
+              resetUpload();
+              resetSubmissionState();
+            },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "first_name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      id: "first-name",
-                      placeholder: "John",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "First Name"
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "last_name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: integration.getColumnSpanClass(field.columnSpan),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    integration.DynamicFormField,
                     {
-                      ...field,
-                      id: "last-name",
-                      placeholder: "Doe",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Last Name"
+                      field,
+                      uploadProgress,
+                      onFileUpload: uploadFiles,
+                      onFileRemove: removeFile,
+                      isUploading
                     }
                   )
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TextInput,
-                  {
-                    ...field,
-                    id: "email",
-                    type: "email",
-                    placeholder: "john@example.com",
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Email"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "phone", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "phone", children: "Phone" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TextInput,
-                  {
-                    ...field,
-                    id: "phone",
-                    type: "tel",
-                    placeholder: "+1 (555) 000-0000",
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Phone"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TextArea,
-                  {
-                    ...field,
-                    id: "message",
-                    placeholder: "Your message...",
-                    rows: 4,
-                    error: meta.touched && !!meta.error,
-                    "aria-label": "Message"
-                  }
-                )
-              ] }) }),
+                },
+                field.name
+              )) }),
               actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                 Pressable,
                 {