React Component Library:

Installation:

npm install @mirach-gtls/gtls-react-component-library

Components:

This library currently has six components:

• WhiteBox
• NavBar
• AppHeader
• Button
• MenuButton
• TableComp

All styles should be implemented using tailwindcss

WhiteBox:

It accepts 2 props:

• title : String
• component : JSX element

Code example:

<WhiteBox title="My requests" component={} />

P.S: The whitebox already has some styles imbedded and will take the full width and height of parent component if it's inveloped in one or take the size of the title and component that will be passed as props

MenuButton:

It accepts 5 props:

• id : String /// id of the menu button that will be used to navigate between pages
• activeButtonId: string /// active button id that if it matches will be given a different style
• onClick: function
• title: string /// label of the menu button
• icon: JSX element

Code example:

Svg element in a component <MenuButton id="dashboard" activeButtonId={activeButtonId} onClick={handleClick} title="Dashboard" icon={}/> or Svg element directly: P.S: Svg should not have a class or className and the fill and stroke should be set to "inherit" for the hover or when active effects to be displayed correctly

Button:

It accepts 6 props:

• name: string
• icon: JSX element optional
• className : for CSS styling
• disabled: boolean optional
• onClick function
• hoverBg: string optional if you choose to include it in className

Code example:

AppHeader:

It accepts 2 props:

• NotificationBell: JSX element optional
• changeState: function /// prop passed from parent

Code example:

<AppHeader NotificationBell={} changeState={changeState}/>

NavBar:

It accepts 6 props:

• pp: JSX element of the picture of the employee
• name: string /// name of the employee
• logo: ReactNode; JSX element
• logout function
• buttons: Button[]; /// array of buttons (different component than the button that is previously mentioned) that will be rendered
• logoutIcon: JSX element /// icon that can be a string or a jsx element

Code example:

P.S: buttons should be in the following format:

TableComp:

It accepts 3 props:

• headers: HeaderData[];
• body: JSON Data;
• fieldStyles : JSON

Code example:

P.S: headers should abid the following structure:

P.SS: fieldStyles should abid the following structure:

You can specify the style that you want in each header A method is implemented that will transform the json data into the following to render the table data correctly

Each object represents a element and the cells represent the inside of it