npm package: @motesting/design-system-poc
Description: A small-scale design system POC for team use
Author: Motesting
Latest version: 1.0.1

# 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

```bash
npm install @your-org/design-system-poc
```

## 🎯 Quick Start

```jsx
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

```jsx
<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

```jsx
<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

```jsx
<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

```jsx
<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

```jsx
import { theme } from '@your-org/design-system-poc';

console.log(theme.colors.primary); // '#2196f3'
console.log(theme.typography.h1.fontSize); // '2.25rem'
```

## 🛠️ Development

```bash
# 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:
   ```json
   {
     "name": "@your-org/design-system-poc",
     "version": "1.0.0"
   }
   ```

2. **Build the package**:
   ```bash
   npm run build
   ```

3. **Publish to NPM**:
   ```bash
   # For private package
   npm publish --access private
   
   # For public package
   npm publish
   ```

4. **Install in your projects**:
   ```bash
   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.