@12-apps/ui 1.5.0 → 1.5.1

package/src/components/layout/ScrollArea/ScrollArea.stories.tsx

@@ -1,651 +0,0 @@
-import { Box, Chip, List, ListItem, ListItemText, Paper, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useMemo, useState } from 'react';
-
-import { ScrollArea } from './ScrollArea';
-
-const meta: Meta<typeof ScrollArea> = {
-  title: 'Layout/ScrollArea',
-  component: ScrollArea,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'A custom scrollable area component with styled scrollbars and smooth scrolling behavior.',
-      },
-    },
-  },
-  tags: ['autodocs', 'component:ScrollArea'],
-  argTypes: {
-    width: {
-      control: 'text',
-      description: 'Width of the scroll area container',
-    },
-    height: {
-      control: 'text',
-      description: 'Height of the scroll area container',
-    },
-    maxHeight: {
-      control: 'text',
-      description: 'Maximum height before scrolling is enabled',
-    },
-    orientation: {
-      control: 'select',
-      options: ['vertical', 'horizontal', 'both'],
-      description: 'Scroll orientation',
-    },
-    scrollbarSize: {
-      control: 'select',
-      options: ['thin', 'medium', 'thick'],
-      description: 'Size of the scrollbar',
-    },
-    autoHide: {
-      control: 'boolean',
-      description: 'Whether scrollbars auto-hide when not in use',
-    },
-    smoothScroll: {
-      control: 'boolean',
-      description: 'Enable smooth scrolling behavior',
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'overlay', 'glass'],
-      description: 'Visual variant of the scroll area',
-    },
-    scrollToTopButton: {
-      control: 'boolean',
-      description: 'Show scroll-to-top button',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable scrolling',
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Loading state',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Helper component to generate scrollable content
-const ScrollableContent = ({ lines = 30 }: { lines?: number }) => (
-  <Box sx={{ p: 2 }}>
-    {Array.from({ length: lines }, (_, i) => (
-      <Typography key={i} paragraph>
-        Line {i + 1}: This is a sample text line to demonstrate scrolling functionality. Lorem ipsum
-        dolor sit amet, consectetur adipiscing elit.
-      </Typography>
-    ))}
-  </Box>
-);
-
-// Helper component for list content
-const ListContent = ({ items = 50 }: { items?: number }) => (
-  <List>
-    {Array.from({ length: items }, (_, i) => (
-      <ListItem key={i} divider>
-        <ListItemText primary={`Item ${i + 1}`} secondary={`Description for item ${i + 1}`} />
-      </ListItem>
-    ))}
-  </List>
-);
-
-export const Default: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    children: <ScrollableContent />,
-  },
-};
-
-export const VerticalScroll: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    orientation: 'vertical',
-    children: <ScrollableContent lines={50} />,
-  },
-};
-
-export const HorizontalScroll: Story = {
-  args: {
-    width: 400,
-    height: 200,
-    orientation: 'horizontal',
-    children: (
-      <Box sx={{ display: 'flex', gap: 2, p: 2, width: 'max-content' }}>
-        {Array.from({ length: 20 }, (_, i) => (
-          <Paper key={i} sx={{ p: 2, minWidth: 150 }}>
-            <Typography>Card {i + 1}</Typography>
-          </Paper>
-        ))}
-      </Box>
-    ),
-  },
-};
-
-export const BothDirections: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    orientation: 'both',
-    children: (
-      <Box sx={{ width: 800, p: 2 }}>
-        <ScrollableContent lines={50} />
-      </Box>
-    ),
-  },
-};
-
-export const ThinScrollbar: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    scrollbarSize: 'thin',
-    children: <ScrollableContent />,
-  },
-};
-
-export const ThickScrollbar: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    scrollbarSize: 'thick',
-    children: <ScrollableContent />,
-  },
-};
-
-export const AutoHideDisabled: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    autoHide: false,
-    alwaysShowScrollbar: true,
-    children: <ScrollableContent />,
-  },
-};
-
-export const SmoothScrollDisabled: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    smoothScroll: false,
-    children: <ScrollableContent />,
-  },
-};
-
-export const OverlayVariant: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    variant: 'overlay',
-    children: <ScrollableContent />,
-  },
-};
-
-export const GlassVariant: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    variant: 'glass',
-    children: <ScrollableContent />,
-  },
-  decorators: [
-    (Story) => (
-      <Box
-        sx={{
-          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-          p: 4,
-          borderRadius: 2,
-        }}
-      >
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export const WithScrollToTop: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    scrollToTopButton: true,
-    scrollToTopThreshold: 50,
-    children: <ScrollableContent lines={100} />,
-  },
-};
-
-export const CustomColors: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    scrollbarColor: '#ff6b6b',
-    scrollbarTrackColor: '#ffe0e0',
-    children: <ScrollableContent />,
-  },
-};
-
-export const WithPadding: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    contentPadding: 3,
-    children: <ScrollableContent />,
-  },
-};
-
-export const MaxHeightExample: Story = {
-  args: {
-    width: 400,
-    maxHeight: 300,
-    children: <ScrollableContent lines={5} />,
-  },
-};
-
-export const DisabledState: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    disabled: true,
-    children: <ScrollableContent />,
-  },
-};
-
-export const LoadingState: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    loading: true,
-    children: <ScrollableContent />,
-  },
-};
-
-export const EmptyState: Story = {
-  args: {
-    width: 400,
-    height: 300,
-    emptyContent: (
-      <Box sx={{ textAlign: 'center' }}>
-        <Typography variant="h6" color="text.secondary">
-          No content available
-        </Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
-          There is no data to display
-        </Typography>
-      </Box>
-    ),
-  },
-};
-
-export const WithListContent: Story = {
-  args: {
-    width: 400,
-    height: 400,
-    scrollToTopButton: true,
-    children: <ListContent />,
-  },
-};
-
-export const ResponsiveWidth: Story = {
-  args: {
-    width: '100%',
-    maxWidth: 600,
-    height: 300,
-    children: <ScrollableContent />,
-  },
-};
-
-export const NestedScrollAreas: Story = {
-  args: {
-    width: 600,
-    height: 400,
-    children: (
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h6" gutterBottom>
-          Parent Scroll Area
-        </Typography>
-        <Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
-          <Paper sx={{ flex: 1 }}>
-            <ScrollArea height={200} variant="overlay">
-              <Box sx={{ p: 2 }}>
-                <Typography variant="subtitle1" gutterBottom>
-                  Nested Area 1
-                </Typography>
-                <ScrollableContent lines={20} />
-              </Box>
-            </ScrollArea>
-          </Paper>
-          <Paper sx={{ flex: 1 }}>
-            <ScrollArea height={200} variant="overlay">
-              <Box sx={{ p: 2 }}>
-                <Typography variant="subtitle1" gutterBottom>
-                  Nested Area 2
-                </Typography>
-                <ScrollableContent lines={20} />
-              </Box>
-            </ScrollArea>
-          </Paper>
-        </Box>
-        <Box sx={{ mt: 2 }}>
-          <ScrollableContent lines={10} />
-        </Box>
-      </Box>
-    ),
-  },
-};
-
-export const WithChips: Story = {
-  args: {
-    width: 400,
-    height: 100,
-    orientation: 'horizontal',
-    scrollbarSize: 'thin',
-    children: (
-      <Box sx={{ display: 'flex', gap: 1, p: 2, width: 'max-content' }}>
-        {Array.from({ length: 30 }, (_, i) => (
-          <Chip key={i} label={`Tag ${i + 1}`} color="primary" variant="outlined" />
-        ))}
-      </Box>
-    ),
-  },
-};
-
-// Required story exports for validation
-export const AllVariants: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Typography variant="h6">All ScrollArea Variants</Typography>
-      
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Box>
-          <Typography variant="caption" color="text.secondary">Default</Typography>
-          <ScrollArea width={300} height={200} variant="default">
-            <ScrollableContent lines={20} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">Overlay</Typography>
-          <ScrollArea width={300} height={200} variant="overlay">
-            <ScrollableContent lines={20} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">Glass</Typography>
-          <Box sx={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', p: 2, borderRadius: 1 }}>
-            <ScrollArea width={300} height={200} variant="glass">
-              <ScrollableContent lines={20} />
-            </ScrollArea>
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  ),
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Typography variant="h6">All ScrollArea Sizes</Typography>
-      
-      <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
-        <Box>
-          <Typography variant="caption" color="text.secondary">Small (200x150)</Typography>
-          <ScrollArea width={200} height={150}>
-            <ScrollableContent lines={15} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">Medium (400x300)</Typography>
-          <ScrollArea width={400} height={300}>
-            <ScrollableContent lines={25} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">Large (600x400)</Typography>
-          <ScrollArea width={600} height={400}>
-            <ScrollableContent lines={35} />
-          </ScrollArea>
-        </Box>
-      </Box>
-    </Box>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Typography variant="h6">All ScrollArea States</Typography>
-      
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Box>
-          <Typography variant="caption" color="text.secondary">Normal</Typography>
-          <ScrollArea width={300} height={200}>
-            <ScrollableContent lines={20} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">Disabled</Typography>
-          <ScrollArea width={300} height={200} disabled>
-            <ScrollableContent lines={20} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">Loading</Typography>
-          <ScrollArea width={300} height={200} loading>
-            <ScrollableContent lines={20} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">Empty</Typography>
-          <ScrollArea 
-            width={300} 
-            height={200}
-            emptyContent={
-              <Box sx={{ textAlign: 'center', p: 3 }}>
-                <Typography color="text.secondary">No content</Typography>
-              </Box>
-            }
-          />
-        </Box>
-      </Box>
-    </Box>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-      <Typography variant="h6">Interactive ScrollArea States</Typography>
-      
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Box>
-          <Typography variant="caption" color="text.secondary">Hover (Auto-hide scrollbar)</Typography>
-          <ScrollArea width={300} height={200} autoHide>
-            <ScrollableContent lines={20} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">Active (Scrolling)</Typography>
-          <ScrollArea width={300} height={200} smoothScroll>
-            <ScrollableContent lines={20} />
-          </ScrollArea>
-        </Box>
-        
-        <Box>
-          <Typography variant="caption" color="text.secondary">With Scroll-to-Top</Typography>
-          <ScrollArea width={300} height={200} scrollToTopButton scrollToTopThreshold={50}>
-            <ScrollableContent lines={30} />
-          </ScrollArea>
-        </Box>
-      </Box>
-    </Box>
-  ),
-};
-
-export const Responsive: Story = {
-  parameters: {
-    viewport: { defaultViewport: 'responsive' },
-  },
-  render: () => (
-    <Box sx={{ width: '100%', p: 2 }}>
-      <Typography variant="h6" gutterBottom>Responsive ScrollArea</Typography>
-
-      <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 2 }}>
-        <Box sx={{ flex: 1 }}>
-          <Typography variant="caption" color="text.secondary">100% width, max 500px</Typography>
-          <ScrollArea width="100%" maxWidth={500} height={300}>
-            <ScrollableContent lines={25} />
-          </ScrollArea>
-        </Box>
-
-        <Box sx={{ flex: 1 }}>
-          <Typography variant="caption" color="text.secondary">Responsive height</Typography>
-          <ScrollArea
-            width="100%"
-            height={{ xs: 200, sm: 300, md: 400 }}
-            sx={{ bgcolor: 'background.paper' }}
-          >
-            <ScrollableContent lines={30} />
-          </ScrollArea>
-        </Box>
-      </Box>
-    </Box>
-  ),
-};
-
-// Virtualized grid component that uses ScrollArea
-interface VirtualizedGridInScrollAreaProps {
-  totalItems: number;
-  squareSize: number;
-  gap: number;
-  columnCount: number;
-  visibleRows: number;
-}
-
-const VirtualizedGridInScrollArea: React.FC<VirtualizedGridInScrollAreaProps> = ({
-  totalItems,
-  squareSize,
-  gap,
-  columnCount,
-  visibleRows,
-}) => {
-  const [scrollTop, setScrollTop] = useState(0);
-
-  const rowHeight = squareSize + gap;
-  const totalRows = Math.ceil(totalItems / columnCount);
-  const totalHeight = totalRows * squareSize + Math.max(0, totalRows - 1) * gap;
-  const visibleHeight = visibleRows * squareSize + Math.max(0, visibleRows - 1) * gap;
-  const containerWidth = columnCount * squareSize + (columnCount - 1) * gap;
-
-  // Calculate visible rows with buffer
-  const bufferRows = 2;
-  const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - bufferRows);
-  const endRow = Math.min(totalRows, Math.ceil((scrollTop + visibleHeight) / rowHeight) + bufferRows);
-
-  const visibleSquares = useMemo(() => {
-    const squares = [];
-    for (let row = startRow; row < endRow; row++) {
-      for (let col = 0; col < columnCount; col++) {
-        const index = row * columnCount + col;
-        if (index >= totalItems) break;
-        squares.push({ index, row, col, number: index + 1 });
-      }
-    }
-    return squares;
-  }, [startRow, endRow, columnCount, totalItems]);
-
-  const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
-    setScrollTop(event.currentTarget.scrollTop);
-  }, []);
-
-  return (
-    <ScrollArea
-      width={containerWidth + 20}
-      height={visibleHeight}
-      autoHide
-      autoHideDelay={800}
-      onScroll={handleScroll}
-    >
-      <Box sx={{ position: 'relative', width: containerWidth, height: totalHeight }}>
-        {visibleSquares.map(({ index, row, col, number }) => (
-          <Box
-            key={index}
-            sx={{
-              position: 'absolute',
-              top: row * rowHeight,
-              left: col * (squareSize + gap),
-              width: squareSize,
-              height: squareSize,
-              bgcolor: 'primary.main',
-              color: 'primary.contrastText',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: '12px',
-              fontWeight: 'bold',
-              borderRadius: 1,
-              boxShadow: 1,
-            }}
-          >
-            {number}
-          </Box>
-        ))}
-      </Box>
-    </ScrollArea>
-  );
-};
-
-export const NumberedSquaresGrid: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'A virtualized grid of 100,000 numbered squares (50x50px each with 5px gap) ' +
-          'inside ScrollArea. Demonstrates autoHide scrollbar with large datasets.',
-      },
-    },
-  },
-  render: () => {
-    const GAP = 5;
-    const SQUARE_SIZE = 50;
-    const TOTAL_SQUARES = 100000;
-    const COLUMN_COUNT = 9;
-    const VISIBLE_ROWS = 3;
-
-    return (
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h6" gutterBottom>
-          Numbered Squares Grid (100,000 items)
-        </Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          50x50px squares with 5px gap. Scroll to see the autoHide scrollbar in action.
-        </Typography>
-        <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, p: 1 }}>
-          <VirtualizedGridInScrollArea
-            totalItems={TOTAL_SQUARES}
-            squareSize={SQUARE_SIZE}
-            gap={GAP}
-            columnCount={COLUMN_COUNT}
-            visibleRows={VISIBLE_ROWS}
-          />
-        </Box>
-        <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
-          Total items: {TOTAL_SQUARES.toLocaleString()} | Columns: {COLUMN_COUNT} | Gap: {GAP}px
-        </Typography>
-      </Box>
-    );
-  },
-};
-