@alpic-ai/ui 0.0.0-dev.4a35dc7 → 0.0.0-dev.85c8341

package/src/stories/accordion-card.stories.tsx

@@ -0,0 +1,53 @@
+import type { Story } from "@ladle/react";
+import {
+  AccordionCard,
+  AccordionCardContent,
+  AccordionCardHeader,
+  AccordionCardTitle,
+} from "../components/accordion-card";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6 max-w-md">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default (collapsed)</p>
+      <AccordionCard>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Logs</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>Content inside the accordion card.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default open</p>
+      <AccordionCard defaultOpen>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Build settings</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>
+          This card starts open. The chevron rotates to indicate the open state.
+        </AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Without title component</p>
+      <AccordionCard>
+        <AccordionCardHeader>
+          <span className="type-text-sm font-medium">Environment Variables</span>
+        </AccordionCardHeader>
+        <AccordionCardContent>Header text can be any element, not just AccordionCardTitle.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <AccordionCard disabled>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Disabled card</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>Cannot be opened.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+  </div>
+);

package/src/stories/accordion.stories.tsx

@@ -0,0 +1,65 @@
+import type { Story } from "@ladle/react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/accordion";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-10 max-w-md">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Single (collapsible)</p>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>What is Alpic?</AccordionTrigger>
+          <AccordionContent>
+            Alpic is a multi-tenant SaaS platform for deploying MCP servers. It handles infrastructure, scaling, and
+            distribution so you can focus on building.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>How do I deploy?</AccordionTrigger>
+          <AccordionContent>
+            Use the Alpic CLI to deploy your MCP server with a single command. The platform handles containerization,
+            routing, and scaling automatically.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>What languages are supported?</AccordionTrigger>
+          <AccordionContent>
+            Any language that can run in a container. TypeScript, Python, Go, Rust, and more are all supported out of
+            the box with pre-built runtime images.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Multiple</p>
+      <Accordion type="multiple" defaultValue={["item-1", "item-3"]}>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>First item (open by default)</AccordionTrigger>
+          <AccordionContent>Content for the first item. Multiple items can be open at the same time.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Second item</AccordionTrigger>
+          <AccordionContent>Content for the second item.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Third item (open by default)</AccordionTrigger>
+          <AccordionContent>Content for the third item.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Enabled item</AccordionTrigger>
+          <AccordionContent>This item can be toggled.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2" disabled>
+          <AccordionTrigger>Disabled item</AccordionTrigger>
+          <AccordionContent>This content cannot be reached.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  </div>
+);

package/src/stories/alert.stories.tsx

@@ -0,0 +1,58 @@
+import type { Story } from "@ladle/react";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle, ErrorAlert, WarningAlert } from "../components/alert";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-4 max-w-xl p-6">
+    <p className="type-text-xs font-medium text-subtle-foreground">Default</p>
+    <Alert>
+      <Info />
+      <AlertTitle>Best on desktop</AlertTitle>
+      <AlertDescription>
+        This site isn't optimised for small screens. For the best experience we recommend using a desktop or tablet.
+      </AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Destructive</p>
+    <Alert variant="destructive">
+      <AlertCircle />
+      <AlertTitle>Clone failed</AlertTitle>
+      <AlertDescription>Unable to clone the repository. Check your credentials and try again.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Warning</p>
+    <Alert variant="warning">
+      <AlertTriangle />
+      <AlertTitle>API key expiring soon</AlertTitle>
+      <AlertDescription>Your API key expires in 3 days. Rotate it to avoid service interruption.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Success</p>
+    <Alert variant="success">
+      <CheckCircle2 />
+      <AlertTitle>Deployment complete</AlertTitle>
+      <AlertDescription>Your project was deployed successfully and is now live.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Description only (no title)</p>
+    <Alert variant="destructive">
+      <AlertCircle />
+      <AlertDescription>
+        This is the only time you'll be able to see this API key. Make sure to copy it and store it securely.
+      </AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">ErrorAlert (pre-composed)</p>
+    <ErrorAlert />
+
+    <p className="type-text-xs font-medium text-subtle-foreground">ErrorAlert (custom)</p>
+    <ErrorAlert title="Error loading projects" description="Failed to fetch your projects. Please refresh the page." />
+
+    <p className="type-text-xs font-medium text-subtle-foreground">WarningAlert</p>
+    <WarningAlert
+      title="Save your API key"
+      description="This is the only time you'll be able to see this API key. Make sure to copy it and store it securely."
+    />
+  </div>
+);

package/src/stories/attachment-tile.stories.tsx

