formik-form-components 2.0.3 → 2.0.4

package/src/Form/AppDateAndTimePicker.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import React from "react";
-import { useFormikContext, FormikValues } from "formik";
-
-/**
- * Returns current local datetime in `YYYY-MM-DDTHH:mm`
- * format required by <input type="datetime-local" />
- */
-const getNowForInput = (): string => {
-  return new Date(Date.now() - new Date().getTimezoneOffset() * 60000)
-    .toISOString()
-    .slice(0, 16);
-};
-
-interface AppDateTimeInputProps
-  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "type" | "name" | "value" | "onChange" | "min" | "max"
-  > {
-  name: string;
-  label?: string;
-
-  /** Disable selecting past date & time */
-  disablePast?: boolean;
-
-  /** Disable selecting future date & time */
-  disableFuture?: boolean;
-  min?: string;
-  max?: string;
-}
-
-const AppDateTimeInput: React.FC<AppDateTimeInputProps> = ({
-  name,
-  label,
-  disablePast = false,
-  disableFuture = false,
-  className = "",
-  required,
-  min,
-  max,
-  ...inputProps
-}) => {
-  const { values, errors, touched, setFieldValue, setFieldTouched } =
-    useFormikContext<FormikValues>();
-
-  const value = values[name] ?? "";
-  const error = errors[name] as string | undefined;
-  const isTouched = touched[name] as boolean | undefined;
-
-  const now = getNowForInput();
-
-  // Priority:
-  // disablePast > min
-  // disableFuture > max
-  const computedMin = disablePast ? now : min;
-  const computedMax = disableFuture ? now : max;
-
-  return (
-    <div className={`w-full ${className}`}>
-      {label && (
-        <label className="mb-1 block text-sm font-medium text-gray-700">
-          {label}
-          {required && <span className="ml-0.5 text-red-500">*</span>}
-        </label>
-      )}
-
-      <input
-        type="datetime-local"
-        name={name}
-        value={value}
-        min={computedMin}
-        max={computedMax}
-        required={required}
-        onChange={(e) => setFieldValue(name, e.target.value)}
-        onBlur={() => setFieldTouched(name, true)}
-        className={`w-full rounded-lg border px-3 py-2 text-sm shadow-sm transition
-          focus:outline-none focus:ring-2
-          ${
-            isTouched && error
-              ? "border-red-500 focus:ring-red-500/20"
-              : "border-gray-300 focus:border-blue-500 focus:ring-blue-500/20"
-          }`}
-        {...inputProps}
-      />
-
-      {isTouched && error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </div>
-  );
-};
-
-export default AppDateTimeInput;

package/src/Form/AppDatePicker.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import React from "react";
-import { useFormikContext, FormikValues } from "formik";
-
-export interface AppDatePickerProps
-  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "type" | "value" | "onChange" | "min" | "max"
-  > {
-  name: string;
-  label: string;
-  disablePast?: boolean;
-  disableFuture?: boolean;
-  className?: string;
-}
-
-const AppDatePicker: React.FC<AppDatePickerProps> = ({
-  name,
-  label,
-  disablePast = false,
-  disableFuture = false,
-  className = "",
-  ...rest
-}) => {
-  const { values, setFieldValue, touched, errors, setFieldTouched } =
-    useFormikContext<FormikValues>();
-
-  const value = values[name] ?? "";
-  const isTouched = touched[name];
-  const error = errors[name] as string | undefined;
-  const today = new Date().toISOString().slice(0, 10);
-
-  return (
-    <div className={`w-full ${className}`}>
-      {label && (
-        <label
-          htmlFor={name}
-          className="block text-sm font-medium mb-1 text-gray-700"
-        >
-          {label}
-        </label>
-      )}
-
-      <input
-        id={name}
-        name={name}
-        type="date"
-        value={value}
-        min={disablePast ? today : undefined}
-        max={disableFuture ? today : undefined}
-        onChange={(e) => setFieldValue(name, e.target.value)}
-        onBlur={() => setFieldTouched(name, true)}
-        className={`w-full rounded-md border px-3 py-2 text-sm
-          focus:outline-none focus:ring-2 focus:ring-blue-500
-          ${error && isTouched ? "border-red-500" : "border-gray-300"}
-          ${rest.disabled ? "bg-gray-100 cursor-not-allowed" : "bg-white"}
-        `}
-        {...rest}
-      />
-
-      {isTouched && error && (
-        <p className="mt-1 text-xs text-red-500">{error}</p>
-      )}
-    </div>
-  );
-};
-
-export default AppDatePicker;

package/src/Form/AppFormErrorMessage.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { useFormikContext, FormikValues } from "formik";
-
-interface AppFormErrorMessageProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  name: string;
-  alwaysShow?: boolean;
-  className?: string;
-}
-
-const AppFormErrorMessage: React.FC<AppFormErrorMessageProps> = ({
-  name,
-  alwaysShow = false,
-  className = "",
-  ...rest
-}) => {
-  const { errors, touched } = useFormikContext<FormikValues>();
-
-  const fieldError = errors?.[name] as string | undefined;
-  const isTouched = touched?.[name] as boolean | undefined;
-
-  const showError = !!fieldError && typeof fieldError === "string";
-
-  if (!showError) return null;
-  if (!alwaysShow && !isTouched) return null;
-
-  return (
-    <div className={`mt-1 ${className}`} {...rest}>
-      <span className="text-red-500 text-xs block">{fieldError}</span>
-    </div>
-  );
-};
-
-export default AppFormErrorMessage;

