Use md-react-preview for documentation

Author: IzumiSy

docs/components/action-panel.md

@@ -15,21 +15,24 @@ import { ActionPanel } from "@tailor-platform/app-shell";
 
 ## Basic Usage
 
-```tsx
+```tsx preview height="350"
+import { ActionPanel } from "@tailor-platform/app-shell";
+import { ReceiptIcon, ExternalLinkIcon } from "lucide-react";
+
 <ActionPanel
   title="Actions"
   actions={[
     {
       key: "create-invoice",
       label: "Create new sales invoice",
       icon: <ReceiptIcon />,
-      onClick: () => openCreateInvoiceModal(),
+      onClick: () => console.log("create invoice"),
     },
     {
       key: "view-docs",
       label: "View documentation",
       icon: <ExternalLinkIcon />,
-      onClick: () => window.open("/docs", "_blank", "noopener,noreferrer"),
+      onClick: () => console.log("view docs"),
     },
   ]}
 />
@@ -67,30 +70,29 @@ import { ActionPanel } from "@tailor-platform/app-shell";
 
 Use parent state to control which row is loading:
 
-```tsx
-const [loadingKey, setLoadingKey] = useState<string | null>(null);
-
-const handleConfirm = async () => {
-  setLoadingKey("confirm");
-  try {
-    await confirmOrder(orderId);
-  } finally {
-    setLoadingKey(null);
-  }
-};
+```tsx preview height="350"
+import { ActionPanel } from "@tailor-platform/app-shell";
+import { CheckIcon, ReceiptIcon } from "lucide-react";
 
 <ActionPanel
   title="Actions"
   actions={[
+    {
+      key: "create-order",
+      label: "Create new order",
+      icon: <ReceiptIcon />,
+      onClick: () => console.log("create new order"),
+      disabled: true
+    },
     {
       key: "confirm",
       label: "Confirm order",
       icon: <CheckIcon />,
-      onClick: handleConfirm,
-      loading: loadingKey === "confirm",
+      onClick: () => console.log("confirm order"),
+      loading: true,
     },
   ]}
-/>;
+/>
 ```
 
 ## Backend-Driven Pattern

docs/components/activity-card.md

@@ -22,31 +22,32 @@ Use `ActivityCardItem` for each item in the standalone API. Use `ActivityCardBas
 
 ## Basic Usage
 
-```tsx
-const items = [
-  {
-    id: "1",
-    actor: { name: "Hanna", avatarUrl: "/avatars/hanna.jpg" }, // avatarUrl is optional
-    description: "changed the status from DRAFT to CONFIRMED",
-    timestamp: new Date("2025-03-21T09:00:00"),
-  },
-  {
-    id: "2",
-    actor: { name: "Pradeep Kumar" },
-    description: "created this PO",
-    timestamp: new Date("2025-03-21T15:16:00"),
-  },
-  {
-    id: "3",
-    // no actor — system event with no specific subject
-    description: "Status automatically changed to EXPIRED",
-    timestamp: new Date("2025-03-20T10:00:00"),
-  },
-];
-
-export function DocumentUpdates() {
-  return <ActivityCard items={items} title="Updates" />;
-}
+```tsx preview
+import { ActivityCard } from "@tailor-platform/app-shell";
+
+<ActivityCard 
+  title="Updates" 
+  items={[
+    {
+      id: "1",
+      actor: { name: "Hanna", avatarUrl: "/avatars/hanna.jpg" }, // avatarUrl is optional
+      description: "changed the status from DRAFT to CONFIRMED",
+      timestamp: new Date("2025-03-21T09:00:00"),
+    },
+    {
+      id: "2",
+      actor: { name: "Pradeep Kumar" },
+      description: "created this PO",
+      timestamp: new Date("2025-03-21T15:16:00"),
+    },
+    {
+      id: "3",
+      // no actor — system event with no specific subject
+      description: "Status automatically changed to EXPIRED",
+      timestamp: new Date("2025-03-20T10:00:00"),
+    },
+  ]} 
+/>
 ```
 
 ## Overflow and dialog
@@ -85,10 +86,33 @@ Each activity must include: `id`, `description`, `timestamp` (Date or string). O
 
 Use the compound API when you need fully custom item rendering — custom icons, links, badges, or mixed item kinds. Items still must satisfy `ActivityCardBaseItem` (`id` + `timestamp`). You extend `ActivityCardBaseItem` with any additional fields you need.
 
-### Import
+### Example
 
-```tsx
+```tsx preview
 import { ActivityCard, type ActivityCardBaseItem } from "@tailor-platform/app-shell";
+
+<ActivityCard.Root 
+  items={[
+    { id: "1", timestamp: new Date(), kind: "approval", label: "PO approved" },
+    { id: "2", timestamp: new Date(), kind: "update", message: "Status changed to CONFIRMED" },
+  ]} 
+  title="Updates" 
+  groupBy="day"
+>
+  <ActivityCard.Items>
+    {(item) =>
+      item.kind === "approval" ? (
+        <ActivityCard.Item>
+          <p style={{ color: "green" }}>{item.label}</p>
+        </ActivityCard.Item>
+      ) : (
+        <ActivityCard.Item>
+          <p style={{ fontWeight: "bold" }}>{item.message}</p>
+        </ActivityCard.Item>
+      )
+    }
+  </ActivityCard.Items>
+</ActivityCard.Root>
 ```
 
 ### Parts