@@ -0,0 +1,37 @@
+import type { Story } from "@ladle/react";
+import { AttachmentTile } from "../components/attachment-tile";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-10 p-10">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Image attachment (with remove)</p>
+      <div className="flex gap-3">
+        <AttachmentTile
+          src="https://picsum.photos/seed/a/200/200"
+          isImage
+          onRemove={() => alert("Remove clicked")}
+          onClick={() => alert("Preview clicked")}
+        />
+        <AttachmentTile
+          src="https://picsum.photos/seed/b/200/200"
+          isImage
+          onRemove={() => alert("Remove clicked")}
+          onClick={() => alert("Preview clicked")}
+        />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">File attachment (fallback icon)</p>
+      <AttachmentTile onRemove={() => alert("Remove clicked")} onClick={() => alert("Preview clicked")} />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Read-only (no remove button)</p>
+      <div className="flex gap-3">
+        <AttachmentTile src="https://picsum.photos/seed/c/200/200" isImage />
+        <AttachmentTile />
+      </div>
+    </div>
+  </div>
+);

package/src/stories/avatar.stories.tsx

@@ -0,0 +1,54 @@
+import type { Story } from "@ladle/react";
+import { Avatar, AvatarFallback, AvatarImage, AvatarLabelGroup } from "../components/avatar";
+
+const DEMO_SRC = "https://i.pravatar.cc/150";
+const SIZES = ["xs", "sm", "md", "lg", "xl"] as const;
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-8 p-6 bg-background">
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Sizes — with image</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size}>
+            <AvatarImage src={DEMO_SRC} alt="User" />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Sizes — fallback (no image)</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size}>
+            <AvatarFallback>OR</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Online status indicator</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size} status="online">
+            <AvatarImage src={DEMO_SRC} alt="User" />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Label group</p>
+      <div className="flex flex-col gap-4">
+        <AvatarLabelGroup size="sm" src={DEMO_SRC} name="Alice Martin" label="alice@example.com" />
+        <AvatarLabelGroup size="md" src={DEMO_SRC} name="Bob Dupont" label="bob@example.com" />
+        <AvatarLabelGroup size="md" src={DEMO_SRC} name="Charly Bernard" label="charly@example.com" status="online" />
+        <AvatarLabelGroup size="md" name="Daniel Wilson" label="daniel@example.com" />
+      </div>
+    </div>
+  </div>
+);

package/src/stories/badge.stories.tsx

@@ -0,0 +1,50 @@
+import type { Story } from "@ladle/react";
+import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
+
+import { Badge } from "../components/badge";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Medium (default)</p>
+      <div className="flex items-center gap-2">
+        <Badge variant="primary">Primary</Badge>
+        <Badge>Secondary</Badge>
+        <Badge variant="success">
+          <CheckCircle2 />
+          Success
+        </Badge>
+        <Badge variant="warning">
+          <AlertTriangle />
+          Warning
+        </Badge>
+        <Badge variant="error">
+          <XCircle />
+          Error
+        </Badge>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Small</p>
+      <div className="flex items-center gap-2">
+        <Badge size="sm" variant="primary">
+          Primary
+        </Badge>
+        <Badge size="sm">Secondary</Badge>
+        <Badge size="sm" variant="success">
+          <CheckCircle2 />
+          Success
+        </Badge>
+        <Badge size="sm" variant="warning">
+          <AlertTriangle />
+          Warning
+        </Badge>
+        <Badge size="sm" variant="error">
+          <XCircle />
+          Error
+        </Badge>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/breadcrumb.stories.tsx

@@ -0,0 +1,107 @@
+import type { Story } from "@ladle/react";
+import { Home } from "lucide-react";
+import { useState } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbChevron,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../components/breadcrumb";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/dropdown-menu";
+
+const TREE: Record<string, string[]> = {
+  Home: ["Projects", "Settings", "Billing"],
+  Projects: ["my-mcp-server", "weather-api", "slack-bot"],
+  "my-mcp-server": ["Deployments", "Logs", "Environment"],
+};
+
+export const AllVariants: Story = () => {
+  const [trail, setTrail] = useState(["Home", "Projects", "my-mcp-server"]);
+
+  function handleSelect(index: number, option: string) {
+    setTrail([...trail.slice(0, index + 1), option]);
+  }
+
+  return (
+    <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">
+          Interactive — click items to navigate, click chevrons for dropdown
+        </p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            {trail.map((page, index) => {
+              const isLast = index === trail.length - 1;
+              const children = TREE[page];
+              return (
+                <li key={page} className="contents">
+                  {index > 0 && <BreadcrumbSeparator />}
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <BreadcrumbItem className="cursor-pointer focus-visible:ring-2 focus-visible:ring-ring outline-none">
+                        {isLast ? (
+                          <BreadcrumbPage>{page}</BreadcrumbPage>
+                        ) : (
+                          <span className="type-text-sm font-medium text-subtle-foreground">{page}</span>
+                        )}
+                        {children && <BreadcrumbChevron />}
+                      </BreadcrumbItem>
+                    </DropdownMenuTrigger>
+                    {children && (
+                      <DropdownMenuContent align="start">
+                        {children.map((child) => (
+                          <DropdownMenuItem key={child} onSelect={() => handleSelect(index, child)}>
+                            {child}
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    )}
+                  </DropdownMenu>
+                </li>
+              );
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">With home icon (static)</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">
+                <Home className="size-5" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>my-mcp-server</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Simple — two levels</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>my-mcp-server</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </div>
+  );
+};