# React Developers components

# Components 
1. Box  <!-- [docs](src/components/box/README.MD) -->
1. Fonts  <!-- [docs](src/components/fonts/README.MD) -->
3. Accordion
4.	button
5. Dropdown
6. Input
7. Image
8. Table


# ThemeTypes
```js
const theme: ThemeTypes = {
	palette: {
		Blue: {
			dark: {
				5: '#F2F6FA'
			},
		},
	};
	shadows,
	typography,
	zIndex,
	shape,
	fontSizes,
};
```

# 1.  **Flex, Grid, Container**

<br /><br /><br />
##  **Box**

Props|Values|Default
--|--|--
justifyContent|string|center|
alignItems|"flex-start" , "flex-end" , "center" , "baseline" , "stretch"|center|
alignContent | "flex-start" , "flex-end" , "center" , "space-between" , "space-around" , "stretch" | null
width | string eg: 20px | 100%
height | string eg: 20px | 100%
textAlign | "left" , "right" , "center" , "justify" , "inherit" | center
wrap(fle-wrap) | "nowrap" , "wrap" , "wrap-reverse" | wrap
direction(flex-direction)| row, row-reverse, column, column-reverse | row
margin | string. Eg: 20px | 0
pad(padding) | string | 0
bgColor(background-color) | string from theme  | transparent

### __Usage__
```js    
const { Flex } = Components(theme)

const App = () => (
	<Flex
		justifyContent="center"
		bgColor='Blue.dark.5'
		// ...other propps if needed
	>
		This is a div
	</Flex>
)
```
<br /><br /><br />

##  **Grid**
Props|Values|Default
--|--|--
columns(grid-template-columns) | string | 1fr
rows(gird-template-rows) | string | auto
gap(grid-gap) | string | 10px
justifyContent|string|center|
alignItems|"flex-start" , "flex-end" , "center" , "baseline" , "stretch"|center|
width | | 100%

### __Usage__
```js
import { Components, ThemeTypes } from "devs-react-component-library"

const theme: ThemeTypes = {
	// palette: 
	// shadows,
	// typography,
	// zIndex,
	// shape,
	// fontSizes,
};
const { Grid } = Components(theme)

const App = () => (
	<Grid
		row="1fr 1fr"
		// ...other propps if needed
	>
		This is a div
	</Grid>
)

   
```

<br /><br /><br />

##  **Container**

Props |Values|Default
--|--|--
width | string eg: 20px | 100%
height | string eg: 20px | 100%
textAlign | "left" , "right" , "center" , "justify" , "inherit" | center
margin | string. Eg: 20px | 0
pad(padding) | string | 0
bgColor(background-color) | string from theme  | transparent

### __Usage__
```js
import { Components, ThemeTypes } from "devs-react-component-library"

const theme: ThemeTypes = {
	palette: {
		read:   '#F2F6FA' 
	};
	// shadows,
	// typography,
	// zIndex,
	// shape,
	// fontSizes,
};
const { Grid } = Components(theme)


const App = () => (
	<Container
		width="50px"
		bgColor='read'
		// ...other propps if needed
	>
		This is a div
	</Container>
)
```
 
<br /><br /><br />
 # 2.	**Fonts**
 This applies to all fonts

**UAGES**
 ```js
     const theme: ThemeTypes = {
        const palette = {
			white,
			common: {
				white,
				transparent,
			},
			Black: {
				default: "#062A54",
				80: "#0B2F59",
			},
		
		}
        // shadows,
        typography: {
			fontFamily: {
				quicksand: "Quicksand-regular, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
				quicksandLight: "Quicksand-light, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
			},
			fontWeight: {
				300: 300,
				400: 400,
				500: 500,
				600: 600,
				700: 700,
				normal: "normal",
			},
			lineHeight: {
				96: "96px",
				69: "69px",
			},
		}
        // zIndex,
        // shape,
        fontSizes: {
			40: "40px",  
			46: "46px",  
			64: "64px",  
		}
    };
  	export const { Span} = Components(theme);


<Span 
	fontFamily='quicksand' 
	weight="700" 
	ineHeight="69" 
	size="64" 
	colour={"Black.default"} 
	center
>
	Hello Wolrd
</Span>
 ```

 Extend any font (typescript)
 ```js
export const { Span, FontTypes} = Components(theme);

export const SeeAllSpan =  styled(Span)<FontTypes>`
	cursor: pointer;
