ars9
35997f8bcb
- add ContextMenu component with click-outside/Escape dismiss, align prop, and danger variant - replace EnvironmentsPage table with responsive card grid - add cog button to each card opening a context menu with view and delete actions - add EnvironmentDetailPage at /environments/:id with meta grid, URLs card, and delete - add Breadcrumbs to all pages; detail page uses two-item trail with delete button inline - add Table stories for pagination and Timestamp column
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { Settings, Trash2, ExternalLink } from 'lucide-react';
|
|
import { Button } from '../../src/ui/Button/Button';
|
|
import { ContextMenu } from '../../src/ui/ContextMenu/ContextMenu';
|
|
|
|
const meta: Meta<typeof ContextMenu> = {
|
|
title: 'UI/ContextMenu',
|
|
component: ContextMenu,
|
|
parameters: { layout: 'centered' },
|
|
tags: ['autodocs'],
|
|
};
|
|
export default meta;
|
|
type Story = StoryObj<typeof ContextMenu>;
|
|
|
|
const trigger = (
|
|
<Button variant="ghost" size="sm">
|
|
<Settings size={16} />
|
|
</Button>
|
|
);
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
trigger,
|
|
items: [
|
|
{ label: 'View details', icon: <ExternalLink size={14} />, onClick: () => {} },
|
|
{ label: 'Delete', icon: <Trash2 size={14} />, variant: 'danger', onClick: () => {} },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const AlignLeft: Story = {
|
|
args: {
|
|
trigger,
|
|
align: 'left',
|
|
items: [
|
|
{ label: 'View details', icon: <ExternalLink size={14} />, onClick: () => {} },
|
|
{ label: 'Delete', icon: <Trash2 size={14} />, variant: 'danger', onClick: () => {} },
|
|
],
|
|
},
|
|
};
|
|
|
|
export const ManyItems: Story = {
|
|
args: {
|
|
trigger,
|
|
items: [
|
|
{ label: 'View details', icon: <ExternalLink size={14} />, onClick: () => {} },
|
|
{ label: 'Edit', icon: <Settings size={14} />, onClick: () => {} },
|
|
{ label: 'Duplicate', onClick: () => {} },
|
|
{ label: 'Delete', icon: <Trash2 size={14} />, variant: 'danger', onClick: () => {} },
|
|
],
|
|
},
|
|
};
|