@12-apps/ui 1.5.0 → 1.5.2

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

@@ -1,252 +0,0 @@
-import Face from '@mui/icons-material/Face';
-import Star from '@mui/icons-material/Star';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Chip } from './Chip';
-
-const meta: Meta<typeof Chip> = {
-  title: 'DataDisplay/Chip',
-  component: Chip,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Compact tag/label component with optional avatar, selection, and deletion functionality. Supports keyboard navigation and accessibility features.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Text content displayed in the chip',
-    },
-    variant: {
-      control: 'select',
-      options: ['filled', 'outlined'],
-      description: 'Visual style variant',
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium'],
-      description: 'Size of the chip',
-    },
-    color: {
-      control: 'text',
-      description: 'Theme color token',
-    },
-    avatarSrc: {
-      control: 'text',
-      description: 'Source URL for avatar image',
-    },
-    selected: {
-      control: 'boolean',
-      description: 'Current selection state',
-    },
-    selectable: {
-      control: 'boolean',
-      description: 'Enables selection toggle capability',
-    },
-    deletable: {
-      control: 'boolean',
-      description: 'Shows delete button',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables all interactions',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: 'Default Chip',
-  },
-};
-
-export const Outlined: Story = {
-  args: {
-    label: 'Outlined Chip',
-    variant: 'outlined',
-  },
-};
-
-export const WithAvatar: Story = {
-  args: {
-    label: 'Avatar Chip',
-    avatarSrc: 'https://mui.com/static/images/avatar/1.jpg',
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    label: 'Icon Chip',
-    icon: <Face />,
-  },
-};
-
-export const Selectable: Story = {
-  args: {
-    label: 'Selectable',
-    selectable: true,
-    selected: false,
-  },
-};
-
-export const Selected: Story = {
-  args: {
-    label: 'Selected',
-    selectable: true,
-    selected: true,
-  },
-};
-
-export const Deletable: Story = {
-  args: {
-    label: 'Deletable',
-    deletable: true,
-    onDelete: () => {},
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled',
-    disabled: true,
-  },
-};
-
-export const SmallSize: Story = {
-  args: {
-    label: 'Small',
-    size: 'small',
-  },
-};
-
-export const MediumSize: Story = {
-  args: {
-    label: 'Medium',
-    size: 'medium',
-  },
-};
-
-export const LargeSize: Story = {
-  args: {
-    label: 'Large',
-    size: 'medium',
-  },
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-      <Chip label="Small" size="small" />
-      <Chip label="Medium" size="medium" />
-      <Chip label="Large" size="medium" />
-    </div>
-  ),
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-      <Chip label="Filled" variant="filled" />
-      <Chip label="Outlined" variant="outlined" />
-    </div>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center' }}>
-      <Chip label="Default" />
-      <Chip label="Selected" selectable selected />
-      <Chip label="Deletable" deletable onDelete={() => {}} />
-      <Chip label="Disabled" disabled />
-      <Chip label="With Avatar" avatarSrc="https://mui.com/static/images/avatar/1.jpg" />
-      <Chip label="With Icon" icon={<Star />} />
-    </div>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center' }}>
-      <Chip label="Clickable" onClick={() => {}} />
-      <Chip label="Selectable" selectable />
-      <Chip label="Deletable" deletable onDelete={() => {}} />
-      <Chip label="Combined" selectable deletable onClick={() => {}} onDelete={() => {}} />
-    </div>
-  ),
-};
-
-export const Responsive: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
-        {Array.from({ length: 10 }, (_, i) => (
-          <Chip key={i} label={`Tag ${i + 1}`} size="small" />
-        ))}
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
-        {Array.from({ length: 8 }, (_, i) => (
-          <Chip key={i} label={`Category ${i + 1}`} size="medium" deletable onDelete={() => {}} />
-        ))}
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
-        {Array.from({ length: 5 }, (_, i) => (
-          <Chip key={i} label={`Filter ${i + 1}`} size="medium" selectable />
-        ))}
-      </div>
-    </div>
-  ),
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: { width: '375px', height: '667px' },
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: { width: '768px', height: '1024px' },
-        },
-      },
-    },
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    label: 'This is a very long chip label that demonstrates text truncation behavior',
-    deletable: true,
-    onDelete: () => {},
-  },
-};
-
-export const GlassEffect: Story = {
-  render: () => (
-    <div
-      style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        padding: '40px',
-        borderRadius: '12px',
-      }}
-    >
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
-        <Chip label="Glass Filled" variant="filled" />
-        <Chip label="Glass Outlined" variant="outlined" />
-        <Chip
-          label="Glass Avatar"
-          variant="outlined"
-          avatarSrc="https://mui.com/static/images/avatar/1.jpg"
-        />
-        <Chip label="Glass Deletable" variant="outlined" deletable onDelete={() => {}} />
-      </div>
-    </div>
-  ),
-};

