@devtron-labs/devtron-fe-common-lib 0.3.0 → 0.3.2-beta-1

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/Button/Button.component.d.ts

@@ -57,6 +57,11 @@ import { ButtonProps } from './types';
  * ```tsx
  * <Button component={ButtonComponentType.link} linkProps={{ to: '#' }} />
  * ```
+ *
+ * @example Icon button
+ * ```tsx
+ * <Button icon={<ICCube />} ariaLabel="Label" />
+ * ```
  */
-declare const Button: ({ dataTestId, text, variant, size, style, startIcon, endIcon, disabled, isLoading, showTooltip, tooltipProps, ...props }: ButtonProps) => JSX.Element;
+declare const Button: ({ dataTestId, text, variant, size, style, startIcon, endIcon, disabled, isLoading, showTooltip, tooltipProps, icon, ariaLabel, ...props }: ButtonProps) => JSX.Element;
 export default Button;

package/dist/Shared/Components/Button/constants.d.ts

@@ -1,5 +1,8 @@
 import { ProgressingProps } from '../../../Common/Types';
 import { ButtonProps } from './types';
 export declare const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string>;
+export declare const ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string>;
 export declare const BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP: Record<ButtonProps['size'], string>;
+export declare const ICON_BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP: Record<ButtonProps['size'], string>;
 export declare const BUTTON_SIZE_TO_LOADER_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']>;
+export declare const ICON_BUTTON_SIZE_TO_LOADER_SIZE_MAP: Record<ButtonProps['size'], ProgressingProps['size']>;

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

@@ -11,6 +11,7 @@ export declare enum ButtonVariantType {
 export declare enum ButtonStyleType {
     default = "default",
     negative = "negative",
+    negativeGrey = "negative-grey",
     positive = "positive",
     warning = "warning",
     neutral = "neutral"
@@ -59,18 +60,6 @@ export type ButtonProps = ({
      * @default ButtonStyleType.default
      */
     style?: ButtonStyleType;
-    /**
-     * Text to be displayed in the button
-     */
-    text: string;
-    /**
-     * If provided, icon to be displayed at the start of the button
-     */
-    startIcon?: ReactElement;
-    /**
-     * If provided, icon to be displayed at the end of the button
-     */
-    endIcon?: ReactElement;
     /**
      * If true, the loading state is shown for the button with disabled
      */
@@ -97,4 +86,32 @@ export type ButtonProps = ({
 } | {
     showTooltip?: never;
     tooltipProps?: never;
+}) & ({
+    icon?: never;
+    ariaLabel?: never;
+    /**
+     * Text to be displayed in the button
+     */
+    text: string;
+    /**
+     * If provided, icon to be displayed at the start of the button
+     */
+    startIcon?: ReactElement;
+    /**
+     * If provided, icon to be displayed at the end of the button
+     */
+    endIcon?: ReactElement;
+} | {
+    /**
+     * If provided, icon button is rendered
+     */
+    icon: ReactElement;
+    /**
+     * Label for the icon button for accessibility.
+     * Shown on hover in tooltip if tippy is not provided explicitly
+     */
+    ariaLabel: string;
+    text?: never;
+    startIcon?: never;
+    endIcon?: never;
 });

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

@@ -1,2 +1,4 @@
 import { ButtonProps } from './types';
-export declare const getButtonDerivedClass: ({ size, variant, style, isLoading, }: Pick<ButtonProps, "variant" | "size" | "style" | "isLoading">) => string;
+export declare const getButtonIconClassName: ({ size, icon }: Pick<ButtonProps, "size" | "icon">) => string;
+export declare const getButtonLoaderSize: ({ size, icon }: Pick<ButtonProps, "size" | "icon">) => number;
+export declare const getButtonDerivedClass: ({ size, variant, style, isLoading, icon, }: Pick<ButtonProps, "variant" | "size" | "style" | "isLoading" | "icon">) => 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,29 @@
+import { ChangeEvent, FormEvent } from 'react';
+import { UseFormSubmitHandler, UseFormValidations } from './useForm.types';
+/**
+ * A custom hook to manage form state, validation, and submission handling.
+ *
+ * @template T - A record type representing form data.
+ * @param options (optional) - Options for initial form values, validation rules, and form mode.
+ * @param options.validations - An object containing validation rules for form fields.
+ * @param options.initialValues - An object representing the initial values of the form.
+ * @param options.mode (default: `onChange`) - A string to set validation mode, either 'onChange' or 'onBlur'.
+ * @returns Returns form state, handlers for change and submission, validation errors, and a trigger function for manual validation.
+ */
+export declare const useForm: <T extends Record<keyof T, any> = {}>(options?: {
+    validations?: UseFormValidations<T>;
+    initialValues?: Partial<T>;
+    mode?: "onChange" | "onBlur";
+}) => {
+    data: T;
+    errors: Partial<Record<keyof T, string | string[]>>;
+    register: <S extends unknown>(name: keyof T, sanitizeFn?: (value: string) => S) => {
+        onChange: (e: ChangeEvent<HTMLInputElement & HTMLSelectElement>) => void;
+        onBlur: () => void;
+    };
+    handleSubmit: (onValid: UseFormSubmitHandler<T>) => (e: FormEvent<HTMLFormElement>) => void;
+    trigger: (name: keyof T | (keyof T)[]) => (string | string[]) | (string | string[])[];
+    touchedFields: Partial<Record<keyof T, boolean>>;
+    dirtyFields: Partial<Record<keyof T, boolean>>;
+    isDirty: boolean;
+};

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

@@ -0,0 +1,30 @@
+import { FormEvent } from 'react';
+type ValidationRequired = boolean | {
+    value: boolean;
+    message: string;
+};
+type ValidationPattern = {
+    value: RegExp;
+    message: string;
+} | {
+    value: RegExp;
+    message: string;
+}[];
+type ValidationCustom = {
+    isValid: (value: string) => boolean;
+    message: string;
+} | {
+    isValid: (value: string) => boolean;
+    message: string;
+}[];
+export interface UseFormValidation {
+    required?: ValidationRequired;
+    pattern?: ValidationPattern;
+    custom?: ValidationCustom;
+}
+export type UseFormErrors<T> = Partial<Record<keyof T, string | string[]>>;
+export type DirtyFields<T> = Partial<Record<keyof T, boolean>>;
+export type TouchedFields<T> = Partial<Record<keyof T, boolean>>;
+export type UseFormValidations<T extends {}> = Partial<Record<keyof T, UseFormValidation>>;
+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;