@12-apps/ui 1.0.0

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

@@ -0,0 +1,251 @@
+import { Box,Button, Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fn,userEvent, within } from 'storybook/test';
+
+import { Modal, ModalContent } from './Modal';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Feedback/Modal/Tests',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['autodocs', 'test', 'component:Modal'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ===== BASIC TESTS =====
+
+export const BasicInteraction: Story = {
+  name: '🧪 Basic Interaction Test',
+  args: {
+    open: true,
+    onClose: fn(),
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <ModalContent dataTestId="basic-modal-content">
+        <Box data-testid="modal-inner-content">
+          <Typography variant="h6" data-testid="modal-title">
+            Test Modal
+          </Typography>
+          <Typography paragraph>This modal tests basic interaction patterns.</Typography>
+          <Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
+            <Button data-testid="cancel-button" onClick={args.onClose}>
+              Cancel
+            </Button>
+            <Button variant="contained" data-testid="confirm-button" onClick={args.onClose}>
+              Confirm
+            </Button>
+          </Box>
+        </Box>
+      </ModalContent>
+    </Modal>
+  ),
+  play: async ({ step }) => {
+    await step('Verify modal is open and content is accessible', async () => {
+      // Modal content should be in document since modal is open by default
+      const modalContent = within(document.body).getByTestId('modal-inner-content');
+      const modalTitle = within(document.body).getByTestId('modal-title');
+      const cancelButton = within(document.body).getByTestId('cancel-button');
+      const confirmButton = within(document.body).getByTestId('confirm-button');
+
+      await expect(modalContent).toBeInTheDocument();
+      await expect(modalTitle).toHaveTextContent('Test Modal');
+      await expect(cancelButton).toBeInTheDocument();
+      await expect(confirmButton).toBeInTheDocument();
+    });
+
+    await step('Test button interactions', async () => {
+      const cancelButton = within(document.body).getByTestId('cancel-button');
+      const confirmButton = within(document.body).getByTestId('confirm-button');
+
+      // Test button hover states
+      await userEvent.hover(cancelButton);
+      await expect(cancelButton).toBeEnabled();
+
+      await userEvent.hover(confirmButton);
+      await expect(confirmButton).toBeEnabled();
+    });
+  },
+};
+
+export const KeyboardNavigation: Story = {
+  name: '⌨️ Keyboard Navigation Test',
+  args: {
+    open: true,
+    onClose: fn(),
+    'aria-labelledby': 'keyboard-modal-title',
+    role: 'dialog',
+    'aria-modal': true,
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <ModalContent dataTestId="keyboard-modal-content">
+        <Box data-testid="keyboard-modal">
+          <Typography
+            id="keyboard-modal-title"
+            variant="h6"
+            data-testid="first-focusable"
+            tabIndex={0}
+          >
+            Keyboard Navigation Modal
+          </Typography>
+          <Typography paragraph>Test keyboard navigation and accessibility features.</Typography>
+          <Button data-testid="second-focusable">First Button</Button>
+          <Button data-testid="third-focusable" sx={{ ml: 1 }}>
+            Second Button
+          </Button>
+        </Box>
+      </ModalContent>
+    </Modal>
+  ),
+  play: async ({ step }) => {
+    await step('Verify modal accessibility', async () => {
+      const modal = within(document.body).getByRole('dialog');
+      await expect(modal).toBeInTheDocument();
+      await expect(modal).toHaveAttribute('aria-labelledby', 'keyboard-modal-title');
+    });
+
+    await step('Test keyboard navigation', async () => {
+      const firstElement = within(document.body).getByTestId('first-focusable');
+      const secondElement = within(document.body).getByTestId('second-focusable');
+      const thirdElement = within(document.body).getByTestId('third-focusable');
+
+      // Test that elements are focusable
+      firstElement.focus();
+      await expect(firstElement).toHaveFocus();
+
+      // Test tab navigation
+      await userEvent.tab();
+      await expect(secondElement).toHaveFocus();
+
+      await userEvent.tab();
+      await expect(thirdElement).toHaveFocus();
+    });
+  },
+};
+
+export const ResponsiveDesign: Story = {
+  name: '📱 Responsive Design Test',
+  args: {
+    open: true,
+    onClose: fn(),
+    size: 'lg',
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <ModalContent dataTestId="responsive-modal-content">
+        <Box data-testid="responsive-modal">
+          <Typography variant="h6" gutterBottom>
+            Responsive Modal Test
+          </Typography>
+          <Typography paragraph>This modal adapts to different viewport sizes.</Typography>
+          <Button fullWidth variant="contained" data-testid="responsive-button">
+            Full Width Action
+          </Button>
+        </Box>
+      </ModalContent>
+    </Modal>
+  ),
+  play: async ({ step }) => {
+    await step('Verify responsive modal content', async () => {
+      const modal = within(document.body).getByTestId('responsive-modal');
+      const button = within(document.body).getByTestId('responsive-button');
+
+      await expect(modal).toBeInTheDocument();
+      await expect(button).toBeInTheDocument();
+    });
+  },
+};
+
+export const VisualStates: Story = {
+  name: '👁️ Visual States Test',
+  args: {
+    open: true,
+    onClose: fn(),
+    glass: true,
+    glow: true,
+    size: 'md',
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <ModalContent dataTestId="visual-states-modal-content">
+        <Box data-testid="visual-states-modal">
+          <Typography variant="h6" gutterBottom>
+            Visual States Test
+          </Typography>
+          <Typography paragraph>Testing various visual states and effects.</Typography>
+
+          <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+            <Button data-testid="normal-button" variant="outlined">
+              Normal
+            </Button>
+            <Button data-testid="disabled-button" disabled>
+              Disabled
+            </Button>
+          </Box>
+        </Box>
+      </ModalContent>
+    </Modal>
+  ),
+  play: async ({ step }) => {
+    await step('Verify visual states', async () => {
+      const modal = within(document.body).getByTestId('visual-states-modal');
+      const normalButton = within(document.body).getByTestId('normal-button');
+      const disabledButton = within(document.body).getByTestId('disabled-button');
+
+      await expect(modal).toBeInTheDocument();
+      await expect(normalButton).toBeEnabled();
+      await expect(disabledButton).toBeDisabled();
+    });
+  },
+};
+
+export const EdgeCases: Story = {
+  name: '🔧 Edge Cases Test',
+  args: {
+    open: true,
+    onClose: fn(),
+  },
+  render: (args) => (
+    <Modal {...args}>
+      <ModalContent dataTestId="edge-case-modal-content">
+        <Box data-testid="edge-case-modal">
+          <Typography variant="h6" gutterBottom>
+            Edge Cases Test
+          </Typography>
+
+          <Box
+            data-testid="long-content"
+            sx={{
+              maxHeight: '200px',
+              overflowY: 'auto',
+              p: 2,
+              border: '1px solid grey.300',
+              borderRadius: 1,
+            }}
+          >
+            <Typography>{'Very long content that should scroll. '.repeat(50)}</Typography>
+          </Box>
+        </Box>
+      </ModalContent>
+    </Modal>
+  ),
+  play: async ({ step }) => {
+    await step('Verify edge case handling', async () => {
+      const modal = within(document.body).getByTestId('edge-case-modal');
+      const longContent = within(document.body).getByTestId('long-content');
+
+      await expect(modal).toBeInTheDocument();
+      await expect(longContent).toBeInTheDocument();
+
+      // Verify overflow handling
+      const computedStyle = window.getComputedStyle(longContent);
+      await expect(computedStyle.overflowY).toBe('auto');
+    });
+  },
+};

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

