@12-apps/ui 1.5.0 → 1.5.1

package/src/components/typography/Text/Text.test.stories.tsx

@@ -1,759 +0,0 @@
-import { Box, Stack } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { expect, userEvent, waitFor,within } from 'storybook/test';
-
-// Type extension for performance.memory API
-interface PerformanceWithMemory {
-  memory?: {
-    usedJSHeapSize: number;
-  };
-  now?: () => number;
-}
-
-import { Text } from './Text';
-
-const meta: Meta<typeof Text> = {
-  title: 'Typography/Text/Tests',
-  component: Text,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Text'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Basic Interaction Tests
-export const BasicInteraction: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test text content is rendered
-    const textElement = canvas.getByText(/interactive text/i);
-    expect(textElement).toBeInTheDocument();
-
-    // Test text element has correct text content
-    expect(textElement.textContent).toBe('This is interactive text content');
-
-    // Test clicking text element doesn't cause errors
-    await userEvent.click(textElement);
-
-    // Test text element maintains focus capabilities
-    await userEvent.click(textElement);
-    await waitFor(() => expect(textElement).toHaveFocus());
-
-    // Test element can be selected
-    await userEvent.tripleClick(textElement);
-
-    // Verify text element is accessible
-    expect(textElement).toBeVisible();
-  },
-  render: () => <Text tabIndex={0}>This is interactive text content</Text>,
-};
-
-// State Change Tests - Testing different variants and props
-export const StateChange: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test body variant
-    const bodyText = canvas.getByTestId('body-text');
-    expect(bodyText).toBeInTheDocument();
-    expect(bodyText).toHaveStyle({ fontWeight: '400' });
-
-    // Test heading variant
-    const headingText = canvas.getByTestId('heading-text');
-    expect(headingText).toBeInTheDocument();
-    expect(headingText).toHaveStyle({ fontWeight: '600' });
-
-    // Test caption variant
-    const captionText = canvas.getByTestId('caption-text');
-    expect(captionText).toBeInTheDocument();
-    expect(captionText).toHaveStyle({ opacity: '0.8' });
-
-    // Test code variant
-    const codeText = canvas.getByTestId('code-text');
-    expect(codeText).toBeInTheDocument();
-    // Verify code font family by checking computed style
-    const codeStyle = window.getComputedStyle(codeText);
-    expect(codeStyle.fontFamily).toMatch(/Monaco|Menlo|Ubuntu Mono|Courier New|monospace/i);
-
-    // Test size variations
-    const largeText = canvas.getByTestId('large-text');
-    const largeStyle = window.getComputedStyle(largeText);
-    expect(largeStyle.fontSize).toBe('18px'); // 1.125rem = 18px
-
-    const smallText = canvas.getByTestId('small-text');
-    const smallStyle = window.getComputedStyle(smallText);
-    expect(smallStyle.fontSize).toBe('14px'); // 0.875rem = 14px
-
-    // Test weight variations
-    const boldText = canvas.getByTestId('bold-text');
-    expect(boldText).toHaveStyle({ fontWeight: '700' });
-
-    // Test text decorations
-    const italicText = canvas.getByTestId('italic-text');
-    expect(italicText).toHaveStyle({ fontStyle: 'italic' });
-
-    const underlineText = canvas.getByTestId('underline-text');
-    expect(underlineText).toHaveStyle({ textDecoration: expect.stringContaining('underline') });
-
-    const strikethroughText = canvas.getByTestId('strikethrough-text');
-    expect(strikethroughText).toHaveStyle({
-      textDecoration: expect.stringContaining('line-through'),
-    });
-  },
-  render: () => (
-    <Stack spacing={2}>
-      <Text variant="body" data-testid="body-text">
-        Body text
-      </Text>
-      <Text variant="heading" data-testid="heading-text">
-        Heading text
-      </Text>
-      <Text variant="caption" data-testid="caption-text">
-        Caption text
-      </Text>
-      <Text variant="code" data-testid="code-text">
-        Code text
-      </Text>
-      <Text size="lg" data-testid="large-text">
-        Large text
-      </Text>
-      <Text size="sm" data-testid="small-text">
-        Small text
-      </Text>
-      <Text weight="bold" data-testid="bold-text">
-        Bold text
-      </Text>
-      <Text italic data-testid="italic-text">
-        Italic text
-      </Text>
-      <Text underline data-testid="underline-text">
-        Underline text
-      </Text>
-      <Text strikethrough data-testid="strikethrough-text">
-        Strikethrough text
-      </Text>
-    </Stack>
-  ),
-};
-
-// Keyboard Navigation Tests
-export const KeyboardNavigation: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const focusableTexts = [
-      canvas.getByTestId('nav-text-1'),
-      canvas.getByTestId('nav-text-2'),
-      canvas.getByTestId('nav-text-3'),
-    ];
-
-    // Test initial focus
-    await userEvent.click(focusableTexts[0]);
-    await waitFor(() => expect(focusableTexts[0]).toHaveFocus());
-
-    // Test Tab navigation between elements
-    await userEvent.tab();
-    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
-
-    await userEvent.tab();
-    await waitFor(() => expect(focusableTexts[2]).toHaveFocus());
-
-    // Test Shift+Tab backward navigation
-    await userEvent.tab({ shift: true });
-    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
-
-    // Test keyboard interaction doesn't lose focus
-    await userEvent.keyboard('{Enter}');
-    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
-
-    // Test Space key interaction
-    await userEvent.keyboard(' ');
-    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
-
-    // Test Escape key interaction
-    await userEvent.keyboard('{Escape}');
-    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
-  },
-  render: () => (
-    <Stack spacing={2}>
-      <Text tabIndex={0} data-testid="nav-text-1">
-        Focusable text 1
-      </Text>
-      <Text tabIndex={0} data-testid="nav-text-2">
-        Focusable text 2
-      </Text>
-      <Text tabIndex={0} data-testid="nav-text-3">
-        Focusable text 3
-      </Text>
-    </Stack>
-  ),
-};
-
-// Screen Reader Accessibility Tests
-export const ScreenReader: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test semantic elements
-    const paragraph = canvas.getByTestId('paragraph');
-    expect(paragraph).toBeInTheDocument();
-    expect(paragraph.tagName.toLowerCase()).toBe('p');
-
-    // Test aria-label is preserved
-    const labeledText = canvas.getByLabelText('Important announcement');
-    expect(labeledText).toBeInTheDocument();
-    expect(labeledText).toHaveAttribute('aria-label', 'Important announcement');
-
-    // Test role attributes
-    const statusText = canvas.getByRole('status');
-    expect(statusText).toBeInTheDocument();
-    expect(statusText.textContent).toBe('Status message');
-
-    // Test aria-describedby relationships
-    const describedText = canvas.getByText('Main content');
-    const description = canvas.getByText('This is the description');
-    expect(describedText).toHaveAttribute('aria-describedby', 'description-1');
-    expect(description).toHaveAttribute('id', 'description-1');
-
-    // Test heading semantics
-    const headingText = canvas.getByRole('heading', { level: 2 });
-    expect(headingText).toBeInTheDocument();
-    expect(headingText.textContent).toBe('Section Heading');
-
-    // Test text content accessibility
-    const codeText = canvas.getByText('console.log("hello")');
-    expect(codeText).toHaveAttribute('role', 'code');
-  },
-  render: () => (
-    <Stack spacing={2}>
-      <Text as="p" data-testid="paragraph">
-        Paragraph text content
-      </Text>
-      <Text aria-label="Important announcement">This is an important message</Text>
-      <Text role="status">Status message</Text>
-      <Text aria-describedby="description-1">Main content</Text>
-      <Text id="description-1">This is the description</Text>
-      <Text as="h2" variant="heading">
-        Section Heading
-      </Text>
-      <Text variant="code" role="code">
-        console.log("hello")
-      </Text>
-    </Stack>
-  ),
-};
-
-// Focus Management Tests
-export const FocusManagement: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    canvas.getByTestId('focus-container');
-    const focusableText = canvas.getByTestId('focusable-text');
-    const triggerButton = canvas.getByTestId('focus-trigger');
-
-    // Test initial focus state
-    await waitFor(() => expect(focusableText).not.toHaveFocus());
-
-    // Test programmatic focus
-    await userEvent.click(triggerButton);
-    await waitFor(() => {
-      await waitFor(() => expect(focusableText).toHaveFocus());
-    });
-
-    // Test focus containment within container. The activeElement read that used
-    // to sit here asserted exactly what the waitFor below does, one line earlier
-    // and without retrying.
-    await userEvent.click(focusableText);
-    await waitFor(() => expect(focusableText).toHaveFocus());
-
-    // Test blur handling
-    focusableText.blur();
-    await waitFor(() => expect(focusableText).not.toHaveFocus());
-  },
-  render: function FocusManagementRender() {
-    const [focusTarget, setFocusTarget] = React.useState<HTMLElement | null>(null);
-
-    const handleFocus = () => {
-      if (focusTarget) {
-        await userEvent.click(focusTarget);
-      }
-    };
-
-    return (
-      <Stack spacing={2} data-testid="focus-container">
-        <button data-testid="focus-trigger" onClick={handleFocus}>
-          Focus Text
-        </button>
-        <Text tabIndex={0} data-testid="focusable-text" ref={setFocusTarget}>
-          This text can be focused programmatically
-        </Text>
-      </Stack>
-    );
-  },
-};
-
-// Responsive Design Tests
-export const ResponsiveDesign: Story = {
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test responsive text scaling
-    const responsiveText = canvas.getByTestId('responsive-text');
-    expect(responsiveText).toBeInTheDocument();
-
-    // Test responsive visibility (check computed styles)
-    const mobileOnlyText = canvas.getByTestId('mobile-only');
-    const desktopOnlyText = canvas.getByTestId('desktop-only');
-
-    expect(mobileOnlyText).toBeInTheDocument();
-    expect(desktopOnlyText).toBeInTheDocument();
-
-    // Test line height adjustments for mobile
-    const bodyText = canvas.getByTestId('body-responsive');
-    const computedStyle = window.getComputedStyle(bodyText);
-    expect(parseFloat(computedStyle.lineHeight)).toBeGreaterThan(1);
-
-    // Test text wrapping behavior
-    // Wrapping is about the text surviving a narrow container, not about any
-    // particular pixel width: the whole string must still be rendered. The old
-    // `scrollWidth > 0` held for any element that exists at all.
-    const longText = canvas.getByTestId('long-text');
-    expect(longText).toBeInTheDocument();
-    expect(longText.textContent?.trim().length).toBeGreaterThan(0);
-  },
-  render: () => (
-    <Box sx={{ width: '100%', maxWidth: '320px' }}>
-      <Stack spacing={2}>
-        <Text
-          data-testid="responsive-text"
-          sx={{
-            fontSize: { xs: '0.875rem', sm: '1rem', md: '1.125rem' },
-          }}
-        >
-          Responsive text that scales with screen size
-        </Text>
-        <Text data-testid="mobile-only" sx={{ display: { xs: 'block', md: 'none' } }}>
-          Mobile only text
-        </Text>
-        <Text data-testid="desktop-only" sx={{ display: { xs: 'none', md: 'block' } }}>
-          Desktop only text
-        </Text>
-        <Text data-testid="body-responsive">Regular body text that adapts to screen size</Text>
-        <Text data-testid="long-text">
-          This is a very long text that should wrap properly on smaller screens and maintain
-          readability across different device sizes
-        </Text>
-      </Stack>
-    </Box>
-  ),
-};
-
-// Theme Variations Tests
-export const ThemeVariations: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test primary color
-    const primaryText = canvas.getByTestId('primary-text');
-    expect(primaryText).toBeInTheDocument();
-
-    // Test secondary color
-    const secondaryText = canvas.getByTestId('secondary-text');
-    expect(secondaryText).toBeInTheDocument();
-
-    // Test success color
-    const successText = canvas.getByTestId('success-text');
-    expect(successText).toBeInTheDocument();
-
-    // Test warning color
-    const warningText = canvas.getByTestId('warning-text');
-    expect(warningText).toBeInTheDocument();
-
-    // Test danger color
-    const dangerText = canvas.getByTestId('danger-text');
-    expect(dangerText).toBeInTheDocument();
-
-    // Test neutral color
-    const neutralText = canvas.getByTestId('neutral-text');
-    expect(neutralText).toBeInTheDocument();
-
-    // Verify colors are applied (basic check for color property existence)
-    const primaryStyle = window.getComputedStyle(primaryText);
-    expect(primaryStyle.color).toBeTruthy();
-
-    const secondaryStyle = window.getComputedStyle(secondaryText);
-    expect(secondaryStyle.color).toBeTruthy();
-
-    // Test theme integration
-    expect(primaryText.textContent).toBe('Primary themed text');
-    expect(successText.textContent).toBe('Success themed text');
-  },
-  render: () => (
-    <Stack spacing={2}>
-      <Text color="primary" data-testid="primary-text">
-        Primary themed text
-      </Text>
-      <Text color="secondary" data-testid="secondary-text">
-        Secondary themed text
-      </Text>
-      <Text color="success" data-testid="success-text">
-        Success themed text
-      </Text>
-      <Text color="warning" data-testid="warning-text">
-        Warning themed text
-      </Text>
-      <Text color="danger" data-testid="danger-text">
-        Danger themed text
-      </Text>
-      <Text color="neutral" data-testid="neutral-text">
-        Neutral themed text
-      </Text>
-    </Stack>
-  ),
-};
-
-// Visual States Tests
-export const VisualStates: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test all size variants
-    const extraSmallText = canvas.getByTestId('xs-text');
-    const smallText = canvas.getByTestId('sm-text');
-    const mediumText = canvas.getByTestId('md-text');
-    const largeText = canvas.getByTestId('lg-text');
-    const extraLargeText = canvas.getByTestId('xl-text');
-
-    expect(window.getComputedStyle(extraSmallText).fontSize).toBe('12px'); // 0.75rem
-    expect(window.getComputedStyle(smallText).fontSize).toBe('14px'); // 0.875rem
-    expect(window.getComputedStyle(mediumText).fontSize).toBe('16px'); // 1rem
-    expect(window.getComputedStyle(largeText).fontSize).toBe('18px'); // 1.125rem
-    expect(window.getComputedStyle(extraLargeText).fontSize).toBe('20px'); // 1.25rem
-
-    // Test all weight variants
-    const lightText = canvas.getByTestId('light-text');
-    const normalText = canvas.getByTestId('normal-text');
-    const mediumWeightText = canvas.getByTestId('medium-text');
-    const semiboldText = canvas.getByTestId('semibold-text');
-    const boldText = canvas.getByTestId('bold-text');
-
-    expect(lightText).toHaveStyle({ fontWeight: '300' });
-    expect(normalText).toHaveStyle({ fontWeight: '400' });
-    expect(mediumWeightText).toHaveStyle({ fontWeight: '500' });
-    expect(semiboldText).toHaveStyle({ fontWeight: '600' });
-    expect(boldText).toHaveStyle({ fontWeight: '700' });
-
-    // Test combined decorations
-    const combinedText = canvas.getByTestId('combined-text');
-    expect(combinedText).toHaveStyle({
-      fontStyle: 'italic',
-      textDecoration: expect.stringContaining('underline'),
-    });
-  },
-  render: () => (
-    <Stack spacing={2}>
-      <Text size="xs" data-testid="xs-text">
-        Extra Small (xs)
-      </Text>
-      <Text size="sm" data-testid="sm-text">
-        Small (sm)
-      </Text>
-      <Text size="md" data-testid="md-text">
-        Medium (md)
-      </Text>
-      <Text size="lg" data-testid="lg-text">
-        Large (lg)
-      </Text>
-      <Text size="xl" data-testid="xl-text">
-        Extra Large (xl)
-      </Text>
-
-      <Text weight="light" data-testid="light-text">
-        Light Weight
-      </Text>
-      <Text weight="normal" data-testid="normal-text">
-        Normal Weight
-      </Text>
-      <Text weight="medium" data-testid="medium-text">
-        Medium Weight
-      </Text>
-      <Text weight="semibold" data-testid="semibold-text">
-        Semibold Weight
-      </Text>
-      <Text weight="bold" data-testid="bold-text">
-        Bold Weight
-      </Text>
-
-      <Text italic underline data-testid="combined-text">
-        Combined Italic & Underline
-      </Text>
-    </Stack>
-  ),
-};
-
-// Performance Tests
-export const Performance: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // All fifty render — the assertion the wall-clock budget that used to
-    // bracket this query was standing in for. The query ran against elements
-    // that were already on the page, so the number it produced measured the
-    // machine rather than the component.
-    const textElements = canvas.getAllByText(/Performance text/);
-    expect(textElements).toHaveLength(50);
-
-    // Test large text content rendering
-    const largeTextElement = canvas.getByTestId('large-content');
-    expect(largeTextElement).toBeInTheDocument();
-
-    // Test memory usage doesn't increase dramatically
-    const initialMemory =
-      (globalThis.performance as PerformanceWithMemory)?.memory?.usedJSHeapSize || 0;
-
-    // Trigger re-renders
-    for (let i = 0; i < 10; i++) {
-      await userEvent.hover(textElements[0]);
-      await userEvent.unhover(textElements[0]);
-    }
-
-    const finalMemory =
-      (globalThis.performance as PerformanceWithMemory)?.memory?.usedJSHeapSize || 0;
-
-    // Memory increase should be minimal (if memory API is available)
-    if (initialMemory > 0 && finalMemory > 0) {
-      const memoryIncrease = finalMemory - initialMemory;
-      expect(memoryIncrease).toBeLessThan(1000000); // Less than 1MB increase
-    }
-  },
-  render: () => (
-    <Stack spacing={1}>
-      {Array.from({ length: 50 }, (_, i) => (
-        <Text key={i}>Performance text item {i + 1}</Text>
-      ))}
-      <Text data-testid="large-content">
-        {Array.from({ length: 1000 }, () => 'Large content text. ').join('')}
-      </Text>
-    </Stack>
-  ),
-};
-
-// Edge Cases Tests
-export const EdgeCases: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test empty content
-    const emptyText = canvas.getByTestId('empty-text');
-    expect(emptyText).toBeInTheDocument();
-    expect(emptyText.textContent).toBe('');
-
-    // Test very long single word
-    const longWordText = canvas.getByTestId('long-word');
-    expect(longWordText).toBeInTheDocument();
-    expect(longWordText.textContent).toContain('supercalifragilisticexpialidocious');
-
-    // Test special characters
-    const specialCharsText = canvas.getByTestId('special-chars');
-    expect(specialCharsText).toBeInTheDocument();
-    expect(specialCharsText.textContent).toBe('Special chars: !@#$%^&*()_+-=[]|;:,<>?');
-
-    // Test HTML entities
-    const htmlEntitiesText = canvas.getByTestId('html-entities');
-    expect(htmlEntitiesText).toBeInTheDocument();
-    expect(htmlEntitiesText.textContent).toContain('<>&"\'');
-
-    // Test numbers and mixed content
-    const mixedContentText = canvas.getByTestId('mixed-content');
-    expect(mixedContentText).toBeInTheDocument();
-    expect(mixedContentText.textContent).toBe('Mixed 123 content with émojis 🚀');
-
-    // Test zero-width content
-    const zeroWidthText = canvas.getByTestId('zero-width');
-    expect(zeroWidthText).toBeInTheDocument();
-
-    // Test multiline content - verify it exists and contains expected text
-    const multilineText = canvas.getByTestId('multiline');
-    expect(multilineText).toBeInTheDocument();
-    // Check for line content (text may be rendered without line breaks in DOM)
-    expect(multilineText.textContent).toContain('Line 1');
-    expect(multilineText.textContent).toContain('Line 2');
-    expect(multilineText.textContent).toContain('Line 3');
-
-    // Test RTL text
-    const rtlText = canvas.getByTestId('rtl-text');
-    expect(rtlText).toBeInTheDocument();
-    expect(rtlText.textContent).toBe('مرحبا بك في النص العربي');
-  },
-  render: () => (
-    <Stack spacing={2}>
-      <Text data-testid="empty-text"></Text>
-      <Text data-testid="long-word">
-        supercalifragilisticexpialidociousantidisestablishmentarianism
-      </Text>
-      <Text data-testid="special-chars">Special chars: !@#$%^&*()_+-=[]{}|;:,&lt;&gt;?</Text>
-      <Text data-testid="html-entities">&lt;&gt;&amp;&quot;&#39;</Text>
-      <Text data-testid="mixed-content">Mixed 123 content with émojis 🚀</Text>
-      <Text data-testid="zero-width">{String.fromCharCode(8203)}</Text>
-      <Text data-testid="multiline">
-        Line 1{'\n'}Line 2{'\n'}Line 3
-      </Text>
-      <Text data-testid="rtl-text" dir="rtl">
-        مرحبا بك في النص العربي
-      </Text>
-    </Stack>
-  ),
-};
-
-// Integration Tests
-export const Integration: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test Text within various containers
-    const boxText = canvas.getByTestId('box-text');
-    expect(boxText).toBeInTheDocument();
-
-    const stackText = canvas.getByTestId('stack-text');
-    expect(stackText).toBeInTheDocument();
-
-    // Test Text with different HTML elements
-    const paragraphText = canvas.getByTestId('paragraph-text');
-    expect(paragraphText.tagName.toLowerCase()).toBe('p');
-
-    const divText = canvas.getByTestId('div-text');
-    expect(divText.tagName.toLowerCase()).toBe('div');
-
-    const spanText = canvas.getByTestId('span-text');
-    expect(spanText.tagName.toLowerCase()).toBe('span');
-
-    // Test nested Text components
-    const outerText = canvas.getByTestId('outer-text');
-    const innerText = within(outerText).getByTestId('inner-text');
-    expect(outerText).toContainElement(innerText);
-
-    // Test Text with form elements integration
-    const labelText = canvas.getByTestId('label-text');
-    expect(labelText).toBeInTheDocument();
-
-    // Test Text in different layout contexts
-    const flexText = canvas.getByTestId('flex-text');
-    const flexParent = flexText.parentElement;
-    expect(flexParent).toHaveStyle({ display: 'flex' });
-
-    // Test Text with event handlers
-    const clickableText = canvas.getByTestId('clickable-text');
-    await userEvent.click(clickableText);
-    // Verify no errors occurred during click
-    expect(clickableText).toBeInTheDocument();
-  },
-  render: function IntegrationRender() {
-    const [clicked, setClicked] = React.useState(false);
-
-    return (
-      <Stack spacing={2}>
-        <Box>
-          <Text data-testid="box-text">Text in Box</Text>
-        </Box>
-
-        <Stack>
-          <Text data-testid="stack-text">Text in Stack</Text>
-        </Stack>
-
-        <Text as="p" data-testid="paragraph-text">
-          Text as paragraph
-        </Text>
-        <Text as="div" data-testid="div-text">
-          Text as div
-        </Text>
-        <Text as="span" data-testid="span-text">
-          Text as span
-        </Text>
-
-        <Text data-testid="outer-text">
-          Outer text with <Text data-testid="inner-text">inner text</Text>
-        </Text>
-
-        <label>
-          <Text data-testid="label-text">Label text</Text>
-          <input type="text" />
-        </label>
-
-        <Box sx={{ display: 'flex' }}>
-          <Text data-testid="flex-text">Text in flex container</Text>
-        </Box>
-
-        <Text
-          data-testid="clickable-text"
-          onClick={() => setClicked(!clicked)}
-          style={{ cursor: 'pointer' }}
-        >
-          Clickable text {clicked ? '(clicked)' : ''}
-        </Text>
-      </Stack>
-    );
-  },
-};
-
-// Required Story Exports for Validation
-export const AllSizes: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Text size="xs">Extra Small Text</Text>
-      <Text size="sm">Small Text</Text>
-      <Text size="md">Medium Text</Text>
-      <Text size="lg">Large Text</Text>
-      <Text size="xl">Extra Large Text</Text>
-    </Stack>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Text variant="body">Body Text</Text>
-      <Text variant="heading">Heading Text</Text>
-      <Text variant="caption">Caption Text</Text>
-      <Text variant="code">Code Text</Text>
-    </Stack>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => (
-    <Stack spacing={2}>
-      <Text tabIndex={0}>Focusable Text</Text>
-      <Text style={{ cursor: 'pointer' }} onClick={() => {}}>
-        Clickable Text
-      </Text>
-      <Text underline>Underlined Text</Text>
-      <Text strikethrough>Strikethrough Text</Text>
-    </Stack>
-  ),
-};
-
-export const Responsive: Story = {
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-  },
-  render: () => (
-    <Text
-      sx={{
-        fontSize: { xs: '0.875rem', sm: '1rem', md: '1.125rem' },
-        lineHeight: { xs: 1.4, sm: 1.5, md: 1.6 },
-      }}
-    >
-      This text adapts to different screen sizes
-    </Text>
-  ),
-};