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

package/src/web/banner/banner.tsx

@@ -0,0 +1,334 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+
+export type BannerUiProps = UiProps;
+export interface BannerProps {
+  /**
+   * Judul utama banner yang ditampilkan dengan tipografi tegas (misal: "Katalog Dataset Publik").
+   */
+  title?: string;
+
+  /**
+   * Deskripsi atau pesan teks penjelasan tambahan di bawah judul.
+   */
+  description?: string;
+
+  /**
+   * Varian warna semantik tema banner:
+   * - `'primary'`: Brand Teal utama (#16B3AC).
+   * - `'success'`: Hijau konfirmasi keberhasilan.
+   * - `'info'`: Biru informasi.
+   * - `'warning'`: Kuning / amber peringatan.
+   * - `'danger'`: Merah kesalahan / bahaya.
+   *
+   * @default 'primary'
+   */
+  variant?: "primary" | "success" | "info" | "warning" | "danger";
+
+  /**
+   * Gaya tampilan visual latar belakang banner.
+   * - `'gradient'`: Latar belakang gradasi halus elegan (standar sesuai desain katalog).
+   * - `'subtle'`: Latar belakang warna lembut transparan.
+   * - `'solid'`: Latar belakang warna pekat penuh dengan teks kontras tinggi.
+   * - `'outline'`: Garis tepi minimalis tanpa latar belakang gradasi.
+   * - `'flat'`: Latar polos solid netral.
+   *
+   * @default 'gradient'
+   */
+  appearance?: "gradient" | "subtle" | "solid" | "outline" | "flat";
+
+  /**
+   * Skala ukuran tinggi dan padding ruang dalam banner.
+   * - `'sm'`: Kompak (padding 10px 16px, judul 14px).
+   * - `'md'`: Standar (padding 14px 20px, judul 16px).
+   * - `'lg'`: Besar / Page Header (padding 18px 24px, judul 18px).
+   * - `'xl'`: Ekstra Besar / Hero Banner (padding 24px 32px, judul 22px).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Bentuk sudut kelengkungan container banner.
+   * - `'none'`: Sudut siku 0px.
+   * - `'sm'`: Sudut 4px.
+   * - `'md'`: Sudut 8px (standar).
+   * - `'lg'`: Sudut 12px.
+   * - `'full'`: Sudut kapsul 9999px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menampilkan ikon indikator status semantik (boolean) atau elemen ikon kustom.
+   *
+   * @default false
+   */
+  icon?: boolean | any;
+
+  /**
+   * Elemen ikon SVG kustom untuk menggantikan ikon bawaan banner.
+   */
+  customIcon?: any;
+
+  /**
+   * Warna kustom untuk ikon banner secara langsung.
+   */
+  iconColor?: string;
+
+  /**
+   * Ukuran kustom untuk ikon banner secara langsung.
+   */
+  iconSize?: string;
+
+  /**
+   * Style kustom untuk ikon banner (UiProps).
+   */
+  iconStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk ikon banner.
+   */
+  iconClass?: string;
+
+  /**
+   * Style kustom untuk judul banner (UiProps).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk judul banner.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk deskripsi banner (UiProps).
+   */
+  descStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk deskripsi banner.
+   */
+  descClass?: string;
+
+  /**
+   * Menampilkan tombol silang (x) untuk menutup atau menyembunyikan banner.
+   *
+   * @default false
+   */
+  closable?: boolean;
+
+  /**
+   * Style kustom untuk tombol tutup banner (UiProps).
+   */
+  closableStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tutup banner.
+   */
+  closableClass?: string;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Konten kustom tambahan / isi banner (children slot).
+   */
+  children?: any;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Event callback saat tombol tutup diklik.
+   */
+  onClose?: (event?: any) => void;
+}
+
+/**
+ * Komponen Banner untuk header halaman portal, pengumuman penting, atau judul kategori katalog data dengan desain visual bersih dan elegan.
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Banner(props: BannerProps) {
+  const [isVisible, setIsVisible] = useState(() => true);
+
+  function handleDismiss(event: any) {
+    setIsVisible(false);
+    if (props.onClose) {
+      props.onClose(event);
+    }
+  }
+
+  return (
+    <>
+      {isVisible ? (
+        <>
+          <div
+            role="region"
+            className={`ttdk-banner ${props.className || ""}`.trim()}
+            data-variant={props.variant || "primary"}
+            data-appearance={props.appearance || "gradient"}
+            data-size={props.size || "md"}
+            data-rounded={props.rounded || "md"}
+            aria-label={props.title || "Banner"}
+            style={{
+              ...buildUiVars(props.ui),
+              ...(props.iconColor
+                ? {
+                    "--ttdk-ui-icon-color": props.iconColor,
+                  }
+                : {}),
+              ...(props.iconSize
+                ? {
+                    "--ttdk-ui-icon-size": props.iconSize,
+                  }
+                : {}),
+              ...((props as any)["style"] || {}),
+              ...props.style,
+            }}
+          >
+            <div className="ttdk-banner-main">
+              {props.customIcon || (props.icon && props.icon !== false) ? (
+                <div
+                  className={`ttdk-banner-icon-wrapper ${
+                    props.iconClass || ""
+                  }`.trim()}
+                  style={{
+                    ...buildUiVars(props.iconStyle),
+                  }}
+                >
+                  {props.customIcon ||
+                  (props.icon && typeof props.icon !== "boolean") ? (
+                    <span className="ttdk-banner-icon">
+                      {props.customIcon || props.icon}
+                    </span>
+                  ) : null}
+                  {!props.customIcon && props.icon === true ? (
+                    <>
+                      {!props.variant || props.variant === "primary" ? (
+                        <svg
+                          className="ttdk-banner-icon"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+                        </svg>
+                      ) : null}
+                      {props.variant === "info" ? (
+                        <svg
+                          className="ttdk-banner-icon"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <circle cx="12" cy="12" r="10" />
+                          <line x1="12" y1="16" x2="12" y2="12" />
+                          <line x1="12" y1="8" x2="12.01" y2="8" />
+                        </svg>
+                      ) : null}
+                      {props.variant === "success" ? (
+                        <svg
+                          className="ttdk-banner-icon"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <circle cx="12" cy="12" r="10" />
+                          <polyline points="9 12 11 14 15 10" />
+                        </svg>
+                      ) : null}
+                      {props.variant === "warning" ? (
+                        <svg
+                          className="ttdk-banner-icon"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+                          <line x1="12" y1="9" x2="12" y2="13" />
+                          <line x1="12" y1="17" x2="12.01" y2="17" />
+                        </svg>
+                      ) : null}
+                      {props.variant === "danger" ? (
+                        <svg
+                          className="ttdk-banner-icon"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <circle cx="12" cy="12" r="10" />
+                          <line x1="12" y1="8" x2="12" y2="12" />
+                          <line x1="12" y1="16" x2="12.01" y2="16" />
+                        </svg>
+                      ) : null}
+                    </>
+                  ) : null}
+                </div>
+              ) : null}
+              <div className="ttdk-banner-text-group">
+                {props.title ? (
+                  <div
+                    className={`ttdk-banner-title ${
+                      props.titleClass || ""
+                    }`.trim()}
+                    style={{
+                      ...buildUiVars(props.titleStyle),
+                    }}
+                  >
+                    {props.title}
+                  </div>
+                ) : null}
+                {props.description ? (
+                  <div
+                    className={`ttdk-banner-desc ${
+                      props.descClass || ""
+                    }`.trim()}
+                    style={{
+                      ...buildUiVars(props.descStyle),
+                    }}
+                  >
+                    {props.description}
+                  </div>
+                ) : null}
+                <>{props.children}</>
+              </div>
+            </div>
+            {props.closable ? (
+              <div className="ttdk-banner-actions">
+                <button
+                  type="button"
+                  aria-label="Tutup banner"
+                  className={`ttdk-banner-close-btn ${
+                    props.closableClass || ""
+                  }`.trim()}
+                  style={{
+                    ...buildUiVars(props.closableStyle),
+                  }}
+                  onClick={(e) => handleDismiss(e)}
+                >
+                  <svg viewBox="0 0 24 24" fill="none">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default Banner;
+
+export { Banner };

package/src/web/banner/index.ts

@@ -0,0 +1,3 @@
+export { default as Banner } from './banner';
+export { default } from './banner';
+export type { BannerProps, BannerUiProps } from './banner'

package/src/web/banner/manifest.json

@@ -0,0 +1,240 @@
+{
+  "name": "@ttdk-design-system/banner",
+  "component": "Banner",
+  "folder": "banner",
+  "description": "Komponen Banner untuk header halaman portal, pengumuman penting, atau judul kategori katalog data dengan desain visual bersih dan elegan.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "banner.css",
+      "importPath": "web/banner/banner.css"
+    }
+  ],
+  "props": {
+    "title": {
+      "name": "title",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Judul utama banner yang ditampilkan dengan tipografi tegas (misal: \"Katalog Dataset Publik\").",
+      "example": null,
+      "param": null
+    },
+    "description": {
+      "name": "description",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Deskripsi atau pesan teks penjelasan tambahan di bawah judul.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'primary'\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'danger'",
+      "optional": true,
+      "default": "primary",
+      "description": "Varian warna semantik tema banner: - `'primary'`: Brand Teal utama (#16B3AC). - `'success'`: Hijau konfirmasi keberhasilan. - `'info'`: Biru informasi. - `'warning'`: Kuning / amber peringatan. - `'danger'`: Merah kesalahan / bahaya.",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'gradient' | 'subtle' | 'solid' | 'outline' | 'flat'",
+      "optional": true,
+      "default": "gradient",
+      "description": "Gaya tampilan visual latar belakang banner. - `'gradient'`: Latar belakang gradasi halus elegan (standar sesuai desain katalog). - `'subtle'`: Latar belakang warna lembut transparan. - `'solid'`: Latar belakang warna pekat penuh dengan teks kontras tinggi. - `'outline'`: Garis tepi minimalis tanpa latar belakang gradasi. - `'flat'`: Latar polos solid netral.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg' | 'xl'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran tinggi dan padding ruang dalam banner. - `'sm'`: Kompak (padding 10px 16px, judul 14px). - `'md'`: Standar (padding 14px 20px, judul 16px). - `'lg'`: Besar / Page Header (padding 18px 24px, judul 18px). - `'xl'`: Ekstra Besar / Hero Banner (padding 24px 32px, judul 22px).",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Bentuk sudut kelengkungan container banner. - `'none'`: Sudut siku 0px. - `'sm'`: Sudut 4px. - `'md'`: Sudut 8px (standar). - `'lg'`: Sudut 12px. - `'full'`: Sudut kapsul 9999px.",
+      "example": null,
+      "param": null
+    },
+    "icon": {
+      "name": "icon",
+      "type": "boolean | any",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan ikon indikator status semantik (boolean) atau elemen ikon kustom.",
+      "example": null,
+      "param": null
+    },
+    "customIcon": {
+      "name": "customIcon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Elemen ikon SVG kustom untuk menggantikan ikon bawaan banner.",
+      "example": null,
+      "param": null
+    },
+    "iconColor": {
+      "name": "iconColor",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Warna kustom untuk ikon banner secara langsung.",
+      "example": null,
+      "param": null
+    },
+    "iconSize": {
+      "name": "iconSize",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Ukuran kustom untuk ikon banner secara langsung.",
+      "example": null,
+      "param": null
+    },
+    "iconStyle": {
+      "name": "iconStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk ikon banner (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "iconClass": {
+      "name": "iconClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk ikon banner.",
+      "example": null,
+      "param": null
+    },
+    "titleStyle": {
+      "name": "titleStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk judul banner (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "titleClass": {
+      "name": "titleClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk judul banner.",
+      "example": null,
+      "param": null
+    },
+    "descStyle": {
+      "name": "descStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk deskripsi banner (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "descClass": {
+      "name": "descClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk deskripsi banner.",
+      "example": null,
+      "param": null
+    },
+    "closable": {
+      "name": "closable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol silang (x) untuk menutup atau menyembunyikan banner.",
+      "example": null,
+      "param": null
+    },
+    "closableStyle": {
+      "name": "closableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tutup banner (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "closableClass": {
+      "name": "closableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tutup banner.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom tambahan / isi banner (children slot).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event callback saat tombol tutup diklik.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/breadcrumb/AI_GUIDE.md

@@ -0,0 +1,120 @@
+# <Breadcrumb /> — TTDK Component Reference
+
+Komponen Breadcrumb untuk menampilkan hierarki navigasi lokasi halaman saat ini dengan dukungan penyingkatan (collapse ellipsis).
+
+## 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/breadcrumb/breadcrumb.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Breadcrumb from "@ttdk-design-system/library-react/web/breadcrumb";
+
+// Vue 3
+import Breadcrumb from "@ttdk-design-system/library-vue/web/breadcrumb";
+
+// Svelte
+import Breadcrumb from "@ttdk-design-system/library-svelte/web/breadcrumb";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `BreadcrumbItem[]` | `-` | Daftar item navigasi breadcrumb dari tingkat teratas hingga halaman saat ini. |
+| `separator?` | `BreadcrumbSeparator` | `arrow` | Jenis karakter atau ikon pemisah antar item: - `'arrow'`: Ikon panah kanan `→`. |
+| `customSeparator?` | `string` | `-` | Karakter atau string teks khusus untuk pemisah antarelemen. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran tampilan breadcrumb: - `'sm'`: Kompak (12px, gap 6px). - `'md'`: Standar (14px, gap 8px). - `'lg'`: Besar (16px, gap 12px). |
+| `maxLabelLength?` | `number` | `20` | Batas maksimum panjang karakter label sebelum dipotong (truncate). |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `textLinkStyle?` | `UiProps` | `-` | Style kustom untuk teks tautan breadcrumb / item non-aktif (UiProps). |
+| `textLinkClass?` | `string` | `-` | Class CSS kustom untuk teks tautan breadcrumb / item non-aktif (Tailwind / class kustom). |
+| `textActiveStyle?` | `UiProps` | `-` | Style kustom untuk teks item aktif / halaman saat ini (UiProps). |
+| `textActiveClass?` | `string` | `-` | Class CSS kustom untuk teks item aktif / halaman saat ini (Tailwind / class kustom). |
+| `separatorStyle?` | `UiProps` | `-` | Style kustom untuk karakter atau ikon pemisah (UiProps). |
+| `separatorClass?` | `string` | `-` | Class CSS kustom untuk karakter atau ikon pemisah (Tailwind / class kustom). |
+| `onItemClick?` | `(item: BreadcrumbItem, index: number, event: any) => void` | `-` | Handler event klik yang dipanggil saat suatu item breadcrumb diklik. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Slot konten tambahan di ujung kanan breadcrumb. |
+
+### Sub-interface: `BreadcrumbItem`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Label teks yang ditampilkan pada breadcrumb item. |
+| `href?` | `string` | `-` | URL tautan navigasi tujuan (href / path). |
+| `icon?` | `any` | `-` | Ikon atau emoji opsional di samping label teks. |
+| `current?` | `boolean` | `-` | Menandai item ini secara eksplisit sebagai halaman saat ini (current page). |
+| `disabled?` | `boolean` | `false` | Menonaktifkan interaksi klik pada item ini. |
+| `isEllipsis?` | `boolean` | `-` | Menandai item sebagai representasi ellipsis penyingkat item yang tersembunyi. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Breadcrumb from "@ttdk-design-system/library-react/web/breadcrumb";
+import "@ttdk-design-system/library-react/web/breadcrumb/breadcrumb.css";
+
+export function Example() {
+  const items = [
+    { label: "Beranda", href: "/" },
+    { label: "Dataset", href: "/dataset" },
+    { label: "Fasilitas Kesehatan", href: "/dataset/faskes" },
+    { label: "Detail Puskesmas", current: true }
+  ];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Breadcrumb items={items} separator="slash" />
+      <Breadcrumb items={items} separator="chevron" size="sm" />
+      <Breadcrumb items={items} maxItems={3} />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Breadcrumb from "@ttdk-design-system/library-vue/web/breadcrumb";
+import "@ttdk-design-system/library-vue/web/breadcrumb/breadcrumb.css";
+
+const items = [
+  { label: "Beranda", href: "/" },
+  { label: "Dataset", href: "/dataset" },
+  { label: "Fasilitas Kesehatan", href: "/dataset/faskes" },
+  { label: "Detail Puskesmas", current: true }
+];
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <Breadcrumb :items="items" separator="slash" />
+    <Breadcrumb :items="items" separator="chevron" size="sm" />
+    <Breadcrumb :items="items" :max-items="3" />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Breadcrumb from "@ttdk-design-system/library-svelte/web/breadcrumb";
+  import "@ttdk-design-system/library-svelte/web/breadcrumb/breadcrumb.css";
+
+  const items = [
+    { label: "Beranda", href: "/" },
+    { label: "Dataset", href: "/dataset" },
+    { label: "Fasilitas Kesehatan", href: "/dataset/faskes" },
+    { label: "Detail Puskesmas", current: true }
+  ];
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px;">
+  <Breadcrumb {items} separator="slash" />
+  <Breadcrumb {items} separator="chevron" size="sm" />
+  <Breadcrumb {items} maxItems={3} />
+</div>
+```