Instalasi

Buat Proyek React

1. Kita dapat membuat proyek React dengan menggunakan vite.

npm create vite@latest

Ketika menjalankan perintah di atas, kita akan diminta untuk menentukan nama proyek. Di tutorial ini kita menggunakan nama demo-alurkerja.

Setelah menentukan nama, pilih React sebagai framework, dan Typescript sebagai varian yang akan digunakan. Sebenarnya Typescript tidak wajib, tetapi sebagian besar aplikasi yang dibuat di Javan saat ini menggunakannya. Jadi, kita menginstal Typescript di sini agar lebih terbiasa.

2. Pastikan proyek kita sudah terbuat.

Masuk ke dalam direktori proyek.

cd demo-alurkerja

Instal dependensi yang dibutuhkan.

npm install

Jalankan peladen lokal.

npm run dev

Aplikasi akan berjalan pada URL yang ditampilkan di terminal dan bisa dilihat di peramban. URL bawaan adalah http://localhost:5173.

Untuk menghentikan peladen, tekan tombol Ctrl + C di terminal.

Setup Alurkerja-UI

1. Instal pustaka alukerja-ui.

npm install alurkerja-ui

Pastikan juga nilai dari moduleResolution dalam berkas tsconfig.app.json adalah node.

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

Jangan salah mengedit berkas (tsconfig.app.json). Ketika menginstal Typescript melalui vite, kita seharusnya mempunyai tiga berkas konfigurasi untuk Typescript:

• tsconfig.json
• tsconfig.app.json
• tsconfig.node.json

2. Konfigurasi styling Alurkerja-UI.

Kita perlu menginstal dependensi yang dibutuhkan oleh alurkerja-ui.

npm install -D tailwindcss postcss autoprefixer @tailwindcss/forms tailwind-scrollbar

Inisiasi konfigurasi tailwind.

npx tailwindcss init -p

Edit berkas tailwind.config.js menjadi seperti berikut:

import forms from "@tailwindcss/forms";
import scrollbar from "tailwind-scrollbar";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/alurkerja-ui/dist/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    forms({
      strategy: "class",
    }),
    scrollbar({ nocompatible: true }),
  ],
};

Edit berkas src/index.css. Saat ini kita tidak memerlukan kode CSS apapun, sehingga kode CSS bawaan vite bisa kita hapus. Kemudian tambahkan tailwind pada kode CSS kita menjadi seperti berikut:

@tailwind base;
@tailwind components;
@tailwind utilities;

Impor berkas css yang diperlukan oleh alurkerja-ui. Kita bisa mengimpor berkas css ini ke src/main.tsx.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import "alurkerja-ui/dist/style.css";
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

3. Konfigurasi context Alurkerja-UI.

Pemasangan standar alurkerja-ui memerlukan dua konteks untuk keperluan autentikasi dan tema. Provider autentikasi alurkerja-ui memerlukan pustaka axios, sehinnga kita perlu menginstalnya.

npm install axios

Buat axios instance yang akan digunakan oleh alurkerja-ui. Contohnya bisa dilihat di berkas src/lib/axios.ts.

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: "https://alurkerja-starter.alurkerja.com",
});

Buat komponen tabel menggunakan alurkerja-ui. Contohnya bisa dilihat di berkas src/feature/CutiTable.tsx

import { TableLowcode } from "alurkerja-ui";
import { useState } from "react";
import { useCutiList } from "../api/cuti";

export function CutiTable() {
  const [pageConfig, setPageConfig] = useState({ limit: 10, page: 0 });
  const [renderState, setRenderState] = useState(0);
  const [search, setSearch] = useState<string | undefined>("tes");

  const { data, isPending } = useCutiList();

  if (isPending) {
    return <div>Loading...</div>;
  }

  return (
    <TableLowcode
      baseUrl="https://alurkerja-starter.alurkerja.com"
      spec={{
        show_as_menu: false,
        base_url: "",
        name: "",
        can_bulk: true,
        can_create: true,
        can_delete: true,
        can_edit: true,
        can_detail: true,
        path: "/bpmn/Cuti",
        is_bpmn: true,
        is_usertask: false,
        label: "",
        description: "",
        header_action: [
          {
            label: "Tambah",
            action_label: "Tambah",
            method: "post",
            form_type: "new_page",
            path: "/cuti/create",
            icon: "plus",
            type: "primary",
          },
        ],
        field_action: [
          {
            label: "Detail",
            action_label: "Detail",
            method: "get",
            form_type: "new_page",
            path: "/cuti/{id}",
            icon: "eye",
            type: "primary",
          },
          {
            label: "Edit",
            action_label: "Edit",
            method: "put",
            form_type: "new_page",
            path: `/cuti/{id}/edit`,
            icon: "edit",
            type: "primary",
          },
        ],
        fields: {},
      }}
      column={[
        {
          label: "Name",
          key: "name",
        },
        {
          label: "Reason",
          key: "reason",
        },
      ]}
      data={data.content}
      renderState={renderState}
      setRenderState={setRenderState}
      pageConfig={pageConfig}
      setPageConfig={setPageConfig}
      search={search}
      setSearch={setSearch}
      canFilter={false}
    />
  );
}

dan juga hook yang berkaitan dengan komponen ini pada src/api/cuti.ts.

import { useEffect, useState } from "react";
import { axiosInstance } from "../lib/axios";
import axios from "axios";

type CutiDTO = {
  id: string;
  name: string;
  reason: string;
};
export type CutiList = {
  content: CutiDTO[];
};
export function useCutiList() {
  const [data, setData] = useState<CutiList>({
    content: [],
  });
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    async function getCulitList() {
      setIsPending(true);

      try {
        const response = await axiosInstance.get("/bpmn/Cuti");

        if (axios.isAxiosError(response)) {
          setError(response);
        } else {
          setData(response.data?.data);
        }
      } catch (error) {
        setError(error);
      }

      setIsPending(false);
    }

    getCulitList();
  }, []);

  return { data, isPending, error };
}

Gunakan komponen tabel dan juga konteks autentikasi dan tema. Contohnya bisa dilihat di berkas src/App.tsx.

import { AuthContext, ThemeContext, themeConfig } from "alurkerja-ui";
import { axiosInstance } from "./lib/axios";
import { CutiTable } from "./feature/CutiTable";

function App() {
  return (
    <AuthContext.Provider value={axiosInstance}>
      <ThemeContext.Provider value={themeConfig}>
        <CutiTable />
      </ThemeContext.Provider>
    </AuthContext.Provider>
  );
}

export default App;

4. Pastikan Alurkerja-UI berjalan.

Jika ada yang aneh pada tampilan, bisa jalankan ulang peladen lokal.

Matikan peladen lokal (jika masih berjalan) dengan menekan tombol Ctrl + C di terminal.

Jalankan kembali peladen lokal.

npm run dev