@12-apps/ui 1.0.0

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

@@ -0,0 +1,432 @@
+import { Box, Stack } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
+import React from 'react';
+
+import { Blockquote } from './Blockquote';
+
+const meta: Meta<typeof Blockquote> = {
+  title: 'Typography/Blockquote/Tests',
+  component: Blockquote,
+  parameters: {
+    layout: 'centered',
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['autodocs', 'test', 'component:Blockquote'],
+};
+
+export default meta;
+export type Story = StoryObj<typeof meta>;
+
+// Test 1: Basic Interaction Test
+export const BasicInteraction: Story = {
+  args: {
+    children: 'This is a test blockquote for basic interaction testing.',
+    author: 'Test Author',
+    source: 'Test Source',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Verify blockquote element exists
+    const blockquote = canvas.getByRole('blockquote');
+    await expect(blockquote).toBeInTheDocument();
+
+    // Verify content is displayed
+    await expect(
+      canvas.getByText('This is a test blockquote for basic interaction testing.'),
+    ).toBeInTheDocument();
+
+    // Verify author citation
+    await expect(canvas.getByText('— Test Author')).toBeInTheDocument();
+
+    // Verify source citation
+    await expect(canvas.getByText('Test Source')).toBeInTheDocument();
+  },
+};
+
+// Test 2: State Change Test
+const StateChangeComponent = () => {
+  const [variant, setVariant] = React.useState<'default' | 'bordered' | 'citation'>('default');
+
+  return (
+    <Box>
+      <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
+        <button onClick={() => setVariant('default')}>Default</button>
+        <button onClick={() => setVariant('bordered')}>Bordered</button>
+        <button onClick={() => setVariant('citation')}>Citation</button>
+      </Stack>
+      <Blockquote variant={variant} author="Test Author">
+        This blockquote changes variants dynamically.
+      </Blockquote>
+    </Box>
+  );
+};
+
+export const StateChange: Story = {
+  render: () => <StateChangeComponent />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Test default state
+    const blockquote = canvas.getByRole('blockquote');
+    await expect(blockquote).toBeInTheDocument();
+
+    // Click bordered button
+    const borderedBtn = canvas.getByText('Bordered');
+    await userEvent.click(borderedBtn);
+    await waitFor(() => {
+      expect(blockquote).toBeInTheDocument();
+    });
+
+    // Click citation button
+    const citationBtn = canvas.getByText('Citation');
+    await userEvent.click(citationBtn);
+    await waitFor(() => {
+      expect(blockquote).toBeInTheDocument();
+    });
+
+    // Click default button
+    const defaultBtn = canvas.getByText('Default');
+    await userEvent.click(defaultBtn);
+    await waitFor(() => {
+      expect(blockquote).toBeInTheDocument();
+    });
+  },
+};
+
+// Test 3: Keyboard Navigation Test
+export const KeyboardNavigation: Story = {
+  args: {
+    children: 'Keyboard navigation test blockquote.',
+    author: 'Test Author',
+    tabIndex: 0,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const blockquote = canvas.getByRole('blockquote');
+
+    // Test tab navigation
+    await userEvent.tab();
+
+    // Test keyboard accessibility
+    await expect(blockquote).toBeInTheDocument();
+
+    // Test that content is accessible
+    await expect(canvas.getByText('Keyboard navigation test blockquote.')).toBeInTheDocument();
+  },
+};
+
+// Test 4: Screen Reader Test
+export const ScreenReader: Story = {
+  args: {
+    children: 'This blockquote should be accessible to screen readers.',
+    author: 'Accessibility Author',
+    source: 'WCAG Guidelines',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Verify semantic blockquote element
+    const blockquote = canvas.getByRole('blockquote');
+    await expect(blockquote).toBeInTheDocument();
+
+    // Verify content accessibility
+    await expect(
+      canvas.getByText('This blockquote should be accessible to screen readers.'),
+    ).toBeInTheDocument();
+
+    // Verify citation accessibility
+    await expect(canvas.getByText('— Accessibility Author')).toBeInTheDocument();
+    await expect(canvas.getByText('WCAG Guidelines')).toBeInTheDocument();
+
+    // Verify proper semantic structure
+    expect(blockquote.tagName.toLowerCase()).toBe('blockquote');
+  },
+};
+
+// Test 5: Focus Management Test
+export const FocusManagement: Story = {
+  render: () => (
+    <Stack spacing={2}>
+      <button>Before Blockquote</button>
+      <Blockquote tabIndex={0} author="Focus Test">
+        This blockquote can receive focus for testing.
+      </Blockquote>
+      <button>After Blockquote</button>
+    </Stack>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const beforeBtn = canvas.getByText('Before Blockquote');
+    const blockquote = canvas.getByRole('blockquote');
+    const afterBtn = canvas.getByText('After Blockquote');
+
+    // Start from before button
+    beforeBtn.focus();
+    await expect(beforeBtn).toHaveFocus();
+
+    // Tab to blockquote
+    await userEvent.tab();
+    await expect(blockquote).toHaveFocus();
+
+    // Tab to after button
+    await userEvent.tab();
+    await expect(afterBtn).toHaveFocus();
+  },
+};
+
+// Test 6: Responsive Design Test
+export const ResponsiveDesign: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
+        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
+        desktop: { name: 'Desktop', styles: { width: '1200px', height: '800px' } },
+      },
+    },
+  },
+  args: {
+    children: 'This blockquote should respond to different screen sizes appropriately.',
+    author: 'Responsive Author',
+    source: 'Mobile-First Design',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const blockquote = canvas.getByRole('blockquote');
+    await expect(blockquote).toBeInTheDocument();
+
+    // Verify content is displayed properly
+    await expect(
+      canvas.getByText('This blockquote should respond to different screen sizes appropriately.'),
+    ).toBeInTheDocument();
+
+    // Test that component maintains semantic structure
+    expect(blockquote.tagName.toLowerCase()).toBe('blockquote');
+  },
+};
+
+// Test 7: Theme Variations Test
+export const ThemeVariations: Story = {
+  render: () => (
+    <Stack spacing={3}>
+      <Blockquote variant="bordered" color="primary" author="Primary Theme">
+        Primary color theme test
+      </Blockquote>
+      <Blockquote variant="bordered" color="secondary" author="Secondary Theme">
+        Secondary color theme test
+      </Blockquote>
+      <Blockquote variant="bordered" color="success" author="Success Theme">
+        Success color theme test
+      </Blockquote>
+      <Blockquote variant="bordered" color="warning" author="Warning Theme">
+        Warning color theme test
+      </Blockquote>
+      <Blockquote variant="bordered" color="danger" author="Danger Theme">
+        Danger color theme test
+      </Blockquote>
+      <Blockquote variant="bordered" color="neutral" author="Neutral Theme">
+        Neutral color theme test
+      </Blockquote>
+    </Stack>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Test that all theme variants render
+    await expect(canvas.getByText('Primary color theme test')).toBeInTheDocument();
+    await expect(canvas.getByText('Secondary color theme test')).toBeInTheDocument();
+    await expect(canvas.getByText('Success color theme test')).toBeInTheDocument();
+    await expect(canvas.getByText('Warning color theme test')).toBeInTheDocument();
+    await expect(canvas.getByText('Danger color theme test')).toBeInTheDocument();
+    await expect(canvas.getByText('Neutral color theme test')).toBeInTheDocument();
+
+    // Verify all blockquotes are rendered
+    const blockquotes = canvas.getAllByRole('blockquote');
+    expect(blockquotes).toHaveLength(6);
+  },
+};
+
+// Test 8: Visual States Test
+export const VisualStates: Story = {
+  render: () => (
+    <Stack spacing={3}>
+      <Blockquote variant="default" author="Default Variant">
+        Default variant visual state
+      </Blockquote>
+      <Blockquote variant="bordered" author="Bordered Variant">
+        Bordered variant with quote icon
+      </Blockquote>
+      <Blockquote variant="citation" author="Citation Variant">
+        Citation variant with centered layout
+      </Blockquote>
+      <Blockquote author="Without Source">Blockquote with author but no source</Blockquote>
+      <Blockquote source="Just Source">Blockquote with source but no author</Blockquote>
+      <Blockquote>Blockquote without author or source</Blockquote>
+    </Stack>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Verify all visual states render correctly
+    await expect(canvas.getByText('Default variant visual state')).toBeInTheDocument();
+    await expect(canvas.getByText('Bordered variant with quote icon')).toBeInTheDocument();
+    await expect(canvas.getByText('Citation variant with centered layout')).toBeInTheDocument();
+    await expect(canvas.getByText('Blockquote with author but no source')).toBeInTheDocument();
+    await expect(canvas.getByText('Blockquote with source but no author')).toBeInTheDocument();
+    await expect(canvas.getByText('Blockquote without author or source')).toBeInTheDocument();
+
+    // Verify proper citation display
+    await expect(canvas.getByText('— Default Variant')).toBeInTheDocument();
+    await expect(canvas.getByText('— Without Source')).toBeInTheDocument();
+    await expect(canvas.getByText('Just Source')).toBeInTheDocument();
+
+    // Verify all blockquotes are rendered
+    const blockquotes = canvas.getAllByRole('blockquote');
+    expect(blockquotes).toHaveLength(6);
+  },
+};
+
+// Test 9: Performance Test
+export const Performance: Story = {
+  render: () => (
+    <Stack spacing={1}>
+      {Array.from({ length: 10 }, (_, index) => (
+        <Blockquote key={index} variant="default" author={`Author ${index + 1}`}>
+          Performance test blockquote number {index + 1}. This tests rendering performance with
+          multiple instances.
+        </Blockquote>
+      ))}
+    </Stack>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Verify multiple blockquotes render efficiently', async () => {
+      const blockquotes = canvas.getAllByRole('blockquote');
+      expect(blockquotes).toHaveLength(10);
+
+      // Check that all items rendered
+      for (let i = 1; i <= 10; i++) {
+        await expect(
+          canvas.getByText(
+            `Performance test blockquote number ${i}. This tests rendering performance with multiple instances.`,
+          ),
+        ).toBeInTheDocument();
+        await expect(canvas.getByText(`— Author ${i}`)).toBeInTheDocument();
+      }
+    });
+  },
+};
+
+// Test 10: Edge Cases Test
+export const EdgeCases: Story = {
+  render: () => (
+    <Stack spacing={3}>
+      <Blockquote author="" source="">
+        Empty author and source
+      </Blockquote>
+      <Blockquote author="Very Long Author Name That Should Wrap Properly">
+        Testing with very long author name
+      </Blockquote>
+      <Blockquote source="Very Long Source Name That Should Also Wrap Properly On Multiple Lines">
+        Testing with very long source
+      </Blockquote>
+      <Blockquote author="Unicode Author: 你好世界" source="Unicode Source: مرحبا بالعالم">
+        Unicode content: Lorem ipsum 你好 مرحبا 🌍
+      </Blockquote>
+      <Blockquote>{/* Empty content test */}</Blockquote>
+    </Stack>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Verify edge cases render without errors
+    const blockquotes = canvas.getAllByRole('blockquote');
+    expect(blockquotes).toHaveLength(5);
+
+    // Test long text handling (partial match due to text wrapping/truncation)
+    await expect(canvas.getByText(/Very Long Author Name/)).toBeInTheDocument();
+    await expect(
+      canvas.getByText('Very Long Source Name That Should Also Wrap Properly On Multiple Lines'),
+    ).toBeInTheDocument();
+
+    // Test unicode content
+    await expect(
+      canvas.getByText(/Unicode content: Lorem ipsum 你好 مرحبا 🌍/),
+    ).toBeInTheDocument();
+    await expect(canvas.getByText('— Unicode Author: 你好世界')).toBeInTheDocument();
+    await expect(canvas.getByText('Unicode Source: مرحبا بالعالم')).toBeInTheDocument();
+  },
+};
+
+// Test 11: Integration Test
+export const Integration: Story = {
+  render: () => (
+    <Box sx={{ maxWidth: 600, mx: 'auto' }}>
+      <h2>Article with Integrated Blockquotes</h2>
+      <p>This is a sample article that integrates blockquotes naturally within the content flow.</p>
+
+      <Blockquote variant="default" color="primary" author="Steve Jobs">
+        Innovation distinguishes between a leader and a follower.
+      </Blockquote>
+
+      <p>
+        The above quote demonstrates how blockquotes can be seamlessly integrated into article
+        content. Here's another example with different styling:
+      </p>
+
+      <Blockquote
+        variant="citation"
+        color="secondary"
+        author="Maya Angelou"
+        source="I Know Why the Caged Bird Sings"
+      >
+        There is no greater agony than bearing an untold story inside you.
+      </Blockquote>
+
+      <p>Finally, here's a bordered variant that stands out:</p>
+
+      <Blockquote variant="bordered" color="success" author="Albert Einstein">
+        Imagination is more important than knowledge.
+      </Blockquote>
+
+      <p>
+        These blockquotes demonstrate the component's ability to integrate well with other content.
+      </p>
+    </Box>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Verify article structure
+    await expect(canvas.getByText('Article with Integrated Blockquotes')).toBeInTheDocument();
+
+    // Verify all three blockquotes are present
+    const blockquotes = canvas.getAllByRole('blockquote');
+    expect(blockquotes).toHaveLength(3);
+
+    // Verify specific quotes
+    await expect(
+      canvas.getByText('Innovation distinguishes between a leader and a follower.'),
+    ).toBeInTheDocument();
+    await expect(
+      canvas.getByText('There is no greater agony than bearing an untold story inside you.'),
+    ).toBeInTheDocument();
+    await expect(
+      canvas.getByText('Imagination is more important than knowledge.'),
+    ).toBeInTheDocument();
+
+    // Verify authors
+    await expect(canvas.getByText('— Steve Jobs')).toBeInTheDocument();
+    await expect(canvas.getByText('— Maya Angelou')).toBeInTheDocument();
+    await expect(canvas.getByText('— Albert Einstein')).toBeInTheDocument();
+
+    // Verify source
+    await expect(canvas.getByText('I Know Why the Caged Bird Sings')).toBeInTheDocument();
+  },
+};

