@12-apps/ui 1.0.0

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

@@ -0,0 +1,689 @@
+import {
+  Box,
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Stack,
+  Typography,
+} from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Skeleton } from './Skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Layout/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Beautiful loading placeholder component with glassmorphism effects and customizable animations. Supports multiple variants, intensities, and advanced visual effects.',
+      },
+    },
+  },
+  tags: ['autodocs', 'component:Skeleton'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['text', 'circular', 'rectangular', 'wave'],
+      description: 'The shape of the skeleton',
+    },
+    animation: {
+      control: { type: 'select' },
+      options: ['pulse', 'wave', false],
+      description: 'The animation type',
+    },
+    intensity: {
+      control: { type: 'select' },
+      options: ['low', 'medium', 'high'],
+      description: 'Animation intensity level',
+    },
+    width: {
+      control: { type: 'text' },
+      description: 'Width of the skeleton (number, string, or percentage)',
+    },
+    height: {
+      control: { type: 'number' },
+      description: 'Height of the skeleton in pixels',
+    },
+    count: {
+      control: { type: 'number' },
+      description: 'Number of skeleton elements to render',
+    },
+    spacing: {
+      control: { type: 'number' },
+      description: 'Spacing between multiple skeletons',
+    },
+    glassmorphism: {
+      control: { type: 'boolean' },
+      description: 'Enable glassmorphism visual effects',
+    },
+    shimmer: {
+      control: { type: 'boolean' },
+      description: 'Enable shimmer animation overlay',
+    },
+    borderRadius: {
+      control: { type: 'number' },
+      description: 'Custom border radius in pixels',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'text',
+    animation: 'pulse',
+    width: '100%',
+    count: 1,
+    intensity: 'medium',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic text skeleton with default pulse animation.',
+      },
+    },
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <Stack spacing={4}>
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Text Skeleton
+        </Typography>
+        <Skeleton variant="text" />
+        <Skeleton variant="text" width="60%" />
+        <Skeleton variant="text" width="40%" />
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Circular Skeleton
+        </Typography>
+        <Stack direction="row" spacing={2}>
+          <Skeleton variant="circular" width={40} height={40} />
+          <Skeleton variant="circular" width={60} height={60} />
+          <Skeleton variant="circular" width={80} height={80} />
+        </Stack>
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Rectangular Skeleton
+        </Typography>
+        <Stack spacing={2}>
+          <Skeleton variant="rectangular" height={60} />
+          <Skeleton variant="rectangular" width="75%" height={40} />
+          <Skeleton variant="rectangular" width="50%" height={80} />
+        </Stack>
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Wave Animation
+        </Typography>
+        <Skeleton variant="wave" height={60} />
+        <Skeleton variant="wave" width="80%" height={40} />
+      </Box>
+    </Stack>
+  ),
+};
+
+export const AnimationTypes: Story = {
+  render: () => (
+    <Grid container spacing={3}>
+      <Grid item xs={4}>
+        <Typography variant="h6" gutterBottom>
+          Pulse Animation
+        </Typography>
+        <Skeleton animation="pulse" height={60} />
+        <Skeleton animation="pulse" width="80%" />
+        <Skeleton animation="pulse" width="60%" />
+      </Grid>
+
+      <Grid item xs={4}>
+        <Typography variant="h6" gutterBottom>
+          Wave Animation
+        </Typography>
+        <Skeleton animation="wave" height={60} />
+        <Skeleton animation="wave" width="80%" />
+        <Skeleton animation="wave" width="60%" />
+      </Grid>
+
+      <Grid item xs={4}>
+        <Typography variant="h6" gutterBottom>
+          No Animation
+        </Typography>
+        <Skeleton animation={false} height={60} />
+        <Skeleton animation={false} width="80%" />
+        <Skeleton animation={false} width="60%" />
+      </Grid>
+    </Grid>
+  ),
+};
+
+export const MultipleSkeleton: Story = {
+  render: () => (
+    <Stack spacing={4}>
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Multiple Text Lines
+        </Typography>
+        <Skeleton variant="text" count={5} />
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Multiple Rectangles
+        </Typography>
+        <Skeleton variant="rectangular" height={40} count={3} spacing={2} />
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Custom Spacing
+        </Typography>
+        <Skeleton variant="text" count={4} spacing={3} />
+      </Box>
+    </Stack>
+  ),
+};
+
+export const ProfileCardSkeleton: Story = {
+  render: () => (
+    <Card sx={{ maxWidth: 400 }}>
+      <CardHeader
+        avatar={<Skeleton variant="circular" width={40} height={40} />}
+        title={<Skeleton variant="text" width="60%" />}
+        subheader={<Skeleton variant="text" width="40%" />}
+      />
+      <CardContent>
+        <Skeleton variant="rectangular" height={200} sx={{ mb: 2 }} />
+        <Skeleton variant="text" />
+        <Skeleton variant="text" width="80%" />
+        <Skeleton variant="text" width="60%" />
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const ListSkeleton: Story = {
+  render: () => (
+    <List sx={{ width: '100%', maxWidth: 360 }}>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <ListItem key={index}>
+          <ListItemAvatar>
+            <Skeleton variant="circular" width={40} height={40} />
+          </ListItemAvatar>
+          <ListItemText
+            primary={<Skeleton variant="text" width="70%" />}
+            secondary={<Skeleton variant="text" width="40%" />}
+          />
+        </ListItem>
+      ))}
+    </List>
+  ),
+};
+
+export const DashboardSkeleton: Story = {
+  render: () => (
+    <Box sx={{ width: '100%' }}>
+      {/* Header */}
+      <Box sx={{ mb: 4 }}>
+        <Skeleton variant="text" width="30%" height={40} />
+        <Skeleton variant="text" width="60%" />
+      </Box>
+
+      {/* Stats Cards */}
+      <Grid container spacing={3} sx={{ mb: 4 }}>
+        {Array.from({ length: 4 }).map((_, index) => (
+          <Grid item xs={12} sm={6} md={3} key={index}>
+            <Card>
+              <CardContent>
+                <Stack spacing={2}>
+                  <Skeleton variant="text" width="60%" />
+                  <Skeleton variant="text" width="40%" height={32} />
+                  <Skeleton variant="rectangular" height={20} />
+                </Stack>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+
+      {/* Charts */}
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={8}>
+          <Card>
+            <CardHeader
+              title={<Skeleton variant="text" width="40%" />}
+              action={<Skeleton variant="circular" width={32} height={32} />}
+            />
+            <CardContent>
+              <Skeleton variant="rectangular" height={300} />
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <Card>
+            <CardHeader title={<Skeleton variant="text" width="60%" />} />
+            <CardContent>
+              <Stack spacing={2}>
+                {Array.from({ length: 6 }).map((_, index) => (
+                  <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                    <Skeleton variant="circular" width={24} height={24} />
+                    <Box sx={{ flex: 1 }}>
+                      <Skeleton variant="text" width="80%" />
+                      <Skeleton variant="text" width="40%" />
+                    </Box>
+                  </Box>
+                ))}
+              </Stack>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
+    </Box>
+  ),
+};
+
+export const TableSkeleton: Story = {
+  render: () => (
+    <Box>
+      {/* Table Header */}
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr 1fr 1fr',
+          gap: 2,
+          p: 2,
+          borderBottom: 1,
+          borderColor: 'divider',
+        }}
+      >
+        <Skeleton variant="text" width="80%" />
+        <Skeleton variant="text" width="60%" />
+        <Skeleton variant="text" width="70%" />
+        <Skeleton variant="text" width="50%" />
+      </Box>
+
+      {/* Table Rows */}
+      {Array.from({ length: 8 }).map((_, index) => (
+        <Box
+          key={index}
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr 1fr 1fr',
+            gap: 2,
+            p: 2,
+            borderBottom: 1,
+            borderColor: 'divider',
+          }}
+        >
+          <Skeleton variant="text" />
+          <Skeleton variant="text" width="70%" />
+          <Skeleton variant="rectangular" width={80} height={20} />
+          <Skeleton variant="circular" width={24} height={24} />
+        </Box>
+      ))}
+    </Box>
+  ),
+};
+
+export const IntensityLevels: Story = {
+  render: () => (
+    <Stack spacing={4}>
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Low Intensity
+        </Typography>
+        <Skeleton variant="rectangular" height={60} intensity="low" />
+        <Skeleton variant="text" intensity="low" />
+        <Skeleton variant="text" width="80%" intensity="low" />
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Medium Intensity (Default)
+        </Typography>
+        <Skeleton variant="rectangular" height={60} intensity="medium" />
+        <Skeleton variant="text" intensity="medium" />
+        <Skeleton variant="text" width="80%" intensity="medium" />
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          High Intensity
+        </Typography>
+        <Skeleton variant="rectangular" height={60} intensity="high" />
+        <Skeleton variant="text" intensity="high" />
+        <Skeleton variant="text" width="80%" intensity="high" />
+      </Box>
+    </Stack>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Different intensity levels control the opacity and prominence of skeleton elements.',
+      },
+    },
+  },
+};
+
+export const GlassmorphismEffect: Story = {
+  render: () => (
+    <Box
+      sx={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        p: 4,
+        borderRadius: 2,
+        minHeight: 300,
+      }}
+    >
+      <Typography variant="h6" gutterBottom sx={{ color: 'white', mb: 3 }}>
+        Glassmorphism Skeleton Effects
+      </Typography>
+
+      <Stack spacing={3}>
+        <Box>
+          <Typography variant="subtitle1" sx={{ color: 'white', mb: 1 }}>
+            Regular Skeleton
+          </Typography>
+          <Skeleton variant="rectangular" height={60} />
+        </Box>
+
+        <Box>
+          <Typography variant="subtitle1" sx={{ color: 'white', mb: 1 }}>
+            Glassmorphism Skeleton
+          </Typography>
+          <Skeleton variant="rectangular" height={60} glassmorphism />
+        </Box>
+
+        <Box>
+          <Typography variant="subtitle1" sx={{ color: 'white', mb: 1 }}>
+            Glassmorphism with Custom Radius
+          </Typography>
+          <Skeleton variant="rectangular" height={60} glassmorphism borderRadius={20} />
+        </Box>
+
+        <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+          <Skeleton variant="circular" width={50} height={50} glassmorphism />
+          <Box sx={{ flex: 1 }}>
+            <Skeleton variant="text" glassmorphism />
+            <Skeleton variant="text" width="80%" glassmorphism />
+          </Box>
+        </Box>
+      </Stack>
+    </Box>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Glassmorphism effect adds beautiful glass-like transparency with blur effects, perfect for modern UI designs.',
+      },
+    },
+  },
+};
+
+export const ShimmerAnimation: Story = {
+  render: () => (
+    <Stack spacing={4}>
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Standard Animation
+        </Typography>
+        <Skeleton variant="rectangular" height={80} borderRadius={8} />
+        <Skeleton variant="text" />
+        <Skeleton variant="text" width="60%" />
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Shimmer Animation
+        </Typography>
+        <Skeleton variant="rectangular" height={80} shimmer borderRadius={8} />
+        <Skeleton variant="text" shimmer />
+        <Skeleton variant="text" width="60%" shimmer />
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Glassmorphism + Shimmer
+        </Typography>
+        <Box
+          sx={{
+            background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+            p: 3,
+            borderRadius: 2,
+          }}
+        >
+          <Skeleton variant="rectangular" height={80} glassmorphism shimmer borderRadius={12} />
+          <Box sx={{ mt: 2 }}>
+            <Skeleton variant="text" glassmorphism shimmer />
+            <Skeleton variant="text" width="70%" glassmorphism shimmer />
+          </Box>
+        </Box>
+      </Box>
+    </Stack>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shimmer animation adds a moving highlight effect that creates a premium loading experience.',
+      },
+    },
+  },
+};
+
+export const AdvancedProfileCard: Story = {
+  render: () => (
+    <Grid container spacing={3}>
+      <Grid item xs={12} md={6}>
+        <Card>
+          <CardHeader title="Regular Skeleton" sx={{ pb: 1 }} />
+          <CardContent>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+              <Skeleton variant="circular" width={60} height={60} sx={{ mr: 2 }} />
+              <Box sx={{ flex: 1 }}>
+                <Skeleton variant="text" width="70%" />
+                <Skeleton variant="text" width="50%" />
+              </Box>
+            </Box>
+            <Skeleton variant="rectangular" height={150} sx={{ mb: 2 }} />
+            <Skeleton variant="text" count={3} />
+          </CardContent>
+        </Card>
+      </Grid>
+
+      <Grid item xs={12} md={6}>
+        <Card>
+          <CardHeader title="Enhanced Skeleton" sx={{ pb: 1 }} />
+          <CardContent>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
+              <Skeleton
+                variant="circular"
+                width={60}
+                height={60}
+                sx={{ mr: 2 }}
+                shimmer
+                intensity="high"
+              />
+              <Box sx={{ flex: 1 }}>
+                <Skeleton variant="text" width="70%" shimmer intensity="high" />
+                <Skeleton variant="text" width="50%" shimmer intensity="medium" />
+              </Box>
+            </Box>
+            <Skeleton
+              variant="rectangular"
+              height={150}
+              sx={{ mb: 2 }}
+              shimmer
+              borderRadius={12}
+              intensity="high"
+            />
+            <Skeleton variant="text" count={3} shimmer />
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Comparison between regular and enhanced skeleton with shimmer effects and custom intensity.',
+      },
+    },
+  },
+};
+
+export const CustomShapes: Story = {
+  render: () => (
+    <Stack spacing={4}>
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Custom Border Radius
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid item xs={6} sm={3}>
+            <Skeleton variant="rectangular" height={80} borderRadius={0} />
+            <Typography variant="caption" display="block" textAlign="center" mt={1}>
+              Square (0px)
+            </Typography>
+          </Grid>
+          <Grid item xs={6} sm={3}>
+            <Skeleton variant="rectangular" height={80} borderRadius={8} />
+            <Typography variant="caption" display="block" textAlign="center" mt={1}>
+              Rounded (8px)
+            </Typography>
+          </Grid>
+          <Grid item xs={6} sm={3}>
+            <Skeleton variant="rectangular" height={80} borderRadius={20} />
+            <Typography variant="caption" display="block" textAlign="center" mt={1}>
+              Very Rounded (20px)
+            </Typography>
+          </Grid>
+          <Grid item xs={6} sm={3}>
+            <Skeleton variant="rectangular" height={80} borderRadius="50%" />
+            <Typography variant="caption" display="block" textAlign="center" mt={1}>
+              Pill Shape (50%)
+            </Typography>
+          </Grid>
+        </Grid>
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Custom Dimensions
+        </Typography>
+        <Stack spacing={2}>
+          <Skeleton variant="rectangular" width="100%" height={20} />
+          <Skeleton variant="rectangular" width="80%" height={30} />
+          <Skeleton variant="rectangular" width="60%" height={40} />
+          <Skeleton variant="rectangular" width="40%" height={50} />
+        </Stack>
+      </Box>
+
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Mixed Circular Sizes
+        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
+          <Skeleton variant="circular" width={24} height={24} />
+          <Skeleton variant="circular" width={32} height={32} />
+          <Skeleton variant="circular" width={40} height={40} />
+          <Skeleton variant="circular" width={56} height={56} />
+          <Skeleton variant="circular" width={80} height={80} />
+          <Skeleton variant="circular" width={120} height={120} />
+        </Box>
+      </Box>
+    </Stack>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Showcase different border radius options and custom dimensions for creating unique skeleton shapes.',
+      },
+    },
+  },
+};
+
+// Required story exports for validation
+export const AllSizes = CustomShapes;
+export const AllStates = IntensityLevels;
+export const InteractiveStates = ShimmerAnimation;
+export const Responsive: Story = {
+  render: () => (
+    <Box>
+      {/* Mobile View */}
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+        <Typography variant="h6" gutterBottom>
+          Mobile Layout
+        </Typography>
+        <Stack spacing={2}>
+          <Skeleton variant="rectangular" height={50} />
+          <Skeleton variant="text" />
+          <Skeleton variant="text" width="80%" />
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            <Skeleton variant="circular" width={32} height={32} />
+            <Skeleton variant="text" sx={{ flex: 1 }} />
+          </Box>
+        </Stack>
+      </Box>
+
+      {/* Desktop View */}
+      <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+        <Typography variant="h6" gutterBottom>
+          Desktop Layout
+        </Typography>
+        <Grid container spacing={3}>
+          <Grid item xs={8}>
+            <Skeleton variant="rectangular" height={200} />
+            <Box sx={{ mt: 2 }}>
+              <Skeleton variant="text" />
+              <Skeleton variant="text" width="90%" />
+              <Skeleton variant="text" width="70%" />
+            </Box>
+          </Grid>
+          <Grid item xs={4}>
+            <Stack spacing={2}>
+              {Array.from({ length: 5 }).map((_, i) => (
+                <Box key={i} sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+                  <Skeleton variant="circular" width={40} height={40} />
+                  <Box sx={{ flex: 1 }}>
+                    <Skeleton variant="text" width="80%" />
+                    <Skeleton variant="text" width="60%" />
+                  </Box>
+                </Box>
+              ))}
+            </Stack>
+          </Grid>
+        </Grid>
+      </Box>
+    </Box>
+  ),
+  parameters: {
+    viewport: {
+      viewports: {
+        mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
+        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
+        desktop: { name: 'Desktop', styles: { width: '1200px', height: '800px' } },
+      },
+    },
+  },
+};