@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/custom/Typography/Typography.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import {
+  Typography,
+  Heading,
+  Paragraph,
+  Caption,
+  Label,
+  Overline,
+} from './Typography'
+
+const meta: Meta<typeof Typography> = {
+  title: 'Custom/Typography',
+  component: Typography,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'body1', 'body2', 'subtitle1', 'subtitle2',
+        'caption', 'overline', 'button',
+      ],
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary', 'secondary', 'tertiary', 'disabled',
+        'inverse', 'success', 'error', 'warning', 'info', 'inherit',
+      ],
+    },
+    align: {
+      control: 'select',
+      options: ['left', 'center', 'right', 'justify'],
+    },
+    noWrap: { control: 'boolean' },
+    gutterBottom: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Typography>
+
+export const Default: Story = {
+  args: {
+    variant: 'body1',
+    children: 'This is body1 text',
+  },
+}
+
+export const AllHeadings: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="h2">Heading 2</Typography>
+      <Typography variant="h3">Heading 3</Typography>
+      <Typography variant="h4">Heading 4</Typography>
+      <Typography variant="h5">Heading 5</Typography>
+      <Typography variant="h6">Heading 6</Typography>
+    </View>
+  ),
+}
+
+export const AllBody: Story = {
+  render: () => (
+    <View style={{ gap: 16, maxWidth: 400 }}>
+      <Typography variant="body1">
+        Body 1 - This is the default body text style. It&apos;s used for main content
+        and paragraphs throughout the application.
+      </Typography>
+      <Typography variant="body2">
+        Body 2 - This is a smaller body text style. It&apos;s useful for secondary
+        content or when you need more compact text.
+      </Typography>
+      <Typography variant="subtitle1">
+        Subtitle 1 - Semi-bold text for emphasis
+      </Typography>
+      <Typography variant="subtitle2">
+        Subtitle 2 - Smaller semi-bold text
+      </Typography>
+    </View>
+  ),
+}
+
+export const AllUtility: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Typography variant="caption">Caption - Small helper text</Typography>
+      <Typography variant="overline">OVERLINE - SECTION LABEL</Typography>
+      <Typography variant="button">Button Text</Typography>
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View style={{ gap: 8 }}>
+      <Typography color="primary">Primary text color</Typography>
+      <Typography color="secondary">Secondary text color</Typography>
+      <Typography color="tertiary">Tertiary text color</Typography>
+      <Typography color="disabled">Disabled text color</Typography>
+      <Typography color="success">Success text color</Typography>
+      <Typography color="error">Error text color</Typography>
+      <Typography color="warning">Warning text color</Typography>
+      <Typography color="info">Info text color</Typography>
+    </View>
+  ),
+}
+
+export const HeadingComponent: Story = {
+  render: () => (
+    <View style={{ gap: 8 }}>
+      <Heading level={1}>Heading Level 1</Heading>
+      <Heading level={2}>Heading Level 2</Heading>
+      <Heading level={3}>Heading Level 3</Heading>
+    </View>
+  ),
+}
+
+export const ParagraphComponent: Story = {
+  render: () => (
+    <View style={{ gap: 16, maxWidth: 400 }}>
+      <Paragraph>
+        This is a regular paragraph using the default body1 variant.
+        It&apos;s great for main content.
+      </Paragraph>
+      <Paragraph small>
+        This is a small paragraph using the body2 variant.
+        It&apos;s useful for secondary content.
+      </Paragraph>
+    </View>
+  ),
+}
+
+export const UtilityComponents: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Overline>Section Title</Overline>
+      <Label>Form Label</Label>
+      <Caption>Helper text or caption</Caption>
+    </View>
+  ),
+}
+
+export const WithTruncation: Story = {
+  render: () => (
+    <View style={{ width: 200 }}>
+      <Typography noWrap>
+        This is a very long text that will be truncated with an ellipsis
+      </Typography>
+    </View>
+  ),
+}

package/src/components/custom/Typography/Typography.test.tsx