@@ -119,39 +143,6 @@ import { ActivityCard, type ActivityCardBaseItem } from "@tailor-platform/app-sh
 | `children`  | `React.ReactNode` | -       | Content for the item row (text, badges, links, etc.).                                      |
 | `className` | `string`          | -       | Additional CSS classes.                                                                    |
 
-### Example
-
-```tsx
-import { ActivityCard, type ActivityCardBaseItem } from "@tailor-platform/app-shell";
-
-interface MyItem extends ActivityCardBaseItem {
-  kind: "approval" | "update";
-  label?: string;
-  message?: string;
-}
-
-const items: MyItem[] = [
-  { id: "1", timestamp: new Date(), kind: "approval", label: "PO approved" },
-  { id: "2", timestamp: new Date(), kind: "update", message: "Status changed to CONFIRMED" },
-];
-
-<ActivityCard.Root items={items} title="Updates" groupBy="day">
-  <ActivityCard.Items<MyItem>>
-    {(item) =>
-      item.kind === "approval" ? (
-        <ActivityCard.Item indicator={<ApprovedIcon />}>
-          <p>{item.label}</p>
-        </ActivityCard.Item>
-      ) : (
-        <ActivityCard.Item>
-          <p>{item.message}</p>
-        </ActivityCard.Item>
-      )
-    }
-  </ActivityCard.Items>
-</ActivityCard.Root>;
-```
-
 ---
 
 ## See also

docs/components/autocomplete.md

@@ -15,7 +15,9 @@ import { Autocomplete } from "@tailor-platform/app-shell";
 
 ## Basic Usage
 
-```tsx
+```tsx preview align="start"
+import { Autocomplete } from "@tailor-platform/app-shell";
+
 <Autocomplete
   items={["Apple", "Banana", "Cherry"]}
   placeholder="Type a fruit..."
