@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Sparkline } from './Sparkline'
+
+const meta: Meta<typeof Sparkline> = {
+  title: 'Custom/Workout/Sparkline',
+  component: Sparkline,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'number',
+      description: 'Chart width in pixels',
+    },
+    height: {
+      control: 'number',
+      description: 'Chart height in pixels',
+    },
+    color: {
+      control: 'color',
+      description: 'Line and dot color',
+    },
+    showDots: {
+      control: 'boolean',
+      description: 'Show dots at data points',
+    },
+    highlightLast: {
+      control: 'boolean',
+      description: 'Highlight the last data point with a larger dot',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Sparkline>
+
+const ascending = [10, 15, 22, 28, 35, 42, 50]
+const descending = [50, 45, 38, 30, 22, 15, 10]
+const uCurve = [40, 25, 15, 10, 12, 20, 35]
+const flat = [20, 21, 19, 20, 21, 20, 19]
+const volatile = [10, 35, 15, 45, 20, 40, 25]
+
+export const Default: Story = {
+  args: {
+    data: ascending,
+  },
+}
+
+export const Ascending: Story = {
+  args: {
+    data: ascending,
+    showDots: true,
+  },
+}
+
+export const Descending: Story = {
+  args: {
+    data: descending,
+    showDots: true,
+    color: '#ff4757',
+  },
+}
+
+export const UCurve: Story = {
+  args: {
+    data: uCurve,
+    showDots: true,
+    color: '#2ed573',
+  },
+}
+
+export const Flat: Story = {
+  args: {
+    data: flat,
+    showDots: true,
+    color: '#ffd43b',
+  },
+}
+
+export const WithReferenceLines: Story = {
+  args: {
+    data: ascending,
+    showDots: true,
+    referenceLines: [
+      { value: 30, color: '#ff4757', dashed: true },
+      { value: 45, color: '#2ed573', dashed: false },
+    ],
+  },
+}
+
+export const HighlightLast: Story = {
+  args: {
+    data: ascending,
+    highlightLast: true,
+  },
+}
+
+export const DotsAndHighlightLast: Story = {
+  args: {
+    data: volatile,
+    showDots: true,
+    highlightLast: true,
+    color: '#ffa502',
+  },
+}
+
+export const CustomSize: Story = {
+  args: {
+    data: ascending,
+    width: 120,
+    height: 50,
+    showDots: true,
+  },
+}
+
+export const AllShapes: Story = {
+  render: () => (
+    <View style={{ gap: 16, padding: 16 }}>
+      <Sparkline data={ascending} showDots highlightLast />
+      <Sparkline data={descending} showDots color="#ff4757" />
+      <Sparkline data={uCurve} showDots color="#2ed573" />
+      <Sparkline data={flat} showDots color="#ffd43b" />
+      <Sparkline data={volatile} showDots color="#ffa502" highlightLast />
+    </View>
+  ),
+}

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

@@ -0,0 +1,113 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Sparkline } from './Sparkline'
+
+const sampleData = [10, 25, 15, 30, 20]
+
+describe('Sparkline', () => {
+  it('renders with data points', () => {
+    render(<Sparkline data={sampleData} />)
+    expect(screen.getByTestId('sparkline')).toBeInTheDocument()
+  })
+
+  it('renders empty state for no data', () => {
+    render(<Sparkline data={[]} />)
+    expect(screen.getByTestId('sparkline-empty')).toBeInTheDocument()
+  })
+
+  it('renders line segments between points', () => {
+    render(<Sparkline data={sampleData} />)
+    for (let i = 1; i < sampleData.length; i++) {
+      expect(
+        screen.getByTestId(`sparkline-segment-${i}`),
+      ).toBeInTheDocument()
+    }
+  })
+
+  it('renders dots when showDots is true', () => {
+    render(<Sparkline data={sampleData} showDots />)
+    for (let i = 0; i < sampleData.length; i++) {
+      expect(screen.getByTestId(`sparkline-dot-${i}`)).toBeInTheDocument()
+    }
+  })
+
+  it('does not render dots when showDots is false', () => {
+    render(<Sparkline data={sampleData} />)
+    expect(screen.queryByTestId('sparkline-dot-0')).not.toBeInTheDocument()
+  })
+
+  it('highlights last dot when highlightLast is true', () => {
+    render(<Sparkline data={sampleData} highlightLast />)
+    const lastIndex = sampleData.length - 1
+    expect(
+      screen.getByTestId(`sparkline-dot-${lastIndex}`),
+    ).toBeInTheDocument()
+    // Other dots should not be present (showDots is false)
+    expect(screen.queryByTestId('sparkline-dot-0')).not.toBeInTheDocument()
+  })
+
+  it('renders both regular dots and highlighted last', () => {
+    render(<Sparkline data={sampleData} showDots highlightLast />)
+    for (let i = 0; i < sampleData.length; i++) {
+      expect(screen.getByTestId(`sparkline-dot-${i}`)).toBeInTheDocument()
+    }
+  })
+
+  it('renders reference lines', () => {
+    render(
+      <Sparkline
+        data={sampleData}
+        referenceLines={[
+          { value: 20, color: '#ff0000' },
+          { value: 25, color: '#00ff00', dashed: true },
+        ]}
+      />,
+    )
+    expect(screen.getByTestId('sparkline-reference-0')).toBeInTheDocument()
+    expect(screen.getByTestId('sparkline-reference-1')).toBeInTheDocument()
+  })
+
+  it('does not render reference lines when not provided', () => {
+    render(<Sparkline data={sampleData} />)
+    expect(
+      screen.queryByTestId('sparkline-reference-0'),
+    ).not.toBeInTheDocument()
+  })
+
+  it('uses default dimensions', () => {
+    render(<Sparkline data={sampleData} />)
+    const sparkline = screen.getByTestId('sparkline')
+    expect(sparkline).toHaveStyle({ width: '80px', height: '30px' })
+  })
+
+  it('accepts custom dimensions', () => {
+    render(<Sparkline data={sampleData} width={120} height={50} />)
+    const sparkline = screen.getByTestId('sparkline')
+    expect(sparkline).toHaveStyle({ width: '120px', height: '50px' })
+  })
+
+  it('sets accessibility label', () => {
+    render(<Sparkline data={sampleData} />)
+    expect(
+      screen.getByLabelText('Sparkline chart with 5 data points'),
+    ).toBeInTheDocument()
+  })
+
+  it('sets empty accessibility label for no data', () => {
+    render(<Sparkline data={[]} />)
+    expect(
+      screen.getByLabelText('Sparkline chart, no data'),
+    ).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Sparkline data={sampleData} showDots highlightLast />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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>
+  ),
+}