React Design System (React TSUP DS)

Design System Library modern, konsisten, dan reusable yang dibangun dengan React, TypeScript, dan Tsup. Library ini memiliki arsitektur CSS yang terisolasi (scoped), kumpulan komponen UI yang lengkap, dan API yang sepenuhnya bertipe (fully typed).

🚀 Fitur

• 🎨 Tema Konsisten: Token standar untuk warna, spasi, dan tipografi.
• 🧩 10+ Komponen Reusable:
  • Input: Button, Input, Textarea
  • Feedback: Alert, Badge, Spinner
  • Tampilan: Card, Avatar
  • Layout: Navbar, Footer
• 📦 Bundling Modern: Dioptimalkan dengan Tsup untuk dukungan ESM & CJS.
• 🟦 TypeScript: Definisi tipe kelas satu sudah termasuk.
• 🎯 Style Terisolasi: CSS Modules memastikan tidak ada konflik style (prefix .ds-).

📦 Instalasi

Install package melalui npm atau yarn:

npm install react-tsup-ds
# atau
yarn add react-tsup-ds

Catatan untuk Pemilik Project: Lihat file INSTALLATION.md untuk panduan cara mem-publish package ini ke NPM.

🛠 Cara Penggunaan

1. Import Global Styles

Import file CSS sekali saja di entry point aplikasi Anda (misalnya main.tsx atau App.tsx):

// main.tsx
import 'react-tsup-ds/dist/index.css';

2. Gunakan Komponen

Import dan gunakan komponen langsung di aplikasi React Anda:

import { Button, Card, CardHeader, CardTitle, Badge, Navbar, NavbarBrand } from 'react-tsup-ds';

function App() {
  return (
    <div>
      <Navbar>
        <NavbarBrand>Aplikasi Saya</NavbarBrand>
      </Navbar>

      <div style={{ padding: '2rem' }}>
        <Card>
          <CardHeader>
             <CardTitle>Halo Dunia</CardTitle>
          </CardHeader>
          <div style={{ padding: '1.5rem' }}>
            <Badge variant="success">Baru</Badge>
            <p>Selamat datang di React TSUP Design System.</p>
            <Button variant="solid" onClick={() => alert('Diklik!')}>
              Mulai Sekarang
            </Button>
          </div>
        </Card>
      </div>
    </div>
  );
}

🧩 Daftar Komponen

| Komponen | Deskripsi | Props Utama | |-----------|-------------|-----------------| | Button | Pemicu aksi | variant (solid/outline/ghost), size | | Input | Kolom teks | label, error, placeholder | | Textarea | Input multi-baris | label, helperText, rows | | Card | Kontainer konten | padding (bool), gabungkan dengan Header/Title/Footer | | Alert | Pesan feedback | variant (success/error/warning/info), title | | Badge | Label status | variant (primary/success/error/dll) | | Avatar | Gambar profil | src, initials, size | | Spinner | Indikator loading | size, variant | | Navbar | Navigasi atas | Gabungkan dengan Brand/Content/Item | | Footer | Footer halaman | Kontainer generik |

📄 Lisensi

MIT