@digitoon/design-system

Production-grade design system for Digitoon web and mobile applications, built with Tamagui for universal compatibility.

Features

• 🎨 Universal Design System - Works across React Native, Next.js, and web
• 🎯 TypeScript First - Full type safety and IntelliSense support
• 🚀 Performance Optimized - Tree-shakeable, optimized bundle sizes
• 📱 Mobile & Web - Responsive design with platform-specific optimizations
• 🎭 Multiple Themes - Light, dark, and sepia themes with easy customization
• 🔧 Production Ready - Comprehensive testing, linting, and build pipeline

Installation

# Using pnpm (recommended)
pnpm add @digitoon/design-system

# Using npm
npm install @digitoon/design-system

# Using yarn
yarn add @digitoon/design-system

Peer Dependencies

Make sure you have the required peer dependencies installed:

pnpm add react react-native # react-native is optional for web-only projects

Quick Start

Next.js Setup

1. Install the Next.js plugin:

pnpm add @tamagui/next-plugin

2. Configure your next.config.js:

import { withTamagui } from '@tamagui/next-plugin'

const nextConfig = {
  transpilePackages: ['@digitoon/design-system'],
}

export default withTamagui(nextConfig, {
  config: './tamagui.config.ts',
  components: ['@digitoon/design-system'],
})

3. Create tamagui.config.ts:

import { config } from '@digitoon/design-system/config'
export default config

4. Wrap your app with TamaguiProvider:

import { TamaguiProvider } from '@digitoon/design-system'
import { config } from '@digitoon/design-system/config'

export default function App({ children }) {
  return (
    <TamaguiProvider config={config} defaultTheme="light">
      {children}
    </TamaguiProvider>
  )
}

React Native Setup

1. Install Tamagui core packages:

pnpm add @tamagui/core

2. Configure your app:

import { TamaguiProvider } from '@digitoon/design-system'
import { config } from '@digitoon/design-system/config'

export default function App() {
  return (
    <TamaguiProvider config={config} defaultTheme="light">
      {/* Your app content */}
    </TamaguiProvider>
  )
}

Usage

Basic Components

import {
  DigitoonButton,
  DigitoonCard,
  DigitoonText,
  DigitoonHeading,
  XStack,
  YStack,
} from '@digitoon/design-system'

function MyComponent() {
  return (
    <YStack padding="$4" gap="$4">
      <DigitoonHeading level={1}>Welcome to Digitoon</DigitoonHeading>
      
      <DigitoonCard variant="elevated">
        <DigitoonText>This is a card component</DigitoonText>
      </DigitoonCard>
      
      <XStack gap="$2">
        <DigitoonButton variant="primary">Primary</DigitoonButton>
        <DigitoonButton variant="secondary">Secondary</DigitoonButton>
      </XStack>
    </YStack>
  )
}

Theming

import { Theme, useTheme } from '@digitoon/design-system'

function ThemedComponent() {
  const theme = useTheme()
  
  return (
    <Theme name="dark">
      <YStack backgroundColor="$background" padding="$4">
        <DigitoonText color="$color">Dark theme content</DigitoonText>
      </YStack>
    </Theme>
  )
}

Design Tokens

import { tokens, themes } from '@digitoon/design-system'

// Access design tokens
const primaryColor = tokens.color.primary500
const spacing = tokens.space[4]

// Use in styled components
const StyledView = styled(View, {
  backgroundColor: '$primary',
  padding: '$4',
  borderRadius: '$md',
})

Available Components

Layout

• XStack, YStack, ZStack - Flex layout components
• View, Stack - Basic view components

Typography

• DigitoonText - Customizable text component
• DigitoonHeading - Heading component with levels 1-6
• Standard HTML headings: H1, H2, H3, H4, H5, H6

Form Controls

• DigitoonButton - Button with multiple variants
• DigitoonInput - Input field with validation states

Containers

• DigitoonCard - Card container with variants
• CardHeader, CardContent, CardFooter - Card sections

Theming

• Theme - Theme provider component
• TamaguiProvider - Root provider

Design Tokens

The design system includes comprehensive design tokens:

• Colors: Brand colors, semantic colors, neutral scales
• Typography: Font sizes, weights, line heights
• Spacing: Consistent spacing scale
• Radii: Border radius values
• Shadows: Elevation and shadow tokens

Themes

Three built-in themes:

• Light: Default light theme
• Dark: Dark theme optimized for night reading
• Sepia: Warm theme for comfortable reading

Development

Prerequisites

• Node.js 18+
• pnpm 8+

Setup

git clone <repository-url>
cd design-system
pnpm install

Available Scripts

pnpm build          # Build the package
pnpm dev            # Watch mode for development
pnpm test           # Run tests
pnpm test:watch     # Run tests in watch mode
pnpm test:coverage  # Run tests with coverage
pnpm lint           # Lint the code
pnpm lint:fix       # Fix linting issues
pnpm typecheck      # Type checking

Testing

The design system includes comprehensive testing setup with Jest and Testing Library:

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Generate coverage report
pnpm test:coverage

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-component
3. Make your changes
4. Run tests: pnpm test
5. Run linting: pnpm lint:fix
6. Commit your changes: git commit -m 'Add new component'
7. Push to the branch: git push origin feature/new-component
8. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

For questions and support:

• Create an issue in the repository
• Check the documentation
• Contact the Digitoon team