@12-apps/ui 1.5.0 → 1.5.2

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

@@ -1,394 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-
-import { MapPreview } from './MapPreview';
-import type { HeatmapPoint,MapMarker } from './MapPreview.types';
-
-const meta: Meta<typeof MapPreview> = {
-  title: 'Enhanced/MapPreview/Tests',
-  component: MapPreview,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-    // Increase timeout for map loading
-    test: {
-      timeout: 30000, // 30 seconds for map rendering
-    },
-  },
-  tags: ['autodocs', 'test', 'component:MapPreview'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Test data
-const defaultCenter = { lat: 37.7749, lng: -122.4194 };
-const testMarkers: MapMarker[] = [
-  {
-    position: { lat: 37.7749, lng: -122.4194 },
-    title: 'Marker 1',
-    description: 'First test marker',
-    onClick: fn(),
-  },
-];
-const testHeatmapData: HeatmapPoint[] = [{ lat: 37.7749, lng: -122.4194, weight: 0.8 }];
-
-// 1. Basic Interaction Tests
-export const BasicInteraction: Story = {
-  render: () => (
-    <MapPreview center={defaultCenter} interactive={true} showControls={true} zoom={15} />
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map container to render with extended timeout
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-        return container;
-      },
-      { timeout: 10000 }
-    );
-
-    // Wait for static map view to render
-    await waitFor(
-      async () => {
-        const staticMap = await canvas.findByTestId('static-map-view');
-        expect(staticMap).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Verify map controls are present
-    const controls = await canvas.findByTestId('map-controls');
-    expect(controls).toBeInTheDocument();
-
-    // Verify coordinates display
-    const coordsDisplay = await canvas.findByTestId('coordinates-display');
-    expect(coordsDisplay).toBeInTheDocument();
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 2. Marker Interaction Tests
-export const MarkerInteraction: Story = {
-  render: () => <MapPreview center={defaultCenter} markers={testMarkers} interactive={true} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map to render first
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Test marker renders with extended wait
-    await waitFor(
-      async () => {
-        const markerElement = await canvas.findByTestId('map-marker-0');
-        expect(markerElement).toBeInTheDocument();
-        return markerElement;
-      },
-      { timeout: 10000 }
-    );
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 3. Keyboard Navigation Tests
-export const KeyboardNavigation: Story = {
-  render: () => <MapPreview center={defaultCenter} showControls={true} interactive={true} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map to render and test container is focusable
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-        expect(container).toHaveAttribute('tabIndex', '0');
-        return container;
-      },
-      { timeout: 10000 }
-    );
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 4. Screen Reader Tests
-export const ScreenReader: Story = {
-  render: () => <MapPreview center={defaultCenter} showControls={true} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map and test ARIA labels
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-        expect(container).toHaveAttribute('role', 'img');
-        expect(container).toHaveAttribute('aria-label');
-        return container;
-      },
-      { timeout: 10000 }
-    );
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 5. Focus Management Tests
-export const FocusManagement: Story = {
-  render: () => <MapPreview center={defaultCenter} showControls={true} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map and test initial focus
-    const mapContainer = await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-        return container;
-      },
-      { timeout: 10000 }
-    );
-
-    // The container carries tabIndex={0}, so clicking it should focus it.
-    await userEvent.click(mapContainer);
-    await waitFor(() => expect(mapContainer).toHaveFocus());
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 6. Responsive Design Tests
-export const ResponsiveDesign: Story = {
-  render: () => <MapPreview center={defaultCenter} height="300px" showControls={true} />,
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map to render in mobile viewport
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 7. Theme Variation Tests
-export const ThemeVariations: Story = {
-  render: () => <MapPreview center={defaultCenter} variant="glass" showControls={true} />,
-  parameters: {
-    backgrounds: { default: 'dark' },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for glass variant to render
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 8. Visual State Tests
-export const VisualStates: Story = {
-  render: () => <MapPreview center={defaultCenter} mapType="satellite" showControls={true} />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for static map view to render with satellite type
-    await waitFor(
-      async () => {
-        const staticMap = await canvas.findByTestId('static-map-view');
-        expect(staticMap).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 9. Performance Tests
-export const Performance: Story = {
-  render: () => (
-    <MapPreview
-      center={defaultCenter}
-      // Spread deterministically around the centre. These were random offsets,
-      // which meant the marker layout — and any snapshot of it — differed on
-      // every run.
-      markers={Array.from({ length: 5 }, (_, i) => ({
-        position: {
-          lat: defaultCenter.lat + (i - 2) * 0.02,
-          lng: defaultCenter.lng + (2 - i) * 0.02,
-        },
-        title: `Marker ${i + 1}`,
-      }))}
-      showControls={true}
-    />
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map to render with multiple markers
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Verify all markers rendered
-    await waitFor(
-      async () => {
-        const markers = Array.from({ length: 5 }, (_, i) =>
-          canvas.queryByTestId(`map-marker-${i}`)
-        );
-        const renderedMarkers = markers.filter(m => m !== null);
-        expect(renderedMarkers.length).toBe(5);
-      },
-      { timeout: 10000 }
-    );
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 10. Edge Cases Tests
-export const EdgeCases: Story = {
-  render: () => (
-    <MapPreview
-      center={{ lat: 90, lng: 180 }}
-      zoom={20}
-      height="100px"
-      markers={[]}
-      showControls={true}
-    />
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map with extreme coordinates to render
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};
-
-// 11. Integration Tests
-export const Integration: Story = {
-  render: () => (
-    <MapPreview
-      center={defaultCenter}
-      markers={testMarkers}
-      showRoute={true}
-      showHeatmap={true}
-      heatmapData={testHeatmapData}
-      showControls={true}
-      interactive={true}
-    />
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for map with all features to render
-    await waitFor(
-      async () => {
-        const container = await canvas.findByTestId('map-preview-container');
-        expect(container).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Verify marker rendered
-    await waitFor(
-      async () => {
-        const marker = await canvas.findByTestId('map-marker-0');
-        expect(marker).toBeInTheDocument();
-      },
-      { timeout: 10000 }
-    );
-
-    // Verify controls rendered
-    const controls = await canvas.findByTestId('map-controls');
-    expect(controls).toBeInTheDocument();
-
-    // Mark test as passed
-    const statusElement = document.createElement('div');
-    statusElement.setAttribute('aria-label', 'Status of the test run');
-    statusElement.textContent = 'PASS';
-    canvasElement.appendChild(statusElement);
-  },
-};

package/src/components/data-display/Popover/Popover.stories.tsx

@@ -1,295 +0,0 @@
-import { Button, List, ListItem, ListItemText,Stack, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { Popover } from './Popover';
-
-const meta: Meta<typeof Popover> = {
-  title: 'DataDisplay/Popover',
-  component: Popover,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs', 'component:Popover'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Wrapper for interactive stories
-const PopoverDemo = ({
-  children,
-  ...props
-}: {
-  children?: React.ReactNode;
-  [key: string]: unknown;
-}) => {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <Button variant="contained" onClick={handleClick}>
-        Open Popover
-      </Button>
-      <Popover
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        {...props}
-      >
-        {children}
-      </Popover>
-    </>
-  );
-};
-
-export const Default: Story = {
-  render: () => (
-    <PopoverDemo>
-      <Typography sx={{ p: 2 }}>This is a basic popover content.</Typography>
-    </PopoverDemo>
-  ),
-};
-
-export const Variants: Story = {
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <PopoverDemo variant="default">
-        <Typography sx={{ p: 2 }}>Default variant</Typography>
-      </PopoverDemo>
-      <PopoverDemo variant="glass">
-        <Typography sx={{ p: 2 }}>Glass variant</Typography>
-      </PopoverDemo>
-      <PopoverDemo variant="arrow">
-        <Typography sx={{ p: 2 }}>Arrow variant</Typography>
-      </PopoverDemo>
-    </Stack>
-  ),
-};
-
-export const WithEffects: Story = {
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <PopoverDemo glow>
-        <Typography sx={{ p: 2 }}>Glow effect</Typography>
-      </PopoverDemo>
-      <PopoverDemo pulse>
-        <Typography sx={{ p: 2 }}>Pulse effect</Typography>
-      </PopoverDemo>
-    </Stack>
-  ),
-};
-
-export const ComplexContent: Story = {
-  render: () => (
-    <PopoverDemo variant="glass" maxWidth={300}>
-      <div style={{ padding: 16 }}>
-        <Typography variant="h6" gutterBottom>
-          Menu Options
-        </Typography>
-        <List dense>
-          <ListItem button>
-            <ListItemText primary="Profile Settings" />
-          </ListItem>
-          <ListItem button>
-            <ListItemText primary="Account Security" />
-          </ListItem>
-          <ListItem button>
-            <ListItemText primary="Notifications" />
-          </ListItem>
-          <ListItem button>
-            <ListItemText primary="Sign Out" />
-          </ListItem>
-        </List>
-      </div>
-    </PopoverDemo>
-  ),
-};
-
-export const GlassEffect: Story = {
-  render: () => (
-    <PopoverDemo variant="glass" glow>
-      <Typography sx={{ p: 3 }}>Glass morphism with glow effect</Typography>
-    </PopoverDemo>
-  ),
-};
-
-export const WithArrow: Story = {
-  render: () => (
-    <PopoverDemo variant="arrow">
-      <Typography sx={{ p: 2 }}>Popover with arrow pointing to anchor</Typography>
-    </PopoverDemo>
-  ),
-};
-
-export const DifferentSizes: Story = {
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <PopoverDemo maxWidth={200}>
-        <Typography sx={{ p: 2 }}>Small popover (200px max)</Typography>
-      </PopoverDemo>
-      <PopoverDemo maxWidth={400}>
-        <Typography sx={{ p: 2 }}>Medium popover (400px max)</Typography>
-      </PopoverDemo>
-      <PopoverDemo maxWidth={600}>
-        <Typography sx={{ p: 2 }}>Large popover (600px max)</Typography>
-      </PopoverDemo>
-    </Stack>
-  ),
-};
-
-export const CombinedEffects: Story = {
-  render: () => (
-    <PopoverDemo variant="glass" glow pulse>
-      <Typography sx={{ p: 3 }}>Combined glass, glow, and pulse effects</Typography>
-    </PopoverDemo>
-  ),
-};
-
-export const EmptyState: Story = {
-  render: () => (
-    <PopoverDemo>
-      <div style={{ padding: 24, textAlign: 'center' }}>
-        <Typography color="text.secondary">No content available</Typography>
-      </div>
-    </PopoverDemo>
-  ),
-};
-
-export const LoadingState: Story = {
-  render: () => (
-    <PopoverDemo>
-      <div style={{ padding: 24, textAlign: 'center' }}>
-        <Typography>Loading...</Typography>
-      </div>
-    </PopoverDemo>
-  ),
-};
-
-export const ErrorState: Story = {
-  render: () => (
-    <PopoverDemo>
-      <div style={{ padding: 24, textAlign: 'center' }}>
-        <Typography color="error">Error loading content</Typography>
-      </div>
-    </PopoverDemo>
-  ),
-};
-
-// Required story exports for validation
-export const AllVariants: Story = {
-  render: () => (
-    <Stack direction="column" spacing={4} alignItems="center">
-      <PopoverDemo variant="default">
-        <Typography sx={{ p: 2 }}>Default variant</Typography>
-      </PopoverDemo>
-      <PopoverDemo variant="glass">
-        <Typography sx={{ p: 2 }}>Glass variant with translucent effect</Typography>
-      </PopoverDemo>
-      <PopoverDemo variant="arrow">
-        <Typography sx={{ p: 2 }}>Arrow variant pointing to anchor</Typography>
-      </PopoverDemo>
-    </Stack>
-  ),
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <Stack direction="column" spacing={4} alignItems="center">
-      <PopoverDemo maxWidth={150}>
-        <Typography sx={{ p: 2 }}>Extra small (150px)</Typography>
-      </PopoverDemo>
-      <PopoverDemo maxWidth={250}>
-        <Typography sx={{ p: 2 }}>Small (250px)</Typography>
-      </PopoverDemo>
-      <PopoverDemo maxWidth={400}>
-        <Typography sx={{ p: 2 }}>Medium (400px)</Typography>
-      </PopoverDemo>
-      <PopoverDemo maxWidth={600}>
-        <Typography sx={{ p: 3 }}>Large (600px)</Typography>
-      </PopoverDemo>
-      <PopoverDemo maxWidth={800}>
-        <Typography sx={{ p: 4 }}>Extra large (800px)</Typography>
-      </PopoverDemo>
-    </Stack>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Stack direction="column" spacing={4} alignItems="center">
-      <PopoverDemo>
-        <Typography sx={{ p: 2 }}>Normal state</Typography>
-      </PopoverDemo>
-      <PopoverDemo>
-        <div style={{ padding: 24, textAlign: 'center' }}>
-          <Typography>Loading...</Typography>
-        </div>
-      </PopoverDemo>
-      <PopoverDemo>
-        <div style={{ padding: 24, textAlign: 'center' }}>
-          <Typography color="error">Error state</Typography>
-        </div>
-      </PopoverDemo>
-      <PopoverDemo>
-        <div style={{ padding: 24, textAlign: 'center' }}>
-          <Typography color="text.secondary">Empty state</Typography>
-        </div>
-      </PopoverDemo>
-    </Stack>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => (
-    <Stack direction="row" spacing={4} alignItems="center">
-      <PopoverDemo>
-        <Typography sx={{ p: 2 }}>Hover over me</Typography>
-      </PopoverDemo>
-      <PopoverDemo variant="glass" glow>
-        <Typography sx={{ p: 2 }}>Glass with glow on hover</Typography>
-      </PopoverDemo>
-      <PopoverDemo variant="arrow" pulse>
-        <Typography sx={{ p: 2 }}>Arrow with pulse effect</Typography>
-      </PopoverDemo>
-    </Stack>
-  ),
-};
-
-export const Responsive: Story = {
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
-        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
-        desktop: { name: 'Desktop', styles: { width: '1280px', height: '720px' } },
-      },
-    },
-  },
-  render: () => (
-    <PopoverDemo variant="glass" glow>
-      <div style={{ padding: 24 }}>
-        <Typography variant="h6" gutterBottom>
-          Responsive Popover
-        </Typography>
-        <Typography paragraph>This popover adapts to different screen sizes.</Typography>
-        <Typography variant="body2" color="text.secondary">
-          Try switching viewport sizes to see responsive behavior.
-        </Typography>
-      </div>
-    </PopoverDemo>
-  ),
-};