abrs-ui v0.2.15

ABRS UI Kit

React UI re-usable components

Available components :

Accordion

This is the code to perform this Accordion functionality.

<Accordion
	accordianTitle={() => {}}
	items={[
		{
			content:
				'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio eum maiores pariatur nostrum dolorem neque, perferendis reprehenderit doloremque itaque? Minima obcaecati doloremque vitae consectetur rerum modi accusantium ut aut eaque.',
			title: 'Heading 1',
		},
		{
			content:
				'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio eum maiores pariatur nostrum dolorem neque, perferendis reprehenderit doloremque itaque? Minima obcaecati doloremque vitae consectetur rerum modi accusantium ut aut eaque.',
			title: 'Heading 2',
		},
		{
			content:
				'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio eum maiores pariatur nostrum dolorem neque, perferendis reprehenderit doloremque itaque? Minima obcaecati doloremque vitae consectetur rerum modi accusantium ut aut eaque.',
			title: 'Heading 3',
		},
		{
			content:
				'Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio eum maiores pariatur nostrum dolorem neque, perferendis reprehenderit doloremque itaque? Minima obcaecati doloremque vitae consectetur rerum modi accusantium ut aut eaque.',
			title: 'Heading 4',
		},
	]}
	titleProps={{
		activeIcon: (
			<svg height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
				<path d="M11.65 19V6.35L5.5 12.5 5 12l7-7 7 7-.5.5-6.15-6.15V19Z" />
			</svg>
		),
		icon: (
			<svg height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
				<path d="m12 19-7-7 .5-.5 6.15 6.15V5h.7v12.65l6.15-6.15.5.5Z" />
			</svg>
		),
	}}
/>

Action

This is the code to perform this Action functionality.

<Action sizing="md" title="Click me" variant="outlined" variation="primary" />

Alert

This is the code to perform this Alert functionality.

<Alert dismissible onDismissible={() => {}} title="hello-world" variant="filled" variation="primary">
	<Container alignItems="center" justifyContent="flex-start">
		<Col> My first alert box </Col>
		<Col isAuto>
			<Action variant="filled" variation="primary">
				Book Now
			</Action>
		</Col>
	</Container>
</Alert>

Backdrop

This is the code to perform this Backdrop functionality.

<Container
	alignContent="center"
	alignItems="center"
	justifyContent="center"
	style={{
		backgroundColor: 'white',
		border: '1px dashed #ccc',
		height: '380px',
		width: '720px',
	}}>
	<Backdrop onClose={() => {}} style={{}} />
	This is my first back drop
</Container>

Breadcrumb

This is the code to perform this Breadcrumb functionality.

<Breadcrumb
	links={[
		{
			icon: 'HomeActive',
			link: '/home',
			title: 'Home',
		},
		{
			link: '/SearchResult',
			title: 'Search Result',
		},
	]}
/>

Cards

This is the code to perform this Cards functionality.

<Card>
	<CardHeader theme="lighter" variation="tertiary">
		Card Header
	</CardHeader>
	<CardBody> I am the card </CardBody>
	<CardFooter theme="lighter" variation="success">
		Card Footer
	</CardFooter>
</Card>

Carousel

This is the code to perform this Carousel functionality.

<Carousel
	autoplay
	height="400px"
	imagecount={3}
	images={[
		'https://cms.eichertrucksandbuses.com/uploads/truck/sub-category/a933e5958e4a354cfb8d22665bd244fd.png',
		'https://images.hindustantimes.com/img/2022/05/04/550x309/06b94ba2-9d7b-11ec-a178-89860fd7e8e1_1646592077674_1651693185203.png',
		'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Ausden_Clark_Executive_Coach_in_Black_and_Pink_Livery.jpg/1200px-Ausden_Clark_Executive_Coach_in_Black_and_Pink_Livery.jpg',
		'https://wri-india.org/sites/default/files/Key-Lessons-for-India-Bus-Electrification-Drive_featured-image.png',
		'https://m.economictimes.com/thumb/msid-89294690,width-1200,height-900,resizemode-4,imgsize-225050/bus_bccl.jpg',
		'https://www.sehgaltransport.com/wp-content/uploads/2022/06/4_1.jpg',
		'https://content.jdmagicbox.com/comp/lucknow/d4/0522px522.x522.190302130513.i3d4/catalogue/rajdhani-bus-service-lucknow-chowk-lucknow-bus-services-86j7k4ae1f.jpg',
	]}
	interval={3000}
	width="100%"
/>

Chip

This is the code to perform this Chip functionality.

