Design System POC

A small-scale React component library for team collaboration, inspired by Material-UI and other modern design systems.

🚀 Features

• React Components: Button, Input, Card, Typography
• Consistent Design: Material Design inspired theme system
• TypeScript Ready: Built with modern JavaScript
• Lightweight: Small bundle size with tree-shaking support
• Customizable: Easy to theme and extend

📦 Installation

npm install @your-org/design-system-poc

🎯 Quick Start

import React from 'react';
import { Button, Input, Card, Typography } from '@your-org/design-system-poc';
import '@your-org/design-system-poc/dist/index.css';

function App() {
  return (
    <div>
      <Typography variant="h1">Welcome to our Design System</Typography>
      <Card title="Sample Card" variant="elevated">
        <p>This is a sample card component.</p>
        <Button variant="primary">Get Started</Button>
      </Card>
      <Input 
        label="Email Address" 
        placeholder="Enter your email" 
        type="email" 
        required 
      />
    </div>
  );
}

export default App;

🧩 Components

Button

<Button variant="primary" size="medium">Click me</Button>
<Button variant="secondary" size="small">Secondary</Button>
<Button variant="outline" size="large">Outline</Button>

Props:

• variant: 'primary' | 'secondary' | 'outline' | 'text'
• size: 'small' | 'medium' | 'large'
• disabled: boolean
• onClick: function

Input

<Input 
  label="Email" 
  placeholder="Enter email" 
  type="email" 
  required 
  error="Invalid email"
  helperText="We'll never share your email"
/>

Props:

• label: string
• placeholder: string
• type: string (text, email, password, etc.)
• value: string
• onChange: function
• error: string
• helperText: string
• required: boolean
• disabled: boolean

Card

<Card title="Card Title" variant="elevated">
  <p>Card content goes here</p>
  <Button variant="primary">Action</Button>
</Card>

Props:

• title: string
• variant: 'elevated' | 'outlined'
• children: ReactNode

Typography

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="body1">Body text</Typography>

Props:

• variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'caption' | 'button'
• component: string (override the HTML element)

🎨 Theme

The design system includes a comprehensive theme with:

• Colors: Primary, secondary, success, warning, error
• Typography: Consistent font sizes and weights
• Spacing: Standardized spacing scale
• Shadows: Elevation system
• Border Radius: Consistent corner rounding

import { theme } from '@your-org/design-system-poc';

console.log(theme.colors.primary); // '#2196f3'
console.log(theme.typography.h1.fontSize); // '2.25rem'

🛠️ Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# View demo
npm start

📁 Project Structure

src/
├── components/
│   ├── Button/
│   │   ├── Button.js
│   │   └── Button.css
│   ├── Input/
│   │   ├── Input.js
│   │   └── Input.css
│   ├── Card/
│   │   ├── Card.js
│   │   └── Card.css
│   └── Typography/
│       ├── Typography.js
│       └── Typography.css
├── theme/
│   └── index.js
├── index.js
└── index.css

🚀 Publishing to NPM

1. Update package.json with your organization name:

   {
     "name": "@your-org/design-system-poc",
     "version": "1.0.0"
   }

2. Build the package:

   npm run build

3. Publish to NPM:

   # For private package
   npm publish --access private
      
   # For public package
   npm publish

4. Install in your projects:

   npm install @your-org/design-system-poc

📄 License

MIT License - feel free to use in your projects!

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📞 Support

For questions or support, please contact your team lead or create an issue in the repository.