`;
 ```

<br /><br /><br />
 # 3. **Accordion**
Props|Values|Default
--|--|--
gap|string|5px|
accordions | array of object | none
visible | number | none
setVisible | `React.Dispatch<React.SetStateAction<number>>` | none

 **USAGE**

 ```js
export const { Accordion} = Components(theme);


const [ visible, setVisible] = useState(-1);

const accordions = [
	{
		head: "Lorem ipsum dolo",
		details: "Lorem ips id."
	},
	{
		head: "Lorem ipsum dolor sit amet, consectetur adipisc",
		details: "Lorem ipsum dolor sit "
	},
];

<Accordion
	gap='20px'
	accordions={accordions.map((accordion, key) =>  (
		{
			head: <div>Head</div>,
			details: <div>Body of the accordion</div>,
			key
		}
	))}
	visible={visible} 
	setVisible={setVisible}
/>
 ```

 <br /><br /><br />
 # 4. **Button**

Props|Values|Default|Required
--|--|--|--
size|string from theme |none|`tre`
nonActiveColor | string from theme  | none | `true`
activeColor | string from theme  | none | `true`
nonActiveBgColor | string from theme  | none | `true`
nonActiveBorderColor | string from theme  | none | `true`
activeBgColor | string from theme  | none | `true`
activeBorderColor | string from theme  | none | `true`
text | string from theme  | none | `true`
borderRadius | string from theme  | none | `true`
pad | string from theme  | none | `true`
isLoading | boolean | none | `false`
disabled | boolean | none | `false`
onClick | function | none | `false`




 ```js
export const { Button} = Components(theme);

<Button
	size='14'//from theme
	nonActiveColor="Black.20"//from theme
	activeColor="Black.default"//from theme
	nonActiveBgColor={"common.transparent"}//from theme
	nonActiveBorderColor={"Black.5"}//from theme
	activeBgColor="common.transparent"//from theme
	activeBorderColor="common.transparent"//from theme
	text="Don't show again"
	borderRadius="8"//from theme
	pad={"padding.0"}//from theme
	isLoading={false}
	onClick={() => []}
	disabled={false}
/>
 ```


 <br /><br /><br />
 
 #	5. **Dropdown**

 Props|Values|Default|Required
--|--|--|--
weight|string from theme |none|`true`
direction|`end` or `start`|none|`true`
colour| string from theme  |none|`true`
dropColor| string from theme  from theme  |none|`true`
dropHovColor| string from theme  from theme  |none|`true`
hovBgColor| string from theme  |none|`true`
searchField| boolean |false|`false`
clearSelected| boolean |false|`false`
placeholder| string |false|`false`
handleSelect| function |none|`true`
initial| string |`undefined`|`false`
searchField| boolean |`true`|`false`
type| "showmore" or `undefined` |`false`|`false`
data| array of object|none |`true`


**USAGE**
 ```js
 DropdownType for
     data: {
        returnedValue: any;
        displayedValue: any;
        dropdownValue: any
    }[];
    handleSelect: (returnedValue: any, selectedvalue: any, dropdownValue: any) => void;

export const { Dropdown} = Components(theme);

<Dropdown
	weight="300"
	direction="end"
	colour="Black.default"
	dropColor="Black.80"
	dropHovColor="Black.default"
	hovBgColor="Black.20"
	searchField={false}
	handleSelect={(selected) => console.log(selected)}
	data={[
		{
			dropdownValue: "All",
			displayedValue: "All",
			returnedValue: "All"
		},
		{
			dropdownValue:  "Best",
			displayedValue:  "Best",
			returnedValue: "Best",
		},
	]}
/>
 ```




<br /><br /><br />
# 6.  **Input**

 Props|Values|Default|Required
--|--|--|--
handleChange|function|none|`true`
name|string|none|`true`
value|string or number|none|`true`
disabled| boolean |false|`false`
iconAfterInput| Element |none|`false`
iconBeforeInput| Element |none|`false`
handleOnFocus| function |none|`false`
handleOnBlur| function |none|`false`
handleOnEmptyInputValue| function |none|`false`
placeholder| string |none|`false`
bgCol| string from theme  |`transparent`|`false`
borderRadius| string from theme |`transparent`|`false`

