[Task] Implement Typography

[soroushm]

Task Description ✏️

Implement the Typography component as part of the design system epic #40.
Typography will provide a consistent way to render text with theme-based styles, supporting text alignment, variants, truncation, and spacing. It will consume styled-system props for spacing, layout, color, typography, flexbox, border, and position.

Acceptance Criteria ✅

• Typography component implemented using styled('p') or styled(View) with token-based styling.
• Supports variant prop for text style (body1, body2, button, caption, h1–h6, subtitle1, subtitle2, overline, inherit).
• Supports variantMapping from theme to map variants to specific HTML elements.
• Supports align prop (left, right, center, justify, inherit) for text alignment.
• Supports color prop using theme tokens (primary, secondary, success, error, info, warning, textPrimary, textSecondary, textDisabled).
• Supports gutterBottom prop to add bottom margin.
• Supports noWrap prop to truncate overflowing text with ellipsis.
• Inherits styled-system props for space, layout, color, typography, flexbox, border, and position.
• Unit tests verify correct rendering of children, variant styles, alignment, noWrap behavior, and gutterBottom spacing.
• Storybook stories demonstrate different variants, colors, alignment, and noWrap behavior.
• No raw CSS values — all styles derived from theme tokens.
• Code passes linting, typing, and CI checks.

Dependencies 🔗

No response

Definition of Ready (DoR) 📋

• Task is independent and scoped to the Typography component.
• Theme tokens for typography, spacing, and colors are available.
• Props to be supported by Typography are agreed upon (variant, variantMapping, align, color, gutterBottom, noWrap, and styled-system props).

Definition of Done (DoD) 🏁

• Typography component implemented with variant and color support.
• align, gutterBottom, and noWrap props work correctly.
• Unit tests cover children, variant styles, alignment, gutterBottom, and noWrap.
• Storybook stories demonstrate all variants, colors, alignment, and truncation options.
• Code reviewed, linted, typed, and passes CI checks.
• Documentation updated in Storybook for Typography usage.
• Component is ready for reuse across the design system.

Additional Notes or Resources 📎

const variantMapping: Record<string, keyof JSX.IntrinsicElements> = {
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6',
  subtitle1: 'h6',
  subtitle2: 'h6',
  body1: 'p',
  body2: 'p',
  inherit: 'p',
  overline: 'span',
  button: 'span',
  caption: 'span',
}