UI Component Storybook

This project contains refactored React components, converted from class components to functional components with TypeScript. The components are organized in a Storybook and built as a library.

Project Structure

• /src/components/ - Refactored React functional components with TypeScript
• /old-components/ - Original class-based components (reference only)
• /.storybook/ - Storybook configuration
• /stories/ - Storybook stories

Development

# Install dependencies
npm install

# Run Storybook
npm run dev

Building

# Build the library
npm run build

# Build Storybook
npm run build-storybook

Usage

# Install the library
npm install ui-component-storybook

Importing Components

import { Checkbox, RadioButton } from 'ui-component-storybook';

Importing Styles

To use the component styles, import the CSS file in your application:

// Import this in your main app file (e.g., App.jsx or index.js)
import 'ui-component-storybook/dist/styles.css';

Component Migration Process

1. Components from /old-components/ are being refactored to functional components with TypeScript
2. Refactored components are placed in /src/components/
3. Stories are created for each component
4. Library is built with compatibility for React 17+

Features

• React Functional Components
• TypeScript type definitions
• Storybook documentation
• Vite for development
• Rollup for library building
• Compatible with React 17+