warqadui 0.0.6 → 0.0.10

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

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

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

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