<Chip title="I M Chip">
	<svg height="1.25rem" viewBox="0 0 24 24" width="1.25rem" xmlns="http://www.w3.org/2000/svg">
		<path d="M12 20.65q-2.875-.9-4.787-3.55-1.913-2.65-1.913-6V5.9L12 3.4l6.7 2.5v5.2q0 3.35-1.912 6-1.913 2.65-4.788 3.55Zm0-8.625Zm0 7.875q2.6-.825 4.3-3.3 1.7-2.475 1.7-5.5V6.375L12 4.15 6 6.375V11.1q0 3.025 1.7 5.5t4.3 3.3Zm0-4.175q1.55 0 2.625-1.075t1.075-2.625q0-1.55-1.075-2.625T12 8.325q-1.55 0-2.625 1.075T8.3 12.025q0 1.55 1.075 2.625T12 15.725Zm1.65-1.55-2-2v-3h.7v2.7l1.8 1.8Z" />
	</svg>
</Chip>

Collapsible

This is the code to perform this Collapsible functionality.

<Container
	style={{
		backgroundColor: '#f8f8f8',
	}}>
	<Collapsible direction="column-reverse">
		<CollapsibleTitle
			activeIcon={
				<svg height="0.875rem" width="0.875rem" xmlns="http://www.w3.org/2000/svg">
					<path d="m7.4 14.5-.5-.5L12 8.9l5.1 5.1-.5.5L12 9.9Z" />
				</svg>
			}
			icon={
				<svg height="0.875rem" width="0.875rem" xmlns="http://www.w3.org/2000/svg">
					<path d="M12 14.5 6.9 9.4l.5-.5 4.6 4.6 4.6-4.6.5.5Z" />
				</svg>
			}>
			<h1
				style={{
					margin: 'unset',
				}}>
				Heading 1
			</h1>
		</CollapsibleTitle>
		<CollapsibleContent>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis harum ullam corrupti sint veritatis
			necessitatibus voluptatibus dolores omnis et est non expedita fuga totam officiis repellendus, quam beatae
			quia nihil!
		</CollapsibleContent>
	</Collapsible>
</Container>

Collection

This is the code to perform this Collection functionality.

<Collection>
	<CollectionItem>
		<a> Option 1 </a>
	</CollectionItem>
	<CollectionItem>
		<a> Option 2 </a>
	</CollectionItem>
	<CollectionItem>
		<a> Option 3 </a>
	</CollectionItem>
	<CollectionItem>
		<a> Option 4 </a>
	</CollectionItem>
</Collection>

Calendar View

This is the code to perform this Calendar View functionality.

<Calendar onClick={() => {}} onSelected={() => {}} value="Fri Apr 19 2024" />

Divider

This is the code to perform this Divider functionality.

<Drawer entered="right" isOpened onClose={() => {}}>
	Drawer content...
</Drawer>

Drop Down Menu

This is the code to perform this Drop Down Menu functionality.

<>
	<Action onClick={() => {}} sizing="lg">
		Click here to Open
	</Action>
	<Dropdown onChange={() => {}}>
		<CollectionItem>Options</CollectionItem>
		<CollectionItem>Options</CollectionItem>
		<CollectionItem>Options</CollectionItem>
		<CollectionItem>Options</CollectionItem>
		<CollectionItem>Options</CollectionItem>
		<CollectionItem>Options</CollectionItem>
		<CollectionItem>Options</CollectionItem>
		<CollectionItem>Options</CollectionItem>
	</Dropdown>
</>

Modal

This is the code to perform this Modal functionality.

<Modal
	onClose={() => {}}
	style={{
		border: '1px dashed #EFEFEF',
	}}>
	Hello world
</Modal>

Pagination

This is the code to perform this Pagination functionality.

<Container
	alignItems="center"
	direction="column"
	justifyContent="center"
	style={{
		border: '1px dashed #dedede',
		height: '300px',
		width: '600px',
	}}>
	<Pagination
		activePage={3}
		className="pagination"
		hasNext
		hasPrev
		offsetvalue={2}
		onNavigateTo={() => {}}
		totalCount={10}
	/>
	<Row direction="row"> Select Page: 3 </Row>
</Container>

Progress Bar

This is the code to perform this Progress Bar functionality.

<Container
	alignContent="center"
	alignItems="center"
	justifyContent="center"
	style={{
		border: '1px dashed #CCC',
		height: '250px',
		width: '450px',
	}}>
	<Progress deterministic progress={50} strength={3} variation="primary">
		<span>25% Completed</span>
	</Progress>
</Container>

Scrollspy

This is the code to perform this Scrollspy functionality.

