gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/sidebar.tsx

@@ -10,7 +10,7 @@ import {
 } from "../../components/micro/sidebar";
 import {
   DocsP,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
@@ -20,12 +20,8 @@ function SidebarMicroShowcase() {
     useSidebarToggle("expanded");
 
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Dumb Component Architecture"
-        description="Sidebar không có transition width, sử dụng display: none để ẩn ngay lập tức, không gây hiệu ứng giật khung."
-        fullWidth
-        codeString={`const { sidebarRef, toggleSidebar, defaultState } = useSidebarToggle("expanded");
+    <div className="space-y-10">
+      <ShowcaseExample title="Dumb Component Architecture" description="Sidebar không có transition width, sử dụng display: none để ẩn ngay lập tức, không gây hiệu ứng giật khung." code={`const { sidebarRef, toggleSidebar, defaultState } = useSidebarToggle("expanded");
 
 return (
   <div className="flex h-[500px] w-full">
@@ -46,60 +42,58 @@ return (
       <button onClick={toggleSidebar}>Toggle Sidebar</button>
     </main>
   </div>
-);`}
-      >
-        <div className="rounded-xl border border-border overflow-hidden flex h-[500px] w-full bg-background">
-          <Sidebar
-            ref={sidebarRef}
-            defaultState={defaultState}
-            expandedWidth={300}
-          >
-            {/* Logo */}
-            <SidebarLogo icon={<Package2Icon />} text="Acme Corp" />
+);`} preview={
+                  <>
+          <div className="rounded-xl border border-border overflow-hidden flex h-[500px] w-full bg-background">
+                    <Sidebar
+                      ref={sidebarRef}
+                      defaultState={defaultState}
+                      expandedWidth={300}
+                    >
+                      <SidebarLogo icon={<Package2Icon />} text="Acme Corp" />
 
-            {/* Menu chính */}
-            <div className="flex-1 py-2 flex flex-col gap-4">
-              <div className="flex flex-col gap-1">
-                <SidebarLabel icon={<FolderIcon />} text="Projects" />
-                <SidebarMenuItemList>
-                  <SidebarMenuItem text="Active Projects" />
-                  <SidebarMenuItem text="Archived Projects" />
-                  <SidebarMenuItem text="Templates" />
-                </SidebarMenuItemList>
-              </div>
+                      <div className="flex-1 py-2 flex flex-col gap-4">
+                        <div className="flex flex-col gap-1">
+                          <SidebarLabel icon={<FolderIcon />} text="Projects" />
+                          <SidebarMenuItemList>
+                            <SidebarMenuItem text="Active Projects" />
+                            <SidebarMenuItem text="Archived Projects" />
+                            <SidebarMenuItem text="Templates" />
+                          </SidebarMenuItemList>
+                        </div>
 
-              <div className="flex flex-col gap-1">
-                <SidebarLabel icon={<UserIcon />} text="Team" />
-                <SidebarMenuItemList>
-                  <SidebarMenuItem text="Members" />
-                  <SidebarMenuItem text="Permissions" />
-                </SidebarMenuItemList>
-              </div>
-            </div>
+                        <div className="flex flex-col gap-1">
+                          <SidebarLabel icon={<UserIcon />} text="Team" />
+                          <SidebarMenuItemList>
+                            <SidebarMenuItem text="Members" />
+                            <SidebarMenuItem text="Permissions" />
+                          </SidebarMenuItemList>
+                        </div>
+                      </div>
 
-            {/* Footer */}
-            <div className="p-2 border-t border-sidebar-border mt-auto">
-              <SidebarLabel icon={<SettingsIcon />} text="Settings" />
-            </div>
-          </Sidebar>
+                      <div className="p-2 border-t border-sidebar-border mt-auto">
+                        <SidebarLabel icon={<SettingsIcon />} text="Cài đặt" />
+                      </div>
+                    </Sidebar>
 
-          <main className="flex-1 flex flex-col bg-muted/10 p-6">
-            <h1 className="text-xl font-bold">Main Application</h1>
-            <p className="text-muted-foreground mt-4">
-              Hãy bấm menu State ở phía trên cùng, hoặc bấm nút Toggle bên dưới
-              để chuyển qua lại giữa Expanded và Collapsed.
-            </p>
-            <div className="mt-6">
-              <button
-                className="px-4 py-2 bg-primary text-primary-foreground rounded-md shadow hover:bg-primary/90 transition-colors"
-                onClick={toggleSidebar}
-              >
-                Toggle Sidebar (Direct DOM Mutation)
-              </button>
-            </div>
-          </main>
-        </div>
-      </ExampleSection>
+                    <main className="flex-1 flex flex-col bg-muted/10 p-6">
+                      <h1 className="text-xl font-bold">Main Application</h1>
+                      <p className="text-muted-foreground mt-4">
+                        Hãy bấm menu State ở phía trên cùng, hoặc bấm nút Toggle bên dưới
+                        để chuyển qua lại giữa Expanded và Collapsed.
+                      </p>
+                      <div className="mt-6">
+                        <button
+                          className="px-4 py-2 bg-primary text-primary-foreground rounded-md shadow hover:bg-primary/90 transition-colors"
+                          onClick={toggleSidebar}
+                        >
+                          Toggle Sidebar (Direct DOM Mutation)
+                        </button>
+                      </div>
+                    </main>
+                  </div>
+                  </>
+                } />
     </div>
   );
 }
@@ -109,7 +103,7 @@ export default function SidebarShowcase() {
     <Showcase
       title="Sidebar (Ultra Primitive)"
       description="Sidebar nguyên thuỷ nhất, chỉ nhận context state, CSS thuần tuý đóng mở tức thì."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             Sidebar tối giản chỉ dùng CSS và DOM attribute để chuyển trạng thái
@@ -118,7 +112,7 @@ export default function SidebarShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[{ label: "Micro (Primitive)", content: <SidebarMicroShowcase /> }]}
+      micro={{ content: <SidebarMicroShowcase /> }}
     />
   );
 }

