Implementation Guide

Overview

This guide explains how to integrate and use the Juniro Design System in your projects. For detailed component documentation, visit our Storybook.

📦 Installation

From NPM Registry

npm install @juniro/design-system

From GitHub Repository

npm install git+https://github.com/Juniro/juniro-design.git

🚀 Quick Start

1. Install Dependencies

npm install @juniro/design-system react react-dom

2. Import Components

import { Button, Typography, Input } from '@juniro/design-system'

function MyComponent() {
  return (
    <div>
      <Typography variant="h1">Welcome to Juniro</Typography>
      <Input label="Email" placeholder="Enter your email" />
      <Button variant="primary">Get Started</Button>
    </div>
  )
}

3. Import Design Tokens

import { colors, typography, spacing } from '@juniro/design-system'

// Use exact Figma values
const primaryColor = colors.primary[500] // #FF6B35
const headingFont = typography.fontSize['2xl'] // 1.5rem
const cardPadding = spacing.lg // 1.5rem

🎨 Design Token Usage

Colors

import { colors } from '@juniro/design-system'

// Primary brand colors
const primary = colors.primary[500] // #FF6B35
const primaryHover = colors.primary[600] // #E55A2B

// Semantic colors
const success = colors.success[500] // #28A745
const warning = colors.warning[500] // #FFC107
const error = colors.error[500] // #DC3545

// Neutral colors
const textPrimary = colors.neutral[900] // #171717
const textSecondary = colors.neutral[600] // #525252

Typography

import { typography } from '@juniro/design-system'

// Font families
const fontFamily = typography.fontFamily.sans // Inter, system-ui, sans-serif

// Font sizes
const fontSize = {
  xs: typography.fontSize.xs,     // 0.75rem (12px)
  sm: typography.fontSize.sm,     // 0.875rem (14px)
  base: typography.fontSize.base, // 1rem (16px)
  lg: typography.fontSize.lg,     // 1.125rem (18px)
  xl: typography.fontSize.xl,     // 1.25rem (20px)
  '2xl': typography.fontSize['2xl'], // 1.5rem (24px)
}

// Font weights
const fontWeight = {
  light: typography.fontWeight.light,     // 300
  normal: typography.fontWeight.normal,   // 400
  medium: typography.fontWeight.medium,   // 500
  semibold: typography.fontWeight.semibold, // 600
  bold: typography.fontWeight.bold,       // 700
}

Spacing

import { spacing } from '@juniro/design-system'

// Spacing scale (4px base unit)
const spacing = {
  0: spacing[0],    // 0
  1: spacing[1],    // 0.25rem (4px)
  2: spacing[2],    // 0.5rem (8px)
  4: spacing[4],    // 1rem (16px)
  6: spacing[6],    // 1.5rem (24px)
  8: spacing[8],    // 2rem (32px)
  12: spacing[12],  // 3rem (48px)
  16: spacing[16],  // 4rem (64px)
}

🎛️ Component Usage Patterns

Button Variants

import { Button } from '@juniro/design-system'

// Primary actions
<Button variant="primary">Book Activity</Button>

// Secondary actions
<Button variant="secondary">View Details</Button>

// Alternative actions
<Button variant="outline">Cancel</Button>

// Subtle actions
<Button variant="ghost">Edit</Button>

// Destructive actions
<Button variant="danger">Delete Account</Button>

// Success actions
<Button variant="success">Save Changes</Button>

// Warning actions
<Button variant="warning">Proceed with Caution</Button>

Typography Hierarchy

import { Typography } from '@juniro/design-system'

// Page titles
<Typography variant="h1">Main Page Title</Typography>

// Section headings
<Typography variant="h2">Section Heading</Typography>

// Subsection titles
<Typography variant="h3">Subsection Title</Typography>

// Card titles
<Typography variant="h4">Card Title</Typography>

// Body text
<Typography variant="body">Main content text</Typography>

// Small text
<Typography variant="body-sm">Secondary information</Typography>

// Labels
<Typography variant="label">Form Label</Typography>

// Captions
<Typography variant="caption">Last updated: January 15, 2024</Typography>

Form Components

import { Input, Select, Checkbox, RadioGroup, Textarea } from '@juniro/design-system'

// Text input
<Input 
  label="Email Address" 
  placeholder="Enter your email"
  type="email"
  required
/>

