feat: Sonner toast integration by ilyabo · Pull Request #397 · sqlrooms/sqlrooms

ilyabo · 2026-02-27T10:05:16Z

Integrate Sonner from shadcn into @sqlrooms/ui and migrate examples from useToast to Sonner.

Summary by CodeRabbit

Chores
- Standardized notification usage across examples for consistent success/error toasts.
- Updated internal toaster to a theme-aware implementation for more reliable UI notifications.
New Features
- Exposed a global toast API with built-in success/error methods for simpler in-app notifications.
Documentation
- Added upgrade guidance and release notes detailing the new toast API and a compatibility path.

cursor · 2026-02-27T10:05:17Z

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

coderabbitai · 2026-02-27T10:05:27Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dbcf6bd and 3c2e25b.

📒 Files selected for processing (1)

docs/whats-new.md

📝 Walkthrough

Walkthrough

Replaces hook-based toasts with Sonner across examples and the UI package: components now import toast from @sqlrooms/ui and call toast.success/toast.error. packages/ui adds Sonner, exposes its toast (and ExternalToast), and retains the legacy hook as legacyToast; Toaster composes Sonner and legacy rendering.

Changes

Cohort / File(s)	Summary
Example apps — toast API update `examples/ai-rag/src/components/DataSourcesPanel.tsx`, `examples/ai/src/components/DataSourcesPanel.tsx`, `examples/canvas-sync/src/DataSourcesPanel.tsx`, `examples/canvas/src/DataSourcesPanel.tsx`, `examples/deckgl/src/components/DataPanel.tsx`, `examples/kepler/src/components/DataPanel.tsx`, `examples/query-pwa/src/DataPanel.tsx`, `examples/query/src/DataPanel.tsx`	Replaced `useToast` hook import/usage with `import { toast } from '@sqlrooms/ui'`. Replaced object-style `toast({ variant, title, description })` with `toast.success(title, { description })` and `toast.error(title, { description })`.
UI package — dependency `packages/ui/package.json`	Added runtime dependency `sonner@^2.0.7` to support Sonner.
UI package — README `packages/ui/README.md`	Updated docs to demonstrate direct `toast` import, Sonner-style `toast.success()` usage, and `legacyToast` compatibility instructions.
UI package — Toaster component `packages/ui/src/components/toaster.tsx`	Introduces Sonner integration: `Toaster(props: ToasterProps)` composes a legacy toaster UI and Sonner's `Toaster`, wires theme via `useTheme`, and adjusts internal toast markup/class ordering.
UI package — public exports `packages/ui/src/index.ts`	Export surface changed: re-exports local `toast` as `legacyToast` and adds `export { toast, type ExternalToast } from 'sonner'`, exposing Sonner's toast and type alongside legacy API.
Docs — upgrade & whats new `docs/upgrade-guide.md`, `docs/whats-new.md`	Documents breaking change (0.29.0): top-level `toast` now uses Sonner, provides Before/After examples and `legacyToast` migration guidance; minor editorial adjustments.

Sequence Diagram

sequenceDiagram
    participant Component as Example Component
    participant Sonner as Sonner.toast
    participant Toaster as UI Toaster
    participant Theme as Theme Provider
    participant DOM as Rendered UI

    Component->>Sonner: toast.success(title, {description})
    Sonner->>Toaster: enqueue notification
    Toaster->>Theme: get current theme
    Theme-->>Toaster: return theme
    Toaster->>DOM: render themed notification
    DOM-->>Component: notification visible

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I swapped the hook for Sonner's cheer,
toast.success now pops up clear,
legacyToast stays for those in flight,
themed toasts sparkle, day or night—🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat: Sonner toast integration' clearly and accurately summarizes the main objective of the changeset, which is integrating Sonner toast library into `@sqlrooms/ui` and migrating examples from useToast to Sonner.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch cursor/sonner-toast-integration-c2e8

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

docs/upgrade-guide.md (1)
11-54: Consider documenting TypeScript types for toast options.

The migration guide clearly explains the API changes and provides helpful examples. For TypeScript users who need to type their toast options, consider adding a brief note about the ExternalToast type that's exported from @sqlrooms/ui (mentioned in the AI summary).

Example addition:
import {toast, type ExternalToast} from '@sqlrooms/ui';

const options: ExternalToast = {
  description: 'File loaded',
};

toast.success('Table created', options);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/upgrade-guide.md` around lines 11 - 54, Add a short TypeScript note to
the migration section describing the exported ExternalToast type from
`@sqlrooms/ui` and show how to import it alongside toast (e.g., import { toast,
type ExternalToast } from '@sqlrooms/ui') and use it to type an options object
passed to toast.success; also mention that legacyToast continues to accept the
old object shape so users can type legacy usages with ExternalToast as well.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@docs/upgrade-guide.md`:
- Around line 11-54: Add a short TypeScript note to the migration section
describing the exported ExternalToast type from `@sqlrooms/ui` and show how to
import it alongside toast (e.g., import { toast, type ExternalToast } from
'@sqlrooms/ui') and use it to type an options object passed to toast.success;
also mention that legacyToast continues to accept the old object shape so users
can type legacy usages with ExternalToast as well.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d14e420 and dbcf6bd.

📒 Files selected for processing (2)

docs/upgrade-guide.md
docs/whats-new.md

feat(ui): add sonner toaster and migrate example toasts

d14e420

ilyabo changed the title ~~Sonner toast integration~~ feat: Sonner toast integration Feb 27, 2026

ilyabo marked this pull request as ready for review February 27, 2026 11:22

docs: add Sonner toast notes for upcoming minor

dbcf6bd

coderabbitai Bot reviewed Feb 27, 2026

View reviewed changes

Merge branch 'main' into cursor/sonner-toast-integration-c2e8

3c2e25b

ilyabo merged commit 487861d into main Feb 27, 2026
3 of 4 checks passed

ilyabo deleted the cursor/sonner-toast-integration-c2e8 branch February 27, 2026 15:28

This was referenced Mar 4, 2026

feat: Sonner toast integration #415

Merged

feat: add kepler-query example combining map and SQL editor side by side #427

Closed

Navigation Menu

Repository navigation

feat: Sonner toast integration - #397

feat: Sonner toast integration#397
ilyabo merged 3 commits into
mainfrom
cursor/sonner-toast-integration-c2e8

ilyabo commented Feb 27, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

cursor Bot commented Feb 27, 2026

Uh oh!

coderabbitai Bot commented Feb 27, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated Code Review Effort

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ilyabo commented Feb 27, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

cursor Bot commented Feb 27, 2026

Uh oh!

coderabbitai Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated Code Review Effort

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ilyabo commented Feb 27, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 27, 2026 •

edited

Loading