```js
export const { Input} = Components(theme);


<Input 
	name={name}
	type={type} 
	value={value}
	onChange={(e) =>{
		setChecked(e.target.value);
		handleOnChange &&  handleOnChange(e.target.value);
	}}
/>
```

<br /><br /><br />
# 7. **Image**

 Props|Values|Default|Required
--|--|--|--
src|string|none|`true`
alt|string|""|`false`
height|string|100%|`false`
width|string|100%|`false`
loading|boolean|false|`false`
error|boolean|false|`false`
radius|string|`0`|`false`
loader|Element|none|`false`
fallBackImage|string|none|`false`
object| 'fill' od 'contain' od 'cover' od "none" od "scale-down"|`cover`|`false`

**USAGE**
```js

export const { Input} = Components(theme);
<Image
	loader={<div>Loading ...</div>}
	width={"48px"}
	height={"48px"}
	src={state?.profile?.basic?.studentProfileImage?.imageUrl}
/>

```

<br /><br /><br />

# 8. **Table**

Props|Values|Default|Required
--|--|--|--
headColor|string from theme |none|`true`
headBgColor|string from theme |none|`true`
bodyColor|string from theme |none|`true`
tableBodys| array of object(of any key)|none|`true`
tableHead| array of string |none|`true`
handleRowClick| function |none|`false`

```js
 

export const { Table, } = Components(theme);
<Table 
	tableBodys={[
		{
			type: timeline?.event,
			amount: "Todays's daye",
			frequency:<span>Frequesncy</span>
		}
	]}
	tableHead={["EVENT", "DATE/MONTH",   "STATUS"]}
	handleRowClick={(e) => console.log(e)}
	headColor={"Black.default"}
	headBgColor={"transparent.default"}
	bodyColor={"Black.80"}
/>
```


# **VERSIONING**


Version|Update|Default|Component
--|--|--|--
6.0.3 | Dropdown search works with dropdown values |  |  |
6.0.5 | Added <br /> Tabs component <br />  Switch component |  | |
6.0.6 | Conditionally added `toUpperCase` from dropdown head |  | |
9.0.0 |   Conditionally added `toUpperCase` fif the `searchField` is set to true  |  | |
9.1.0 |   Tab compoentn can now take  <br /> - `JS Element` as tabs name  <br />- Children is no longer allowed, rather array of object containing head and body is expected. |  | |
9.1.1 | Fixed label type for tab component. Changed the type from string to any|  | |
 |  |  |  |
10.5.1 |   Added click event to specified table body data head  |  | |
10.6.1 | To the handleRowTabClick handler, added the active row clicked  |  | |
10.6.2 | Initial props now set to any, not just string  |  | |
10.6.3 | Initial propsType on Dropdown now set to any, not just string  |  string  | Dropdown  |
10.6.4 | Assigned class names to modal elements  |     | Modal  |
10.6.5 | Assigned class names to modal elements  |     | Modal  |
10.6.6 | Updated input types to accept generic fields not specified  |     | Input  |




 
 
 
 
 
 
##   Verision 9.1.2

1. Fixed active state for tab
 
##   Verision 9.1.5

1. Fixed type issue
##   Verision 9.1.10

1. Added `Modal` ref type
 
##   Verision 9.1.12

1. Fixed table unique key on every render
##   Verision 9.1.13

1. Fixed active state not showing

 
##   Verision 9.1.16

1. Added reValidate props to switch for reValidating

 
 
##   Verision 9.1.17

1. Added loaderSize props to button for controlling the loader icon size

 
##   Verision 9.1.19

1. Updated Accordion data types from 
```js
	[{
        details: any;
        head: any;
        key: number;
    }];

	to 
	{
        details: any;
        head: any;
        key: number;
    }[];
```  

 ##   Verision 10.0.0
 1. Added AccordionMultiType component

 ##   Verision 10.0.1
 1. Centered button loader on loading state

 ##   Verision 10.0.2
 1. Made input value either `string` or `number`


 ##   Verision 10.0.11
 1. Fixed modal ref issue

 ##   Verision 10.0.14
 1. Fixed Dropdown  search position
 
 ##   Verision 10.1.0
 1. Added mobile view direction to modal. 
	Default: `down`