@neynar/ui 0.1.1

package/src/components/ui/stories/popover.stories.tsx

@@ -0,0 +1,392 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  Settings,
+  HelpCircle,
+  Info,
+  MoreVertical,
+  Plus,
+  Calendar,
+} from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Label } from "../label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select";
+
+const meta = {
+  title: "Overlays/Popover",
+  component: Popover,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Displays rich content in a portal, triggered by a button. Perfect for forms, help text, or interactive content that doesn't require navigation.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      control: "boolean",
+      description: "Controls the open state of the popover",
+    },
+    defaultOpen: {
+      control: "boolean",
+      description: "The initial open state for uncontrolled usage",
+    },
+    modal: {
+      control: "boolean",
+      description: "Whether the popover should be modal",
+      defaultValue: false,
+    },
+  },
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    defaultOpen: false,
+    modal: false,
+  },
+  render: (args) => (
+    <Popover {...args}>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Settings</h4>
+            <p className="text-sm text-muted-foreground">
+              Configure your preferences and options.
+            </p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid gap-2">
+              <Label htmlFor="theme">Theme</Label>
+              <Select defaultValue="light">
+                <SelectTrigger id="theme">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="light">Light</SelectItem>
+                  <SelectItem value="dark">Dark</SelectItem>
+                  <SelectItem value="system">System</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="language">Language</Label>
+              <Select defaultValue="en">
+                <SelectTrigger id="language">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="en">English</SelectItem>
+                  <SelectItem value="es">Spanish</SelectItem>
+                  <SelectItem value="fr">French</SelectItem>
+                  <SelectItem value="de">German</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <Button size="sm">Save Changes</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-8 place-items-center min-h-[400px]">
+      {/* Positioning variants */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-center">Positioning</h3>
+        <div className="grid grid-cols-2 gap-4">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                Top
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent side="top">
+              <p className="text-sm">Opens on top</p>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                Right
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent side="right">
+              <p className="text-sm">Opens on right</p>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                Bottom
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent side="bottom">
+              <p className="text-sm">Opens on bottom</p>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                Left
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent side="left">
+              <p className="text-sm">Opens on left</p>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+
+      {/* Alignment variants */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-center">Alignment</h3>
+        <div className="grid gap-4">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                Align Start
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="start">
+              <p className="text-sm">Aligned to start</p>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                Align Center
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="center">
+              <p className="text-sm">Aligned to center</p>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                Align End
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end">
+              <p className="text-sm">Aligned to end</p>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+
+      {/* Trigger variants */}
+      <div className="space-y-4 col-span-2">
+        <h3 className="text-sm font-medium text-center">Trigger Types</h3>
+        <div className="flex gap-4 justify-center">
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="default">Default Button</Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <p className="text-sm">Triggered by default button</p>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Info className="h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <p className="text-sm">Triggered by icon button</p>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger className="text-sm text-muted-foreground hover:text-foreground underline cursor-pointer">
+              Text trigger
+            </PopoverTrigger>
+            <PopoverContent>
+              <p className="text-sm">Triggered by text element</p>
+            </PopoverContent>
+          </Popover>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <div className="cursor-pointer rounded-lg border border-dashed border-border p-2 hover:border-foreground text-sm">
+                Custom element
+              </div>
+            </PopoverTrigger>
+            <PopoverContent>
+              <p className="text-sm">Triggered by custom element</p>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-6 p-6 max-w-2xl mx-auto">
+      {/* Form with help popover */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">API Configuration</h3>
+        <div className="grid gap-4">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2">
+              <Label htmlFor="api-key">API Key</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-5 w-5">
+                    <HelpCircle className="h-3 w-3" />
+                    <span className="sr-only">Help</span>
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent side="top" className="w-80">
+                  <div className="space-y-2">
+                    <h4 className="font-medium">What is an API Key?</h4>
+                    <p className="text-sm text-muted-foreground">
+                      An API key is a unique identifier used to authenticate
+                      requests to our API. Keep it secret and don&apos;t share
+                      it publicly.
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      You can generate a new API key from your account settings.
+                    </p>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+            <Input
+              id="api-key"
+              type="password"
+              placeholder="sk-1234567890abcdef..."
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="endpoint">Endpoint URL</Label>
+            <Input id="endpoint" placeholder="https://api.example.com/v1" />
+          </div>
+        </div>
+      </div>
+
+      {/* Data table with action menu */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Recent Deployments</h3>
+        <div className="border rounded-lg">
+          <div className="flex items-center justify-between p-4 border-b">
+            <div>
+              <div className="font-medium">Production Deploy</div>
+              <div className="text-sm text-muted-foreground">
+                main branch • 2 minutes ago
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
+                Success
+              </div>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="ghost" size="icon">
+                    <MoreVertical className="h-4 w-4" />
+                    <span className="sr-only">More options</span>
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-56 p-1">
+                  <div className="grid gap-1">
+                    <Button variant="ghost" size="sm" className="justify-start">
+                      <Calendar className="mr-2 h-4 w-4" />
+                      View logs
+                    </Button>
+                    <Button variant="ghost" size="sm" className="justify-start">
+                      <Plus className="mr-2 h-4 w-4" />
+                      Rollback
+                    </Button>
+                    <Button variant="ghost" size="sm" className="justify-start">
+                      <Settings className="mr-2 h-4 w-4" />
+                      Configure
+                    </Button>
+                    <div className="my-1 h-px bg-border" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="justify-start text-destructive hover:text-destructive"
+                    >
+                      Delete
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between p-4">
+            <div>
+              <div className="font-medium">Staging Deploy</div>
+              <div className="text-sm text-muted-foreground">
+                feature/new-ui • 1 hour ago
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
+                Running
+              </div>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="ghost" size="icon">
+                    <MoreVertical className="h-4 w-4" />
+                    <span className="sr-only">More options</span>
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-56 p-1">
+                  <div className="grid gap-1">
+                    <Button variant="ghost" size="sm" className="justify-start">
+                      <Calendar className="mr-2 h-4 w-4" />
+                      View logs
+                    </Button>
+                    <Button variant="ghost" size="sm" className="justify-start">
+                      <Settings className="mr-2 h-4 w-4" />
+                      Configure
+                    </Button>
+                    <div className="my-1 h-px bg-border" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="justify-start text-destructive hover:text-destructive"
+                    >
+                      Stop deployment
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/ui/stories/progress.stories.tsx

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Progress } from "../progress";
+import { Button } from "../button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+
+const meta = {
+  title: "Data Display/Progress",
+  component: Progress,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A progress bar component built on Radix UI Progress. Displays the completion progress of a task or process with smooth transitions and accessibility features.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+      description: "The progress value from 0 to 100. Undefined shows no progress.",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for styling customization",
+    },
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    value: 60,
+  },
+  render: (args) => (
+    <div className="w-[400px] space-y-4">
+      <Progress {...args} />
+      <div className="text-center text-sm text-muted-foreground">
+        Adjust the progress value using the controls above
+      </div>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-6">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <p className="text-sm font-medium">States</p>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">Empty (0%)</span>
+              <Progress value={0} />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">In Progress (45%)</span>
+              <Progress value={45} />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">Complete (100%)</span>
+              <Progress value={100} />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Sizes</p>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">Extra Small (h-1)</span>
+              <Progress value={60} className="h-1" />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">Default (h-2)</span>
+              <Progress value={60} />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">Large (h-4)</span>
+              <Progress value={60} className="h-4" />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Custom Colors</p>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">Success</span>
+              <Progress value={100} className="[&>div]:bg-green-500" />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">Warning</span>
+              <Progress value={75} className="[&>div]:bg-yellow-500" />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">Danger</span>
+              <Progress value={30} className="[&>div]:bg-red-500" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const InContext: Story = {
+  render: function ProgressInContext() {
+    const [uploadProgress, setUploadProgress] = React.useState(0);
+    const [isUploading, setIsUploading] = React.useState(false);
+    const [currentStep, setCurrentStep] = React.useState(2);
+
+    const simulateUpload = () => {
+      setIsUploading(true);
+      setUploadProgress(0);
+
+      const interval = setInterval(() => {
+        setUploadProgress((prev) => {
+          if (prev >= 100) {
+            clearInterval(interval);
+            setIsUploading(false);
+            return 100;
+          }
+          const increment = Math.random() * 8 + 2;
+          return Math.min(100, prev + increment);
+        });
+      }, 150);
+    };
+
+    const totalSteps = 4;
+    const stepProgress = (currentStep / totalSteps) * 100;
+
+    return (
+      <div className="w-[500px] space-y-6">
+        {/* File Upload Progress */}
+        <Card>
+          <CardHeader>
+            <CardTitle>File Upload</CardTitle>
+            <CardDescription>
+              document.pdf • 2.4 MB
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span>
+                  {isUploading
+                    ? "Uploading..."
+                    : uploadProgress === 100
+                    ? "Upload complete"
+                    : "Ready to upload"}
+                </span>
+                <span className="text-muted-foreground">
+                  {Math.round(uploadProgress)}%
+                </span>
+              </div>
+              <Progress value={uploadProgress} />
+            </div>
+            {!isUploading && uploadProgress !== 100 && (
+              <Button onClick={simulateUpload} className="w-full">
+                Upload File
+              </Button>
+            )}
+            {uploadProgress === 100 && (
+              <Button 
+                variant="outline" 
+                onClick={() => setUploadProgress(0)} 
+                className="w-full"
+              >
+                Upload Another
+              </Button>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Multi-Step Process */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Setup Process</CardTitle>
+            <CardDescription>
+              Complete your account setup
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="font-medium">Step {currentStep} of {totalSteps}</span>
+                <span className="text-muted-foreground">Profile Information</span>
+              </div>
+              <Progress value={stepProgress} />
+            </div>
+            <div className="flex justify-between">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
+                disabled={currentStep === 1}
+              >
+                Previous
+              </Button>
+              <Button
+                size="sm"
+                onClick={() => setCurrentStep(Math.min(totalSteps, currentStep + 1))}
+                disabled={currentStep === totalSteps}
+              >
+                {currentStep === totalSteps ? "Complete" : "Next"}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  },
+};