Komponen UI

Frontend menggunakan shadcn/ui (gaya new-york) sebagai pustaka komponen utama, dilengkapi dengan komponen kustom untuk fungsionalitas spesifik domain.

Pustaka Komponen shadcn/ui

55+ komponen siap pakai yang aksesibel, diinstal dengan sistem desain new-york:

Elemen Formulir

• Button, Input, Textarea, Select, Switch, Checkbox, RadioGroup, Slider, Form, Label, FormField

Tata Letak

• Card, Tabs, Accordion, Collapsible, Dialog, Sheet, Popover, Tooltip

Navigasi

• Navbar, Sidebar, Breadcrumb, Link, Menubar

Umpan Balik

• Toast, Alert, Alert Dialog, Sonner (notifikasi)

Tampilan Data

• Table, Badge, Avatar, Progress, Skeleton, Carousel, Calendar

Overlay

• Modal, Drawer, Hover Card, Menu

Semua komponen menggunakan:

• Ikon Lucide via lucide-react
• Tailwind v4 dengan CSS variables
• Dukungan dark mode
• Utilitas cn() untuk komposisi class

Komponen Kustom

GoogleLoginButton

Integrasi login Google One Tap:

'use client';

import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';

export function GoogleLoginButton() {
  return (
    <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!}>
      <GoogleLogin
        onSuccess={handleLoginSuccess}
        onError={handleLoginError}
        useOneTap
      />
    </GoogleOAuthProvider>
  );
}

ReadingCatalog

Browser artikel dengan kategorisasi:

• Fitur: Filter berdasarkan kategori, pencarian, paginasi
• Data: Struktur data mock dengan id, title, author, category
• Interaksi: Klik untuk navigasi ke /bacaankuis/[id]

ReadingQuizExperience

Antarmuka kuis untuk penyelesaian bacaan:

• Progress bar: Indikator penyelesaian visual
• Sticky action bar: Tombol submit selalu terlihat
• Navigasi pertanyaan: Lompat antar pertanyaan
• Penanganan submit: Pengiriman akhir dengan validasi

CommentForm

Komponen pengiriman komentar:

• Field: Textarea konten, toggle anonim
• Validasi: Validasi skema Zod
• Submitting: Status disabled selama submit

CommentList

Threading komentar rekursif dengan fitur sosial:

• Lencana tier: Hierarki pengguna berbasis level
• Tampilan klan: Tag klan dan lencana per komentar
• Formulir balasan: Komposisi komentar bersarang
• Toggle reaksi: Interaksi like/dislike
• Tombol hapus: Penghapusan yang diinisiasi pengguna

Penanganan Formulir

Semua formulir menggunakan React Hook Form dengan validasi Zod:

import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const loginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

type LoginForm = z.infer<typeof loginSchema>;

function LoginForm() {
  const form = useForm<LoginForm>({
    resolver: zodResolver(loginSchema),
    defaultValues: { email: '', password: '' },
  });

  function onSubmit(data: LoginForm) {
    // Submit ke /api/v1/auth/login
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={() => <Input />}
        />
        {/* ... */}
      </form>
    </Form>
  );
}

Sistem Styling

Fitur Tailwind v4:

• CSS variables untuk manajemen design token
• Direktif @layer base, components, utilities
• Prefix dark: untuk varian dark mode
• Warna OKLCH untuk palet warna yang aksesibel

Konfigurasi:

@import 'tailwindcss';

:root {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  --primary: 24 9.8% 10%;
  /* ... */
}

.dark {
  --background: 20 14.3% 4.1%;
  --foreground: 60 9.1% 97.8%;
}

Stub Kosong dan Anti-pattern

Halaman Dashboard Kosong

Rute berikut adalah placeholder dan perlu diimplementasikan:

• /dashboard/clans — Manajemen klan
• /dashboard/missions — Pelacakan misi
• /dashboard/achievements — Pameran pencapaian
• /dashboard/leaderboard — Tampilan leaderboard

Stub Action Fitur

Modul action kosong yang memerlukan implementasi:

• src/features/league/actions.ts
• src/features/gamification/actions.ts
• src/features/auth/actions.ts

Anti-pattern

Direct fetch dari test-java: Halaman di /app/test-java/page.tsx melakukan panggilan langsung fetch('http://localhost:8080'), melanggar pattern BFF.

Rute auth duplikat: Direktori /app/auth/ dan /app/(auth)/ keduanya ada, menciptakan duplikasi rute.