devs-react-component-library v10.6.1

React Developers components

Components

1. Box
2. Fonts
3. Accordion
4. button
5. Dropdown
6. Input
7. Image
8. Table

ThemeTypes

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

1. Flex, Grid, Container

Box

Usage

const { Flex } = Components(theme)

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

Grid

Usage

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>
)

   

Container

Usage

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>
)

2. Fonts

This applies to all fonts

UAGES

    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)

export const { Span, FontTypes} = Components(theme);

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

3. Accordion

USAGE

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}
/>

4. Button

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}
/>

5. Dropdown

USAGE

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",
		},
	]}
/>

6. Input

export const { Input} = Components(theme);


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

7. Image

USAGE

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

8. Table

 

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

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

	[{
        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

2. Centered button loader on loading state

   Verision 10.0.2

3. Made input value either string or number

Verision 10.0.11

1. Fixed modal ref issue

   Verision 10.0.14

2. Fixed Dropdown search position

   Verision 10.1.0

3. Added mobile view direction to modal. Default: down