feat(app): refactor Sources components and add custom Mantine UI variants

[elizabetdev]

Summary

In preparation for the new onboarding flow, this PR reorganizes source management components into a dedicated Sources/ folder, introduces a consistent custom button/action icon variant system, and improves the Storybook development environment.

Changes

🗂️ Sources Component Refactoring

• Move SourceForm to Sources/ subfolder with reusable SourcesList component
• Add barrel export file (index.ts) for cleaner imports
• Relocate form action buttons (Cancel, Save, Delete) from top to bottom of SourceForm (there were some complaints before about the position of these buttons)
• Update import paths in OnboardingModal.tsx, DBSearchPage.tsx, and TeamPage.tsx

🎨 Custom Mantine UI Variants

Add primary, secondary, and danger button/action icon variants in mantineTheme.ts:

Variant	Description
primary	Light green - for primary/confirm actions
secondary	Default styled - for secondary/cancel actions
danger	Light red - for destructive actions

Updated components: ConfirmDeleteMenu, ErrorBoundary, SourceForm

📚 Improve Storybook with font switching and component stories

• Add font switching toolbar (Inter, Roboto, IBM Plex Mono, Roboto Mono)
• Migrate from react-query to @tanstack/react-query in preview
• Fix next/router webpack alias for component stories
• Add stories for Button, ActionIcon, ErrorBoundary, SourceForm, and SourcesList

🔧 Update ErrorBoundary styling with danger variant

• Change alert color from orange to red
• Update icon to IconExclamationCircle
• Use variant="danger" for retry button

Testing

• Verify Storybook builds and runs: yarn app:storybook
• Verify TeamPage sources section renders correctly
• Verify source create/edit flow works
• Test light/dark theme and font switching in Storybook

Screenshots

As you can see the buttons are now positioned on bottom

We should from now on, only use these buttons variants primary | secondary | danger

The SourcesList is now a component. Why? It might be used in the new onboarding flow.

[changeset-bot]

🦋 Changeset detected

Latest commit: ec4a48a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@hyperdx/app	Minor
@hyperdx/api	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
hyperdx-v2-oss-app	Ready	Preview, Comment	Jan 7, 2026 1:00pm

[claude]

Code Review

✅ No critical issues found.

Minor suggestions (optional):

• ⚠️ SourcesList.tsx:148 - withBorder={false} in TeamPage → Inconsistent with other sections that wrap content in Card components (ConnectionsSection, IntegrationsSection use Card, but SourcesSection renders card-less). Consider wrapping SourcesList in a Card for consistency or update other sections.

• 📝 mantineTheme.ts:250,342 - Custom variants use inline theme vars → Consider extracting repeated color logic into a helper function to reduce duplication between Button and ActionIcon variants.

Overall, this is a solid refactor that improves code organization and establishes a consistent UI pattern going forward. The custom Mantine variants are well-implemented and the component extraction makes the Sources functionality more reusable.

[github-actions]

E2E Test Results

✅ All tests passed • 56 passed • 4 skipped • 725s

Status	Count
✅ Passed	56
❌ Failed	0
⚠️ Flaky	0
⏭️ Skipped	4

Tests ran across 4 shards in parallel.

View full report →

[pulpdrew]

Couple of minor comments on a storybook, but overall looks great!

[pulpdrew]

LGTM