@12-apps/ui 1.4.1 → 1.5.1

package/src/components/layout/CardGrid/__tests__/CardGrid.test.tsx

@@ -1,92 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import { CardGrid } from "../CardGrid";
-
-/** The rendered grid container's inline `grid-auto-columns` track sizing. */
-function trackOf(children: number): string {
-  const { unmount } = render(
-    <CardGrid variant="scroll" cardWidth={165} maxCardWidth={190} gridTestId="rail">
-      {Array.from({ length: children }, (_, i) => (
-        <div key={i}>card {i}</div>
-      ))}
-    </CardGrid>,
-  );
-  const track = screen.getByTestId("rail").style.gridAutoColumns;
-  unmount();
-  return track;
-}
-
-describe("CardGrid scroll variant", () => {
-  it("sizes tracks so two cards plus a peek of the third always fit", () => {
-    // 2 cards + the 2 gaps that follow them + the 28px peek = the container.
-    expect(trackOf(3)).toBe("min(190px, calc((100% - 60px) / 2))");
-  });
-
-  it("keeps the peek at every rail length past the fold", () => {
-    expect(trackOf(7)).toBe(trackOf(3));
-  });
-
-  it("reserves no peek when there is nothing to scroll to", () => {
-    // Two cards: no overflow, so no "there's more" hint to make room for —
-    // they divide the row across the single gap between them.
-    expect(trackOf(2)).toBe("min(190px, calc((100% - 16px) / 2))");
-    expect(trackOf(1)).toBe("min(190px, calc((100% - 0px) / 1))");
-  });
-
-  it("never floors the track at cardWidth — a floor would swallow the peek", () => {
-    // The narrow-phone guarantee only holds if the track can shrink below the
-    // nominal card width; a `min-width` is exactly what broke it before.
-    expect(trackOf(5)).not.toContain("165px");
-  });
-
-  it("defaults maxCardWidth to 1.6 × cardWidth", () => {
-    render(
-      <CardGrid variant="scroll" cardWidth={100} gridTestId="default-max">
-        <div>a</div>
-        <div>b</div>
-        <div>c</div>
-      </CardGrid>,
-    );
-    expect(screen.getByTestId("default-max").style.gridAutoColumns).toContain("160px");
-  });
-
-  it("scrolls horizontally and snaps each card to the rail start", () => {
-    render(
-      <CardGrid variant="scroll" cardWidth={165} gridTestId="snap">
-        <div>a</div>
-        <div>b</div>
-        <div>c</div>
-      </CardGrid>,
-    );
-    const rail = screen.getByTestId("snap");
-    expect(rail.style.overflowX).toBe("auto");
-    expect(rail.style.scrollSnapType).toBe("x mandatory");
-    expect(rail.children).toHaveLength(3);
-    for (const child of rail.children) {
-      expect((child as HTMLElement).style.scrollSnapAlign).toBe("start");
-    }
-  });
-});
-
-describe("CardGrid wrapping variants", () => {
-  it("leaves the fluid and fixed track math untouched", () => {
-    render(
-      <CardGrid variant="fluid" cardWidth={165} gridTestId="fluid">
-        <div>a</div>
-      </CardGrid>,
-    );
-    render(
-      <CardGrid variant="fixed" cardWidth={230} gridTestId="fixed">
-        <div>a</div>
-      </CardGrid>,
-    );
-    expect(screen.getByTestId("fluid").style.gridTemplateColumns).toBe(
-      "repeat(auto-fill, minmax(165px, 1fr))",
-    );
-    expect(screen.getByTestId("fixed").style.gridTemplateColumns).toBe(
-      "repeat(auto-fill, 230px)",
-    );
-    expect(screen.getByTestId("fixed").style.justifyContent).toBe("space-around");
-  });
-});

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

