This components library utilizing Typescript to define the types of the configurations of the components.
Common Types
Animation Speed Types
// Animation speed
export type ANIMATE_SPEED =
| undefined
| false
| "slower"
| "slow"
| "normal"
| "fast"
| "faster";
// Rounded corner
export type ROUNDED =
| "sm"
| "md"
| "lg"
| "xl"
| "full"
| "none"
| undefined;
// Shadow size
export type SHADOW =
| "sm"
| "md"
| "lg"
| "xl"
| "2xl"
| "inner"
| "none"
| undefined;
SEO Component
SEO component data type
export type SEO_DATA = {
siteName: string; // Available via .env
pageTitle: string;
description: string;
keywords?: string;
logoPath?: string; // Available via .env
imgPath?: string;
siteLang?: string; // Available via .env
businessSchema?: string;
siteSchema?: string;
pageSchema?: string;
pageType?: string;
video?: string;
gtmCode?: string; // Available via .env
};
Breadcrumb Data Type
Type definition for 'Breadcrumb Data'
export type BREADCRUMB_DATA = Array<{ text: string; url?: string }>;
Button Size Type
Type definition
// Button size types
export type BUTTON_SIZE = "xs" | "sm" | "md" | "lg" | "xl" | "0";
Dropdown Types
Type definition
// Dropdown configuration type
export type DROPDOWN_ITEM_CONFIG = {
activeClass?: string;
linkClass?: string;
dividerClass?: string;
headerClass?: string;
};
// Dropdown item data type
export type DROPDOWN_ITEM = {
active?: boolean;
url?: string;
text?: string;
type?: "link" | "divider" | "header";
};
Input Types
Type definition
// Input config type
export type INPUT_CONFIG = {
animate?: ANIMATE_SPEED;
grow?: boolean;
labelClasses?: string;
reset?: boolean;
rounded?: ROUNDED;
size?: "sm" | "md" | "lg" | "xl";
variant?: INPUT_VARIANT;
};
// Input type types
export type INPUT_TYPE =
| 'color'
| 'date'
| 'datetime-local'
| 'email'
| 'file'
| 'hidden'
| 'image'
| 'month'
| 'number'
| 'password'
| 'reset'
| 'submit'
| 'tel'
| 'text'
| 'time'
| 'url'
| 'week'
| 'search';
// Input variant
export type INPUT_VARIANT = "bordered" | "filled" | "flat";
Notification Types
Type definition
// Notification configuration type
export type NOTIFY_CONFIG = {
removeAfter?: number;
removeOnClick?: boolean;
rounded: ROUNDED;
variant: "card" | "cardLight" | "borderTop" | "borderBottom" | "borderStart";
};
// Types of Notification
export type NOTIFICATION_TYPE = "error" | "info" | "success" | "warning";
Select Data Type
Type definition
export type SELECT_DATA = Array<{ disabled?: boolean, selected?: boolean, text: string, value?: any } | string>;
Type Definition for Table
Type definition
// Table configuration type
export type TABLE_CONFIG = {
animate: ANIMATE_SPEED;
border: "x" | "y" | "both" | "none";
borderColor: string;
hover: boolean | string;
space: "compact" | "default" | "comfortable" | string;
stripe: boolean | string;
containerClass: string;
trClass: string;
};
// Table Row data type
export type TABLE_ROW = object | (object | string | string[])[] | undefined;
Tab Config Type
Type definition
// Tab configuration type
export type TAB_CONFIG = {
activeTabClasses?: string;
animate?: ANIMATE_SPEED;
border: boolean,
inactiveTabClasses?: string;
tabPanelClasses?: string;
variant: 'tabs' | 'pills';
};