feat: storybook

2026-05-31 17:11:42 +03:00
parent 2f937e94b1
commit 67993ae3ec
17 changed files with 764 additions and 0 deletions
@@ -0,0 +1,79 @@
+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.',
+      },
+    },
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+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={() => {}}
+    />
+  ),
+};