@ttdk-design-system/library-react 0.0.0-stage → 1.0.1

package/src/web/modal/modal.tsx

@@ -0,0 +1,571 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+
+export type ModalSize =
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "full";
+export type ModalUiProps = UiProps;
+export interface ModalProps {
+  /**
+   * Status visibilitas modal (mode terkontrol / controlled state).
+   * Mendukung `v-model:open` / `v-model` pada Vue 3 dan controlled prop `open` pada React.
+   */
+  open?: boolean;
+
+  /**
+   * Status visibilitas awal saat pertama kali dirender (uncontrolled initial state).
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Judul teks di bagian header modal.
+   */
+  title?: string;
+
+  /**
+   * Deskripsi penjelasan di bagian header modal di bawah judul.
+   */
+  description?: string;
+
+  /**
+   * Menampilkan tombol tutup 'X' di pojok kanan atas header.
+   * Berikan `false` untuk menyembunyikan tombol tutup.
+   * @default true
+   */
+  close?: boolean | any;
+
+  /**
+   * Ikon kustom untuk tombol tutup.
+   */
+  closeIcon?: any;
+
+  /**
+   * Menjadikan modal tampil dalam ukuran layar penuh (fullscreen 100vw x 100vh).
+   * @default false
+   */
+  fullscreen?: boolean;
+
+  /**
+   * Skala ukuran lebar maksimum modal dialog ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full').
+   * @default 'md'
+   */
+  size?: ModalSize;
+
+  /**
+   * Mengizinkan modal ditutup saat pengguna mengeklik latar belakang (backdrop) atau menekan tombol `Escape`.
+   * @default true
+   */
+  dismissible?: boolean;
+
+  /**
+   * Mencegah modal ditutup saat klik di luar atau tombol `Escape` (alias selaras Nuxt UI prevent-close).
+   * Jika bernilai `true`, popover/modal tidak dapat ditutup kecuali melalui tombol aksi eksplisit di dalam modal.
+   * @default false
+   */
+  preventClose?: boolean;
+
+  /**
+   * Menampilkan lapisan latar belakang redup (backdrop overlay).
+   * @default true
+   */
+  overlay?: boolean;
+
+  /**
+   * Menjadikan modal sebagai dialog modal yang memusatkan fokus interaksi pengguna.
+   * @default true
+   */
+  modal?: boolean;
+
+  /**
+   * Mengaktifkan area konten body yang dapat digulir jika isi modal melebihi tinggi layar.
+   * @default true
+   */
+  scrollable?: boolean;
+
+  /**
+   * Mengunci scrolling halaman web latar belakang saat modal sedang terbuka (body scroll lock).
+   * @default true
+   */
+  preventScroll?: boolean;
+
+  /**
+   * Alias untuk `preventScroll`.
+   * @default true
+   */
+  lockScroll?: boolean;
+
+  /**
+   * Konten kustom untuk seluruh dialog (menggantikan header, body, dan footer default).
+   */
+  content?: any;
+
+  /**
+   * Konten kustom untuk bagian header modal.
+   */
+  header?: any;
+
+  /**
+   * Konten kustom untuk bagian isi utama (body) modal.
+   */
+  body?: any;
+
+  /**
+   * Konten kustom untuk bagian footer (biasanya tombol aksi Batal / Konfirmasi).
+   */
+  footer?: any;
+
+  /**
+   * Kustomisasi CSS variables atau token visual melalui UiProps.
+   */
+  ui?: ModalUiProps;
+
+  /**
+   * Class CSS kustom pada elemen pembungkus terluar.
+   */
+  className?: string;
+
+  /**
+   * Class CSS kustom (alias framework Vue).
+   */
+  class?: string;
+
+  /**
+   * Style inline kustom pada kontainer dialog.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Class CSS kustom untuk lapisan backdrop overlay.
+   */
+  overlayClass?: string;
+
+  /**
+   * Style kustom untuk lapisan backdrop overlay (UiProps).
+   */
+  overlayStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk kartu panel modal dialog.
+   */
+  contentClass?: string;
+
+  /**
+   * Style kustom untuk kartu panel modal dialog (UiProps).
+   */
+  contentStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk header modal.
+   */
+  headerClass?: string;
+
+  /**
+   * Style kustom untuk header modal (UiProps).
+   */
+  headerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk body modal.
+   */
+  bodyClass?: string;
+
+  /**
+   * Style kustom untuk body modal (UiProps).
+   */
+  bodyStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk footer modal.
+   */
+  footerClass?: string;
+
+  /**
+   * Style kustom untuk footer modal (UiProps).
+   */
+  footerStyle?: UiProps;
+
+  /**
+   * Callback event saat status terbuka/tertutup berubah (kompatibel dengan v-model:open pada Vue 3).
+   */
+  onUpdateOpen?: (open: boolean) => void;
+
+  /**
+   * Callback event saat status terbuka/tertutup berubah (alias standar React).
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Callback event saat modal terbuka.
+   */
+  onOpen?: () => void;
+
+  /**
+   * Callback event saat modal ditutup.
+   */
+  onClose?: () => void;
+
+  /**
+   * Callback event saat pengguna mencoba menutup modal tetapi dicegah karena preventClose={true} atau dismissible={false}.
+   */
+  onClosePrevent?: () => void;
+
+  /**
+   * Elemen pemicu (trigger), tombol, atau konten modal default.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Modal TTDK Design System — Selaras dengan Spesifikasi Nuxt UI Modal (UModal):
+ * - Mode controlled (v-model:open / open) dan uncontrolled (defaultOpen)
+ * - Backdrop blur overlay redup dengan penguncian scroll latar belakang otomatis (preventScroll)
+ * - Pilihan ukuran responsif ('xs' s/d '5xl' serta 'fullscreen')
+ * - Struktur slot terstandarisasi (#header, #body, #footer, #content)
+ * - Penanganan dismissible & preventClose (Escape key, backdrop click, callback onClosePrevent)
+ * - Animasi scale-in dan efek visual getar (shake) saat penutupan dicegah
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+let lockCount = 0;
+let originalOverflow = "";
+let originalPaddingRight = "";
+
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    originalOverflow = document.body.style.overflow;
+    originalPaddingRight = document.body.style.paddingRight;
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      document.body.style.paddingRight = scrollBarWidth + "px";
+    }
+  }
+  lockCount++;
+}
+
+function unlockBodyScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = originalOverflow;
+    document.body.style.paddingRight = originalPaddingRight;
+  }
+}
+
+function Modal(props: ModalProps) {
+  const [mounted, setMounted] = useState(() => false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(() =>
+    props.open !== undefined ? props.open : Boolean(props.defaultOpen)
+  );
+
+  const [isShaking, setIsShaking] = useState(() => false);
+
+  const [isAnimDone, setIsAnimDone] = useState(() => false);
+
+  const [shakeTimer, setShakeTimer] = useState<any>(null);
+
+  const [animTimer, setAnimTimer] = useState<any>(null);
+
+  function isDismissible() {
+    if (props.preventClose === true) return false;
+    return props.dismissible !== false;
+  }
+
+  function triggerShake() {
+    if (shakeTimer) {
+      clearTimeout(shakeTimer);
+    }
+    setIsAnimDone(true);
+    setIsShaking(true);
+    setShakeTimer(
+      setTimeout(() => {
+        setIsShaking(false);
+        setShakeTimer(null);
+      }, 400)
+    );
+  }
+
+  function openModal() {
+    if (!isOpen) {
+      setIsOpen(true);
+      setIsAnimDone(false);
+      if (animTimer) clearTimeout(animTimer);
+      setAnimTimer(
+        setTimeout(() => {
+          setIsAnimDone(true);
+        }, 250)
+      );
+      if (props.onOpen) props.onOpen();
+      if (props.onUpdateOpen) props.onUpdateOpen(true);
+      if (props.onOpenChange) props.onOpenChange(true);
+    }
+  }
+
+  function closeModal(force?: boolean) {
+    if (!isDismissible() && !force) {
+      triggerShake();
+      if (props.onClosePrevent) {
+        props.onClosePrevent();
+      }
+      return;
+    }
+    if (isOpen) {
+      setIsOpen(false);
+      setIsAnimDone(false);
+      if (props.onClose) props.onClose();
+      if (props.onUpdateOpen) props.onUpdateOpen(false);
+      if (props.onOpenChange) props.onOpenChange(false);
+    }
+  }
+
+  function handleOverlayClick() {
+    closeModal();
+  }
+
+  function handleKeyDown(event: any) {
+    if (!isOpen) return;
+    if (event.key === "Escape") {
+      closeModal();
+    }
+  }
+
+  function renderHeaderContent() {
+    if (props.header) {
+      return typeof props.header === "function"
+        ? props.header({
+            close: () => closeModal(true),
+          })
+        : props.header;
+    }
+    return null;
+  }
+
+  function renderBodyContent() {
+    if (props.body) {
+      return typeof props.body === "function"
+        ? props.body({
+            close: () => closeModal(true),
+          })
+        : props.body;
+    }
+    return null;
+  }
+
+  function renderFooterContent() {
+    if (props.footer) {
+      return typeof props.footer === "function"
+        ? props.footer({
+            close: () => closeModal(true),
+          })
+        : props.footer;
+    }
+    return null;
+  }
+
+  function renderCustomContent() {
+    if (props.content) {
+      return typeof props.content === "function"
+        ? props.content({
+            close: () => closeModal(true),
+          })
+        : props.content;
+    }
+    return null;
+  }
+
+  useEffect(() => {
+    if (props.open !== undefined) {
+      setIsOpen(props.open);
+    }
+  }, [props.open]);
+
+  useEffect(() => {
+    const shouldLockScroll = Boolean(props.preventScroll !== false && props.lockScroll !== false);
+
+    if (isOpen) {
+      if (shouldLockScroll) {
+        lockBodyScroll();
+      }
+
+      const handleEscape = (event: any) => {
+        if (event.key === "Escape") {
+          closeModal();
+        }
+      };
+
+      document.addEventListener("keydown", handleEscape, true);
+
+      return () => {
+        if (shouldLockScroll) {
+          unlockBodyScroll();
+        }
+        document.removeEventListener("keydown", handleEscape, true);
+      };
+    }
+  }, [isOpen, props.preventClose, props.dismissible, props.preventScroll, props.lockScroll]);
+
+  useEffect(() => {
+    return () => {
+      if (shakeTimer) {
+        clearTimeout(shakeTimer);
+      }
+      if (typeof document !== "undefined") {
+        document.removeEventListener(
+          "keydown",
+          (e: any) => handleKeyDown(e),
+          true
+        );
+      }
+    };
+  }, []);
+
+  if (!isOpen) return null;
+
+  const modalNode = (
+    <div
+      role="dialog"
+      className={`ttdk-modal-portal ${props.className || ""}`.trim()}
+      aria-modal={props.modal !== false ? "true" : "false"}
+      tabIndex={-1}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+          ...props.style,
+      }}
+    >
+      {props.overlay !== false ? (
+        <div
+          className={`ttdk-modal-overlay ${
+            props.overlayClass || ""
+          }`.trim()}
+          style={{
+            ...buildUiVars(props.overlayStyle),
+          }}
+          onClick={(event) => handleOverlayClick()}
+        />
+      ) : null}
+      <div
+        ref={dialogRef}
+        className={`ttdk-modal-dialog ${
+          isAnimDone ? "ttdk-modal-anim-done" : ""
+        } ${isShaking ? "ttdk-modal-shake" : ""} ${
+          props.contentClass || ""
+        }`.trim()}
+        data-size={props.size || "md"}
+        data-fullscreen={props.fullscreen ? "true" : undefined}
+        data-scrollable={props.scrollable !== false ? "true" : undefined}
+        style={{
+          ...buildUiVars(props.contentStyle),
+        }}
+      >
+        {Boolean(props.content) ? <>{renderCustomContent()}</> : null}
+        {!props.content ? (
+          <>
+            {Boolean(
+              props.header || props.title || props.close !== false
+            ) ? (
+              <div
+                className={`ttdk-modal-header ${
+                  props.headerClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiVars(props.headerStyle),
+                }}
+              >
+                {Boolean(props.header) ? (
+                  <>{renderHeaderContent()}</>
+                ) : null}
+                {!props.header ? (
+                  <>
+                    <div className="ttdk-modal-header-info">
+                      {Boolean(props.title) ? (
+                        <h3 className="ttdk-modal-title">{props.title}</h3>
+                      ) : null}
+                      {Boolean(props.description) ? (
+                        <p className="ttdk-modal-description">
+                          {props.description}
+                        </p>
+                      ) : null}
+                    </div>
+                    {props.close !== false ? (
+                      <button
+                        type="button"
+                        className="ttdk-modal-close"
+                        aria-label="Tutup modal"
+                        onClick={(event) => closeModal(true)}
+                      >
+                        {Boolean(props.closeIcon) ? (
+                          <>{props.closeIcon}</>
+                        ) : null}
+                        {!props.closeIcon ? (
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                          >
+                            <line x1="18" y1="6" x2="6" y2="18" />
+                            <line x1="6" y1="6" x2="18" y2="18" />
+                          </svg>
+                        ) : null}
+                      </button>
+                    ) : null}
+                  </>
+                ) : null}
+              </div>
+            ) : null}
+            <div
+              className={`ttdk-modal-body ${props.bodyClass || ""}`.trim()}
+              style={{
+                ...buildUiVars(props.bodyStyle),
+              }}
+            >
+              {Boolean(props.body) ? <>{renderBodyContent()}</> : null}
+              {!props.body && props.children ? <>{props.children}</> : null}
+            </div>
+            {Boolean(props.footer) ? (
+              <div
+                className={`ttdk-modal-footer ${
+                  props.footerClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiVars(props.footerStyle),
+                }}
+              >
+                {renderFooterContent()}
+              </div>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+
+  if (mounted && typeof document !== "undefined") {
+    return createPortal(modalNode, document.body);
+  }
+
+  return modalNode;
+}
+
+export default Modal;
+
+export { Modal };

package/src/web/pagination/AI_GUIDE.md

@@ -0,0 +1,148 @@
+# <Pagination /> — TTDK Component Reference
+
+Komponen Pagination navigasi halaman dengan dukungan Compound API (ala Shadcn UI) dan Props-driven mode.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/pagination/pagination.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Pagination from "@ttdk-design-system/library-react/web/pagination";
+
+// Vue 3
+import Pagination from "@ttdk-design-system/library-vue/web/pagination";
+
+// Svelte
+import Pagination from "@ttdk-design-system/library-svelte/web/pagination";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `page?` | `number` | `1` | Nomor halaman saat ini (1-indexed). |
+| `maxPages?` | `number` | `1` | Jumlah total halaman maksimum (alias untuk totalPages). |
+| `totalPages?` | `number` | `1` | Jumlah total halaman (alias maxPages). |
+| `limit?` | `number` | `10` | Jumlah baris/item data per halaman (page size). |
+| `onLimitChange?` | `(limit: number) => void` | `-` | Callback saat jumlah baris per halaman diubah via select box. |
+| `limitOptions?` | `number[]` | `[10, 20, 50, 100]` | Pilihan angka baris per halaman pada select box. |
+| `canPrevPage?` | `boolean` | `false` | Menentukan apakah navigasi ke halaman sebelumnya diizinkan (false = tombol Previous dinonaktifkan). |
+| `canNextPage?` | `boolean` | `false` | Menentukan apakah navigasi ke halaman berikutnya diizinkan (false = tombol Next dinonaktifkan). |
+| `onFirstPage?` | `() => void` | `-` | Callback saat tombol First Page (halaman pertama) diklik. |
+| `onPrevPage?` | `() => void` | `-` | Callback saat tombol Previous Page (halaman sebelumnya) diklik. |
+| `onNextPage?` | `() => void` | `-` | Callback saat tombol Next Page (halaman selanjutnya) diklik. |
+| `onLastPage?` | `() => void` | `-` | Callback saat tombol Last Page (halaman terakhir) diklik. |
+| `onPageChange?` | `(page: number) => void` | `-` | Callback saat nomor halaman tertentu diklik. |
+| `siblingCount?` | `number` | `1` | Jumlah tetangga nomor halaman di samping kiri dan kanan halaman aktif. |
+| `showEdges?` | `boolean` | `false` | Menampilkan tombol First (<<) dan Last (>>). |
+| `showPageNumbers?` | `boolean` | `true` | Menampilkan nomor halaman terpaginasi (1, 2, 3...). |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran pagination: - `'sm'`: 28px - `'md'`: 36px (standar) - `'lg'`: 44px |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer pagination (UiProps). |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk kontainer daftar pagination content (ul.ttdk-pagination-content). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk kontainer daftar pagination content. |
+| `linkStyle?` | `UiProps` | `-` | Style kustom untuk tombol link nomor halaman / navigasi. |
+| `linkClass?` | `string` | `-` | Class CSS kustom untuk tombol link nomor halaman / navigasi. |
+| `activeLinkStyle?` | `UiProps` | `-` | Style kustom untuk tombol nomor halaman saat aktif. |
+| `activeLinkClass?` | `string` | `-` | Class CSS kustom untuk tombol nomor halaman saat aktif. |
+| `limitStyle?` | `UiProps` | `-` | Style kustom untuk kontainer baris per halaman (limit). |
+| `limitClass?` | `string` | `-` | Class CSS kustom untuk kontainer baris per halaman (limit). |
+| `limitSelectStyle?` | `UiProps` | `-` | Style kustom untuk elemen Selectbox baris per halaman (limit). |
+| `limitSlot?` | `any` | `-` | Slot kustom untuk menggantikan elemen limit selector bawaan. |
+| `showLimit?` | `boolean` | `-` | Menentukan apakah kontrol baris per halaman (limit selectbox) ditampilkan. Jika tidak disetel, otomatis mengikuti keberadaan callback onLimitChange. |
+| `showLimitLabel?` | `boolean` | `true` | Menentukan apakah teks label 'Baris per halaman:' ditampilkan di samping selectbox limit. |
+| `limitLabel?` | `string` | `Baris per halaman:` | Teks label untuk opsi baris per halaman. |
+| `firstIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman pertama (first page, menggantikan <<). |
+| `prevIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman sebelumnya (previous page, menggantikan <). |
+| `nextIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman selanjutnya (next page, menggantikan >). |
+| `lastIcon?` | `any` | `-` | Ikon kustom untuk tombol halaman terakhir (last page, menggantikan >>). |
+| `ellipsisIcon?` | `any` | `-` | Ikon kustom untuk separator elipsis (menggantikan ...). |
+| `prevText?` | `string` | `Previous` | Label teks tombol Previous. |
+| `nextText?` | `string` | `Next` | Label teks tombol Next. |
+| `iconOnly?` | `boolean` | `false` | Mode hanya menampilkan ikon pada tombol Previous dan Next tanpa teks label. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Konten kustom atau subkomponen compound (PaginationContent, PaginationItem, dll). |
+
+### Sub-interface: `PaginationPageItem`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `type` | `'page' | 'ellipsis'` | `-` |  |
+| `value` | `number | string` | `-` |  |
+| `key` | `string` | `-` |  |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Pagination from "@ttdk-design-system/library-react/pagination";
+import "@ttdk-design-system/library-react/pagination/pagination.css";
+
+export function Example() {
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+
+  return (
+    <Pagination
+      page={page}
+      totalPages={15}
+      limit={limit}
+      limitOptions={[10, 25, 50, 100]}
+      canPrevPage={page > 1}
+      canNextPage={page < 15}
+      onPageChange={(p) => setPage(p)}
+      onLimitChange={(l) => setLimit(l)}
+    />
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Pagination from "@ttdk-design-system/library-vue/pagination";
+import "@ttdk-design-system/library-vue/pagination/pagination.css";
+
+const page = ref(1);
+const limit = ref(10);
+</script>
+
+<template>
+  <Pagination
+    :page="page"
+    :total-pages="15"
+    :limit="limit"
+    :limit-options="[10, 25, 50, 100]"
+    :can-prev-page="page > 1"
+    :can-next-page="page < 15"
+    @page-change="(p: number) => (page = p)"
+    @limit-change="(l: number) => (limit = l)"
+  />
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Pagination from "@ttdk-design-system/library-svelte/pagination";
+  import "@ttdk-design-system/library-svelte/pagination/pagination.css";
+
+  let page = 1;
+  let limit = 10;
+</script>
+
+<Pagination
+  {page}
+  totalPages={15}
+  {limit}
+  limitOptions={[10, 25, 50, 100]}
+  canPrevPage={page > 1}
+  canNextPage={page < 15}
+  on:pageChange={(e) => (page = e.detail)}
+  on:limitChange={(e) => (limit = e.detail)}
+/>
+```