|
| 1 | +import { FC } from 'react' |
| 2 | + |
| 3 | +import { useNotification } from '@baseapp-frontend/utils' |
| 4 | +import { NotificationState } from '@baseapp-frontend/utils/dist/hooks/useNotification/types' |
| 5 | + |
| 6 | +import { Button } from '@mui/material' |
| 7 | +import { Meta, StoryObj } from '@storybook/react' |
| 8 | + |
| 9 | +import SnackbarProvider from '..' |
| 10 | + |
| 11 | +interface SnackbarProps { |
| 12 | + message: string |
| 13 | + shouldShowProgress: boolean |
| 14 | + type: NotificationState['type'] |
| 15 | +} |
| 16 | + |
| 17 | +const SnackbarWrapper: FC<SnackbarProps> = ({ message, shouldShowProgress, type }) => { |
| 18 | + const { sendToast, sendSnack } = useNotification() |
| 19 | + const send = shouldShowProgress ? sendSnack : sendToast |
| 20 | + return ( |
| 21 | + <SnackbarProvider> |
| 22 | + <Button onClick={() => send(message, { type })}>Post message</Button> |
| 23 | + </SnackbarProvider> |
| 24 | + ) |
| 25 | +} |
| 26 | + |
| 27 | +const meta: Meta<SnackbarProps> = { |
| 28 | + title: '@baseapp-frontend | designSystem/SnackbarProvider/SnackbarProvider', |
| 29 | + component: SnackbarWrapper, |
| 30 | + argTypes: { |
| 31 | + type: { |
| 32 | + control: 'select', |
| 33 | + options: ['info', 'success', 'warning', 'error'], |
| 34 | + }, |
| 35 | + }, |
| 36 | +} |
| 37 | + |
| 38 | +export default meta |
| 39 | + |
| 40 | +type Story = StoryObj<SnackbarProps> |
| 41 | + |
| 42 | +export const InfoWithProgress: Story = { |
| 43 | + render: (args) => <SnackbarWrapper {...args} />, |
| 44 | + args: { |
| 45 | + message: 'This is an info message with progress bar', |
| 46 | + shouldShowProgress: true, |
| 47 | + type: 'info', |
| 48 | + }, |
| 49 | +} |
| 50 | + |
| 51 | +export const SuccessWithProgress: Story = { |
| 52 | + render: (args) => <SnackbarWrapper {...args} />, |
| 53 | + args: { |
| 54 | + message: 'This is a success message with progress bar', |
| 55 | + shouldShowProgress: true, |
| 56 | + type: 'success', |
| 57 | + }, |
| 58 | +} |
| 59 | + |
| 60 | +export const WarningWithProgress: Story = { |
| 61 | + render: (args) => <SnackbarWrapper {...args} />, |
| 62 | + args: { |
| 63 | + message: 'This is a warning message with progress bar', |
| 64 | + shouldShowProgress: true, |
| 65 | + type: 'warning', |
| 66 | + }, |
| 67 | +} |
| 68 | + |
| 69 | +export const ErrorWithProgress: Story = { |
| 70 | + render: (args) => <SnackbarWrapper {...args} />, |
| 71 | + args: { |
| 72 | + message: 'This is an error message with progress bar', |
| 73 | + shouldShowProgress: true, |
| 74 | + type: 'error', |
| 75 | + }, |
| 76 | +} |
| 77 | + |
| 78 | +export const LongInfoWithProgress: Story = { |
| 79 | + render: (args) => <SnackbarWrapper {...args} />, |
| 80 | + args: { |
| 81 | + message: |
| 82 | + 'Mr. Jones, of the Manor Farm, had locked the hen-houses for the night, but was too drunk to remember to shut the popholes. With the ring of light from his lantern dancing from side to side, he lurched across the yard, kicked off his boots at the back door, drew himself a last glass of beer from the barrel in the scullery, and made his way up to bed, where Mrs. Jones was already snoring. From Geoge Orwell, Animal Farm, Chapter 1', |
| 83 | + shouldShowProgress: true, |
| 84 | + type: 'info', |
| 85 | + }, |
| 86 | +} |
| 87 | + |
| 88 | +export const InfoWithoutProgress: Story = { |
| 89 | + render: (args) => <SnackbarWrapper {...args} />, |
| 90 | + args: { |
| 91 | + message: 'This is an info message without progress bar', |
| 92 | + shouldShowProgress: false, |
| 93 | + type: 'info', |
| 94 | + }, |
| 95 | +} |
| 96 | + |
| 97 | +export const SuccessWithoutProgress: Story = { |
| 98 | + render: (args) => <SnackbarWrapper {...args} />, |
| 99 | + args: { |
| 100 | + message: 'This is a success message without progress bar', |
| 101 | + shouldShowProgress: false, |
| 102 | + type: 'success', |
| 103 | + }, |
| 104 | +} |
| 105 | + |
| 106 | +export const WarningWithoutProgress: Story = { |
| 107 | + render: (args) => <SnackbarWrapper {...args} />, |
| 108 | + args: { |
| 109 | + message: 'This is a warning message without progress bar', |
| 110 | + shouldShowProgress: false, |
| 111 | + type: 'warning', |
| 112 | + }, |
| 113 | +} |
| 114 | + |
| 115 | +export const ErrorWithoutProgress: Story = { |
| 116 | + render: (args) => <SnackbarWrapper {...args} />, |
| 117 | + args: { |
| 118 | + message: 'This is an error message without progress bar', |
| 119 | + shouldShowProgress: false, |
| 120 | + type: 'error', |
| 121 | + }, |
| 122 | +} |
| 123 | + |
| 124 | +export const LongInfoWithoutProgress: Story = { |
| 125 | + render: (args) => <SnackbarWrapper {...args} />, |
| 126 | + args: { |
| 127 | + message: |
| 128 | + 'Mr. Jones, of the Manor Farm, had locked the hen-houses for the night, but was too drunk to remember to shut the popholes. With the ring of light from his lantern dancing from side to side, he lurched across the yard, kicked off his boots at the back door, drew himself a last glass of beer from the barrel in the scullery, and made his way up to bed, where Mrs. Jones was already snoring. From Geoge Orwell, Animal Farm, Chapter 1', |
| 129 | + shouldShowProgress: false, |
| 130 | + type: 'info', |
| 131 | + }, |
| 132 | +} |
0 commit comments