@mtec-solutions-org/design-system v1.1.4

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

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

Quick Start

1. Wrap your app with DripsyProvider

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

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:

<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

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

# 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:

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