@windstream/react-shared-components 0.2.55 → 0.2.56

package/src/contentful/blocks/dynamic-form/field-map.tsx

@@ -0,0 +1,486 @@
+"use client";
+
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { FormContext } from "./context";
+import { FieldRenderProps } from "./types";
+
+import { Checkbox } from "@shared/components/checkbox";
+import { Input } from "@shared/components/input";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { RadioButton } from "@shared/components/radio-button";
+import { Select } from "@shared/components/select";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const formatFormPhoneNumber = (value: string): string => {
+  const phoneNumber = (value || "").replace(/\D/g, "");
+  if (phoneNumber.length <= 3) {
+    return phoneNumber;
+  } else if (phoneNumber.length <= 6) {
+    return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3)}`;
+  } else if (phoneNumber.length <= 9) {
+    return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6)}`;
+  }
+  return `${phoneNumber.slice(0, 3)}-${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 10)}`;
+};
+
+export const labelCreator = (
+  label: string | undefined,
+  required?: boolean,
+  variant = "footnote"
+) => {
+  return (
+    <Text as="div" className={cx(variant, "validation-label mb-1")}>
+      {label}
+      {required ? <span className="text-text-critical">*</span> : null}
+    </Text>
+  );
+};
+
+const TextInputField: React.FC<FieldRenderProps> = args => {
+  const {
+    displayName,
+    formData,
+    textInputType,
+    handleInputChange,
+    fieldId,
+    errorClass,
+  } = args;
+
+  if (textInputType === "phone") {
+    return (
+      <div className="w-full">
+        <Input
+          aria-label={displayName}
+          name={fieldId}
+          type="tel"
+          value={
+            formData[fieldId!] ? formatFormPhoneNumber(formData[fieldId!]) : ""
+          }
+          onChange={handleInputChange}
+          className={cx("w-full", errorClass)}
+          maxLength={14}
+        />
+      </div>
+    );
+  }
+
+  if (textInputType === "multiline") {
+    return (
+      <div className="w-full">
+        <textarea
+          aria-label={displayName}
+          name={fieldId}
+          value={formData?.[fieldId!] ?? ""}
+          onChange={handleInputChange}
+          rows={4}
+          className={cx(
+            "w-full rounded-xl border border-input-border bg-white px-4 py-3 text-text outline-none focus:border-input-border-selected",
+            errorClass
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full">
+      <Input
+        aria-label={displayName}
+        name={fieldId}
+        value={formData?.[fieldId!] ?? ""}
+        onChange={handleInputChange}
+        className={cx("w-full", errorClass)}
+      />
+    </div>
+  );
+};
+
+const ConsentCheckbox: React.FC<FieldRenderProps> = args => {
+  const { requiredField, handleInputChange, fieldId, displayName, hasError } =
+    args;
+  const [checked, setChecked] = useState(false);
+
+  const handleCheckboxChange = () => {
+    setChecked(prev => {
+      handleInputChange(!prev);
+      return !prev;
+    });
+  };
+
+  return (
+    <Checkbox
+      name={fieldId}
+      id={fieldId}
+      checked={checked}
+      error={hasError}
+      onChange={handleCheckboxChange}
+      labelClassName="footnote text-text-secondary"
+      label={
+        <>
+          {displayName}
+          {requiredField ? <span className="text-text-critical">*</span> : null}
+        </>
+      }
+    />
+  );
+};
+
+const CheckboxInputField: React.FC<FieldRenderProps> = args => {
+  const {
+    formData,
+    handleInputChange,
+    fieldId,
+    dataSource,
+    isConsentCheckbox,
+    hasError,
+  } = args;
+
+  if (isConsentCheckbox) {
+    return <ConsentCheckbox {...args} />;
+  }
+
+  const raw = formData?.[fieldId!];
+  const selectedValues: string[] =
+    typeof raw === "string" && raw.length > 0 ? raw.split(",") : [];
+
+  const handleCheckboxChange = (value: string) => {
+    let updated: string[];
+    if (selectedValues.includes(value)) {
+      updated = selectedValues.filter(item => item !== value);
+    } else {
+      updated = [...selectedValues, value];
+    }
+    handleInputChange(updated.join(","));
+  };
+
+  return (
+    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+      {(dataSource || []).map((data: any, idx: number) => (
+        <div key={`${fieldId}-${idx}`} className="w-full lg:w-[384px]">
+          <Checkbox
+            name={fieldId}
+            label={data.label}
+            value={data.value}
+            checked={selectedValues.includes(data.value)}
+            onChange={() => handleCheckboxChange(data.value)}
+            error={hasError}
+            labelClassName="footnote"
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const DropdownInputField: React.FC<FieldRenderProps> = args => {
+  const {
+    formData,
+    handleInputChange,
+    fieldId,
+    dataSource,
+    existingDataSource,
+    errorClass,
+  } = args;
+  const [options, setOptions] = useState<any[]>(dataSource ?? []);
+  const context = useContext(FormContext);
+  const resolve = context?.resolveExistingDataSource;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (
+        (dataSource == null || dataSource.length <= 0) &&
+        existingDataSource
+      ) {
+        if (existingDataSource === "City List") return;
+        if (!resolve) return;
+        try {
+          const resolved = await resolve(existingDataSource, {
+            selectedState: context?.selectedState,
+          });
+          setOptions(resolved || []);
+        } catch (error) {
+          context?.onError?.({
+            type: "resolve_data_source",
+            error,
+            metadata: { existingDataSource },
+          });
+        }
+      }
+    };
+    fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataSource, existingDataSource]);
+
+  useEffect(() => {
+    if (existingDataSource === "City List") {
+      handleInputChange(null);
+      setOptions([]);
+      if (context?.selectedState && resolve) {
+        const fetchCities = async () => {
+          try {
+            const resolved = await resolve("City List", {
+              selectedState: context?.selectedState,
+            });
+            setOptions(resolved || []);
+          } catch (error) {
+            context?.onError?.({
+              type: "resolve_data_source",
+              error,
+              metadata: { existingDataSource: "City List" },
+            });
+          }
+        };
+        fetchCities();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [context?.selectedState, existingDataSource]);
+
+  const selectedOption = formData?.[fieldId!]
+    ? options.find((option: any) => option.value === formData?.[fieldId!])
+    : null;
+
+  return (
+    <Select
+      className={cx("body3", errorClass)}
+      controlClassName="px-4 [&>div]:p-0"
+      options={options}
+      value={selectedOption ?? undefined}
+      onChange={handleInputChange as any}
+      aria-label={args.displayName ?? "Select"}
+    />
+  );
+};
+
+const DatePickerField: React.FC<FieldRenderProps> = args => {
+  const { displayName, handleInputChange, errorClass, formData, fieldId } =
+    args;
+  return (
+    <div className="w-full">
+      <input
+        type="datetime-local"
+        aria-label={displayName}
+        value={formData?.[fieldId!] ?? ""}
+        onChange={e => handleInputChange(e.target.value)}
+        className={cx(
+          "w-full rounded-xl border border-input-border bg-white px-4 py-3 text-text outline-none focus:border-input-border-selected",
+          errorClass
+        )}
+      />
+    </div>
+  );
+};
+
+const RadioButtonInputField: React.FC<FieldRenderProps> = args => {
+  const {
+    requiredField,
+    formData,
+    handleInputChange,
+    fieldId,
+    hasError,
+    dataSource,
+  } = args;
+  return (
+    <div className="mt-6 flex flex-col gap-8 sm:flex-row">
+      {(dataSource || []).map((data: any, idx: number) => (
+        <div key={idx} className="w-full lg:w-[384px]">
+          <RadioButton
+            name={fieldId!}
+            label={data.label}
+            value={data.value}
+            checked={formData?.[fieldId!] === data.value}
+            hasError={hasError}
+            onChange={handleInputChange}
+            required={requiredField}
+            labelClassName="footnote"
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const ImageuploadField: React.FC<FieldRenderProps> = args => {
+  const { handleInputChange, loading } = args;
+  const [files, setFiles] = useState<File[]>([]);
+  const [previewUrls, setPreviewUrls] = useState<string[]>([]);
+  const [dragActive, setDragActive] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const context = useContext(FormContext);
+
+  useEffect(() => {
+    const urls = files.map(file =>
+      file.type.startsWith("image/") ? URL.createObjectURL(file) : ""
+    );
+    setPreviewUrls(urls);
+    return () => {
+      urls.forEach(url => {
+        if (url) URL.revokeObjectURL(url);
+      });
+    };
+  }, [files]);
+
+  const openFileDialog = () => inputRef.current?.click();
+  const isMedia = (file: File) => file.type.startsWith("image/");
+
+  const validateTotalSize = (list: File[], maxBytes: number) => {
+    const total = list.reduce((sum, f) => sum + f.size, 0);
+    return { total, ok: total <= maxBytes };
+  };
+
+  const addFiles = (incoming: FileList | File[]) => {
+    const next: File[] = [];
+    if (incoming && incoming.length) {
+      const fileList = Array.from(incoming);
+      fileList.forEach(f => {
+        if (isMedia(f)) next.push(f);
+      });
+      if (next.length === 0) {
+        setError("Only image files are allowed.");
+        return;
+      }
+      if (files.length + next.length > 5) {
+        setError("You can only upload a maximum of 5 files.");
+        return;
+      }
+      const combined = [...files, ...next];
+      if (!validateTotalSize(combined, 20 * 1024 * 1024).ok) {
+        setError("Total file size should not be more than 20 MB.");
+        return;
+      }
+      context?.setFiles(combined);
+      setFiles(combined);
+      handleInputChange(combined);
+      setError(null);
+    }
+  };
+
+  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      addFiles(e.target.files);
+      e.target.value = "";
+    }
+  };
+
+  const onDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      addFiles(e.dataTransfer.files);
+      e.dataTransfer.clearData();
+    }
+  };
+
+  const removeFile = (idx: number) => {
+    const copy = [...files];
+    copy.splice(idx, 1);
+    setFiles(copy);
+    context?.setFiles(copy);
+    handleInputChange(copy);
+  };
+
+  return (
+    <div>
+      <div
+        onDragOver={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragActive(true);
+        }}
+        onDragLeave={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragActive(false);
+        }}
+        onDrop={onDrop}
+        className={cx(
+          "relative flex flex-col items-center justify-center rounded-xl border border-input-border bg-white px-4 py-10 text-center transition",
+          dragActive
+            ? "border-input-border-selected bg-bg-surface-active"
+            : "hover:border-input-border-hover"
+        )}
+      >
+        <p className="mb-3 text-sm text-text-secondary">Drop files here or</p>
+        <button
+          type="button"
+          onClick={openFileDialog}
+          className="inline-flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-text shadow-sm ring-1 ring-inset ring-input-border hover:bg-bg-surface-hover"
+        >
+          <MaterialIcon name="upload" weight="700" size={24} />
+          Choose files
+        </button>
+        <input
+          ref={inputRef}
+          type="file"
+          accept="image/*"
+          multiple={true}
+          name="files"
+          onChange={onInputChange}
+          className="pointer-events-none absolute inset-0 h-0 w-0 opacity-0"
+          aria-hidden={true}
+          tabIndex={-1}
+        />
+        {error && <p className="mt-2 text-sm text-text-critical">{error}</p>}
+        {files.length > 0 && (
+          <div className="mt-8">
+            <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+              {files.map((file, idx) => (
+                <li
+                  key={idx}
+                  className="group relative rounded-xl border border-input-border p-2"
+                >
+                  {file.type.startsWith("image/") && previewUrls[idx] ? (
+                    <img
+                      src={previewUrls[idx]}
+                      alt={file.name}
+                      className="h-28 w-full rounded object-cover"
+                    />
+                  ) : (
+                    <div className="h-28 w-full rounded bg-bg-surface-active" />
+                  )}
+                  <div className="mt-2 flex items-center justify-between">
+                    <span
+                      className="max-w-[50%] truncate text-sm text-text"
+                      title={file.name}
+                    >
+                      {file.name}
+                    </span>
+                    {loading ? (
+                      <button
+                        type="button"
+                        disabled={true}
+                        className="cursor-default text-sm text-text-secondary"
+                      >
+                        Remove
+                      </button>
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={() => removeFile(idx)}
+                        className="text-sm text-text-critical hover:underline"
+                      >
+                        Remove
+                      </button>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const FormFieldTypeMap: Record<string, React.FC<FieldRenderProps>> = {
+  Checkbox: CheckboxInputField,
+  Imageupload: ImageuploadField,
+  Datepicker: DatePickerField,
+  Dropdown: DropdownInputField,
+  Radio: RadioButtonInputField,
+  Text: TextInputField,
+};