Storybook React Project

The Storybook React Project is a component-driven front-end application built with React, TypeScript, and Vite, showcasing reusable UI components such as a generic DataTable with sorting and selection features. It integrates Storybook for isolated development and documentation, and Vitest for testing, emphasizing scalability, maintainability, and type safety in modern web development.

---

🚀 Features

• Component-Driven Development – Build, preview, and document components in isolation with Storybook.
• Reusable UI Components – Includes DataTable, InputField, Button, and more with customizable props.
• Advanced DataTable – Sorting, single/multi-row selection, custom rendering, and loading/empty states.
• Type Safety – Strongly typed with TypeScript and generics for safer, scalable code.
• Scalable Structure – Clean folder organization for maintainability and growth.
• Testing Integration – Unit and integration testing with Vitest for reliability.
• Optimized Performance – Powered by Vite for lightning-fast builds and HMR.
• Customizable Styling – Flexible design with easy theming and style overrides.

---

Demo

Project-Demo : https://storybook-react-assignment-dg9s.vercel.app/

Storybook-Demo-DataTable : https://storybook-react-assignment-fxt1.vercel.app/?path=/docs/components-datatable--docs

Storybook-Demo-InputField: https://storybook-react-assignment-fxt1.vercel.app/?path=/docs/components-inputfield--docs

Documentation : Storybook_React_Documentation.pdf

---

Author

• @YahyaShanawazMohammed

---

Tech Stack

• React.js
• TailwindCSS
• storybook
• TypeScript

---

Screenshots

InputField

DataTable

Darkmode

InputField-Storybook-Docs

InputField-Storybook-Sample-Picture

DataTable-Storybook-Docs

DataTable-Storybook-Sample-Picture

--- ## 📦 Installation & Setup

1. Clone the repository

   git clone [<repo-url>]
   cd Storybook-React

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

   Access the app at: http://localhost:5173

4. Run Storybook

   npm run storybook

   Access Storybook at: http://localhost:6006

5. Build for production

   npm run build

6. Preview production build

   npm run preview

7. Run tests

   npm run test

---

📂 Project Structure

• .storybook/ → Storybook configuration files
• src/Components/ → Core reusable UI components
• src/stories/ → Storybook stories (documentation & demo for components)
• src/SampleData/ → Mock/sample dataset for demo and testing
• storybook-static/ → Pre-built static Storybook distribution

---

🛠️ Scripts

Command	Description
npm run dev	Start Vite dev server
npm run build	Build production-ready React app
npm run preview	Preview production build
npm run storybook	Start Storybook in development mode
npm run build-storybook	Build Storybook as static site
npm run test	Run unit tests with Vitest

---

📜 License

This project is licensed under the MIT License.