package/src/components/typography/Blockquote/Blockquote.tsx

@@ -0,0 +1,166 @@
+import { FormatQuote } from '@mui/icons-material';
+import type { Theme} from '@mui/material';
+import { alpha, Box,Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+import type { BlockquoteProps } from './Blockquote.types';
+
+const getColorFromTheme = (theme: Theme, color: string) => {
+  if (color === 'neutral') {
+    return {
+      main: theme.palette.grey?.[700] || '#616161',
+      light: theme.palette.grey?.[500] || '#9e9e9e',
+      dark: theme.palette.grey?.[800] || '#424242',
+    };
+  }
+
+  const colorMap: Record<string, typeof theme.palette.primary> = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    danger: theme.palette.error,
+  };
+
+  return colorMap[color] || theme.palette.primary;
+};
+
+const StyledBlockquote = styled('blockquote', {
+  shouldForwardProp: (prop) => !['customVariant', 'customColor'].includes(prop as string),
+})<{
+  customVariant?: string;
+  customColor?: string;
+}>(({ theme, customVariant = 'default', customColor = 'neutral' }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+
+  const baseStyles = {
+    margin: '1.5em 0',
+    padding: 0,
+    position: 'relative' as const,
+    fontFamily: theme.typography.body1.fontFamily,
+    fontSize: '1.125rem',
+    lineHeight: 1.6,
+    fontStyle: 'italic',
+    color: theme.palette.text.primary,
+  };
+
+  // Return styles based on variant
+  if (customVariant === 'bordered') {
+    return {
+      ...baseStyles,
+      padding: theme.spacing(3),
+      border: `2px solid ${alpha(colorPalette.main, 0.2)}`,
+      borderRadius: theme.shape.borderRadius * 2,
+      backgroundColor: alpha(colorPalette.main, 0.03),
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light})`,
+        borderRadius: theme.shape.borderRadius * 2,
+        padding: '2px',
+        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+        WebkitMaskComposite: 'exclude',
+        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+        maskComposite: 'exclude',
+      },
+    };
+  }
+
+  if (customVariant === 'citation') {
+    return {
+      ...baseStyles,
+      padding: theme.spacing(2, 3),
+      backgroundColor:
+        theme.palette.mode === 'dark'
+          ? alpha(theme.palette.background.paper, 0.8)
+          : alpha(theme.palette.grey[50], 0.95),
+      backdropFilter: theme.palette.mode === 'dark' ? 'blur(10px)' : 'none',
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      borderRadius: theme.shape.borderRadius * 2,
+      boxShadow: theme.palette.mode === 'dark' ? theme.shadows[4] : 'none',
+      textAlign: 'center' as const,
+    };
+  }
+
+  // Default variant
+  return {
+    ...baseStyles,
+    paddingLeft: theme.spacing(3),
+    borderLeft: `4px solid ${colorPalette.main}`,
+    backgroundColor: alpha(colorPalette.main, 0.05),
+    padding: theme.spacing(2, 3),
+    borderRadius: theme.shape.borderRadius,
+  };
+});
+
+const QuoteIcon = styled(FormatQuote)<{ customColor: string }>(({ theme, customColor }) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  
+  return {
+    position: 'absolute',
+    top: theme.spacing(1),
+    left: theme.spacing(1),
+    fontSize: '2rem',
+    opacity: 0.3,
+    transform: 'rotate(180deg)',
+    color: colorPalette.main,
+  };
+});
+
+const CitationContainer = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  textAlign: 'right',
+  fontStyle: 'normal',
+  opacity: 0.8,
+}));
+
+const AuthorName = styled(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  fontSize: '0.875rem',
+  marginBottom: theme.spacing(0.5),
+}));
+
+const SourceName = styled(Typography)(() => ({
+  fontSize: '0.75rem',
+  opacity: 0.7,
+}));
+
+export const Blockquote = React.forwardRef<globalThis.HTMLQuoteElement, BlockquoteProps>(
+  ({ variant = 'default', author, source, color = 'neutral', children, ...props }, ref) => {
+    const showCitation = author || source;
+    const showIcon = variant === 'bordered' || variant === 'citation';
+
+    return (
+      <StyledBlockquote ref={ref} customVariant={variant} customColor={color} {...props}>
+        {showIcon && <QuoteIcon customColor={color} />}
+
+        <Typography
+          component="div"
+          sx={{
+            fontSize: 'inherit',
+            lineHeight: 'inherit',
+            fontStyle: 'inherit',
+            color: 'inherit',
+            margin: 0,
+          }}
+        >
+          {children}
+        </Typography>
+
+        {showCitation && (
+          <CitationContainer>
+            {author && <AuthorName>— {author}</AuthorName>}
+            {source && <SourceName>{source}</SourceName>}
+          </CitationContainer>
+        )}
+      </StyledBlockquote>
+    );
+  },
+);
+
+Blockquote.displayName = 'Blockquote';

package/src/components/typography/Blockquote/Blockquote.types.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+export type BlockquoteVariant = 'default' | 'bordered' | 'citation';
+
+export interface BlockquoteProps extends React.HTMLAttributes<HTMLElement> {
+  variant?: BlockquoteVariant;
+  author?: string;
+  source?: string;
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  children: React.ReactNode;
+}

package/src/components/typography/Blockquote/index.ts

@@ -0,0 +1,2 @@
+export { Blockquote } from './Blockquote';
+export type { BlockquoteProps } from './Blockquote.types';