// Dropdown selection
<Select
  label="Activity Type"
  options={[
    { value: 'sports', label: 'Sports' },
    { value: 'arts', label: 'Arts & Crafts' },
    { value: 'music', label: 'Music' },
    { value: 'childcare', label: 'Childcare' },
    { value: 'parties', label: 'Parties & Events' }
  ]}
/>

// Checkbox
<Checkbox
  label="I agree to the terms and conditions"
  required
/>

// Radio group
<RadioGroup
  label="Preferred Contact Method"
  options={[
    { value: 'email', label: 'Email' },
    { value: 'phone', label: 'Phone' },
    { value: 'sms', label: 'SMS' }
  ]}
/>

// Textarea
<Textarea
  label="Additional Notes"
  placeholder="Any special requirements..."
  rows={4}
/>

🎨 Customization

Theme Customization

import { createTheme } from '@juniro/design-system'

const customTheme = createTheme({
  colors: {
    primary: {
      500: '#your-brand-color',
      600: '#your-brand-color-hover'
    }
  },
  typography: {
    fontFamily: {
      sans: ['Your Font', 'system-ui', 'sans-serif']
    }
  }
})

// Apply theme to your app
<ThemeProvider theme={customTheme}>
  <YourApp />
</ThemeProvider>

Component Variants

// Custom button styling
<Button 
  variant="primary" 
  size="lg"
  className="custom-button-class"
>
  Custom Button
</Button>

// Custom typography
<Typography 
  variant="h1" 
  color="primary"
  weight="bold"
  className="custom-heading"
>
  Custom Heading
</Typography>

🔧 Integration with Frameworks

React (Create React App)

// App.js
import { Button, Typography } from '@juniro/design-system'
import '@juniro/design-system/dist/styles.css'

function App() {
  return (
    <div className="App">
      <Typography variant="h1">Welcome to Juniro</Typography>
      <Button variant="primary">Get Started</Button>
    </div>
  )
}

Next.js

// pages/_app.js
import '@juniro/design-system/dist/styles.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// pages/index.js
import { Button, Typography } from '@juniro/design-system'

export default function Home() {
  return (
    <div>
      <Typography variant="h1">Welcome to Juniro</Typography>
      <Button variant="primary">Get Started</Button>
    </div>
  )
}

Vue.js

<template>
  <div>
    <Typography variant="h1">Welcome to Juniro</Typography>
    <Button variant="primary">Get Started</Button>
  </div>
</template>

<script>
import { Button, Typography } from '@juniro/design-system'
import '@juniro/design-system/dist/styles.css'

export default {
  components: {
    Button,
    Typography
  }
}
</script>

🧪 Testing

Component Testing

import { render, screen } from '@testing-library/react'
import { Button } from '@juniro/design-system'

test('renders button with correct text', () => {
  render(<Button variant="primary">Click me</Button>)
  expect(screen.getByText('Click me')).toBeInTheDocument()
})

Accessibility Testing

import { render } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'
import { Button } from '@juniro/design-system'

expect.extend(toHaveNoViolations)

test('button should not have accessibility violations', async () => {
  const { container } = render(<Button variant="primary">Click me</Button>)
  const results = await axe(container)
  expect(results).toHaveNoViolations()
})

🚀 Performance Optimization

Tree Shaking

// Import only what you need
import { Button } from '@juniro/design-system/Button'
import { Typography } from '@juniro/design-system/Typography'

// Instead of
import { Button, Typography } from '@juniro/design-system'

Lazy Loading

import { lazy, Suspense } from 'react'

const Button = lazy(() => import('@juniro/design-system/Button'))

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Button variant="primary">Click me</Button>
    </Suspense>
  )
}

🔍 Troubleshooting

Common Issues

Styles Not Loading

# Make sure you've imported the CSS
import '@juniro/design-system/dist/styles.css'

TypeScript Errors

# Install types if needed
npm install @types/react @types/react-dom

Component Not Rendering

// Check if component is properly imported
import { Button } from '@juniro/design-system'

// Verify component usage
<Button variant="primary">Text</Button>

Getting Help

• Documentation: Storybook
• Issues: GitHub Issues
• Discussions: GitHub Discussions

📚 Additional Resources

• Storybook - Interactive component documentation
• Component Status - Implementation tracking
• Brand Guidelines - Brand rules and usage
• Accessibility - Accessibility standards