@titan-design/react-ui 0.2.5 → 0.2.7

package/src/components/custom/Workout/Sparkline.tsx

@@ -0,0 +1,188 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import React from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+const BRAND_PRIMARY = '#FF7900'
+
+export interface SparklineProps extends ViewProps {
+  data: number[]
+  width?: number
+  height?: number
+  color?: string
+  showDots?: boolean
+  referenceLines?: Array<{
+    value: number
+    color: string
+    dashed?: boolean
+    label?: string
+  }>
+  highlightLast?: boolean
+  className?: string
+}
+
+function normalizeData(
+  data: number[],
+  height: number,
+): number[] {
+  if (data.length === 0) return []
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+  return data.map((v) => height - ((v - min) / range) * height)
+}
+
+function normalizeValue(
+  value: number,
+  data: number[],
+  height: number,
+): number {
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+  return height - ((value - min) / range) * height
+}
+
+export function Sparkline({
+  data,
+  width = 80,
+  height = 30,
+  color,
+  showDots = false,
+  referenceLines,
+  highlightLast = false,
+  className,
+  ...props
+}: SparklineProps) {
+  if (data.length === 0) {
+    return (
+      <View
+        style={{ width, height }}
+        className={className}
+        testID="sparkline-empty"
+        accessibilityLabel="Sparkline chart, no data"
+        {...props}
+      />
+    )
+  }
+
+  const resolvedColor = color ?? BRAND_PRIMARY
+  const normalized = normalizeData(data, height)
+  const stepX = data.length > 1 ? width / (data.length - 1) : 0
+
+  const dotSize = 3
+  const highlightSize = 6
+
+  return (
+    <View
+      style={{ width, height, position: 'relative' }}
+      className={cn(className)}
+      accessibilityRole="image"
+      accessibilityLabel={`Sparkline chart with ${data.length} data points`}
+      testID="sparkline"
+      {...props}
+    >
+      {referenceLines?.map((line, i) => {
+        const y = normalizeValue(line.value, data, height)
+        return (
+          <View
+            key={`ref-${i}`}
+            style={[
+              {
+                position: 'absolute',
+                top: y,
+                left: 0,
+                right: 0,
+                opacity: 0.6,
+              },
+              line.dashed
+                ? {
+                    height: 0,
+                    borderStyle: 'dashed',
+                    borderTopWidth: 1,
+                    borderTopColor: line.color,
+                  }
+                : {
+                    height: 1,
+                    backgroundColor: line.color,
+                  },
+            ]}
+            accessibilityElementsHidden
+            testID={`sparkline-reference-${i}`}
+          >
+            {line.label && (
+              <Text
+                style={{
+                  position: 'absolute',
+                  right: 0,
+                  top: -10,
+                  fontSize: 7,
+                  color: line.color,
+                  opacity: 1,
+                }}
+                testID={`sparkline-reference-label-${i}`}
+              >
+                {line.label}
+              </Text>
+            )}
+          </View>
+        )
+      })}
+
+      {/* Line segments connecting data points */}
+      {normalized.map((y, i) => {
+        if (i === 0) return null
+        const prevY = normalized[i - 1]
+        const x1 = (i - 1) * stepX
+        const x2 = i * stepX
+        const dx = x2 - x1
+        const dy = y - prevY
+        const length = Math.sqrt(dx * dx + dy * dy)
+        const angle = Math.atan2(dy, dx) * (180 / Math.PI)
+        return (
+          <View
+            key={`line-${i}`}
+            style={{
+              position: 'absolute',
+              left: x1,
+              top: prevY,
+              width: length,
+              height: 1.5,
+              backgroundColor: resolvedColor,
+              transformOrigin: '0 0',
+              transform: [{ rotate: `${angle}deg` }],
+            }}
+            accessibilityElementsHidden
+            testID={`sparkline-segment-${i}`}
+          />
+        )
+      })}
+
+      {/* Data point dots */}
+      {(showDots || highlightLast) &&
+        normalized.map((y, i) => {
+          const isLast = i === data.length - 1
+          const shouldShow = showDots || (highlightLast && isLast)
+          if (!shouldShow) return null
+
+          const size = highlightLast && isLast ? highlightSize : dotSize
+          return (
+            <View
+              key={`dot-${i}`}
+              style={{
+                position: 'absolute',
+                left: i * stepX - size / 2,
+                top: y - size / 2,
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor: resolvedColor,
+              }}
+              accessibilityElementsHidden
+              testID={`sparkline-dot-${i}`}
+            />
+          )
+        })}
+    </View>
+  )
+}

