@12-apps/ui 1.0.0

package/src/components/feedback/Sonner/Sonner.stories.tsx

@@ -0,0 +1,698 @@
+import { Box, Button, Paper, Stack, Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { toast,Toaster } from './Sonner';
+
+const meta: Meta<typeof Toaster> = {
+  title: 'Feedback/Sonner',
+  component: Toaster,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Beautiful, customizable toast notifications powered by Sonner. Provides elegant feedback for user actions with various styles and positions.',
+      },
+    },
+  },
+  tags: ['autodocs', 'component:Sonner'],
+  argTypes: {
+    position: {
+      control: { type: 'select' },
+      options: [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-left',
+        'bottom-center',
+        'bottom-right',
+      ],
+      description: 'Toast position on screen',
+    },
+    theme: {
+      control: { type: 'select' },
+      options: ['light', 'dark', 'system'],
+      description: 'Toast theme',
+    },
+    expand: {
+      control: 'boolean',
+      description: 'Expand toasts by default',
+    },
+    richColors: {
+      control: 'boolean',
+      description: 'Use rich colors for toast types',
+    },
+    closeButton: {
+      control: 'boolean',
+      description: 'Show close button on toasts',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <Toaster position="bottom-right" />
+      <Button variant="contained" onClick={() => toast('This is a default toast notification')}>
+        Show Toast
+      </Button>
+    </>
+  ),
+};
+
+export const ToastTypes: Story = {
+  render: () => (
+    <>
+      <Toaster richColors closeButton />
+      <Stack spacing={2}>
+        <Button variant="contained" onClick={() => toast('Default toast message')}>
+          Default Toast
+        </Button>
+
+        <Button
+          variant="contained"
+          color="success"
+          onClick={() => toast.success('Operation completed successfully!')}
+        >
+          Success Toast
+        </Button>
+
+        <Button
+          variant="contained"
+          color="error"
+          onClick={() => toast.error('Something went wrong. Please try again.')}
+        >
+          Error Toast
+        </Button>
+
+        <Button
+          variant="contained"
+          color="warning"
+          onClick={() => toast.warning('Please review before proceeding')}
+        >
+          Warning Toast
+        </Button>
+
+        <Button
+          variant="contained"
+          color="info"
+          onClick={() => toast.info('New updates are available')}
+        >
+          Info Toast
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+const ToastPositionsComponent = () => {
+  const [position, setPosition] = React.useState<
+    'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  >('bottom-right');
+
+  return (
+    <>
+      <Toaster position={position} />
+      <Stack spacing={3}>
+        <Typography variant="h6">Toast Position</Typography>
+
+        <Box display="grid" gridTemplateColumns="repeat(3, 1fr)" gap={2}>
+          <Button
+            variant={position === 'top-left' ? 'contained' : 'outlined'}
+            onClick={() => {
+              setPosition('top-left');
+              toast('Top Left Position');
+            }}
+          >
+            Top Left
+          </Button>
+
+          <Button
+            variant={position === 'top-center' ? 'contained' : 'outlined'}
+            onClick={() => {
+              setPosition('top-center');
+              toast('Top Center Position');
+            }}
+          >
+            Top Center
+          </Button>
+
+          <Button
+            variant={position === 'top-right' ? 'contained' : 'outlined'}
+            onClick={() => {
+              setPosition('top-right');
+              toast('Top Right Position');
+            }}
+          >
+            Top Right
+          </Button>
+
+          <Button
+            variant={position === 'bottom-left' ? 'contained' : 'outlined'}
+            onClick={() => {
+              setPosition('bottom-left');
+              toast('Bottom Left Position');
+            }}
+          >
+            Bottom Left
+          </Button>
+
+          <Button
+            variant={position === 'bottom-center' ? 'contained' : 'outlined'}
+            onClick={() => {
+              setPosition('bottom-center');
+              toast('Bottom Center Position');
+            }}
+          >
+            Bottom Center
+          </Button>
+
+          <Button
+            variant={position === 'bottom-right' ? 'contained' : 'outlined'}
+            onClick={() => {
+              setPosition('bottom-right');
+              toast('Bottom Right Position');
+            }}
+          >
+            Bottom Right
+          </Button>
+        </Box>
+      </Stack>
+    </>
+  );
+};
+
+export const ToastPositions: Story = {
+  render: () => <ToastPositionsComponent />,
+};
+
+export const CustomToasts: Story = {
+  render: () => (
+    <>
+      <Toaster richColors />
+      <Stack spacing={2}>
+        <Button
+          variant="contained"
+          onClick={() =>
+            toast('Event has been created', {
+              description: 'Monday, January 3rd at 6:00pm',
+              action: {
+                label: 'Undo',
+                onClick: () => {
+                  // Undo action would go here
+                },
+              },
+            })
+          }
+        >
+          Toast with Icon
+        </Button>
+
+        <Button
+          variant="contained"
+          onClick={() => {
+            const toastId = toast.loading('Uploading file...');
+            window.setTimeout(() => {
+              toast.success('File uploaded successfully!', {
+                id: toastId,
+              });
+            }, 2000);
+          }}
+        >
+          Loading Toast
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+export const PromiseToast: Story = {
+  render: () => (
+    <>
+      <Toaster richColors />
+      <Stack spacing={2}>
+        <Button
+          variant="contained"
+          onClick={() => {
+            const promise = new Promise((resolve) => {
+              window.setTimeout(() => {
+                resolve({ name: 'Sonner' });
+              }, 2000);
+            });
+
+            toast.promise(promise, {
+              loading: 'Loading data...',
+              success: 'Data loaded successfully!',
+              error: 'Failed to load data',
+            });
+          }}
+        >
+          Promise Toast (Success)
+        </Button>
+
+        <Button
+          variant="contained"
+          color="error"
+          onClick={() => {
+            const promise = new Promise((_, reject) => {
+              window.setTimeout(() => {
+                reject(new Error('Network error'));
+              }, 2000);
+            });
+
+            toast.promise(promise, {
+              loading: 'Saving changes...',
+              success: 'Changes saved!',
+              error: 'Failed to save changes',
+            });
+          }}
+        >
+          Promise Toast (Error)
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+export const ActionToasts: Story = {
+  render: () => (
+    <>
+      <Toaster closeButton richColors />
+      <Stack spacing={2}>
+        <Button
+          variant="contained"
+          onClick={() => {
+            toast('Message deleted', {
+              action: {
+                label: 'Undo',
+                onClick: () => toast.success('Message restored'),
+              },
+            });
+          }}
+        >
+          Toast with Undo Action
+        </Button>
+
+        <Button
+          variant="contained"
+          onClick={() => {
+            toast.error('Connection failed', {
+              action: {
+                label: 'Retry',
+                onClick: () => toast.success('Connected successfully'),
+              },
+            });
+          }}
+        >
+          Error with Retry
+        </Button>
+
+        <Button
+          variant="contained"
+          onClick={() => {
+            toast('New version available', {
+              action: {
+                label: 'Update Now',
+                onClick: () => toast.loading('Updating...'),
+              },
+              duration: Infinity,
+            });
+          }}
+        >
+          Persistent Toast with Action
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+export const DurationControl: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <Stack spacing={2}>
+        <Button
+          variant="outlined"
+          onClick={() => toast('Quick toast (2 seconds)', { duration: 2000 })}
+        >
+          2 Second Toast
+        </Button>
+
+        <Button
+          variant="outlined"
+          onClick={() => toast('Standard toast (4 seconds)', { duration: 4000 })}
+        >
+          4 Second Toast
+        </Button>
+
+        <Button
+          variant="outlined"
+          onClick={() => toast('Long toast (10 seconds)', { duration: 10000 })}
+        >
+          10 Second Toast
+        </Button>
+
+        <Button
+          variant="outlined"
+          onClick={() => {
+            const id = toast('Persistent toast - click to dismiss', {
+              duration: Infinity,
+              onClick: () => toast.dismiss(id),
+            });
+          }}
+        >
+          Persistent Toast
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+export const FormFeedback: Story = {
+  render: () => {
+    const handleSubmit = (success: boolean) => {
+      if (success) {
+        toast.success('Form submitted successfully!', {
+          description: "We'll get back to you within 24 hours.",
+        });
+      } else {
+        toast.error('Please fix the errors below', {
+          description: 'Some required fields are missing.',
+        });
+      }
+    };
+
+    return (
+      <>
+        <Toaster richColors position="top-center" />
+        <Paper sx={{ p: 3, maxWidth: 400 }}>
+          <Typography variant="h6" gutterBottom>
+            Contact Form
+          </Typography>
+
+          <Stack spacing={2}>
+            <input placeholder="Name" style={{ padding: '8px' }} />
+            <input placeholder="Email" style={{ padding: '8px' }} />
+            <textarea placeholder="Message" rows={4} style={{ padding: '8px' }} />
+
+            <Stack direction="row" spacing={2}>
+              <Button variant="contained" onClick={() => handleSubmit(true)}>
+                Submit (Success)
+              </Button>
+
+              <Button variant="outlined" color="error" onClick={() => handleSubmit(false)}>
+                Submit (Error)
+              </Button>
+            </Stack>
+          </Stack>
+        </Paper>
+      </>
+    );
+  },
+};
+
+export const MultipleToasts: Story = {
+  render: () => (
+    <>
+      <Toaster expand richColors />
+      <Stack spacing={2}>
+        <Button
+          variant="contained"
+          onClick={() => {
+            toast.success('File 1 uploaded');
+            toast.success('File 2 uploaded');
+            toast.success('File 3 uploaded');
+            toast.info('All files processed');
+          }}
+        >
+          Show Multiple Toasts
+        </Button>
+
+        <Button
+          variant="outlined"
+          onClick={() => {
+            toast('First notification');
+            window.setTimeout(() => toast('Second notification'), 500);
+            window.setTimeout(() => toast('Third notification'), 1000);
+            window.setTimeout(() => toast('Fourth notification'), 1500);
+          }}
+        >
+          Staggered Toasts
+        </Button>
+
+        <Button variant="outlined" color="error" onClick={() => toast.dismiss()}>
+          Dismiss All
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+const ThemedToastsComponent = () => {
+  const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
+
+  return (
+    <Box
+      sx={{
+        p: 3,
+        bgcolor: theme === 'dark' ? 'grey.900' : 'grey.50',
+        minHeight: 300,
+      }}
+    >
+      <Toaster theme={theme} richColors />
+
+      <Stack spacing={3}>
+        <Stack direction="row" spacing={2}>
+          <Button
+            variant={theme === 'light' ? 'contained' : 'outlined'}
+            onClick={() => setTheme('light')}
+          >
+            Light Theme
+          </Button>
+
+          <Button
+            variant={theme === 'dark' ? 'contained' : 'outlined'}
+            onClick={() => setTheme('dark')}
+          >
+            Dark Theme
+          </Button>
+        </Stack>
+
+        <Stack direction="row" spacing={2}>
+          <Button
+            variant="contained"
+            onClick={() => toast.success(`Success in ${  theme  } theme`)}
+          >
+            Success
+          </Button>
+
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => toast.error(`Error in ${  theme  } theme`)}
+          >
+            Error
+          </Button>
+
+          <Button
+            variant="contained"
+            color="info"
+            onClick={() => toast.info(`Info in ${  theme  } theme`)}
+          >
+            Info
+          </Button>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
+
+export const ThemedToasts: Story = {
+  render: () => <ThemedToastsComponent />,
+};
+
+// Required story exports for validation
+export const AllVariants: Story = {
+  render: () => (
+    <>
+      <Toaster richColors closeButton />
+      <Stack spacing={2} direction="row" flexWrap="wrap">
+        <Button variant="contained" onClick={() => toast('Default toast')}>
+          Default
+        </Button>
+        <Button variant="contained" color="success" onClick={() => toast.success('Success!')}>
+          Success
+        </Button>
+        <Button variant="contained" color="error" onClick={() => toast.error('Error!')}>
+          Error
+        </Button>
+        <Button variant="contained" color="warning" onClick={() => toast.warning('Warning!')}>
+          Warning
+        </Button>
+        <Button variant="contained" color="info" onClick={() => toast.info('Info!')}>
+          Info
+        </Button>
+        <Button variant="outlined" onClick={() => toast.loading('Loading...')}>
+          Loading
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <>
+      <Toaster />
+      <Stack spacing={2}>
+        <Button variant="outlined" onClick={() => toast('Compact', { duration: 3000 })}>
+          Default Size
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={() =>
+            toast('Toast with description', {
+              description: 'This is additional information',
+              duration: 3000,
+            })
+          }
+        >
+          With Description
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={() =>
+            toast('Toast with action', {
+              action: { label: 'Undo', onClick: () => {} },
+              duration: 3000,
+            })
+          }
+        >
+          With Action
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <>
+      <Toaster richColors closeButton />
+      <Stack spacing={2}>
+        <Button variant="outlined" onClick={() => toast('Normal state toast')}>
+          Normal
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={() => {
+            const id = toast.loading('Processing...');
+            window.setTimeout(() => toast.success('Complete!', { id }), 2000);
+          }}
+        >
+          Loading → Success
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={() => {
+            const id = toast.loading('Processing...');
+            window.setTimeout(() => toast.error('Failed!', { id }), 2000);
+          }}
+        >
+          Loading → Error
+        </Button>
+        <Button variant="outlined" onClick={() => toast('Hoverable toast', { duration: 10000 })}>
+          Hover to Pause
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+export const InteractiveStates: Story = {
+  render: () => (
+    <>
+      <Toaster closeButton richColors />
+      <Stack spacing={2}>
+        <Button
+          variant="contained"
+          onClick={() =>
+            toast('Click to dismiss', {
+              duration: Infinity,
+              onClick: (t) => toast.dismiss(t.id),
+            })
+          }
+        >
+          Clickable Toast
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() =>
+            toast('Toast with action', {
+              action: {
+                label: 'Undo',
+                onClick: () => toast.success('Undone!'),
+              },
+            })
+          }
+        >
+          With Action Button
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() =>
+            toast('Dismissible toast', {
+              duration: 10000,
+            })
+          }
+        >
+          With Close Button
+        </Button>
+        <Button variant="outlined" color="error" onClick={() => toast.dismiss()}>
+          Dismiss All
+        </Button>
+      </Stack>
+    </>
+  ),
+};
+
+export const Responsive: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  render: () => (
+    <>
+      <Toaster position="bottom-center" />
+      <Stack spacing={2}>
+        <Typography variant="body2">Test on different screen sizes:</Typography>
+        <Button variant="contained" onClick={() => toast('Mobile responsive toast')}>
+          Show Toast (Mobile)
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() =>
+            toast.success('Success notification', {
+              description: 'This adapts to screen size',
+            })
+          }
+        >
+          With Description
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => {
+            toast('First toast');
+            toast('Second toast');
+            toast('Third toast');
+          }}
+        >
+          Multiple Toasts
+        </Button>
+      </Stack>
+    </>
+  ),
+};