<ScrollSpy>
	<ScrollActionsContainer direction="row">
		<ScrollAction index={0}> Action0 </ScrollAction>
		<ScrollAction index={1}> Action1 </ScrollAction>
		<ScrollAction index={2}> Action2 </ScrollAction>
		<ScrollAction index={3}> Action3 </ScrollAction>
	</ScrollActionsContainer>
	<ScrollContentContainer
		style={{
			height: '40vh',
			position: 'relative',
		}}>
		<ScrollContent index={0}>
			0
			<br />
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate doloribus labore ad tempora ipsum,
			consectetur explicabo ex voluptatibus est reiciendis. Tempore consectetur non vel. Maiores consequuntur ex
			quis soluta animi.
		</ScrollContent>
		<ScrollContent index={1}>
			1
			<br />
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate doloribus labore ad tempora ipsum,
			consectetur explicabo ex voluptatibus est reiciendis. Tempore consectetur non vel. Maiores consequuntur ex
			quis soluta animi.
		</ScrollContent>
		<ScrollContent index={2}>
			2
			<br />
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate doloribus labore ad tempora ipsum,
			consectetur explicabo ex voluptatibus est reiciendis. Tempore consectetur non vel. Maiores consequuntur ex
			quis soluta animi.
		</ScrollContent>
		<ScrollContent index={3}>
			3
			<br />
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate doloribus labore ad tempora ipsum,
			consectetur explicabo ex voluptatibus est reiciendis. Tempore consectetur non vel. Maiores consequuntur ex
			quis soluta animi.
		</ScrollContent>
	</ScrollContentContainer>
</ScrollSpy>

Shimmer

This is the code to perform this Shimmer functionality.

<Shimmer height="20px" width="100px" />

Snackbar

This is the code to perform this Snackbar functionality.

<Snackbar autoHideDuration={8000} message="hello world i am snackbar" open />

Spinner

This is the code to perform this Spinner functionality.

<Spinner />

Stepper

This is the code to perform this Stepper functionality.

<Stepper
	connectorStyles={{
		borderTopColor: '#ccc',
		borderTopStyle: 'solid',
	}}
	currentActiveIndex={2}
	length="400px"
	onStepClick={() => {}}
	orientation="horizontal"
	steps={[
		{
			description:
				"For each ad campaign that you create, you can control how much\n              you're willing to spend on clicks and conversions, which networks\n              and geographical locations you want your ads to show on, and more.",
			label: 'Select campaign settings',
		},
		{
			description:
				'An ad group contains one or more ads which target a shared set of keywords. An ad group contains one or more ads which targ ad group contains one or more ads which target a shared set of keywords.',
			label: 'Create an ad group',
		},
		{
			description:
				"Try out different ad text to see what brings in the most customers,\n              and learn how to enhance your ads using features like ad extensions.\n              they're running and how to resolve approval issues.",
			label: 'Create an ad',
		},
	]}
/>

Tabs

This is the code to perform this Tabs functionality.

<Tabs
	direction="column"
	onTabChange={() => {}}
	tabDirection="row"
	tabs={[
		{
			content: (
				<p>
					Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit in eaque quis reprehenderit aliquid
					quo, commodi similique quasi ducimus, aliquam magni et voluptates expedita! Nulla repellat accusamus
					dignissimos odit incidunt.
				</p>
			),
			icon: (
				<svg height="1rem" viewBox="0 0 24 24" width="1rem" xmlns="http://www.w3.org/2000/svg">
					<path d="M5.3 19.7V9.65L12 4.6l6.7 5.05V19.7h-4.9v-6.25h-3.6v6.25ZM6 19h3.5v-6.25h5V19H18v-9l-6-4.5L6 10Zm6-6.75Z" />
				</svg>
			),
			title: 'Home',
		},
		{
			content: (
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit esse pariatur nostrum id dolore
					earum alias dignissimos veritatis voluptate? Ad voluptatibus corrupti dolor. Expedita, aspernatur
					sapiente. Ipsa expedita incidunt rem. Lorem ipsum dolor sit amet consectetur adipisicing elit.
					Suscipit esse pariatur nostrum id dolore earum alias dignissimos veritatis voluptate? Ad
					voluptatibus corrupti dolor. Expedita, aspernatur sapiente. Ipsa expedita incidunt rem.
				</p>
			),
			title: 'Bike',
		},
	]}
/>

Text

This is the code to perform this Text functionality.

<Text onLeft={() => {}} onRight={() => {}}>
	content
</Text>

ToolTip

This is the code to perform this ToolTip functionality.

