@12-apps/ui 1.5.0 → 1.5.2

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

@@ -1,387 +0,0 @@
-import type { SxProps, Theme } from '@mui/material';
-import { Box, Stack, Typography } from '@mui/material';
-import BrokenImageIcon from '@mui/icons-material/BrokenImage';
-import { LazyImage } from './LazyImage';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-const meta: Meta<typeof LazyImage> = {
-  title: 'DataDisplay/LazyImage',
-  component: LazyImage,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: 'A high-performance image component with lazy loading, progressive enhancement, and error handling.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    src: {
-      control: 'text',
-      description: 'Image source URL',
-    },
-    alt: {
-      control: 'text',
-      description: 'Alternative text for accessibility',
-    },
-    width: {
-      control: 'number',
-      description: 'Image width',
-    },
-    height: {
-      control: 'number',
-      description: 'Image height',
-    },
-    loadingState: {
-      control: 'select',
-      options: ['skeleton', 'spinner', 'placeholder', 'none'],
-      description: 'Type of loading indicator',
-    },
-    objectFit: {
-      control: 'select',
-      options: ['fill', 'contain', 'cover', 'none', 'scale-down'],
-      description: 'Object fit CSS property',
-    },
-    lazy: {
-      control: 'boolean',
-      description: 'Enable lazy loading',
-    },
-    fadeIn: {
-      control: 'boolean',
-      description: 'Enable fade-in animation',
-    },
-    borderRadius: {
-      control: 'number',
-      description: 'Border radius in pixels',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof LazyImage>;
-
-// Sample images for stories
-const SAMPLE_IMAGE = 'https://picsum.photos/800/600?random=1';
-const SAMPLE_PLACEHOLDER = 'https://picsum.photos/80/60?random=1&blur=2';
-const INVALID_IMAGE = 'https://invalid-url-that-will-fail.com/image.jpg';
-const FALLBACK_IMAGE = 'https://via.placeholder.com/800x600/cccccc/666666?text=Fallback+Image';
-
-export const Default: Story = {
-  args: {
-    src: SAMPLE_IMAGE,
-    alt: 'Sample image',
-    width: 400,
-    height: 300,
-  },
-};
-
-export const WithSkeletonLoading: Story = {
-  args: {
-    src: `https://picsum.photos/600/400?random=${Date.now()}`,
-    alt: 'Image with skeleton loading',
-    width: 600,
-    height: 400,
-    loadingState: 'skeleton',
-    skeletonProps: {
-      animation: 'pulse',
-      intensity: 'medium',
-    },
-  },
-};
-
-export const WithSpinnerLoading: Story = {
-  args: {
-    src: `https://picsum.photos/600/400?random=${Date.now() + 1}`,
-    alt: 'Image with spinner loading',
-    width: 600,
-    height: 400,
-    loadingState: 'spinner',
-    spinnerProps: {
-      size: 48,
-      thickness: 4,
-    },
-  },
-};
-
-export const WithPlaceholder: Story = {
-  args: {
-    src: `https://picsum.photos/800/600?random=${Date.now() + 2}`,
-    placeholder: SAMPLE_PLACEHOLDER,
-    alt: 'Progressive loading with placeholder',
-    width: 800,
-    height: 600,
-    loadingState: 'placeholder',
-  },
-};
-
-export const WithErrorFallback: Story = {
-  args: {
-    src: INVALID_IMAGE,
-    fallback: FALLBACK_IMAGE,
-    alt: 'Image with fallback on error',
-    width: 400,
-    height: 300,
-    retryOnError: true,
-    maxRetries: 2,
-  },
-};
-
-export const WithCustomFallback: Story = {
-  args: {
-    src: INVALID_IMAGE,
-    fallback: (
-      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
-        <BrokenImageIcon sx={{ fontSize: 64, color: 'text.secondary' }} />
-        <Typography variant="body2" color="text.secondary">
-          Image not available
-        </Typography>
-      </Box>
-    ),
-    alt: 'Image with custom fallback component',
-    width: 400,
-    height: 300,
-  },
-};
-
-export const CircularImage: Story = {
-  args: {
-    src: 'https://picsum.photos/200/200?random=3',
-    alt: 'Circular avatar',
-    width: 150,
-    height: 150,
-    borderRadius: '50%',
-    objectFit: 'cover',
-  },
-};
-
-export const RoundedCorners: Story = {
-  args: {
-    src: 'https://picsum.photos/600/400?random=4',
-    alt: 'Rounded corners image',
-    width: 600,
-    height: 400,
-    borderRadius: 16,
-    loadingState: 'skeleton',
-    skeletonProps: {
-      animation: 'wave',
-    },
-  },
-};
-
-export const NoLazyLoading: Story = {
-  args: {
-    src: 'https://picsum.photos/800/400?random=5',
-    alt: 'Eager loading image',
-    width: 800,
-    height: 400,
-    lazy: false,
-    fetchPriority: 'high',
-    loading: 'eager',
-  },
-};
-
-export const ObjectFitVariants: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Typography variant="h6">Object Fit Variants</Typography>
-      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 2 }}>
-        {(['fill', 'contain', 'cover', 'none', 'scale-down'] as const).map((fit) => (
-          <Box key={fit}>
-            <Typography variant="caption" gutterBottom>
-              {fit}
-            </Typography>
-            <Box sx={{ width: 200, height: 150, border: '1px solid', borderColor: 'divider' }}>
-              <LazyImage
-                src="https://picsum.photos/300/400?random=6"
-                alt={`Object fit ${fit}`}
-                width="100%"
-                height="100%"
-                objectFit={fit}
-                fadeIn={false}
-              />
-            </Box>
-          </Box>
-        ))}
-      </Box>
-    </Stack>
-  ),
-};
-
-export const LoadingStateComparison: Story = {
-  render: () => {
-    const uniqueId = Date.now();
-    return (
-      <Stack spacing={3}>
-        <Typography variant="h6">Loading State Comparison</Typography>
-        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 3 }}>
-          <Box>
-            <Typography variant="subtitle2" gutterBottom>
-              Skeleton Loading
-            </Typography>
-            <LazyImage
-              src={`https://picsum.photos/250/200?random=${uniqueId + 1}&delay=2000`}
-              alt="Skeleton loading"
-              width={250}
-              height={200}
-              loadingState="skeleton"
-            />
-          </Box>
-          <Box>
-            <Typography variant="subtitle2" gutterBottom>
-              Spinner Loading
-            </Typography>
-            <LazyImage
-              src={`https://picsum.photos/250/200?random=${uniqueId + 2}&delay=2000`}
-              alt="Spinner loading"
-              width={250}
-              height={200}
-              loadingState="spinner"
-            />
-          </Box>
-          <Box>
-            <Typography variant="subtitle2" gutterBottom>
-              Placeholder Loading
-            </Typography>
-            <LazyImage
-              src={`https://picsum.photos/250/200?random=${uniqueId + 3}&delay=2000`}
-              placeholder="https://picsum.photos/25/20?random=1&blur=2"
-              alt="Placeholder loading"
-              width={250}
-              height={200}
-              loadingState="placeholder"
-            />
-          </Box>
-          <Box>
-            <Typography variant="subtitle2" gutterBottom>
-              No Loading Indicator
-            </Typography>
-            <LazyImage
-              src={`https://picsum.photos/250/200?random=${uniqueId + 4}&delay=2000`}
-              alt="No loading indicator"
-              width={250}
-              height={200}
-              loadingState="none"
-            />
-          </Box>
-        </Box>
-      </Stack>
-    );
-  },
-};
-
-export const Gallery: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Typography variant="h6">Image Gallery with Lazy Loading</Typography>
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-          gap: 2,
-        }}
-      >
-        {Array.from({ length: 12 }).map((_, index) => (
-          <LazyImage
-            key={index}
-            src={`https://picsum.photos/200/200?random=${index + 100}`}
-            alt={`Gallery image ${index + 1}`}
-            width="100%"
-            height={200}
-            objectFit="cover"
-            borderRadius={8}
-            loadingState="skeleton"
-            skeletonProps={{
-              animation: 'wave',
-              intensity: 'low',
-            }}
-          />
-        ))}
-      </Box>
-      <Typography variant="caption" color="text.secondary">
-        Scroll down to see lazy loading in action
-      </Typography>
-    </Stack>
-  ),
-};
-
-export const WithEventCallbacks: Story = {
-  args: {
-    src: 'https://picsum.photos/600/400?random=7',
-    alt: 'Image with event callbacks',
-    width: 600,
-    height: 400,
-    onLoadStart: () => {
-      // eslint-disable-next-line no-console -- demo output for the Storybook docs page
-      console.info('🚀 Started loading image');
-    },
-    onLoad: (event) => {
-      // eslint-disable-next-line no-console -- demo output for the Storybook docs page
-      console.info('✅ Image loaded successfully', event);
-    },
-    onError: (event) => {
-      // eslint-disable-next-line no-console -- demo output for the Storybook docs page
-      console.error('❌ Image failed to load', event);
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Open browser console to see event callbacks in action',
-      },
-    },
-  },
-};
-
-export const ResponsiveImage: Story = {
-  args: {
-    src: 'https://picsum.photos/1200/800?random=8',
-    alt: 'Responsive image',
-    width: '100%',
-    height: 'auto',
-    sx: {
-      maxWidth: '100%',
-      height: 'auto',
-    },
-  },
-};
-
-const hoverSx: SxProps<Theme> = {
-  transition: 'transform 0.3s, box-shadow 0.3s',
-  cursor: 'pointer',
-  '&:hover': {
-    transform: 'scale(1.05)',
-    boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
-  },
-};
-
-export const HoverEffects: Story = {
-  args: {
-    src: 'https://picsum.photos/400/300?random=9',
-    alt: 'Image with hover effects',
-    width: 400,
-    height: 300,
-    borderRadius: 12,
-    sx: hoverSx,
-  },
-};
-
-export const AccessibleImage: Story = {
-  args: {
-    src: 'https://picsum.photos/600/400?random=10',
-    alt: 'A beautiful landscape photo showing mountains at sunset',
-    'aria-label': 'Scenic mountain landscape',
-    'aria-describedby': 'image-description',
-    role: 'img',
-    width: 600,
-    height: 400,
-  },
-  render: (args) => (
-    <Stack spacing={2}>
-      <LazyImage {...args} />
-      <Typography id="image-description" variant="caption">
-        This image shows a stunning mountain landscape during golden hour, with peaks silhouetted against a colorful sky.
-      </Typography>
-    </Stack>
-  ),
-};

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

