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

package/src/web/table/index.ts

@@ -0,0 +1,35 @@
+export { default as Table } from './table';
+export { default as TableHeader } from './table-header';
+export { default as TableBody } from './table-body';
+export { default as TableFooter } from './table-footer';
+export { default as TableRow } from './table-row';
+export { default as TableHead } from './table-head';
+export { default as TableCell } from './table-cell';
+export { default as TableCaption } from './table-caption';
+export { default as TableEmpty } from './table-empty';
+
+export * from './table';
+export * from './table-header';
+export * from './table-body';
+export * from './table-footer';
+export * from './table-row';
+export * from './table-head';
+export * from './table-cell';
+export * from './table-caption';
+export * from './table-empty';
+
+// Re-export TanStack REACT Table (All core + framework adapter hooks & renderers)
+export {
+  useReactTable,
+  createTable,
+  flexRender,
+  createColumnHelper,
+  getCoreRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  getFilteredRowModel,
+  getExpandedRowModel,
+  getGroupedRowModel,
+} from '@tanstack/react-table';
+export * from '@tanstack/react-table';
+export { default } from './table';

package/src/web/table/manifest.json

@@ -0,0 +1,168 @@
+{
+  "name": "@ttdk-design-system/table",
+  "component": "Table",
+  "folder": "table",
+  "description": "Komponen kontainer utama tabel (Compound Table ala Shadcn UI).",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "table.css",
+      "importPath": "web/table/table.css"
+    }
+  ],
+  "props": {
+    "variant": {
+      "name": "variant",
+      "type": "'default' | 'striped' | 'clean'",
+      "optional": true,
+      "default": "default",
+      "description": "Varian tampilan visual tabel. - `'default'`: Tampilan standar dengan latar bersih dan bingkai kartu. - `'striped'`: Tampilan selang-seling (zebra). - `'clean'`: Tampilan minimalis tanpa border luar dan tanpa shadow.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Kerapatan / ukuran tinggi baris tabel. - `'sm'`: Kompak (padat). - `'md'`: Standar. - `'lg'`: Lega.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {}) | number",
+      "optional": true,
+      "default": "sm",
+      "description": "Sudut kelengkungan radius tabel. - Preset: `'none'` | `'xs'` | `'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'` - Nilai custom: `'12px'`, `'1rem'`, atau angka `12`",
+      "example": null,
+      "param": null
+    },
+    "shadow": {
+      "name": "shadow",
+      "type": "'none' | 'sm' | 'md' | 'lg' | (string & {})",
+      "optional": true,
+      "default": "sm",
+      "description": "Bayangan elevasi kontainer tabel. - Preset: `'none'` | `'sm'` | `'md'` | `'lg'` - Nilai custom: CSS box-shadow string (contoh: `'0 4px 20px rgba(0,0,0,0.1)'`)",
+      "example": null,
+      "param": null
+    },
+    "minWidth": {
+      "name": "minWidth",
+      "type": "string | number",
+      "optional": true,
+      "default": null,
+      "description": "Lebar minimum elemen table di dalam wrapper untuk menjaga susunan kolom dan memicu horizontal scroll. Contoh: `700`, `'700px'`, `'max-content'`",
+      "example": null,
+      "param": null
+    },
+    "maxHeight": {
+      "name": "maxHeight",
+      "type": "string | number",
+      "optional": true,
+      "default": null,
+      "description": "Ketinggian maksimum kontainer tabel untuk memicu scroll vertikal internal (sangat direkomendasikan saat stickyHeader aktif). Contoh: `280`, `'280px'`, `'50vh'`",
+      "example": null,
+      "param": null
+    },
+    "hoverable": {
+      "name": "hoverable",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Efek hover saat kursor melayang di atas baris tabel.",
+      "example": null,
+      "param": null
+    },
+    "stickyHeader": {
+      "name": "stickyHeader",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuat header tabel menempel di atas (sticky) saat konten di-scroll.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan spinner loading overlay di atas tabel.",
+      "example": null,
+      "param": null
+    },
+    "caption": {
+      "name": "caption",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks caption aksesibilitas untuk tabel (dirender sebagai elemen `<caption>`).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root kontainer wrapper (.ttdk-table-wrapper) melalui UiProps.",
+      "example": null,
+      "param": null
+    },
+    "tableStyle": {
+      "name": "tableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen table (table.ttdk-table) melalui UiProps.",
+      "example": null,
+      "param": null
+    },
+    "tableClass": {
+      "name": "tableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen table (table.ttdk-table).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk kontainer wrapper luar.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten anak (TableHeader, TableBody, TableFooter, TableCaption).",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/table/table-body.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+export interface TableBodyProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Kustomisasi visual granular tbody (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten baris data (TableRow).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen badan tabel `<tbody>` (Compound TableBody).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function TableBody(props: TableBodyProps) {
+  return (
+    <tbody
+      className={`ttdk-table-body ${props.className || ""}`.trim()}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </tbody>
+  );
+}
+
+export default TableBody;

package/src/web/table/table-caption.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+export interface TableCaptionProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Kustomisasi visual granular caption (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten caption tabel.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen caption tabel `<caption>` (Compound TableCaption).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function TableCaption(props: TableCaptionProps) {
+  return (
+    <caption
+      className={`ttdk-table-caption ${props.className || ""}`.trim()}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </caption>
+  );
+}
+
+export default TableCaption;

package/src/web/table/table-cell.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+
+export interface TableCellProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Penyelarasan teks sel ('left' | 'center' | 'right').
+   * @default 'left'
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Lebar sel kustom.
+   */
+  width?: string;
+
+  /**
+   * Jumlah span kolom (colspan).
+   */
+  colSpan?: number;
+
+  /**
+   * Jumlah span baris (rowspan).
+   */
+  rowSpan?: number;
+
+  /**
+   * Kustomisasi visual granular td (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten di dalam sel tabel.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen sel data tabel `<td>` (Compound TableCell).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function TableCell(props: TableCellProps) {
+  return (
+    <td
+      className={`ttdk-table-cell ${props.className || ""}`.trim()}
+      colSpan={props.colSpan}
+      rowSpan={props.rowSpan}
+      style={{
+        textAlign: props.align || "left",
+        ...(props.width
+          ? {
+              width: props.width,
+            }
+          : {}),
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </td>
+  );
+}
+
+export default TableCell;

package/src/web/table/table-empty.tsx

@@ -0,0 +1,108 @@
+"use client";
+import * as React from "react";
+
+export interface TableEmptyProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Jumlah span kolom (colspan).
+   * @default 10
+   */
+  colSpan?: number;
+
+  /**
+   * Judul pesan data kosong.
+   * @default 'Tidak ada dataset yang cocok'
+   */
+  title?: string;
+
+  /**
+   * Deskripsi penjelasan data kosong.
+   * @default 'Atur ulang filter atau ubah kata kunci pencarian.'
+   */
+  description?: string;
+
+  /**
+   * Teks tombol aksi reset / refresh.
+   * @default 'Atur ulang'
+   */
+  actionLabel?: string;
+
+  /**
+   * Callback ketika tombol aksi diklik.
+   */
+  onAction?: () => void;
+
+  /**
+   * Kustomisasi visual granular wadah tr empty (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom di dalam wadah empty state.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen status data kosong tabel (Compound TableEmpty).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function TableEmpty(props: TableEmptyProps) {
+  return (
+    <tr
+      className={`ttdk-table-row ttdk-table-empty-row ${
+        props.className || ""
+      }`.trim()}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <td className="ttdk-table-cell" colSpan={props.colSpan || 10}>
+        <div className="ttdk-table-empty-wrapper">
+          {props.title || props.description ? (
+            <>
+              <p className="ttdk-table-empty-title">
+                {props.title || "Tidak ada dataset yang cocok"}
+              </p>
+              {props.description ? (
+                <p className="ttdk-table-empty-desc">{props.description}</p>
+              ) : null}
+              {props.actionLabel ? (
+                <button
+                  type="button"
+                  className="ttdk-table-empty-action"
+                  onClick={(event) => {
+                    if (props.onAction) {
+                      props.onAction();
+                    }
+                  }}
+                >
+                  {props.actionLabel}
+                </button>
+              ) : null}
+              <>{props.children}</>
+            </>
+          ) : (
+            <>
+              <>{props.children}</>
+            </>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+export default TableEmpty;

package/src/web/table/table-footer.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+export interface TableFooterProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Kustomisasi visual granular tfoot (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten baris footer (TableRow).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen footer tabel `<tfoot>` (Compound TableFooter).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function TableFooter(props: TableFooterProps) {
+  return (
+    <tfoot
+      className={`ttdk-table-footer ${props.className || ""}`.trim()}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </tfoot>
+  );
+}
+
+export default TableFooter;

package/src/web/table/table-head.tsx

@@ -0,0 +1,80 @@
+"use client";
+import * as React from "react";
+
+export interface TableHeadProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Penyelarasan teks header ('left' | 'center' | 'right').
+   * @default 'left'
+   */
+  align?: "left" | "center" | "right";
+
+  /**
+   * Lebar kolom (misal: '120px', '25%').
+   */
+  width?: string;
+
+  /**
+   * Menandakan kolom dapat disortir secara interaktif.
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Kustomisasi visual granular th (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Fungsi callback saat header kolom diklik.
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Konten teks atau komponen di dalam header kolom.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen sel header tabel `<th>` (Compound TableHead).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function TableHead(props: TableHeadProps) {
+  return (
+    <th
+      className={`ttdk-table-head ${props.className || ""}`.trim()}
+      data-sortable={props.sortable ? "true" : "false"}
+      style={{
+        textAlign: props.align || "left",
+        ...(props.width
+          ? {
+              width: props.width,
+            }
+          : {}),
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+      onClick={(e) => {
+        if (props.onClick) {
+          props.onClick(e);
+        }
+      }}
+    >
+      <>{props.children}</>
+    </th>
+  );
+}
+
+export default TableHead;

package/src/web/table/table-header.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+export interface TableHeaderProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Kustomisasi visual granular thead (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten baris header (TableRow).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen header tabel `<thead>` (Compound TableHeader).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function TableHeader(props: TableHeaderProps) {
+  return (
+    <thead
+      className={`ttdk-table-header ${props.className || ""}`.trim()}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </thead>
+  );
+}
+
+export default TableHeader;