jo-client v2 didesain khusus bagi ekosistem React 19 + TypeScript. Pustaka ringan (zero-dependencies) ini akan memangkas puluhan jam pengembangan Anda dengan menyajikan Hooks yang kokoh untuk HTTP Requests, Autentikasi, Manajemen Form, dan Kerangka Game Canvas.

🌟 Fitur Utama

🔌 State-Driven HTTP Client (useLKSHttp)

Wrapper API (Fetch) yang langsung terikat pada lifecycle komponen React Anda. Status loading dan error ditangani sepenuhnya secara internal tanpa perlu banyak useState redundan. Bearer Token pun akan dipasangkan secara otomatis.

🛡️ Type-Safe Form Validator (useLKSValidator)

Sistem pemvalidasi form real-time berbasis Schema Object. Terlindungi secara ketat oleh tipe (strict-typing), mencegah komponen Anda crash karena tipe data tak terduga.

🔐 Global Auth Manager (useLKSAuth)

Kendali tunggal atas Status Login pengguna secara langsung melintasi seluruh komponen aplikasi Anda menggunakan sinkronisasi reaktif dari localStorage.

🎮 Canvas Game Helpers (LKSGame)

Karena LKS tidak pernah terlepas dari pembuatan mini-game, modul murni ini memfasilitasi algoritma dasar (contoh: AABB Collision Box dan Asset Preloader). Bebas overlap manipulasi DOM.

💻 Panduan Singkat

Eksekusi Query API Terlindungi (Protected Endpoint)

Hanya dalam beberapa baris kode, Anda memiliki sistem data-fetching yang elegan:

import { useEffect, useState } from 'react';
import { useLKSHttp } from '@jodijonatan/jo-client';

export function ProductList() {
  const { get, isLoading, error } = useLKSHttp("http://localhost:8000/api");
  const [products, setProducts] = useState([]);

  useEffect(() => {
    // Fungsi get() menyertakan Token secara otomatis!
    get("/products").then(response => {
      if (response) setProducts(response.data);
    });
  }, [get]);

  // Handle otomatis status fetching
  if (isLoading) return <p className="animate-pulse">Loading products...</p>;
  if (error) return <p className="text-red-500">Error: {error.message}</p>;

  return (
    <ul className="space-y-2">
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Registrasi Form Bebas-Ribet

Lacak validasi input tanpa if-else bertingkat:

import { useState } from 'react';
import { useLKSValidator } from '@jodijonatan/jo-client';

export function UserForm() {
  const [formData, setFormData] = useState({ email: '', age: '' });
  
  // Definisikan Skema secara dinamis
  const { errors, validate, isValid } = useLKSValidator({
    email: ['required', 'email'],
    age: ['required', 'min:1']
  });

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validate(formData)) {
      alert("Tahap Penyimpanan Berhasil Divalidasi!");
    }
  };

  return (
    <form onSubmit={onSubmit} className="grid gap-4">
      <input 
        placeholder="Alamat Email"
        onChange={(e) => setFormData({...formData, email: e.target.value})} 
      />
      {errors.email && <small className="text-red-500 italic">{errors.email}</small>}
      
      <button type="submit" disabled={!isValid}>Proses Input</button>
    </form>
  );
}

Mengakses Status Pengguna (Auth)

import { useLKSAuth } from '@jodijonatan/jo-client';

export function Header() {
  const { user, isLoggedIn, logout } = useLKSAuth();

  return (
    <header className="flex justify-between">
      <span>Modul B: Portal Admin</span>
      {isLoggedIn ? (
        <div className="flex gap-4">
           <span>Hai, {user?.username}</span>
           <button onClick={logout}>Keluar</button>
        </div>
      ) : (
        <span>Status: Guest</span>
      )}
    </header>
  );
}

🛠 Pemasangan ke Proyek

Direkomendasikan agar paket jo-client ini terpasang secara lokal berdampingan pada direktori kerja root Anda:

npm install -S file:../jo-client

(Catatan: Proyek yang di-build menggunakan jo-builder umumnya sudah menyematkan script di atas).