@mirach-gtls/gtls-react-component-library v1.1.26
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
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago