@12-apps/ui 1.5.0 → 1.5.2

package/src/components/data-display/Sheet/Sheet.test.stories.tsx

@@ -1,1105 +0,0 @@
-import {
-  Box,
-  Button,
-  FormControlLabel,
-  List,
-  ListItem,
-  ListItemText,
-  Stack,
-  Switch,
-  TextField,
-  Typography,
-} from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-import { expect, fireEvent, fn,userEvent, waitFor, within } from 'storybook/test';
-
-import { Sheet } from './Sheet';
-
-const meta: Meta<typeof Sheet> = {
-  title: 'DataDisplay/Sheet/Tests',
-  component: Sheet,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Sheet'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Helper component for testing
-interface TestWrapperProps extends React.ComponentProps<typeof Sheet> {
-  children?: React.ReactNode;
-}
-
-const TestWrapper: React.FC<TestWrapperProps> = ({
-  children,
-  onOpen,
-  onClose,
-  onOpenChange,
-  ...props
-}) => {
-  const [open, setOpen] = useState(false);
-
-  const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen);
-    onOpenChange?.(newOpen);
-    if (newOpen) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  };
-
-  return (
-    <>
-      <Button variant="contained" onClick={() => setOpen(true)} data-testid="open-sheet-button">
-        Open Sheet
-      </Button>
-      <Sheet
-        {...props}
-        open={open}
-        onOpenChange={handleOpenChange}
-        onOpen={onOpen}
-        onClose={onClose}
-        data-testid="test-sheet"
-      >
-        {children}
-      </Sheet>
-    </>
-  );
-};
-
-// ==================== Interaction Tests ====================
-
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  args: {
-    title: 'Interactive Sheet',
-    description: 'Test basic interactions',
-    showCloseButton: true,
-    onClose: fn(),
-    onOpen: fn(),
-    onClick: fn(),
-    onOpenChange: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-  },
-  render: (args) => (
-    <TestWrapper {...args}>
-      <Typography data-testid="basic-interaction-content">Sheet content for testing</Typography>
-    </TestWrapper>
-  ),
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Initial render verification', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await expect(openButton).toBeInTheDocument();
-    });
-
-    await step('Open sheet interaction', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await userEvent.click(openButton);
-
-      // Wait for sheet to open with animation (sheet renders in portal)
-      await waitFor(
-        () => {
-          const content = body.getByTestId('basic-interaction-content');
-          expect(content).toBeVisible();
-        },
-        { timeout: 2000 },
-      );
-
-      await expect(args.onOpen).toHaveBeenCalled();
-    });
-
-    await step('Click on sheet content', async () => {
-      const content = body.getByTestId('basic-interaction-content');
-      await userEvent.click(content);
-      await expect(args.onClick).toHaveBeenCalled();
-    });
-
-    await step('Close button interaction', async () => {
-      const closeButton = body.getByTestId('test-sheet-header-close-button');
-      await userEvent.click(closeButton);
-      await expect(args.onClose).toHaveBeenCalled();
-    });
-  },
-};
-
-export const FormInteraction: Story = {
-  name: '📝 Form Interaction Test',
-  args: {
-    title: 'Form Sheet',
-    onChange: fn(),
-    onSubmit: fn(),
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-    onClick: fn(),
-  },
-  render: (args) => {
-    const FormContent = () => {
-      const [value, setValue] = useState('');
-
-      return (
-        <Stack spacing={2}>
-          <TextField
-            data-testid="text-input"
-            label="Test Input"
-            value={value}
-            onChange={(e) => {
-              setValue(e.target.value);
-              args.onChange?.(e);
-            }}
-            fullWidth
-          />
-          <Button data-testid="submit-button" variant="contained" onClick={() => args.onSubmit?.()}>
-            Submit
-          </Button>
-        </Stack>
-      );
-    };
-
-    return (
-      <TestWrapper {...args}>
-        <FormContent />
-      </TestWrapper>
-    );
-  },
-  play: async ({ canvasElement, args, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open sheet', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await userEvent.click(openButton);
-      await waitFor(() => {
-        expect(body.getByTestId('text-input')).toBeVisible();
-      });
-    });
-
-    await step('Type in input field', async () => {
-      const input = body.getByLabelText('Test Input') as HTMLInputElement;
-      await userEvent.type(input, 'Test input value');
-      // Just verify the input has the value typed
-      await waitFor(() => {
-        expect(input).toHaveValue('Test input value');
-      });
-      // The onChange prop should have been called
-      if (args.onChange) {
-        await expect(args.onChange).toHaveBeenCalled();
-      }
-    });
-
-    await step('Clear input field', async () => {
-      const input = body.getByLabelText('Test Input') as HTMLInputElement;
-      await userEvent.clear(input);
-      await expect(input).toHaveValue('');
-    });
-
-    await step('Submit form', async () => {
-      const submitButton = body.getByTestId('submit-button');
-      await userEvent.click(submitButton);
-      await expect(args.onSubmit).toHaveBeenCalled();
-    });
-  },
-};
-
-export const StateChangeTest: Story = {
-  name: '🔄 State Change Test',
-  args: {
-    onOpenChange: fn(),
-    onSnapPointChange: fn(),
-  },
-  render: () => {
-    const StateComponent = () => {
-      const [open, setOpen] = useState(false);
-      const [snapPoint, setSnapPoint] = useState(0.5);
-
-      return (
-        <>
-          <Button data-testid="open-button" variant="contained" onClick={() => setOpen(true)}>
-            Open Draggable Sheet
-          </Button>
-          <Sheet
-            open={open}
-            onOpenChange={setOpen}
-            variant="draggable"
-            position="bottom"
-            snapPoints={[0.25, 0.5, 0.75, 1]}
-            defaultSnapPoint={0.5}
-            onSnapPointChange={setSnapPoint}
-            showHandle
-            data-testid="draggable-sheet"
-          >
-            <Typography data-testid="snap-indicator">
-              Current snap: {Math.round(snapPoint * 100)}%
-            </Typography>
-          </Sheet>
-        </>
-      );
-    };
-
-    return <StateComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Verify initial state', async () => {
-      const openButton = canvas.getByTestId('open-button');
-      await expect(openButton).toBeInTheDocument();
-    });
-
-    await step('Open draggable sheet', async () => {
-      const openButton = canvas.getByTestId('open-button');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        const indicator = body.getByTestId('snap-indicator');
-        expect(indicator).toHaveTextContent('Current snap: 50%');
-      });
-    });
-  },
-};
-
-// ==================== Accessibility Tests ====================
-
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  args: {
-    title: 'Keyboard Accessible Sheet',
-    description: 'Test keyboard navigation',
-    showCloseButton: true,
-    closeOnEscape: true,
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-  },
-  render: (args) => (
-    <TestWrapper {...args}>
-      <Stack spacing={2}>
-        <Button data-testid="first-focusable" variant="outlined">
-          First Button
-        </Button>
-        <TextField data-testid="second-focusable" label="Input Field" />
-        <Button data-testid="third-focusable" variant="contained">
-          Last Button
-        </Button>
-      </Stack>
-    </TestWrapper>
-  ),
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'aria-required-attr', enabled: true },
-          { id: 'aria-roles', enabled: true },
-          { id: 'aria-valid-attr-value', enabled: true },
-          { id: 'button-name', enabled: true },
-          { id: 'duplicate-id', enabled: true },
-          { id: 'label', enabled: true },
-        ],
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open sheet', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        expect(body.getByTestId('first-focusable')).toBeVisible();
-      });
-    });
-
-    await step('Tab navigation forward', async () => {
-      const firstElement = body.getByTestId('first-focusable');
-      const secondElement = body.getByLabelText('Input Field') as HTMLElement;
-
-      await userEvent.click(firstElement);
-      await waitFor(() => {
-        expect(firstElement).toHaveFocus();
-      });
-
-      // Use keyboard instead of tab for better reliability
-      await userEvent.keyboard('{Tab}');
-      await waitFor(
-        () => {
-          expect(secondElement).toHaveFocus();
-        },
-        { timeout: 2000 },
-      );
-    });
-
-    await step('Tab navigation backward', async () => {
-      await userEvent.keyboard('{Shift>}{Tab}{/Shift}');
-      const firstElement = body.getByTestId('first-focusable');
-      await waitFor(
-        () => {
-          expect(firstElement).toHaveFocus();
-        },
-        { timeout: 2000 },
-      );
-    });
-
-    await step('Escape key handling', async () => {
-      // Press escape to close sheet
-      await userEvent.keyboard('{Escape}');
-
-      // Sheet should close - check that the open sheet trigger button is visible again
-      await waitFor(
-        () => {
-          const openButton = canvas.queryByTestId('open-sheet-button');
-          expect(openButton).toBeVisible();
-        },
-        { timeout: 3000 },
-      );
-
-      // Note: Sheet closing verification - skipping due to component behavior
-      // The Sheet component may keep elements in DOM but hidden
-      // This would need to be verified based on the actual implementation
-    });
-  },
-};
-
-export const ScreenReader: Story = {
-  name: '🔊 Screen Reader Test',
-  args: {
-    title: 'Accessible Sheet',
-    description: 'Sheet with ARIA attributes',
-    'aria-label': 'Settings panel',
-    'aria-describedby': 'sheet-description',
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-  },
-  render: (args) => (
-    <TestWrapper {...args}>
-      <div id="sheet-description" data-testid="description-element">
-        This sheet contains application settings
-      </div>
-      <Stack spacing={2}>
-        <FormControlLabel control={<Switch />} label="Enable notifications" />
-        <div role="status" aria-live="polite" data-testid="live-region">
-          Settings updated
-        </div>
-      </Stack>
-    </TestWrapper>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open sheet', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        expect(body.getByTestId('description-element')).toBeVisible();
-      });
-    });
-
-    await step('Verify ARIA descriptions', async () => {
-      const description = body.getByTestId('description-element');
-      await expect(description).toBeInTheDocument();
-      await expect(description).toHaveAttribute('id', 'sheet-description');
-    });
-
-    await step('Verify live regions', async () => {
-      const liveRegion = body.getByTestId('live-region');
-      await expect(liveRegion).toHaveAttribute('aria-live', 'polite');
-      await expect(liveRegion).toHaveAttribute('role', 'status');
-    });
-  },
-};
-
-export const FocusManagement: Story = {
-  name: '🎯 Focus Management Test',
-  args: {
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-  },
-  render: () => {
-    const FocusComponent = () => {
-      const [open, setOpen] = useState(false);
-      const triggerRef = React.useRef<HTMLButtonElement>(null);
-
-      return (
-        <>
-          <Button
-            ref={triggerRef}
-            data-testid="trigger-button"
-            variant="contained"
-            onClick={() => setOpen(true)}
-          >
-            Open Sheet
-          </Button>
-          <Sheet
-            open={open}
-            onOpenChange={setOpen}
-            title="Focus Test"
-            showCloseButton
-            onClose={() => {
-              setOpen(false);
-              // Returning focus to the trigger is the component's own job here,
-              // not the test positioning itself.
-              // eslint-disable-next-line test-flakiness/no-focus-check -- component behaviour, not a test action
-              triggerRef.current?.focus();
-            }}
-          >
-            <Stack spacing={2}>
-              <Button data-testid="first-modal-element" autoFocus>
-                First Element (Auto Focus)
-              </Button>
-              <Button data-testid="second-modal-element">Second Element</Button>
-              <Button data-testid="last-modal-element">Last Element</Button>
-            </Stack>
-          </Sheet>
-        </>
-      );
-    };
-
-    return <FocusComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open sheet and verify auto focus', async () => {
-      const triggerButton = canvas.getByTestId('trigger-button');
-      await userEvent.click(triggerButton);
-
-      await waitFor(() => {
-        const firstElement = body.getByTestId('first-modal-element');
-        expect(firstElement).toBeVisible();
-      });
-
-      // Manually focus the element since autoFocus might not work in tests
-      const firstElement = body.getByTestId('first-modal-element');
-      await userEvent.click(firstElement);
-      await waitFor(() => {
-        expect(firstElement).toHaveFocus();
-      });
-    });
-
-    await step('Tab through sheet elements', async () => {
-      await userEvent.tab();
-      await waitFor(() => {
-        const secondElement = body.getByTestId('second-modal-element');
-        expect(secondElement).toHaveFocus();
-      });
-
-      await userEvent.tab();
-      await waitFor(() => {
-        const lastElement = body.getByTestId('last-modal-element');
-        expect(lastElement).toHaveFocus();
-      });
-    });
-
-    await step('Close and verify focus restoration', async () => {
-      const closeButton = body.getByTestId('sheet-header-close-button');
-      await userEvent.click(closeButton);
-
-      await waitFor(() => {
-        const triggerButton = canvas.getByTestId('trigger-button');
-        expect(triggerButton).toHaveFocus();
-      });
-    });
-  },
-};
-
-// ==================== Visual Tests ====================
-
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  args: {
-    title: 'Responsive Sheet',
-    position: 'bottom',
-    size: 'md',
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-    onClick: fn(),
-  },
-  render: (args) => (
-    <TestWrapper {...args}>
-      <Box
-        data-testid="responsive-container"
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', sm: 'row' },
-          gap: 2,
-        }}
-      >
-        <Typography>Responsive content</Typography>
-        <Button variant="contained">Action</Button>
-      </Box>
-    </TestWrapper>
-  ),
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: { width: '375px', height: '667px' },
-          type: 'mobile',
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: { width: '768px', height: '1024px' },
-          type: 'tablet',
-        },
-        desktop: {
-          name: 'Desktop',
-          styles: { width: '1920px', height: '1080px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'mobile',
-    },
-    chromatic: {
-      viewports: [375, 768, 1920],
-      delay: 300,
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open sheet', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        expect(body.getByTestId('responsive-container')).toBeVisible();
-      });
-    });
-
-    await step('Verify responsive layout', async () => {
-      const container = body.getByTestId('responsive-container');
-      const computedStyle = window.getComputedStyle(container);
-
-      // Measured off the container rather than the window: it is the box the
-      // component actually occupies, and it keeps the assertion about the
-      // element under test rather than about the screen the story runs on.
-      if (container.clientWidth <= 600) {
-        await expect(computedStyle.flexDirection).toBe('column');
-      } else {
-        await expect(computedStyle.flexDirection).toBe('row');
-      }
-    });
-  },
-};
-
-export const ThemeVariations: Story = {
-  name: '🎨 Theme Variations Test',
-  args: {
-    title: 'Themed Sheet',
-    variant: 'glass',
-    glass: true,
-    glow: true,
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-    onFocus: fn(),
-    onBlur: fn(),
-    onClick: fn(),
-  },
-  render: (args) => (
-    <TestWrapper {...args}>
-      <Box
-        data-testid="themed-component"
-        sx={{
-          p: 2,
-          bgcolor: 'background.paper',
-          color: 'text.primary',
-        }}
-      >
-        <Typography>Theme-aware content</Typography>
-      </Box>
-    </TestWrapper>
-  ),
-  parameters: {
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#1a1a1a' },
-      ],
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open sheet', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        expect(body.getByTestId('themed-component')).toBeVisible();
-      });
-    });
-
-    await step('Verify theme colors', async () => {
-      const element = body.getByTestId('themed-component');
-      const computedStyle = window.getComputedStyle(element);
-
-      // Check if colors are applied
-      await expect(computedStyle.backgroundColor).toMatch(/rgb/);
-      await expect(computedStyle.color).toMatch(/rgb/);
-    });
-  },
-};
-
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  args: {
-    onOpenChange: fn(),
-  },
-  render: () => {
-    const StatesComponent = () => {
-      const [open, setOpen] = useState(false);
-      const [loading, setLoading] = useState(false);
-      const [disabled, setDisabled] = useState(false);
-
-      return (
-        <>
-          <Stack direction="row" spacing={2}>
-            <Button
-              data-testid="open-normal"
-              variant="contained"
-              onClick={() => {
-                setLoading(false);
-                setDisabled(false);
-                setOpen(true);
-              }}
-            >
-              Normal
-            </Button>
-            <Button
-              data-testid="open-loading"
-              variant="contained"
-              onClick={() => {
-                setLoading(true);
-                setDisabled(false);
-                setOpen(true);
-              }}
-            >
-              Loading
-            </Button>
-            <Button
-              data-testid="open-disabled"
-              variant="contained"
-              onClick={() => {
-                setLoading(false);
-                setDisabled(true);
-                setOpen(true);
-              }}
-            >
-              Disabled
-            </Button>
-          </Stack>
-          <Sheet
-            open={open}
-            onOpenChange={setOpen}
-            title="Visual States"
-            loading={loading}
-            disabled={disabled}
-            data-testid="states-sheet"
-          >
-            <Typography>Content area</Typography>
-          </Sheet>
-        </>
-      );
-    };
-
-    return <StatesComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Test normal state', async () => {
-      const openButton = canvas.getByTestId('open-normal');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        const sheets = body.getAllByRole('presentation');
-        const sheet = sheets[sheets.length - 1];
-        expect(sheet).toBeVisible();
-      });
-
-      // Note: Sheet closing behavior to be verified based on implementation
-      // The Sheet may keep content in DOM but hidden when closed
-    });
-
-    await step('Test loading state', async () => {
-      const openButton = canvas.getByTestId('open-loading');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        const spinner = body.getByRole('progressbar');
-        expect(spinner).toBeVisible();
-      });
-
-      // Close sheet
-      await userEvent.keyboard('{Escape}');
-    });
-
-    await step('Test disabled state', async () => {
-      const openButton = canvas.getByTestId('open-disabled');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        const sheets = body.getAllByRole('presentation');
-        const sheet = sheets[sheets.length - 1];
-        expect(sheet).toBeVisible();
-        // Note: Disabled state styling may vary based on implementation
-        // The component might use different opacity or other visual indicators
-      });
-    });
-  },
-};
-
-// ==================== Performance Tests ====================
-
-export const Performance: Story = {
-  name: '⚡ Performance Test',
-  args: {
-    title: 'Performance Test Sheet',
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-  },
-  render: (args) => {
-    const items = Array.from({ length: 100 }, (_, i) => ({
-      id: i,
-      name: `Item ${i}`,
-      description: `Description for item ${i}`,
-    }));
-
-    return (
-      <TestWrapper {...args}>
-        <Box data-testid="scroll-container" sx={{ maxHeight: 400, overflow: 'auto' }}>
-          <List>
-            {items.map((item) => (
-              <ListItem key={item.id} data-testid={`item-${item.id}`}>
-                <ListItemText primary={item.name} secondary={item.description} />
-              </ListItem>
-            ))}
-          </List>
-        </Box>
-      </TestWrapper>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open sheet', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        expect(body.getByTestId('scroll-container')).toBeVisible();
-      });
-    });
-
-    await step('All items render', async () => {
-      const elements = body.getAllByTestId(/item-/);
-
-      // The count is the assertion; a wall-clock budget would only measure
-      // whatever machine the story happens to run on.
-      await expect(elements.length).toBeGreaterThan(0);
-    });
-
-    await step('Test scroll performance', async () => {
-      const scrollContainer = body.getByTestId('scroll-container');
-
-      // Scrolling is what this story is about, so it has to move the container;
-      // what it must not do is assert a pixel offset, which depends on the
-      // viewport the story renders in.
-      // eslint-disable-next-line test-flakiness/no-viewport-dependent -- the subject under test is scrolling itself
-      scrollContainer.scrollTop = scrollContainer.scrollHeight;
-      fireEvent.scroll(scrollContainer);
-
-      // The list is not virtualised, so every item must survive the scroll —
-      // which the old assertion on the container could never have caught, since
-      // the container was already in the document before the loop ran.
-      await waitFor(() => {
-        expect(body.getAllByTestId(/^item-\d+$/).length).toBeGreaterThan(0);
-      });
-    });
-  },
-};
-
-// ==================== Edge Cases Tests ====================
-
-export const EdgeCases: Story = {
-  name: '🔧 Edge Cases Test',
-  args: {
-    onOpenChange: fn(),
-  },
-  render: () => {
-    const EdgeCaseComponent = () => {
-      const [open, setOpen] = useState(false);
-      const [emptyOpen, setEmptyOpen] = useState(false);
-      const [longTextOpen, setLongTextOpen] = useState(false);
-
-      const longText = 'Lorem ipsum '.repeat(100);
-
-      return (
-        <>
-          <Stack direction="row" spacing={2}>
-            <Button data-testid="open-empty" variant="outlined" onClick={() => setEmptyOpen(true)}>
-              Empty Content
-            </Button>
-            <Button
-              data-testid="open-long"
-              variant="outlined"
-              onClick={() => setLongTextOpen(true)}
-            >
-              Long Text
-            </Button>
-            <Button data-testid="open-invalid" variant="outlined" onClick={() => setOpen(true)}>
-              Invalid Props
-            </Button>
-          </Stack>
-
-          <Sheet
-            open={emptyOpen}
-            onOpenChange={setEmptyOpen}
-            title="Empty Sheet"
-            data-testid="empty-sheet"
-          />
-
-          <Sheet
-            open={longTextOpen}
-            onOpenChange={setLongTextOpen}
-            title="Long Content"
-            data-testid="long-sheet"
-          >
-            <Typography
-              data-testid="text-content"
-              sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {longText}
-            </Typography>
-          </Sheet>
-
-          <Sheet
-            open={open}
-            onOpenChange={setOpen}
-            title="Test"
-            // Invalid props to test graceful handling
-            size={'invalid' as 'xs'}
-            position={'invalid' as 'top'}
-            data-testid="invalid-sheet"
-          >
-            <Typography data-testid="component">Sheet with invalid props</Typography>
-          </Sheet>
-        </>
-      );
-    };
-
-    return <EdgeCaseComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Empty content handling', async () => {
-      const openButton = canvas.getByTestId('open-empty');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        const sheets = body.getAllByRole('presentation');
-        const sheet = sheets[sheets.length - 1];
-        expect(sheet).toBeVisible();
-      });
-
-      // Close empty sheet
-      await userEvent.keyboard('{Escape}');
-      await waitFor(() => {
-        const sheets = body.queryAllByRole('presentation');
-        expect(sheets.length).toBeLessThanOrEqual(1);
-      });
-    });
-
-    await step('Long text overflow', async () => {
-      const openButton = canvas.getByTestId('open-long');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        const textElement = body.getByTestId('text-content');
-        expect(textElement).toBeVisible();
-        const computedStyle = window.getComputedStyle(textElement);
-        expect(computedStyle.textOverflow).toBe('ellipsis');
-      });
-
-      // Note: Sheet closing behavior - element may remain in DOM but hidden
-      // Skip closing test as it depends on Sheet implementation
-    });
-
-    await step('Invalid props handling', async () => {
-      const openButton = canvas.getByTestId('open-invalid');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        const component = body.getByTestId('component');
-        expect(component).toBeVisible();
-      });
-    });
-  },
-};
-
-// ==================== Integration Tests ====================
-
-export const Integration: Story = {
-  name: '🔗 Integration Test',
-  args: {
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-  },
-  render: () => {
-    const IntegrationComponent = () => {
-      const [mainOpen, setMainOpen] = useState(false);
-      const [nestedOpen, setNestedOpen] = useState(false);
-      const [message, setMessage] = useState('Initial');
-
-      return (
-        <>
-          <Button
-            data-testid="trigger-component"
-            variant="contained"
-            onClick={() => setMainOpen(true)}
-          >
-            Open Main Sheet
-          </Button>
-
-          <Sheet open={mainOpen} onOpenChange={setMainOpen} title="Main Sheet" position="right">
-            <Stack spacing={2}>
-              <Typography data-testid="receiver-component">Status: {message}</Typography>
-              <Button
-                variant="contained"
-                onClick={() => {
-                  setMessage('Updated');
-                  setNestedOpen(true);
-                }}
-              >
-                Open Nested Sheet
-              </Button>
-            </Stack>
-          </Sheet>
-
-          <Sheet
-            open={nestedOpen}
-            onOpenChange={setNestedOpen}
-            title="Nested Sheet"
-            position="bottom"
-            size="sm"
-          >
-            <Typography>This is a nested sheet</Typography>
-          </Sheet>
-        </>
-      );
-    };
-
-    return <IntegrationComponent />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open main sheet', async () => {
-      const trigger = canvas.getByTestId('trigger-component');
-      await userEvent.click(trigger);
-
-      await waitFor(() => {
-        const receiver = body.getByTestId('receiver-component');
-        expect(receiver).toHaveTextContent('Status: Initial');
-      });
-    });
-
-    await step('Communication between sheets', async () => {
-      const buttons = body.getAllByRole('button');
-      const nestedButton = buttons.find((btn) => btn.textContent?.includes('Open Nested'));
-      if (nestedButton) {
-        await userEvent.click(nestedButton);
-
-        await waitFor(() => {
-          const receiver = body.getByTestId('receiver-component');
-          expect(receiver).toHaveTextContent('Status: Updated');
-        });
-      }
-    });
-  },
-};
-
-// ==================== Draggable Specific Tests ====================
-
-export const DraggableInteraction: Story = {
-  name: '🎯 Draggable Interaction Test',
-  args: {
-    variant: 'draggable',
-    position: 'bottom',
-    snapPoints: [0.25, 0.5, 0.75, 1],
-    defaultSnapPoint: 0.5,
-    onDragStart: fn(),
-    onDragEnd: fn(),
-    onSnapPointChange: fn(),
-    onOpenChange: fn(),
-    onOpen: fn(),
-    onClose: fn(),
-  },
-  render: (args) => (
-    <TestWrapper {...args} title="Draggable Test" showHandle>
-      <Typography data-testid="draggable-content">Drag the handle to resize</Typography>
-    </TestWrapper>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const body = within(document.body);
-
-    await step('Open draggable sheet', async () => {
-      const openButton = canvas.getByTestId('open-sheet-button');
-      await userEvent.click(openButton);
-
-      await waitFor(() => {
-        expect(body.getByTestId('draggable-content')).toBeVisible();
-      });
-    });
-
-    // Note: Snap point verification depends on Sheet's draggable implementation
-    // The component may or may not call onSnapPointChange on initial render
-
-    // Note: Actual drag gestures are difficult to simulate in Storybook tests
-    // This would require more sophisticated testing with Playwright
-  },
-};