coducer-front-end
Version:
This will help you in Accordion, BreadCrumb, Button, Creatable Select, Select, Formik Date Field, Formik Field, Formik PhoneNumber, Formik Time Field, Input Field, Loader, Modal, NavBarMenu, Notify, Pill, Toggle Switch
281 lines (258 loc) • 10.2 kB
text/typescript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { FieldInputProps } from 'formik';
import React$1, { ReactNode, ChangeEvent, FocusEvent, ReactElement } from 'react';
import { AnySchema, AnyObject } from 'yup';
type ToastProps = {
message: string;
type: "SUCCESS" | "ERROR" | "LOADING";
position?: "top-right" | "top-center" | "top-left" | "bottom-right" | "bottom-center" | "bottom-left";
autoClose?: number;
};
type ModalProps = {
show: boolean;
onHide?: () => void;
title?: string;
children: ReactNode;
className?: string;
size: "sm" | "lg" | "xl";
fullscreen?: string | true | undefined;
closeButton?: boolean;
};
type InputFieldProps = {
validationSchema: AnySchema<AnyObject> | undefined;
label: string;
type?: string;
field: {
name: string;
value: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
};
isValid: boolean;
error: string | undefined;
autoFocus?: boolean;
placeholder?: string;
component?: ReactNode;
disabled?: boolean;
as?: string;
isPassword?: boolean;
setPasswordIcon?: (data: boolean) => void;
passwordIcon?: boolean;
maxLength?: number;
isAuth?: boolean;
rightIcon?: boolean;
icon?: React.ReactNode;
onBlur?: () => void;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
};
type CustomInputFieldProps = {
validationSchema: AnySchema<AnyObject> | undefined;
label: string;
field: {
name: string;
value: Date | string | string[] | number | undefined | unknown;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
onBlur: (e?: FocusEvent<HTMLInputElement, Element> | undefined) => void;
};
error: string | undefined;
children: ReactNode;
inputId: string;
};
type FormikTimeFieldProps = {
name: string;
label: string;
errors?: string | "";
validationSchema?: AnySchema<AnyObject, any>;
isDisabled?: boolean;
};
type FormikPhoneNumberProps = {
name: string;
label: string;
errors?: string | undefined;
isDisabled?: boolean;
validationSchema?: AnySchema<AnyObject>;
onChange?: (phoneNumber: string) => void;
isInternational?: boolean;
};
type FormikFieldProps = {
name: string;
errors: Record<string, string>;
validationSchema: AnySchema<AnyObject>;
label: string;
type: string;
autoFocus?: boolean;
placeholder?: string;
disabled?: boolean;
as?: string;
isPassword?: boolean;
setPasswordIcon?: (data: boolean) => void;
passwordIcon?: boolean;
maxLength?: number;
isAuth?: boolean;
rightIcon?: boolean;
icon?: React.ReactNode;
onBlur?: () => void;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
};
type FormikDateFieldProps = {
name: string;
label: string;
errors?: string | undefined;
validationSchema?: AnySchema<AnyObject>;
minDate?: Date | string | number | undefined;
maxDate?: Date | string | number | undefined;
isDisabled?: boolean;
onlyYearPicker?: boolean;
onlyMonthPicker?: boolean;
};
type CustomStylesProps = {
isFocused: boolean;
isSelected: boolean;
};
type Option = {
label: string;
value: string;
id?: number;
};
type CustomCreatableSelectProps = {
options: Option[];
isMulti?: boolean;
className?: string;
placeholder?: string;
callback?: (value: Option[]) => void;
isDisabled: boolean;
isClearable: boolean;
field?: FieldInputProps<any> extends infer F ? F : never;
form?: {
setFieldValue: (name: string, value: string | string[]) => void;
};
displayName?: string;
maxLength?: number;
};
type CustomSelectProps = {
options: Option[] | undefined;
isMulti?: boolean;
className?: string;
placeholder?: string;
id: string;
callback?: (value: Option) => void;
isDisabled: boolean;
value?: Option | null | undefined | string;
isClearable?: boolean;
onFieldUpdate?: (value: Option[] | Option) => void;
field?: FieldInputProps<Option | null | undefined | string> & {
onBlur?: () => void;
};
form?: {
setFieldValue: (name: string, value: string | string[]) => void;
};
};
type AccordionProps = {
accordionText?: string | undefined;
children: ReactElement;
className?: string;
icon?: ReactNode;
rightHeader?: ReactNode;
};
type BreadCrumbProps = {
title: string;
url?: string;
isSubTitle?: boolean;
isTitle?: boolean;
breadCrumb?: {
title: string;
url: string;
}[] | undefined;
};
type ButtonProps = {
text: string;
isSolid?: boolean;
isSolidSecondary?: boolean;
isDanger?: boolean;
className?: string;
type?: "submit" | "reset" | "button" | undefined;
onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
onDoubleClick?: (() => void) | undefined;
isDisabled?: boolean;
isLoading?: boolean;
prefixIconChildren: ReactNode;
sufixIconChildren: ReactNode;
};
type NavBarMenuItemsProps = {
url: string;
text: string;
subMenu?: string;
isRadius?: boolean;
menu?: string;
icon?: ReactNode;
};
type PillProps = {
pillText: string;
pillColorClassName: string;
};
declare const Accordion: ({ accordionText, children, className, icon, rightHeader, }: AccordionProps) => react_jsx_runtime.JSX.Element;
declare const BreadCrumb: ({ breadCrumb, }: {
breadCrumb: BreadCrumbProps[];
}) => react_jsx_runtime.JSX.Element;
declare const Button: ({ text, isSolid, isSolidSecondary, isDanger, type, onClick, onDoubleClick, className, isDisabled, isLoading, prefixIconChildren, sufixIconChildren, }: ButtonProps) => react_jsx_runtime.JSX.Element;
declare const CustomCreatableSelect: ({ className, placeholder, field, form, options, isDisabled, isMulti, isClearable, callback, displayName, maxLength, }: CustomCreatableSelectProps) => react_jsx_runtime.JSX.Element;
declare const CustomSelect: ({ className, placeholder, field, form, id, isDisabled, options, isMulti, value, isClearable, onFieldUpdate, }: CustomSelectProps) => react_jsx_runtime.JSX.Element;
declare const CustomStyles: {
option: (styles: any, { isFocused, isSelected }: CustomStylesProps) => any;
control: (provided: any) => any;
menuList: (styles: any) => any;
};
declare const FormikDateField: ({ name, label, errors, validationSchema, minDate, maxDate, isDisabled, onlyYearPicker, onlyMonthPicker, }: FormikDateFieldProps) => react_jsx_runtime.JSX.Element;
declare const FormikField: ({ validationSchema, errors, label, type, name, autoFocus, placeholder, disabled, as, isPassword, setPasswordIcon, passwordIcon, maxLength, rightIcon, icon, onBlur, isAuth, onChange, }: FormikFieldProps) => react_jsx_runtime.JSX.Element;
declare const FormikPhoneNumber: ({ name, label, errors, validationSchema, isDisabled, onChange, isInternational, }: FormikPhoneNumberProps) => react_jsx_runtime.JSX.Element;
declare const FormikTimeField: ({ name, label, errors, validationSchema, isDisabled, }: FormikTimeFieldProps) => react_jsx_runtime.JSX.Element;
declare const CustomInputField: ({ validationSchema, label, field, error, children, inputId, }: CustomInputFieldProps) => react_jsx_runtime.JSX.Element;
declare const InputField: ({ validationSchema, label, type, field, isValid, autoFocus, error, placeholder, disabled, isPassword, setPasswordIcon, passwordIcon, maxLength, rightIcon, icon, onBlur, as, isAuth, onChange, }: InputFieldProps) => react_jsx_runtime.JSX.Element;
declare const Loader: () => react_jsx_runtime.JSX.Element;
declare const Modal: ({ show, onHide, title, children, className, size, fullscreen, closeButton, }: ModalProps) => react_jsx_runtime.JSX.Element;
declare const ModalProvider: React$1.FC<{
children: ReactNode;
}>;
declare const useModal: ({ style, content, }: {
style?: {
title?: string;
className?: string;
size: "sm" | "lg" | "xl";
fullscreen?: string | true | undefined;
closeButton?: boolean;
} | undefined;
content?: ReactNode | undefined;
}) => () => void;
declare const NavBarMenuItems: ({ url, text, subMenu, isRadius, menu, icon, }: NavBarMenuItemsProps) => react_jsx_runtime.JSX.Element;
declare const Notify: ({ message, type, position, autoClose, }: ToastProps) => void;
declare const Pill: ({ pillText, pillColorClassName }: PillProps) => react_jsx_runtime.JSX.Element;
interface SwitchProps {
toggle?: boolean;
textOff: string;
textOn: string;
isSwitchDefault?: boolean;
checked?: boolean;
isSwitchEligibility?: boolean;
className?: string;
onChange?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
isDisabled?: boolean;
}
declare const ToggleSwitch: ({ textOff, textOn, isSwitchDefault, onChange, className, isDisabled, checked, isSwitchEligibility, }: SwitchProps) => react_jsx_runtime.JSX.Element;
interface Params {
[key: string]: string | number | (string | number)[] | boolean | null | undefined;
}
interface RouteParams {
[key: string]: string | undefined;
}
interface MenuItem {
url: string;
text: string;
icon?: ReactNode;
}
declare const BuildQueryParams: (params?: Params) => string;
declare const ToPascalCase: (data: string) => string;
declare const ToHexColor: (str: string) => string;
declare const RemoveNullValues: (obj: any) => any;
declare const IsNullOrUndefinedOrEmpty: (value: string | undefined | null) => Promise<boolean>;
declare const ToBase64: (file: Blob) => Promise<unknown>;
declare const DownloadFile: (data: any, fileName: string, fileExtension: string) => void;
export { Accordion, BreadCrumb, BuildQueryParams, Button, CustomCreatableSelect, CustomInputField, CustomSelect, CustomStyles, DownloadFile, FormikDateField, FormikField, FormikPhoneNumber, FormikTimeField, InputField, IsNullOrUndefinedOrEmpty, Loader, type MenuItem, Modal, ModalProvider, NavBarMenuItems, Notify, type Params, Pill, RemoveNullValues, type RouteParams, type SwitchProps, ToBase64, ToHexColor, ToPascalCase, ToggleSwitch, useModal };