Update dependencies (security warnings), finish migration away from bits-ui/shadcn-svelte, and various cleanups #685
Conversation
…cn-svelte Button, simplifying in many cases
…(no longer need /ui subdirectory)
WalkthroughThis set of changes migrates the frontend codebase from custom/local UI button and separator components to those provided by the external Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant svelte-ux
participant LocalUI
App->>svelte-ux: Import Button, Separator, NavItem
App--xLocalUI: Remove usage of local Button/Separator
App->>svelte-ux: Use external components in UI
App->>App: Apply custom styles via settings()
Possibly related PRs
Suggested reviewers
Poem
Warning Review ran into problems🔥 ProblemsGitHub Actions and Pipeline Checks: Resource not accessible by integration - https://docs.github.com/rest/actions/workflow-runs#list-workflow-runs-for-a-repository. Please grant the required permissions to the CodeRabbit GitHub App under the organization or repository settings. 🪧 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: 0
🧹 Nitpick comments (1)
frontend/src/lib/components/SortButton.svelte (1)
27-30: Simplified Button implementation.Props spreading works correctly. Consider consistent styling approach with other components that use explicit classes.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (20)
frontend/package.json(2 hunks)frontend/src/app.css(0 hunks)frontend/src/lib/components/NavigationMenu.svelte(3 hunks)frontend/src/lib/components/PageHeader.svelte(2 hunks)frontend/src/lib/components/ResetZoomButton.svelte(1 hunks)frontend/src/lib/components/Separator.svelte(1 hunks)frontend/src/lib/components/SortButton.svelte(3 hunks)frontend/src/lib/components/SplitView.svelte(0 hunks)frontend/src/lib/components/charts/TransformControls.svelte(2 hunks)frontend/src/lib/components/ui/button/button.svelte(0 hunks)frontend/src/lib/components/ui/button/index.ts(0 hunks)frontend/src/lib/components/ui/separator/index.ts(0 hunks)frontend/src/lib/components/ui/separator/separator.svelte(0 hunks)frontend/src/routes/+layout.svelte(2 hunks)frontend/src/routes/[conf]/+page.svelte(1 hunks)frontend/src/routes/[conf]/[name]/offline/+layout.svelte(1 hunks)frontend/src/routes/[conf]/[name]/offline/data/+layout.svelte(1 hunks)frontend/src/routes/[conf]/[name]/online/+layout.svelte(1 hunks)frontend/src/routes/[conf]/[name]/online/observability/drift/+page.svelte(2 hunks)frontend/src/routes/[conf]/[name]/overview/+page.svelte(3 hunks)
💤 Files with no reviewable changes (6)
- frontend/src/lib/components/ui/separator/separator.svelte
- frontend/src/lib/components/ui/separator/index.ts
- frontend/src/app.css
- frontend/src/lib/components/ui/button/button.svelte
- frontend/src/lib/components/SplitView.svelte
- frontend/src/lib/components/ui/button/index.ts
🔇 Additional comments (39)
frontend/src/routes/[conf]/+page.svelte (1)
11-11: LGTM - updated import pathImport path updated to use standalone Separator component.
frontend/src/routes/[conf]/[name]/offline/data/+layout.svelte (1)
11-11: LGTM - updated import pathImport path updated to use standalone Separator component.
frontend/src/routes/[conf]/[name]/online/+layout.svelte (1)
6-6: LGTM - updated import pathImport path updated to use standalone Separator component.
frontend/src/routes/[conf]/[name]/offline/+layout.svelte (1)
6-6: LGTM - updated import pathImport path updated to use standalone Separator component.
frontend/src/lib/components/charts/TransformControls.svelte (2)
4-4: LGTM - simplified importChanged from local UI button to svelte-ux package.
68-68: LGTM - simplified Button APIUsing
iconOnlyprop instead of multiple props for styling.Also applies to: 76-77, 84-85
frontend/src/lib/components/PageHeader.svelte (2)
3-3: Migrated to svelte-ux Button.Importing from external package instead of local implementation.
18-25: Button styling updated with explicit Tailwind classes.Removed variant props in favor of direct utility classes for consistent styling approach.
frontend/src/routes/[conf]/[name]/online/observability/drift/+page.svelte (2)
3-3: Simplified imports from svelte-ux.Consolidated Button and Drawer imports from external package.
390-393: Ghost variant replaced with direct Tailwind classes.Removed variant prop, keeping consistent with new styling approach.
frontend/src/routes/[conf]/[name]/overview/+page.svelte (4)
20-20: Consolidated UI component imports.Using svelte-ux components consistently across the application.
40-40: Simplified Separator import path.Direct import from component file instead of index.
474-478: Variant prop replaced with explicit styling.Direct Tailwind classes used for consistent styling approach.
482-485: Simplified close button styling.Removed ghost variant in favor of direct class application.
frontend/src/routes/+layout.svelte (2)
4-4: Added utility for class composition.Imported cls helper for clean class concatenation in settings.
20-36: Centralized NavItem styling configuration.Implemented global styling for svelte-ux NavItem components via settings to ensure consistent appearance across the application.
frontend/src/lib/components/ResetZoomButton.svelte (3)
2-4: Clean migration to svelte-ux.Imports updated correctly for external library.
8-8: Props typing updated appropriately.Type extends ComponentProps from ButtonUX component.
11-20: Explicit styling replaces variant props.Migrated from variant-based styling to explicit Tailwind classes with proper class merging.
frontend/src/lib/components/SortButton.svelte (2)
2-4: Imports updated for svelte-ux.Correctly switched to external Button component.
10-15: Props typing updated for Button.ComponentProps correctly extended for svelte-ux Button.
frontend/src/lib/components/Separator.svelte (2)
1-13: Well-structured component props.Clean API with properly typed optional props.
15-23: Clean implementation with flexible styling.Good use of cls utility for class merging and conditional styles.
frontend/package.json (5)
26-50: Dependencies updated correctly.Newer versions address security warnings.
60-66: Successful migration from bits-ui.Removed deprecated dependencies and added svelte-ux.
72-72: Vite override updated.Ensures consistent version throughout dependencies.
76-76: Linux dependency updated.Patch version bump for security.
28-28: Note adapter change.Switched from auto/static adapters to node adapter. Verify deployment implications.
frontend/src/lib/components/NavigationMenu.svelte (11)
2-12: Updated imports to use svelte-ux components.Imports now use svelte-ux UI components, replacing custom implementations.
Also applies to: 22-22
85-87: Improved semantic HTML for logo link.Changed from Button to anchor tag - better semantics for navigation.
90-98: Updated search button styling.Explicit border and fullWidth prop replace variant styling. Text uses new color scheme.
110-113: Replaced Button with NavItem for Home navigation.NavItem handles active state automatically based on currentUrl.
117-117: Updated section label styling.Using new color scheme with text-surface-content/40.
119-124: Simplified navigation items with NavItem component.Replaced custom navigation buttons with NavItem components.
130-130: Updated Resources section label styling.Consistent with other section labels.
132-135: Replaced Button with NavItem for docs link.Using consistent component for all navigation items.
137-144: Replaced Button with NavItem for Support link.Using consistent component for all external links.
146-149: Updated feedback button styling.Explicit border and padding classes replace variant props.
153-166: Updated user menu toggle styling.Using new color scheme and explicit styling instead of variant props.
ZIP-421 Replace shadcn-svelte / bits-ui components with Svelte UX
Since our project is using Svelte 5, it would be nice to update shadcn-svelte and bits-ui to the newer Svelte 5 API versions. Also should bring svelte 5 to the latest version. It would remove the npm warning every time we install/update any package. |
sean-zlai
deleted the
sean/zip-687-bump-all-dependencies-resolve-security-alerts
branch
Summary
Resolves ZIP-687 and ZIP-421
Checklist