feat(devtools): enhance UI/UX components and update package versions #171
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request updates version information and changelogs for both the web and devtools packages, adds a new Storybook configuration option, and restructures several UI components and corresponding test stories across the devtools package. The changes include switching from primitive to object-based data for certain flags and remote configuration values, enhancing the devtools interface with toggle functionality and state persistence, and refining component markup and styling. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant DS as Devtools.svelte
participant ST as Storage (getSections/setSections)
participant LS as localStorage
U->>DS: Load devtools interface
DS->>ST: getSections()
ST->>LS: Retrieve "sections" data
LS-->>ST: Return sections state
ST-->>DS: Return sections state
DS->>U: Render sections (open/closed)
U->>DS: Click toggle section button
DS->>DS: Update openSections state
DS->>ST: setSections(updatedState)
ST->>LS: Store updated state
Possibly related PRs
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/devtools/.storybook/main.ts (1)
3-5: Good privacy practiceAdding the
disableTelemetry: trueoption to the Storybook configuration is a positive change that enhances privacy by preventing collection of usage data.Consider adding a comment explaining why telemetry is disabled (e.g., for privacy reasons, company policy, etc.) to provide context for other developers:
core: { + // Disabled for privacy reasons disableTelemetry: true, },packages/devtools/src/lib/storage.ts (1)
33-39: Clean implementation of section state persistenceThe
setSectionsfunction provides a clean way to persist section visibility state with proper error handling. Consider adding a third parameter to the localStorage key similar to howDEVTOOLS_KEYis used for showing devtools.+ const SECTIONS_KEY = "abby-sections"; - localStorage.getItem("sections"); + localStorage.getItem(SECTIONS_KEY); - localStorage.setItem("sections", JSON.stringify(sections)); + localStorage.setItem(SECTIONS_KEY, JSON.stringify(sections));
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/web/CHANGELOG.md(1 hunks)apps/web/package.json(1 hunks)packages/devtools/.storybook/main.ts(1 hunks)packages/devtools/CHANGELOG.md(1 hunks)packages/devtools/package.json(1 hunks)packages/devtools/src/Devtools.stories.ts(1 hunks)packages/devtools/src/Devtools.svelte(6 hunks)packages/devtools/src/components/ChevronIcon.svelte(1 hunks)packages/devtools/src/components/Input.svelte(2 hunks)packages/devtools/src/components/Modal.svelte(2 hunks)packages/devtools/src/components/Select.svelte(1 hunks)packages/devtools/src/components/Switch.svelte(1 hunks)packages/devtools/src/lib/storage.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: build
🔇 Additional comments (49)
packages/devtools/CHANGELOG.md (1)
3-7: Version update properly documentedThe changelog entry for version 8.0.2 clearly indicates the patch change for UI/UX improvements, which matches the version update in package.json.
apps/web/package.json (1)
3-3: Version bump looks goodThe version update from 0.2.41 to 0.2.42 properly reflects the integration of updated dependencies as documented in the CHANGELOG.md.
packages/devtools/package.json (1)
3-3: Version update is consistentThe version update to 8.0.2 matches the changelog entry and follows semantic versioning principles for a patch release with UI/UX improvements.
apps/web/CHANGELOG.md (1)
3-9: Dependencies update properly documentedThe changelog correctly documents the update of dependencies to @tryabby/devtools@8.0.2 and @tryabby/next@7.0.1, maintaining consistent version tracking across the project.
packages/devtools/src/components/ChevronIcon.svelte (1)
1-33: Well-structured and clean implementation of the chevron icon componentThe component is cleanly implemented with a proper TypeScript prop definition, semantic HTML structure, and well-organized CSS. The icon gracefully transitions between states with a rotation animation.
packages/devtools/src/Devtools.stories.ts (2)
12-14: Object-based flag values improve extensibilityThe change from primitive boolean values to objects with a
valueproperty creates a more consistent data structure that can be extended with additional metadata in the future if needed.
16-19: Consistent structure for remote config valuesSimilar to the flags, the remote config values have been updated to use objects with a
valueproperty, maintaining consistency across different types of data (string, number, object).packages/devtools/src/components/Input.svelte (3)
9-28: Improved input component structure with better semanticsThe new container wrapping the label and input elements creates a more cohesive UI component. The added type indicator in the label provides valuable context to users about the expected input format.
31-54: Enhanced styling with visual feedback for interactionThe new container styling with hover effects and proper spacing improves the user experience by providing visual feedback during interaction. The label styling is well-defined with appropriate font sizes and color contrast.
56-74: Refined input field styling with improved focus statesThe input field styling has been refined with better padding, border-radius, and a more distinctive focus state using a colored border and subtle box shadow. The placeholder styling improves readability.
packages/devtools/src/lib/storage.ts (2)
15-19: Well-defined type for section visibility stateThe
Sectionstype clearly defines the structure for tracking visibility state of the three main sections in the devtools UI.
21-31: Robust implementation of section state retrievalThe
getSectionsfunction properly handles localStorage retrieval with appropriate error handling and fallback to default values. The use of TypeScript'ssatisfiesoperator ensures type safety.packages/devtools/src/components/Modal.svelte (18)
3-3: Good addition of fade transition to complement scale.The addition of the fade transition provides a more polished visual effect when showing/hiding components. This complements the existing scale transition well.
9-10: Improved dialog implementation with Melt UI.Good implementation of the more structured Melt UI dialog API. This approach creates a more accessible and standard dialog implementation.
14-14: Better button label for clarity.Changing from "JSON Editor" to "Edit JSON" makes the button purpose clearer and follows action-verb convention for buttons.
17-17: Improved backdrop with fade transition.Adding the fade transition to the backdrop creates a smoother opening/closing effect with proper duration.
19-19: Smoother animation with adjusted duration and scale.Increasing the duration to 200ms and setting a more natural starting scale (0.95) creates a more polished animation effect.
24-42: Well-structured modal header with proper accessibility.The addition of a proper header section with title and close button improves the modal's usability and accessibility. The SVG icon for close is well-implemented with appropriate attributes.
43-50: Better container structure for the editor.Wrapping the JsonEditor in a container with fixed height and overflow settings improves the user experience by making the content area more manageable.
60-60: More descriptive button text.Changing from "Save" to "Save Changes" provides clearer context to users about the action being performed.
70-91: Improved trigger button styling with proper states.The updated styling for the trigger button creates a more polished and interactive UI element with proper hover and focus states for better accessibility.
98-101: Enhanced backdrop with blur effect.The increased opacity and addition of backdrop filter creates a more modern and visually appealing overlay effect.
110-121: Improved modal content styling.The updated styling for the content area with new background color, border radius, and shadow creates a more polished and cohesive design.
122-127: Consistent font styling.Applying the same monospace font family to both the content and buttons ensures visual consistency throughout the component.
129-162: Well-designed modal header with good visual hierarchy.The modal header implementation is clean with good spacing, alignment, and visual separation. The close button has proper hover states and accessibility considerations.
164-168: Fixed height container helps constrain content.Adding a fixed height with overflow handling for the editor container improves usability by preventing the modal from growing too large.
173-176: Improved button spacing and background.The updated button area styling with proper gap, background, and border creates a more polished and separated action area.
180-186: More modern button styling.The updated styling for the buttons with better border radius, padding, and transitions creates a more modern and interactive design.
189-194: Enhanced cancel button.The improved styling for the cancel button with better hover effects provides a more cohesive experience.
198-204: Visually distinctive save button.The save button now has stronger visual weight with better color and hover effect, making the primary action more apparent.
packages/devtools/src/components/Select.svelte (5)
8-39: Improved select component structure with custom dropdown indicator.The restructured select component with nested containers provides better layout control and adds a custom dropdown indicator for improved usability. The SVG icon clearly indicates the dropdown functionality.
42-58: Better container styling with hover effects.The select container now has proper padding, border-radius, and a subtle hover effect that improves user interaction feedback.
60-76: Improved layout for the select wrapper and icon.The positioning of the select wrapper and icon creates a more polished UI with proper alignment and spacing.
80-96: Enhanced select element styling with better focus state.The select element now has improved styling with proper appearance reset, padding, border, and a distinctive focus state using the theme color.
99-102: Consistent styling for option elements.The option elements now have consistent styling with the overall theme, improving the visual cohesion of the dropdown.
packages/devtools/src/components/Switch.svelte (5)
8-26: Improved switch component with modern toggle design.The restructured switch component replaces the basic checkbox with a more modern toggle track and thumb design. The new structure properly associates the label with the input for better accessibility.
29-58: Enhanced container and label styling.The switch container now has proper padding, border-radius, and hover effects. The label styling is improved with proper text overflow handling and cursor indicator.
60-66: Better hidden input implementation.The checkbox input is properly hidden while maintaining accessibility by using opacity instead of visibility.
73-92: Well-designed toggle track and thumb.The toggle track and thumb have appropriate dimensions, colors, and transitions for a smooth, modern toggle effect.
94-104: Proper styling for checked and focus states.The checked and focus states are well-implemented with appropriate color changes and transitions. The focus state includes a subtle box shadow for accessibility.
packages/devtools/src/Devtools.svelte (9)
12-21: Good addition of slide transition and storage utilities.The addition of the slide transition and storage utilities will help create smoother UI transitions and maintain state between sessions.
37-46: Well-implemented section state management.The introduction of an object to track the open/closed state of sections with a toggle function is a good approach for managing UI state. Persisting this state through
setSectionsenhances the user experience.
71-72: Good use of persistent storage for section state.Loading saved section states from storage ensures user preferences are maintained between sessions.
92-92: Animation duration increase for smoother transitions.Increasing the crossfade duration to 300ms creates smoother transitions between states.
135-138: Added environment indicator for better context.The environment tag provides important context to users about which environment they're working with, using appropriate styling to draw attention.
141-292: Excellent section organization with collapsible UI.The implementation of collapsible sections with headers, chevron indicators, and slide transitions creates a more organized and user-friendly interface. The empty state handling for each section provides useful feedback when there are no items to display.
294-302: Good global empty state handling.The global empty state message provides clear guidance when no items are found across all sections.
325-325: Simplified toggle button label.Using "Ab" as the toggle button label is concise and recognizable.
330-341: Good use of CSS variables for theming.The introduction of CSS variables for colors, spacing, and other design elements creates a more maintainable and consistent styling approach.
| const flagsEntries = Object.entries(flags || {}); | ||
| const remoteConfigEntries = Object.entries(remoteConfig || {}); | ||
| const testsEntries = Object.entries(tests || {}); | ||
|
|
||
| $: { | ||
| console.log(remoteConfigEntries); | ||
| } |
There was a problem hiding this comment.
Unnecessary console.log statement.
There's a console.log statement in a reactive block that should be removed before production.
-$: {
- console.log(remoteConfigEntries);
-}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const flagsEntries = Object.entries(flags || {}); | |
| const remoteConfigEntries = Object.entries(remoteConfig || {}); | |
| const testsEntries = Object.entries(tests || {}); | |
| $: { | |
| console.log(remoteConfigEntries); | |
| } | |
| const flagsEntries = Object.entries(flags || {}); | |
| const remoteConfigEntries = Object.entries(remoteConfig || {}); | |
| const testsEntries = Object.entries(tests || {}); |
Summary by CodeRabbit
New Features
Style