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

package/src/web/accordion/accordion.tsx

@@ -0,0 +1,430 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+
+export type AccordionUiProps = UiProps;
+export interface AccordionItem {
+  /**
+   * Nilai identifikasi unik untuk item accordion.
+   */
+  value: string;
+
+  /**
+   * Judul teks yang ditampilkan pada header trigger accordion.
+   */
+  title: string;
+
+  /**
+   * Subtitle atau deskripsi singkat sekunder di bawah judul.
+   */
+  subtitle?: string;
+
+  /**
+   * Konten isi panel yang terbuka saat accordion di-expand.
+   */
+  content?: any;
+
+  /**
+   * Ikon atau elemen visual opsional di samping judul.
+   */
+  icon?: any;
+
+  /**
+   * Badge teks atau counter angka opsional (misal: '12', 'Baru', 'Wajib').
+   */
+  badge?: string | number;
+
+  /**
+   * Ikon kustom untuk menggantikan ikon panah bawaan khusus item ini.
+   */
+  customIcon?: any;
+
+  /**
+   * Menonaktifkan item ini dari interaksi buka/tutup.
+   * @default false
+   */
+  disabled?: boolean;
+}
+export interface AccordionProps {
+  /**
+   * Daftar item accordion yang akan dirender.
+   */
+  items: AccordionItem[];
+
+  /**
+   * Nilai item yang sedang terbuka (controlled value).
+   * Bisa berupa string tunggal atau array string jika multiple={true}.
+   */
+  value?: string | string[];
+
+  /**
+   * Nilai default item yang terbuka saat pertama kali dirender (uncontrolled initial value).
+   */
+  defaultValue?: string | string[];
+
+  /**
+   * Mengizinkan lebih dari satu item terbuka secara bersamaan.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Mengizinkan item yang terbuka untuk ditutup kembali saat diklik.
+   * @default true
+   */
+  collapsible?: boolean;
+
+  /**
+   * Varian tampilan visual accordion:
+   * - `'default'`: Garis pembatas (divider) minimalis antar-item.
+   * - `'bordered'`: Pembungkus border luar dengan sudut melengkung.
+   * - `'separated'`: Setiap item berupa kartu terpisah mandiri dengan jarak celah (gap).
+   * - `'ghost'`: Tampilan bersih tanpa border luar, hanya hover background lembut.
+   *
+   * @default 'default'
+   */
+  variant?: "default" | "bordered" | "separated" | "ghost";
+
+  /**
+   * Skala ukuran proporsional accordion (padding, font, icon):
+   * - `'sm'`: Kompak (13px font, padding rapat).
+   * - `'md'`: Standar (14px font, padding normal).
+   * - `'lg'`: Besar (16px font, padding lapang).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Posisi indikator ikon panah / chevron:
+   * - `'right'`: Di ujung kanan (standar desain).
+   * - `'left'`: Di sebelah kiri sebelum judul.
+   *
+   * @default 'right'
+   */
+  iconPosition?: "left" | "right";
+
+  /**
+   * Sudut kelengkungan radius (khusus untuk varian 'bordered' dan 'separated'):
+   * - `'none'`: Sudut 0px.
+   * - `'sm'`: Sudut 6px.
+   * - `'md'`: Sudut 10px.
+   * - `'lg'`: Sudut 14px.
+   * - `'full'`: Sudut 20px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menonaktifkan seluruh interaksi accordion.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Kustomisasi visual granular root container (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Class CSS kustom untuk root accordion.
+   */
+  className?: string;
+
+  /**
+   * Style kustom untuk tiap elemen item accordion (UiProps).
+   */
+  itemStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tiap elemen item accordion.
+   */
+  itemClass?: string;
+
+  /**
+   * Style kustom untuk tombol trigger accordion (UiProps).
+   */
+  triggerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol trigger accordion.
+   */
+  triggerClass?: string;
+
+  /**
+   * Style kustom untuk teks judul trigger accordion (UiProps).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks judul trigger accordion.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk teks subtitle trigger accordion (UiProps).
+   */
+  subtitleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks subtitle trigger accordion.
+   */
+  subtitleClass?: string;
+
+  /**
+   * Style kustom untuk indikator ikon panah / chevron (UiProps).
+   */
+  iconStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk indikator ikon panah / chevron.
+   */
+  iconClass?: string;
+
+  /**
+   * Ikon kustom untuk menggantikan ikon panah bawaan accordion secara global.
+   */
+  icon?: any;
+
+  /**
+   * Style kustom untuk panel konten accordion (UiProps).
+   * Mengatur seluruh tampilan panel isi (background, padding, border, serta warna & tipografi teks isi).
+   */
+  contentStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk panel konten accordion.
+   */
+  contentClass?: string;
+
+  /**
+   * Callback event saat status item yang terbuka berubah.
+   * Mengembalikan string atau array string sesuai mode `multiple`.
+   */
+  onChange?: (value: any) => void;
+
+  /**
+   * Konten anak atau slot kustom.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Accordion untuk menyusun informasi berlapis yang dapat dibuka-tutup (collapse/expand)
+ * dengan dukungan multiple open, berbagai varian visual (default, bordered, separated, ghost),
+ * serta animasi transisi grid CSS yang sangat halus.
+ */
+
+import {
+  buildUiStyle,
+  buildUiVars,
+  cleanUiValue,
+  UiProps,
+} from "../../core/types";
+
+function Accordion(props: AccordionProps) {
+  const [openItems, setOpenItems] = useState(() =>
+    props.value !== undefined
+      ? Array.isArray(props.value)
+        ? props.value
+        : [props.value]
+      : props.defaultValue !== undefined
+      ? Array.isArray(props.defaultValue)
+        ? props.defaultValue
+        : [props.defaultValue]
+      : ([] as string[])
+  );
+
+  function getOpenList() {
+    const val = props.value !== undefined ? props.value : openItems;
+    if (!val) return [] as string[];
+    return Array.isArray(val) ? val : [val];
+  }
+
+  function isOpen(itemVal: string) {
+    const list = getOpenList();
+    return list.indexOf(itemVal) !== -1;
+  }
+
+  function handleToggle(itemVal: string, itemDisabled?: boolean) {
+    if (props.disabled || itemDisabled) return;
+    const list = getOpenList();
+    const isCurrentlyOpen = list.indexOf(itemVal) !== -1;
+    let next: string[];
+    if (props.multiple) {
+      if (isCurrentlyOpen) {
+        next = list.filter((v: string) => v !== itemVal);
+      } else {
+        next = [...list, itemVal];
+      }
+    } else {
+      if (isCurrentlyOpen) {
+        if (props.collapsible === false) {
+          return;
+        }
+        next = [];
+      } else {
+        next = [itemVal];
+      }
+    }
+    setOpenItems(next);
+    if (props.onChange) {
+      props.onChange(props.multiple ? next : next[0] || "");
+    }
+  }
+
+  return (
+    <div
+      className={`ttdk-accordion ${props.className || ""}`.trim()}
+      data-variant={props.variant || "default"}
+      data-size={props.size || "md"}
+      data-icon-position={props.iconPosition || "right"}
+      data-rounded={props.rounded || "md"}
+      data-disabled={props.disabled ? "true" : "false"}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      {props.items?.map((item, index) => (
+        <div
+          key={item.value || index}
+          className={`ttdk-accordion-item ${props.itemClass || ""}`.trim()}
+          data-state={isOpen(item.value) ? "open" : "closed"}
+          data-disabled={props.disabled || item.disabled ? "true" : "false"}
+          style={{
+            ...buildUiStyle(props.itemStyle),
+          }}
+        >
+          <h3 className="ttdk-accordion-header">
+            <button
+              type="button"
+              className={`ttdk-accordion-trigger ${
+                props.triggerClass || ""
+              }`.trim()}
+              data-state={isOpen(item.value) ? "open" : "closed"}
+              data-disabled={props.disabled || item.disabled ? "true" : "false"}
+              disabled={props.disabled || item.disabled}
+              aria-expanded={isOpen(item.value)}
+              onClick={(event) => handleToggle(item.value, item.disabled)}
+              style={{
+                ...buildUiStyle(props.triggerStyle),
+              }}
+            >
+              {props.iconPosition === "left" ? (
+                <span
+                  aria-hidden="true"
+                  className={`ttdk-accordion-arrow ttdk-accordion-arrow-left ${
+                    props.iconClass || ""
+                  }`.trim()}
+                  data-state={isOpen(item.value) ? "open" : "closed"}
+                  style={{
+                    ...buildUiStyle(props.iconStyle),
+                  }}
+                >
+                  {props.icon ? <>{props.icon}</> : null}
+                  {!props.icon ? (
+                    <svg
+                      className="ttdk-accordion-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                    >
+                      <polyline points="6 9 12 15 18 9" />
+                    </svg>
+                  ) : null}
+                </span>
+              ) : null}
+              {item.icon ? (
+                <span className="ttdk-accordion-leading-icon">{item.icon}</span>
+              ) : null}
+              <span className="ttdk-accordion-label-group">
+                <span
+                  className={`ttdk-accordion-title ${
+                    props.titleClass || ""
+                  }`.trim()}
+                  style={{
+                    ...buildUiStyle(props.titleStyle),
+                  }}
+                >
+                  {item.title}
+                </span>
+                {item.subtitle ? (
+                  <span
+                    className={`ttdk-accordion-subtitle ${
+                      props.subtitleClass || ""
+                    }`.trim()}
+                    style={{
+                      ...buildUiStyle(props.subtitleStyle),
+                    }}
+                  >
+                    {item.subtitle}
+                  </span>
+                ) : null}
+              </span>
+              {item.badge !== undefined && item.badge !== null ? (
+                <span className="ttdk-accordion-badge">{item.badge}</span>
+              ) : null}
+              {props.iconPosition !== "left" ? (
+                <span
+                  aria-hidden="true"
+                  className={`ttdk-accordion-arrow ttdk-accordion-arrow-right ${
+                    props.iconClass || ""
+                  }`.trim()}
+                  data-state={isOpen(item.value) ? "open" : "closed"}
+                  style={{
+                    ...buildUiStyle(props.iconStyle),
+                  }}
+                >
+                  {props.icon ? <>{props.icon}</> : null}
+                  {!item.customIcon && !props.icon ? (
+                    <svg
+                      className="ttdk-accordion-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                    >
+                      <polyline points="6 9 12 15 18 9" />
+                    </svg>
+                  ) : null}
+                </span>
+              ) : null}
+            </button>
+          </h3>
+          <div
+            className="ttdk-accordion-panel"
+            role="region"
+            data-state={isOpen(item.value) ? "open" : "closed"}
+          >
+            <div
+              className={`ttdk-accordion-content ${
+                props.contentClass || ""
+              }`.trim()}
+              style={{
+                ...buildUiStyle(props.contentStyle),
+              }}
+            >
+              {item.content}
+            </div>
+          </div>
+        </div>
+      ))}
+      {props.children ? (
+        <div className="ttdk-accordion-children">
+          <>{props.children}</>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default Accordion;
+
+export { Accordion };

package/src/web/accordion/index.ts

@@ -0,0 +1,3 @@
+export { default as Accordion } from './accordion';
+export { default } from './accordion';
+export * from './accordion'