npm package: @rungalileo/jupiter-ds
Description: A comprehensive React component library built with Mantine v7 and TypeScript
Latest version: 0.0.8

# 🎨 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.

![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=flat&logo=storybook&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white)
![Mantine](https://img.shields.io/badge/Mantine-339AF0?style=flat&logo=mantine&logoColor=white)
![Jest](https://img.shields.io/badge/Jest-C21325?style=flat&logo=jest&logoColor=white)

---

## 📋 Table of Contents

- [🎨 Jupiter Design System](#-jupiter-design-system)
  - [📋 Table of Contents](#-table-of-contents)
  - [🚀 Quick Start](#-quick-start)
    - [Installation](#installation)
    - [Basic Usage](#basic-usage)
  - [🏗️ Architecture](#️-architecture)
    - [Atomic Design Structure](#atomic-design-structure)
    - [Design System Layers](#design-system-layers)
  - [📚 Development](#-development)
    - [Running Storybook](#running-storybook)
  - [🧪 Testing](#-testing)
    - [Unit Tests](#unit-tests)

---

## 🚀 Quick Start

### Installation

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

### Basic Usage

```tsx
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

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

## 🧪 Testing

### Unit Tests

```bash
# Run all tests
nx test jupiter-ds
```

<!-- ## 🤝 Contributing

### Adding New Components

1. Create component in appropriate atomic level (`atoms/`, `molecules/`, `organisms/`)
2. Include TypeScript interfaces
3. Add comprehensive Storybook stories
4. Write unit tests with React Testing Library
5. Export from `index.ts` files

### Design Token Updates

1. Update token files in `design-system/tokens/`
2. Regenerate theme configuration if needed
3. Test across all components in Storybook
4. Update documentation -->


**Built with ❤️ by the Galileo team**