@@ -1,315 +0,0 @@
-import { Box, Button, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-
-import { Lightbox } from './Lightbox';
-import type { LightboxItem } from './Lightbox.types';
-
-const meta: Meta<typeof Lightbox> = {
-  title: 'DataDisplay/Lightbox',
-  component: Lightbox,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'A sophisticated lightbox component for showcasing media with advanced features like zoom, pan, autoplay, and filmstrip navigation.',
-      },
-    },
-  },
-  tags: ['autodocs', 'component:Lightbox'],
-};
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-// Sample images for stories
-const sampleImages: LightboxItem[] = [
-  {
-    src: 'https://picsum.photos/800/600?random=1',
-    alt: 'Beautiful landscape',
-    caption: 'A beautiful landscape captured during golden hour',
-  },
-  {
-    src: 'https://picsum.photos/600/800?random=2',
-    alt: 'City architecture',
-    caption: 'Modern architecture in the city center',
-  },
-  {
-    src: 'https://picsum.photos/900/600?random=3',
-    alt: 'Nature scene',
-    caption: 'Peaceful nature scene with trees and water',
-  },
-  {
-    src: 'https://picsum.photos/700/700?random=4',
-    alt: 'Abstract art',
-    caption: 'Abstract composition with vibrant colors',
-  },
-];
-
-const mixedMediaItems: LightboxItem[] = [
-  {
-    src: 'https://picsum.photos/800/600?random=5',
-    alt: 'Image 1',
-    caption: 'First image in the gallery',
-    type: 'image',
-  },
-  {
-    src: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
-    alt: 'Sample video',
-    caption: 'Sample video content',
-    type: 'video',
-  },
-  {
-    src: 'https://picsum.photos/800/600?random=6',
-    alt: 'Image 2',
-    caption: 'Second image in the gallery',
-    type: 'image',
-  },
-];
-
-// Wrapper component for stories
-interface LightboxWrapperProps {
-  items: LightboxItem[];
-  triggerText?: string;
-  thumbnails?: boolean;
-  autoplay?: boolean | { interval?: number };
-  loop?: boolean;
-  showControls?: boolean;
-  showCaptions?: boolean;
-  zoomable?: boolean;
-  startIndex?: number;
-}
-
-const LightboxWrapper = ({
-  items,
-  triggerText = 'Open Lightbox',
-  ...props
-}: LightboxWrapperProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <Box sx={{ textAlign: 'center', padding: 4 }}>
-      <Button variant="contained" onClick={() => setIsOpen(true)} sx={{ mb: 2 }}>
-        {triggerText}
-      </Button>
-      <Typography variant="body2" color="text.secondary">
-        Click the button to open the lightbox
-      </Typography>
-      <Lightbox isOpen={isOpen} onClose={() => setIsOpen(false)} items={items} {...props} />
-    </Box>
-  );
-};
-
-// Stories
-export const Default: Story = {
-  render: () => <LightboxWrapper items={sampleImages} />,
-};
-
-export const SingleImage: Story = {
-  render: () => <LightboxWrapper items={[sampleImages[0]]} triggerText="Open Single Image" />,
-};
-
-export const WithFilmstrip: Story = {
-  render: () => (
-    <LightboxWrapper items={sampleImages} thumbnails={true} triggerText="Open with Thumbnails" />
-  ),
-};
-
-export const Autoplay: Story = {
-  render: () => (
-    <LightboxWrapper items={sampleImages} autoplay={true} triggerText="Open with Autoplay" />
-  ),
-};
-
-export const CustomAutoplayInterval: Story = {
-  render: () => (
-    <LightboxWrapper
-      items={sampleImages}
-      autoplay={{ interval: 2000 }}
-      triggerText="Open with Fast Autoplay"
-    />
-  ),
-};
-
-export const WithLoop: Story = {
-  render: () => <LightboxWrapper items={sampleImages} loop={true} triggerText="Open with Loop" />,
-};
-
-export const NoControls: Story = {
-  render: () => (
-    <LightboxWrapper
-      items={sampleImages}
-      showControls={false}
-      triggerText="Open without Controls"
-    />
-  ),
-};
-
-export const NoCaptions: Story = {
-  render: () => (
-    <LightboxWrapper
-      items={sampleImages}
-      showCaptions={false}
-      triggerText="Open without Captions"
-    />
-  ),
-};
-
-export const MixedMedia: Story = {
-  render: () => <LightboxWrapper items={mixedMediaItems} triggerText="Open Mixed Media Gallery" />,
-};
-
-export const NotZoomable: Story = {
-  render: () => (
-    <LightboxWrapper items={sampleImages} zoomable={false} triggerText="Open without Zoom" />
-  ),
-};
-
-export const StartAtIndex: Story = {
-  render: () => (
-    <LightboxWrapper items={sampleImages} startIndex={2} triggerText="Start at Third Image" />
-  ),
-};
-
-export const FullFeatured: Story = {
-  render: () => (
-    <LightboxWrapper
-      items={sampleImages}
-      thumbnails={true}
-      autoplay={{ interval: 3000 }}
-      loop={true}
-      zoomable={true}
-      showCaptions={true}
-      showControls={true}
-      triggerText="Open Full Featured"
-    />
-  ),
-};
-
-// Dark mode example
-export const DarkMode: Story = {
-  parameters: {
-    backgrounds: { default: 'dark' },
-  },
-  render: () => (
-    <Box sx={{ bgcolor: 'grey.900', minHeight: '100vh', py: 4 }}>
-      <LightboxWrapper items={sampleImages} thumbnails={true} triggerText="Open in Dark Mode" />
-    </Box>
-  ),
-};
-
-// Mobile responsive example
-export const MobileResponsive: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-  },
-  render: () => (
-    <LightboxWrapper items={sampleImages} thumbnails={true} triggerText="Open on Mobile" />
-  ),
-};
-
-// Required story exports
-export const AllVariants: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, p: 4 }}>
-      <Typography variant="h6">All Variants</Typography>
-      <LightboxWrapper items={sampleImages} triggerText="Default" />
-      <LightboxWrapper items={sampleImages} thumbnails={true} triggerText="With Thumbnails" />
-      <LightboxWrapper items={sampleImages} autoplay={true} triggerText="With Autoplay" />
-      <LightboxWrapper items={sampleImages} loop={true} triggerText="With Loop" />
-      <LightboxWrapper items={mixedMediaItems} triggerText="Mixed Media" />
-    </Box>
-  ),
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, p: 4 }}>
-      <Typography variant="h6">All Sizes (Gallery sizes)</Typography>
-      <LightboxWrapper items={[sampleImages[0]]} triggerText="Single Item" />
-      <LightboxWrapper items={sampleImages.slice(0, 2)} triggerText="Two Items" />
-      <LightboxWrapper items={sampleImages} triggerText="Multiple Items" />
-      <LightboxWrapper
-        items={[...sampleImages, ...sampleImages, ...sampleImages]}
-        thumbnails={true}
-        triggerText="Large Gallery"
-      />
-    </Box>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, p: 4 }}>
-      <Typography variant="h6">All States</Typography>
-      <LightboxWrapper items={sampleImages} triggerText="Normal State" />
-      <LightboxWrapper items={[]} triggerText="Empty State" />
-      <LightboxWrapper
-        items={sampleImages}
-        showControls={false}
-        showCaptions={false}
-        triggerText="Minimal State"
-      />
-      <LightboxWrapper
-        items={sampleImages}
-        thumbnails={true}
-        autoplay={true}
-        loop={true}
-        triggerText="Full Featured State"
-      />
-    </Box>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, p: 4 }}>
-      <Typography variant="h6">Interactive States</Typography>
-      <Typography variant="body2" color="text.secondary">
-        Open any lightbox to test navigation, zoom, and touch gestures
-      </Typography>
-      <LightboxWrapper items={sampleImages} zoomable={true} triggerText="Zoomable Images" />
-      <LightboxWrapper
-        items={sampleImages}
-        showControls={true}
-        loop={true}
-        triggerText="With Navigation"
-      />
-      <LightboxWrapper
-        items={sampleImages}
-        thumbnails={true}
-        triggerText="With Thumbnail Navigation"
-      />
-    </Box>
-  ),
-};
-
-export const Responsive: Story = {
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: { name: 'Mobile', styles: { width: '320px', height: '568px' } },
-        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
-        desktop: { name: 'Desktop', styles: { width: '1200px', height: '800px' } },
-      },
-    },
-  },
-  render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>
-        Responsive Lightbox
-      </Typography>
-      <Typography variant="body2" color="text.secondary" paragraph>
-        Resize viewport or use viewport controls to test responsiveness
-      </Typography>
-      <LightboxWrapper
-        items={sampleImages}
-        thumbnails={true}
-        triggerText="Open Responsive Lightbox"
-      />
-    </Box>
-  ),
-};