# Spoko Design System
> Open source'owy Design System oparty na Astro z komponentami Vue 3 i stylami UnoCSS. Opublikowany jako pakiet npm, łączy stronę dokumentacji z biblioteką komponentów wielokrotnego użytku.
- URL: https://spoko.space/pl/spoko-design-system/
- Published: 2025-01-20
- Tags: astro, vue3, unocss, typescript, design-system, pwa, open-source, npm
---## Spoko Design System

Stworzyłem open source'owy Design System, który łączy stronę dokumentacji z biblioteką komponentów wielokrotnego użytku w jednym pakiecie. System jest zbudowany z wykorzystaniem nowoczesnych technologii (Astro, Vue 3, UnoCSS) i opublikowany na npm, co ułatwia integrację z projektami.

## Architektura podwójnego zastosowania

To unikalne podejście pozwala projektowi pełnić dwie funkcje jednocześnie:

**Strona dokumentacji** - Interaktywna dokumentacja na [sds.spoko.space](https://sds.spoko.space/) z podglądem komponentów na żywo, przykładami kodu i kompleksowymi przewodnikami dla:
- Podstawowych tokenów designu (kolory, typografia, odstępy, cienie)
- Ponad 20 gotowych komponentów (przyciski, modale, formularze, karuzele)
- Wzorców projektowych i zaawansowanych komponentów
- Pełnej funkcjonalności wyszukiwania przez Pagefind

**Pakiet npm** - Instalowalna biblioteka komponentów (`spoko-design-system`) oferująca:
- Importowalne komponenty Vue 3 z obsługą TypeScript
- Eksportowalną konfigurację UnoCSS dla spójnego stylowania
- Konfigurację systemu ikon z ponad 10 wyselekcjonowanymi kolekcjami Iconify
- Eksporty wspierające tree-shaking dla optymalnego rozmiaru paczki

## Kluczowe funkcje

### Nowoczesna biblioteka komponentów

System zawiera starannie przygotowane komponenty, które działają w obu kontekstach - jako część strony dokumentacji Astro i jako importowalne komponenty z pakietu npm:
- Interaktywne elementy UI (przyciski, pola tekstowe, modale, dropdown'y)
- Komponenty nawigacji (navbar, breadcrumbs, paginacja)
- Komponenty treści (karty, zakładki, akordeony)
- Specjalistyczne komponenty motoryzacyjne (używane produkcyjnie w projektach polo.blue)

### Spójne stylowanie z UnoCSS

Konfiguracja UnoCSS jest podzielona na łatwe w utrzymaniu moduły:
- **System motywów** - Kolory, typografia, breakpointy, wymiary
- **Skróty komponentów** - Prekonfigurowane style komponentów zorganizowane według kategorii
- **Eksportowalna konfiguracja** - Użytkownicy mogą rozszerzać bazową konfigurację przez `createSdsConfig()`

Takie podejście zapewnia spójność między projektami, jednocześnie umożliwiając dostosowanie do indywidualnych potrzeb.

### Integracja systemu ikon

Design System zawiera dwa skoordynowane systemy ikon współpracujące ze sobą:
- **UnoCSS Icons** - Statyczne importy przez klasy `i-{kolekcja}-{nazwa}`
- **astro-icon** - Dynamiczne importy dla komponentów Astro

Wyselekcjonowane kolekcje obejmują Material Design Icons, Lucide, Carbon, Boxicons oraz specjalistyczne zestawy ikon motoryzacyjnych i technologicznych.

### Zastosowanie w praktyce

Design System jest sprawdzony w boju na produkcji w wielu działających projektach:
- [catalog.polo.blue](https://catalog.polo.blue/) - Katalog części VW Polo 6R
- [polo.blue](https://polo.blue) - Główna strona motoryzacyjna
- [polo6r.pl](https://polo6r.pl) - Polska społeczność motoryzacyjna

Dzięki temu komponenty są gotowe do produkcji i radzą sobie z rzeczywistymi przypadkami brzegowymi.

## Zautomatyzowany proces wydawniczy

Projekt wykorzystuje semantic-release do zarządzania wersjami:
- Konwencjonalne commity określają zmiany wersji
- Automatyczne generowanie CHANGELOG
- Tworzenie wydań na GitHub
- Publikacja na npm po merge do main

To zapewnia spójne wersjonowanie i niezawodne aktualizacje pakietu.

## Wykorzystane technologie

Design System jest open source (licencja MIT) i aktywnie rozwijany z automatycznymi aktualizacjami zależności przez Renovate oraz kontrolą jakości kodu przez SonarQube.