@idds/js
v1.6.9
Published
Vanilla Javascript UI component library for INA Digital Design System
Readme
@idds/js
Vanilla Javascript UI component library for INA Digital Design System.
This package provides native, framework-agnostic JavaScript components and behaviors for INA Digital UI components. All structural and visual aspects are derived from pure CSS styling, while script functionalities (like dropdown toggles, calendar behavior, modals, etc.) are managed dynamically by this script library.
Installation
npm install @idds/jsQuick Start
You can implement INA Digital Design System directly in your native HTML and Vanilla JS frontend without any frontend framework overhead.
1. Import via NPM/Bundler
If you use a bundler (Vite, Webpack, etc.):
// Import styles and core scripts
import '@idds/styles/index.css';
import { initAll } from '@idds/js';
// Automatically initialize all existing components found in DOM
document.addEventListener('DOMContentLoaded', () => {
initAll();
});2. Implementation inside HTML
Construct standard HTML using the official ina-* class names:
<button class="ina-button ina-button--primary">Click Me</button>
<div class="ina-accordion" data-accordion>
<button class="ina-accordion__header">Accordion Title</button>
<div class="ina-accordion__content">
<div class="ina-accordion__body">Content inside accordion</div>
</div>
</div>Note: For complex states (Select Dropdown, DatePicker, etc.) the initAll() will auto-bind to instances rendered inside your HTML using standard DOM dataset references natively attached to the wrappers.
Available Exports & Individual Initializers
Instead of initializing everything with initAll(), you can selectively import functions for smaller bundle size:
import {
setBrandTheme,
showToast,
Table,
DatePicker,
TimePicker,
PhoneInput,
} from '@idds/js';
// Use toaster utility
showToast({
title: 'Success',
message: 'Data saved successfully',
variant: 'success',
});
// Programmatically switch brand
setBrandTheme('bgn'); // Switch dynamically to BGN themeUsing CDNs (No Bundler Required)
You can consume both CSS and JS immediately on HTML pages via CDNs tanpa proses instalasi atau build. Cara ini persis seperti template yang digunakan di dokumentasi resmi kami:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>IDDS demo</title>
<!-- Optional: Tailwind CSS (Disarankan untuk mempermudah penyusunan layout) -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<!-- Optional: Tabler Icons (Disarankan untuk ikonografi) -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"
/>
<!-- Optional: ApexCharts (Bila membutuhkan visualisasi data grafik) -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- Required: CSS IDDS -->
<link
href="https://unpkg.com/@idds/styles@latest/dist/index.min.css"
rel="stylesheet"
/>
</head>
<body>
<h1>Hello, world!</h1>
<div class="ina-modal" id="myModal">...</div>
<!-- Required: JS IDDS Bundle (Otomatis melakukan inisialisasi komponen saat DOM siap) -->
<script src="https://unpkg.com/@idds/js@latest/dist/index.iife.js"></script>
</body>
</html>Catatan Tambahan: Penggunaan Tailwind CSS, Tabler Icons, dan ApexCharts melalui CDN bersifat opsional. Namun, library tersebut sangat kami gunakan di sebagian besar dokumentasi dan snippet kode copy-paste komponen guna mempermudah Anda dalam scaffolding antarmuka tanpa merancang kelas utilitas dari awal. Dan karena
index.iife.jssudah berjalan sebagai immediately-invoked function, script komponen akan otomatis di-bind ketikaDOMContentLoaded.
Styling Notes
Selalu rujuk dan masukkan pustaka style global dari paket @idds/styles. Komponen Vanilla JS dari pustaka ini pada dasarnya hanya mengontrol logika status (seperti toggle dropdown, kalender, validasi) tanpa menyisipkan tata letak presentasi paksa di kerangka strukturnya, sehingga membebaskan Anda menggunakan konfigurasi visual seutuhnya yang disediakan oleh @idds/styles.
License
MIT