warqadui 0.0.5 → 0.0.6

package/packages/ui/src/components/Fields/PhoneInput.tsx

@@ -0,0 +1,134 @@
+import { forwardRef, useState } from "react";
+import PhoneInputOriginal, {
+  isValidPhoneNumber,
+} from "react-phone-number-input";
+import "react-phone-number-input/style.css";
+import { Controller } from "react-hook-form";
+import { useWarqadConfig } from "../../providers/WarqadProvider";
+
+export interface PhoneInputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "onChange"
+> {
+  label: string;
+  icon?: React.ReactNode;
+  error?: string;
+  containerClassName?: string;
+  name?: any;
+  form?: any;
+  onChange?: (value: string) => void;
+  value?: string;
+}
+
+export const PhoneInput = forwardRef<any, PhoneInputProps>(
+  (
+    {
+      label,
+      icon,
+      error,
+      containerClassName = "",
+      name,
+      form,
+      onChange,
+      value,
+      className = "",
+      ...props
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const { theme } = useWarqadConfig();
+    const primaryColor = theme?.primaryColor;
+
+    // Error logic extraction
+    let message = error;
+    if (form && name) {
+      const {
+        formState: { errors },
+      } = form;
+      // Handle nested errors like 'user.phone'
+      const nameParts = name.split(".");
+      let currentError = errors;
+      for (const part of nameParts) {
+        currentError = currentError?.[part];
+      }
+      message = currentError?.message || message;
+    }
+
+    const renderInput = (
+      onChangeHandler: (value: string) => void,
+      currentValue: string,
+    ) => (
+      <div className={`space-y-2 group ${containerClassName}`}>
+        <label
+          className={`block text-xs font-medium transition-colors duration-200`}
+          style={{
+            color: isFocused || currentValue ? primaryColor : undefined,
+          }}
+        >
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <div className="relative">
+          {icon && (
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
+              <div
+                className={`transition-colors duration-200`}
+                style={{ color: isFocused ? primaryColor : "#9ca3af" }}
+              >
+                {icon}
+              </div>
+            </div>
+          )}
+          <PhoneInputOriginal
+            ref={ref}
+            defaultCountry="KE"
+            international
+            withCountryCallingCode
+            value={currentValue}
+            onChange={(val: any) => onChangeHandler(val as string)}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            className={`block w-full rounded-lg border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-900/50 text-gray-900 dark:text-white placeholder-gray-400 focus-within:bg-white dark:focus-within:bg-zinc-900 outline-none transition-all duration-200 border [&_.PhoneInputInput]:bg-transparent [&_.PhoneInputInput]:outline-none [&_.PhoneInputInput]:text-sm [&_.PhoneInputCountry]:mr-2 ${
+              icon ? "pl-10" : "pl-3"
+            } pr-3 h-8 py-0 ${className}`}
+            style={{
+              borderColor: isFocused ? primaryColor : undefined,
+              boxShadow: isFocused
+                ? `${primaryColor}33 0px 0px 0px 2px`
+                : undefined,
+            }}
+            {...props}
+          />
+        </div>
+        {message && (
+          <p className="text-sm text-red-600 dark:text-red-400">{message}</p>
+        )}
+      </div>
+    );
+
+    // If using React Hook Form
+    if (form && name) {
+      return (
+        <Controller
+          name={name}
+          control={form.control}
+          rules={{
+            validate: (value) =>
+              value && isValidPhoneNumber(value)
+                ? true
+                : "Invalid phone number",
+          }}
+          render={({ field: { onChange, value } }) =>
+            renderInput(onChange, value)
+          }
+        />
+      );
+    }
+
+    // Standalone usage
+    return renderInput(onChange || ((() => {}) as any), value || "");
+  },
+);
+
+PhoneInput.displayName = "PhoneInput";

package/packages/ui/src/components/Fields/date.tsx

@@ -0,0 +1,165 @@
+import { forwardRef, useState } from "react";
+import { DatePicker } from "antd";
+import {
+  Controller,
+  type FieldValues,
+  type Path,
+  type UseFormReturn,
+} from "react-hook-form";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { Calendar } from "lucide-react";
+import { useWarqadConfig } from "../../providers/WarqadProvider";
+
+dayjs.extend(customParseFormat);
+
+export interface DateInputProps<T extends FieldValues> {
+  label: string;
+  error?: string;
+  containerClassName?: string;
+  name?: Path<T>;
+  form?: UseFormReturn<T>;
+  value?: string;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  className?: string;
+  [key: string]: any;
+}
+
+export const DateInput = forwardRef(
+  (
+    {
+      label,
+      error,
+      containerClassName = "",
+      name,
+      form,
+      className = "",
+      value,
+      onBlur = () => {},
+      onChange = () => {},
+      ...props
+    }: any,
+    ref: any,
+  ) => {
+    const { theme } = useWarqadConfig();
+    const primaryColor = theme?.primaryColor;
+    const [isFocused, setIsFocused] = useState(false);
+
+    let message = error;
+
+    if (form && name) {
+      const {
+        formState: { errors },
+      } = form;
+
+      const errorObj = name
+        .split(".")
+        .reduce((acc: any, current: string) => acc?.[current], errors);
+
+      message = (errorObj as any)?.message;
+    }
+
+    const inputStyles = `w-full px-3 py-0 rounded-lg! border! shadow-none transition-all! duration-200! outline-none!
+      bg-gray-50! dark:bg-zinc-900!
+      text-gray-900! dark:text-zinc-100!
+      hover:bg-gray-50! dark:hover:bg-zinc-900!
+      ${
+        message
+          ? "border-red-500 hover:border-red-500 [&.ant-picker-focused]:border-red-500 [&.ant-picker-focused]:ring-red-500/20"
+          : "border-gray-200 dark:border-zinc-700 hover:border-gray-200 dark:hover:border-zinc-700 [&.ant-picker-focused]:ring-2"
+      }
+      [&.ant-picker-focused]:bg-white dark:[&.ant-picker-focused]:bg-zinc-900
+      ${className}`;
+
+    const renderDatePicker = (
+      val: any,
+      changeHandler: (v: any) => void,
+      blurHandler: () => void,
+      refProps: any,
+    ) => {
+      const dateValue =
+        val && typeof val === "string"
+          ? dayjs(val, "DD/MM/YYYY", true)
+          : dayjs.isDayjs(val)
+            ? val
+            : null;
+
+      return (
+        <DatePicker
+          ref={refProps}
+          format="DD/MM/YYYY"
+          value={dateValue && dateValue.isValid() ? dateValue : null}
+          onChange={(date) => {
+            if (date && dayjs.isDayjs(date)) {
+              changeHandler?.(date.format("DD/MM/YYYY"));
+            } else {
+              changeHandler?.("");
+            }
+          }}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => {
+            setIsFocused(false);
+            blurHandler?.();
+          }}
+          className={`${inputStyles} [&>input]:text-gray-900! [&>input]:dark:text-zinc-100! [&>input]:text-base rounded-md`}
+          placeholder="DD/MM/YYYY"
+          needConfirm={false}
+          style={{
+            height: "32px",
+            borderColor: isFocused && !message ? primaryColor : undefined,
+            boxShadow:
+              isFocused && !message
+                ? `${primaryColor}33 0px 0px 0px 2px`
+                : undefined,
+          }}
+          popupClassName="z-50"
+          suffixIcon={
+            <Calendar
+              className="h-5 w-5 text-gray-400"
+              style={{ color: isFocused ? primaryColor : undefined }}
+            />
+          }
+          allowClear
+          {...props}
+        />
+      );
+    };
+
+    return (
+      <div className={`space-y-2 group ${containerClassName}`}>
+        <label
+          className="block text-xs font-medium transition-colors duration-200"
+          style={{
+            color: message ? "#ef4444" : isFocused ? primaryColor : undefined,
+          }}
+        >
+          {label}
+        </label>
+
+        {form && name ? (
+          <Controller
+            control={form.control}
+            name={name}
+            render={({ field }) =>
+              renderDatePicker(
+                field.value,
+                field.onChange,
+                field.onBlur,
+                field.ref,
+              )
+            }
+          />
+        ) : (
+          renderDatePicker(value, onChange, onBlur, ref)
+        )}
+
+        {message && (
+          <p className="text-sm text-red-600 dark:text-red-400">{message}</p>
+        )}
+      </div>
+    );
+  },
+) as <T extends FieldValues>(
+  props: DateInputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },
+) => React.ReactElement;

package/packages/ui/src/components/Fields/index.tsx

@@ -0,0 +1,17 @@
+import { Input } from "./Input";
+import { PhoneInput } from "./PhoneInput";
+import { Select } from "./select";
+import { Textarea } from "./textArea";
+import { SearchApi } from "./searchApi";
+import { DateInput } from "./date";
+
+const Fields = {
+  Input,
+  PhoneInput,
+  Select,
+  Textarea,
+  SearchApi,
+  DateInput,
+};
+
+export default Fields;