- Mantine theme with component extensions (Badge, Card, Paper, Button, etc.) - CSS custom properties for design tokens (--inspector-* vars) - Dark/light mode support with auto detection - 12 atoms: StatusIndicator, AnnotationBadge, CapabilityItem, LogEntry, ProgressDisplay, ContentViewer, ListChangedIndicator, CopyButton, ConnectionToggle, TransportBadge, InlineError, MessageBubble - 25 molecules: ServerCard, AddServerMenu, SchemaForm, ToolListItem, ToolDetailPanel, ResultPanel, ResourceListItem, ResourcePreviewPanel, ResourceTemplateInput, PromptArgumentsForm, PromptMessagesDisplay, LogControls, TaskCard, HistoryEntry, ServerInfoContent, ServerSettingsForm, RootsTable, SamplingRequestPanel, ElicitationFormPanel, ElicitationUrlPanel, InlineSamplingRequest, InlineElicitationRequest, PendingClientRequests, ImportServerJsonPanel, ExperimentalFeaturesPanel - Exclude storybook-static from version control - Exclude .stories.tsx from app tsconfig (Storybook-only modules) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
39 lines
724 B
TypeScript
39 lines
724 B
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { ProgressDisplay } from './ProgressDisplay';
|
|
|
|
const meta: Meta<typeof ProgressDisplay> = {
|
|
title: 'Atoms/ProgressDisplay',
|
|
component: ProgressDisplay,
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof ProgressDisplay>;
|
|
|
|
export const ZeroPercent: Story = {
|
|
args: {
|
|
progress: 0,
|
|
},
|
|
};
|
|
|
|
export const HalfComplete: Story = {
|
|
args: {
|
|
progress: 50,
|
|
description: 'Processing...',
|
|
},
|
|
};
|
|
|
|
export const NearComplete: Story = {
|
|
args: {
|
|
progress: 95,
|
|
description: 'Almost done',
|
|
elapsed: '1m 30s',
|
|
},
|
|
};
|
|
|
|
export const Complete: Story = {
|
|
args: {
|
|
progress: 100,
|
|
description: 'Done',
|
|
elapsed: '2m 15s',
|
|
},
|
|
};
|