@12-apps/ui 1.4.1 → 1.5.1

package/src/components/typography/Paragraph/Paragraph.stories.tsx

@@ -1,280 +0,0 @@
-import { Box,Paper, Stack } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { Paragraph } from './Paragraph';
-
-const meta: Meta<typeof Paragraph> = {
-  title: 'Typography/Paragraph',
-  component: Paragraph,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'A semantic paragraph component with multiple visual variants for different content contexts. Features lead text styling, muted text, small text, and configurable sizing options.',
-      },
-    },
-  },
-  tags: ['autodocs', 'component:Paragraph'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['default', 'lead', 'muted', 'small'],
-      description: 'Paragraph style variant',
-    },
-    color: {
-      control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'neutral'],
-      description: 'Theme color',
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Size variant',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const sampleText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
-
-const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`;
-
-export const Default: Story = {
-  args: {
-    children: sampleText,
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Default Paragraph</h4>
-          <Paragraph variant="default">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Lead Paragraph</h4>
-          <Paragraph variant="lead">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Small Paragraph</h4>
-          <Paragraph variant="small">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Muted Paragraph</h4>
-          <Paragraph variant="muted">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const AllSizes: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Extra Small (xs)</h4>
-          <Paragraph size="xs">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Small (sm)</h4>
-          <Paragraph size="sm">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Medium (md) - Default</h4>
-          <Paragraph size="md">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Large (lg)</h4>
-          <Paragraph size="lg">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Extra Large (xl)</h4>
-          <Paragraph size="xl">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const AllStates: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Neutral (default)</h4>
-          <Paragraph color="neutral">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Primary Color</h4>
-          <Paragraph color="primary">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Secondary Color</h4>
-          <Paragraph color="secondary">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Success Color</h4>
-          <Paragraph color="success">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Warning Color</h4>
-          <Paragraph color="warning">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Danger Color</h4>
-          <Paragraph color="danger">{sampleText}</Paragraph>
-        </Paper>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const InteractiveStates: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Paper sx={{ p: 3 }}>
-          <h3>Article Example</h3>
-          <Paragraph variant="lead" size="lg" color="primary">
-            This is a lead paragraph with large size and primary color. It's designed to grab
-            attention and introduce the main content.
-          </Paragraph>
-
-          <Paragraph>
-            This is a regular paragraph that follows the lead paragraph. It uses default styling for
-            comfortable reading.
-          </Paragraph>
-
-          <Paragraph variant="small" color="secondary">
-            This is a small paragraph with secondary color, often used for additional information or
-            footnotes.
-          </Paragraph>
-
-          <Paragraph variant="muted">
-            This is a muted paragraph that provides supplementary information without competing for
-            attention.
-          </Paragraph>
-        </Paper>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const Responsive: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Paper sx={{ p: 2 }}>
-          <h4>Responsive Behavior</h4>
-          <Paragraph
-            sx={{
-              fontSize: { xs: '14px', sm: '16px', md: '18px' },
-              lineHeight: { xs: 1.5, md: 1.7 },
-            }}
-          >
-            This paragraph adjusts its font size and line height based on screen size for optimal
-            readability across devices.
-          </Paragraph>
-        </Paper>
-      </Box>
-    </Stack>
-  ),
-};
-
-// Additional helpful stories
-export const LongContent: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Paper sx={{ p: 3 }}>
-          <h4>Long Content Handling</h4>
-          <Paragraph variant="lead">{longText}</Paragraph>
-
-          <Paragraph>{longText}</Paragraph>
-
-          <Paragraph variant="small">{longText}</Paragraph>
-        </Paper>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const WithCustomStyling: Story = {
-  render: () => (
-    <Stack spacing={3}>
-      <Box>
-        <Paper sx={{ p: 3 }}>
-          <h4>Custom Styling Examples</h4>
-          <Paragraph
-            variant="lead"
-            sx={{
-              textAlign: 'center',
-              background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-              WebkitBackgroundClip: 'text',
-              WebkitTextFillColor: 'transparent',
-              backgroundClip: 'text',
-            }}
-          >
-            This paragraph demonstrates custom styling with gradient text and center alignment.
-          </Paragraph>
-
-          <Paragraph
-            sx={{
-              border: '1px solid',
-              borderColor: 'divider',
-              borderRadius: 2,
-              p: 2,
-              backgroundColor: 'grey.50',
-            }}
-          >
-            This paragraph has a custom border and background, making it stand out from the rest of
-            the content.
-          </Paragraph>
-        </Paper>
-      </Box>
-    </Stack>
-  ),
-};

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

@@ -1,231 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
-
-import { Paragraph } from './Paragraph';
-
-const meta: Meta<typeof Paragraph> = {
-  title: 'Typography/Paragraph/Tests',
-  component: Paragraph,
-  parameters: { layout: 'centered', chromatic: { disableSnapshot: false } },
-  tags: ['autodocs', 'test', 'component:Paragraph'],
-};
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-const sampleText = 'This is a sample paragraph text for testing purposes.';
-
-export const BasicInteraction: Story = {
-  args: {
-    children: sampleText,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const paragraph = canvas.getByText(sampleText);
-    expect(paragraph).toBeInTheDocument();
-    expect(paragraph.tagName).toBe('P');
-  },
-};
-
-export const KeyboardNavigation: Story = {
-  args: {
-    children: sampleText,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const paragraph = canvas.getByText(sampleText);
-
-    // Paragraph should not be focusable by default
-    await userEvent.click(paragraph);
-    await waitFor(() => expect(paragraph).not.toHaveFocus());
-  },
-};
-
-export const ScreenReader: Story = {
-  args: {
-    children: sampleText,
-    'aria-label': 'Sample paragraph',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const paragraph = canvas.getByText(sampleText);
-    expect(paragraph).toHaveAttribute('aria-label', 'Sample paragraph');
-    expect(paragraph).toBeInTheDocument();
-  },
-};
-
-export const FocusManagement: Story = {
-  args: {
-    children: sampleText,
-    tabIndex: 0,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const paragraph = canvas.getByText(sampleText);
-
-    // When tabIndex is set, paragraph should be focusable
-    await userEvent.click(paragraph);
-    await waitFor(() => expect(paragraph).toHaveFocus());
-  },
-};
-
-export const ResponsiveDesign: Story = {
-  args: {
-    children: sampleText,
-    size: 'md',
-  },
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
-        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
-        desktop: { name: 'Desktop', styles: { width: '1024px', height: '768px' } },
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const paragraph = canvas.getByText(sampleText);
-    expect(paragraph).toBeInTheDocument();
-
-    // Test that paragraph renders properly at different screen sizes
-    const computedStyle = window.getComputedStyle(paragraph);
-    expect(computedStyle.fontSize).toBeTruthy();
-  },
-};
-
-export const ThemeVariations: Story = {
-  args: {
-    children: sampleText,
-    color: 'primary',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const paragraph = canvas.getByText(sampleText);
-    expect(paragraph).toBeInTheDocument();
-
-    // Test that paragraph has the correct color styling
-    const computedStyle = window.getComputedStyle(paragraph);
-    expect(computedStyle.color).toBeTruthy();
-  },
-};
-
-export const VisualStates: Story = {
-  render: () => (
-    <div>
-      <Paragraph variant="default">{sampleText} - Default</Paragraph>
-      <Paragraph variant="lead">{sampleText} - Lead</Paragraph>
-      <Paragraph variant="small">{sampleText} - Small</Paragraph>
-      <Paragraph variant="muted">{sampleText} - Muted</Paragraph>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const defaultParagraph = canvas.getByText(`${sampleText} - Default`);
-    const leadParagraph = canvas.getByText(`${sampleText} - Lead`);
-    const smallParagraph = canvas.getByText(`${sampleText} - Small`);
-    const mutedParagraph = canvas.getByText(`${sampleText} - Muted`);
-
-    expect(defaultParagraph).toBeInTheDocument();
-    expect(leadParagraph).toBeInTheDocument();
-    expect(smallParagraph).toBeInTheDocument();
-    expect(mutedParagraph).toBeInTheDocument();
-
-    // Test that different variants have different styling
-    const defaultStyle = window.getComputedStyle(defaultParagraph);
-    const leadStyle = window.getComputedStyle(leadParagraph);
-
-    expect(defaultStyle.fontSize).not.toBe(leadStyle.fontSize);
-  },
-};
-
-export const Performance: Story = {
-  args: {
-    children: sampleText,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const paragraph = canvas.getByText(sampleText);
-    expect(paragraph).toBeInTheDocument();
-
-  },
-};
-
-export const EdgeCases: Story = {
-  render: () => (
-    <div>
-      <Paragraph>{''}</Paragraph>
-      <Paragraph>
-        {
-          'Very long text that should wrap properly and maintain readability even when it extends beyond the normal width of the container and continues for multiple lines to test text wrapping behavior.'
-        }
-      </Paragraph>
-      <Paragraph>{'Special chars: !@#$%^&*()_+-=[]{}|;":,./<>?'}</Paragraph>
-      <Paragraph>{'Numbers: 123456789'}</Paragraph>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Test empty content
-    const paragraphs = canvas.getAllByRole('generic', { hidden: true }) || [];
-    expect(paragraphs.length).toBeGreaterThanOrEqual(1);
-
-    // Test special characters
-    const specialCharsText = canvas.getByText(/Special chars:/);
-    expect(specialCharsText).toBeInTheDocument();
-
-    // Test numbers
-    const numbersText = canvas.getByText(/Numbers:/);
-    expect(numbersText).toBeInTheDocument();
-  },
-};
-
-export const Integration: Story = {
-  render: () => (
-    <div>
-      <h3>Article with Multiple Paragraphs</h3>
-      <Paragraph variant="lead" color="primary">
-        This is a lead paragraph that introduces the content.
-      </Paragraph>
-      <Paragraph>This is a regular paragraph that provides the main content.</Paragraph>
-      <Paragraph variant="small" color="secondary">
-        This is a small paragraph with additional information.
-      </Paragraph>
-      <Paragraph variant="muted">This is a muted paragraph for supplementary content.</Paragraph>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const heading = canvas.getByText('Article with Multiple Paragraphs');
-    const leadParagraph = canvas.getByText('This is a lead paragraph that introduces the content.');
-    const regularParagraph = canvas.getByText(
-      'This is a regular paragraph that provides the main content.',
-    );
-    const smallParagraph = canvas.getByText(
-      'This is a small paragraph with additional information.',
-    );
-    const mutedParagraph = canvas.getByText('This is a muted paragraph for supplementary content.');
-
-    expect(heading).toBeInTheDocument();
-    expect(leadParagraph).toBeInTheDocument();
-    expect(regularParagraph).toBeInTheDocument();
-    expect(smallParagraph).toBeInTheDocument();
-    expect(mutedParagraph).toBeInTheDocument();
-
-    // Test that all paragraphs render with proper spacing
-    const allParagraphs = [leadParagraph, regularParagraph, smallParagraph, mutedParagraph];
-    allParagraphs.forEach((p) => {
-      const computedStyle = window.getComputedStyle(p);
-      expect(computedStyle.marginBottom).toBeTruthy();
-    });
-  },
-};