UI Components Storybook

A reusable React component library showcasing modern UI components with Storybook documentation.

Overview

This library provides a collection of React UI components that can be used in various projects. Each component is fully typed with TypeScript and documented with Storybook.

Installation

npm install ui-components-storybook

Requirements

This library requires React 17, 18, or 19 as a peer dependency.

Available Components

• Button - Standard button component with various styles
• Checkbox - Customizable checkbox input
• CircularProgressbar - Circular progress indicator
• CustomList - Custom list component
• DropdownButton - Button with dropdown menu
• ModalDialog - Modal dialog component
• MultiSelectField - Field for selecting multiple items
• NumberField - Input field for numbers
• Pagination - Component for handling pagination
• RadioButton - Radio button input
• ScrollBar - Custom scrollbar component
• TogglePane - Toggleable panel component
• TogglePaneWithKey - Toggleable panel with key functionality

Usage

import { Button, Checkbox, DropdownButton } from 'ui-components-storybook';
import 'ui-components-storybook/dist/ui-components-storybook.css';

function MyComponent() {
  return (
    <div>
      <Button variant="primary" onClick={() => console.log('Clicked!')}>
        Click Me
      </Button>
      
      <Checkbox label="Check me" onChange={(checked) => console.log('Checked:', checked)} />
      
      <DropdownButton 
        title="Options" 
        items={[
          { label: 'Option 1', value: '1' },
          { label: 'Option 2', value: '2' }
        ]}
        onSelect={(value) => console.log('Selected:', value)}
      />
    </div>
  );
}

Development

Prerequisites

• Node.js (see package.json for version compatibility)
• npm or yarn

Setup

# Clone the repository
git clone <repository-url>

# Install dependencies
npm install

Available Scripts

• npm run build - Build the library
• npm run lint - Run ESLint
• npm run storybook - Start Storybook development server
• npm run test-storybook - Run Storybook tests
• npm run build-storybook - Build Storybook for deployment

Storybook Documentation

To view the component documentation and examples:

npm run storybook

This will start a local Storybook server, typically at http://localhost:6006

Testing

Component tests are located in the stories directory alongside the story files.

npm run test-storybook