T22 Design System

A comprehensive React design system built from Figma designs using atomic design methodology. This package provides a complete set of components, design tokens, and templates for building consistent user interfaces.

📦 Installation

npm install t22-designsystem

🚀 Quick Start

import React from 'react';
import { Button, Banner, Carousel } from 't22-designsystem';
import 't22-designsystem/dist/style.css';

function App() {
  return (
    <div>
      <Banner type="info">Welcome to T22 Design System</Banner>
      <Button style="accent">Get Started</Button>
      <Carousel variant="default" />
    </div>
  );
}

🏗️ Architecture

Atomic Design Structure

The design system follows atomic design principles with clear hierarchy:

t22-designsystem/
├── atoms/           # Basic building blocks (8 components)
├── molecules/       # Simple UI combinations (22 components)  
├── organisms/       # Complex UI sections (7 components)
├── templates/       # Complete page layouts (1 template)
└── tokens/          # Design tokens (colors, typography, spacing)

Component Categories

Atoms (8 components)

Basic, indivisible UI elements:

• CalendarFoldIcon, CheckIcon, ChevronDownIcon, CirclePauseIcon
• Icon, PackageIcon, RadioIcon, PlaceholderIcon

Molecules (22 components)

Simple combinations of atoms:

• AddOn, Banner, Button, CarouselNav, CarouselPips
• CheckboxLine, Dialogue, FAQCell, FooterPDP, IconLine
• Lists, PageDivider, PageHeader, PanelHeader, RadioInline
• Select, SelectItem, SelectList, StarRating, TextArea
• Textfield, Tile, TileMultiItem

Organisms (7 components)

Complex UI sections:

• Carousel, FAQ, Hero, HowItWorks, Membership, Reviews, Supporting

Templates (1 template)

Complete page layouts:

• PDPTemplate - Product Detail Page template

🎨 Design Tokens

Colors

import { colors } from 't22-designsystem/tokens';

// Available color tokens
colors.foreground.primary     // #141414
colors.background.accent      // #f08e80
colors.status.success         // #07a023
// ... and more

Typography

import { typography } from 't22-designsystem/tokens';

// Typography tokens
typography.h1                 // 600 32px/40px "Open Sans"
typography.body               // 400 16px/22px "Open Sans"
// ... and more

Spacing

import { spacing } from 't22-designsystem/tokens';

// Spacing tokens
spacing.item                  // 8px
spacing.group                 // 16px
// ... and more

🔧 Component Interfaces

Common Props Pattern

All components follow a consistent interface pattern:

interface ComponentProps {
  // Content
  children?: React.ReactNode;
  
  // Variants
  variant?: 'default' | 'desktop' | 'mobile';
  
  // States
  state?: 'default' | 'hover' | 'active' | 'disabled';
  
  // Styling
  className?: string;
  style?: React.CSSProperties;
  
  // Behavior
  onClick?: () => void;
  onChange?: (value: any) => void;
}

Example: Button Component

interface ButtonProps {
  children?: string;
  style?: 'accent' | 'secondary' | 'ghost';
  state?: 'default' | 'hover' | 'active' | 'disabled';
  size?: 'small' | 'medium' | 'large';
  className?: string;
  onClick?: () => void;
}

Example: Banner Component

interface BannerProps {
  children?: string;
  type?: 'info' | 'success' | 'warning' | 'error';
  showLeftIcon?: boolean;
  showRightIcon?: boolean;
  dismissible?: boolean;
  className?: string;
  onClose?: () => void;
}

📋 Component Variants

Most components support multiple variants for different contexts:

Button Variants

• accent - Primary action button
• secondary - Secondary action button
• ghost - Minimal button style

Banner Types

• info - Informational messages
• success - Success confirmations
• warning - Warning messages
• error - Error messages

Carousel Variants

• default - Standard carousel
• desktop - Desktop-optimized layout
• mobile - Mobile-optimized layout

🎯 Usage Examples

Basic Components

import { Button, Banner, Textfield } from 't22-designsystem';

// Button with different styles
<Button style="accent">Primary Action</Button>
<Button style="secondary">Secondary Action</Button>

// Banner with different types
<Banner type="info">Information message</Banner>
<Banner type="success">Success message</Banner>

// Form inputs
<Textfield placeholder="Enter your name" />

Complex Components

import { Carousel, FAQ, Reviews } from 't22-designsystem';

// Carousel with images
<Carousel 
  variant="default"
  images={[
    { src: '/image1.jpg', alt: 'Image 1' },
    { src: '/image2.jpg', alt: 'Image 2' }
  ]}
/>

// FAQ section
<FAQ 
  variant="default"
  questions={[
    { question: "What is this?", answer: "A design system" }
  ]}
/>

// Reviews section
<Reviews 
  variant="default"
  reviews={[
    { rating: 5, text: "Great product!" }
  ]}
/>

Complete Template

import { PDPTemplate } from 't22-designsystem';

// Product Detail Page template
<PDPTemplate 
  showSupporting={true}
  showReviews={true}
  showFAQ={true}
  showHowItWorks={true}
  showMembership={true}
/>

🔍 Component Metadata

Access component metadata for dynamic usage:

import { manifest, structure } from 't22-designsystem';

// Get all components by category
console.log(structure.atoms);      // Array of atom components
console.log(structure.molecules);  // Array of molecule components
console.log(structure.organisms);  // Array of organism components
console.log(structure.templates);  // Array of template components

// Get detailed component information
const buttonInfo = manifest.components.find(c => c.name === 'Button');
console.log(buttonInfo.props);     // Available props
console.log(buttonInfo.variants);  // Available variants

🎨 Styling & Theming

CSS Custom Properties

The design system uses CSS custom properties for theming:

:root {
  --color-foreground-primary: #141414;
  --color-background-accent: #f08e80;
  --font-family-body: "Open Sans", sans-serif;
  --spacing-item: 8px;
  --spacing-group: 16px;
}

Font Isolation

Components are designed to resist external font inheritance:

/* Components automatically use design system fonts */
* {
  font-family: var(--font-family-body) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings) !important;
}

📁 File Structure

dist/
├── index.js                 # Main entry point
├── style.css               # Bundled styles
├── atoms/
│   └── index.js            # Atom components
├── molecules/
│   └── index.js            # Molecule components
├── organisms/
│   └── index.js            # Organism components
├── templates/
│   └── index.js            # Template components
└── tokens/
    └── index.js            # Design tokens

🔧 Development

Building the Package

npm run build

Type Checking

npm run type-check

Testing

npm test

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📞 Support

For questions or issues, please open an issue on the GitHub repository.

Package URL: https://www.npmjs.com/package/t22-designsystem