Design System Template

A minimal, educational template for building a Design System using React, TypeScript, and Vite. This template is specifically designed for students learning about component libraries and design systems.

🎯 Purpose

This template provides a foundation for:

• Learning how to build a component library
• Understanding Design System principles
• Practicing component development with React and TypeScript
• Exploring documentation with Storybook

🚀 Getting Started

Clone this repository:

git clone [repository-url]
cd ds-template

Install dependencies:

npm install

Start Storybook to view components:

npm run storybook

Build the library:

npm run build

📦 Project Structure

ds-template/
├── src/
│   ├── components/     # React components
│   │   └── divider/   # Example component
│   └── index.ts       # Main export file
├── .storybook/        # Storybook configuration
└── vite.config.ts     # Build configuration

🛠️ Technology Stack

• React - UI library
• TypeScript - Type safety and better developer experience
• Vite - Build tool
• Storybook - Component documentation and development
• ESLint - Code linting
• CSS Modules - Scoped styling

📚 Available Scripts

• npm run dev - Builds the library in watch mode
• npm run build - Builds the library for production
• npm run storybook - Starts Storybook development server
• npm run build-storybook - Builds Storybook for production
• npm run lint - Runs ESLint

🎨 Creating Components

1. Create a new directory under src/components
2. Add your component files (.tsx, .module.css)
3. Create a story file (.stories.tsx)
4. Export the component in src/index.ts

Example component structure:

component-name/
├── component-name.tsx
├── component-name.module.css
├── component-name.stories.tsx
└── index.ts

📖 Learning Resources

• React Documentation
• Storybook Tutorials
• Design Systems Handbook

🤝 Contributing

This template is meant for educational purposes. Feel free to fork it and adapt it to your needs!