formik-form-components 2.0.2 → 2.0.3

package/src/Form/AppMultiSelector.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from "react";
+import { useFormikContext, FormikValues } from "formik";
+
+export interface AppSelectOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+}
+
+interface AppMultiSelectProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  name: string;
+  label?: string;
+  options: AppSelectOption[];
+  maxSelections?: number;
+  placeholder?: string;
+  showSelectedCount?: boolean;
+  className?: string;
+  onChange?: (value: Array<string | number>) => void;
+}
+
+const AppMultiSelect: React.FC<AppMultiSelectProps> = ({
+  name,
+  label,
+  options = [],
+  maxSelections,
+  placeholder = "Select options...",
+  showSelectedCount = true,
+  className = "",
+  onChange: externalOnChange,
+  ...rest
+}) => {
+  const { values, setFieldValue, errors, touched, setFieldTouched } =
+    useFormikContext<FormikValues>();
+
+  const fieldValue = Array.isArray(values[name]) ? values[name] : [];
+  const fieldError = errors[name] as string | undefined;
+  const isTouched = touched[name] as boolean | undefined;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const filteredOptions = options.filter(
+    (opt) =>
+      !search ||
+      opt.label.toLowerCase().includes(search.toLowerCase()) ||
+      String(opt.value).toLowerCase().includes(search.toLowerCase())
+  );
+
+  const isMaxReached = maxSelections
+    ? fieldValue.length >= maxSelections
+    : false;
+
+  const toggleOption = (value: string | number) => {
+    let newValues: Array<string | number>;
+    if (fieldValue.includes(value)) {
+      newValues = fieldValue.filter((v: string | number) => v !== value);
+    } else {
+      if (isMaxReached) return;
+      newValues = [...fieldValue, value];
+    }
+    setFieldValue(name, newValues);
+    if (externalOnChange) externalOnChange(newValues);
+  };
+
+  const handleBlur = () => setFieldTouched(name, true);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+        handleBlur();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedLabels = options
+    .filter((opt) => fieldValue.includes(opt.value))
+    .map((opt) => opt.label)
+    .join(", ");
+
+  return (
+    <div className={`relative w-full ${className}`} ref={dropdownRef} {...rest}>
+      {label && (
+        <label className="block mb-1 text-sm font-medium text-gray-700">
+          {label}
+        </label>
+      )}
+
+      <div
+        className={`border rounded-md px-3 py-2 bg-white flex justify-between items-center cursor-pointer
+          hover:ring-1 hover:ring-blue-500
+          ${fieldError && isTouched ? "border-red-500" : "border-gray-300"}`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span className="text-sm text-gray-700">
+          {fieldValue.length ? selectedLabels : placeholder}
+        </span>
+        <span className="ml-2">&#9662;</span>
+      </div>
+
+      {isOpen && (
+        <div className="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow max-h-60 overflow-y-auto">
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search..."
+            className="w-full px-3 py-2 border-b border-gray-200 text-sm focus:outline-none"
+          />
+          {filteredOptions.map((option) => {
+            const checked = fieldValue.includes(option.value);
+            const disabledOption =
+              option.disabled || (isMaxReached && !checked);
+            return (
+              <div
+                key={option.value}
+                className={`flex items-center px-3 py-2 cursor-pointer hover:bg-gray-100
+                  ${disabledOption ? "opacity-50 cursor-not-allowed" : ""}`}
+                onClick={() => !disabledOption && toggleOption(option.value)}
+              >
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  readOnly
+                  className="mr-2"
+                />
+                {option.icon}
+                <span className="text-sm text-gray-700">{option.label}</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {showSelectedCount && (
+        <p
+          className={`mt-1 text-xs ${
+            isMaxReached ? "text-red-500" : "text-gray-500"
+          }`}
+        >
+          {`${fieldValue.length} selected`}
+          {maxSelections ? ` (${fieldValue.length} of ${maxSelections})` : ""}
+        </p>
+      )}
+
+      {isTouched && fieldError && (
+        <p className="mt-1 text-xs text-red-500">{fieldError}</p>
+      )}
+    </div>
+  );
+};
+
+export default AppMultiSelect;

package/src/Form/AppPhoneNoInput.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from "react";
+import PhoneInput from "react-phone-number-input";
+import "react-phone-number-input/style.css";
+import "../styles/PhoneInputCustom.css";
+
+interface AppPhoneNoInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "onChange" | "value"
+  > {
+  name: string;
+  label: string;
+  international?: boolean;
+  withCountryCallingCode?: boolean;
+  className?: string;
+  onChange?: (value: string | undefined) => void;
+  value?: string;
+  error?: string;
+}
+
+const AppPhoneNoInput: React.FC<AppPhoneNoInputProps> = ({
+  name,
+  label,
+  international = true,
+  withCountryCallingCode = true,
+  className = "",
+  onChange,
+  value,
+  disabled,
+  error,
+  placeholder = "Enter phone number", // Default still available here
+  required = false, // Default still available here
+  ...props
+}) => {
+  const [phoneValue, setPhoneValue] = useState<string | undefined>(value);
+  const [hasFocus, setHasFocus] = useState(false);
+
+  useEffect(() => {
+    setPhoneValue(value);
+  }, [value]);
+
+  const handleChange = (phoneNumber: string | undefined) => {
+    setPhoneValue(phoneNumber);
+    if (onChange) {
+      onChange(phoneNumber);
+    }
+  };
+
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={`phone-input-wrapper ${className}`}>
+      {label && (
+        <label
+          htmlFor={`${name}-phone-input`}
+          className={`phone-input-label ${
+            hasFocus || phoneValue ? "has-value" : ""
+          }`}
+        >
+          {label}
+          {required && (
+            <span className="required-star" aria-hidden="true">
+              *
+            </span>
+          )}
+        </label>
+      )}
+
+      <div
+        className={`phone-input-container ${error ? "error" : ""} ${
+          hasFocus ? "focus" : ""
+        }`}
+        ref={inputRef}
+      >
+        <PhoneInput
+          international={international}
+          withCountryCallingCode={withCountryCallingCode}
+          defaultCountry="PK"
+          value={phoneValue}
+          onChange={handleChange}
+          onFocus={() => setHasFocus(true)}
+          onBlur={() => setHasFocus(false)}
+          id={`${name}-phone-input`}
+          disabled={disabled}
+          placeholder={placeholder}
+          required={required}
+          aria-required={required}
+          className="custom-phone-input"
+          aria-invalid={!!error}
+          aria-describedby={error ? `${name}-error` : undefined}
+          {...props}
+        />
+      </div>
+
+      {error && (
+        <div id={`${name}-error`} className="error-message" role="alert">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AppPhoneNoInput;

package/src/Form/AppRadioGroup.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React from "react";
+import { useFormikContext, FormikValues } from "formik";
+
+export interface RadioOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+interface AppRadioGroupProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "onChange" | "value" | "name"
+  > {
+  name: string;
+  options: RadioOption[];
+  label?: string;
+  className?: string;
+  row?: boolean;
+  onChange?: (value: string | number) => void;
+}
+
+const AppRadioGroup: React.FC<AppRadioGroupProps> = ({
+  name,
+  options = [],
+  label,
+  className = "",
+  row = false,
+  onChange: externalOnChange,
+  ...rest
+}) => {
+  const { values, setFieldValue, errors, touched, setFieldTouched } =
+    useFormikContext<FormikValues>();
+
+  const fieldValue = values[name] as string | number | undefined;
+  const fieldError = errors[name] as string | undefined;
+  const isTouched = touched[name] as boolean | undefined;
+
+  const handleChange = (value: string | number) => {
+    setFieldValue(name, value);
+    if (externalOnChange) externalOnChange(value);
+  };
+
+  const handleBlur = () => setFieldTouched(name, true);
+
+  return (
+    <div className={`w-full ${className}`}>
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+          {rest.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+
+      <div
+        className={`flex ${row ? "flex-row space-x-4" : "flex-col space-y-2"}`}
+        onBlur={handleBlur}
+      >
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className={`flex items-center cursor-pointer ${
+              option.disabled || rest.disabled
+                ? "opacity-50 cursor-not-allowed"
+                : ""
+            }`}
+          >
+            <input
+              type="radio"
+              name={name}
+              value={option.value}
+              checked={fieldValue === option.value}
+              disabled={option.disabled || rest.disabled}
+              onChange={() => handleChange(option.value)}
+              className="form-radio h-4 w-4 text-blue-600 focus:ring-blue-500"
+              {...rest}
+            />
+            <span className="ml-2 text-gray-700">{option.label}</span>
+          </label>
+        ))}
+      </div>
+
+      {isTouched && fieldError && (
+        <p className="mt-1 text-xs text-red-500">{fieldError}</p>
+      )}
+    </div>
+  );
+};
+
+export default AppRadioGroup;

package/src/Form/AppRating.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React, { forwardRef, useState } from "react";
+import { useFormikContext, FormikValues } from "formik";
+
+interface AppRatingProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "onChange" | "value"
+  > {
+  name: string;
+  label?: string;
+  max?: number;
+  helperText?: string;
+  onChange?: (value: number | null) => void;
+  className?: string;
+}
+
+const AppRating = forwardRef<HTMLDivElement, AppRatingProps>(
+  (
+    {
+      name,
+      label,
+      max = 5,
+      helperText,
+      onChange: externalOnChange,
+      className = "",
+      ...rest
+    },
+    ref
+  ) => {
+    const { values, errors, touched, setFieldValue, setFieldTouched } =
+      useFormikContext<FormikValues>();
+    const [hoverValue, setHoverValue] = useState<number | null>(null);
+
+    const val = (values[name] as number | null | undefined) ?? 0;
+    const fieldError = errors[name] as string | undefined;
+    const isTouched = touched[name] as boolean | undefined;
+    const hasError = Boolean(fieldError) && isTouched;
+
+    const handleClick = (rating: number) => {
+      setFieldValue(name, rating);
+      setFieldTouched(name, true);
+      externalOnChange?.(rating);
+    };
+
+    return (
+      <div ref={ref} className={`flex flex-col w-full ${className}`} {...rest}>
+        {label && (
+          <label
+            className={`block text-sm font-medium mb-1 ${
+              hasError ? "text-red-500" : "text-gray-700"
+            }`}
+          >
+            {label}
+          </label>
+        )}
+
+        <div className="flex space-x-1">
+          {Array.from({ length: max }, (_, i) => {
+            const starValue = i + 1;
+            const filled =
+              hoverValue !== null ? starValue <= hoverValue : starValue <= val;
+
+            return (
+              <button
+                key={i}
+                type="button"
+                className={`text-2xl transition-colors duration-150 ${
+                  filled ? "text-yellow-400" : "text-gray-300"
+                }`}
+                onClick={() => handleClick(starValue)}
+                onMouseEnter={() => setHoverValue(starValue)}
+                onMouseLeave={() => setHoverValue(null)}
+              >
+                ★
+              </button>
+            );
+          })}
+        </div>
+
+        {(hasError || helperText) && (
+          <p
+            className={`mt-1 text-xs ${
+              hasError ? "text-red-500" : "text-gray-500"
+            }`}
+          >
+            {hasError ? fieldError : helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+AppRating.displayName = "AppRating";
+
+export default AppRating;

package/src/Form/AppSelectInput.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from "react";
+import { useFormikContext, FormikValues } from "formik";
+
+export interface AppSelectOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export interface AppSelectProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  name: string;
+  options: AppSelectOption[];
+  label?: string;
+  helperText?: string;
+  clearable?: boolean;
+}
+
+export default function AppSelect({
+  name,
+  options,
+  label,
+  helperText,
+  clearable = true,
+  className = "",
+  id,
+  ...divProps
+}: AppSelectProps): React.ReactElement {
+  const { values, setFieldValue, errors, touched, setFieldTouched } =
+    useFormikContext<FormikValues>();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const fieldValue = values[name] as string | number | undefined;
+  const fieldError = errors[name] as string | undefined;
+  const isTouched = touched[name] as boolean | undefined;
+  const hasError = Boolean(isTouched && fieldError);
+
+  const selectedOption = options.find((o) => o.value === fieldValue);
+
+  const filteredOptions = options.filter(
+    (o) =>
+      o.label.toLowerCase().includes(search.toLowerCase()) ||
+      String(o.value).toLowerCase().includes(search.toLowerCase())
+  );
+
+  const inputId = id ?? `select-${name}`;
+
+  const handleSelect = (value: string | number) => {
+    setFieldValue(name, value);
+    setFieldTouched(name, true);
+    setIsOpen(false);
+    setSearch("");
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setFieldValue(name, "");
+    setFieldTouched(name, true);
+  };
+
+  useEffect(() => {
+    const onClickOutside = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, []);
+
+  return (
+    <div ref={containerRef} className={`w-full ${className}`}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="mb-2 block text-sm font-semibold text-gray-900"
+        >
+          {label}
+        </label>
+      )}
+
+      <div className="relative">
+        <div
+          id={inputId}
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          aria-invalid={hasError}
+          tabIndex={divProps["aria-disabled"] ? -1 : 0}
+          {...divProps}
+          onClick={() => !divProps["aria-disabled"] && setIsOpen((p) => !p)}
+          onBlur={() => setFieldTouched(name, true)}
+          className={`
+            relative flex h-12 w-full cursor-pointer items-center rounded-xl bg-white px-4 pr-12 text-sm transition-all duration-200
+            focus:outline-none focus:ring-4
+            ${
+              hasError
+                ? "bg-red-50/50 focus:ring-red-200"
+                : divProps["aria-disabled"]
+                ? "cursor-not-allowed bg-gray-50 text-gray-400"
+                : isOpen
+                ? "bg-blue-50/30 focus:ring-blue-200"
+                : "hover:bg-gray-50 focus:ring-blue-200"
+            }
+          `}
+        >
+          <input
+            type="text"
+            value={search}
+            disabled={Boolean(divProps["aria-disabled"])}
+            onChange={(e) => setSearch(e.target.value)}
+            onFocus={() => setIsOpen(true)}
+            placeholder={selectedOption?.label || "Search options..."}
+            className="h-full w-full bg-transparent border-none outline-none shadow-none font-medium text-gray-900 placeholder:text-gray-500"
+          />
+
+          <span className="pointer-events-none absolute right-4">
+            <svg
+              className={`h-5 w-5 transition-transform duration-200 text-gray-400 ${
+                isOpen ? "rotate-180" : ""
+              }`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </span>
+        </div>
+
+        {clearable && fieldValue && !divProps["aria-disabled"] && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute right-12 top-1/2 -translate-y-1/2 rounded-full p-1 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200"
+            aria-label="Clear selection"
+          >
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        )}
+
+        {isOpen && (
+          <div className="absolute left-0 top-full z-50 mt-2 w-full max-h-60 rounded-2xl bg-white">
+            <div className="max-h-60 overflow-auto rounded-2xl border border-gray-100">
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map((opt) => (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    disabled={opt.disabled}
+                    onClick={() => handleSelect(opt.value)}
+                    className={`
+                      flex w-full items-center px-4 py-3 text-left text-sm transition-all first:rounded-t-2xl last:rounded-b-2xl
+                      ${
+                        opt.disabled
+                          ? "cursor-not-allowed bg-gray-50 text-gray-400"
+                          : opt.value === fieldValue
+                          ? "bg-gradient-to-r from-blue-50 to-indigo-50 font-semibold text-blue-900 border-r-2 border-blue-200"
+                          : "text-gray-900 hover:bg-gray-50"
+                      }
+                    `}
+                  >
+                    {opt.value === fieldValue && (
+                      <svg
+                        className="mr-3 h-4 w-4 text-blue-500"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    )}
+                    <span>{opt.label}</span>
+                  </button>
+                ))
+              ) : (
+                <div className="flex flex-col items-center px-8 py-8 text-center text-sm text-gray-500">
+                  <svg
+                    className="mx-auto mb-2 h-12 w-12 text-gray-300"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={1}
+                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  <p className="text-gray-400">No options found</p>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {hasError && (
+        <p className="mt-2 flex items-center gap-1.5 text-sm font-medium text-red-600">
+          <svg
+            className="h-4 w-4 flex-shrink-0"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+          {fieldError}
+        </p>
+      )}
+
+      {!hasError && helperText && (
+        <p className="mt-2 text-sm text-gray-500">{helperText}</p>
+      )}
+    </div>
+  );
+}