@neynar/ui 0.1.1

package/src/components/ui/stories/use-mobile.stories.tsx

@@ -0,0 +1,420 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../card";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "../sheet";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../dialog";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "../navigation-menu";
+import { Smartphone, Monitor, Menu, Search } from "lucide-react";
+
+/**
+ * useIsMobile hook stories for design system documentation
+ *
+ * This story file demonstrates the useIsMobile hook's capabilities through three focused stories:
+ * - Interactive: Live playground showing current viewport state and breakpoint testing
+ * - Variants: Different responsive patterns and use cases for mobile detection
+ * - InContext: Real-world usage examples showing mobile vs desktop component selection
+ */
+
+// Demo component for the Interactive story
+function MobileDetector() {
+  const isMobile = useIsMobile();
+  const [windowWidth, setWindowWidth] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    const updateWidth = () => setWindowWidth(window.innerWidth);
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {isMobile ? (
+            <Smartphone className="h-5 w-5" />
+          ) : (
+            <Monitor className="h-5 w-5" />
+          )}
+          Mobile Detection Status
+        </CardTitle>
+        <CardDescription>
+          Resize your browser window to see the hook respond to viewport changes
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between">
+          <span>Current Width:</span>
+          <Badge variant="outline">{windowWidth}px</Badge>
+        </div>
+        <div className="flex items-center justify-between">
+          <span>Breakpoint (768px):</span>
+          <Badge variant="secondary">md</Badge>
+        </div>
+        <div className="flex items-center justify-between">
+          <span>Is Mobile:</span>
+          <Badge variant={isMobile ? "default" : "destructive"}>
+            {isMobile ? "true" : "false"}
+          </Badge>
+        </div>
+        <div className="pt-2 text-sm text-muted-foreground">
+          {isMobile
+            ? "Currently showing mobile layout (< 768px)"
+            : "Currently showing desktop layout (≥ 768px)"}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Demo component for Variants story
+function ResponsivePatterns() {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className="space-y-6">
+      {/* Pattern 1: Conditional Component Rendering */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Pattern 1: Conditional Component Rendering</CardTitle>
+          <CardDescription>
+            Different components for mobile vs desktop
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isMobile ? (
+            <Badge className="bg-blue-500">Mobile Component Active</Badge>
+          ) : (
+            <Badge className="bg-green-500">Desktop Component Active</Badge>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Pattern 2: Layout Switching */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Pattern 2: Layout Direction</CardTitle>
+          <CardDescription>
+            Vertical on mobile, horizontal on desktop
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className={`flex gap-2 ${isMobile ? "flex-col" : "flex-row"}`}>
+            <Button variant="outline" size="sm">
+              Action 1
+            </Button>
+            <Button variant="outline" size="sm">
+              Action 2
+            </Button>
+            <Button variant="outline" size="sm">
+              Action 3
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Pattern 3: Content Density */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Pattern 3: Content Density</CardTitle>
+          <CardDescription>
+            Less content on mobile for better UX
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            <div>Always visible content</div>
+            {!isMobile && (
+              <>
+                <div className="text-muted-foreground">
+                  Desktop-only details
+                </div>
+                <div className="text-muted-foreground">
+                  Additional information
+                </div>
+              </>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// Demo component for InContext story
+function ResponsiveNavigation() {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline" size="icon">
+            <Menu className="h-4 w-4" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Mobile Navigation</SheetTitle>
+            <SheetDescription>
+              Mobile-optimized navigation using Sheet component
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-6 space-y-3">
+            <Button variant="ghost" className="w-full justify-start">
+              Home
+            </Button>
+            <Button variant="ghost" className="w-full justify-start">
+              Products
+            </Button>
+            <Button variant="ghost" className="w-full justify-start">
+              About
+            </Button>
+            <Button variant="ghost" className="w-full justify-start">
+              Contact
+            </Button>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="p-4 w-48">
+              <NavigationMenuLink className="block p-2 hover:bg-accent rounded">
+                Web Apps
+              </NavigationMenuLink>
+              <NavigationMenuLink className="block p-2 hover:bg-accent rounded">
+                Mobile Apps
+              </NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className="px-4 py-2">About</NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink className="px-4 py-2">Contact</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+}
+
+function ResponsiveSearchDialog() {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return (
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline" className="gap-2">
+            <Search className="h-4 w-4" />
+            Search
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="top" className="h-[400px]">
+          <SheetHeader>
+            <SheetTitle>Search</SheetTitle>
+            <SheetDescription>
+              Mobile search interface using Sheet for better mobile UX
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-6">
+            <input
+              type="text"
+              placeholder="Search everything..."
+              className="w-full p-3 border rounded-lg"
+            />
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" className="gap-2">
+          <Search className="h-4 w-4" />
+          Search
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Search</DialogTitle>
+          <DialogDescription>
+            Desktop search interface using Dialog for focused interaction
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mt-4">
+          <input
+            type="text"
+            placeholder="Search everything..."
+            className="w-full p-3 border rounded-lg"
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function RealWorldExample() {
+  return (
+    <div className="space-y-8 max-w-4xl">
+      <Card>
+        <CardHeader>
+          <CardTitle>Responsive Navigation</CardTitle>
+          <CardDescription>
+            Navigation adapts to screen size: NavigationMenu on desktop, Sheet
+            on mobile
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveNavigation />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Responsive Search</CardTitle>
+          <CardDescription>
+            Search uses Dialog on desktop for focused interaction, Sheet on
+            mobile for better mobile UX
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveSearchDialog />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Implementation Notes</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>• Hook uses 768px breakpoint (Tailwind&apos;s md breakpoint)</p>
+          <p>• SSR-safe: returns false on server, updates on client</p>
+          <p>• Automatically updates on window resize</p>
+          <p>• Pattern matches shadcn/ui&apos;s useSidebar hook behavior</p>
+          <p>• Ideal for component selection rather than CSS media queries</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: "Utilities/useIsMobile",
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+A React hook for detecting mobile viewport width based on Tailwind CSS breakpoints. 
+Returns true when viewport width is less than 768px (Tailwind's md breakpoint).
+
+**Key Features:**
+- Follows shadcn/ui responsive patterns
+- SSR-safe implementation
+- Automatic viewport resize handling  
+- Standard 768px breakpoint alignment
+- Perfect for conditional component rendering
+
+**Common Use Cases:**
+- Mobile vs desktop navigation patterns
+- Dialog vs Sheet component selection
+- Responsive layout adjustments
+- Content density optimization
+        `,
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground showing the hook's real-time response to viewport changes.
+ * Resize your browser window to see the mobile detection update dynamically.
+ */
+export const Interactive: Story = {
+  render: () => <MobileDetector />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Live demonstration of mobile detection. Resize your browser window to see the hook respond to viewport changes in real-time.",
+      },
+    },
+  },
+};
+
+/**
+ * Different responsive patterns demonstrating various ways to use mobile detection
+ * for adaptive user interfaces and layout adjustments.
+ */
+export const Variants: Story = {
+  render: () => <ResponsivePatterns />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Common responsive patterns: conditional rendering, layout switching, and content density adaptation.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world examples showing how to use mobile detection for component selection
+ * and responsive user experience patterns in production applications.
+ */
+export const InContext: Story = {
+  render: () => <RealWorldExample />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Production-ready examples: responsive navigation with NavigationMenu/Sheet and search with Dialog/Sheet combinations.",
+      },
+    },
+  },
+};