package/src/dev/showcase/skeleton.tsx

@@ -4,45 +4,36 @@ import {
   DocsH3,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 1: Micro Content (Only Micro exists)
-// ──────────────────────────────────────────────────────────
 function SkeletonMicroShowcase() {
   return (
-    <div className="space-y-10 mt-6">
-      <ExampleSection
-        label="Hình dáng cơ bản (Basic Shapes)"
-        description="Thay đổi hình dạng thông qua các class Tailwind: w-..., h-..., rounded-full, v.v."
-        fullWidth
-        codeString={`<div className="flex flex-wrap items-center gap-6 w-full p-4 border border-border rounded-lg bg-card">
+    <div className="space-y-10">
+      <ShowcaseExample title="Hình dáng cơ bản (Basic Shapes)" description="Thay đổi hình dạng thông qua các class Tailwind: w-..., h-..., rounded-full, v.v." code={`<div className="flex flex-wrap items-center gap-6 w-full p-4 border border-border rounded-lg bg-card">
     <Skeleton className="h-4 w-48" />
     <Skeleton className="h-4 w-32" />
     <Skeleton className="h-4 w-64" />
     <Skeleton className="size-12 rounded-full" />
     <Skeleton className="h-24 w-40 rounded-xl" />
     <Skeleton className="h-10 w-24 rounded-md" />
-  </div>`}
-      >
-        <div className="flex flex-wrap items-center gap-6 w-full p-4 border border-border rounded-lg bg-card">
-          <Skeleton className="h-4 w-48" />
-          <Skeleton className="h-4 w-32" />
-          <Skeleton className="h-4 w-64" />
-          <Skeleton className="size-12 rounded-full" />
-          <Skeleton className="h-24 w-40 rounded-xl" />
-          <Skeleton className="h-10 w-24 rounded-md" />
-        </div>
-      </ExampleSection>
+  </div>`} preview={
+                  <>
+          <div className="flex flex-wrap items-center gap-6 w-full p-4 border border-border rounded-lg bg-card">
+                    <Skeleton className="h-4 w-48" />
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-4 w-64" />
+                    <Skeleton className="size-12 rounded-full" />
+                    <Skeleton className="h-24 w-40 rounded-xl" />
+                    <Skeleton className="h-10 w-24 rounded-md" />
+                  </div>
+                  </>
+                } />
 
       <ExampleGrid>
-        <ExampleSection
-          label="Card Profile"
-          description="Khung xương mô phỏng ảnh đại diện, tên người dùng và số liệu."
-          codeString={`<div className="space-y-6 w-full max-w-sm rounded-lg border border-border bg-card p-4">
+        <ShowcaseExample title="Card Profile" description="Khung xương mô phỏng ảnh đại diện, tên người dùng và số liệu." code={`<div className="space-y-6 w-full max-w-sm rounded-lg border border-border bg-card p-4">
     <div className="flex items-center space-x-4">
       <Skeleton className="h-12 w-12 rounded-full" />
       <div className="space-y-2">
@@ -54,27 +45,25 @@ function SkeletonMicroShowcase() {
       <Skeleton className="h-24 rounded-xl" />
       <Skeleton className="h-24 rounded-xl" />
     </div>
-  </div>`}
-        >
-          <div className="space-y-6 w-full max-w-sm rounded-lg border border-border bg-card p-4">
-            <div className="flex items-center space-x-4">
-              <Skeleton className="h-12 w-12 rounded-full" />
-              <div className="space-y-2">
-                <Skeleton className="h-4 w-[200px]" />
-                <Skeleton className="h-4 w-[150px]" />
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <Skeleton className="h-24 rounded-xl" />
-              <Skeleton className="h-24 rounded-xl" />
-            </div>
-          </div>
-        </ExampleSection>
+  </div>`} preview={
+                      <>
+              <div className="space-y-6 w-full max-w-sm rounded-lg border border-border bg-card p-4">
+                          <div className="flex items-center space-x-4">
+                            <Skeleton className="h-12 w-12 rounded-full" />
+                            <div className="space-y-2">
+                              <Skeleton className="h-4 w-[200px]" />
+                              <Skeleton className="h-4 w-[150px]" />
+                            </div>
+                          </div>
+                          <div className="grid grid-cols-2 gap-4">
+                            <Skeleton className="h-24 rounded-xl" />
+                            <Skeleton className="h-24 rounded-xl" />
+                          </div>
+                        </div>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Article / Blog Post"
-          description="Khung xương mô phỏng các đoạn văn bản (text blocks)."
-          codeString={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
+        <ShowcaseExample title="Article / Blog Post" description="Khung xương mô phỏng các đoạn văn bản (text blocks)." code={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
     <Skeleton className="h-6 w-3/4" />
     <Skeleton className="h-4 w-full" />
     <Skeleton className="h-4 w-full" />
@@ -83,26 +72,24 @@ function SkeletonMicroShowcase() {
     <Skeleton className="h-4 w-full" />
     <Skeleton className="h-4 w-4/5" />
     <Skeleton className="h-4 w-2/3" />
-  </div>`}
-        >
-          <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
-            <Skeleton className="h-6 w-3/4" />
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-5/6" />
-            <div className="pt-2" />
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-4/5" />
-            <Skeleton className="h-4 w-2/3" />
-          </div>
-        </ExampleSection>
+  </div>`} preview={
+                      <>
+              <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
+                          <Skeleton className="h-6 w-3/4" />
+                          <Skeleton className="h-4 w-full" />
+                          <Skeleton className="h-4 w-full" />
+                          <Skeleton className="h-4 w-5/6" />
+                          <div className="pt-2" />
+                          <Skeleton className="h-4 w-full" />
+                          <Skeleton className="h-4 w-4/5" />
+                          <Skeleton className="h-4 w-2/3" />
+                        </div>
+                      </>
+                    } />
       </ExampleGrid>
 
       <ExampleGrid>
-        <ExampleSection
-          label="List Items / Table Rows"
-          description="Sử dụng vòng lặp hoặc nhiều thẻ lặp lại để mô phỏng danh sách."
-          codeString={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
+        <ShowcaseExample title="List Items / Table Rows" description="Sử dụng vòng lặp hoặc nhiều thẻ lặp lại để mô phỏng danh sách." code={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
     <div className="flex items-center space-x-4">
       <Skeleton className="h-8 w-8 rounded-full" />
       <div className="space-y-2">
@@ -124,37 +111,35 @@ function SkeletonMicroShowcase() {
         <Skeleton className="h-3 w-[90px]" />
       </div>
     </div>
-  </div>`}
-        >
-          <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
-            <div className="flex items-center space-x-4">
-              <Skeleton className="h-8 w-8 rounded-full" />
-              <div className="space-y-2">
-                <Skeleton className="h-3 w-[180px]" />
-                <Skeleton className="h-3 w-[100px]" />
-              </div>
-            </div>
-            <div className="flex items-center space-x-4">
-              <Skeleton className="h-8 w-8 rounded-full" />
-              <div className="space-y-2">
-                <Skeleton className="h-3 w-[150px]" />
-                <Skeleton className="h-3 w-[120px]" />
-              </div>
-            </div>
-            <div className="flex items-center space-x-4">
-              <Skeleton className="h-8 w-8 rounded-full" />
-              <div className="space-y-2">
-                <Skeleton className="h-3 w-[170px]" />
-                <Skeleton className="h-3 w-[90px]" />
-              </div>
-            </div>
-          </div>
-        </ExampleSection>
+  </div>`} preview={
+                      <>
+              <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
+                          <div className="flex items-center space-x-4">
+                            <Skeleton className="h-8 w-8 rounded-full" />
+                            <div className="space-y-2">
+                              <Skeleton className="h-3 w-[180px]" />
+                              <Skeleton className="h-3 w-[100px]" />
+                            </div>
+                          </div>
+                          <div className="flex items-center space-x-4">
+                            <Skeleton className="h-8 w-8 rounded-full" />
+                            <div className="space-y-2">
+                              <Skeleton className="h-3 w-[150px]" />
+                              <Skeleton className="h-3 w-[120px]" />
+                            </div>
+                          </div>
+                          <div className="flex items-center space-x-4">
+                            <Skeleton className="h-8 w-8 rounded-full" />
+                            <div className="space-y-2">
+                              <Skeleton className="h-3 w-[170px]" />
+                              <Skeleton className="h-3 w-[90px]" />
+                            </div>
+                          </div>
+                        </div>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Media / Image Placeholder"
-          description="Khung xương lớn mô phỏng hình ảnh hoặc video player."
-          codeString={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
+        <ShowcaseExample title="Media / Image Placeholder" description="Khung xương lớn mô phỏng hình ảnh hoặc video player." code={`<div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
     <Skeleton className="h-48 w-full rounded-md" />
     <div className="flex justify-between items-center pt-2">
       <div className="space-y-2">
@@ -163,33 +148,31 @@ function SkeletonMicroShowcase() {
       </div>
       <Skeleton className="h-8 w-16 rounded-md" />
     </div>
-  </div>`}
-        >
-          <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
-            <Skeleton className="h-48 w-full rounded-md" />
-            <div className="flex justify-between items-center pt-2">
-              <div className="space-y-2">
-                <Skeleton className="h-4 w-[150px]" />
-                <Skeleton className="h-3 w-[100px]" />
-              </div>
-              <Skeleton className="h-8 w-16 rounded-md" />
-            </div>
-          </div>
-        </ExampleSection>
+  </div>`} preview={
+                      <>
+              <div className="space-y-4 w-full max-w-sm rounded-lg border border-border bg-card p-4">
+                          <Skeleton className="h-48 w-full rounded-md" />
+                          <div className="flex justify-between items-center pt-2">
+                            <div className="space-y-2">
+                              <Skeleton className="h-4 w-[150px]" />
+                              <Skeleton className="h-3 w-[100px]" />
+                            </div>
+                            <Skeleton className="h-8 w-16 rounded-md" />
+                          </div>
+                        </div>
+                      </>
+                    } />
       </ExampleGrid>
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point
-// ──────────────────────────────────────────────────────────
 export default function SkeletonShowcase() {
   return (
     <Showcase
       title="Skeleton"
       description="Thành phần tạo ra hiệu ứng nhấp nháy, mô phỏng bố cục hiển thị để giữ chỗ (placeholder) trong khi chờ dữ liệu đang tải."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsH3>Skeleton (Khung xương)</DocsH3>
           <DocsP>
@@ -200,9 +183,7 @@ export default function SkeletonShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        { label: "Micro (Primitive)", content: <SkeletonMicroShowcase /> },
-      ]}
+      micro={{ content: <SkeletonMicroShowcase /> }}
     />
   );
 }