@@ -60,13 +62,16 @@ interface ItemGroup<T> {
 
 ## Grouped Suggestions
 
-```tsx
-const cities = [
-  { label: "Japan", items: ["Tokyo", "Osaka", "Kyoto"] },
-  { label: "France", items: ["Paris", "Lyon", "Marseille"] },
-];
+```tsx preview align="start" height="350"
+import { Autocomplete } from "@tailor-platform/app-shell";
 
-<Autocomplete items={cities} placeholder="Search cities..." />;
+<Autocomplete 
+  placeholder="Search cities..."
+  items={[
+    { label: "Japan", items: ["Tokyo", "Osaka", "Kyoto"] },
+    { label: "France", items: ["Paris", "Lyon", "Marseille"] },
+  ]}  
+/>
 ```
 
 ## Object Items with mapItem

docs/components/avatar.md

@@ -15,7 +15,9 @@ import { Avatar } from "@tailor-platform/app-shell";
 
 ## Basic usage
 
-```tsx
+```tsx preview
+import { Avatar } from "@tailor-platform/app-shell";
+
 <Avatar.Root>
   <Avatar.Image src="/user.png" alt="Jane Doe" />
   <Avatar.Fallback>JD</Avatar.Fallback>
@@ -42,7 +44,9 @@ import { Avatar } from "@tailor-platform/app-shell";
 
 ## Sizes
 
-```tsx
+```tsx preview wrap="row"
+import { Avatar } from "@tailor-platform/app-shell";
+
 <Avatar.Root size="sm">
   <Avatar.Fallback>AB</Avatar.Fallback>
 </Avatar.Root>

docs/components/badge.md

@@ -15,7 +15,9 @@ import { Badge } from "@tailor-platform/app-shell";
 
 ## Basic Usage
 
-```tsx
+```tsx preview wrap="row"
+import { Badge } from "@tailor-platform/app-shell";
+
 <Badge>Default</Badge>
 <Badge variant="success">Success</Badge>
 <Badge variant="warning">Warning</Badge>
@@ -28,7 +30,9 @@ import { Badge } from "@tailor-platform/app-shell";
 
 Filled background variants for high emphasis:
 
-```tsx
+```tsx preview wrap="row"
+import { Badge } from "@tailor-platform/app-shell";
+
 <Badge variant="default">Default</Badge>
 <Badge variant="success">Approved</Badge>
 <Badge variant="warning">Pending</Badge>
@@ -40,7 +44,9 @@ Filled background variants for high emphasis:
 
 Outlined badges with colored status dots for subtle emphasis:
 
-```tsx
+```tsx preview wrap="row"
+import { Badge } from "@tailor-platform/app-shell";
+
 <Badge variant="outline-success">Active</Badge>
 <Badge variant="outline-warning">In Progress</Badge>
 <Badge variant="outline-error">Failed</Badge>
@@ -113,7 +119,8 @@ const priorities = [
 
 ### With Icons
 
-```tsx
+```tsx preview wrap="row"
+import { Badge } from "@tailor-platform/app-shell";
 import { CheckCircle, AlertCircle, XCircle } from "lucide-react";
 
 <div className="astw:flex astw:gap-2">
@@ -155,7 +162,9 @@ function ProductBadge({ product }: { product: Product }) {
 
 ### Custom Styling
 
-```tsx
+```tsx preview
+import { Badge } from "@tailor-platform/app-shell";
+
 <Badge variant="success" className="astw:text-xs astw:px-3 astw:py-1 astw:uppercase">
   Premium
 </Badge>

docs/components/button.md

@@ -15,7 +15,9 @@ import { Button } from "@tailor-platform/app-shell";
 
 ## Basic Usage
 
-```tsx
+```tsx preview wrap="row"
+import { Button } from "@tailor-platform/app-shell";
+
 <Button>Click me</Button>
 <Button variant="outline">Outline</Button>
 <Button variant="destructive">Delete</Button>
@@ -35,7 +37,9 @@ All standard HTML `<button>` props are also accepted.
 
 ## Variants
 
-```tsx
+```tsx preview wrap="row"
+import { Button } from "@tailor-platform/app-shell";
+
 <Button variant="default">Primary Action</Button>
 <Button variant="destructive">Delete</Button>
 <Button variant="outline">Secondary Action</Button>
@@ -46,7 +50,10 @@ All standard HTML `<button>` props are also accepted.
 
 ## Sizes
 
-```tsx
+```tsx preview wrap="row"
+import { Button } from "@tailor-platform/app-shell";
+import { PlusIcon } from "lucide-react";
+
 <Button size="xs">Extra Small</Button>
 <Button size="sm">Small</Button>
 <Button size="default">Default</Button>
@@ -73,7 +80,9 @@ This is the Base UI render pattern — the button's class names and event handle
 
 ### Form Actions
 
-```tsx
+```tsx preview
+import { Button } from "@tailor-platform/app-shell";
+
 <div className="astw:flex astw:gap-2 astw:justify-end">
   <Button variant="outline">Cancel</Button>
   <Button>Save Changes</Button>
@@ -90,7 +99,8 @@ This is the Base UI render pattern — the button's class names and event handle
 
 ### Icon Button
 
-```tsx
+```tsx preview
+import { Button } from "@tailor-platform/app-shell";
 import { PlusIcon } from "lucide-react";
 
 <Button size="icon" variant="outline">
@@ -108,7 +118,7 @@ import { type ButtonProps } from "@tailor-platform/app-shell";
 
 Use `buttonVariants` to apply button styles to non-button elements:
 
-```tsx
+```tsx preview
 import { buttonVariants } from "@tailor-platform/app-shell";
 
 <a href="/orders" className={buttonVariants({ variant: "outline", size: "sm" })}>