@@ -1,180 +0,0 @@
-import { Box,Card, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { fn } from 'storybook/test';
-
-import { Collapsible, CollapsibleContent,CollapsibleTrigger } from './Collapsible';
-
-const meta: Meta<typeof Collapsible> = {
-  title: 'Layout/Collapsible',
-  component: Collapsible,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs', 'component:Collapsible'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['default', 'smooth', 'spring'],
-    },
-    duration: {
-      control: { type: 'number' },
-      min: 100,
-      max: 1000,
-      step: 50,
-    },
-    keepMounted: {
-      control: { type: 'boolean' },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    open: true,
-    variant: 'default',
-    duration: 300,
-    keepMounted: false,
-    onToggle: fn(),
-  },
-  render: (args) => (
-    <Collapsible {...args}>
-      <CollapsibleContent>
-        <Typography variant="body1">
-          This is the default collapsible content. It uses MUI's built-in Collapse component for
-          smooth animations.
-        </Typography>
-      </CollapsibleContent>
-    </Collapsible>
-  ),
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <Box>
-      <Typography variant="h6" sx={{ mb: 2 }}>
-        Default Variant
-      </Typography>
-      <Collapsible open={true} variant="default" duration={300}>
-        <CollapsibleContent>
-          <Typography variant="body2">Default variant content</Typography>
-        </CollapsibleContent>
-      </Collapsible>
-
-      <Typography variant="h6" sx={{ mt: 3, mb: 2 }}>
-        Smooth Variant
-      </Typography>
-      <Collapsible open={true} variant="smooth" duration={300}>
-        <CollapsibleContent>
-          <Typography variant="body2">Smooth variant content</Typography>
-        </CollapsibleContent>
-      </Collapsible>
-
-      <Typography variant="h6" sx={{ mt: 3, mb: 2 }}>
-        Spring Variant
-      </Typography>
-      <Collapsible open={true} variant="spring" duration={300}>
-        <CollapsibleContent>
-          <Typography variant="body2">Spring variant content</Typography>
-        </CollapsibleContent>
-      </Collapsible>
-    </Box>
-  ),
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <Box>
-      <Typography variant="h6" sx={{ mb: 2 }}>
-        Small Content
-      </Typography>
-      <Collapsible open={true} variant="smooth" duration={250}>
-        <CollapsibleContent>
-          <Typography variant="body2">Short content example.</Typography>
-        </CollapsibleContent>
-      </Collapsible>
-
-      <Typography variant="h6" sx={{ mt: 3, mb: 2 }}>
-        Medium Content
-      </Typography>
-      <Collapsible open={true} variant="smooth" duration={350}>
-        <CollapsibleContent>
-          <Typography variant="body2" sx={{ mb: 2 }}>
-            This is a medium-sized content area with multiple paragraphs.
-          </Typography>
-          <Typography variant="body2">
-            The animation duration can be adjusted based on content size.
-          </Typography>
-        </CollapsibleContent>
-      </Collapsible>
-    </Box>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Box>
-      <Typography variant="h6" sx={{ mb: 2 }}>
-        Open State
-      </Typography>
-      <Collapsible open={true} variant="default">
-        <CollapsibleContent>
-          <Typography variant="body2">This is an open collapsible.</Typography>
-        </CollapsibleContent>
-      </Collapsible>
-
-      <Typography variant="h6" sx={{ mt: 3, mb: 2 }}>
-        Closed State
-      </Typography>
-      <Collapsible open={false} variant="default">
-        <CollapsibleContent>
-          <Typography variant="body2">This content should not be visible.</Typography>
-        </CollapsibleContent>
-      </Collapsible>
-
-      <Typography variant="h6" sx={{ mt: 3, mb: 2 }}>
-        Disabled State
-      </Typography>
-      <Collapsible open={false} variant="default" disabled>
-        <CollapsibleContent>
-          <Typography variant="body2">This content is disabled.</Typography>
-        </CollapsibleContent>
-      </Collapsible>
-    </Box>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => (
-    <Card>
-      <CollapsibleTrigger>
-        <Typography variant="subtitle1">Static Trigger</Typography>
-      </CollapsibleTrigger>
-      <Collapsible open={true} variant="smooth" duration={300}>
-        <CollapsibleContent>
-          <Typography variant="body2">Interactive content (static for story purposes).</Typography>
-        </CollapsibleContent>
-      </Collapsible>
-    </Card>
-  ),
-};
-
-export const Responsive: Story = {
-  render: () => (
-    <Box sx={{ width: '100%', maxWidth: { xs: '100%', sm: '600px', md: '800px' } }}>
-      <Collapsible open={true} variant="smooth" duration={400}>
-        <CollapsibleContent>
-          <Typography variant="body1" gutterBottom>
-            Responsive Content Layout
-          </Typography>
-          <Typography variant="body2">
-            The collapsible component adapts to different screen sizes while maintaining smooth
-            animations.
-          </Typography>
-        </CollapsibleContent>
-      </Collapsible>
-    </Box>
-  ),
-};

package/src/components/layout/Collapsible/Collapsible.test.stories.tsx

