Dynamic Builder UI (Shadcn-Vue based)

Library Vue 3 komponen modern berbasis Shadcn UI & Reka UI yang dapat digunakan di berbagai framework (Vue, React, Angular, Svelte, Micro-frontend, dll.) untuk membuat Dynamic Form, Smart DataTable, BPMN Workflow Viewer, Leaflet Map Picker, Chart.js Dashboard, dan UI Controls otomatis dari JSON schema.

🚀 Fitur Utama

• 🎨 Shadcn UI Primitives – Dibangun di atas Reka UI & Tailwind CSS dengan dukungan tema Dark Mode & Light Mode.
• 📋 DynamicForm & AutoLayoutForm – Generate form dinamis lengkap dari JSON schema, validasi real-time, multi-bahasa (ID/EN/KR), dan conditional rules via json-logic-js.
• 📊 DataTable & AutoLayoutDatatable – Tabel cerdas dengan fitur sorting, filtering per kolom, pagination, pencarian cepat, ekspor CSV, dan permission per action.
• 🧩 Web Components (Micro-Frontend) – Tersedia custom elements <micro-dynamic-form> dan <micro-dynamic-datatable> untuk integrasi framework-agnostic.
• 🗺️ Leaflet Map Picker (DCodeMapField) – Penempatan pin lokasi interaktif, pencarian alamat OpenStreetMap, dan deteksi GPS.
• 🔄 BPMN Workflow Simulation (DCodeWorkflowBpmn) – Viewer diagram BPMN 2.0 interaktif dengan animasi token trace simulation.
• 📈 Chart.js & Dashboard Cards (DCodeChart, CardSummary, DashboardActivityCard) – Grafik bar, line, pie, radar, donut dan kartu metrik KPI.
• ✍️ Rich Text Editor (DCodeTextEditor) – Editor format teks kaya dengan headings, lists, dan visual styling.
• ⚡ Logic Registry & API Adapter – Integrasi custom API host project via setApiConfig() dan custom handler registry via registerLogic().

📦 Instalasi

# npm
npm install dynamic-builder-ui

# pnpm
pnpm add dynamic-builder-ui

# yarn
yarn add dynamic-builder-ui

⚡ Konfigurasi API

Gunakan setApiConfig pada entry point aplikasi untuk menghubungkan library ke backend atau interceptor Axios host:

import { createApp } from 'vue'
import App from './App.vue'
import DynamicUI, { setApiConfig } from 'dynamic-builder-ui'
import 'dynamic-builder-ui/style.css'
import axiosInstance from './plugins/axios'

const app = createApp(App)

setApiConfig({
  apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
  apiClient: async (url, method, data) => {
    return axiosInstance({ url, method, data })
  },
  getAuthToken: () => localStorage.getItem('access_token'),
})

app.use(DynamicUI)
app.mount('#app')

📋 Contoh Penggunaan: Dynamic Form

<script setup lang="ts">
import { ref } from 'vue'
import { DynamicForm } from 'dynamic-builder-ui'

const formSchema = {
  title: 'Formulir Registrasi Karyawan',
  description: 'Contoh form dinamis berbasis JSON schema.',
  columns: 2,
  fields: [
    {
      key: 'name',
      component: 'DCodeTextField',
      model: 'name',
      required: true,
      props: { label: 'Nama Lengkap', placeholder: 'Masukkan nama...' }
    },
    {
      key: 'salary',
      component: 'DCodeCurrencyField',
      model: 'salary',
      props: { label: 'Gaji Bulanan', currency: 'Rp ' }
    },
    {
      key: 'department',
      component: 'DCodeAutoComplete',
      model: 'department',
      props: {
        label: 'Departemen',
        options: [
          { label: 'Engineering', value: 'tech' },
          { label: 'Marketing', value: 'marketing' }
        ]
      }
    }
  ]
}

const model = ref({ name: 'Rafi Chandra', salary: 15000000 })

function onSubmit(data: any) {
  console.log('Saved:', data)
}
</script>

<template>
  <DynamicForm :schema="formSchema" :model="model" @submit="onSubmit" />
</template>

📊 Contoh Penggunaan: Smart DataTable

<script setup lang="ts">
import { ref } from 'vue'
import { DataTable } from 'dynamic-builder-ui'

const columns = [
  { key: 'id', title: 'ID', sortable: true, width: '100px' },
  { key: 'name', title: 'Customer Name', sortable: true },
  { key: 'revenue', title: 'Total Spend', type: 'currency', sortable: true },
  { key: 'status', title: 'Status', type: 'badge', badgeVariant: 'success' }
]

const data = ref([
  { id: '001', name: 'PT Telkom Indonesia', revenue: 250000000, status: 'Active' },
  { id: '002', name: 'Bank Mandiri', revenue: 480000000, status: 'Active' }
])
</script>

<template>
  <DataTable :columns="columns" :data="data" selectable has-actions />
</template>

🧩 Penggunaan Web Components (Micro-Frontend / Vanilla / React / Angular)

<!-- Load CSS & Script -->
<link rel="stylesheet" href="/node_modules/dynamic-builder-ui/dist/dynamic-builder-ui.css">
<script type="module" src="/node_modules/dynamic-builder-ui/dist/webcomponents/dynamic-ui.es.js"></script>

<!-- Gunakan Custom Elements -->
<micro-dynamic-form layout-code="EMPLOYEE_FORM"></micro-dynamic-form>
<micro-dynamic-datatable layout-code="USER_MANAGEMENT_TABLE"></micro-dynamic-datatable>

🛠️ Scripts & Development

• npm run dev – Menjalankan Interactive Showcase & Component Playground
• npm run build:lib – Mem-bundle library ESM & UMD
• npm run build:webcomponent – Mem-bundle Web Components micro-frontend
• npm run build:all – Menjalankan seluruh proses build secara otomatis