Storybook (#328)

* feat(docs): add interactive examples and API references for Button, Card, and LoadingFallback components
- Updated dependencies
- Set `retries` to a fixed value of 3 for consistent test retries across environments.
- Increased `timeout` from 60 seconds to 120 seconds to allow more time for tests to complete.
- Reduced `expect` timeout from 10 seconds to 5 seconds for quicker feedback on assertions.

apps/dev-tool/app/components/components/code-card.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Check, Copy } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+
+import { useCopyCode } from '../lib/story-utils';
+
+interface CodeCardProps {
+  title?: string;
+  description?: string;
+  code: string;
+  language?: 'tsx' | 'jsx' | 'javascript' | 'typescript';
+  className?: string;
+}
+
+export function CodeCard({
+  title = 'Generated Code',
+  description = 'Copy and paste this code into your project',
+  code,
+  language = 'tsx',
+  className,
+}: CodeCardProps) {
+  const { copiedCode, copyCode } = useCopyCode();
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle>{title}</CardTitle>
+            <CardDescription>{description}</CardDescription>
+          </div>
+
+          <Button onClick={() => copyCode(code)} size="sm" variant="outline">
+            {copiedCode ? (
+              <Check className="mr-2 h-4 w-4" />
+            ) : (
+              <Copy className="mr-2 h-4 w-4" />
+            )}
+
+            {copiedCode ? 'Copied!' : 'Copy'}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <pre className="bg-muted overflow-x-auto rounded-lg p-4 text-sm">
+          <code>{code}</code>
+        </pre>
+      </CardContent>
+    </Card>
+  );
+}