@12-apps/ui 1.5.0 → 1.5.2

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

@@ -1,765 +0,0 @@
-import CloseIcon from '@mui/icons-material/Close';
-import { Box, Button, IconButton,Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-
-import { Modal, ModalContent } from './Modal';
-
-const meta: Meta<typeof Modal> = {
-  title: 'Feedback/Modal',
-  component: Modal,
-  tags: ['autodocs', 'component:Modal'],
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'A flexible modal component with beautiful animations and glass morphism effects.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['center', 'top', 'bottom', 'glass'],
-      description: 'Position and style variant of the modal',
-    },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Size of the modal',
-    },
-    glass: {
-      control: 'boolean',
-      description: 'Enable glass morphism effect',
-    },
-    gradient: {
-      control: 'boolean',
-      description: 'Enable gradient background',
-    },
-    glow: {
-      control: 'boolean',
-      description: 'Enable glow effect',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Modal>;
-
-interface ModalWrapperProps {
-  children: React.ReactNode;
-  [key: string]: unknown;
-}
-
-const ModalWrapper = ({ children, ...args }: ModalWrapperProps) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Box>
-      <Button variant="contained" onClick={() => setOpen(true)}>
-        Open Modal
-      </Button>
-      <Modal {...args} open={open} onClose={() => setOpen(false)}>
-        {children}
-      </Modal>
-    </Box>
-  );
-};
-
-// Default story - minimal props
-export const Default: Story = {
-  render: (args) => (
-    <ModalWrapper {...args}>
-      <ModalContent>
-        <Typography variant="h6" gutterBottom>
-          Default Modal
-        </Typography>
-        <Typography paragraph>
-          This is a default modal with minimal props.
-        </Typography>
-        <Button variant="contained">Close</Button>
-      </ModalContent>
-    </ModalWrapper>
-  ),
-  args: {
-    variant: 'center',
-    size: 'md',
-  },
-};
-
-export const Center: Story = {
-  render: (args) => (
-    <ModalWrapper {...args}>
-      <ModalContent>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-          <Typography variant="h6">
-            Center Modal
-          </Typography>
-          <IconButton onClick={() => { /** do nothing */}}>
-            <CloseIcon />
-          </IconButton>
-        </Box>
-        <Typography paragraph>
-          This modal appears in the center of the screen with a smooth fade animation.
-          Perfect for confirmations, forms, or any content that needs focus.
-        </Typography>
-        <Box sx={{ mt: 3, display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
-          <Button>Cancel</Button>
-          <Button variant="contained">Confirm</Button>
-        </Box>
-      </ModalContent>
-    </ModalWrapper>
-  ),
-  args: {
-    variant: 'center',
-    size: 'md',
-  },
-};
-
-export const TopSlide: Story = {
-  render: (args) => (
-    <ModalWrapper {...args}>
-      <ModalContent>
-        <Box sx={{ textAlign: 'center', py: 2 }}>
-          <Typography variant="h6" gutterBottom>
-            Top Slide Modal
-          </Typography>
-          <Typography paragraph>
-            This modal slides down from the top, creating an elegant entrance animation.
-            Great for notifications or announcements.
-          </Typography>
-          <Button variant="contained">
-            Got it
-          </Button>
-        </Box>
-      </ModalContent>
-    </ModalWrapper>
-  ),
-  args: {
-    variant: 'top',
-    size: 'sm',
-  },
-};
-
-export const BottomSlide: Story = {
-  render: (args) => (
-    <ModalWrapper {...args}>
-      <ModalContent>
-        <Box sx={{ py: 2 }}>
-          <Typography variant="h6" gutterBottom>
-            Bottom Slide Modal
-          </Typography>
-          <Typography paragraph>
-            This modal slides up from the bottom, similar to mobile app sheets.
-            Ideal for mobile-first designs and quick actions.
-          </Typography>
-          <Box sx={{ display: 'flex', gap: 2, mt: 3 }}>
-            <Button fullWidth>Cancel</Button>
-            <Button variant="contained" fullWidth>Continue</Button>
-          </Box>
-        </Box>
-      </ModalContent>
-    </ModalWrapper>
-  ),
-  args: {
-    variant: 'bottom',
-    size: 'md',
-  },
-};
-
-export const GlassEffect: Story = {
-  render: (args) => (
-    <Box sx={{ 
-      minHeight: '400px',
-      background: 'linear-gradient(45deg, #1976d2 30%, #21cbf3 90%)',
-      p: 4,
-      borderRadius: 2,
-    }}>
-      <ModalWrapper {...args}>
-        <ModalContent padding={4}>
-          <Typography variant="h5" gutterBottom sx={{ fontWeight: 600 }}>
-            Glass Morphism Modal
-          </Typography>
-          <Typography paragraph sx={{ opacity: 0.9 }}>
-            Experience the beauty of glass morphism with backdrop blur effects
-            and translucent surfaces. This creates depth and modern aesthetics.
-          </Typography>
-          <Box sx={{ 
-            p: 2, 
-            bgcolor: 'rgba(255,255,255,0.1)', 
-            borderRadius: 1, 
-            backdropFilter: 'blur(10px)',
-            mb: 3,
-          }}>
-            <Typography variant="body2">
-              Even nested glass elements work perfectly with proper layering.
-            </Typography>
-          </Box>
-          <Box sx={{ display: 'flex', gap: 2 }}>
-            <Button sx={{ backdropFilter: 'blur(10px)', bgcolor: 'rgba(255,255,255,0.2)' }}>
-              Cancel
-            </Button>
-            <Button variant="contained">
-              Continue
-            </Button>
-          </Box>
-        </ModalContent>
-      </ModalWrapper>
-    </Box>
-  ),
-  args: {
-    variant: 'glass',
-    size: 'lg',
-    glow: true,
-  },
-};
-
-export const GradientGlow: Story = {
-  render: (args) => (
-    <Box sx={{ bgcolor: 'grey.900', p: 4, borderRadius: 2 }}>
-      <ModalWrapper {...args}>
-        <ModalContent padding={4}>
-          <Typography variant="h5" gutterBottom sx={{ fontWeight: 600 }}>
-            Premium Feature
-          </Typography>
-          <Typography paragraph>
-            This modal showcases gradient backgrounds with glow effects,
-            perfect for premium features, upgrades, or special announcements.
-          </Typography>
-          <Box sx={{ 
-            display: 'flex', 
-            alignItems: 'center', 
-            gap: 2, 
-            p: 2, 
-            bgcolor: 'rgba(255,255,255,0.05)',
-            borderRadius: 1,
-            mb: 3,
-          }}>
-            <Typography variant="h6">✨</Typography>
-            <Typography>
-              Unlock advanced features with Pro
-            </Typography>
-          </Box>
-          <Box sx={{ display: 'flex', gap: 2 }}>
-            <Button>Maybe Later</Button>
-            <Button variant="contained" sx={{ 
-              background: 'linear-gradient(45deg, #ff6b6b, #ffd93d)',
-              '&:hover': {
-                background: 'linear-gradient(45deg, #ff5252, #ffcc02)',
-              }
-            }}>
-              Upgrade Now
-            </Button>
-          </Box>
-        </ModalContent>
-      </ModalWrapper>
-    </Box>
-  ),
-  args: {
-    variant: 'center',
-    gradient: true,
-    glow: true,
-    size: 'md',
-  },
-};
-
-const ResponsiveSizesComponent = () => {
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-    const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
-
-    return (
-      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-        {sizes.map(size => (
-          <Box key={size}>
-            <Button 
-              variant="outlined" 
-              onClick={() => setOpenStates(prev => ({ ...prev, [size]: true }))}
-            >
-              {size.toUpperCase()}
-            </Button>
-            <Modal
-              open={openStates[size] || false}
-              onClose={() => setOpenStates(prev => ({ ...prev, [size]: false }))}
-              variant="center"
-              size={size}
-              glass={true}
-            >
-              <ModalContent>
-                <Typography variant="h6" gutterBottom>
-                  Size: {size.toUpperCase()}
-                </Typography>
-                <Typography>
-                  This demonstrates the {size} size modal with responsive behavior
-                  and glass morphism effects.
-                </Typography>
-                <Box sx={{ mt: 2 }}>
-                  <Button 
-                    onClick={() => setOpenStates(prev => ({ ...prev, [size]: false }))}
-                    fullWidth
-                    variant="contained"
-                  >
-                    Close
-                  </Button>
-                </Box>
-              </ModalContent>
-            </Modal>
-          </Box>
-        ))}
-      </Box>
-    );
-};
-
-export const ResponsiveSizes: Story = {
-  render: () => <ResponsiveSizesComponent />,
-};
-
-// AllSizes story - showing all size variations
-const AllSizesComponent = () => {
-  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-  const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
-
-  return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      {sizes.map(size => (
-        <Box key={size}>
-          <Button 
-            variant="outlined" 
-            onClick={() => setOpenStates(prev => ({ ...prev, [size]: true }))}
-          >
-            Size: {size.toUpperCase()}
-          </Button>
-          <Modal
-            open={openStates[size] || false}
-            onClose={() => setOpenStates(prev => ({ ...prev, [size]: false }))}
-            variant="center"
-            size={size}
-          >
-            <ModalContent>
-              <Typography variant="h6" gutterBottom>
-                Size: {size.toUpperCase()}
-              </Typography>
-              <Typography>
-                This modal demonstrates the {size} size.
-              </Typography>
-              <Box sx={{ mt: 2 }}>
-                <Button 
-                  onClick={() => setOpenStates(prev => ({ ...prev, [size]: false }))}
-                  fullWidth
-                  variant="contained"
-                >
-                  Close
-                </Button>
-              </Box>
-            </ModalContent>
-          </Modal>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export const AllSizes: Story = {
-  render: () => <AllSizesComponent />,
-};
-
-// AllStates story - showing all modal states
-const AllStatesComponent = () => {
-  const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
-  const states = [
-    { name: 'normal', props: {} },
-    { name: 'glass', props: { glass: true } },
-    { name: 'gradient', props: { gradient: true } },
-    { name: 'glow', props: { glow: true } },
-    { name: 'persistent', props: { persistent: true } },
-  ];
-
-  return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      {states.map(state => (
-        <Box key={state.name}>
-          <Button 
-            variant="contained"
-            onClick={() => setOpenStates(prev => ({ ...prev, [state.name]: true }))}
-          >
-            {state.name.charAt(0).toUpperCase() + state.name.slice(1)} State
-          </Button>
-          <Modal
-            open={openStates[state.name] || false}
-            onClose={() => setOpenStates(prev => ({ ...prev, [state.name]: false }))}
-            variant="center"
-            size="md"
-            {...state.props}
-          >
-            <ModalContent>
-              <Typography variant="h6" gutterBottom>
-                {state.name.charAt(0).toUpperCase() + state.name.slice(1)} State
-              </Typography>
-              <Typography>
-                This demonstrates the {state.name} state of the modal.
-              </Typography>
-              <Button 
-                onClick={() => setOpenStates(prev => ({ ...prev, [state.name]: false }))}
-                variant="contained"
-                fullWidth
-                sx={{ mt: 2 }}
-              >
-                Close
-              </Button>
-            </ModalContent>
-          </Modal>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export const AllStates: Story = {
-  render: () => <AllStatesComponent />,
-};
-
-// InteractiveStates story - showing interactive behaviors
-const InteractiveStatesComponent = () => {
-  const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
-  const interactions = [
-    { name: 'hover-effects', label: 'Hover Effects', props: { glow: true } },
-    { name: 'click-outside', label: 'Click Outside to Close', props: {} },
-    { name: 'escape-key', label: 'Escape Key to Close', props: {} },
-    { name: 'persistent-no-close', label: 'Persistent (No Close)', props: { persistent: true } },
-  ];
-
-  return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      {interactions.map(interaction => (
-        <Box key={interaction.name}>
-          <Button 
-            variant="outlined"
-            onClick={() => setOpenStates(prev => ({ ...prev, [interaction.name]: true }))}
-          >
-            {interaction.label}
-          </Button>
-          <Modal
-            open={openStates[interaction.name] || false}
-            onClose={() => setOpenStates(prev => ({ ...prev, [interaction.name]: false }))}
-            variant="center"
-            size="md"
-            {...interaction.props}
-          >
-            <ModalContent>
-              <Typography variant="h6" gutterBottom>
-                {interaction.label}
-              </Typography>
-              <Typography>
-                Test the {interaction.label.toLowerCase()} behavior of this modal.
-              </Typography>
-              <Button 
-                onClick={() => setOpenStates(prev => ({ ...prev, [interaction.name]: false }))}
-                variant="contained"
-                fullWidth
-                sx={{ mt: 2 }}
-              >
-                Close Modal
-              </Button>
-            </ModalContent>
-          </Modal>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export const InteractiveStates: Story = {
-  render: () => <InteractiveStatesComponent />,
-};
-
-// Responsive story - showing responsive behavior
-const ResponsiveComponent = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Box>
-      <Typography variant="body2" sx={{ mb: 2 }}>
-        This modal adapts to different screen sizes. Try resizing your browser window.
-      </Typography>
-      <Button variant="contained" onClick={() => setOpen(true)}>
-        Open Responsive Modal
-      </Button>
-      <Modal
-        open={open}
-        onClose={() => setOpen(false)}
-        variant="center"
-        size="lg"
-      >
-        <ModalContent>
-          <Typography variant="h5" gutterBottom>
-            Responsive Modal
-          </Typography>
-          <Typography paragraph>
-            This modal is responsive and adapts to different screen sizes.
-            On mobile devices, it takes most of the screen width.
-            On tablets and desktops, it maintains a comfortable reading width.
-          </Typography>
-          <Box sx={{ 
-            display: 'grid',
-            gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1fr 1fr' },
-            gap: 2,
-            mb: 3
-          }}>
-            <Box sx={{ p: 2, bgcolor: 'background.paper', borderRadius: 1 }}>
-              <Typography variant="body2">Mobile</Typography>
-            </Box>
-            <Box sx={{ p: 2, bgcolor: 'background.paper', borderRadius: 1 }}>
-              <Typography variant="body2">Tablet</Typography>
-            </Box>
-            <Box sx={{ p: 2, bgcolor: 'background.paper', borderRadius: 1 }}>
-              <Typography variant="body2">Desktop</Typography>
-            </Box>
-          </Box>
-          <Button 
-            onClick={() => setOpen(false)}
-            variant="contained"
-            fullWidth
-          >
-            Close
-          </Button>
-        </ModalContent>
-      </Modal>
-    </Box>
-  );
-};
-
-export const Responsive: Story = {
-  render: () => <ResponsiveComponent />,
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: { name: 'Mobile', styles: { width: '360px', height: '640px' } },
-        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
-        desktop: { name: 'Desktop', styles: { width: '1920px', height: '1080px' } },
-      },
-    },
-  },
-};
-
-// Enhanced story for all variants
-const AllVariantsComponent = () => {
-  const variants = ['center', 'top', 'bottom', 'glass'] as const;
-  const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
-
-  return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      {variants.map(variant => (
-        <Box key={variant}>
-          <Button 
-            variant="contained"
-            color={variant === 'glass' ? 'secondary' : 'primary'}
-            onClick={() => setOpenStates(prev => ({ ...prev, [variant]: true }))}
-          >
-            {variant.charAt(0).toUpperCase() + variant.slice(1)} Modal
-          </Button>
-          <Modal
-            open={openStates[variant] || false}
-            onClose={() => setOpenStates(prev => ({ ...prev, [variant]: false }))}
-            variant={variant}
-            size="md"
-            glass={variant === 'glass'}
-            glow={variant === 'glass'}
-          >
-            <ModalContent>
-              <Typography variant="h6" gutterBottom>
-                {variant.charAt(0).toUpperCase() + variant.slice(1)} Variant
-              </Typography>
-              <Typography paragraph>
-                This demonstrates the {variant} variant with appropriate animations and styling.
-              </Typography>
-              <Button 
-                onClick={() => setOpenStates(prev => ({ ...prev, [variant]: false }))}
-                variant="contained"
-                fullWidth
-              >
-                Close
-              </Button>
-            </ModalContent>
-          </Modal>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export const AllVariants: Story = {
-  render: () => <AllVariantsComponent />,
-
-};
-
-// Story for testing all border radius options
-const BorderRadiusVariationsComponent = () => {
-  const borderRadii = ['none', 'sm', 'md', 'lg', 'xl'] as const;
-  const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
-
-  return (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      {borderRadii.map(radius => (
-        <Box key={radius}>
-          <Button 
-            variant="outlined"
-            onClick={() => setOpenStates(prev => ({ ...prev, [radius]: true }))}
-          >
-            {radius.toUpperCase()} Radius
-          </Button>
-          <Modal
-            open={openStates[radius] || false}
-            onClose={() => setOpenStates(prev => ({ ...prev, [radius]: false }))}
-            variant="center"
-            size="sm"
-            borderRadius={radius}
-            glass={true}
-          >
-            <ModalContent>
-              <Typography variant="h6" gutterBottom>
-                Border Radius: {radius.toUpperCase()}
-              </Typography>
-              <Typography paragraph>
-                This modal demonstrates the {radius} border radius setting.
-              </Typography>
-              <Button 
-                onClick={() => setOpenStates(prev => ({ ...prev, [radius]: false }))}
-                variant="contained"
-                fullWidth
-              >
-                Close
-              </Button>
-            </ModalContent>
-          </Modal>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export const BorderRadiusVariations: Story = {
-  render: () => <BorderRadiusVariationsComponent />,
-
-};
-
-// Story for testing special effects
-const SpecialEffectsComponent = () => {
-  const effects = [
-    { name: 'Pulse', props: { pulse: true } },
-    { name: 'Glow', props: { glow: true } },
-    { name: 'Gradient', props: { gradient: true } },
-    { name: 'Combined', props: { pulse: true, glow: true, gradient: true } },
-  ];
-  const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
-
-  return (
-    <Box sx={{ 
-      bgcolor: 'grey.900', 
-      p: 4, 
-      borderRadius: 2,
-      display: 'flex', 
-      gap: 2, 
-      flexWrap: 'wrap' 
-    }}>
-      {effects.map(effect => (
-        <Box key={effect.name}>
-          <Button 
-            variant="contained"
-            color="secondary"
-            onClick={() => setOpenStates(prev => ({ ...prev, [effect.name]: true }))}
-          >
-            {effect.name} Effect
-          </Button>
-          <Modal
-            open={openStates[effect.name] || false}
-            onClose={() => setOpenStates(prev => ({ ...prev, [effect.name]: false }))}
-            variant="center"
-            size="md"
-            {...effect.props}
-          >
-            <ModalContent>
-              <Typography variant="h6" gutterBottom>
-                {effect.name} Effect Modal
-              </Typography>
-              <Typography paragraph>
-                This modal showcases the {effect.name.toLowerCase()} effect.
-              </Typography>
-              <Button 
-                onClick={() => setOpenStates(prev => ({ ...prev, [effect.name]: false }))}
-                variant="contained"
-                fullWidth
-              >
-                Close
-              </Button>
-            </ModalContent>
-          </Modal>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export const SpecialEffects: Story = {
-  render: () => <SpecialEffectsComponent />,
-
-};
-
-// Story for testing persistent modals
-const PersistentModalComponent = () => {
-  const [open, setOpen] = useState(false);
-  const [forceClose, setForceClose] = useState(false);
-
-  return (
-    <Box>
-      <Button 
-        variant="contained" 
-        color="warning"
-        onClick={() => {
-          setOpen(true);
-          setForceClose(false);
-        }}
-      >
-        Open Persistent Modal
-      </Button>
-      <Modal
-        open={open && !forceClose}
-        onClose={() => {
-          // This will be ignored due to persistent=true
-          // eslint-disable-next-line no-console -- demo output for the Storybook docs page
-          console.log('Close attempted but modal is persistent');
-        }}
-        variant="center"
-        size="sm"
-        persistent={true}
-        glass={true}
-      >
-        <ModalContent>
-          <Box sx={{ textAlign: 'center' }}>
-            <Typography variant="h6" gutterBottom color="warning.main">
-              ⚠️ Persistent Modal
-            </Typography>
-            <Typography paragraph>
-              This modal cannot be closed by clicking the backdrop or pressing Escape.
-              You must use the close button.
-            </Typography>
-            <Typography variant="body2" color="text.secondary" paragraph>
-              Try clicking outside or pressing Escape - it won&apos;t work!
-            </Typography>
-            <Button 
-              variant="contained"
-              color="error"
-              onClick={() => setForceClose(true)}
-              fullWidth
-            >
-              Force Close
-            </Button>
-          </Box>
-        </ModalContent>
-      </Modal>
-    </Box>
-  );
-};
-
-export const PersistentModal: Story = {
-  render: () => <PersistentModalComponent />,
-
-};