@damarkuncoro/agnostic-ui-skin

Paket aggregator untuk semua “skin” visual Agnostic UI. Skin menerjemahkan kontrak UI menjadi kelas CSS/Tailwind konkret. Aplikasi idealnya “hanya tahu” aggregator ini, bukan paket skin individual.

Skin yang tersedia

• shadcn, tailwind, tailwind-modern, glass, material, neumorphic, retro

Prinsip

• SRP, DRY, KISS, YAGNI
• SOLID, Composition over Inheritance
• UI Contract → Base UI → Tailwind → Skins → Pages

Ekspor

• JS aggregator:
  • import { tailwind, tailwind_modern, shadcn, retro } from '@damarkuncoro/agnostic-ui/skin'
• CSS wrapper (untuk import CSS siap pakai):
  • @damarkuncoro/agnostic-ui/skin/tailwind.css
  • @damarkuncoro/agnostic-ui/skin/tailwind-modern.css
  • @damarkuncoro/agnostic-ui/skin/retro.css

Cara Pakai (React)

import { UIProvider } from '@damarkuncoro/agnostic-ui/react'
import { tailwind_modern as skin } from '@damarkuncoro/agnostic-ui/skin'

function App() {
  return (
    <UIProvider skin={skin}>
      {/* ... */}
    </UIProvider>
  )
}

Cara Pakai CSS

• Import di pipeline build CSS aplikasi (disarankan digabung oleh proses build per halaman):
  • @damarkuncoro/agnostic-ui/skin/tailwind.css
  • @damarkuncoro/agnostic-ui/skin/tailwind-modern.css
  • @damarkuncoro/agnostic-ui/skin/retro.css
• Alternatif: gabungkan dist/skin.css setiap paket skin di script build (lihat apps/react-demo).

Arsitektur & Utilitas

• Variants dan sizes didefinisikan dengan class-variance-authority (CVA).
• Penggabungan kelas: tailwind-merge, clsx.
• Skin tidak merender DOM; hanya menyusun string kelas. Rendering oleh paket framework.

Tambah Skin Baru

• Buat direktori di paket skin tersendiri (mis. packages/agnostic-ui-skin-<nama>/src/components/...).
• Implementasikan CVA dan helper getButtonClass.
• Tambahkan ekspor di index.ts aggregator untuk namespace skin baru.
• Jika memakai Tailwind, sediakan src/index.css dan konfigurasi tailwind.config.js, lalu hasilkan dist/skin.css.

Catatan

• Pastikan Tailwind CLI tersedia jika skin memakai Tailwind.
• Jalankan build di masing-masing skin agar dist/skin.css selalu terbarui.