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

package/src/web/card/card.tsx

@@ -0,0 +1,408 @@
+"use client";
+import * as React from "react";
+
+export type CardUiProps = UiProps;
+export interface CardProps {
+  /**
+   * Gaya varian visual kartu.
+   * - 'bordered': Kartu dengan border halus dan background card standar.
+   * - 'elevated': Kartu dengan bayangan elevasi bertingkat (shadow).
+   * - 'flat': Kartu dengan latar netral subtle tanpa bayangan.
+   * - 'ghost': Kartu transparan minimalis tanpa border atau bayangan.
+   *
+   * @default 'default'
+   */
+  variant?: "bordered" | "elevated" | "flat" | "ghost";
+
+  /**
+   * Kepadatan padding internal kartu.
+   * - 'sm': Padding kompak (12px / 16px).
+   * - 'md': Padding proporsional standar (20px / 24px).
+   * - 'lg': Padding lapang / hero (28px / 32px).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Preset batas lebar kartu sesuai standar token TTDK.
+   * - 'auto': Fleksibel mengikuti lebar kontainer parent.
+   * - 'full': Lebar penuh 100%.
+   * - '1-1': 1128px (Grid Desktop Maksimal).
+   * - '1-2': 552px (Grid 1/2).
+   * - '1-3': 360px (Grid 1/3).
+   * - '1-4': 264px (Grid 1/4).
+   * - 'mobile': 328px (Optimal Layar Seluler).
+   *
+   * @default 'auto'
+   */
+  cardWidth?: "auto" | "full" | "1-1" | "1-2" | "1-3" | "1-4" | "mobile";
+
+  /**
+   * Sudut kelengkungan radius kartu.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+
+  /**
+   * Menambahkan efek hover interaktif (elevasi bayangan naik + border highlight + pointer kursor).
+   *
+   * @default false
+   */
+  hoverable?: boolean;
+
+  /**
+   * Menjadikan kartu sebagai elemen interaktif yang dapat diklik.
+   *
+   * @default false
+   */
+  clickable?: boolean;
+
+  /**
+   * Menampilkan efek placeholder shimmer / skeleton loader saat kartu dalam proses memuat data.
+   *
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Menonaktifkan interaksi kartu dan meredupkan opacity.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Judul kartu pada area header.
+   */
+  title?: any;
+
+  /**
+   * Subjudul atau teks deskripsi singkat di bawah judul.
+   */
+  subtitle?: any;
+
+  /**
+   * Konten pelengkap di sudut kanan atas header kartu (badge, menu tombol, link aksi).
+   */
+  extra?: any;
+
+  /**
+   * Media gambar cover atau banner visual kartu (berupa URL string gambar atau elemen/node kustom).
+   */
+  cover?: any;
+
+  /**
+   * Alt text untuk gambar cover jika `cover` berupa URL string.
+   */
+  coverAlt?: string;
+
+  /**
+   * Posisi media cover pada kartu ('top' atau 'bottom').
+   *
+   * @default 'top'
+   */
+  coverPosition?: "top" | "bottom";
+
+  /**
+   * Grup tombol aksi terstruktur di area footer kartu.
+   */
+  actions?: any;
+
+  /**
+   * Konten kustom untuk area footer kartu.
+   */
+  footer?: any;
+
+  /**
+   * Menampilkan garis pembatas divider di bawah header kartu.
+   *
+   * @default true
+   */
+  headerBorder?: boolean;
+
+  /**
+   * Menampilkan garis pembatas divider di atas footer kartu.
+   *
+   * @default true
+   */
+  footerBorder?: boolean;
+
+  /**
+   * Callback event saat kartu diklik.
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Kustomisasi visual granular root kontainer kartu (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Class CSS kustom untuk root kontainer kartu.
+   */
+  className?: string;
+
+  /**
+   * Style kustom untuk area header kartu (UiProps).
+   */
+  headerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area header kartu.
+   */
+  headerClass?: string;
+
+  /**
+   * Style kustom untuk teks judul kartu (UiProps).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks judul kartu.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk teks subjudul / deskripsi header (UiProps).
+   */
+  subtitleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks subjudul / deskripsi header.
+   */
+  subtitleClass?: string;
+
+  /**
+   * Style kustom untuk elemen extra di sudut kanan header (UiProps).
+   */
+  extraStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen extra di sudut kanan header.
+   */
+  extraClass?: string;
+
+  /**
+   * Style kustom untuk area body / konten utama kartu (UiProps).
+   */
+  bodyStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area body / konten utama kartu.
+   */
+  bodyClass?: string;
+
+  /**
+   * Style kustom untuk area footer kartu (UiProps).
+   */
+  footerStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area footer kartu.
+   */
+  footerClass?: string;
+
+  /**
+   * Style kustom untuk area media cover kartu (UiProps).
+   */
+  coverStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk area media cover kartu.
+   */
+  coverClass?: string;
+
+  /**
+   * Konten anak atau slot kustom (children).
+   */
+  children?: any;
+}
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Card(props: CardProps) {
+  return (
+    <div
+      className={`ttdk-card ${props.className || ""}`.trim()}
+      data-variant={props.variant || "default"}
+      data-size={props.size || "md"}
+      data-rounded={props.rounded || "md"}
+      data-width={props.cardWidth || "auto"}
+      data-hoverable={props.hoverable ? "true" : "false"}
+      data-clickable={props.clickable || props.onClick ? "true" : "false"}
+      data-disabled={props.disabled ? "true" : "false"}
+      data-loading={props.loading ? "true" : "false"}
+      tabIndex={props.clickable || props.onClick ? 0 : undefined}
+      role={props.clickable || props.onClick ? "button" : undefined}
+      onClick={(event) => {
+        if (props.disabled || props.loading) return;
+        if (props.onClick) props.onClick(event);
+      }}
+      onKeyDown={(event) => {
+        if (props.disabled || props.loading) return;
+        if (
+          (props.clickable || props.onClick) &&
+          (event.key === "Enter" || event.key === " ")
+        ) {
+          event.preventDefault();
+          if (props.onClick) props.onClick(event);
+        }
+      }}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      {props.cover &&
+      (!props.coverPosition || props.coverPosition === "top") ? (
+        <div
+          className={`ttdk-card-cover ttdk-card-cover-top ${
+            props.coverClass || ""
+          }`.trim()}
+          style={{
+            ...buildUiVars(props.coverStyle),
+          }}
+        >
+          {typeof props.cover === "string" ? (
+            <img src={props.cover} alt={props.coverAlt || ""} />
+          ) : null}
+          {typeof props.cover !== "string" ? <>{props.cover}</> : null}
+        </div>
+      ) : null}
+      {props.loading ? (
+        <div className="ttdk-card-skeleton">
+          <div className="ttdk-card-skeleton-header">
+            <div className="ttdk-card-skeleton-avatar" />
+            <div className="ttdk-card-skeleton-title-group">
+              <div className="ttdk-card-skeleton-line ttdk-card-skeleton-line-title" />
+              <div className="ttdk-card-skeleton-line ttdk-card-skeleton-line-subtitle" />
+            </div>
+          </div>
+          <div className="ttdk-card-skeleton-body">
+            <div
+              className="ttdk-card-skeleton-line"
+              style={{
+                width: "100%",
+              }}
+            />
+            <div
+              className="ttdk-card-skeleton-line"
+              style={{
+                width: "85%",
+              }}
+            />
+            <div
+              className="ttdk-card-skeleton-line"
+              style={{
+                width: "60%",
+              }}
+            />
+          </div>
+        </div>
+      ) : null}
+      {!props.loading ? (
+        <>
+          {props.title || props.subtitle || props.extra ? (
+            <div
+              className={`ttdk-card-header ${
+                props.headerBorder !== false ? "ttdk-card-header-bordered" : ""
+              } ${props.headerClass || ""}`.trim()}
+              style={{
+                ...buildUiVars(props.headerStyle),
+              }}
+            >
+              <div className="ttdk-card-header-main">
+                {props.title ? (
+                  <div
+                    className={`ttdk-card-title ${
+                      props.titleClass || ""
+                    }`.trim()}
+                    style={{
+                      ...buildUiVars(props.titleStyle),
+                    }}
+                  >
+                    {props.title}
+                  </div>
+                ) : null}
+                {props.subtitle ? (
+                  <div
+                    className={`ttdk-card-subtitle ${
+                      props.subtitleClass || ""
+                    }`.trim()}
+                    style={{
+                      ...buildUiVars(props.subtitleStyle),
+                    }}
+                  >
+                    {props.subtitle}
+                  </div>
+                ) : null}
+              </div>
+              {props.extra ? (
+                <div
+                  className={`ttdk-card-extra ${props.extraClass || ""}`.trim()}
+                  style={{
+                    ...buildUiVars(props.extraStyle),
+                  }}
+                >
+                  {props.extra}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+          <div
+            className={`ttdk-card-body ${props.bodyClass || ""}`.trim()}
+            style={{
+              ...buildUiVars(props.bodyStyle),
+            }}
+          >
+            <>{props.children}</>
+          </div>
+          {props.footer || props.actions ? (
+            <div
+              className={`ttdk-card-footer ${
+                props.footerBorder !== false ? "ttdk-card-footer-bordered" : ""
+              } ${props.footerClass || ""}`.trim()}
+              style={{
+                ...buildUiVars(props.footerStyle),
+              }}
+            >
+              {props.footer ? (
+                <div className="ttdk-card-footer-content">{props.footer}</div>
+              ) : null}
+              {props.actions ? (
+                <div className="ttdk-card-actions">{props.actions}</div>
+              ) : null}
+            </div>
+          ) : null}
+        </>
+      ) : null}
+      {props.cover && props.coverPosition === "bottom" ? (
+        <div
+          className={`ttdk-card-cover ttdk-card-cover-bottom ${
+            props.coverClass || ""
+          }`.trim()}
+          style={{
+            ...buildUiVars(props.coverStyle),
+          }}
+        >
+          {typeof props.cover === "string" ? (
+            <img src={props.cover} alt={props.coverAlt || ""} />
+          ) : null}
+          {typeof props.cover !== "string" ? <>{props.cover}</> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default Card;
+
+export { Card };

package/src/web/card/index.ts

@@ -0,0 +1,4 @@
+export { default as Card } from './card';
+export { default } from './card';
+export * from './card';
+export type { CardProps, CardUiProps } from './card'