Overview/Getting Started with Zenko Design System

Getting Started with Zenko Design System

● Ready Web Nuxt 4 + Mobile React Native

Panduan lengkap instalasi paket, konfigurasi awal, dan integrasi Zenko Design System untuk aplikasi Web (Nuxt 4 / Vue 3 / Tailwind CSS v4) dan Aplikasi Mobile (React Native / Expo).

Konsep Arsitektur Multi-Platform

Satu Sistem Desain, Dua Ekosistem Terpadu

Zenko Design System didistribusikan melalui paket NPM internal @artenanagara/zenko-design-system. Seluruh token desain (warna, sudut radius, spasi, bayangan) dikompilasi dari satu sumber data tunggal (tokens.json) ke format Tailwind CSS v4 (theme.css) dan TypeScript untuk React Native (react-native.ts).

Single Source of Truth

Perubahan token di satu tempat langsung tersinkronisasi ke Web dan Mobile.

A11y & Touch Standards

Target sentuh minimum 44pt pada smartphone dan ring fokus WCAG 2.1 AA di web.

Tray + Card Pattern

Pola nampan luar abu-abu (surface-alt) dan kartu putih dalam (surface) yang konsisten.

Petunjuk Instalasi & Integrasi

Pilih platform target untuk melihat langkah konfigurasi dan contoh kode.

Instalasi Paket

Tambahkan pustaka komponen dan token Zenko ke proyek web Nuxt 4 Anda:

Terminal

npm install @artenanagara/zenko-design-system

Impor Token Tema di CSS Utama

Buka file stylesheet utama Anda (misal: app/assets/css/main.css) dan impor token resmi:

app/assets/css/main.css

@import "tailwindcss";

/* 1. Impor token tema resmi Zenko */
@import "@artenanagara/zenko-design-system/theme.css";

/* 2. Konfigurasi layout web (opsional) */
@theme {
  --container-page: 1720px;
}

Konfigurasi Nuxt 4 (`nuxt.config.ts`)

Daftarkan direktori komponen untuk auto-import dan aktifkan transpilation build Vite:

nuxt.config.ts

import tailwindcss from '@tailwindcss/vite'

const designSystemComponentsDir = (subpath: string) =>
  new URL(`./node_modules/@artenanagara/zenko-design-system/app/components/${subpath}`, globalThis._importMeta_.url).pathname

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],

  // 1. Daftarkan folder komponen Design System untuk auto-import
  components: [
    { path: designSystemComponentsDir('core'), pathPrefix: false },
    { path: designSystemComponentsDir('primitives'), pathPrefix: false },
    { path: '~/components', pathPrefix: false },
  ],

  // 2. Transpile package untuk Vite SSR bundling
  build: {
    transpile: ['@artenanagara/zenko-design-system'],
  },

  // 3. Sertakan transformasi reaktivitas Vue
  imports: {
    transform: {
      include: [/node_modules\/@artenanagara\/zenko-design-system/],
    },
  },

  vite: {
    plugins: [tailwindcss()],
  },
})

Contoh Penggunaan di Template Vue

Komponen Zenko dapat langsung dipakai di seluruh halaman atau template tanpa perlu import manual satu per satu:

app/pages/exam/sample.vue

<script setup lang="ts">
// Komponen dan ikon ter-auto-import secara otomatis di Nuxt 4!
const isModalOpen = ref(false)
const searchQuery = ref('')
</script>

<template>
  <div class="space-y-6 p-6">
    <!-- 1. Header & Badges -->
    <div class="flex items-center gap-3">
      <BrandMark layout="horizontal" />
      <AppBadge variant="brand">CPNS 2026</AppBadge>
      <AppLozenge appearance="success">Tersedia</AppLozenge>
    </div>

    <!-- 2. Form & Search -->
    <AppTextField
      v-model="searchQuery"
      label="Cari Paket Try Out"
      placeholder="Ketik nama formasi atau modul..."
    />

    <!-- 3. Action Button -->
    <div class="flex items-center gap-3">
      <AppButton variant="primary" size="md" @click="isModalOpen = true">
        <AppIcon name="sparkle" :size="16" weight="fill" />
        <span>Mulai Latihan CAT</span>
      </AppButton>
      <AppButton variant="outline" size="md">
        <span>Pratinjau Soal</span>
      </AppButton>
    </div>

    <!-- 4. Modal Dialog -->
    <AppModal
      :is-open="isModalOpen"
      title="Konfirmasi Mulai Ujian"
      description="Sesi try out berdurasi 100 menit akan segera dimulai. Pastikan koneksi internet stabil."
      primary-action-label="Mulai Sekarang"
      secondary-action-label="Batal"
      @close="isModalOpen = false"
      @primary-action="isModalOpen = false"
    />
  </div>
</template>

Pipeline Kompilasi Token Otomatis

Build Script

Saat Anda memodifikasi atau menambah token baru pada tokens/tokens.json, jalankan perintah generator berikut untuk mengompilasi ulang seluruh artefak token secara otomatis:

Kompilasi Token Universal

npm run tokens:build

File yang dihasilkan otomatis oleh script build:

app/assets/tokens/generated/theme.css — File CSS @theme Tailwind CSS v4
app/assets/tokens/generated/react-native.ts — Objek TypeScript untuk Mobile
app/assets/tokens/generated/tokens.json — Format JSON untuk Figma / Style Dictionary