@yugabytedb/ui-components

Yugabyte UI Components Library

This is a demo UI component library created using React, TypeScript, Rollup, Storybook, Jest, and React Testing Library.

Installation

You can install this demo UI library using npm:

npm install @yugabyte/ui-components

Usage

To use this UI library in your project, import the components you need from the library and use them in your React components.

import React from "react";
import { YBInput, YBButton } from "@yugabyte/ui-components";

function App() {
	return (
		<div>
			<YBInput
				id="name"
				disabled={false}
				label="Enter your name"
				message="This field is required"
				error={false}
				success={false}
				onChange={(e) => console.log(e.target.value)}
				placeholder="Enter your name here"
			/>
			<YBButton
				size="medium"
				primary={true}
				disabled={false}
				text="Click me!"
				onClick={() => alert("Button clicked!")}
			/>
		</div>
	);
}

export default App;

Steps

• Clone the repository to your local machine.
• Install the dependencies using npm install.
• View the components in the browser using npm run storybook.
• Make your changes.
• Test the changes using npm test.
• Build the library using npm run build.
• Publish the package on npm.
• Install and use the package in your project.