@devtron-labs/devtron-fe-common-lib 0.3.5-beta-1 → 0.3.5-beta-2

package/dist/Common/CustomInput/CustomInput.d.ts

@@ -1,2 +1,2 @@
 import { CustomInputProps } from './Types';
-export declare const CustomInput: ({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, handleOnBlur, readOnly, noTrim, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, inputProps, }: CustomInputProps) => JSX.Element;
+export declare const CustomInput: ({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, onBlur, readOnly, noTrim, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, inputProps, }: CustomInputProps) => JSX.Element;

package/dist/Common/CustomInput/Types.d.ts

@@ -17,7 +17,7 @@ export interface CustomInputProps {
     rootClassName?: string;
     error?: string[] | string;
     helperText?: ReactNode;
-    handleOnBlur?: (e: any) => void;
+    onBlur?: (e: any) => void;
     readOnly?: boolean;
     noTrim?: boolean;
     onKeyPress?: (e: any) => void;

package/dist/Common/DeleteComponentModal/types.d.ts

@@ -1,5 +1,8 @@
 export interface DeleteComponentProps {
-    setDeleting: (boolean: any) => void;
+    /**
+     * @deprecated - Delete component internally handles loading for the `Delete Button`.
+     */
+    setDeleting?: (boolean: any) => void;
     toggleConfirmation: any;
     deleteComponent: (any: any) => Promise<any>;
     title: string;

package/dist/Common/Drawer/Drawer.d.ts

@@ -10,5 +10,5 @@ interface drawerInterface {
     parentClassName?: string;
     onEscape?: (e?: any) => void;
 }
-export declare const Drawer: ({ children, position, height, width, minWidth, maxWidth, parentClassName, onEscape, onClose, }: drawerInterface) => JSX.Element;
+export declare const Drawer: ({ children, position, height, width, minWidth, maxWidth, parentClassName, onEscape, }: drawerInterface) => JSX.Element;
 export {};

package/dist/Common/Helper.d.ts

@@ -22,12 +22,6 @@ export declare const refresh: () => void;
 export declare const reportIssue: () => void;
 export declare function useEffectAfterMount(cb: any, dependencies: any): void;
 export declare function getCookie(sKey: any): string;
-export declare function useForm(stateSchema: any, validationSchema: {}, callback: any): {
-    state: any;
-    disable: boolean;
-    handleOnChange: (event: any) => void;
-    handleOnSubmit: (event: any) => void;
-};
 export declare function handleUTCTime(ts: string, isRelativeTime?: boolean): string;
 export declare function useSearchString(): UseSearchString;
 export declare const closeOnEscKeyPressed: (e: any, actionClose: () => void) => void;

package/dist/Shared/Components/TabGroup/TabGroup.types.d.ts

@@ -51,11 +51,6 @@ export type TabProps = {
      * Text label for the tab.
      */
     label: string;
-    /**
-     * Description for the tab.
-     * @note - If passed as a `string[]`, it will be rendered with a bullet in-between strings.
-     */
-    description?: string | string[];
     /**
      * Icon component to be displayed in the tab.
      * This should be a functional component that renders an SVG.
@@ -97,7 +92,7 @@ export interface TabGroupProps {
      * Size of the tabs.
      * @default ComponentSizeType.large
      */
-    size?: ComponentSizeType.large | ComponentSizeType.medium | ComponentSizeType.xl;
+    size?: ComponentSizeType.large | ComponentSizeType.medium;
     /**
      * Optional component to be rendered on the right side of the tab list.
      */

package/dist/Shared/Components/TabGroup/TabGroup.utils.d.ts

@@ -5,4 +5,3 @@ export declare const getClassNameBySizeMap: ({ hideTopPadding, alignActiveBorder
     badgeClassName: string;
 }>;
 export declare const getIconColorClassMap: ({ active }: Pick<TabProps, "active">) => Record<TabProps["iconType"], string>;
-export declare const tabGroupClassMap: Record<TabGroupProps['size'], string>;

package/dist/Shared/Hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './UsePrompt';
 export * from './useGetResourceKindsOptions';
 export * from './UseDownload';
+export * from './useForm';

package/dist/Shared/Hooks/useForm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useForm';
+export * from './useForm.types';

package/dist/Shared/Hooks/useForm/useForm.d.ts

@@ -0,0 +1,71 @@
+import { ChangeEvent, FormEvent } from 'react';
+import { UseFormSubmitHandler, UseFormValidations } from './useForm.types';
+/**
+ * A custom hook to manage form state, validation, and submission handling.
+ *
+ * @param options - Optional configuration object for the form.
+ * @returns The form state and utility methods
+ */
+export declare const useForm: <T extends Record<keyof T, any> = {}>(options?: {
+    /** An object containing validation rules for each form field. */
+    validations?: UseFormValidations<T>;
+    /** An object representing the initial values for the form fields. */
+    initialValues?: Partial<T>;
+    /** Defines when validation should occur:
+     * - 'onChange': Validation occurs when the user modifies the input
+     * - 'onBlur': Validation occurs when the input loses focus.
+     *  @default 'onChange'
+     */
+    validationMode?: "onChange" | "onBlur";
+}) => {
+    /** The current form data. */
+    data: T;
+    /** An object containing validation errors for each form field. */
+    errors: Partial<Record<keyof T, string | string[]>>;
+    /**
+     * Registers form input fields with onChange, onBlur and onFocus handlers.
+     *
+     * @param name - The key of the form field to register.
+     * @param sanitizeFn - An optional function to sanitize the input value.
+     * @returns An object containing form field `name`, `onChange`, `onBlur` and `onFocus` event handlers.
+     */
+    register: <V extends unknown = string, S extends unknown = unknown>(name: keyof T, sanitizeFn?: (value: V) => S, registerOptions?: {
+        /**
+         * Prevents the input value from being trimmed.
+         *
+         * If `noTrim` is set to true, the input value will not be automatically trimmed.\
+         * This can be useful when whitespace is required for certain inputs.
+         *
+         * @default false - By default, the input will be trimmed.
+         */
+        noTrim?: boolean;
+    }) => {
+        onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        onBlur: () => void;
+        onFocus: () => void;
+        name: keyof T;
+    };
+    /**
+     * Handles form submission, validates all form fields, and calls the provided `onValid` function if valid.
+     *
+     * @param onValid - A function to handle valid form data on submission.
+     * @returns The event handler for form submission.
+     */
+    handleSubmit: (onValid: UseFormSubmitHandler<T>) => (e: FormEvent<HTMLFormElement>) => void;
+    /**
+     * Manually triggers validation for specific form fields.
+     *
+     * @param name - The key(s) of the form field(s) to validate.
+     * @returns The validation error(s), if any.
+     */
+    trigger: (name: keyof T | (keyof T)[]) => (string | string[]) | (string | string[])[];
+    /** An object representing additional form state. */
+    formState: {
+        /** An object indicating which fields have been touched (interacted with). */
+        touchedFields: Partial<Record<keyof T, boolean>>;
+        /** An object indicating which fields have been modified. */
+        dirtyFields: Partial<Record<keyof T, boolean>>;
+        /** A boolean indicating if any field has been modified. */
+        isDirty: boolean;
+    };
+};

package/dist/Shared/Hooks/useForm/useForm.types.d.ts

@@ -0,0 +1,69 @@
+import { FormEvent } from 'react';
+/**
+ * Describes the "required" validation rule.
+ * It can be a simple boolean or an object containing a boolean value and an error message.
+ */
+type ValidationRequired = boolean | {
+    value: boolean;
+    message: string;
+};
+/**
+ * Describes the "pattern" validation rule, which ensures a value matches a specific regular expression.
+ * It can be a single validation object or an array of multiple patterns.
+ */
+type ValidationPattern = {
+    value: RegExp;
+    message: string;
+} | {
+    value: RegExp;
+    message: string;
+}[];
+/**
+ * Describes custom validation logic.
+ * It checks if a value passes a custom validation function, which returns a boolean.
+ * If validation fails, an error message is provided.
+ */
+type ValidationCustom = {
+    isValid: (value: string) => boolean;
+    message: string;
+} | {
+    isValid: (value: string) => boolean;
+    message: string;
+}[];
+/**
+ * Defines the validation rules for form fields.
+ * Includes `required`, `pattern`, and `custom` validation types.
+ */
+export interface UseFormValidation {
+    required?: ValidationRequired;
+    pattern?: ValidationPattern;
+    custom?: ValidationCustom;
+}
+/**
+ * Represents the structure for form validation errors.
+ * Maps each field to an error message or an array of error messages.
+ */
+export type UseFormErrors<T> = Partial<Record<keyof T, string | string[]>>;
+/**
+ * Represents the fields that have been modified ("dirty") in the form.
+ * Maps each field to a boolean value indicating whether it has been changed.
+ */
+export type DirtyFields<T> = Partial<Record<keyof T, boolean>>;
+/**
+ * Represents the fields that have been interacted with ("touched") in the form.
+ * Maps each field to a boolean value indicating whether it has been focused or interacted with.
+ */
+export type TouchedFields<T> = Partial<Record<keyof T, boolean>>;
+/**
+ * Defines the structure for form validations.
+ * Maps each form field to its corresponding validation rules.
+ */
+export type UseFormValidations<T extends {}> = Partial<Record<keyof T, UseFormValidation>>;
+/**
+ * Describes the function signature for handling form submission.
+ *
+ * @param data - The form data collected during submission.
+ * @param e - The form event, optionally passed when the form is submitted.
+ */
+export type UseFormSubmitHandler<T extends {}> = (data: T, e?: FormEvent<HTMLFormElement>) => void;
+export {};

package/dist/Shared/Hooks/useForm/useForm.utils.d.ts

@@ -0,0 +1,10 @@
+import { UseFormValidation } from './useForm.types';
+/**
+ * Validates a form field based on the provided validation rules.
+ *
+ * @template T - A record type representing form data.
+ * @param value - The value of the form field to be validated.
+ * @param validation - The validation rules for the form field.
+ * @returns Returns error message(s) or null if valid.
+ */
+export declare const checkValidation: <T extends Record<keyof T, any> = {}>(value: T[keyof T], validation: UseFormValidation) => string | string[] | null;