@trackunit/react-form-components 0.0.331 → 0.0.333

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.331",
+  "version": "0.0.333",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -19,7 +19,9 @@
     "@testing-library/react": "14.0.0",
     "jest-fetch-mock": "^3.0.3",
     "@trackunit/css-class-variance-utilities": "*",
-    "@trackunit/i18n-library-translation": "*"
+    "@trackunit/i18n-library-translation": "*",
+    "zod": "3.22.4",
+    "react-hook-form": "7.40.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/components/FormGroup/FormGroup.d.ts

@@ -32,6 +32,7 @@ export interface FormGroupProps extends CommonProps {
      * The props for setting the icon on tip.
      */
     tipIconProps?: IconProps;
+    name?: string;
 }
 /**
  * The FormGroup component should be used to wrap any Input element that needs a label.

package/src/components/PhoneField/PhoneField.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { PhoneInputProps } from "../PhoneInput/PhoneInput";
-type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "name">;
 export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
-    isCountryCodeClearable?: boolean;
 }
 /**
  * The PhoneField component is used to enter phone number.

package/src/components/PhoneFieldWithController/PhoneFieldWithController.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Control, ControllerProps } from "react-hook-form";
+import { PhoneFieldProps } from "../PhoneField/PhoneField";
+export interface PhoneFieldWithControllerProps extends PhoneFieldProps {
+    /**
+     * Instance of `Control` from `react-hook-form`.
+     */
+    control: Control<any, any>;
+    /**
+     * Represents the name of the form field used to register the component with `react-hook-form`.
+     */
+    name: string;
+    /**
+     * Used to overwrite controller props.
+     */
+    controllerProps?: Partial<Omit<ControllerProps<any>, "render">>;
+}
+/**
+ * The PhoneFieldWithController component is a wrapper for the PhoneField component to connect it to react-hook-form.
+ *
+ * @returns {JSX.Element} - The PhoneFieldWithController component.
+ */
+export declare const PhoneFieldWithController: import("react").ForwardRefExoticComponent<PhoneFieldWithControllerProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/PhoneInput/PhoneInput.d.ts

@@ -1,13 +1,6 @@
-import React, { FocusEventHandler } from "react";
-import { SingleValue } from "react-select";
+import React from "react";
 import { BaseInputProps } from "../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
-export interface PhoneNumberValue {
-    phone?: string;
-    national?: string;
-    countryCode?: string;
-    isValid?: boolean;
-}
 export interface PhoneInputProps extends BaseInputExposedProps {
     /**
      * To disable the action button.
@@ -15,40 +8,9 @@ export interface PhoneInputProps extends BaseInputExposedProps {
      * @default false
      * @memberof PhoneInputProps
      * @example
-     * <PhoneInput disableAction />
+    //  * <PhoneInput disableAction />
      */
     disableAction?: boolean;
-    /**
-     * On blur handler for country code component.
-     */
-    onBlurCountryCode?: FocusEventHandler<HTMLInputElement> | undefined;
-    /**
-     * On change handler for country code component.
-     */
-    onChangeCountryCode?: (value: SingleValue<{
-        label: string;
-        value: string;
-    }>) => void;
-    /**
-     * On click handler for country code component.
-     */
-    onClickCountryCode?: (value: SingleValue<{
-        label: string;
-        value: string;
-    }>) => void;
-    /**
-     * A placeholder value for country code.
-     */
-    countryCodePlaceholder?: string;
-    /**
-     * An custom handler will be called when country code select or phone number input lost focus
-     */
-    onFieldsBlur?: ({ phone, national, countryCode }: PhoneNumberValue) => void;
-    /**
-     * An custom handler will be called when country code select or phone number input were changed
-     */
-    onChangeValue?: ({ phone, national, countryCode }: PhoneNumberValue) => void;
-    isCountryCodeClearable?: boolean;
     /**
      * A ReactNode to render at the end of the input field before the addonAfter.
      * Mainly meant for the icon button actions for special input types.

package/src/components/PhoneInput/PhoneInputValidationUtils.d.ts

@@ -1,14 +1,9 @@
 import { ValidatePhoneNumberLengthResult } from "libphonenumber-js";
 export type PhoneInputValidationError = "REQUIRED" | "REQUIRED_COUNTRY" | "INVALID_NUMBER" | ValidatePhoneNumberLengthResult | undefined;
-export interface PhoneNumberValueForValidation {
-    phone?: string | undefined | null;
-    national?: string | undefined | null;
-    countryCode?: string | undefined | null;
-}
 /**
  * Validates a phone number
  */
-export declare const validatePhoneNumber: ({ phone, countryCode, national, }: PhoneNumberValueForValidation) => PhoneInputValidationError;
+export declare const validatePhoneNumber: (phoneNumber: string | undefined) => PhoneInputValidationError;
 /**
  * Checks if the country code is valid and required
  */

package/src/index.d.ts

@@ -14,6 +14,7 @@ export * from "./components/OptionCard/OptionCard";
 export * from "./components/PasswordField";
 export * from "./components/PasswordInput/PasswordInput";
 export * from "./components/PhoneField/PhoneField";
+export * from "./components/PhoneFieldWithController/PhoneFieldWithController";
 export * from "./components/PhoneInput/PhoneInput";
 export * from "./components/PhoneInput/PhoneInputValidationUtils";
 export * from "./components/PhoneInput/PhoneNumberUtilities";
@@ -38,3 +39,5 @@ export * from "./components/UrlField/UrlField";
 export * from "./components/UrlInput/UrlInput";
 export * from "./utilities/emailUtils";
 export * from "./utilities/usePhoneInput";
+export * from "./utilities/useZodValidators";
+export * from "./utilities/useGetPhoneValidationRules";

package/src/utilities/useGetPhoneValidationRules.d.ts

@@ -0,0 +1,12 @@
+import { RegisterOptions } from "react-hook-form";
+/**
+ * Custom hook to get phone number validation rules.
+ *
+ * @returns {object} An object containing the `getPhoneNumberValidationRules` method.
+ * @example
+ * const { getPhoneNumberValidationRules } = useGetPhoneValidationRules();
+ * const validationRules = getPhoneNumberValidationRules(false);
+ */
+export declare const useGetPhoneValidationRules: () => {
+    getPhoneNumberValidationRules: (skipValidation?: boolean) => RegisterOptions;
+};

package/src/utilities/useZodValidators.d.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+/**
+ * Provides Zod validation schemas with custom validators.
+ *
+ * @returns {object} An object containing various Zod validators.
+ * @example
+ * const { ZodPhoneValidator } = useZodValidators();
+ */
+export declare const useZodValidators: () => {
+    ZodPhoneValidator: z.ZodEffects<z.ZodString, string, string>;
+};