93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import * as React from 'react';
|
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { MoreHorizontal } from 'lucide-react';
|
|
import { Checkbox } from './Checkbox.js';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from './DropdownMenu.js';
|
|
import { IconButton } from './IconButton.js';
|
|
import { RadioGroup, RadioGroupItem } from './RadioGroup.js';
|
|
import { SegmentedControl } from './SegmentedControl.js';
|
|
import { Switch } from './Switch.js';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs.js';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip.js';
|
|
|
|
const meta: Meta = {
|
|
title: 'Components/Controls',
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj;
|
|
|
|
export const ChoiceControls: Story = {
|
|
render: () => {
|
|
const [mode, setMode] = React.useState('review');
|
|
|
|
return (
|
|
<div className="grid max-w-xl gap-4">
|
|
<SegmentedControl
|
|
aria-label="Queue mode"
|
|
value={mode}
|
|
onValueChange={setMode}
|
|
options={[
|
|
{ value: 'review', label: 'Review' },
|
|
{ value: 'approved', label: 'Approved' },
|
|
{ value: 'rejected', label: 'Rejected' },
|
|
]}
|
|
/>
|
|
<Checkbox label="Include archived notes" />
|
|
<Switch label="Auto-refresh queue" />
|
|
<RadioGroup defaultValue="compact" aria-label="Density">
|
|
<RadioGroupItem value="compact" label="Compact" />
|
|
<RadioGroupItem value="comfortable" label="Comfortable" />
|
|
</RadioGroup>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const OverlaysAndTabs: Story = {
|
|
render: () => (
|
|
<TooltipProvider>
|
|
<div className="grid max-w-xl gap-4">
|
|
<Tabs defaultValue="queue">
|
|
<TabsList aria-label="Review sections">
|
|
<TabsTrigger value="queue">Queue</TabsTrigger>
|
|
<TabsTrigger value="timeline">Timeline</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="queue" className="pt-3">
|
|
Queue content
|
|
</TabsContent>
|
|
<TabsContent value="timeline" className="pt-3">
|
|
Timeline content
|
|
</TabsContent>
|
|
</Tabs>
|
|
<div className="flex gap-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<IconButton icon={<MoreHorizontal className="h-4 w-4" />} label="More actions" />
|
|
</TooltipTrigger>
|
|
<TooltipContent>More actions</TooltipContent>
|
|
</Tooltip>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<IconButton icon={<MoreHorizontal className="h-4 w-4" />} label="Open menu" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>Approve</DropdownMenuItem>
|
|
<DropdownMenuItem>Reject</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</TooltipProvider>
|
|
),
|
|
};
|