@mtec-solutions-org/design-system/README.md

A React Native Web design system library with theme and components

# mTech Design System

A React Native Web design system library built with TypeScript, Expo, and Dripsy.

## Features

- 🎨 **Consistent Design Language** - Unified theme and component library
- 📱 **React Native Web** - Works on both web and mobile platforms
- 🎭 **Dripsy Integration** - Styled system with theme-aware components
- 📚 **Storybook** - Interactive component documentation
- 🔧 **TypeScript** - Full type safety and IntelliSense support
- 📦 **NPM Ready** - Easy to install and use in other projects

## Installation

```bash
npm install @mtech/design-system
# or
yarn add @mtech/design-system
```

## Quick Start

### 1. Wrap your app with DripsyProvider

```tsx
import React from 'react'
import { DripsyThemeProvider, theme } from '@mtech/design-system'
import { YourApp } from './YourApp'

export default function App() {
  return (
    <DripsyThemeProvider theme={theme}>
      <YourApp />
    </DripsyThemeProvider>
  )
}
```

### 2. Use components

```tsx
import React from 'react'
import { Button } from '@mtech/design-system'

export function YourComponent() {
  return (
    <Button 
      variant="primary" 
      size="md" 
      onPress={() => console.log('Button pressed!')}
    >
      Click me!
    </Button>
  )
}
```

## Components

### Button

A versatile button component with multiple variants and sizes.

**Props:**
- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost'
- `size`: 'sm' | 'md' | 'lg'
- `disabled`: boolean
- `loading`: boolean
- `fullWidth`: boolean
- `onPress`: () => void

**Example:**
```tsx
<Button variant="primary" size="lg" onPress={handlePress}>
  Primary Button
</Button>
```

## Theme

The design system includes a comprehensive theme with:

- **Colors**: Primary, secondary, success, warning, error, and neutral colors
- **Typography**: Font sizes, weights, and line heights
- **Spacing**: Consistent spacing scale
- **Border Radius**: Predefined radius values
- **Shadows**: Elevation system

### Using the theme

```tsx
import { theme } from '@mtech/design-system'

// Access theme values
const primaryColor = theme.colors.primary
const mediumSpacing = theme.space[4]
```

## Development

### Prerequisites

- Node.js 16+
- Yarn

### Setup

```bash
# Clone the repository
git clone <repository-url>
cd design-system

# Install dependencies
yarn install

# Build the library
yarn build

# Start Storybook
yarn storybook
```

### Scripts

- `yarn build` - Build the library for production
- `yarn dev` - Build in watch mode
- `yarn storybook` - Start Storybook development server
- `yarn build-storybook` - Build Storybook for production
- `yarn lint` - Run linter
- `yarn format` - Format code

## Storybook

View the interactive component documentation:

```bash
yarn storybook
```

This will start Storybook on `http://localhost:6006`

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests and stories for new components
5. Submit a pull request

## License

MIT