@neynar/ui 0.2.1 → 0.3.0

package/src/components/ui/stories/button-group.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown, Copy, Download, Share2 } from "lucide-react";
+import { Button } from "../button";
+import {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+} from "../button-group";
+
+const meta = {
+  title: "Layout and Structure/ButtonGroup",
+  component: ButtonGroup,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A component for grouping related buttons together with consistent styling and spacing. Supports horizontal and vertical orientations with separators and text elements.",
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      description: "The orientation of the button group",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+  args: {
+    orientation: "horizontal",
+  },
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with all button group properties.
+ * Use the controls panel to test different combinations of props.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <ButtonGroup {...args}>
+      <Button variant="outline">First</Button>
+      <Button variant="outline">Second</Button>
+      <Button variant="outline">Third</Button>
+    </ButtonGroup>
+  ),
+};
+
+/**
+ * Showcase of all available button group variants and orientations.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-2xl">
+      {/* Horizontal Groups */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Horizontal Groups
+        </h3>
+        <div className="space-y-3">
+          <ButtonGroup>
+            <Button variant="outline">Copy</Button>
+            <Button variant="outline">Paste</Button>
+            <Button variant="outline">Cut</Button>
+          </ButtonGroup>
+
+          <ButtonGroup>
+            <Button variant="outline">
+              <Copy className="size-4" />
+              Copy
+            </Button>
+            <Button variant="outline">
+              <Download className="size-4" />
+              Download
+            </Button>
+            <Button variant="outline">
+              <Share2 className="size-4" />
+              Share
+            </Button>
+          </ButtonGroup>
+
+          <ButtonGroup>
+            <Button variant="outline" size="sm">
+              Small
+            </Button>
+            <Button variant="outline" size="sm">
+              Size
+            </Button>
+            <Button variant="outline" size="sm">
+              Buttons
+            </Button>
+          </ButtonGroup>
+
+          <ButtonGroup>
+            <Button variant="outline" size="lg">
+              Large
+            </Button>
+            <Button variant="outline" size="lg">
+              Size
+            </Button>
+            <Button variant="outline" size="lg">
+              Buttons
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* Vertical Groups */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Vertical Groups
+        </h3>
+        <div className="flex gap-4">
+          <ButtonGroup orientation="vertical">
+            <Button variant="outline">Top</Button>
+            <Button variant="outline">Middle</Button>
+            <Button variant="outline">Bottom</Button>
+          </ButtonGroup>
+
+          <ButtonGroup orientation="vertical">
+            <Button variant="outline">
+              <Copy className="size-4" />
+              Copy
+            </Button>
+            <Button variant="outline">
+              <Download className="size-4" />
+              Download
+            </Button>
+            <Button variant="outline">
+              <Share2 className="size-4" />
+              Share
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* With Separators */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Separators
+        </h3>
+        <div className="space-y-3">
+          <ButtonGroup>
+            <Button variant="outline">Copy</Button>
+            <ButtonGroupSeparator />
+            <Button variant="outline">Paste</Button>
+            <ButtonGroupSeparator />
+            <Button variant="outline">Cut</Button>
+          </ButtonGroup>
+
+          <ButtonGroup orientation="vertical">
+            <Button variant="outline">Item 1</Button>
+            <ButtonGroupSeparator orientation="horizontal" />
+            <Button variant="outline">Item 2</Button>
+            <ButtonGroupSeparator orientation="horizontal" />
+            <Button variant="outline">Item 3</Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* With Text Elements */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Text Elements
+        </h3>
+        <div className="space-y-3">
+          <ButtonGroup>
+            <ButtonGroupText>Actions:</ButtonGroupText>
+            <ButtonGroupSeparator />
+            <Button variant="outline">Copy</Button>
+            <Button variant="outline">Paste</Button>
+          </ButtonGroup>
+
+          <ButtonGroup>
+            <Button variant="outline">Previous</Button>
+            <ButtonGroupText>Page 1 of 10</ButtonGroupText>
+            <Button variant="outline">Next</Button>
+          </ButtonGroup>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of button groups in different orientations, sizes, with separators and text elements.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing button groups in practical scenarios.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-2xl">
+      {/* Toolbar */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Editor Toolbar</h3>
+        <div className="flex flex-wrap gap-2">
+          <ButtonGroup>
+            <Button variant="outline" size="sm">
+              Bold
+            </Button>
+            <Button variant="outline" size="sm">
+              Italic
+            </Button>
+            <Button variant="outline" size="sm">
+              Underline
+            </Button>
+          </ButtonGroup>
+          <ButtonGroupSeparator orientation="vertical" className="h-8" />
+          <ButtonGroup>
+            <Button variant="outline" size="sm">
+              Left
+            </Button>
+            <Button variant="outline" size="sm">
+              Center
+            </Button>
+            <Button variant="outline" size="sm">
+              Right
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* Pagination */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Pagination Controls</h3>
+        <ButtonGroup>
+          <Button variant="outline">Previous</Button>
+          <ButtonGroupText>Page 5 of 20</ButtonGroupText>
+          <Button variant="outline">Next</Button>
+        </ButtonGroup>
+      </div>
+
+      {/* Action Menu */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Action Menu</h3>
+        <ButtonGroup>
+          <Button variant="outline">
+            <Copy className="size-4" />
+            Copy
+          </Button>
+          <ButtonGroupSeparator />
+          <Button variant="outline">
+            <Download className="size-4" />
+            Download
+          </Button>
+          <ButtonGroupSeparator />
+          <Button variant="outline">
+            <Share2 className="size-4" />
+            Share
+          </Button>
+          <ButtonGroupSeparator />
+          <Button variant="outline" size="icon">
+            <ChevronDown className="size-4" />
+          </Button>
+        </ButtonGroup>
+      </div>
+
+      {/* Sidebar Navigation */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Sidebar Navigation</h3>
+        <ButtonGroup orientation="vertical" className="w-48">
+          <Button variant="outline" className="justify-start">
+            Dashboard
+          </Button>
+          <Button variant="outline" className="justify-start">
+            Projects
+          </Button>
+          <Button variant="outline" className="justify-start">
+            Team
+          </Button>
+          <Button variant="outline" className="justify-start">
+            Settings
+          </Button>
+        </ButtonGroup>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing button groups in toolbars, pagination, action menus, and navigation.",
+      },
+    },
+  },
+};

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

