Skip to content

Add Storybook stories for sonner toast wrapper #888

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Austinaminu2 merged 1 commit into from
Sep 28, 2026
Merged

Add Storybook stories for sonner toast wrapper #888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 135 additions & 0 deletions components/ui/sonner.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import type { Meta, StoryObj } from '@storybook/react'
import { Toaster } from '@/components/ui/sonner'
import { Button } from '@/components/ui/button'
import { toast } from 'sonner'

const meta: Meta<typeof Toaster> = {
title: 'UI/Sonner',
component: Toaster,
tags: ['autodocs'],
parameters: {
layout: 'centered',
},
}

export default meta
type Story = StoryObj<typeof meta>

function ToastTriggers() {
return (
<div className="flex gap-3 flex-wrap">
<Button
onClick={() =>
toast.success('Success notification', {
description: 'This is a success toast with a description',
})
}
variant="default"
>
Show Success
</Button>
<Button
onClick={() =>
toast.error('Error notification', {
description: 'Something went wrong',
})
}
variant="destructive"
>
Show Error
</Button>
<Button
onClick={() =>
toast.info('Information', {
description: 'Here is some useful information',
})
}
variant="outline"
>
Show Info
</Button>
<Button
onClick={() =>
toast.warning('Warning', {
description: 'Please be careful with this action',
})
}
variant="outline"
>
Show Warning
</Button>
<Button
onClick={() => toast.loading('Loading...', { id: 'loading-toast' })}
variant="outline"
>
Show Loading
</Button>
<Button
onClick={() => toast.dismiss('loading-toast')}
variant="ghost"
>
Dismiss
</Button>
</div>
)
}

export const Default: Story = {
render: () => (
<>
<Toaster />
<ToastTriggers />
</>
),
}

export const SuccessToast: Story = {
render: () => (
<>
<Toaster />
<Button onClick={() => toast.success('Operation completed successfully!')}>
Trigger Success Toast
</Button>
</>
),
}

export const ErrorToast: Story = {
render: () => (
<>
<Toaster />
<Button onClick={() => toast.error('An error occurred', { description: 'Please try again' })}>
Trigger Error Toast
</Button>
</>
),
}

export const InfoToast: Story = {
render: () => (
<>
<Toaster />
<Button onClick={() => toast.info('New update available', { description: 'Click to learn more' })}>
Trigger Info Toast
</Button>
</>
),
}

export const WithLongMessage: Story = {
render: () => (
<>
<Toaster />
<Button
onClick={() =>
toast.success('Transaction confirmed', {
description:
'Your transaction has been successfully processed and added to the blockchain. You can view it in the explorer.',
})
}
>
Trigger Long Message Toast
</Button>
</>
),
}
168 changes: 168 additions & 0 deletions components/ui/tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { Card } from '@/components/ui/card'

const meta: Meta<typeof Tabs> = {
title: 'UI/Tabs',
component: Tabs,
tags: ['autodocs'],
parameters: {
layout: 'centered',
},
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
render: () => (
<Tabs defaultValue="tab1" className="w-[400px]">
<TabsList>
<TabsTrigger value="tab1">All</TabsTrigger>
<TabsTrigger value="tab2">Receiving</TabsTrigger>
<TabsTrigger value="tab3">Sending</TabsTrigger>
</TabsList>
<TabsContent value="tab1">
<Card className="p-4">
<p className="text-sm">All transactions and activity</p>
</Card>
</TabsContent>
<TabsContent value="tab2">
<Card className="p-4">
<p className="text-sm">Incoming streams and transfers</p>
</Card>
</TabsContent>
<TabsContent value="tab3">
<Card className="p-4">
<p className="text-sm">Outgoing streams and transfers</p>
</Card>
</TabsContent>
</Tabs>
),
}

export const FourTabs: Story = {
render: () => (
<Tabs defaultValue="tab1" className="w-[500px]">
<TabsList>
<TabsTrigger value="tab1">Overview</TabsTrigger>
<TabsTrigger value="tab2">History</TabsTrigger>
<TabsTrigger value="tab3">Settings</TabsTrigger>
<TabsTrigger value="tab4">Advanced</TabsTrigger>
</TabsList>
<TabsContent value="tab1">
<Card className="p-4">
<p className="text-sm">Overview tab content</p>
</Card>
</TabsContent>
<TabsContent value="tab2">
<Card className="p-4">
<p className="text-sm">History tab content with transaction list</p>
</Card>
</TabsContent>
<TabsContent value="tab3">
<Card className="p-4">
<p className="text-sm">Settings tab content with preferences</p>
</Card>
</TabsContent>
<TabsContent value="tab4">
<Card className="p-4">
<p className="text-sm">Advanced tab content with developer options</p>
</Card>
</TabsContent>
</Tabs>
),
}

export const LineVariant: Story = {
render: () => (
<Tabs defaultValue="tab1" className="w-[400px]">
<TabsList variant="line">
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
<TabsTrigger value="tab3">Tab 3</TabsTrigger>
</TabsList>
<TabsContent value="tab1">
<Card className="p-4">
<p className="text-sm">Line variant tab 1</p>
</Card>
</TabsContent>
<TabsContent value="tab2">
<Card className="p-4">
<p className="text-sm">Line variant tab 2</p>
</Card>
</TabsContent>
<TabsContent value="tab3">
<Card className="p-4">
<p className="text-sm">Line variant tab 3</p>
</Card>
</TabsContent>
</Tabs>
),
}

export const DisabledTab: Story = {
render: () => (
<Tabs defaultValue="tab1" className="w-[400px]">
<TabsList>
<TabsTrigger value="tab1">Enabled</TabsTrigger>
<TabsTrigger value="tab2" disabled>
Disabled
</TabsTrigger>
<TabsTrigger value="tab3">Enabled</TabsTrigger>
</TabsList>
<TabsContent value="tab1">
<Card className="p-4">
<p className="text-sm">This tab is enabled</p>
</Card>
</TabsContent>
<TabsContent value="tab3">
<Card className="p-4">
<p className="text-sm">This tab is also enabled</p>
</Card>
</TabsContent>
</Tabs>
),
}

function InteractiveTabsExample() {
const [activeTab, setActiveTab] = useState('tab1')

return (
<div className="w-[400px] space-y-4">
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList>
<TabsTrigger value="tab1">Stream</TabsTrigger>
<TabsTrigger value="tab2">Transfer</TabsTrigger>
<TabsTrigger value="tab3">Claim</TabsTrigger>
</TabsList>
<TabsContent value="tab1">
<Card className="p-4">
<p className="text-sm font-medium mb-2">Recurring Stream</p>
<p className="text-xs text-muted-foreground">Set up a continuous payment stream over time</p>
</Card>
</TabsContent>
<TabsContent value="tab2">
<Card className="p-4">
<p className="text-sm font-medium mb-2">One-time Transfer</p>
<p className="text-xs text-muted-foreground">Send tokens immediately to an address</p>
</Card>
</TabsContent>
<TabsContent value="tab3">
<Card className="p-4">
<p className="text-sm font-medium mb-2">Claim Tokens</p>
<p className="text-xs text-muted-foreground">Claim available tokens from a stream</p>
</Card>
</TabsContent>
</Tabs>
<p className="text-xs text-muted-foreground">
Use arrow keys to navigate between tabs (or try Alt+Arrow on some browsers)
</p>
</div>
)
}

export const Interactive: Story = {
render: () => <InteractiveTabsExample />,
}
Loading
Loading