@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typography'
+
+describe('Typography', () => {
+  it('renders children correctly', () => {
+    render(<Typography>Hello World</Typography>)
+    expect(screen.getByText('Hello World')).toBeInTheDocument()
+  })
+
+  it('renders different variants', () => {
+    const { rerender } = render(<Typography variant="h1">Heading</Typography>)
+    expect(screen.getByRole('heading')).toBeInTheDocument()
+
+    rerender(<Typography variant="body1">Body text</Typography>)
+    expect(screen.getByText('Body text')).toBeInTheDocument()
+  })
+
+  it('applies color styles', () => {
+    render(<Typography color="secondary">Secondary text</Typography>)
+    expect(screen.getByText('Secondary text')).toBeInTheDocument()
+  })
+
+  it('applies text alignment', () => {
+    render(<Typography align="center">Centered text</Typography>)
+    expect(screen.getByText('Centered text')).toBeInTheDocument()
+  })
+
+  it('applies noWrap truncation', () => {
+    render(<Typography noWrap>Long text that should truncate</Typography>)
+    const text = screen.getByText('Long text that should truncate')
+    // On web, noWrap renders as CSS truncation styles rather than numberOfLines attribute
+    expect(text).toBeInTheDocument()
+  })
+
+  describe('Heading component', () => {
+    it('renders correct heading level', () => {
+      const { rerender } = render(<Heading level={1}>H1</Heading>)
+      expect(screen.getByRole('heading')).toBeInTheDocument()
+
+      rerender(<Heading level={3}>H3</Heading>)
+      expect(screen.getByRole('heading')).toBeInTheDocument()
+    })
+  })
+
+  describe('Paragraph component', () => {
+    it('renders body1 by default', () => {
+      render(<Paragraph>Regular paragraph</Paragraph>)
+      expect(screen.getByText('Regular paragraph')).toBeInTheDocument()
+    })
+
+    it('renders body2 when small prop is true', () => {
+      render(<Paragraph small>Small paragraph</Paragraph>)
+      expect(screen.getByText('Small paragraph')).toBeInTheDocument()
+    })
+  })
+
+  describe('Caption component', () => {
+    it('renders with caption variant', () => {
+      render(<Caption>Caption text</Caption>)
+      expect(screen.getByText('Caption text')).toBeInTheDocument()
+    })
+  })
+
+  describe('Label component', () => {
+    it('renders with subtitle2 variant', () => {
+      render(<Label>Label text</Label>)
+      expect(screen.getByText('Label text')).toBeInTheDocument()
+    })
+  })
+
+  describe('Overline component', () => {
+    it('renders with overline variant', () => {
+      render(<Overline>OVERLINE TEXT</Overline>)
+      expect(screen.getByText('OVERLINE TEXT')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('headings have no accessibility violations', async () => {
+      const { container } = render(
+        <div>
+          <Typography variant="h1">Main Title</Typography>
+          <Typography variant="h2">Section Title</Typography>
+        </div>
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('body text has no accessibility violations', async () => {
+      const { container } = render(
+        <Typography variant="body1">Body text content</Typography>
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('headings have correct accessibility role', () => {
+      render(<Typography variant="h2">Section Heading</Typography>)
+      expect(screen.getByRole('heading')).toBeInTheDocument()
+    })
+  })
+})

package/src/components/custom/Typography/Typography.tsx

@@ -0,0 +1,218 @@
+import React from 'react'
+import { Text, type TextProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type TypographyVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'body1'
+  | 'body2'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'caption'
+  | 'overline'
+  | 'button'
+
+export type TypographyColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'disabled'
+  | 'inverse'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'inherit'
+
+export type TypographyAlign = 'left' | 'center' | 'right' | 'justify'
+
+export type TypographyMarginBottom = 'none' | 'sm' | 'md' | 'lg'
+
+export interface TypographyProps extends TextProps {
+  /** Typography variant */
+  variant?: TypographyVariant
+  /** Text color */
+  color?: TypographyColor
+  /** Text alignment */
+  align?: TypographyAlign
+  /** Whether text should truncate with ellipsis */
+  truncate?: boolean
+  /** @deprecated Use truncate instead */
+  noWrap?: boolean
+  /** Margin bottom spacing */
+  marginBottom?: TypographyMarginBottom
+  /** @deprecated Use marginBottom instead */
+  gutterBottom?: boolean
+  /** Maximum number of lines before truncating */
+  maxLines?: number
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+// Variant styles matching the existing theme
+const variantStyles: Record<TypographyVariant, string> = {
+  h1: 'font-heading text-5xl font-bold leading-tight',
+  h2: 'font-heading text-4xl font-bold leading-tight',
+  h3: 'font-heading text-3xl font-bold leading-tight',
+  h4: 'font-heading text-2xl font-bold leading-tight',
+  h5: 'font-heading text-xl font-semibold leading-tight',
+  h6: 'font-heading text-lg font-semibold leading-tight',
+  body1: 'font-body text-base font-normal leading-normal',
+  body2: 'font-body text-sm font-normal leading-normal',
+  subtitle1: 'font-body text-base font-medium leading-relaxed',
+  subtitle2: 'font-body text-sm font-medium leading-normal',
+  caption: 'font-body text-xs font-normal leading-loose',
+  overline: 'font-body text-xs font-semibold uppercase tracking-widest leading-relaxed',
+  button: 'font-sans text-sm font-semibold leading-relaxed',
+}
+
+const colorStyles: Record<TypographyColor, string> = {
+  primary: 'text-text-primary',
+  secondary: 'text-text-secondary',
+  tertiary: 'text-text-tertiary',
+  disabled: 'text-text-disabled',
+  inverse: 'text-text-inverse',
+  success: 'text-status-success',
+  error: 'text-status-error',
+  warning: 'text-status-warning',
+  info: 'text-status-info',
+  inherit: '', // No color class, inherit from parent
+}
+
+const alignStyles: Record<TypographyAlign, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+  justify: 'text-justify',
+}
+
+// Heading variants for accessibility role
+const headingVariants: TypographyVariant[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+
+const marginBottomStyles: Record<TypographyMarginBottom, string> = {
+  none: '',
+  sm: 'mb-1',
+  md: 'mb-2',
+  lg: 'mb-4',
+}
+
+/**
+ * Typography component for consistent text styling.
+ *
+ * @example
+ * <Typography variant="h1">Page Title</Typography>
+ * <Typography variant="body1" color="secondary">Body text content</Typography>
+ * <Typography variant="caption" marginBottom="md">Small caption text</Typography>
+ * <Typography truncate maxLines={2}>Long text that will truncate...</Typography>
+ */
+export function Typography({
+  variant = 'body1',
+  color = 'primary',
+  align,
+  truncate = false,
+  noWrap = false, // deprecated, kept for backward compatibility
+  marginBottom,
+  gutterBottom = false, // deprecated, kept for backward compatibility
+  maxLines,
+  className,
+  children,
+  ...props
+}: TypographyProps) {
+  const isHeading = headingVariants.includes(variant)
+  const shouldTruncate = truncate || noWrap
+  const mb = marginBottom || (gutterBottom ? 'md' : 'none')
+
+  // Determine number of lines
+  let numLines: number | undefined
+  if (maxLines) {
+    numLines = maxLines
+  } else if (shouldTruncate) {
+    numLines = 1
+  }
+
+  return (
+    <Text
+      accessibilityRole={isHeading ? 'header' : 'text'}
+      numberOfLines={numLines}
+      className={cn(
+        variantStyles[variant],
+        color !== 'inherit' && colorStyles[color],
+        align && alignStyles[align],
+        shouldTruncate && 'truncate',
+        marginBottomStyles[mb],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Text>
+  )
+}
+
+// Convenience components for common typography patterns
+
+export interface HeadingProps extends Omit<TypographyProps, 'variant'> {
+  /** Heading level (1-6) */
+  level?: 1 | 2 | 3 | 4 | 5 | 6
+}
+
+/**
+ * Heading component - convenience wrapper for Typography with heading variants.
+ *
+ * @example
+ * <Heading level={1}>Page Title</Heading>
+ * <Heading level={2} gutterBottom>Section Title</Heading>
+ */
+export function Heading({ level = 1, ...props }: HeadingProps) {
+  const variant = `h${level}` as TypographyVariant
+  return <Typography variant={variant} {...props} />
+}
+
+export interface ParagraphProps extends Omit<TypographyProps, 'variant'> {
+  /** Use smaller body2 variant */
+  small?: boolean
+}
+
+/**
+ * Paragraph component - convenience wrapper for body text.
+ *
+ * @example
+ * <Paragraph>This is body text content.</Paragraph>
+ * <Paragraph small>This is smaller body text.</Paragraph>
+ */
+export function Paragraph({ small = false, ...props }: ParagraphProps) {
+  return <Typography variant={small ? 'body2' : 'body1'} {...props} />
+}
+
+export interface CaptionProps extends Omit<TypographyProps, 'variant'> {}
+
+/**
+ * Caption component - for small helper/secondary text.
+ */
+export function Caption(props: CaptionProps) {
+  return <Typography variant="caption" color="secondary" {...props} />
+}
+
+export interface LabelProps extends Omit<TypographyProps, 'variant'> {}
+
+/**
+ * Label component - for form labels and similar.
+ */
+export function Label(props: LabelProps) {
+  return <Typography variant="subtitle2" {...props} />
+}
+
+export interface OverlineProps extends Omit<TypographyProps, 'variant'> {}
+
+/**
+ * Overline component - for section labels, categories.
+ */
+export function Overline(props: OverlineProps) {
+  return <Typography variant="overline" color="secondary" {...props} />
+}

package/src/components/custom/Typography/index.ts

@@ -0,0 +1,19 @@
+export {
+  Typography,
+  Heading,
+  Paragraph,
+  Caption,
+  Label,
+  Overline,
+} from './Typography'
+export type {
+  TypographyProps,
+  TypographyVariant,
+  TypographyColor,
+  TypographyAlign,
+  HeadingProps,
+  ParagraphProps,
+  CaptionProps,
+  LabelProps,
+  OverlineProps,
+} from './Typography'

package/src/components/custom/index.ts

@@ -0,0 +1,8 @@
+// Custom components
+export * from './Typography'
+export * from './Sidebar'
+export * from './Table'
+export * from './EmptyState'
+export * from './stepper'
+export * from './DateTime'
+export * from './Metric'