@@ -1,308 +0,0 @@
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import { Box,Button, Card, Stack, Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { expect, userEvent, waitFor,within } from 'storybook/test';
-
-import { Collapsible, CollapsibleContent,CollapsibleTrigger } from './Collapsible';
-
-const meta: Meta<typeof Collapsible> = {
-  title: 'Layout/Collapsible/Tests',
-  component: Collapsible,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Collapsible'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Basic Interaction Tests
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  render: () => {
-    const InteractiveExample = () => {
-      const [isOpen, setIsOpen] = useState(false);
-
-      return (
-        <div data-testid="collapsible-container">
-          <Card>
-            <CollapsibleTrigger
-              onClick={() => setIsOpen(!isOpen)}
-              expanded={isOpen}
-              data-testid="collapsible-trigger"
-            >
-              <Typography variant="h6">Toggle Content</Typography>
-              {isOpen ? <ExpandLess /> : <ExpandMore />}
-            </CollapsibleTrigger>
-            <Collapsible open={isOpen} data-testid="collapsible-content">
-              <CollapsibleContent>
-                <Typography variant="body1" data-testid="content-text">
-                  This is the collapsible content that can be toggled.
-                </Typography>
-              </CollapsibleContent>
-            </Collapsible>
-          </Card>
-        </div>
-      );
-    };
-
-    return <InteractiveExample />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial render verification', async () => {
-      const container = canvas.getByTestId('collapsible-container');
-      await expect(container).toBeInTheDocument();
-
-      const trigger = canvas.getByTestId('collapsible-trigger');
-      await expect(trigger).toBeInTheDocument();
-      await expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    await step('Click to expand', async () => {
-      const trigger = canvas.getByTestId('collapsible-trigger');
-      await userEvent.click(trigger);
-
-      await waitFor(() => {
-        expect(trigger).toHaveAttribute('aria-expanded', 'true');
-      });
-    });
-
-    await step('Click to collapse', async () => {
-      const trigger = canvas.getByTestId('collapsible-trigger');
-      await userEvent.click(trigger);
-
-      await waitFor(() => {
-        expect(trigger).toHaveAttribute('aria-expanded', 'false');
-      });
-    });
-  },
-};
-
-// Keyboard Navigation Tests
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  render: () => (
-    <div data-testid="keyboard-container">
-      <Card>
-        <CollapsibleTrigger onClick={() => {}} expanded={false} data-testid="keyboard-trigger">
-          <Typography variant="h6">Keyboard Accessible Trigger</Typography>
-        </CollapsibleTrigger>
-        <Collapsible open={false} data-testid="keyboard-collapsible">
-          <CollapsibleContent>
-            <Typography variant="body1">Content for keyboard navigation</Typography>
-          </CollapsibleContent>
-        </Collapsible>
-      </Card>
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Focus trigger with Tab', async () => {
-      const trigger = canvas.getByTestId('keyboard-trigger');
-      // Tab rather than .focus(): the trigger is the only focusable node in this
-      // story, so this proves it is reachable by keyboard — which is what the
-      // step claims to check. Asserting that .focus() focused only tests the DOM.
-      await userEvent.tab();
-      await waitFor(() => expect(trigger).toHaveFocus());
-    });
-
-    await step('Verify keyboard accessibility', async () => {
-      const trigger = canvas.getByTestId('keyboard-trigger');
-      await expect(trigger).toHaveAttribute('role', 'button');
-      await expect(trigger).toHaveAttribute('tabIndex', '0');
-    });
-  },
-};
-
-// Focus Management Tests
-export const FocusManagement: Story = {
-  name: '🎯 Focus Management Test',
-  render: () => (
-    <div data-testid="focus-container">
-      <Card>
-        <CollapsibleTrigger onClick={() => {}} expanded={false} data-testid="focus-trigger">
-          <Typography variant="h6">Focus Test</Typography>
-        </CollapsibleTrigger>
-        <Collapsible open={true} data-testid="focus-collapsible">
-          <CollapsibleContent>
-            <Button data-testid="focus-button">Focusable Element</Button>
-          </CollapsibleContent>
-        </Collapsible>
-      </Card>
-    </div>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify focus management', async () => {
-      const trigger = canvas.getByTestId('focus-trigger');
-      const button = canvas.getByTestId('focus-button');
-
-      await expect(trigger).toBeInTheDocument();
-      await expect(button).toBeInTheDocument();
-    });
-  },
-};
-
-// Responsive Design Tests
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  render: () => (
-    <Box
-      sx={{ width: '100%', maxWidth: { xs: '100%', sm: '600px', md: '800px' } }}
-      data-testid="responsive-container"
-    >
-      <Card>
-        <CollapsibleTrigger onClick={() => {}} expanded={false} data-testid="responsive-trigger">
-          <Typography variant="h6">Responsive Collapsible</Typography>
-        </CollapsibleTrigger>
-        <Collapsible open={true} data-testid="responsive-collapsible">
-          <CollapsibleContent>
-            <Typography variant="body1">
-              This content adapts to different screen sizes while maintaining functionality.
-            </Typography>
-          </CollapsibleContent>
-        </Collapsible>
-      </Card>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify responsive container', async () => {
-      const container = canvas.getByTestId('responsive-container');
-      await expect(container).toBeInTheDocument();
-    });
-
-    await step('Verify responsive elements', async () => {
-      const trigger = canvas.getByTestId('responsive-trigger');
-      const collapsible = canvas.getByTestId('responsive-collapsible');
-
-      await expect(trigger).toBeInTheDocument();
-      await expect(collapsible).toBeInTheDocument();
-    });
-  },
-};
-
-// Theme Variations Tests
-export const ThemeVariations: Story = {
-  name: '🎨 Theme Variations Test',
-  render: () => (
-    <Stack spacing={2} data-testid="theme-container">
-      <Card>
-        <CollapsibleTrigger onClick={() => {}} expanded={false} data-testid="theme-trigger">
-          <Typography variant="h6">Theme Test</Typography>
-        </CollapsibleTrigger>
-        <Collapsible open={true} data-testid="theme-collapsible">
-          <CollapsibleContent>
-            <Typography variant="body1">Content with theme integration</Typography>
-          </CollapsibleContent>
-        </Collapsible>
-      </Card>
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify theme integration', async () => {
-      const container = canvas.getByTestId('theme-container');
-      await expect(container).toBeInTheDocument();
-    });
-  },
-};
-
-// Visual States Tests
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  render: () => (
-    <Stack spacing={2} data-testid="visual-container">
-      <Card>
-        <CollapsibleTrigger onClick={() => {}} expanded={true} data-testid="expanded-trigger">
-          <Typography variant="h6">Expanded State</Typography>
-        </CollapsibleTrigger>
-        <Collapsible open={true} data-testid="expanded-collapsible">
-          <CollapsibleContent>
-            <Typography variant="body1">Visible content</Typography>
-          </CollapsibleContent>
-        </Collapsible>
-      </Card>
-
-      <Card>
-        <CollapsibleTrigger onClick={() => {}} expanded={false} data-testid="collapsed-trigger">
-          <Typography variant="h6">Collapsed State</Typography>
-        </CollapsibleTrigger>
-        <Collapsible open={false} data-testid="collapsed-collapsible">
-          <CollapsibleContent>
-            <Typography variant="body1">Hidden content</Typography>
-          </CollapsibleContent>
-        </Collapsible>
-      </Card>
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify expanded state', async () => {
-      const expandedTrigger = canvas.getByTestId('expanded-trigger');
-      await expect(expandedTrigger).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    await step('Verify collapsed state', async () => {
-      const collapsedTrigger = canvas.getByTestId('collapsed-trigger');
-      await expect(collapsedTrigger).toHaveAttribute('aria-expanded', 'false');
-    });
-  },
-};
-
-// Edge Cases Tests
-export const EdgeCases: Story = {
-  name: '🔍 Edge Cases Test',
-  render: () => (
-    <Stack spacing={2} data-testid="edge-cases-container">
-      <Card>
-        <CollapsibleTrigger
-          onClick={() => {}}
-          expanded={false}
-          disabled
-          data-testid="disabled-trigger"
-        >
-          <Typography variant="h6">Disabled Trigger</Typography>
-        </CollapsibleTrigger>
-        <Collapsible open={false} disabled data-testid="disabled-collapsible">
-          <CollapsibleContent>
-            <Typography variant="body1">Disabled content</Typography>
-          </CollapsibleContent>
-        </Collapsible>
-      </Card>
-
-      <Card>
-        <CollapsibleTrigger onClick={() => {}} expanded={true} data-testid="empty-trigger">
-          <Typography variant="h6">Empty Content</Typography>
-        </CollapsibleTrigger>
-        <Collapsible open={true} data-testid="empty-collapsible">
-          <CollapsibleContent></CollapsibleContent>
-        </Collapsible>
-      </Card>
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify disabled state', async () => {
-      const disabledTrigger = canvas.getByTestId('disabled-trigger');
-      await expect(disabledTrigger).toHaveAttribute('disabled');
-    });
-
-    await step('Verify empty content handling', async () => {
-      const emptyCollapsible = canvas.getByTestId('empty-collapsible');
-      await expect(emptyCollapsible).toBeInTheDocument();
-    });
-  },
-};