@neynar/ui 0.1.1

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

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "../skeleton";
+import { Card, CardContent, CardFooter, CardHeader } from "../card";
+
+const meta = {
+  title: "Data Display/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A skeleton component for displaying loading placeholders. Creates animated placeholders that mimic content structure and improve perceived performance during loading states.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for customizing size, shape, and appearance",
+      defaultValue: "h-4 w-[200px]",
+    },
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all skeleton variations and customizations.
+ * Use the controls to experiment with different className combinations.
+ */
+export const Interactive: Story = {
+  args: {
+    className: "h-4 w-[200px]",
+  },
+  render: (args) => <Skeleton {...args} />,
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive playground to experiment with different skeleton sizes, shapes, and styles using the className prop.",
+      },
+    },
+  },
+};
+
+/**
+ * Comprehensive showcase of all available skeleton variants and common use cases.
+ * Demonstrates different shapes, sizes, and composition patterns.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Basic Text Skeletons */}
+      <div className="space-y-3">
+        <h3 className="text-lg font-semibold">Text Content</h3>
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-48" /> {/* Large heading */}
+          <Skeleton className="h-6 w-36" /> {/* Subheading */}
+          <div className="space-y-1">
+            <Skeleton className="h-4 w-full" /> {/* Body text */}
+            <Skeleton className="h-4 w-5/6" />
+            <Skeleton className="h-4 w-4/6" />
+          </div>
+          <Skeleton className="h-3 w-24" /> {/* Caption */}
+        </div>
+      </div>
+
+      {/* Shape Variants */}
+      <div className="space-y-3">
+        <h3 className="text-lg font-semibold">Shape Variants</h3>
+        <div className="flex items-center gap-4">
+          <div className="space-y-2 text-center">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <p className="text-xs text-muted-foreground">Avatar</p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="h-9 w-24 rounded-md" />
+            <p className="text-xs text-muted-foreground">Button</p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="h-5 w-16 rounded-full" />
+            <p className="text-xs text-muted-foreground">Badge</p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="h-10 w-32 rounded-md" />
+            <p className="text-xs text-muted-foreground">Input</p>
+          </div>
+          <div className="space-y-2 text-center">
+            <Skeleton className="h-24 w-32 rounded-lg" />
+            <p className="text-xs text-muted-foreground">Image</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Size Variants */}
+      <div className="space-y-3">
+        <h3 className="text-lg font-semibold">Size Variants</h3>
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-8 rounded-full" /> {/* Small avatar */}
+          <Skeleton className="h-10 w-10 rounded-full" /> {/* Medium avatar */}
+          <Skeleton className="h-12 w-12 rounded-full" /> {/* Large avatar */}
+          <Skeleton className="h-16 w-16 rounded-full" /> {/* Extra large avatar */}
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all skeleton variants including text content, different shapes, and sizes. Use these patterns as building blocks for your loading states.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world example showing skeleton in context of a typical application layout.
+ * Demonstrates how to compose skeletons for complex UI structures.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="w-[800px] space-y-6">
+      {/* Page Header */}
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-8 w-48" />
+        <div className="flex gap-2">
+          <Skeleton className="h-9 w-24" />
+          <Skeleton className="h-9 w-24" />
+        </div>
+      </div>
+      
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-3 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Card key={i} className="overflow-hidden">
+            <CardHeader className="pb-3">
+              <div className="flex items-center gap-3">
+                <Skeleton className="h-8 w-8 rounded-full" />
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-3 w-16" />
+                </div>
+              </div>
+            </CardHeader>
+            
+            {/* Featured Image */}
+            <Skeleton className="h-32 w-full" />
+            
+            <CardContent className="pt-3">
+              <div className="space-y-2">
+                <Skeleton className="h-5 w-3/4" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-5/6" />
+              </div>
+            </CardContent>
+            
+            <CardFooter className="flex justify-between">
+              <div className="flex gap-2">
+                <Skeleton className="h-6 w-6 rounded" />
+                <Skeleton className="h-6 w-6 rounded" />
+                <Skeleton className="h-6 w-6 rounded" />
+              </div>
+              <Skeleton className="h-6 w-12" />
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+
+      {/* Sidebar Content */}
+      <div className="grid grid-cols-4 gap-6 mt-8">
+        <div className="col-span-3">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <Skeleton className="h-10 w-10 rounded-full" />
+                <div className="space-y-2">
+                  <Skeleton className="h-5 w-32" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-4/5" />
+              <Skeleton className="h-4 w-3/5" />
+              <Skeleton className="h-40 w-full rounded-md" />
+            </CardContent>
+          </Card>
+        </div>
+        
+        <div className="space-y-4">
+          <h4 className="text-sm font-medium text-muted-foreground">Recent Activity</h4>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-3">
+              <Skeleton className="h-8 w-8 rounded-full" />
+              <div className="space-y-1">
+                <Skeleton className="h-3 w-20" />
+                <Skeleton className="h-3 w-16" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story: "Realistic application layout showing how to compose skeleton components for complex UI structures. This example demonstrates loading states for dashboards, feeds, and content management interfaces.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,321 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Slider } from "../slider";
+import { Button } from "../button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../card";
+import { Label } from "../label";
+
+const meta = {
+  title: "Interactive Controls/Slider",
+  component: Slider,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile range input control built on Radix UI Slider primitives. Supports single or multiple values, custom ranges, step intervals, and both horizontal and vertical orientations with full accessibility support.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: { type: "object" },
+      description: "The controlled value of the slider",
+    },
+    defaultValue: {
+      control: { type: "object" },
+      description: "The default value of the slider",
+    },
+    min: {
+      control: { type: "number" },
+      description: "The minimum value of the slider",
+    },
+    max: {
+      control: { type: "number" },
+      description: "The maximum value of the slider",
+    },
+    step: {
+      control: { type: "number" },
+      description: "The step interval of the slider",
+    },
+    orientation: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      description: "The orientation of the slider",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the slider is disabled",
+    },
+    minStepsBetweenThumbs: {
+      control: { type: "number" },
+      description: "Minimum steps between thumbs in range mode",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    defaultValue: [33],
+  },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with all slider properties and controls.
+ * Use the controls panel to experiment with different configurations,
+ * values, orientations, and ranges.
+ */
+export const Interactive: Story = {
+  args: {
+    defaultValue: [33],
+    min: 0,
+    max: 100,
+    step: 1,
+    orientation: "horizontal",
+    disabled: false,
+    minStepsBetweenThumbs: 1,
+  },
+  render: (args) => (
+    <div
+      className={args.orientation === "vertical" ? "h-[200px]" : "w-[300px]"}
+    >
+      <Slider {...args} />
+    </div>
+  ),
+};
+
+/**
+ * Showcase of all slider variants and configurations.
+ * Demonstrates single value, range, vertical orientation,
+ * disabled state, and different step intervals.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-2xl">
+      {/* Single Value Sliders */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Single Value</h3>
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <Label>Basic (0-100, step 1)</Label>
+            <div className="w-[300px]">
+              <Slider defaultValue={[33]} max={100} step={1} />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Custom range (0-1000, step 50)</Label>
+            <div className="w-[300px]">
+              <Slider defaultValue={[500]} min={0} max={1000} step={50} />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Large steps (0-100, step 10)</Label>
+            <div className="w-[300px]">
+              <Slider defaultValue={[50]} max={100} step={10} />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Disabled</Label>
+            <div className="w-[300px]">
+              <Slider defaultValue={[60]} disabled />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Range Sliders */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Range Selection</h3>
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <Label>Basic range</Label>
+            <div className="w-[300px]">
+              <Slider defaultValue={[25, 75]} max={100} step={1} />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>With minimum gap (min 10 steps)</Label>
+            <div className="w-[300px]">
+              <Slider
+                defaultValue={[20, 80]}
+                max={100}
+                step={1}
+                minStepsBetweenThumbs={10}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Orientations */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Orientations</h3>
+        <div className="flex gap-8 items-start">
+          <div className="space-y-2">
+            <Label>Horizontal</Label>
+            <div className="w-[200px]">
+              <Slider defaultValue={[60]} />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label>Vertical</Label>
+            <div className="h-[150px]">
+              <Slider defaultValue={[40]} orientation="vertical" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world usage example showing the slider in a practical UI context.
+ * Features a audio settings panel with volume control, visual feedback,
+ * and control buttons for common interactions.
+ */
+export const InContext: Story = {
+  render: function AudioSettingsPanel() {
+    const [volume, setVolume] = React.useState([75]);
+    const [bassBoost, setBassBoost] = React.useState([25]);
+    const [trebleBoost, setTrebleBoost] = React.useState([15]);
+
+    const getVolumeIcon = (vol: number) => {
+      if (vol === 0) return "🔇";
+      if (vol < 30) return "🔈";
+      if (vol < 70) return "🔉";
+      return "🔊";
+    };
+
+    return (
+      <Card className="w-[400px]">
+        <CardHeader>
+          <CardTitle>Audio Settings</CardTitle>
+          <CardDescription>
+            Adjust your audio preferences and equalizer settings
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Master Volume */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="flex items-center gap-2">
+                <span className="text-lg">
+                  {getVolumeIcon(volume[0] ?? 75)}
+                </span>
+                Master Volume
+              </Label>
+              <span className="text-sm text-muted-foreground font-mono">
+                {volume[0]}%
+              </span>
+            </div>
+            <Slider
+              value={volume}
+              onValueChange={setVolume}
+              max={100}
+              step={1}
+              className="[&>div]:bg-gradient-to-r [&>div]:from-green-500 [&>div]:to-blue-500"
+            />
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setVolume([0])}
+              >
+                Mute
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setVolume([50])}
+              >
+                50%
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => setVolume([100])}
+              >
+                Max
+              </Button>
+            </div>
+          </div>
+
+          {/* Equalizer */}
+          <div className="space-y-4">
+            <h4 className="font-medium">Equalizer</h4>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label>Bass Boost</Label>
+                <span className="text-sm text-muted-foreground">
+                  {bassBoost[0] && bassBoost[0] > 0
+                    ? `+${bassBoost[0]}`
+                    : bassBoost[0]}{" "}
+                  dB
+                </span>
+              </div>
+              <Slider
+                value={bassBoost}
+                onValueChange={setBassBoost}
+                min={-12}
+                max={12}
+                step={1}
+                className="[&>div]:bg-red-500"
+              />
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label>Treble Boost</Label>
+                <span className="text-sm text-muted-foreground">
+                  {trebleBoost[0] && trebleBoost[0] > 0
+                    ? `+${trebleBoost[0]}`
+                    : trebleBoost[0]}{" "}
+                  dB
+                </span>
+              </div>
+              <Slider
+                value={trebleBoost}
+                onValueChange={setTrebleBoost}
+                min={-12}
+                max={12}
+                step={1}
+                className="[&>div]:bg-blue-500"
+              />
+            </div>
+          </div>
+
+          {/* Reset Button */}
+          <div className="pt-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setVolume([75]);
+                setBassBoost([0]);
+                setTrebleBoost([0]);
+              }}
+              className="w-full"
+            >
+              Reset to Defaults
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  },
+};