103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
|
import { Copy, Scissors, Trash, ArrowCounterClockwise } from '@phosphor-icons/react';
|
|
import {
|
|
Tooltip,
|
|
Menu,
|
|
MenuTrigger,
|
|
MenuContent,
|
|
MenuItem,
|
|
MenuSeparator,
|
|
Dialog,
|
|
AlertDialog,
|
|
Button,
|
|
} from '../components/ui';
|
|
|
|
const meta = {
|
|
title: 'Overlays/Floating',
|
|
component: Tooltip,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Floating surfaces — Tooltip, dropdown Menu, Dialog and AlertDialog. All are Radix-backed and portal-rendered.',
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
children: { control: false },
|
|
content: { control: 'text' },
|
|
delayDuration: { control: 'number' },
|
|
open: { control: 'boolean' },
|
|
defaultOpen: { control: 'boolean' },
|
|
onOpenChange: { action: 'open changed' },
|
|
sideOffset: { control: 'number' },
|
|
},
|
|
args: {
|
|
content: 'Tooltip text',
|
|
children: null,
|
|
delayDuration: 0,
|
|
},
|
|
} satisfies Meta<typeof Tooltip>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {
|
|
name: 'Tooltip Playground',
|
|
render: (args) => (
|
|
<Tooltip {...args}>
|
|
<Button variant="ghost">Hover me</Button>
|
|
</Tooltip>
|
|
),
|
|
};
|
|
|
|
export const TooltipStory: Story = {
|
|
name: 'Tooltip',
|
|
render: () => (
|
|
<Tooltip content="Saved to iCloud">
|
|
<Button variant="ghost">Hover me</Button>
|
|
</Tooltip>
|
|
),
|
|
};
|
|
|
|
export const DropdownMenu: Story = {
|
|
render: () => (
|
|
<Menu>
|
|
<MenuTrigger asChild>
|
|
<Button>Open menu</Button>
|
|
</MenuTrigger>
|
|
<MenuContent>
|
|
<MenuItem icon={<Copy size={16} />} shortcut="⌘C">Copy</MenuItem>
|
|
<MenuItem icon={<Scissors size={16} />} shortcut="⌘X">Cut</MenuItem>
|
|
<MenuItem icon={<ArrowCounterClockwise size={16} />} shortcut="⌘Z">Undo</MenuItem>
|
|
<MenuSeparator />
|
|
<MenuItem icon={<Trash size={16} />}>Delete</MenuItem>
|
|
</MenuContent>
|
|
</Menu>
|
|
),
|
|
};
|
|
|
|
export const ModalDialog: Story = {
|
|
render: () => (
|
|
<Dialog
|
|
trigger={<Button variant="primary">Open dialog</Button>}
|
|
title="Rename project"
|
|
description="Choose a new name for this project."
|
|
footer={<Button variant="primary">Save</Button>}
|
|
/>
|
|
),
|
|
};
|
|
|
|
export const Confirm: Story = {
|
|
render: () => (
|
|
<AlertDialog
|
|
trigger={<Button variant="ember">Delete…</Button>}
|
|
title="Delete this project?"
|
|
description="This action cannot be undone."
|
|
actionLabel="Delete"
|
|
destructive
|
|
onAction={() => {}}
|
|
/>
|
|
),
|
|
};
|