Playground

Collection of components built with React, TypeScript, Storybook, and Tailwind.

Features

• 🎨 Modern UI components built with React and TypeScript
• 📚 Component documentation and testing with Storybook
• 🎯 Type-safe development with TypeScript
• 💅 Styling with TailwindCSS and daisyUI
• 🔍 Form validation and error handling
• 🌓 Light/Dark theme support
• 📱 Responsive design

Tech Stack

• React - A JavaScript library for building user interfaces
• TypeScript - JavaScript with syntax for types
• Vite - Next generation frontend tooling
• Storybook - Frontend workshop for UI development
• TailwindCSS - A utility-first CSS framework
• daisyUI - Tailwind CSS component library

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd playground

2. Install dependencies

npm install
# or
yarn

3. Start the development server

npm run dev
# or
yarn dev

4. Open Storybook

npm run storybook
# or
yarn storybook

Project Structure

src/
├── base/           # Base UI components
├── components/     # Feature components
├── hooks/          # Custom React hooks
├── lib/           # Utility functions and helpers
├── pages/         # Page components
├── state/         # State management
├── styles/        # Global styles
└── typings/       # TypeScript type definitions

Available Scripts

• dev - Start development server
• build - Build for production
• preview - Preview production build
• storybook - Start Storybook development server
• build:storybook - Build Storybook for production
• format:check - Check code formatting
• lint - Run ESLint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request