105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
|
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||
|
|
import { useCallback } from 'react'
|
||
|
|
import Toast, { ToastProvider, useToastContext } from '.'
|
||
|
|
|
||
|
|
const ToastControls = () => {
|
||
|
|
const { notify } = useToastContext()
|
||
|
|
|
||
|
|
const trigger = useCallback((type: 'success' | 'error' | 'warning' | 'info') => {
|
||
|
|
notify({
|
||
|
|
type,
|
||
|
|
message: `This is a ${type} toast`,
|
||
|
|
children: type === 'info' ? 'Additional details can live here.' : undefined,
|
||
|
|
})
|
||
|
|
}, [notify])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-wrap gap-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
|
||
|
|
onClick={() => trigger('success')}
|
||
|
|
>
|
||
|
|
Success
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
|
||
|
|
onClick={() => trigger('info')}
|
||
|
|
>
|
||
|
|
Info
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
|
||
|
|
onClick={() => trigger('warning')}
|
||
|
|
>
|
||
|
|
Warning
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
|
||
|
|
onClick={() => trigger('error')}
|
||
|
|
>
|
||
|
|
Error
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ToastProviderDemo = () => {
|
||
|
|
return (
|
||
|
|
<ToastProvider>
|
||
|
|
<div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
|
||
|
|
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Toast provider</div>
|
||
|
|
<ToastControls />
|
||
|
|
</div>
|
||
|
|
</ToastProvider>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const StaticToastDemo = () => {
|
||
|
|
return (
|
||
|
|
<div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
|
||
|
|
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Static API</div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="self-start rounded-md border border-divider-subtle bg-background-default px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
|
||
|
|
onClick={() => {
|
||
|
|
const handle = Toast.notify({
|
||
|
|
type: 'success',
|
||
|
|
message: 'Saved changes',
|
||
|
|
duration: 2000,
|
||
|
|
})
|
||
|
|
setTimeout(() => handle.clear?.(), 2500)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Trigger Toast.notify()
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const meta = {
|
||
|
|
title: 'Base/Feedback/Toast',
|
||
|
|
component: ToastProviderDemo,
|
||
|
|
parameters: {
|
||
|
|
layout: 'centered',
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component: 'ToastProvider based notifications and the static Toast.notify helper. Buttons showcase each toast variant.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tags: ['autodocs'],
|
||
|
|
} satisfies Meta<typeof ToastProviderDemo>
|
||
|
|
|
||
|
|
export default meta
|
||
|
|
type Story = StoryObj<typeof meta>
|
||
|
|
|
||
|
|
export const Provider: Story = {}
|
||
|
|
|
||
|
|
export const StaticApi: Story = {
|
||
|
|
render: () => <StaticToastDemo />,
|
||
|
|
}
|