ZarrCore JS

TypeScript utility library untuk API client management, form handling, dan automatic route generation dalam React applications.

📚 Documentation

| File | Purpose | |------|---------| | quick-start.md | Setup examples | | api-client.md | API client guide | | forms.md | Forms guide | | router.md | Router guide | | helpers.md | Helpers guide |

🚀 Installation

npm install zarrcore

📦 Installation

npm install zarrcore

🚀 Quick Start

1. API Client

import { createApiClient, createApiFactory } from 'zarrcore';

const client = createApiClient({ baseURL: 'https://api.example.com' });
const api = createApiFactory(client);

export const UserApi = {
  list: () => api.get<User[]>('/users'),
  create: (data) => api.post<User>('/users', data)
};

2. Fetching Data

import { useApiLoad, useApiSend } from 'zarrcore';

// Auto-fetch data saat mount
function UserList() {
  const [refetch, { data, loading, error }] = useApiLoad(UserApi.list);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;
  
  return (
    <div>
      <button onClick={() => refetch()}>Refresh</button>
      <ul>{data?.map(u => <li key={u.id}>{u.name}</li>)}</ul>
    </div>
  );
}

// Manual trigger untuk aksi (Post/Put/Delete)
function CreateUser() {
  const [submit, { loading }] = useApiSend(UserApi.create);
  return <button onClick={() => submit({ name: 'New' })}>Create</button>;
}

3. Forms

import { useForm } from 'zarrcore';

function LoginForm() {
  const { values, handleChange, reset } = useForm({
    email: '',
    password: ''
  });

  return (
    <form>
      <input name="email" value={values.email} onChange={handleChange} />
      <input name="password" value={values.password} onChange={handleChange} />
      <button onClick={reset}>Clear</button>
    </form>
  );
}

4. Auto-Generate Routes

In build script:

import { routerMapper, reactRouterWriter } from 'zarrcore/node';

routerMapper({
  pages: { dir: './src/pages' },
  output: { dir: './src/generated' },
  writer: reactRouterWriter()
});

In App.tsx:

import { Routes, Route } from 'react-router-dom';
import router from './generated/routes';

export default function App() {
  return (
    <Routes>
      {router.map(({ path, component: Component }) => (
        <Route key={path} path={path} element={<Component />} />
      ))}
    </Routes>
  );
}

🎯 Main Functions

• createApiClient() - Create Axios instance
• createApiFactory() - Create HTTP wrapper
• useApiLoad() - Fetch data hook
• useForm() - Form management hook
• routerMapper() - Generate routes from pages
• normalizeImportPath() - Normalize file paths
• toRoutePath() - Convert to route path

�️ Local Development

Untuk menguji paket ini di proyek lain secara lokal tanpa harus mempublikasikannya, Anda dapat menggunakan npm link.

1. Membuat Link Global

Di dalam direktori zarrcore-js, jalankan perintah berikut. Ini akan membuat symlink global dari paket zarrcore-js.

npm link

2. Menghubungkan ke Proyek Lain

Buka direktori proyek lain tempat Anda ingin menggunakan zarrcore-js, lalu jalankan perintah ini. Perintah ini akan membuat symlink dari node_modules proyek tersebut ke paket zarrcore-js global Anda.

npm link zarrcore-js

Sekarang, setiap perubahan yang Anda buat di zarrcore-js akan langsung terlihat di proyek lain tersebut setelah Anda menjalankan npm run build di zarrcore-js.

3. Melepas Link

Jika sudah selesai, Anda dapat melepas link tersebut.

# Di direktori proyek lain
npm unlink --no-save zarrcore-js

# (Opsional) Di direktori zarrcore-js untuk menghapus link global
npm unlink

�📦 Releasing

Proses rilis dan publikasi ke NPM diatur oleh npm version dan skrip prepare.

Versioning

Untuk merilis versi baru, gunakan perintah npm version diikuti dengan tipe rilis (patch, minor, atau major). Perintah ini akan secara otomatis:

1. Menjalankan skrip build untuk memastikan semua file sudah terkompilasi.
2. Menaikkan versi di package.json.
3. Membuat commit Git baru dengan tag versi.

# Rilis patch (e.g., 1.0.1 -> 1.0.2)
npm version patch

# Rilis minor (e.g., 1.0.2 -> 1.1.0)
npm version minor

# Rilis major (e.g., 1.1.0 -> 2.0.0)
npm version major

Publishing to NPM

Setelah versi baru dibuat dan di-tag, push commit dan tag tersebut ke repository, lalu publikasikan ke NPM.

# 1. Push commit dan tag ke Git
git push && git push --tags

# 2. Publikasikan ke NPM (pastikan sudah login)
npm publish

Skrip prepare di package.json akan memastikan npm run build dijalankan sebelum proses npm publish dimulai, sehingga paket yang diunggah selalu berisi versi kode terbaru.

📄 License

ISC