@6thbridge/ui v0.0.5

React + TypeScript + Vite

@6thbridge/ui

Installation

To install the @6thbridge/ui component library, run the following command:

npm install @6thbridge/ui

Usage

To use the components from @6thbridge/ui, import the styles into your root file. This can be done in your index.js or index.ts file as follows:

import "@6thbridge/ui/styles.css";

Button Component

The Button component can be used as follows:

import { Button } from "@6thbridge/ui";

<Button
	intent="primary"
	size="md"
	onClick={handleClick}>
	Click Me
</Button>;

Button Props

• intent: 'neutral' | 'outlined' | 'light-outlined' | 'primary-outlined' | 'primary' | 'dark-text' | 'light' - Defines the intent of the button.
• size: 'xs' | 'sm' | 'md' | 'lg' - Defines the size of the button.
• disabled: boolean - Disables the button if set to true.
• isLoading: boolean - Displays a loading spinner if set to true.
• block: boolean - Makes the button take the full width of its container if set to true.
• rightIcon: ReactNode - Icon to be displayed on the right side of the button.
• leftIcon: ReactNode - Icon to be displayed on the left side of the button.
• onClick: React.MouseEventHandler<HTMLButtonElement> - Click event handler for the button.

Input Component

The Input component can be used as follows:

import { Input } from "@6thbridge/ui";

<Input
	label="Username"
	id="username"
	size="md"
	onChange={handleInputChange}
/>;

Input Props

• label: string | React.ReactNode - Label for the input field.
• rightlabel: React.ReactNode - Label displayed on the right side of the input.
• rightIcon: React.ReactNode - Icon to be displayed on the right side of the input.
• id: string - ID of the input element.
• error: string - Error message for the input field.
• disabled: boolean - Disables the input field if set to true.
• textDark: boolean - Makes the input text dark if set to true.
• bordered: boolean - Adds border to the input field if set to true.
• addon: React.ReactNode - Additional information displayed with the input field.
• size: 'xs' | 'sm' | 'md' - Defines the size of the input field.
• onChange: React.ChangeEventHandler<HTMLInputElement> - Change event handler for the input field.
• type: string - Type of the input field (e.g., "text", "number").
• min: number - Minimum value for the input field.
• max: number - Maximum value for the input field.

The Input component also accepts all default input props from React.InputHTMLAttributes<HTMLInputElement>.

Loader Component

The Loader component can be used as follows:

import { Loader } from "@6thbridge/ui";

<Loader
	text="Loading..."
	size="lg"
	className="text-primary"
/>;

Loader Props

• text: string - Text to be displayed below the loader.
• className: string - Additional CSS classes for the loader.
• size: 'xs' | 'sm' | 'md' | 'lg' - Defines the size of the loader.

Contribution

To contribute to this library, follow these steps:

1. Checkout and pull from master.
2. Create a new branch for your feature or bugfix.
3. Commit your changes and push them to your fork.
4. Create a pull request to the main repository.

For each component added, it is advisable to create a story for the component. This helps in visualizing the component and its different states.