gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/sonner.tsx

@@ -6,12 +6,11 @@ import {
   DocsCode,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// Simulated async operation for Promise demo
 const mockSave = () =>
   new Promise<{ name: string }>((resolve) =>
     setTimeout(() => resolve({ name: "Sonner" }), 1500),
@@ -22,120 +21,114 @@ const mockFail = () =>
     setTimeout(() => reject(new Error("Server error")), 1500),
   );
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (không export)
-// ──────────────────────────────────────────────────────────
 function SonnerMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      {/* Toaster phải mount ở đây để toast() hoạt động trong showcase */}
+    <div className="space-y-10">
+
       <Toaster position="bottom-right" />
-      {/* ── Toast Types ── */}
-      <ExampleSection
-        label="Loại Toast"
-        description="Năm loại toast cơ bản: default, success, error, warning, info."
-        codeString={`import { toast } from "sonner";
+
+      <ShowcaseExample title="Loại Toast" description="Năm loại toast cơ bản: default, success, error, warning, info." code={`import { toast } from "sonner";
 
 // Default
-toast("Event has been created", {
-  description: "Sunday, December 03, 2023 at 9:00 AM",
-  action: { label: "Undo", onClick: () => console.log("Undo") } });
+toast("Sự kiện đã được tạo", {
+  description: "Chủ nhật, ngày 03 tháng 12 năm 2023 lúc 9:00 sáng",
+  action: { label: "Hoàn tác", onClick: () => console.log("Hoàn tác") } });
 
 // Typed variants
 toast.success("Successfully saved!");
 toast.error("An error occurred.");
 toast.warning("Connection is unstable.");
-toast.info("Update is available.");`}
-      >
-        <div className="flex flex-wrap gap-2">
-          <Button
-            variant="outline"
-            onClick={() =>
-              toast("Event has been created", {
-                description: "Sunday, December 03, 2023 at 9:00 AM",
-                action: { label: "Undo", onClick: () => console.log("Undo") } })
-            }
-          >
-            Default
-          </Button>
-          <Button
-            variant="outline"
-            color="success"
-            onClick={() => toast.success("Successfully saved!")}
-          >
-            Success
-          </Button>
-          <Button
-            variant="outline"
-            color="destructive"
-            onClick={() => toast.error("An error occurred.")}
-          >
-            Error
-          </Button>
-          <Button
-            variant="outline"
-            color="warning"
-            onClick={() => toast.warning("Connection is unstable.")}
-          >
-            Warning
-          </Button>
-          <Button
-            variant="outline"
-            color="info"
-            onClick={() => toast.info("Update is available.")}
-          >
-            Info
-          </Button>
-        </div>
-      </ExampleSection>
+toast.info("Update is available.");`} preview={
+                  <>
+          <div className="flex flex-wrap gap-2">
+                    <Button
+                      variant="outline"
+                      onClick={() =>
+                        toast("Sự kiện đã được tạo", {
+                          description: "Chủ nhật, ngày 03 tháng 12 năm 2023 lúc 9:00 sáng",
+                          action: { label: "Hoàn tác", onClick: () => console.log("Hoàn tác") }
+                        })
+                      }
+                    >
+                      Default
+                    </Button>
+                    <Button
+                      variant="outline"
+                      color="success"
+                      onClick={() => toast.success("Successfully saved!")}
+                    >
+                      Success
+                    </Button>
+                    <Button
+                      variant="outline"
+                      color="destructive"
+                      onClick={() => toast.error("An error occurred.")}
+                    >
+                      Error
+                    </Button>
+                    <Button
+                      variant="outline"
+                      color="warning"
+                      onClick={() => toast.warning("Connection is unstable.")}
+                    >
+                      Warning
+                    </Button>
+                    <Button
+                      variant="outline"
+                      color="info"
+                      onClick={() => toast.info("Update is available.")}
+                    >
+                      Info
+                    </Button>
+                  </div>
+                  </>
+                } />
 
-      {/* ── Mô tả & Action ── */}
-      <ExampleSection
-        label="Mô tả & Action Button"
-        description="Toast kèm description phụ và action button — pattern phổ biến cho undo/redo, navigation."
-        codeString={`toast("File deleted", {
+      <ShowcaseExample title="Mô tả & Action Button" description="Toast kèm description phụ và action button — pattern phổ biến cho undo/redo, navigation." code={`toast("File deleted", {
   description: "draft-v2.docx has been moved to trash.",
   action: {
-    label: "Undo",
+    label: "Hoàn tác",
     onClick: () => console.log("Undo delete") },
   cancel: {
     label: "Dismiss",
-    onClick: () => {} } });`}
-      >
-        <div className="flex flex-wrap gap-2">
-          <Button
-            variant="outline"
-            onClick={() =>
-              toast("File deleted", {
-                description: "draft-v2.docx has been moved to trash.",
-                action: {
-                  label: "Undo",
-                  onClick: () => console.log("Undo delete") },
-                cancel: {
-                  label: "Dismiss",
-                  onClick: () => {} } })
-            }
-          >
-            File Deleted (with Action)
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() =>
-              toast.success("Profile updated", {
-                description: "Your changes have been saved successfully." })
-            }
-          >
-            Success with Description
-          </Button>
-        </div>
-      </ExampleSection>
+    onClick: () => {} } });`} preview={
+                  <>
+          <div className="flex flex-wrap gap-2">
+                    <Button
+                      variant="outline"
+                      onClick={() =>
+                        toast("File deleted", {
+                          description: "draft-v2.docx has been moved to trash.",
+                          action: {
+                            label: "Hoàn tác",
+                            onClick: () => console.log("Undo delete")
+                          },
+                          cancel: {
+                            label: "Dismiss",
+                            onClick: () => { }
+                          }
+                        })
+                      }
+                    >
+                      File Deleted (with Action)
+                    </Button>
+                    <Button
+                      variant="outline"
+                      onClick={() =>
+                        toast.success("Profile updated", {
+                          description: "Your changes have been saved successfully."
+                        })
+                      }
+                    >
+                      Success with Description
+                    </Button>
+                  </div>
+                  </>
+                } />
 
-      {/* ── Promise ── */}
+      { }
       <ExampleGrid>
-        <ExampleSection
-          label="Promise — Thành công"
-          description="toast.promise() tự quản lý trạng thái loading → success/error theo kết quả của Promise."
-          codeString={`const saveData = () =>
+        <ShowcaseExample title="Promise — Thành công" description="toast.promise() tự quản lý trạng thái loading → success/error theo kết quả của Promise." code={`const saveData = () =>
   new Promise<{ name: string }>((resolve) =>
     setTimeout(() => resolve({ name: "Sonner" }), 1500),
   );
@@ -143,25 +136,24 @@ toast.info("Update is available.");`}
 toast.promise(saveData(), {
   loading: "Đang lưu...",
   success: (data) => \`Đã lưu \${data.name} thành công!\`,
-  error: "Lưu thất bại!" });`}
-        >
-          <Button
-            variant="outline"
-            onClick={() =>
-              toast.promise(mockSave(), {
-                loading: "Đang lưu...",
-                success: (data) => `Đã lưu ${data.name} thành công!`,
-                error: "Lưu thất bại!" })
-            }
-          >
-            Promise (Success)
-          </Button>
-        </ExampleSection>
+  error: "Lưu thất bại!" });`} preview={
+                      <>
+              <Button
+                          variant="outline"
+                          onClick={() =>
+                            toast.promise(mockSave(), {
+                              loading: "Đang lưu...",
+                              success: (data) => `Đã lưu ${data.name} thành công!`,
+                              error: "Lưu thất bại!"
+                            })
+                          }
+                        >
+                          Promise (Success)
+                        </Button>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Promise — Thất bại"
-          description="Promise bị reject sẽ tự chuyển sang trạng thái error toast."
-          codeString={`const failRequest = () =>
+        <ShowcaseExample title="Promise — Thất bại" description="Promise bị reject sẽ tự chuyển sang trạng thái error toast." code={`const failRequest = () =>
   new Promise<void>((_, reject) =>
     setTimeout(() => reject(new Error("Server error")), 1500),
   );
@@ -169,157 +161,158 @@ toast.promise(saveData(), {
 toast.promise(failRequest(), {
   loading: "Đang gửi yêu cầu...",
   success: "Yêu cầu thành công!",
-  error: "Yêu cầu thất bại!" });`}
-        >
-          <Button
-            variant="outline"
-            color="destructive"
-            onClick={() =>
-              toast.promise(mockFail(), {
-                loading: "Đang gửi yêu cầu...",
-                success: "Yêu cầu thành công!",
-                error: "Yêu cầu thất bại!" })
-            }
-          >
-            Promise (Error)
-          </Button>
-        </ExampleSection>
+  error: "Yêu cầu thất bại!" });`} preview={
+                      <>
+              <Button
+                          variant="outline"
+                          color="destructive"
+                          onClick={() =>
+                            toast.promise(mockFail(), {
+                              loading: "Đang gửi yêu cầu...",
+                              success: "Yêu cầu thành công!",
+                              error: "Yêu cầu thất bại!"
+                            })
+                          }
+                        >
+                          Promise (Error)
+                        </Button>
+                      </>
+                    } />
       </ExampleGrid>
 
       {/* ── Loading & Dismiss ── */}
-      <ExampleSection
-        label="Loading & Dismiss"
-        description="toast.loading() tạo toast thủ công, sau đó dùng toast.success/error(id) để cập nhật, hoặc toast.dismiss(id) để huỷ."
-        codeString={`// Tạo loading toast và giữ id
+      <ShowcaseExample title="Loading & Dismiss" description="toast.loading() tạo toast thủ công, sau đó dùng toast.success/error(id) để cập nhật, hoặc toast.dismiss(id) để huỷ." code={`
 const toastId = toast.loading("Đang xử lý...");
 
-// Sau khi async xong — cập nhật cùng toast
 setTimeout(() => {
   toast.success("Hoàn tất!", { id: toastId });
 }, 2000);
 
-// Hoặc huỷ thủ công
-toast.dismiss(toastId);`}
-      >
-        <div className="flex flex-wrap gap-2">
-          <Button
-            variant="outline"
-            onClick={() => {
-              const id = toast.loading("Đang xử lý...");
-              setTimeout(() => toast.success("Hoàn tất!", { id }), 2000);
-            }}
-          >
-            Loading → Success (2s)
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() => {
-              const id = toast.loading("Đang tải dữ liệu...");
-              setTimeout(() => toast.error("Mất kết nối!", { id }), 2000);
-            }}
-          >
-            Loading → Error (2s)
-          </Button>
-          <Button
-            variant="outline"
-            color="destructive"
-            onClick={() => toast.dismiss()}
-          >
-            Dismiss All
-          </Button>
-        </div>
-      </ExampleSection>
+toast.dismiss(toastId);`} preview={
+                  <>
+          <div className="flex flex-wrap gap-2">
+                    <Button
+                      variant="outline"
+                      onClick={() => {
+                        const id = toast.loading("Đang xử lý...");
+                        setTimeout(() => toast.success("Hoàn tất!", { id }), 2000);
+                      }}
+                    >
+                      Loading → Success (2s)
+                    </Button>
+                    <Button
+                      variant="outline"
+                      onClick={() => {
+                        const id = toast.loading("Đang tải dữ liệu...");
+                        setTimeout(() => toast.error("Mất kết nối!", { id }), 2000);
+                      }}
+                    >
+                      Loading → Error (2s)
+                    </Button>
+                    <Button
+                      variant="outline"
+                      color="destructive"
+                      onClick={() => toast.dismiss()}
+                    >
+                      Dismiss All
+                    </Button>
+                  </div>
+                  </>
+                } />
 
       {/* ── Position ── */}
-      <ExampleSection
-        label="Position"
-        description="Toaster nhận prop position để xác định vị trí hiển thị — cấu hình một lần ở root layout. Nhấn vào từng vùng để xem toast xuất hiện ở đâu."
-        codeString={`// Trong root layout (app/layout.tsx):
-  <Toaster position="bottom-right" /> // mặc định // Các vị
-  trí hỗ trợ: // "top-left" | "top-center" | "top-right" //
-  "bottom-left" | "bottom-center" | "bottom-right"`}
-      >
-        {/* Visual 3×2 position grid */}
-        <div className="w-full max-w-sm">
-          <p className="mb-3 text-xs text-muted-foreground">
-            Nhấn từng ô để xem toast xuất hiện đúng vị trí tương ứng.
-          </p>
-          <div className="grid grid-cols-3 gap-1.5">
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs"
-              onClick={() =>
-                toast("Toast: top-left", {
-                  description: 'position="top-left"',
-                  position: "top-left" })
-              }
-            >
-              top-left
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs"
-              onClick={() =>
-                toast("Toast: top-center", {
-                  description: 'position="top-center"',
-                  position: "top-center" })
-              }
-            >
-              top-center
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs"
-              onClick={() =>
-                toast("Toast: top-right", {
-                  description: 'position="top-right"',
-                  position: "top-right" })
-              }
-            >
-              top-right
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs"
-              onClick={() =>
-                toast("Toast: bottom-left", {
-                  description: 'position="bottom-left"',
-                  position: "bottom-left" })
-              }
-            >
-              bottom-left
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs"
-              onClick={() =>
-                toast("Toast: bottom-center", {
-                  description: 'position="bottom-center"',
-                  position: "bottom-center" })
-              }
-            >
-              bottom-center
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs"
-              onClick={() =>
-                toast("Toast: bottom-right", {
-                  description: 'position="bottom-right"',
-                  position: "bottom-right" })
-              }
-            >
-              bottom-right
-            </Button>
-          </div>
-        </div>
-      </ExampleSection>
+      <ShowcaseExample title="Position" description="Toaster nhận prop position để xác định vị trí hiển thị — cấu hình một lần ở root layout. Nhấn vào từng vùng để xem toast xuất hiện ở đâu." code={`
+  <Toaster position="bottom-right" /> 
+  trí hỗ trợ: 
+  "bottom-left" | "bottom-center" | "bottom-right"`} preview={
+                  <>
+          {/* Visual 3×2 position grid */}<div className="w-full max-w-sm">
+                    <p className="mb-3 text-xs text-muted-foreground">
+                      Nhấn từng ô để xem toast xuất hiện đúng vị trí tương ứng.
+                    </p>
+                    <div className="grid grid-cols-3 gap-1.5">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-xs"
+                        onClick={() =>
+                          toast("Toast: top-left", {
+                            description: 'position="top-left"',
+                            position: "top-left"
+                          })
+                        }
+                      >
+                        top-left
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-xs"
+                        onClick={() =>
+                          toast("Toast: top-center", {
+                            description: 'position="top-center"',
+                            position: "top-center"
+                          })
+                        }
+                      >
+                        top-center
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-xs"
+                        onClick={() =>
+                          toast("Toast: top-right", {
+                            description: 'position="top-right"',
+                            position: "top-right"
+                          })
+                        }
+                      >
+                        top-right
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-xs"
+                        onClick={() =>
+                          toast("Toast: bottom-left", {
+                            description: 'position="bottom-left"',
+                            position: "bottom-left"
+                          })
+                        }
+                      >
+                        bottom-left
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-xs"
+                        onClick={() =>
+                          toast("Toast: bottom-center", {
+                            description: 'position="bottom-center"',
+                            position: "bottom-center"
+                          })
+                        }
+                      >
+                        bottom-center
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-xs"
+                        onClick={() =>
+                          toast("Toast: bottom-right", {
+                            description: 'position="bottom-right"',
+                            position: "bottom-right"
+                          })
+                        }
+                      >
+                        bottom-right
+                      </Button>
+                    </div>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
@@ -332,7 +325,7 @@ export default function SonnerShowcase() {
     <Showcase
       title="Sonner"
       description="Hệ thống thông báo toast nhẹ, đẹp, và linh hoạt — tích hợp với design system qua CSS Variables."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             <DocsCode>Toaster</DocsCode> là wrapper của thư viện{" "}
@@ -349,7 +342,7 @@ export default function SonnerShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[{ label: "Micro (Primitive)", content: <SonnerMicroShowcase /> }]}
+      micro={{ content: <SonnerMicroShowcase /> }}
     />
   );
 }