DEV Community

Nucleify
Nucleify

Posted on

Atomic Design w Nucleify – Twórz spójne i skalowalne UI

#nuxt #vue #typescript #webdev

Czym jest Atomic Design?

Atomic Design, stworzony przez Brada Frosta, dzieli interfejsy użytkownika na fundamentalne bloki budulcowe. Zainspirowany chemią, organizuje komponenty w hierarchię od najmniejszych elementów do pełnych stron.

Kluczowe zalety:

  • Spójność – komponenty wielokrotnego użytku zapewniają jednolity wygląd

  • Łatwość utrzymania – zmiany propagują się automatycznie w całym systemie

  • Skalowalność – łatwe rozszerzanie funkcjonalności bez łamania istniejących komponentów

  • Współpraca – przejrzysta struktura usprawnia pracę zespołową

Główna zasada: Brak logiki biznesowej

Komponenty Atomic Design nie powinny zawierać logiki biznesowej. Komponenty obsługują tylko funkcjonalność związaną z ich zachowaniem UI:

✅ Dozwolone ❌ Niedozwolone
Walidacja wejścia (format, długość) Zakodowane na stałe wywołania API
Animacje i przejścia Bezpośrednie pobieranie danych
Lokalny stan komponentu Mutacje store'a
Emitowanie zdarzeń Zakodowane na stałe URL-e lub endpointy
Renderowanie na podstawie propsów Sprawdzanie autoryzacji lub logika domenowa
Funkcje dostępności Obliczenia specyficzne dla domeny
Konfigurowalne callbacki przez propsy Sztywne reguły biznesowe
Generyczne handlery zdarzeń Zakodowana na stałe konfiguracja

Logika biznesowa należy do:

  • Store'ów (Pinia)

  • Composables

  • Serwisów

Rozszerzenia Nucleify

Nucleify rozszerza standardowy Atomic Design o moduły, w których logika biznesowa jest dozwolona:

Moduł Przeznaczenie
nuc_templates Szablony komponentów wielokrotnego użytku (karty, formularze, modale)
nuc_sections Sekcje strony z logiką layoutu, obsługą danych i zachowaniem specyficznym dla sekcji
nuc_pages Pełne komponenty stron z wywołaniami API, dostępem do store'a i regułami biznesowymi

Te moduły są oddzielone od nuxt/atomic/, aby utrzymać komponenty UI czystymi i wielokrotnego użytku.

Przegląd hierarchii

Nucleify wprowadza dodatkową warstwę Bosons dla typów i narzędzi.

Bosons     → Interfejsy, funkcje pomocnicze, stałe (niewidoczna warstwa)
Atoms      → Podstawowe elementy UI (Button, Input, Icon)
Molecules  → Proste kombinacje atomów (FloatLabel, Tile)
Organisms  → Złożone sekcje UI (DataTable, Dialog, Menu)
Templates  → Szablony komponentów wielokrotnego użytku (nuc_templates)
Sections   → Sekcje strony z logiką (nuc_sections)
Pages      → Pełne strony z wywołaniami API i dostępem do store'a (nuc_pages)
Enter fullscreen mode Exit fullscreen mode

Bosons – Niewidoczny fundament

Bosony to najmniejsze, niepodzielne jednostki logiki wielokrotnego użytku. Nie renderują niczego, ale stanowią fundament dla wszystkich komponentów:

// types/interfaces.ts
export interface ButtonInterface {
  label?: string
  variant?: 'primary' | 'secondary' | 'danger'
  disabled?: boolean
}

// utils/format_date.ts
export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('en-US').format(date)
}

// constants/breakpoints.ts
export const BREAKPOINTS = {
  mobile: 768,
  tablet: 1024,
  desktop: 1440,
} as const
Enter fullscreen mode Exit fullscreen mode

Atoms – Podstawowe elementy wizualne

Atomy to najmniejsze komponenty UI, których nie można dalej rozbić bez utraty znaczenia. Przykłady: Button, Input, Icon, Label, Badge, Checkbox, Avatar.

Dozwolona logika:

  • Obsługa zdarzeń click/focus/hover

  • Zarządzanie stanem wewnętrznym (np. wartość inputa)

  • Warunkowe stylowanie na podstawie propsów

  • Emitowanie zdarzeń do rodzica

<template>
  <button :class="[$style['ad-button'], variant && $style[variant]]" :disabled="disabled" @click="$emit('click', $event)">
    <slot />
  </button>
</template>

<script setup lang="ts">
import type { ButtonInterface } from './types'

defineProps<ButtonInterface>()
defineEmits<{ click: [event: MouseEvent] }>()
</script>
Enter fullscreen mode Exit fullscreen mode

Molecules – Proste kombinacje

Molekuły łączą atomy w funkcjonalne jednostki, zachowując prostotę. Przykłady: FloatLabel, Anchor, Tile.

Dozwolona logika:

  • Koordynacja stanów atomów potomnych

  • Proste wartości obliczane

  • Lokalna walidacja (tylko format, bez reguł biznesowych)

Organisms – Złożone sekcje

Organizmy składają się z molekuł, atomów lub innych organizmów. Nadal są czysto prezentacyjne. Przykłady: DataTable, Dialog, Menu, Card.

Dozwolona logika:

  • Renderowanie danych przekazanych przez propsy

  • Lokalne filtrowanie/sortowanie dostarczonych danych

  • Zarządzanie stanami otwórz/zamknij

  • Emitowanie zdarzeń interakcji użytkownika

Niedozwolone: wywołania API lub dostęp do store'a.

Templates, Sections i Pages

  • Templates (nuc_templates) – szablony wielokrotnego użytku dla kart, formularzy, modali; logika biznesowa dozwolona

  • Sections (nuc_sections) – bloki strony łączące szablony i organizmy z logiką layoutu i danych

  • Pages (nuc_pages) – pełne strony łączące komponenty UI ze store'ami i wywołaniami API

Najlepsze praktyki

  1. Utrzymuj komponenty czyste – przewidywalne wyjścia, brak efektów ubocznych

  2. Propsy w dół, zdarzenia w górę – rodzic obsługuje logikę biznesową

  3. Pojedyncza odpowiedzialność – każdy komponent robi jedną rzecz dobrze

  4. Używaj interfejsów TypeScript – propsy i dane bezpieczne typowo

Top comments (0)