@12-apps/ui 1.5.0 → 1.5.2

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

@@ -1,694 +0,0 @@
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import Help from '@mui/icons-material/Help';
-import Info from '@mui/icons-material/Info';
-import Security from '@mui/icons-material/Security';
-import Settings from '@mui/icons-material/Settings';
-import { Box, Button, Stack,Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-
-import { Accordion, AccordionActions,AccordionDetails, AccordionSummary } from './Accordion';
-
-const meta: Meta<typeof Accordion> = {
-  title: 'Layout/Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs', 'component:Accordion'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['default', 'glass', 'bordered', 'separated'],
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-    defaultExpanded: {
-      control: { type: 'boolean' },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    variant: 'default',
-    disabled: false,
-    defaultExpanded: false,
-  },
-  render: (args) => (
-    <Accordion {...args}>
-      <AccordionSummary expandIcon={<ExpandMore />}>
-        <Typography variant="h6">Basic Accordion</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Typography>
-          This is the content of the accordion. It can contain any React elements, including text,
-          forms, images, or other components.
-        </Typography>
-      </AccordionDetails>
-    </Accordion>
-  ),
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Default Variant
-        </Typography>
-        <Accordion variant="default">
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography>Default Accordion</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography>
-              The default variant follows Material-UI&apos;s standard accordion styling.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Glass Variant
-        </Typography>
-        <Accordion variant="glass">
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography>Glass Accordion</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography>
-              The glass variant features a frosted glass effect with backdrop blur and transparency.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Bordered Variant
-        </Typography>
-        <Accordion variant="bordered">
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography>Bordered Accordion</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography>The bordered variant has clean borders and rounded corners.</Typography>
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Separated Variant
-        </Typography>
-        <Accordion variant="separated">
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography>Separated Accordion</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography>
-              The separated variant has elevated shadows and spacing between items.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const MultipleAccordions: Story = {
-  render: () => (
-    <Stack spacing={1}>
-      <Accordion variant="bordered">
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Settings sx={{ mr: 2 }} />
-          <Typography>General Settings</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography gutterBottom>
-            Configure general application settings including language, timezone, and theme
-            preferences.
-          </Typography>
-        </AccordionDetails>
-        <AccordionActions>
-          <Button size="small">Reset</Button>
-          <Button size="small" variant="contained">
-            Save
-          </Button>
-        </AccordionActions>
-      </Accordion>
-
-      <Accordion variant="bordered">
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Security sx={{ mr: 2 }} />
-          <Typography>Security Settings</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography gutterBottom>
-            Manage your security preferences including two-factor authentication, password
-            requirements, and login alerts.
-          </Typography>
-        </AccordionDetails>
-        <AccordionActions>
-          <Button size="small" color="error">
-            Disable
-          </Button>
-          <Button size="small" variant="contained">
-            Update
-          </Button>
-        </AccordionActions>
-      </Accordion>
-
-      <Accordion variant="bordered">
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Info sx={{ mr: 2 }} />
-          <Typography>Notification Settings</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography gutterBottom>
-            Control how and when you receive notifications from the application.
-          </Typography>
-        </AccordionDetails>
-        <AccordionActions>
-          <Button size="small">Test</Button>
-          <Button size="small" variant="contained">
-            Apply
-          </Button>
-        </AccordionActions>
-      </Accordion>
-    </Stack>
-  ),
-};
-
-const ControlledAccordionComponent = () => {
-  const [expanded, setExpanded] = useState<string | false>(false);
-
-  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-    setExpanded(isExpanded ? panel : false);
-  };
-
-  return (
-    <Stack spacing={1}>
-      <Accordion
-        variant="separated"
-        expanded={expanded === 'panel1'}
-        onChange={handleChange('panel1')}
-      >
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Controlled Panel 1</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>
-            This accordion is controlled - only one panel can be open at a time.
-          </Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion
-        variant="separated"
-        expanded={expanded === 'panel2'}
-        onChange={handleChange('panel2')}
-      >
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Controlled Panel 2</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>Opening this panel will close the other one automatically.</Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion
-        variant="separated"
-        expanded={expanded === 'panel3'}
-        onChange={handleChange('panel3')}
-      >
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Controlled Panel 3</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>
-            This demonstrates controlled accordion behavior with state management.
-          </Typography>
-        </AccordionDetails>
-      </Accordion>
-    </Stack>
-  );
-};
-
-export const ControlledAccordion: Story = {
-  render: () => <ControlledAccordionComponent />,
-};
-
-export const ComplexContent: Story = {
-  render: () => (
-    <Accordion variant="glass" defaultExpanded>
-      <AccordionSummary expandIcon={<ExpandMore />}>
-        <Typography variant="h6">Project Dashboard</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Stack spacing={2}>
-          <Box display="grid" gridTemplateColumns="1fr 1fr" gap={2}>
-            <Box>
-              <Typography variant="subtitle2" gutterBottom>
-                Progress
-              </Typography>
-              <Box
-                sx={{
-                  height: 8,
-                  backgroundColor: 'grey.200',
-                  borderRadius: 1,
-                  position: 'relative',
-                }}
-              >
-                <Box
-                  sx={{
-                    width: '75%',
-                    height: '100%',
-                    backgroundColor: 'primary.main',
-                    borderRadius: 1,
-                  }}
-                />
-              </Box>
-              <Typography variant="body2" color="text.secondary" mt={1}>
-                75% Complete
-              </Typography>
-            </Box>
-            <Box>
-              <Typography variant="subtitle2" gutterBottom>
-                Team Members
-              </Typography>
-              <Stack direction="row" spacing={1}>
-                {['A', 'B', 'C', 'D'].map((letter) => (
-                  <Box
-                    key={letter}
-                    sx={{
-                      width: 32,
-                      height: 32,
-                      borderRadius: '50%',
-                      backgroundColor: 'primary.main',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      color: 'white',
-                      fontSize: '0.875rem',
-                    }}
-                  >
-                    {letter}
-                  </Box>
-                ))}
-              </Stack>
-            </Box>
-          </Box>
-          <Typography variant="body2" color="text.secondary">
-            This accordion contains complex content including progress indicators, team member
-            avatars, and structured layouts.
-          </Typography>
-        </Stack>
-      </AccordionDetails>
-      <AccordionActions>
-        <Button startIcon={<Help />} size="small">
-          Help
-        </Button>
-        <Button variant="contained" size="small">
-          View Details
-        </Button>
-      </AccordionActions>
-    </Accordion>
-  ),
-};
-
-export const DisabledAccordion: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Accordion disabled>
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Disabled Accordion</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>
-            This content cannot be accessed because the accordion is disabled.
-          </Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion variant="glass">
-        <AccordionSummary expandIcon={<ExpandMore />} disabled>
-          <Typography>Disabled Summary Only</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>
-            Only the summary is disabled, but if opened programmatically, the content would be
-            accessible.
-          </Typography>
-        </AccordionDetails>
-      </Accordion>
-    </Stack>
-  ),
-};
-
-export const HoverState: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Typography variant="body2" color="text.secondary">
-        Hover over the accordions to see the hover effects for each variant
-      </Typography>
-      <Accordion variant="default">
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Default Hover Effect</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>Standard Material-UI hover state</Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion variant="glass">
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Glass Hover Effect</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>Enhanced glass effect with elevation on hover</Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion variant="bordered">
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Bordered Hover Effect</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>Border color and shadow transition on hover</Typography>
-        </AccordionDetails>
-      </Accordion>
-    </Stack>
-  ),
-};
-
-export const EmptyState: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Accordion variant="bordered">
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Empty Content Accordion</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          {/* Intentionally empty to test empty state handling */}
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion variant="glass">
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Minimal Content</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Box
-            sx={{ minHeight: 50, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-          >
-            <Typography variant="caption" color="text.secondary">
-              No data available
-            </Typography>
-          </Box>
-        </AccordionDetails>
-      </Accordion>
-    </Stack>
-  ),
-};
-
-export const LoadingState: Story = {
-  render: () => {
-    const LoadingComponent = () => {
-      const [loading, setLoading] = useState(true);
-
-      return (
-        <Stack spacing={2}>
-          <Button onClick={() => setLoading(!loading)} variant="outlined" size="small">
-            Toggle Loading State
-          </Button>
-
-          <Accordion variant="separated" defaultExpanded>
-            <AccordionSummary expandIcon={<ExpandMore />}>
-              <Typography>Dynamic Content Accordion</Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              {loading ? (
-                <Box sx={{ p: 3, textAlign: 'center' }}>
-                  <Typography variant="body2" color="text.secondary">
-                    Loading content...
-                  </Typography>
-                </Box>
-              ) : (
-                <Typography>Content has been loaded successfully!</Typography>
-              )}
-            </AccordionDetails>
-          </Accordion>
-        </Stack>
-      );
-    };
-
-    return <LoadingComponent />;
-  },
-};
-
-// Required story exports for validation
-export const AllSizes: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Small Size
-        </Typography>
-        <Accordion sx={{ '& .MuiAccordionSummary-root': { minHeight: 40 } }}>
-          <AccordionSummary expandIcon={<ExpandMore sx={{ fontSize: '1rem' }} />}>
-            <Typography variant="body2">Small Accordion</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography variant="body2">Compact content for small size accordion.</Typography>
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Medium Size (Default)
-        </Typography>
-        <Accordion>
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography>Medium Accordion</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography>Standard content for medium size accordion.</Typography>
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Large Size
-        </Typography>
-        <Accordion sx={{ '& .MuiAccordionSummary-root': { minHeight: 64 } }}>
-          <AccordionSummary expandIcon={<ExpandMore sx={{ fontSize: '1.5rem' }} />}>
-            <Typography variant="h6">Large Accordion</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography variant="body1">
-              Extended content area for large size accordion with more space.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Default State</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>Normal accordion in default state.</Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion defaultExpanded>
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Expanded State</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>This accordion is expanded by default.</Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion disabled>
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Disabled State</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>This accordion is disabled.</Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion sx={{ '&:hover': { backgroundColor: 'action.hover' } }}>
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Hover State (hover to see)</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>Hover over the summary to see the hover effect.</Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion sx={{ '&:focus-within': { outline: '2px solid', outlineColor: 'primary.main' } }}>
-        <AccordionSummary expandIcon={<ExpandMore />}>
-          <Typography>Focus State (tab to focus)</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Typography>Tab navigation will show focus outline.</Typography>
-        </AccordionDetails>
-      </Accordion>
-    </Stack>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => {
-    const InteractiveComponent = () => {
-      const [expanded, setExpanded] = useState<string | false>('panel1');
-      const [clickCount, setClickCount] = useState(0);
-
-      const handleChange =
-        (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-          setExpanded(isExpanded ? panel : false);
-          setClickCount(clickCount + 1);
-        };
-
-      return (
-        <Stack spacing={2}>
-          <Typography variant="body2" color="text.secondary">
-            Click count: {clickCount} | Currently expanded: {expanded || 'none'}
-          </Typography>
-
-          <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
-            <AccordionSummary expandIcon={<ExpandMore />}>
-              <Typography>Interactive Panel 1</Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Typography>Click to toggle expansion state.</Typography>
-            </AccordionDetails>
-          </Accordion>
-
-          <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
-            <AccordionSummary expandIcon={<ExpandMore />}>
-              <Typography>Interactive Panel 2</Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Typography>Only one panel can be expanded at a time.</Typography>
-            </AccordionDetails>
-          </Accordion>
-
-          <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
-            <AccordionSummary expandIcon={<ExpandMore />}>
-              <Typography>Interactive Panel 3</Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Typography>State is tracked and displayed above.</Typography>
-            </AccordionDetails>
-          </Accordion>
-        </Stack>
-      );
-    };
-
-    return <InteractiveComponent />;
-  },
-};
-
-export const Responsive: Story = {
-  render: () => (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-        Responsive Accordion (resize window to test)
-      </Typography>
-      <Stack spacing={2}>
-        <Accordion
-          sx={{
-            width: '100%',
-            maxWidth: { xs: '100%', sm: 600, md: 800 },
-            mx: 'auto',
-          }}
-        >
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography sx={{ fontSize: { xs: '0.875rem', sm: '1rem', md: '1.125rem' } }}>
-              Responsive Typography
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem', md: '1rem' } }}>
-              This accordion adapts to different screen sizes. On mobile it uses smaller text, on
-              tablet medium text, and on desktop larger text.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-
-        <Accordion
-          sx={{
-            display: { xs: 'block', md: 'flex' },
-            flexDirection: { md: 'column' },
-          }}
-        >
-          <AccordionSummary
-            expandIcon={<ExpandMore />}
-            sx={{
-              flexDirection: { xs: 'row', md: 'row-reverse' },
-              '& .MuiAccordionSummary-expandIconWrapper': {
-                transform: { xs: 'none', md: 'rotate(90deg)' },
-              },
-            }}
-          >
-            <Typography>Layout Changes</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Box
-              sx={{
-                display: 'grid',
-                gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: 'repeat(3, 1fr)' },
-                gap: 2,
-              }}
-            >
-              <Box sx={{ p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
-                <Typography variant="caption">Item 1</Typography>
-              </Box>
-              <Box sx={{ p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
-                <Typography variant="caption">Item 2</Typography>
-              </Box>
-              <Box sx={{ p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
-                <Typography variant="caption">Item 3</Typography>
-              </Box>
-            </Box>
-          </AccordionDetails>
-        </Accordion>
-
-        <Accordion
-          variant="glass"
-          sx={{
-            backdropFilter: { xs: 'blur(8px)', md: 'blur(12px)' },
-            backgroundColor: { xs: 'rgba(255,255,255,0.7)', md: 'rgba(255,255,255,0.9)' },
-          }}
-        >
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography>Responsive Styling</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography>
-              Glass effect intensity changes based on screen size for optimal performance.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-      </Stack>
-    </Box>
-  ),
-};