package/src/components/custom/Workout/StatusDot.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { StatusDot } from './StatusDot'
+
+const meta: Meta<typeof StatusDot> = {
+  title: 'Custom/Workout/StatusDot',
+  component: StatusDot,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['success', 'warning', 'error', 'neutral', 'on-track', 'deviation', 'future'],
+      description: 'Status variant',
+    },
+    icon: {
+      control: 'select',
+      options: [undefined, 'check', 'exclamation', 'dash'],
+      description: 'Icon character inside the dot',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'Dot size',
+    },
+    glow: {
+      control: 'boolean',
+      description: 'Subtle glow effect in variant color',
+    },
+    label: {
+      control: 'text',
+      description: 'Optional label text next to dot',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StatusDot>
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    size: 'md',
+    icon: 'check',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    size: 'md',
+    icon: 'exclamation',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    size: 'md',
+    icon: 'dash',
+  },
+}
+
+export const Neutral: Story = {
+  args: {
+    variant: 'neutral',
+    size: 'sm',
+  },
+}
+
+export const OnTrack: Story = {
+  args: {
+    variant: 'on-track',
+    size: 'md',
+    icon: 'check',
+  },
+}
+
+export const Deviation: Story = {
+  args: {
+    variant: 'deviation',
+    size: 'md',
+    icon: 'exclamation',
+  },
+}
+
+export const Future: Story = {
+  args: {
+    variant: 'future',
+    size: 'md',
+  },
+}
+
+export const WithGlow: Story = {
+  args: {
+    variant: 'success',
+    size: 'md',
+    icon: 'check',
+    glow: true,
+  },
+}
+
+export const WithLabel: Story = {
+  args: {
+    variant: 'success',
+    size: 'md',
+    icon: 'check',
+    label: 'On track',
+  },
+}
+
+export const SmallWithLabel: Story = {
+  args: {
+    variant: 'warning',
+    size: 'sm',
+    label: 'Needs attention',
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
+        <StatusDot variant="success" size="sm" />
+        <StatusDot variant="warning" size="sm" />
+        <StatusDot variant="error" size="sm" />
+        <StatusDot variant="neutral" size="sm" />
+        <StatusDot variant="on-track" size="sm" />
+        <StatusDot variant="deviation" size="sm" />
+        <StatusDot variant="future" size="sm" />
+      </View>
+      <View style={{ flexDirection: 'row', gap: 16, alignItems: 'center' }}>
+        <StatusDot variant="success" size="md" icon="check" />
+        <StatusDot variant="warning" size="md" icon="exclamation" />
+        <StatusDot variant="error" size="md" icon="dash" />
+        <StatusDot variant="neutral" size="md" />
+        <StatusDot variant="on-track" size="md" icon="check" />
+        <StatusDot variant="deviation" size="md" icon="exclamation" />
+        <StatusDot variant="future" size="md" />
+      </View>
+      <View style={{ gap: 8 }}>
+        <StatusDot variant="success" size="md" icon="check" label="On track" />
+        <StatusDot variant="on-track" size="md" icon="check" label="On track (ring)" glow />
+        <StatusDot variant="deviation" size="md" icon="exclamation" label="Deviation" glow />
+        <StatusDot variant="future" size="sm" label="Planned" />
+        <StatusDot variant="error" size="md" icon="dash" label="Failed" />
+        <StatusDot variant="neutral" size="sm" label="Planned" />
+      </View>
+    </View>
+  ),
+}

package/src/components/custom/Workout/StatusDot.test.tsx