package/src/components/data-display/Chip/Chip.test.stories.tsx

@@ -1,266 +0,0 @@
-import Star from '@mui/icons-material/Star';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { expect, fn, Mock, userEvent, waitFor, within } from 'storybook/test';
-
-import { Chip } from './Chip';
-
-const meta: Meta<typeof Chip> = {
-  title: 'DataDisplay/Chip/Tests',
-  component: Chip,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Chip'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const BasicInteraction: Story = {
-  args: {
-    label: 'Click me',
-    onClick: fn(),
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    const chip = canvas.getByRole('button');
-
-    // Test initial render
-    expect(chip).toBeInTheDocument();
-    expect(chip).toHaveTextContent('Click me');
-
-    // Test click interaction
-    await userEvent.click(chip);
-    expect(args.onClick).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const KeyboardNavigation: Story = {
-  args: {
-    label: 'Keyboard Chip',
-    selectable: true,
-    onClick: fn(),
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    const chip = canvas.getByRole('option');
-
-    // Tab to the chip rather than calling .focus() directly: the keyboard is how
-    // a user reaches it, and the direct call asserts nothing about the component.
-    await userEvent.tab();
-    await waitFor(() => expect(chip).toHaveFocus());
-
-    // Test Enter key
-    await userEvent.keyboard('{Enter}');
-    expect(args.onClick).toHaveBeenCalled();
-
-    // Clear the mock
-    (args.onClick as Mock).mockClear();
-
-    // Test Space key
-    await userEvent.keyboard(' ');
-    expect(args.onClick).toHaveBeenCalled();
-  },
-};
-
-export const FocusManagement: Story = {
-  args: {
-    label: 'Focus Test',
-    onClick: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const chip = canvas.getByRole('button');
-
-    // Tab rather than .focus(): the chip is the only focusable node here, so this
-    // proves it is keyboard-reachable — a real property of the component, unlike
-    // asserting that a direct .focus() call took effect.
-    await userEvent.tab();
-    await waitFor(() => expect(chip).toHaveFocus());
-  },
-};
-
-export const ResponsiveDesign: Story = {
-  render: () => (
-    <div
-      style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '8px',
-        maxWidth: '300px',
-      }}
-    >
-      {Array.from({ length: 8 }, (_, i) => (
-        <Chip key={i} label={`Responsive ${i + 1}`} size="small" onClick={() => {}} />
-      ))}
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const chips = canvas.getAllByRole('button');
-
-    // Test responsive wrapping
-    expect(chips).toHaveLength(8);
-
-    // Test chip visibility
-    chips.forEach((chip) => {
-      expect(chip).toBeVisible();
-    });
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-  },
-};
-
-export const ThemeVariations: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', flexDirection: 'column' }}>
-      <div style={{ display: 'flex', gap: '8px' }}>
-        <Chip label="Primary" color="primary" onClick={() => {}} />
-        <Chip label="Secondary" color="secondary" onClick={() => {}} />
-        <Chip label="Success" color="success" onClick={() => {}} />
-        <Chip label="Error" color="error" onClick={() => {}} />
-        <Chip label="Warning" color="warning" onClick={() => {}} />
-      </div>
-      <div style={{ display: 'flex', gap: '8px' }}>
-        <Chip label="Primary Outlined" color="primary" variant="outlined" onClick={() => {}} />
-        <Chip label="Secondary Outlined" color="secondary" variant="outlined" onClick={() => {}} />
-        <Chip label="Success Outlined" color="success" variant="outlined" onClick={() => {}} />
-      </div>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const chips = canvas.getAllByRole('button');
-
-    // Test theme color application
-    expect(chips).toHaveLength(8);
-
-    // Test filled vs outlined variants
-    const filledChips = chips.slice(0, 5);
-    const outlinedChips = chips.slice(5, 8);
-
-    filledChips.forEach((chip) => {
-      expect(chip).toBeVisible();
-    });
-
-    outlinedChips.forEach((chip) => {
-      expect(chip).toBeVisible();
-    });
-  },
-};
-
-export const VisualStates: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-      <Chip label="Normal" onClick={() => {}} dataTestId="chip-normal" />
-      <Chip label="Selected" selectable selected onClick={() => {}} dataTestId="chip-selected" />
-      <Chip label="Disabled" disabled onClick={() => {}} dataTestId="chip-disabled" />
-      <Chip
-        label="With Avatar"
-        avatarSrc="https://mui.com/static/images/avatar/1.jpg"
-        onClick={() => {}}
-        dataTestId="chip-avatar"
-      />
-      <Chip label="With Icon" icon={<Star />} onClick={() => {}} dataTestId="chip-icon" />
-      <Chip label="Deletable" deletable onDelete={() => {}} onClick={() => {}} dataTestId="chip-deletable" />
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test different visual states using testIds
-    const normalChip = canvas.getByTestId('chip-normal');
-    expect(normalChip).toBeVisible();
-    expect(normalChip).toHaveTextContent('Normal');
-
-    const selectedChip = canvas.getByTestId('chip-selected');
-    expect(selectedChip).toBeVisible();
-    expect(selectedChip).toHaveAttribute('aria-selected', 'true');
-
-    const disabledChip = canvas.getByTestId('chip-disabled');
-    expect(disabledChip).toBeInTheDocument();
-    expect(disabledChip).toHaveTextContent('Disabled');
-
-    const avatarChip = canvas.getByTestId('chip-avatar');
-    expect(avatarChip).toBeVisible();
-    expect(avatarChip).toHaveTextContent('With Avatar');
-
-    const iconChip = canvas.getByTestId('chip-icon');
-    expect(iconChip).toBeVisible();
-    expect(iconChip).toHaveTextContent('With Icon');
-
-    const deletableChip = canvas.getByTestId('chip-deletable');
-    expect(deletableChip).toBeVisible();
-    expect(deletableChip).toHaveTextContent('Deletable');
-
-    // Verify the delete icon exists within the deletable chip
-    const deleteIcon = canvas.getByTestId('chip-deletable-delete');
-    expect(deleteIcon).toBeInTheDocument();
-  },
-};
-
-export const EdgeCases: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '8px', flexDirection: 'column' }}>
-      <div style={{ display: 'flex', gap: '8px' }}>
-        <Chip label="" onClick={() => {}} dataTestId="chip-empty" /> {/* Empty label */}
-        <Chip label="A" onClick={() => {}} dataTestId="chip-single" /> {/* Single character */}
-        <Chip
-          label="This is an extremely long label that should be truncated or handled gracefully by the component"
-          onClick={() => {}}
-          dataTestId="chip-long"
-        />
-      </div>
-      <div style={{ display: 'flex', gap: '8px' }}>
-        <Chip label="No handlers" onClick={() => {}} dataTestId="chip-no-handlers" /> {/* No click handlers */}
-        <Chip
-          label="Multiple states"
-          selectable
-          selected
-          deletable
-          onDelete={() => {}}
-          onClick={() => {}}
-          dataTestId="chip-multiple"
-        />
-        <Chip label="Special chars: !@#$%^&*()_+-=[]{}|;:,.<>?" onClick={() => {}} dataTestId="chip-special" />
-      </div>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test empty label handling using testId
-    const emptyChip = canvas.getByTestId('chip-empty');
-    expect(emptyChip).toBeInTheDocument();
-
-    // Test single character
-    const singleChip = canvas.getByTestId('chip-single');
-    expect(singleChip).toBeVisible();
-    expect(singleChip).toHaveTextContent('A');
-
-    // Test long label
-    const longChip = canvas.getByTestId('chip-long');
-    expect(longChip).toBeVisible();
-    expect(longChip).toHaveTextContent(/This is an extremely long label/);
-
-    // Test special characters
-    const specialChip = canvas.getByTestId('chip-special');
-    expect(specialChip).toBeVisible();
-    expect(specialChip).toHaveTextContent(/Special chars:/);
-
-    // Test multiple states
-    const multipleChip = canvas.getByTestId('chip-multiple');
-    expect(multipleChip).toBeVisible();
-    expect(multipleChip).toHaveTextContent('Multiple states');
-    expect(multipleChip).toHaveAttribute('aria-selected', 'true');
-
-    // Verify delete icon exists on the multiple states chip
-    const deleteIcon = canvas.getByTestId('chip-multiple-delete');
-    expect(deleteIcon).toBeInTheDocument();
-  },
-};