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

package/src/web/textarea/textarea.tsx

@@ -0,0 +1,467 @@
+"use client";
+import * as React from "react";
+import { useState, forwardRef, useEffect } from "react";
+
+export type TextareaUiProps = UiProps;
+export interface TextareaProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas textarea (14px Semibold, #141313).
+   */
+  label?: string;
+
+  /**
+   * Style kustom untuk elemen label judul field (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen label judul field.
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk elemen kontainer textarea wrapper (UiProps).
+   */
+  wrapperStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen kontainer textarea wrapper.
+   */
+  wrapperClass?: string;
+
+  /**
+   * Style kustom untuk elemen textarea control HTML (UiProps).
+   */
+  textareaStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen textarea control HTML.
+   */
+  textareaClass?: string;
+
+  /**
+   * Style kustom untuk elemen pesan error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen pesan error validasi.
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Style kustom untuk elemen helper text (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen helper text.
+   */
+  helperTextClass?: string;
+
+  /**
+   * Style kustom untuk elemen penghitung karakter (UiProps).
+   */
+  charCountStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen penghitung karakter.
+   */
+  charCountClass?: string;
+
+  /**
+   * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+   */
+  optional?: boolean;
+
+  /**
+   * Kustomisasi teks keterangan opsional.
+   * @default '(Opsional)'
+   */
+  optionalText?: string;
+
+  /**
+   * Nilai teks placeholder saat textarea kosong (#9698A2).
+   */
+  placeholder?: string;
+
+  /**
+   * Nilai terkontrol (controlled value) pada textarea.
+   */
+  value?: string;
+
+  /**
+   * Nilai awal tidak terkontrol (uncontrolled initial value).
+   */
+  defaultValue?: string;
+
+  /**
+   * Jumlah baris default yang ditampilkan.
+   * @default 4
+   */
+  rows?: number;
+
+  /**
+   * Nama form field HTML untuk integrasi formulir.
+   */
+  name?: string;
+
+  /**
+   * Identifier unik elemen textarea.
+   */
+  id?: string;
+
+  /**
+   * Kontrol orientasi resize oleh pengguna.
+   * - `'none'`: Tidak dapat di-resize
+   * - `'vertical'`: Hanya dapat di-resize vertikal (standar)
+   * - `'horizontal'`: Hanya dapat di-resize horizontal
+   * - `'both'`: Bebas di-resize kedua arah
+   * @default 'vertical'
+   */
+  resize?: "none" | "vertical" | "horizontal" | "both";
+
+  /**
+   * Status apakah textarea sedang dalam kondisi error / tidak valid.
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Pesan teks penjelasan kesalahan validasi di bawah field.
+   */
+  errorMessage?: string;
+
+  /**
+   * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+   */
+  helperText?: string;
+
+  /**
+   * Posisi teks helper
+   */
+  helperTextPosition?: "top" | "bottom";
+
+  /**
+   * Skala ukuran textarea.
+   * - `'sm'`: Padding rapat
+   * - `'md'`: Standar
+   * - `'lg'`: Padding lapang
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan textarea.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 16px
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menjadikan lebar field textarea memenuhi kontainer penuh (full-width 100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Status apakah field dinonaktifkan (disabled).
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Status apakah field bersifat hanya-baca (readonly).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Konfigurasi atribut autocomplete HTML.
+   */
+  autoComplete?: string;
+
+  /**
+   * Batas maksimum panjang karakter.
+   */
+  maxLength?: number;
+
+  /**
+   * Batas minimum panjang karakter.
+   */
+  minLength?: number;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Kustomisasi visual granular root / form-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback event saat nilai textarea berubah.
+   */
+  onChange?: (event: any) => void;
+
+  /**
+   * Callback event saat pengguna mengetik (input event).
+   */
+  onInput?: (event: any) => void;
+
+  /**
+   * Callback event saat textarea kehilangan fokus (blur).
+   */
+  onBlur?: (event: any) => void;
+
+  /**
+   * Callback event saat textarea mendapatkan fokus.
+   */
+  onFocus?: (event: any) => void;
+
+  /**
+   * Ref instance elemen textarea HTML untuk akses kontrol DOM langsung (focus, blur, select).
+   */
+  inputRef?: any;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Callback event tombol keyboard ditekan.
+   */
+  onKeyDown?: (event: any) => void;
+
+  /**
+   * Callback event tombol keyboard dilepaskan.
+   */
+  onKeyUp?: (event: any) => void;
+
+  /**
+   * Menampilkan penghitung karakter di bawah textarea (format: `x / maxLength`).
+   * Memerlukan prop `maxLength` untuk berfungsi.
+   * @default false
+   */
+  showCount?: boolean;
+}
+
+/**
+ * Komponen Textarea TTDK sesuai spesifikasi Anatomy Desain:
+ * 1. Field title (14px Semibold, #141313)
+ * 2. (Opsional) label (12px Regular, #9698A2)
+ * 3. Border radius 8px
+ * 4. Field content (14px Regular, #141313, placeholder #9698A2)
+ * 5. Additional information / Helper text (12px Regular, #3C4245)
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+const Textarea = forwardRef<any, TextareaProps>(function Textarea(
+  props: TextareaProps,
+  inputRef
+) {
+  const [innerValue, setInnerValue] = useState(() =>
+    props.value !== undefined
+      ? String(props.value)
+      : props.defaultValue !== undefined
+      ? String(props.defaultValue)
+      : ""
+  );
+
+  function currentLength() {
+    if (props.value !== undefined) {
+      return String(props.value).length;
+    }
+    return innerValue.length;
+  }
+
+  function handleInput(e: any) {
+    if (props.value === undefined) {
+      setInnerValue(e.target.value);
+    }
+    if (props.onInput) {
+      props.onInput(e);
+    }
+  }
+
+  function handleChange(e: any) {
+    if (props.value === undefined) {
+      setInnerValue(e.target.value);
+    }
+    if (props.onChange) {
+      props.onChange(e);
+    }
+  }
+
+  useEffect(() => {
+    if (props.value !== undefined) {
+      setInnerValue(String(props.value));
+    }
+  }, [props.value]);
+
+  return (
+    <div
+      className={`ttdk-form-item ${props.className || ""}`.trim()}
+      data-disabled={props.disabled}
+      data-error={Boolean(props.error || props.errorMessage)}
+      data-size={props.size || "md"}
+      data-block={props.block ? "true" : undefined}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props.ui as any) || {}),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      {props.label ? (
+        <label
+          className={`ttdk-form-label ${props.labelClass || ""}`.trim()}
+          htmlFor={props.id}
+          style={{
+            ...buildUiVars(props.labelStyle),
+          }}
+        >
+          <span>{props.label}</span>
+          {props.required ? (
+            <span className="ttdk-form-required" aria-hidden="true">
+              *
+            </span>
+          ) : null}
+          {props.optional ? (
+            <span className="ttdk-form-optional">
+              {props.optionalText || "(Opsional)"}
+            </span>
+          ) : null}
+        </label>
+      ) : null}
+      {props.helperText && props.helperTextPosition === "top" ? (
+        <div
+          className={`ttdk-form-helper-text ${
+            props.helperTextClass || ""
+          }`.trim()}
+          style={{
+            ...buildUiVars(props.helperTextStyle),
+          }}
+        >
+          {props.helperText}
+        </div>
+      ) : null}
+      <div
+        className={`ttdk-textarea-wrapper ${props.wrapperClass || ""}`.trim()}
+        data-filled={Boolean(
+          props.value !== undefined ? props.value : innerValue
+        )}
+        data-error={Boolean(props.error || props.errorMessage)}
+        data-disabled={Boolean(props.disabled)}
+        data-size={props.size || "md"}
+        data-rounded={props.rounded || "md"}
+        style={{
+          ...buildUiVars(props.wrapperStyle),
+        }}
+      >
+        <textarea
+          ref={inputRef}
+          className={`ttdk-textarea-control ${
+            props.textareaClass || ""
+          }`.trim()}
+          name={props.name}
+          id={props.id}
+          value={props.value !== undefined ? props.value : innerValue}
+          placeholder={props.placeholder}
+          rows={props.rows || 4}
+          disabled={props.disabled}
+          readOnly={props.readOnly}
+          required={props.required}
+          autoComplete={props.autoComplete}
+          maxLength={props.maxLength}
+          minLength={props.minLength}
+          aria-invalid={Boolean(props.error || props.errorMessage)}
+          style={{
+            resize: props.resize || "vertical",
+            ...buildUiVars(props.textareaStyle),
+          }}
+          onChange={(e) => handleChange(e)}
+          onInput={(e) => handleInput(e)}
+          onBlur={(e) => props.onBlur && props.onBlur(e)}
+          onFocus={(e) => props.onFocus && props.onFocus(e)}
+          onKeyDown={(e) => props.onKeyDown && props.onKeyDown(e)}
+          onKeyUp={(e) => props.onKeyUp && props.onKeyUp(e)}
+        />
+      </div>
+      {(props.helperText && props.helperTextPosition !== "top") ||
+      (props.errorMessage && (props.error || props.errorMessage)) ||
+      props.showCount ? (
+        <div className="ttdk-form-footer">
+          {(props.helperText && props.helperTextPosition !== "top") ||
+          (props.errorMessage && (props.error || props.errorMessage)) ? (
+            <div className="ttdk-form-footer-message">
+              {props.helperText && props.helperTextPosition !== "top" ? (
+                <div
+                  className={`ttdk-form-helper-text ${
+                    props.helperTextClass || ""
+                  }`.trim()}
+                  style={{
+                    ...buildUiVars(props.helperTextStyle),
+                  }}
+                >
+                  {props.helperText}
+                </div>
+              ) : null}
+              {props.errorMessage && (props.error || props.errorMessage) ? (
+                <div
+                  role="alert"
+                  className={`ttdk-form-error-msg ${
+                    props.errorMessageClass || ""
+                  }`.trim()}
+                  style={{
+                    ...buildUiVars(props.errorMessageStyle),
+                  }}
+                >
+                  <span>{props.errorMessage}</span>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+          {props.showCount ? (
+            <div
+              aria-live="polite"
+              className={`ttdk-form-char-count ${
+                props.charCountClass || ""
+              }`.trim()}
+              style={{
+                ...buildUiVars(props.charCountStyle),
+              }}
+            >
+              {currentLength()}
+              {props.maxLength ? (
+                <>{` / ${props.maxLength}`}</>
+              ) : (
+                <>
+                  null
+                </>
+              )}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+export default Textarea;
+
+export { Textarea };

package/src/web/tooltip/AI_GUIDE.md

@@ -0,0 +1,110 @@
+# <Tooltip /> — TTDK Component Reference
+
+Komponen Tooltip untuk menampilkan informasi kontekstual singkat saat pengguna mengarahkan kursor atau memfokuskan elemen pemicu.
+
+## 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/tooltip/tooltip.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Tooltip from "@ttdk-design-system/library-react/web/tooltip";
+
+// Vue 3
+import Tooltip from "@ttdk-design-system/library-vue/web/tooltip";
+
+// Svelte
+import Tooltip from "@ttdk-design-system/library-svelte/web/tooltip";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `text?` | `string` | `-` | Teks konten tooltip yang ditampilkan. |
+| `content?` | `any` | `-` | Konten kustom tooltip (JSX / VNode atau renderable content). |
+| `kbd?` | `string | string[]` | `-` | Pintasan keyboard opsional yang ditampilkan di dalam tooltip (misal: '⌘K', ['Ctrl', 'S']). |
+| `placement?` | `TooltipPlacement` | `top` | Posisi penempatan tooltip terhadap elemen pemicu. |
+| `offsetDistance?` | `number` | `8` | Jarak offset dalam pixel dari elemen pemicu (trigger). |
+| `arrow?` | `boolean` | `true` | Menampilkan elemen panah segitiga penunjuk arah ke elemen pemicu. |
+| `openDelay?` | `number` | `150` | Penundaan kemunculan tooltip dalam milidetik (delay saat pointer enter). |
+| `closeDelay?` | `number` | `100` | Penundaan hilangnya tooltip dalam milidetik (delay saat pointer leave). |
+| `open?` | `boolean` | `-` | Status visibilitas tooltip terkontrol (controlled mode). |
+| `defaultOpen?` | `boolean` | `false` | Status visibilitas awal (uncontrolled initial state). |
+| `disabled?` | `boolean` | `false` | Menonaktifkan tooltip sehingga tidak muncul saat di-hover atau difokus. |
+| `ui?` | `TooltipUiProps` | `-` | Kustomisasi visual granular container utama (UiProps). |
+| `style?` | `any` | `-` | Style inline CSS native untuk wrapper luar. |
+| `className?` | `string` | `-` | Class CSS kustom untuk wrapper luar. |
+| `triggerClass?` | `string` | `-` | Class CSS kustom untuk pemicu (trigger container). |
+| `triggerStyle?` | `UiProps` | `-` | Style kustom untuk pemicu (trigger container) (UiProps). |
+| `contentClass?` | `string` | `-` | Class CSS kustom untuk panel tooltip konten. |
+| `contentStyle?` | `UiProps` | `-` | Style kustom untuk panel tooltip konten (UiProps). |
+| `arrowClass?` | `string` | `-` | Class CSS kustom untuk elemen panah (arrow). |
+| `arrowStyle?` | `UiProps` | `-` | Style kustom untuk elemen panah (arrow) (UiProps). |
+| `onOpenChange?` | `(open: boolean) => void` | `-` | Callback saat status open berubah. |
+| `children?` | `any` | `-` | Elemen pemicu (trigger) yang dibungkus oleh tooltip. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import React from "react";
+import Tooltip from "@ttdk-design-system/library-react/web/tooltip";
+import Button from "@ttdk-design-system/library-react/button";
+import "@ttdk-design-system/library-react/web/tooltip/tooltip.css";
+import "@ttdk-design-system/library-react/button/button.css";
+
+export function Example() {
+  return (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+        <Button variant="outline">Salin</Button>
+      </Tooltip>
+      <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+        <Button variant="primary">Kirim Resep</Button>
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Tooltip from "@ttdk-design-system/library-vue/web/tooltip";
+import Button from "@ttdk-design-system/library-vue/button";
+import "@ttdk-design-system/library-vue/web/tooltip/tooltip.css";
+import "@ttdk-design-system/library-vue/button/button.css";
+</script>
+
+<template>
+  <div style="display: flex; gap: 16px; align-items: center;">
+    <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+      <Button variant="outline">Salin</Button>
+    </Tooltip>
+    <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+      <Button variant="primary">Kirim Resep</Button>
+    </Tooltip>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Tooltip from "@ttdk-design-system/library-svelte/web/tooltip";
+  import Button from "@ttdk-design-system/library-svelte/button";
+  import "@ttdk-design-system/library-svelte/web/tooltip/tooltip.css";
+  import "@ttdk-design-system/library-svelte/button/button.css";
+</script>
+
+<div style="display: flex; gap: 16px; align-items: center;">
+  <Tooltip text="Salin riwayat rekam medis" placement="top" kbd="⌘C">
+    <Button variant="outline">Salin</Button>
+  </Tooltip>
+  <Tooltip text="Kirim resep digital ke apotek" placement="bottom">
+    <Button variant="primary">Kirim Resep</Button>
+  </Tooltip>
+</div>
+```

package/src/web/tooltip/index.ts

@@ -0,0 +1,3 @@
+export { default } from './tooltip';
+export { default as Tooltip } from './tooltip';
+export type { TooltipProps, TooltipPlacement, TooltipUiProps } from './tooltip'