@12-apps/ui 1.0.0

package/src/components/data-display/Chart/Chart.types.ts

@@ -0,0 +1,65 @@
+import type { CSSProperties } from 'react';
+
+export type ChartType = 'line' | 'bar' | 'area' | 'pie' | 'radar' | 'scatter' | 'composed';
+
+export interface ChartDataPoint {
+  [key: string]: string | number | null;
+}
+
+export interface ChartSeries {
+  dataKey: string;
+  name?: string;
+  color?: string;
+  type?: 'line' | 'bar' | 'area';
+  strokeWidth?: number;
+  fill?: string;
+  fillOpacity?: number;
+  strokeDasharray?: string;
+  dot?: boolean;
+  activeDot?: boolean;
+  label?: boolean;
+  stackId?: string;
+}
+
+export interface ChartProps {
+  data: ChartDataPoint[];
+  series?: ChartSeries[];
+  type?: ChartType;
+  variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'neon';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+  height?: number;
+  width?: number | string;
+  glow?: boolean;
+  pulse?: boolean;
+  glass?: boolean;
+  gradient?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  title?: string;
+  subtitle?: string;
+  xAxisKey?: string;
+  yAxisLabel?: string;
+  xAxisLabel?: string;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  showCartesianGrid?: boolean;
+  animate?: boolean;
+  animationDuration?: number;
+  onClick?: (data: ChartDataPoint) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  margin?: { top?: number; right?: number; bottom?: number; left?: number };
+  colors?: string[];
+  curved?: boolean;
+  stacked?: boolean;
+  percentage?: boolean;
+  showValues?: boolean;
+  responsive?: boolean;
+  innerRadius?: number;
+  centerLabel?: string | { label: string; value: string | number };
+  'data-testid'?: string;
+}

package/src/components/data-display/Chart/index.ts

@@ -0,0 +1,2 @@
+export { Chart } from './Chart';
+export type { ChartDataPoint, ChartProps, ChartSeries } from './Chart.types';

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

@@ -0,0 +1,251 @@
+import { Face, Star } from '@mui/icons-material';
+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

@@ -0,0 +1,263 @@
+import { Star } from '@mui/icons-material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { expect, fn, Mock, userEvent, 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');
+
+    // Focus the chip
+    chip.focus();
+    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');
+
+    // Test programmatic focus
+    chip.focus();
+    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();
+  },
+};