Panduan Pengembang - React

Pengembang

Panduan bagi pengembang untuk mengembangkan antarmuka digital pemerintah yang konsisten dan inklusif dengan INA Digital Design System (IDDS).

Prasyarat

Sebelum memulai instalasi, pastikan Anda telah memenuhi persyaratan berikut:

Dependencies yang Diperlukan:

React >= 18.0.0(wajib)
React DOM >= 18.0.0(wajib)
Node.js >= 16.x(wajib)
Tailwind CSS v4.1.6(disarankan)

⚠️ Catatan Penting:

Jika menggunakan TypeScript, pastikan juga menginstall @types/react @types/react-dom
Untuk menggunakan icons, install @tabler/icons-react(disarankan)

Persiapan

Sebelum memulai instalasi, pastikan Anda sudah menyiapkan project frontend yang akan menggunakan INA Digital Design System.

Apa itu Project Folder?

Project folder adalah folder/direktori yang berisi semua file dan kode dari aplikasi frontend Anda. Biasanya folder ini memiliki struktur seperti ini:

my-frontend-app/
├── package.json    ← File ini harus ada di root folder
├── src/
│   ├── App.jsx
│   └── main.jsx
├── node_modules/
└── ...

Langkah-langkah Persiapan:

Buka project folder dari project frontend yang sedang Anda kembangkan menggunakan File Explorer (Windows) atau Finder (Mac).
Buka Terminal pada root project folder. Terminal adalah aplikasi berbasis teks untuk menjalankan perintah command line.
Windows:
- Klik kanan pada folder project → Pilih Open in Terminal atau Open PowerShell here
- Atau buka aplikasi
```
Terminal / PowerShell
```
  lalu gunakan perintah
```
cd
```
  untuk masuk ke folder project
```
cd ~/Documents/my-frontend-app
```
Mac:
- Klik kanan pada folder project → Pilih New Terminal at Folder
- Atau buka aplikasi
```
Terminal
```
  dari Launchpad/Spotlight, lalu gunakan perintah
```
cd
```
  untuk masuk ke folder project
```
cd ~/Documents/my-frontend-app
```
Pastikan Anda berada di root folder yang memiliki file package.json Untuk memastikannya, jalankan perintah berikut di terminal:
```
# Windows (PowerShell/CMD)
dir package.json

# Mac/Linux
ls package.json
```
Jika file package.json muncul, berarti Anda sudah berada di root folder yang benar! ✅

Instalasi Cepat

# npm
npm install @idds/react

# atau yarn
yarn add @idds/react

# Install icons dan tailwind css (disarankan)
npm install @tabler/icons-react tailwindcss @tailwindcss/vite

Impor CSS

Setelah instalasi, import file CSS dari design system di entry point aplikasi Anda (misalnya src/main.jsx atau src/index.js):

// src/main.jsx atau src/index.js
import '@idds/react/index.css'

💡 Tips:

Pastikan import CSS dilakukan sebelum import komponen atau file CSS lainnya agar styling dapat diterapkan dengan benar.

Cara Menggunakan Komponen

Setelah CSS diimport, Anda dapat langsung menggunakan komponen dari design system:

// src/App.jsx
import { Button } from '@idds/react'

function App() {
  return (
    <div>
      <Button hierarchy="primary" size="md">
        Klik Saya
      </Button>
    </div>
  )
}

export default App

✅ Contoh Import Individual Components:

import { Button, TextField, Card } from '@idds/react'

Set Branding Theme

INA Digital Design System mendukung beberapa brand theme yang dapat Anda pilih. Untuk mengatur brand theme, gunakan fungsi setBrandTheme():

// src/main.jsx atau di komponen root Anda
import { setBrandTheme } from '@idds/react'

// Set brand theme (pilih salah satu: 'inagov', 'panrb', 'bkn', 'lan', 'default')
setBrandTheme('panrb') // Contoh: menggunakan theme milik Kementerian PAN RB

// Atau gunakan theme default
setBrandTheme('default')

Brand Theme yang Tersedia:

'inagov' - Layanan Aparatur Negara
'panrb' - Kementerian PAN RB
'bkn' - Badan Kepegawaian Negara
'lan' - Lembaga Administrasi Negara
'default' - Default Theme

⚠️ Catatan:

Panggil setBrandTheme() sekali di awal aplikasi, biasanya di file entry point atau komponen root.

Integrasi dengan Tailwind CSS

INA Digital Design System menyediakan color token dan brand token yang dapat diintegrasikan dengan Tailwind CSS. Berikut adalah cara mengintegrasikannya untuk Tailwind v4 dan v3:

Tailwind CSS v4

Untuk Tailwind v4, import CSS token langsung di file CSS utama Anda:

/* src/index.css atau src/main.css */
/* Tailwind CSS v4 */
@import 'tailwindcss';

/* Import IDDS color dan brand tokens */
@import '@idds/styles/tailwind/css/idds.css';
@import '@idds/styles/tailwind/css/panrb.css'; /* atau brand lain: inagov, bkn, lan */

💡 Contoh Penggunaan Utility Class:

Setelah import token, Anda dapat langsung menggunakan utility class dari Tailwind dengan color token IDDS:

// Contoh penggunaan color token
<h3 className="text-content-secondary hover:text-content-primary bg-primary-50 p-4 rounded-lg">
  Basic Usage
</h3>

// Color token yang tersedia:
// - text-content-primary, text-content-secondary
// - bg-primary-50, bg-primary-100, bg-primary-500, dll
// - border-stroke-primary, border-stroke-secondary
// - Dan semua color token dari IDDS

Tailwind CSS v3

Untuk Tailwind v3, konfigurasi token melalui tailwind.config.js:

Konfigurasi tailwind.config.js:

// tailwind.config.js
import { iddsColorToken, panrbTokens } from '@idds/react';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        ...iddsColorToken,
        ...panrbTokens,
      },
    },
  },
  plugins: [],
};

✅ Setelah konfigurasi, Anda dapat menggunakan utility class yang sama seperti Tailwind v4

⚠️ Catatan:

Untuk Tailwind v4, import CSS token sudah cukup. Tidak perlu konfigurasi tailwind.config.js
Untuk Tailwind v3, wajib menggunakan tailwind.config.js untuk mengintegrasikan color token
Brand token (panrb, inagov, bkn, lan) dapat diimport sesuai kebutuhan project Anda

Download Starter Project

Untuk mempermudah memulai project, kami menyediakan starter project yang sudah dikonfigurasi dengan semua dependencies yang diperlukan. Anda dapat langsung download dan mulai development.

React Starter Project

Starter project dengan React 18, Vite, Tailwind CSS v4, dan @idds/react

Download ZIP

Cara Menggunakan:

Unzip project yang sudah didownload
Masuk ke folder project dan install dependencies:
```
cd idds-react-starter npm install
```
Jalankan development server:
```
npm run dev
```
Buka browser di http://localhost:5173

✅ Apa yang sudah termasuk?

React 18 + TypeScript + Vite sudah dikonfigurasi
Tailwind CSS v4 sudah terintegrasi
@idds/react dan @tabler/icons-react sudah terinstall
Contoh penggunaan komponen IDDS
Brand theme sudah dikonfigurasi