🎨 Jupiter Design System

A comprehensive React component library built with Mantine v7 and TypeScript, following Atomic Design principles. Designed for scalability, accessibility, and developer experience within our Nx monorepo.

📋 Table of Contents

• 🎨 Jupiter Design System
  • 📋 Table of Contents
  • 🚀 Quick Start
    • Installation
    • Basic Usage
  • 🏗️ Architecture
    • Atomic Design Structure
    • Design System Layers
  • 📚 Development
    • Running Storybook
  • 🧪 Testing
    • Unit Tests

🚀 Quick Start

Installation

# The library is already installed in the monorepo
# Import components and themes directly

Basic Usage

import { jupiterTheme, Button } from '@lib/jupiter-ds';
import { MantineProvider } from '@mantine/core';

function App() {
  return (
    <MantineProvider theme={jupiterTheme}>
      <Button variant="filled" color="brand">
        Hello Jupiter DS
      </Button>
    </MantineProvider>
  );
}

🏗️ Architecture

Atomic Design Structure

src/lib/
├── 🎨 design-system/
│   ├── tokens/          # Design tokens (colors, typography, spacing)
│   ├── themes/          # Mantine theme configurations
│   └── foundations/     # CSS foundations and global styles
└── 🧩 components/
    ├── atoms/           # Basic building blocks (Button, Input)
    ├── molecules/       # Component combinations (SearchBar, Card)
    └── organisms/       # Complex components (Header, Sidebar)

Design System Layers

1. 🎯 Design Tokens - Raw design values (colors, spacing, typography)
2. 🎭 Themes - Mantine theme configuration with light/dark support
3. 🏗️ Foundations - CSS reset, global styles, and base components
4. 🧩 Components - React components following Atomic Design

📚 Development

Running Storybook

# Start Storybook development server, which will run on port 6006
nx storybook jupiter-ds

🧪 Testing

Unit Tests

# Run all tests
nx test jupiter-ds

Built with ❤️ by the Galileo team