@@ -22,7 +22,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     variant: {
       control: { type: "select" },

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

@@ -15,7 +15,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     mode: {
       control: { type: "select" },

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

@@ -24,7 +24,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     className: {
       control: { type: "text" },

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

@@ -22,7 +22,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     orientation: {
       control: { type: "select" },

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

@@ -33,7 +33,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     config: {
       control: { type: "object" },

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

@@ -15,7 +15,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     checked: {
       control: { type: "radio" },

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

@@ -53,7 +53,6 @@ cn("text-red-500", "text-blue-500") // Returns: "text-blue-500"
       },
     },
   },
-  tags: ["autodocs"],
 };
 
 export default meta;

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

@@ -16,7 +16,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     open: {
       control: "boolean",

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

@@ -37,7 +37,6 @@ Use the theme toggle to see how all colors automatically adapt between light and
       },
     },
   },
-  tags: ["autodocs"],
 } satisfies Meta;
 
 export default meta;

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

@@ -22,7 +22,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     options: {
       control: { type: "object" },

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

@@ -42,7 +42,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     className: {
       control: "text",

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

@@ -14,7 +14,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     size: {
       control: { type: "select" },

package/src/components/ui/stories/context-menu.stories.tsx

@@ -45,7 +45,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     // Root component props are primarily event handlers from Radix
     onOpenChange: {

package/src/components/ui/stories/date-picker.stories.tsx

@@ -16,7 +16,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     date: {
       control: { type: "date" },

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

@@ -28,7 +28,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     // Dialog root props
     open: {

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

@@ -28,7 +28,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
 } satisfies Meta<typeof Drawer>;
 
 export default meta;

package/src/components/ui/stories/dropdown-menu.stories.tsx

@@ -46,7 +46,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     // These would be controlled at the individual component level
     // since DropdownMenu itself is just a wrapper

package/src/components/ui/stories/empty-state.stories.tsx

@@ -23,7 +23,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     title: {
       control: { type: "text" },