feat: Add Storybook component library with 46 presentational components#1156
Draft
feat: Add Storybook component library with 46 presentational components#1156
Conversation
* Broke v2_tech_stack.md into v2_web_client.md, v2_server.md, and v2_storage.md * Added v2 components with information on the presenttional components pattern.
Defines all presentational components to be built in Storybook with Mantine, organized bottom-up (atoms, molecules, organisms, layouts) with props interfaces, Mantine implementation notes, story variations, build order, and configuration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Added storybook build plan
…ts with Storybook stories - 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>
- ServerListScreen: Home page with server card grid and add server menu - ToolsScreen: Three-panel layout (tool list, detail/form, results) - ResourcesScreen: Two-panel with accordion sections and content preview - PromptsScreen: Two-panel with prompt selection and message display - LoggingScreen: Two-panel with log controls and real-time log stream - TasksScreen: Active and completed task card sections - HistoryScreen: Request history with search, filter, and pinned entries Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ories - HomeLayout: AppShell with header (title + theme toggle) for disconnected state - ConnectedLayout: AppShell with server name, status indicator, tab navigation, theme toggle, and disconnect button for connected state All 6 phases of the Storybook component plan are now complete: 12 atoms, 25 molecules, 7 organisms, 2 layouts = 46 components total Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace placeholder Paper elements with actual ServerListScreen organism containing properly configured ServerCard components. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…tentViewer Rename HistoryEntry's children prop to childEntries to avoid React's reserved prop name. Replace ContentViewer's onCopy callback with a copyable flag and overlay CopyButton in the top-right corner. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add tsconfig.storybook.json to cover *.stories.tsx files excluded by tsconfig.app.json, resolving TS2307 for @storybook/react-vite imports. Replace 1x1 pixel PNG with a visible red/white checkerboard in the ImagePreview story. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Only render InlineError details Stack when there is content to show. Add wrapping Code theme variant for long URLs that would push buttons offscreen. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add @storybook/addon-actions for action logging in stories - Add onTestCapability callback to ExperimentalFeaturesPanel - Use CopyButton overlay in ResourcePreviewPanel and ResultPanel - Replace includeContext checkbox with badge in SamplingRequestPanel - Add LongServerName story for ServerCard - Fix long tool name overflow with truncation and contained Paper variant - Add optional title prop to ToolListItem and ToolDetailPanel - Move tool annotations from list to detail panel form - Vertically center static text in ResourceTemplateInput - Fix InlineError blank space when no details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- InlineError: show more/less toggle on same line as message, collapsible details, doc link as button - ServerCard: use ContentViewer with CopyButton for command, remove onCopyCommand prop, combine action rows, add responsive Card variant - HistoryEntry: use ContentViewer with CopyButton for JSON blocks, swap duration and status badge positions - LoggingScreen: stretch log stream panel to full height, center empty message vertically Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add color scheme toggle to Storybook preview via globalTypes - Remove @storybook/addon-actions (built into Storybook 9+) - Include .storybook/ files in tsconfig.storybook.json - Fix InlineError show more button color for readability - Use transparent variant on Remove button for consistent red in dark mode Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add grid-align-start class to SimpleGrid so cards size to their own content instead of stretching to match the tallest card in the row. Remove unused card-responsive CSS. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Fix ContentViewer background invisible against card in dark mode - Fix Remove button not red in dark mode by using color="red.6" - Add distinct card background for light mode (gray-0) vs app background - Use CSS custom properties for card background across color schemes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add MCP logo (light/dark variants) to ConnectedLayout header - Replace Tabs with SegmentedControl in header, split into 1/3 sections - Wrap all screens in Container for consistent margins - Use Card instead of Paper for panel backgrounds across all screens - Add SubscribeButton atom, CopyButton for resource URI - Move annotations from ResourceListItem to ResourcePreviewPanel - Improve AnnotationBadge colors for dark mode visibility - Add Tools, Resources, and Prompts headers to list panels - Add ConnectedLayout stories for Tools, Resources, and Prompts tabs - Remove unused onCopy prop and copy button from PromptMessagesDisplay Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add HistoryActive and other missing stories to ConnectedLayout, wrap HistoryScreen and TasksScreen in consistent Container/Paper layout, add copy button to MessageBubble, and clean up various component props. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Suppress react-refresh lint rule in Storybook preview config, fix LogLevel type annotation in LoggingScreen stories, and apply consistent formatting and layout improvements across multiple components. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…t inline code Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…tract inline code - Add UnstyledButton listItem theme variant to replace inline style for border-radius - Extract subcomponent constants with .withProps() across all molecules - Replace raw <span /> with Mantine <Flex /> in ResourcePreviewPanel - Extract inline template literals and expressions to named functions Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…tract inline code Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Elements -> Groups -> Screens -> Views
…actors New element components: - ListToggle: expand/collapse button using react-icons (RiExpandVerticalLine/RiCollapseVerticalLine) - LogLevelBadge: extracted from LogEntry, handles all 8 log levels with filled variant and dark/light text contrast New group components: - ViewHeader: shared header bar for ConnectedView and UnconnectedView with discriminated union on `connected` prop; MCP logo links to modelcontextprotocol.io - ServerListControls: combines ListToggle and AddServerMenu, hides toggle when no servers - LogStreamPanel: extracted from LoggingScreen with scroll containment, filtering by visible levels and search text - HistoryControls: vertical sidebar with search, method filter, export, and clear - HistoryListPanel: extracted from HistoryScreen with ListToggle compact mode, filtering by method and search text Badge contrast improvements: - AnnotationBadge: filled variant for both dark/light modes; black text in dark, white text in light - LogLevelBadge: same contrast approach; bold weight for alert/emergency levels - Badge theme default weight reduced from 700 to 600 Typography: - Added Fredoka (300-700) as body and heading font - Added Roboto Mono as monospace font - Google Fonts loaded in index.html and Storybook previewHead - Heading weight set to 600 Screen layout refactors: - LoggingScreen: owns filterText and visibleLevels state; passes to LogControls and LogStreamPanel; removed controls prop in favor of flat props - HistoryScreen: owns searchText and methodFilter state; passes to HistoryControls and HistoryListPanel for filtering - Both screens use new ScreenLayout (Flex variant="screen") and Sidebar subcomponents - Added Flex theme with "screen" variant (overflow: hidden) - Added Paper theme "panel" variant (flex column, overflow hidden) Component enhancements: - ServerCard: added compact prop showing only header row - HistoryEntry: renamed isExpanded to isListExpanded; internal useState syncs via useEffect; individual entries toggle independently - LogControls: Select All / Deselect All toggle for level checkboxes; nowrap on level selector group - ConnectionToggle: LoadingOverlay with rounded corners for connecting state - ConnectedView: ThemeToggle ActionIcon matched to DisconnectButton height (36px) and border color (outline variant) - Storybook preview: fullscreen layout wrapper with 100vh overflow hidden New stories: - UnconnectedView: Connecting and ManyServers (12 servers for scroll testing) - ServerCard: CompactConnected and CompactDisconnected - All new components have corresponding stories Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Member
Author
Changes in this session (dd46acb, 961dc28, ee89ec9)Renamed Component foldersLess obtuse and sorts in ascending order of complexity
New element components
New group components
Badge contrast improvements
Typography
Screen layout refactors
Theme additions
Component enhancements
New stories
Checks
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
specification/v2_ux_storybook.md) defining all components, props, stories, and build order--inspector-*design tokens), and dark/light mode supportAll components follow the presentational/container pattern — they receive data and callbacks via props with no store access, making them testable in Storybook isolation.
Example Storybook Screenshots
Desktop
Tablet
Large Mobile
Outline
Measure
Test plan
npm run buildsucceedsnpm run lintsucceedsnpm run format:checksucceedsnpm run storybook:buildsucceedsnpm run storybookand visually verify components in light/dark mode🤖 Generated with Claude Code