@@ -0,0 +1,165 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { StatusDot } from './StatusDot'
+
+describe('StatusDot', () => {
+  it('renders a dot', () => {
+    render(<StatusDot variant="success" />)
+    expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+  })
+
+  it('shows icon at md size', () => {
+    render(<StatusDot variant="success" size="md" icon="check" />)
+    expect(screen.getByText('\u2713')).toBeInTheDocument()
+  })
+
+  it('does not show icon at sm size', () => {
+    render(<StatusDot variant="success" size="sm" icon="check" />)
+    expect(screen.queryByText('\u2713')).not.toBeInTheDocument()
+  })
+
+  it('renders exclamation icon', () => {
+    render(<StatusDot variant="warning" size="md" icon="exclamation" />)
+    expect(screen.getByText('!')).toBeInTheDocument()
+  })
+
+  it('renders dash icon', () => {
+    render(<StatusDot variant="error" size="md" icon="dash" />)
+    expect(screen.getByText('\u2014')).toBeInTheDocument()
+  })
+
+  it('renders label text when provided', () => {
+    render(<StatusDot variant="success" label="On track" />)
+    expect(screen.getByText('On track')).toBeInTheDocument()
+  })
+
+  it('does not render label when omitted', () => {
+    render(<StatusDot variant="success" />)
+    expect(screen.queryByText('On track')).not.toBeInTheDocument()
+  })
+
+  it('defaults to sm size', () => {
+    render(<StatusDot variant="neutral" />)
+    expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+  })
+
+  it('sets accessibility label with variant', () => {
+    render(<StatusDot variant="warning" />)
+    expect(screen.getByLabelText('warning status')).toBeInTheDocument()
+  })
+
+  describe('solid variants', () => {
+    it('renders all solid variant types without error', () => {
+      const { rerender } = render(<StatusDot variant="success" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+
+      rerender(<StatusDot variant="warning" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+
+      rerender(<StatusDot variant="error" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+
+      rerender(<StatusDot variant="neutral" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+    })
+  })
+
+  describe('ring variants', () => {
+    it('renders on-track variant', () => {
+      render(<StatusDot variant="on-track" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+      expect(screen.getByLabelText('on-track status')).toBeInTheDocument()
+    })
+
+    it('renders deviation variant', () => {
+      render(<StatusDot variant="deviation" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+      expect(screen.getByLabelText('deviation status')).toBeInTheDocument()
+    })
+
+    it('renders future variant', () => {
+      render(<StatusDot variant="future" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+      expect(screen.getByLabelText('future status')).toBeInTheDocument()
+    })
+
+    it('renders the future variant with a 1px dashed border', () => {
+      render(<StatusDot variant="future" />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.borderTopStyle).toBe('dashed')
+      expect(dot.style.borderTopWidth).toBe('1px')
+    })
+  })
+
+  describe('md size', () => {
+    it('renders at md size without error', () => {
+      render(<StatusDot variant="success" size="md" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+    })
+  })
+
+  describe('glow', () => {
+    it('applies a box-shadow when glow is set on a solid variant', () => {
+      render(<StatusDot variant="success" glow />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.boxShadow).toContain('rgba(20,184,166,0.4)')
+    })
+
+    it('applies a box-shadow when glow is set on a ring variant', () => {
+      render(<StatusDot variant="on-track" glow />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.boxShadow).toContain('rgba(20,184,166,0.4)')
+    })
+
+    it('applies a gray box-shadow when glow is set on the future variant', () => {
+      render(<StatusDot variant="future" glow />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.boxShadow).toContain('rgba(107,114,128,0.4)')
+    })
+
+    it('does not apply a box-shadow when glow is not set', () => {
+      render(<StatusDot variant="on-track" />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.boxShadow).toBe('')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <StatusDot variant="success" size="md" icon="check" label="On track" />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for ring variants', async () => {
+      const { container } = render(
+        <StatusDot variant="on-track" size="md" icon="check" label="On track" />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations without label', async () => {
+      const { container } = render(<StatusDot variant="warning" size="md" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for all solid variants', async () => {
+      for (const variant of ['success', 'warning', 'error', 'neutral'] as const) {
+        const { container, unmount } = render(<StatusDot variant={variant} />)
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+        unmount()
+      }
+    })
+
+    it('sets combined accessibility label when label prop is provided', () => {
+      render(<StatusDot variant="success" label="On track" />)
+      expect(screen.getByLabelText('success status: On track')).toBeInTheDocument()
+    })
+  })
+})

package/src/components/custom/Workout/StatusDot.tsx

@@ -0,0 +1,159 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+
+export type StatusDotVariant =
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'neutral'
+  | 'on-track'
+  | 'deviation'
+  | 'future'
+
+export interface StatusDotProps extends ViewProps {
+  variant: StatusDotVariant
+  icon?: 'check' | 'exclamation' | 'dash'
+  size?: 'sm' | 'md'
+  /** Adds a subtle glow effect in the variant color */
+  glow?: boolean
+  label?: string
+  className?: string
+}
+
+const solidVariantColors: Record<string, string> = {
+  success: '#14B8A6',
+  warning: '#FFB020',
+  error: '#D14343',
+  neutral: '#6B7280',
+}
+
+const ringVariantStyles: Record<string, Record<string, unknown>> = {
+  'on-track': {
+    backgroundColor: 'rgba(20,184,166,0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(20,184,166,0.3)',
+  },
+  deviation: {
+    backgroundColor: 'rgba(245,158,11,0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(245,158,11,0.25)',
+  },
+  future: {
+    backgroundColor: 'rgba(107,114,128,0.1)',
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: 'rgba(107,114,128,0.2)',
+  },
+}
+
+const glowStyles: Record<StatusDotVariant, Record<string, unknown>> = {
+  success: { boxShadow: '0 0 4px rgba(20,184,166,0.4)' },
+  warning: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
+  error: { boxShadow: '0 0 4px rgba(239,68,68,0.4)' },
+  neutral: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
+  'on-track': { boxShadow: '0 0 4px rgba(20,184,166,0.4)' },
+  deviation: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
+  future: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
+}
+
+const iconChars: Record<string, string> = {
+  check: '\u2713',
+  exclamation: '!',
+  dash: '\u2014',
+}
+
+/** Color-matched icon colors: dark on solid bg, light on transparent bg */
+const iconColors: Record<StatusDotVariant, string> = {
+  success: '#0A5C52',
+  warning: '#6B4000',
+  error: '#5C1A1A',
+  neutral: '#D1D5DB',
+  'on-track': '#14B8A6',
+  deviation: '#FFB020',
+  future: '#6B7280',
+}
+
+const sizeDimensions = {
+  sm: { size: 8, showIcon: false },
+  md: { size: 18, showIcon: true },
+}
+
+function isSolidVariant(variant: StatusDotVariant): boolean {
+  return variant in solidVariantColors
+}
+
+export function StatusDot({
+  variant,
+  icon,
+  size = 'sm',
+  glow,
+  label,
+  className,
+  ...props
+}: StatusDotProps) {
+  const config = sizeDimensions[size]
+  const solid = isSolidVariant(variant)
+  const ring = ringVariantStyles[variant]
+
+  const glowStyle = glow ? glowStyles[variant] : null
+
+  const dot = (
+    <View
+      style={[
+        {
+          width: config.size,
+          height: config.size,
+          borderRadius: 9999,
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+        },
+        solid ? { backgroundColor: solidVariantColors[variant] } : undefined,
+        ring ? (ring as Record<string, unknown>) : undefined,
+        glowStyle ? (glowStyle as Record<string, unknown>) : undefined,
+      ]}
+      accessibilityRole="image"
+      accessibilityLabel={`${variant} status`}
+      testID="status-dot"
+    >
+      {config.showIcon && icon && (
+        <Text
+          style={{
+            fontSize: 11,
+            lineHeight: 11,
+            fontWeight: '900',
+            color: iconColors[variant],
+          }}
+          accessibilityElementsHidden
+        >
+          {iconChars[icon]}
+        </Text>
+      )}
+    </View>
+  )
+
+  if (label) {
+    return (
+      <View
+        className={className}
+        style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}
+        accessibilityLabel={`${variant} status: ${label}`}
+        {...props}
+      >
+        <View accessibilityElementsHidden>{dot}</View>
+        <Text
+          style={{ fontSize: 12, lineHeight: 16, color: '#9CA3AF' }}
+          accessibilityElementsHidden
+        >
+          {label}
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <View className={className} {...props}>
+      {dot}
+    </View>
+  )
+}