gladvn 0.2.17 → 0.2.19

package/src/dev/showcase/textarea.tsx

@@ -1,4 +1,5 @@
-import { useDevContext } from "../../dev/components/dev-context";
+import { useState } from "react";
+
 import { TextareaPreset } from "../../components/macro/textarea-preset";
 import {
   Field,
@@ -13,6 +14,7 @@ import {
   InputGroupTextarea,
 } from "../../components/micro/input-group";
 import { Textarea } from "../../components/micro/textarea";
+import { useDevContext } from "../../dev/components/dev-context";
 import {
   DocsCode,
   DocsH3,
@@ -23,7 +25,6 @@ import {
   ShowcaseDocs,
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
-import { useState } from "react";
 
 // ──────────────────────────────────────────────────────────
 // SECTION 1: Macro Content
@@ -39,12 +40,11 @@ function TextareaMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Tiêu chuẩn"
           description="Trường văn bản nhiều dòng với nhãn và mô tả."
           codeString={`<TextareaPreset
-  label="Phản hồi (Feedback)"
-  description="Đóng góp ý kiến của bạn về sản phẩm."
-  placeholder="Viết phản hồi..."
-  className="w-full"
-/>
-`}
+    label="Phản hồi (Feedback)"
+    description="Đóng góp ý kiến của bạn về sản phẩm."
+    placeholder="Viết phản hồi..."
+    className="w-full"
+  />`}
         >
           <TextareaPreset
             label="Phản hồi (Feedback)"
@@ -59,13 +59,12 @@ function TextareaMacroShowcase({ globalSize }: { globalSize: Size }) {
           label="Lỗi xác thực (Validation Error)"
           description="Hiển thị thông báo lỗi khi đầu vào không hợp lệ."
           codeString={`<TextareaPreset
-  label="Khiếu nại"
-  placeholder="Mô tả vấn đề..."
-  errorMessage="Vui lòng cung cấp ít nhất 20 ký tự để chúng tôi hỗ trợ tốt hơn."
-  className="w-full"
-  rows={3}
-/>
-`}
+    label="Khiếu nại"
+    placeholder="Mô tả vấn đề..."
+    errorMessage="Vui lòng cung cấp ít nhất 20 ký tự để chúng tôi hỗ trợ tốt hơn."
+    className="w-full"
+    rows={3}
+  />`}
         >
           <TextareaPreset
             label="Khiếu nại"
@@ -82,18 +81,18 @@ function TextareaMacroShowcase({ globalSize }: { globalSize: Size }) {
         <ExampleSection
           label="Giới hạn ký tự (Character Count)"
           description="Sử dụng React state và slot description để đếm ngược số ký tự."
-          codeString={`const [bio, setBio] = useState("");
-const maxLength = 280;
-
-return (
+          codeString={`const [bio, setBio] = useState(""); const maxLength = 280;
+  return (
   <TextareaPreset
     label="Tiểu sử"
     size="\${globalSize}"
     description={
       <span className="flex justify-between">
         <span>Mô tả ngắn gọn về bản thân bạn.</span>
-        <span 
-          data-invalid={bio.length > maxLength ? "" : undefined} 
+        <span
+          data-invalid={
+            bio.length > maxLength ? "" : undefined
+          }
           className="data-invalid:text-destructive data-invalid:font-medium"
         >
           {bio.length}/{maxLength}
@@ -104,10 +103,14 @@ return (
     value={bio}
     onChange={(e) => setBio(e.target.value)}
     maxLength={maxLength}
-    errorMessage={bio.length > maxLength ? \`Vượt quá \${bio.length - maxLength} ký tự.\` : undefined}
+    errorMessage={
+      bio.length > maxLength
+        ? \`Vượt quá \${bio.length - maxLength} ký tự.\`
+        : undefined
+    }
     rows={4}
   />
-);`}
+  );`}
         >
           <TextareaPreset
             label="Tiểu sử"
@@ -141,14 +144,13 @@ return (
           label="Khóa / Bất hoạt (Disabled)"
           description="Trường văn bản không thể tương tác."
           codeString={`<TextareaPreset
-  label="Ghi chú lưu trữ"
-  description="Những ghi chú này ở dạng chỉ đọc."
-  defaultValue="Dự án này đã hoàn thành vào năm 2023. Không thể thay đổi nội dung."
-  disabled
-  className="w-full"
-  rows={4}
-/>
-`}
+    label="Ghi chú lưu trữ"
+    description="Những ghi chú này ở dạng chỉ đọc."
+    defaultValue="Dự án này đã hoàn thành vào năm 2023. Không thể thay đổi nội dung."
+    disabled
+    className="w-full"
+    rows={4}
+  />`}
         >
           <TextareaPreset
             label="Ghi chú lưu trữ"
@@ -167,16 +169,17 @@ return (
         description="Bố cục thực tế trong một form hoàn chỉnh."
         fullWidth
         codeString={`<div className="w-full max-w-lg rounded-xl border border-border bg-card p-5 shadow-sm">
-  <h3 className="mb-4 font-semibold">Tạo Ticket Hỗ Trợ</h3>
-  <TextareaPreset
-    label="Mô tả sự cố"
-    description="Vui lòng cung cấp chi tiết lỗi, các bước tái hiện và cấu hình môi trường."
-    placeholder="Ví dụ: Khi tôi click vào nút Submit, hệ thống báo lỗi 500..."
-    className="w-full"
-    rows={6}
-  />
-</div>
-`}
+    <h3 className="mb-4 font-semibold">
+      Tạo Ticket Hỗ Trợ
+    </h3>
+    <TextareaPreset
+      label="Mô tả sự cố"
+      description="Vui lòng cung cấp chi tiết lỗi, các bước tái hiện và cấu hình môi trường."
+      placeholder="Ví dụ: Khi tôi click vào nút Submit, hệ thống báo lỗi 500..."
+      className="w-full"
+      rows={6}
+    />
+  </div>`}
       >
         <div className="w-full max-w-lg rounded-xl border border-border bg-card p-5 shadow-sm">
           <h3 className="mb-4 font-semibold">Tạo Ticket Hỗ Trợ</h3>
@@ -205,11 +208,10 @@ function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Cơ bản (Primitive)"
           description="Khung nhập văn bản nhiều dòng không có nhãn."
           codeString={`<Textarea
-  rows={4}
-  placeholder="Viết một đoạn văn dài ở đây..."
-  className="w-full"
-/>
-`}
+    rows={4}
+    placeholder="Viết một đoạn văn dài ở đây..."
+    className="w-full"
+  />`}
         >
           <Textarea
             size={globalSize}
@@ -243,21 +245,22 @@ function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="InputGroup + Textarea"
           description="Textarea bên trong InputGroup với Addon. Sử dụng InputGroupTextarea."
           codeString={`<Field className="w-full">
-  <FieldLabel htmlFor="tf-group-textarea">Bình luận</FieldLabel>
-  <FieldContent>
-    <InputGroup className="items-start">
-      <InputGroupAddon align="start" className="mt-2">
-        <InputGroupText>💬</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupTextarea
-        id="tf-group-textarea"
-        rows={3}
-        placeholder="Để lại bình luận của bạn..."
-      />
-    </InputGroup>
-  </FieldContent>
-</Field>
-`}
+    <FieldLabel htmlFor="tf-group-textarea">
+      Bình luận
+    </FieldLabel>
+    <FieldContent>
+      <InputGroup className="items-start">
+        <InputGroupAddon align="start" className="mt-2">
+          <InputGroupText>💬</InputGroupText>
+        </InputGroupAddon>
+        <InputGroupTextarea
+          id="tf-group-textarea"
+          rows={3}
+          placeholder="Để lại bình luận của bạn..."
+        />
+      </InputGroup>
+    </FieldContent>
+  </Field>`}
         >
           <Field size={globalSize} className="w-full">
             <FieldLabel htmlFor="tf-group-textarea">Bình luận</FieldLabel>
@@ -280,19 +283,22 @@ function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
           label="Trạng thái Lỗi thủ công"
           description="Tự gắn aria-invalid vào Textarea và dùng FieldError."
           codeString={`<Field className="w-full">
-  <FieldLabel htmlFor="tf-invalid">Mô tả hệ thống</FieldLabel>
-  <FieldContent>
-    <Textarea
-      id="tf-invalid"
-      rows={3}
-      aria-invalid
-      placeholder="Mô tả..."
-      defaultValue="Quá ngắn"
-    />
-  </FieldContent>
-  <FieldError>Mô tả không đạt đủ độ dài tối thiểu.</FieldError>
-</Field>
-`}
+    <FieldLabel htmlFor="tf-invalid">
+      Mô tả hệ thống
+    </FieldLabel>
+    <FieldContent>
+      <Textarea
+        id="tf-invalid"
+        rows={3}
+        aria-invalid
+        placeholder="Mô tả..."
+        defaultValue="Quá ngắn"
+      />
+    </FieldContent>
+    <FieldError>
+      Mô tả không đạt đủ độ dài tối thiểu.
+    </FieldError>
+  </Field>`}
         >
           <Field size={globalSize} className="w-full">
             <FieldLabel htmlFor="tf-invalid">Mô tả hệ thống</FieldLabel>
@@ -316,53 +322,93 @@ function TextareaMicroShowcase({ globalSize }: { globalSize: Size }) {
         description="So sánh nhanh khi nào dùng Micro và Macro."
         fullWidth
         codeString={`<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-  {/* Story 1: Macro wins */}
-  <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 shrink-0 rounded-full bg-green-500/10 p-1.5 text-green-600">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Story 1 · Dùng Macro</p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">Form lấy thông tin thông thường</h3>
+    {/* Story 1: Macro wins */}
+    <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 shrink-0 rounded-full bg-green-500/10 p-1.5 text-green-600">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+        </span>
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Story 1 · Dùng Macro
+          </p>
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground">
+            Form lấy thông tin thông thường
+          </h3>
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Bạn cần ô nhập có tên trường rõ ràng, có gợi ý nhập
+        liệu. Chỉ việc truyền props vào{" "}
+        <DocsCode>TextareaPreset</DocsCode> là xong.
+      </p>
+      <div className="rounded-lg bg-muted/50 p-3">
+        <TextareaPreset
+          size="sm"
+          label="Mục tiêu nghề nghiệp"
+          description="Tối đa 500 từ."
+          className="w-full"
+        />
       </div>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Bạn cần ô nhập có tên trường rõ ràng, có gợi ý nhập liệu. Chỉ việc truyền props vào <DocsCode>TextareaPreset</DocsCode> là xong.
-    </p>
-    <div className="rounded-lg bg-muted/50 p-3">
-      <TextareaPreset
-        size="sm"
-        label="Mục tiêu nghề nghiệp"
-        description="Tối đa 500 từ."
-        className="w-full"
-      />
-    </div>
-  </div>
 
-  {/* Story 2: Micro wins */}
-  <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
-    <div className="flex items-start gap-3">
-      <span className="mt-0.5 shrink-0 rounded-full bg-blue-500/10 p-1.5 text-blue-600">
-        <svg xmlns="http://www.w3.org/2000/svg" className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-      </span>
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Story 2 · Dùng Micro</p>
-        <h3 className="mt-0.5 text-sm font-semibold text-foreground">Layout kết hợp Addon đặc thù</h3>
+    {/* Story 2: Micro wins */}
+    <div className="rounded-xl border border-border bg-card p-5 flex flex-col gap-4">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 shrink-0 rounded-full bg-blue-500/10 p-1.5 text-blue-600">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="size-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+          </svg>
+        </span>
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Story 2 · Dùng Micro
+          </p>
+          <h3 className="mt-0.5 text-sm font-semibold text-foreground">
+            Layout kết hợp Addon đặc thù
+          </h3>
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground leading-relaxed">
+        Khi bạn cần nối một icon vào ngay bên cạnh khung
+        textarea giống như giao diện chat. Macro không hỗ
+        trợ layout này cho Textarea.
+      </p>
+      <div className="rounded-lg bg-muted/50 p-3">
+        <InputGroup size="sm" className="items-end w-full">
+          <InputGroupTextarea
+            rows={2}
+            placeholder="Tin nhắn..."
+          />
+          <button className="h-full px-3 shrink-0 rounded-r-md border-l border-input bg-muted/50 text-xs font-semibold text-primary transition-colors hover:bg-muted">
+            GỬI
+          </button>
+        </InputGroup>
       </div>
     </div>
-    <p className="text-xs text-muted-foreground leading-relaxed">
-      Khi bạn cần nối một icon vào ngay bên cạnh khung textarea giống như giao diện chat. Macro không hỗ trợ layout này cho Textarea.
-    </p>
-    <div className="rounded-lg bg-muted/50 p-3">
-      <InputGroup size="sm" className="items-end w-full">
-        <InputGroupTextarea rows={2} placeholder="Tin nhắn..." />
-        <button className="h-full px-3 shrink-0 rounded-r-md border-l border-input bg-muted/50 text-xs font-semibold text-primary transition-colors hover:bg-muted">GỬI</button>
-      </InputGroup>
-    </div>
-  </div>
-</div>
-`}
+  </div>`}
       >
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {/* Story 1: Macro wins */}