React Component Assignment

A modern React component library built with TypeScript, TailwindCSS, and Storybook, featuring two comprehensive UI components: InputField and DataTable.

Components

InputField

A flexible input component with comprehensive features: Variants: filled, outlined, ghost Sizes: small, medium, large
States: disabled, invalid, loading Features: password toggle, clear button, validation Accessibility: ARIA labels, proper focus management

DataTable

A feature-rich data table component: Sorting: Click column headers to sort data Selection: Single/multiple row selection with checkboxes States: loading, empty state Customization: Custom cell rendering, column configuration Accessibility: Keyboard navigation, screen reader support

Tech Stack

React 19 with TypeScript Next.js 15 (App Router) TailwindCSS v4 for styling Storybook 8 for component documentation Jest & Testing Library for testing Radix UI for accessible primitives

Installation

bash

Clone the repository

git clone cd react-component-assignment

Install dependencies

npm install

Start development server

npm run dev

Run Storybook

npm run storybook

Storybook

Interactive component documentation with all variants and states:

bash

Start Storybook locally

npm run storybook

Build Storybook for deployment

npm run build-storybook

Design System

Built with a consistent design system:

• Colors: Semantic color tokens with dark mode support
• Typography: Consistent font scales and weights
• Spacing: Systematic spacing scale
• Accessibility: WCAG AA compliant contrast ratios

Project Structure

├── components/ui/ # UI components │ ├── input-field.tsx # InputField component │ └── data-table.tsx # DataTable component ├── stories/ # Storybook stories ├── tests/ # Component tests ├── app/ # Next.js app directory └── .storybook/ # Storybook configuration

🔧 Development Approach

Component Architecture

• Composition over inheritance: Flexible, reusable components
• TypeScript first: Comprehensive type safety
• Accessibility built-in: ARIA labels, keyboard navigation
• Performance optimized: React.memo, useCallback where needed

Styling Strategy

• TailwindCSS v4: Utility-first CSS with design tokens
• Responsive design: Mobile-first approach
• Dark mode support: Automatic theme switching
• Consistent spacing: Systematic design scale

Testing Philosophy

• Unit tests: Component behavior and props
• Integration tests: User interactions
• Accessibility tests: Screen reader compatibility
• Visual regression: Storybook visual testing

Assignment Requirements

• TypeScript with proper typing
• Responsive design
• Basic accessibility (ARIA labels)
• Clean, modern styling
• Include basic tests
• Two working components
• Simple demo/example usage
• Basic documentation
• Storybook integration

"# React-Component-Development" "# React-Component-Development"