@nationaldesignstudio/react 0.5.2 → 0.5.4

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

@@ -1,531 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import * as React from "react";
-import { Button } from "../button";
-import {
-	Popover,
-	PopoverArrow,
-	PopoverBackdrop,
-	PopoverClose,
-	PopoverDescription,
-	PopoverParts,
-	PopoverPopup,
-	PopoverPortal,
-	PopoverPositioner,
-	PopoverTitle,
-	PopoverTrigger,
-} from ".";
-
-const meta: Meta<typeof Popover> = {
-	title: "Atoms/Popover",
-	component: Popover,
-	argTypes: {
-		side: {
-			control: { type: "select" },
-			options: ["top", "bottom", "left", "right"],
-		},
-		align: {
-			control: { type: "select" },
-			options: ["start", "center", "end"],
-		},
-		sideOffset: {
-			control: { type: "number" },
-		},
-		showArrow: {
-			control: { type: "boolean" },
-		},
-		showClose: {
-			control: { type: "boolean" },
-		},
-	},
-	args: {
-		side: "bottom",
-		align: "center",
-		sideOffset: 8,
-		showArrow: true,
-		showClose: false,
-	},
-	decorators: [
-		(Story) => (
-			<div className="flex min-h-[300px] items-center justify-center p-48">
-				<Story />
-			</div>
-		),
-	],
-} satisfies Meta<typeof Popover>;
-
-export default meta;
-type Story = StoryObj<typeof Popover>;
-
-// =============================================================================
-// Playground
-// =============================================================================
-
-export const Playground: Story = {
-	render: (args) => (
-		<Popover
-			{...args}
-			trigger={<Button>Click me</Button>}
-			title="Popover Title"
-		>
-			This is the popover content. You can put any content here including text,
-			forms, or other components.
-		</Popover>
-	),
-};
-
-// =============================================================================
-// Basic Examples
-// =============================================================================
-
-/**
- * Basic popover with title and description.
- */
-export const Default: Story = {
-	render: () => (
-		<Popover trigger={<Button>Open Popover</Button>} title="Information">
-			This popover provides additional context about the action.
-		</Popover>
-	),
-};
-
-/**
- * Popover without title - just content.
- */
-export const NoTitle: Story = {
-	render: () => (
-		<Popover trigger={<Button>Open Popover</Button>}>
-			<p className="typography-body-sm-md">
-				Simple popover content without a title.
-			</p>
-		</Popover>
-	),
-};
-
-/**
- * Popover without arrow.
- */
-export const NoArrow: Story = {
-	render: () => (
-		<Popover
-			trigger={<Button>Open Popover</Button>}
-			title="No Arrow"
-			showArrow={false}
-		>
-			This popover has no arrow pointing to the trigger.
-		</Popover>
-	),
-};
-
-/**
- * Popover with close button.
- */
-export const WithCloseButton: Story = {
-	render: () => (
-		<Popover
-			trigger={<Button>Open Popover</Button>}
-			title="Closeable"
-			showClose={true}
-		>
-			Click the X button or click outside to close.
-		</Popover>
-	),
-};
-
-// =============================================================================
-// Positioning
-// =============================================================================
-
-/**
- * Popover positioned on all four sides.
- */
-export const AllPositions: Story = {
-	render: () => (
-		<div className="flex flex-col items-center gap-48">
-			<Popover
-				trigger={<Button variant="outline">Top</Button>}
-				side="top"
-				title="Top Position"
-			>
-				Popover above the trigger
-			</Popover>
-			<div className="flex items-center gap-48">
-				<Popover
-					trigger={<Button variant="outline">Left</Button>}
-					side="left"
-					title="Left Position"
-				>
-					Popover to the left
-				</Popover>
-				<Popover
-					trigger={<Button variant="outline">Right</Button>}
-					side="right"
-					title="Right Position"
-				>
-					Popover to the right
-				</Popover>
-			</div>
-			<Popover
-				trigger={<Button variant="outline">Bottom</Button>}
-				side="bottom"
-				title="Bottom Position"
-			>
-				Popover below the trigger
-			</Popover>
-		</div>
-	),
-};
-
-export const Top: Story = {
-	render: () => (
-		<Popover
-			trigger={<Button>Top Position</Button>}
-			side="top"
-			title="Top Popover"
-		>
-			This popover appears above the trigger.
-		</Popover>
-	),
-};
-
-export const Bottom: Story = {
-	render: () => (
-		<Popover
-			trigger={<Button>Bottom Position</Button>}
-			side="bottom"
-			title="Bottom Popover"
-		>
-			This popover appears below the trigger.
-		</Popover>
-	),
-};
-
-export const Left: Story = {
-	render: () => (
-		<Popover
-			trigger={<Button>Left Position</Button>}
-			side="left"
-			title="Left Popover"
-		>
-			This popover appears to the left.
-		</Popover>
-	),
-};
-
-export const Right: Story = {
-	render: () => (
-		<Popover
-			trigger={<Button>Right Position</Button>}
-			side="right"
-			title="Right Popover"
-		>
-			This popover appears to the right.
-		</Popover>
-	),
-};
-
-// =============================================================================
-// Alignment
-// =============================================================================
-
-/**
- * Popover alignment options.
- */
-export const Alignment: Story = {
-	render: () => (
-		<div className="flex flex-col gap-24">
-			<div className="flex items-center gap-24">
-				<Popover
-					trigger={
-						<Button variant="secondary" className="w-144">
-							Start
-						</Button>
-					}
-					side="bottom"
-					align="start"
-					title="Start Aligned"
-				>
-					Popover aligned to start
-				</Popover>
-				<Popover
-					trigger={
-						<Button variant="secondary" className="w-144">
-							Center
-						</Button>
-					}
-					side="bottom"
-					align="center"
-					title="Center Aligned"
-				>
-					Popover aligned to center
-				</Popover>
-				<Popover
-					trigger={
-						<Button variant="secondary" className="w-144">
-							End
-						</Button>
-					}
-					side="bottom"
-					align="end"
-					title="End Aligned"
-				>
-					Popover aligned to end
-				</Popover>
-			</div>
-		</div>
-	),
-};
-
-// =============================================================================
-// Rich Content
-// =============================================================================
-
-/**
- * Popover with form content.
- */
-export const WithForm: Story = {
-	render: () => (
-		<Popover trigger={<Button>Edit Settings</Button>} showClose={true}>
-			<div className="flex flex-col gap-spatial-component-overlay-gap">
-				<h3 className="typography-body-md-md font-semibold">Quick Settings</h3>
-				<div className="flex flex-col gap-8">
-					<label className="typography-body-sm-md">
-						Name
-						<input
-							type="text"
-							placeholder="Enter name"
-							className="mt-4 w-full rounded-surface-ui-small border border-overlay-border bg-overlay-background px-12 py-8 typography-body-sm-md focus:outline-none focus:ring-2 focus:ring-border-focus"
-						/>
-					</label>
-					<label className="typography-body-sm-md">
-						Email
-						<input
-							type="email"
-							placeholder="Enter email"
-							className="mt-4 w-full rounded-surface-ui-small border border-overlay-border bg-overlay-background px-12 py-8 typography-body-sm-md focus:outline-none focus:ring-2 focus:ring-border-focus"
-						/>
-					</label>
-				</div>
-				<div className="flex justify-end gap-8">
-					<Button variant="secondary" size="sm">
-						Cancel
-					</Button>
-					<Button size="sm">Save</Button>
-				</div>
-			</div>
-		</Popover>
-	),
-};
-
-/**
- * Popover with list content.
- */
-export const WithList: Story = {
-	render: () => (
-		<Popover trigger={<Button variant="outline">Options</Button>}>
-			<div className="flex flex-col gap-4">
-				<button
-					type="button"
-					className="w-full rounded-surface-ui-small px-12 py-8 text-left typography-body-sm-md hover:bg-bg-section"
-				>
-					Edit profile
-				</button>
-				<button
-					type="button"
-					className="w-full rounded-surface-ui-small px-12 py-8 text-left typography-body-sm-md hover:bg-bg-section"
-				>
-					Settings
-				</button>
-				<button
-					type="button"
-					className="w-full rounded-surface-ui-small px-12 py-8 text-left typography-body-sm-md hover:bg-bg-section"
-				>
-					Help & support
-				</button>
-				<hr className="border-overlay-border" />
-				<button
-					type="button"
-					className="w-full rounded-surface-ui-small px-12 py-8 text-left typography-body-sm-md text-button-destructive-bg hover:bg-bg-section"
-				>
-					Sign out
-				</button>
-			</div>
-		</Popover>
-	),
-};
-
-/**
- * Popover with media content.
- */
-export const WithMedia: Story = {
-	render: () => (
-		<Popover trigger={<Button>View Profile</Button>} showClose={true}>
-			<div className="flex gap-16">
-				<div className="size-48 shrink-0 rounded-full bg-bg-section-secondary" />
-				<div className="flex flex-col gap-4">
-					<h3 className="typography-body-md-md font-semibold">Jane Smith</h3>
-					<p className="typography-body-sm-md text-overlay-text-muted">
-						Product Designer
-					</p>
-					<p className="typography-body-sm-md text-overlay-text-muted">
-						San Francisco, CA
-					</p>
-				</div>
-			</div>
-		</Popover>
-	),
-};
-
-// =============================================================================
-// Compound Component API
-// =============================================================================
-
-/**
- * Using the compound component API for full control.
- */
-export const CompoundAPI: Story = {
-	render: () => (
-		<PopoverParts>
-			<PopoverTrigger>
-				<Button variant="primary">Custom Popover</Button>
-			</PopoverTrigger>
-			<PopoverPortal>
-				<PopoverPositioner side="bottom" sideOffset={12}>
-					<PopoverPopup>
-						<PopoverArrow />
-						<PopoverClose>
-							<svg
-								width="12"
-								height="12"
-								viewBox="0 0 12 12"
-								fill="none"
-								aria-hidden="true"
-							>
-								<path
-									d="M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5"
-									stroke="currentColor"
-									strokeWidth="1.5"
-									strokeLinecap="round"
-								/>
-							</svg>
-							<span className="sr-only">Close</span>
-						</PopoverClose>
-						<PopoverTitle>Custom Title</PopoverTitle>
-						<PopoverDescription>
-							Built with compound components for maximum flexibility.
-						</PopoverDescription>
-					</PopoverPopup>
-				</PopoverPositioner>
-			</PopoverPortal>
-		</PopoverParts>
-	),
-};
-
-/**
- * Compound API with backdrop.
- */
-export const WithBackdrop: Story = {
-	render: () => (
-		<PopoverParts>
-			<PopoverTrigger>
-				<Button>With Backdrop</Button>
-			</PopoverTrigger>
-			<PopoverPortal>
-				<PopoverBackdrop className="bg-alpha-black-20" />
-				<PopoverPositioner side="bottom">
-					<PopoverPopup>
-						<PopoverArrow />
-						<PopoverTitle>Modal-like Popover</PopoverTitle>
-						<PopoverDescription>
-							This popover has a backdrop that dims the background.
-						</PopoverDescription>
-					</PopoverPopup>
-				</PopoverPositioner>
-			</PopoverPortal>
-		</PopoverParts>
-	),
-};
-
-// =============================================================================
-// Controlled
-// =============================================================================
-
-/**
- * Controlled popover with external state management.
- */
-export const Controlled: Story = {
-	render: function ControlledStory() {
-		const [open, setOpen] = React.useState(false);
-
-		return (
-			<div className="flex flex-col items-center gap-16">
-				<Popover
-					trigger={<Button>Controlled Popover</Button>}
-					title="Controlled"
-					open={open}
-					onOpenChange={setOpen}
-				>
-					This popover is controlled externally.
-				</Popover>
-				<Button variant="outline" onClick={() => setOpen(!open)}>
-					{open ? "Close popover" : "Open popover"}
-				</Button>
-			</div>
-		);
-	},
-};
-
-// =============================================================================
-// On Different Elements
-// =============================================================================
-
-/**
- * Popover on various trigger elements.
- */
-export const OnDifferentElements: Story = {
-	render: () => (
-		<div className="flex items-center gap-24">
-			<Popover trigger={<Button>Button</Button>} title="Button Trigger">
-				Triggered by a button
-			</Popover>
-
-			<Popover
-				trigger={
-					<button
-						type="button"
-						className="flex size-36 items-center justify-center rounded-surface-ui-small bg-bg-section text-text-primary hover:bg-bg-section-secondary"
-					>
-						<svg
-							className="size-20"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-							aria-hidden="true"
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								strokeWidth={2}
-								d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-							/>
-						</svg>
-						<span className="sr-only">More options</span>
-					</button>
-				}
-				title="Icon Trigger"
-			>
-				Triggered by an icon button
-			</Popover>
-
-			<Popover
-				trigger={
-					<span className="cursor-pointer border-b border-dashed border-fg-muted text-text-secondary">
-						Click this text
-					</span>
-				}
-				title="Text Trigger"
-			>
-				Triggered by text
-			</Popover>
-		</div>
-	),
-};