@neynar/ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,293 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FileX, Inbox, Search, Users } from "lucide-react";
+import { Button } from "../button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "../empty";
+
+const meta = {
+  title: "Data Display/Empty",
+  component: Empty,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An empty state component for displaying messages when there's no content to show. Includes header, media, title, description, and action areas.",
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+} satisfies Meta<typeof Empty>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with empty state properties.
+ * Use the controls panel to test different combinations of props.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <Empty {...args}>
+      <EmptyHeader>
+        <EmptyMedia>
+          <Inbox className="size-12 text-muted-foreground" />
+        </EmptyMedia>
+        <EmptyTitle>No messages yet</EmptyTitle>
+        <EmptyDescription>
+          Your inbox is empty. Start a conversation to see messages here.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button>Start Conversation</Button>
+      </EmptyContent>
+    </Empty>
+  ),
+};
+
+/**
+ * Showcase of all available empty state variants.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-4xl">
+      {/* Basic Empty State */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Basic Empty State
+        </h3>
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia>
+              <Inbox className="size-12 text-muted-foreground" />
+            </EmptyMedia>
+            <EmptyTitle>No items found</EmptyTitle>
+            <EmptyDescription>
+              There are no items to display at the moment.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
+
+      {/* With Icon Variant */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Icon Background
+        </h3>
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Search className="size-6" />
+            </EmptyMedia>
+            <EmptyTitle>No search results</EmptyTitle>
+            <EmptyDescription>
+              Try adjusting your search terms or filters.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
+
+      {/* With Action Button */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Action Button
+        </h3>
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <FileX className="size-6" />
+            </EmptyMedia>
+            <EmptyTitle>No files uploaded</EmptyTitle>
+            <EmptyDescription>
+              Upload your first file to get started.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button>Upload File</Button>
+          </EmptyContent>
+        </Empty>
+      </div>
+
+      {/* With Multiple Actions */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Multiple Actions
+        </h3>
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Users className="size-6" />
+            </EmptyMedia>
+            <EmptyTitle>No team members</EmptyTitle>
+            <EmptyDescription>
+              Invite your team to collaborate on this project.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <div className="flex gap-2">
+              <Button>Invite Team</Button>
+              <Button variant="outline">Learn More</Button>
+            </div>
+          </EmptyContent>
+        </Empty>
+      </div>
+
+      {/* Compact Version */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Compact Version
+        </h3>
+        <Empty className="p-6">
+          <EmptyHeader>
+            <EmptyTitle>No notifications</EmptyTitle>
+            <EmptyDescription>You're all caught up!</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of empty states with different media variants, action buttons, and layouts.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing empty states in practical scenarios.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-4xl">
+      {/* Inbox Empty State */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Inbox</h3>
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia>
+              <Inbox className="size-16 text-muted-foreground" />
+            </EmptyMedia>
+            <EmptyTitle>Your inbox is empty</EmptyTitle>
+            <EmptyDescription>
+              No new messages. Check back later or start a new conversation.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button>Compose Message</Button>
+          </EmptyContent>
+        </Empty>
+      </div>
+
+      {/* Search Results Empty */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Search Results</h3>
+        <div className="space-y-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground size-4" />
+            <input
+              type="text"
+              placeholder="Search..."
+              className="w-full pl-10 pr-4 py-2 border rounded-md"
+              value="nonexistent query"
+              readOnly
+            />
+          </div>
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <Search className="size-6" />
+              </EmptyMedia>
+              <EmptyTitle>No results found</EmptyTitle>
+              <EmptyDescription>
+                We couldn't find any results for "nonexistent query". Try
+                different keywords or check your spelling.
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <Button variant="outline">Clear Search</Button>
+            </EmptyContent>
+          </Empty>
+        </div>
+      </div>
+
+      {/* File Manager Empty */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">My Documents</h3>
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <FileX className="size-6" />
+            </EmptyMedia>
+            <EmptyTitle>No documents yet</EmptyTitle>
+            <EmptyDescription>
+              Upload your first document or create a new one to get started.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <div className="flex gap-2">
+              <Button>Upload Document</Button>
+              <Button variant="outline">Create New</Button>
+            </div>
+          </EmptyContent>
+        </Empty>
+      </div>
+
+      {/* Team Members Empty */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Team Members</h3>
+        <Empty>
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Users className="size-6" />
+            </EmptyMedia>
+            <EmptyTitle>No team members yet</EmptyTitle>
+            <EmptyDescription>
+              Invite colleagues to collaborate on your projects. Team members
+              can view, edit, and manage project resources.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button>Invite Team Members</Button>
+          </EmptyContent>
+        </Empty>
+      </div>
+
+      {/* Notification Center Empty */}
+      <div className="space-y-4 p-6 border rounded-lg max-w-md">
+        <h3 className="text-lg font-semibold">Notifications</h3>
+        <Empty className="p-8">
+          <EmptyHeader>
+            <EmptyTitle>All caught up!</EmptyTitle>
+            <EmptyDescription>
+              You have no new notifications.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing empty states in inbox, search results, file manager, team management, and notifications.",
+      },
+    },
+  },
+};