package/src/Form/AppInputField.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import React, { useState } from "react";
-import { useFormikContext, FormikValues } from "formik";
-
-interface AppInputFieldProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "name"> {
-  name: string;
-  label: React.ReactNode;
-  className?: string;
-}
-
-const AppInputField: React.FC<AppInputFieldProps> = ({
-  name,
-  label,
-  className = "",
-  ...rest
-}) => {
-  const { values, setFieldValue, touched, errors, setFieldTouched } =
-    useFormikContext<FormikValues>();
-
-  const fieldValue = values[name] ?? "";
-  const isTouched = touched[name];
-  const fieldError = errors[name] as string | undefined;
-
-  const [showPassword, setShowPassword] = useState(false);
-  const isPassword = rest.type === "password";
-  const inputType = isPassword
-    ? showPassword
-      ? "text"
-      : "password"
-    : rest.type;
-
-  return (
-    <div className={`w-full ${className}`}>
-      {label && (
-        <label
-          htmlFor={name}
-          className="block text-sm font-medium mb-1 text-gray-700"
-        >
-          {label}
-          {rest.required && <span className="text-red-500 ml-0.5">*</span>}
-        </label>
-      )}
-
-      <div className="relative">
-        <input
-          id={name}
-          name={name}
-          type={inputType}
-          value={fieldValue}
-          onChange={(e) => setFieldValue(name, e.target.value)}
-          onBlur={() => setFieldTouched(name, true)}
-          className={`w-full rounded-md border px-3 py-2 text-sm
-            focus:outline-none focus:ring-2 focus:ring-blue-500
-            ${fieldError && isTouched ? "border-red-500" : "border-gray-300"}
-            ${rest.disabled ? "bg-gray-100 cursor-not-allowed" : "bg-white"}
-          `}
-          {...rest}
-        />
-
-        {isPassword && (
-          <button
-            type="button"
-            onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-          >
-            {showPassword ? "🙈" : "👁️"}
-          </button>
-        )}
-      </div>
-
-      {isTouched && fieldError && (
-        <p className="mt-1 text-xs text-red-500">{fieldError}</p>
-      )}
-    </div>
-  );
-};
-
-export default AppInputField;

package/src/Form/AppMultiSelector.tsx

@@ -1,163 +0,0 @@
-'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

@@ -1,106 +0,0 @@
-'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

@@ -1,92 +0,0 @@
-'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;