<ToolTip content="I m ToolTip" position="top" theme="lighter">
	<Action variant="filled">Hover Me</Action>
</ToolTip>

AutoComplete Input

This is the code to perform this AutoComplete Input functionality.

<AutoComplete
	label="Select Station"
	onChange={() => {}}
	onSelected={() => {}}
	optionKey="stationId"
	optionValue="stationName"
	options={[
		{
			stationId: 3,
			stationName: 'Hyderabad',
		},
		{
			stationId: 5,
			stationName: 'Vijayawada',
		},
	]}
	selectedOption={3}
/>

Button

This is the code to perform this Button functionality.

<Button />

Checkbox

This is the code to perform this Checkbox functionality.

<CustomStory />

Date Input

This is the code to perform this Date Input functionality.

<DatePicker label="From" onSelected={() => {}} />

Email Input

This is the code to perform this Email Input functionality.

<Email label="Email Address" onChange={() => {}} value="" />

File Input

This is the code to perform this File Input functionality.

<FileInput accept="image/*" label="File Input" onChange={() => {}} />

Floating Label Input

This is the code to perform this Floating Label Input functionality.

<Floating>
	<TextField label="text" onChange={() => {}} placeholder=" " value="" />
</Floating>

MultiSelection Input

This is the code to perform this MultiSelection Input functionality.

<MultiSelection
	label="Select Station"
	onChange={() => {}}
	optionKey="stationId"
	optionValue="stationName"
	options={['Hyderbad', 'Vijyawada', 'Bengulore']}
	selectedOptions={['Hyderbad']}
	label="Select Cities"
	onSelected={()=>{}}
	value={"state"}
/>

Number Input

This is the code to perform this Number Input functionality.

<Number label="Number" onChange={() => {}} value="" />

OTP Input

This is the code to perform this OTP Input functionality.

<Otp onUpdate={() => {}} value="" />

Password Input

This is the code to perform this Password Input functionality.

<Password label="password" onChange={() => {}} value="" />

Phone Number Input

This is the code to perform this Phone Number Input functionality.

<PhoneNumber label="Phone Number" setValue={() => {}} value="" />

RadioButton

This is the code to perform this RadioButton functionality.

<>
	<RadioButton onChange={() => {}} title="male" value="male" />
	<RadioButton onChange={() => {}} title="female" value="female" />
	<RadioButton onChange={() => {}} title="other" value="other" />
</>

Selection Input

This is the code to perform this Selection Input functionality.

<Selection
	handleDropDownDisplay={() => {}}
	onChange={() => {}}
	onValueChange={() => {}}
	options={[
		{
			id: 0,
			label: 'Option0',
		},
		{
			id: 1,
			label: 'Option1',
		},
		{
			id: 2,
			label: 'Option2',
		},
		{
			id: 3,
			label: 'Option3',
		},
		{
			id: 4,
			label: 'Option4',
		},
	]}
/>

SwitchButton

This is the code to perform this SwitchButton functionality.

<SwitchButton sizing="md" title="myCar" variation="primary" />

Text Area Input

This is the code to perform this Text Area Input functionality.

<TextArea count={0} maxLength={350} onChange={() => {}} value="" />

Text Input

This is the code to perform this Text Input functionality.

<TextField label="Name" onChange={() => {}} value="" />

Grid

This is the code to perform this Grid functionality.

Grid

Template

<Container
	alignItems="flex-start"
	gutter="20px"
	justifyContent="space-evenly"
	style={{
		border: '1px dashed #ccc',
		height: '350px',
		width: '100%',
	}}>
	<div
		style={{
			backgroundColor: 'darkcyan',
			color: '#FFF',
			padding: '1em',
		}}>
		Flex Box Item
	</div>
</Container>

Table Container

This is the code to perform this Table Container functionality.

<Table>
	<table>
		<thead>
			<tr>
				<td> ID </td>
				<td> Name </td>
				<td> Age </td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td> Kiran </td>
				<td> 34 </td>
			</tr>
			<tr>
				<td>2</td>
				<td> Mahender </td>
				<td> 33 </td>
			</tr>
			<tr>
				<td>3</td>
				<td> Intiaz </td>
				<td> 29 </td>
			</tr>
			<tr>
				<td>4</td>
				<td> Kiran </td>
				<td> 34 </td>
			</tr>
			<tr>
				<td>5</td>
				<td> Mahender </td>
				<td> 33 </td>
			</tr>
			<tr>
				<td>6</td>
				<td> Intiaz </td>
				<td> 29 </td>
			</tr>
		</tbody>
	</table>
</Table>