@@ -0,0 +1,279 @@
+import {
+  alpha,
+  Backdrop,
+  Box,
+  Fade,
+  keyframes,
+  Modal as MuiModal,
+  Slide,
+  useTheme,
+} from '@mui/material';
+import React from 'react';
+
+import type { ModalContentProps,ModalProps } from './Modal.types';
+
+// Define transition component props interface
+interface TransitionProps {
+  children?: React.ReactElement;
+  in?: boolean;
+  timeout?: number;
+}
+
+// Define pulse animation
+const pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 20px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+
+export const Modal: React.FC<ModalProps> = ({
+  children,
+  variant = 'center',
+  size = 'md',
+  backdrop = true,
+  persistent = false,
+  glass = false,
+  gradient = false,
+  glow = false,
+  pulse = false,
+  borderRadius = 'lg',
+  onClose,
+  open,
+  dataTestId,
+  ...props
+}) => {
+  const theme = useTheme();
+
+  const getBorderRadius = () => {
+    switch (borderRadius) {
+      case 'none':
+        return 0;
+      case 'sm':
+        return theme.spacing(0.5);
+      case 'md':
+        return theme.spacing(1);
+      case 'lg':
+        return theme.spacing(2);
+      case 'xl':
+        return theme.spacing(3);
+      default:
+        return theme.spacing(2);
+    }
+  };
+
+  const getSize = () => {
+    switch (size) {
+      case 'xs':
+        return { width: 320, maxWidth: '90vw' };
+      case 'sm':
+        return { width: 480, maxWidth: '90vw' };
+      case 'md':
+        return { width: 640, maxWidth: '90vw' };
+      case 'lg':
+        return { width: 800, maxWidth: '90vw' };
+      case 'xl':
+        return { width: 960, maxWidth: '90vw' };
+      default:
+        return { width: 640, maxWidth: '90vw' };
+    }
+  };
+
+  const getPositionStyles = () => {
+    const sizeStyles = getSize();
+
+    const baseStyles = {
+      position: 'absolute' as const,
+      ...sizeStyles,
+      borderRadius: getBorderRadius(),
+      outline: 0,
+      transition: theme.transitions.create(
+        ['box-shadow', 'background-color', 'backdrop-filter', 'transform'],
+        {
+          duration: theme.transitions.duration.standard,
+        },
+      ),
+    };
+
+    switch (variant) {
+      case 'top':
+        return {
+          ...baseStyles,
+          top: '10%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          maxHeight: '80vh',
+          overflowY: 'auto',
+        };
+
+      case 'bottom':
+        return {
+          ...baseStyles,
+          bottom: '10%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          maxHeight: '80vh',
+          overflowY: 'auto',
+        };
+
+      case 'glass':
+      case 'center':
+      default:
+        return {
+          ...baseStyles,
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          maxHeight: '90vh',
+          overflowY: 'auto',
+        };
+    }
+  };
+
+  const getVariantStyles = () => {
+    const positionStyles = getPositionStyles();
+
+    const baseStyles = {
+      ...positionStyles,
+      position: pulse ? ('relative' as const) : positionStyles.position,
+    };
+
+    if (pulse) {
+      Object.assign(baseStyles, {
+        '&::after': {
+          content: '""',
+          position: 'absolute' as const,
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderRadius: 'inherit',
+          backgroundColor: theme.palette.primary.main,
+          opacity: 0.3,
+          animation: `${pulseAnimation} 2s infinite`,
+          pointerEvents: 'none' as const,
+          zIndex: -1,
+        },
+      });
+    }
+
+    switch (variant) {
+      case 'glass':
+        return {
+          ...baseStyles,
+          backgroundColor: alpha(theme.palette.background.paper, 0.1),
+          backdropFilter: 'blur(20px)',
+          border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+          boxShadow: glow
+            ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}`
+            : `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+        };
+
+      default: {
+        const styles = {
+          ...baseStyles,
+          backgroundColor: glass
+            ? alpha(theme.palette.background.paper, 0.1)
+            : theme.palette.background.paper,
+          backdropFilter: glass ? 'blur(20px)' : gradient ? 'blur(10px)' : 'none',
+          border: glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',
+          boxShadow: glow
+            ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}`
+            : glass
+              ? `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+              : theme.shadows[8],
+        };
+
+        if (gradient) {
+          Object.assign(styles, {
+            background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
+          });
+        }
+
+        return styles;
+      }
+    }
+  };
+
+  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {
+    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {
+      return;
+    }
+    onClose?.();
+  };
+
+  const getTransitionComponent = () => {
+    switch (variant) {
+      case 'top': {
+        const SlideDown = React.forwardRef<HTMLElement, TransitionProps>((props, ref) => {
+          const { children, ...rest } = props;
+          return children ? (
+            <Slide direction="down" ref={ref} {...rest}>
+              {children}
+            </Slide>
+          ) : null;
+        });
+        SlideDown.displayName = 'SlideDown';
+        return SlideDown;
+      }
+      case 'bottom': {
+        const SlideUp = React.forwardRef<HTMLElement, TransitionProps>((props, ref) => {
+          const { children, ...rest } = props;
+          return children ? (
+            <Slide direction="up" ref={ref} {...rest}>
+              {children}
+            </Slide>
+          ) : null;
+        });
+        SlideUp.displayName = 'SlideUp';
+        return SlideUp;
+      }
+      default:
+        return Fade;
+    }
+  };
+
+  const TransitionComponent = getTransitionComponent();
+
+  return (
+    <MuiModal
+      open={open}
+      onClose={handleClose}
+      closeAfterTransition
+      BackdropComponent={backdrop ? Backdrop : undefined}
+      BackdropProps={{
+        timeout: 500,
+        sx: {
+          backgroundColor:
+            glass || variant === 'glass'
+              ? alpha(theme.palette.common.black, 0.2)
+              : alpha(theme.palette.common.black, 0.5),
+          backdropFilter: glass || variant === 'glass' ? 'blur(8px)' : 'none',
+        },
+        // @ts-expect-error - data-testid is not part of BackdropProps type but is valid HTML
+        'data-testid': dataTestId ? `${dataTestId}-backdrop` : 'modal-backdrop',
+      }}
+      {...props}
+    >
+      <TransitionComponent in={open} timeout={500}>
+        <Box sx={getVariantStyles()} data-testid={dataTestId || 'modal'}>
+          {children}
+        </Box>
+      </TransitionComponent>
+    </MuiModal>
+  );
+};
+
+export const ModalContent: React.FC<ModalContentProps> = ({ children, padding = 3, dataTestId }) => (
+  <Box sx={{ p: padding }} data-testid={dataTestId || 'modal-content'}>
+    {children}
+  </Box>
+);

package/src/components/feedback/Modal/Modal.types.ts

@@ -0,0 +1,26 @@
+import type { ModalProps as MuiModalProps } from '@mui/material';
+import type { ReactNode } from 'react';
+
+export type ModalVariant = 'center' | 'top' | 'bottom' | 'glass';
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ModalProps extends Omit<MuiModalProps, 'children'> {
+  children: ReactNode;
+  variant?: ModalVariant;
+  size?: ModalSize;
+  backdrop?: boolean;
+  persistent?: boolean;
+  glass?: boolean;
+  gradient?: boolean;
+  glow?: boolean;
+  pulse?: boolean;
+  borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  onClose?: () => void;
+  dataTestId?: string;
+}
+
+export interface ModalContentProps {
+  children: ReactNode;
+  padding?: number | string;
+  dataTestId?: string;
+}

package/src/components/feedback/Modal/index.ts

@@ -0,0 +1,7 @@
+export { Modal, ModalContent } from './Modal';
+export type {
+  ModalContentProps,
+  ModalProps,
+  ModalSize,
+  ModalVariant,
+} from './Modal.types';