@sabrenski/spire-ui 0.0.1

package/src/components/Chart/LineChart.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ChartData, ChartOptions } from 'chart.js'
+import BaseChart from './BaseChart.vue'
+import type { LegendItem, TooltipData, PointClickData } from './BaseChart.vue'
+import { useChartTheme } from './useChartTheme'
+
+type LineChartData = ChartData<'line'>
+type LineChartOptions = ChartOptions<'line'>
+
+export interface LineChartSeries {
+  name: string
+  data: number[]
+}
+
+export interface LineChartProps {
+  /** X-axis labels */
+  labels: string[]
+  /** Data series */
+  series: LineChartSeries[]
+  /** Chart height */
+  height?: string | number
+  /** Show area fill under lines */
+  fill?: boolean
+  /** Line curve tension (0 = straight, 0.4 = smooth) */
+  tension?: number
+  /** Show points on the line */
+  showPoints?: boolean
+  /** Point radius */
+  pointRadius?: number
+  /** Show grid lines */
+  showGrid?: boolean
+  /** Show X axis */
+  showXAxis?: boolean
+  /** Show Y axis */
+  showYAxis?: boolean
+  /** Accessible label */
+  ariaLabel?: string
+  /** Show built-in legend */
+  showLegend?: boolean
+}
+
+const props = withDefaults(defineProps<LineChartProps>(), {
+  height: 300,
+  fill: false,
+  tension: 0.4,
+  showPoints: true,
+  pointRadius: 4,
+  showGrid: true,
+  showXAxis: true,
+  showYAxis: true,
+  showLegend: true
+})
+
+defineSlots<{
+  legend?: (props: { items: LegendItem[]; toggle: (index: number) => void }) => unknown
+  tooltip?: (props: { data: TooltipData | null }) => unknown
+}>()
+
+const emit = defineEmits<{
+  pointClick: [data: PointClickData]
+}>()
+
+const { theme, getColor, getColorWithOpacity } = useChartTheme()
+
+const chartData = computed(() => ({
+  labels: props.labels,
+  datasets: props.series.map((series, index) => ({
+    label: series.name,
+    data: series.data,
+    borderColor: getColor(index),
+    backgroundColor: props.fill ? getColorWithOpacity(index, 0.1) : 'transparent',
+    borderWidth: 2,
+    fill: props.fill,
+    tension: props.tension,
+    pointRadius: props.showPoints ? props.pointRadius : 0,
+    pointHoverRadius: props.showPoints ? props.pointRadius + 2 : 4,
+    pointBackgroundColor: getColor(index),
+    pointBorderColor: theme.value.colors.tooltipText,
+    pointBorderWidth: 2
+  }))
+}) as LineChartData)
+
+const chartOptions = computed(() => ({
+  scales: {
+    x: {
+      display: props.showXAxis,
+      grid: {
+        display: false
+      },
+      border: {
+        display: false
+      },
+      ticks: {
+        color: theme.value.colors.textMuted,
+        font: {
+          family: theme.value.fontFamily,
+          size: 12
+        }
+      }
+    },
+    y: {
+      display: props.showYAxis,
+      grid: {
+        display: props.showGrid,
+        color: theme.value.colors.gridLines
+      },
+      border: {
+        display: false
+      },
+      ticks: {
+        color: theme.value.colors.textMuted,
+        font: {
+          family: theme.value.fontFamily,
+          size: 12
+        }
+      }
+    }
+  },
+  interaction: {
+    mode: 'index' as const,
+    intersect: false
+  }
+}) as LineChartOptions)
+</script>
+
+<template>
+  <BaseChart
+    type="line"
+    :data="chartData"
+    :options="chartOptions"
+    :height="height"
+    :aria-label="ariaLabel"
+    @point-click="emit('pointClick', $event)"
+  >
+    <template v-if="showLegend || $slots.legend" #legend="{ items, toggle }">
+      <slot name="legend" :items="items" :toggle="toggle">
+        <div class="ui-line-chart__legend">
+          <button
+            v-for="(item, index) in items"
+            :key="index"
+            type="button"
+            class="ui-line-chart__legend-item"
+            :class="{ 'ui-line-chart__legend-item--hidden': item.hidden }"
+            @click="toggle(index)"
+          >
+            <span
+              class="ui-line-chart__legend-color"
+              :style="{ backgroundColor: item.color }"
+            />
+            <span class="ui-line-chart__legend-label">{{ item.label }}</span>
+          </button>
+        </div>
+      </slot>
+    </template>
+    <template #tooltip="{ data }">
+      <slot name="tooltip" :data="data" />
+    </template>
+  </BaseChart>
+</template>
+
+<style scoped>
+.ui-line-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.ui-line-chart__legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--chart-legend-text, var(--text-secondary));
+  transition: opacity var(--duration-fast) var(--ease-default);
+}
+
+.ui-line-chart__legend-item:hover {
+  background-color: var(--color-stone-100);
+}
+
+[data-theme='dark'] .ui-line-chart__legend-item:hover {
+  background-color: var(--color-stone-800);
+}
+
+.ui-line-chart__legend-item--hidden {
+  opacity: 0.4;
+}
+
+.ui-line-chart__legend-item--hidden .ui-line-chart__legend-color {
+  opacity: 0.3;
+}
+
+.ui-line-chart__legend-color {
+  width: 12px;
+  height: 3px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.ui-line-chart__legend-label {
+  white-space: nowrap;
+}
+</style>

package/src/components/Chart/index.ts

@@ -0,0 +1,20 @@
+export { default as BaseChart } from './BaseChart.vue'
+export type {
+  BaseChartProps,
+  ChartDataset,
+  TooltipData,
+  LegendItem,
+  PointClickData
+} from './BaseChart.vue'
+
+export { default as LineChart } from './LineChart.vue'
+export type { LineChartProps, LineChartSeries } from './LineChart.vue'
+
+export { default as BarChart } from './BarChart.vue'
+export type { BarChartProps, BarChartSeries } from './BarChart.vue'
+
+export { default as DonutChart } from './DonutChart.vue'
+export type { DonutChartProps, DonutChartSegment, SegmentClickData } from './DonutChart.vue'
+
+export { useChartTheme } from './useChartTheme'
+export type { ChartTheme, ChartThemeColors } from './useChartTheme'

package/src/components/Chart/useChartTheme.ts

@@ -0,0 +1,192 @@
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+
+export interface ChartThemeColors {
+  primary: string
+  success: string
+  warning: string
+  error: string
+  info: string
+  text: string
+  textMuted: string
+  gridLines: string
+  tooltipBg: string
+  tooltipText: string
+  tooltipBorder: string
+  legendText: string
+}
+
+export interface ChartTheme {
+  colors: ChartThemeColors
+  fontFamily: string
+  palette: string[]
+}
+
+function getCSSVariable(name: string): string {
+  if (typeof window === 'undefined') return ''
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
+function extractTheme(): ChartTheme {
+  const colors: ChartThemeColors = {
+    primary: getCSSVariable('--chart-1') || getCSSVariable('--action-primary') || '#6366f1',
+    success: getCSSVariable('--chart-2') || getCSSVariable('--status-success') || '#14b8a6',
+    warning: getCSSVariable('--chart-3') || getCSSVariable('--status-warning') || '#f59e0b',
+    error: getCSSVariable('--chart-4') || getCSSVariable('--status-error') || '#f87171',
+    info: getCSSVariable('--chart-5') || getCSSVariable('--status-info') || '#3b82f6',
+    text: getCSSVariable('--chart-text') || getCSSVariable('--text-primary') || '#1c1917',
+    textMuted: getCSSVariable('--chart-text-muted') || getCSSVariable('--text-secondary') || '#78716c',
+    gridLines: getCSSVariable('--chart-grid') || getCSSVariable('--border-default') || '#e7e5e4',
+    tooltipBg: getCSSVariable('--chart-tooltip-bg') || getCSSVariable('--tooltip-bg') || '#1c1917',
+    tooltipText: getCSSVariable('--chart-tooltip-text') || getCSSVariable('--tooltip-text') || '#fafaf9',
+    tooltipBorder: getCSSVariable('--chart-tooltip-border') || 'transparent',
+    legendText: getCSSVariable('--chart-legend-text') || getCSSVariable('--text-secondary') || '#78716c'
+  }
+
+  const fontFamily = getCSSVariable('--font-sans') || 'system-ui, -apple-system, sans-serif'
+
+  const palette = [
+    getCSSVariable('--chart-1') || colors.primary,
+    getCSSVariable('--chart-2') || colors.success,
+    getCSSVariable('--chart-3') || colors.warning,
+    getCSSVariable('--chart-4') || colors.error,
+    getCSSVariable('--chart-5') || colors.info,
+    getCSSVariable('--chart-6') || '#8b5cf6',
+    getCSSVariable('--chart-7') || '#ec4899',
+    getCSSVariable('--chart-8') || '#06b6d4'
+  ]
+
+  return { colors, fontFamily, palette }
+}
+
+/**
+ * Composable that extracts CSS variables and provides reactive chart theming.
+ * Automatically updates when the theme changes (dark mode toggle).
+ */
+export function useChartTheme() {
+  const theme = ref<ChartTheme>(extractTheme())
+  const themeVersion = ref(0)
+
+  let observer: MutationObserver | null = null
+
+  function updateTheme() {
+    theme.value = extractTheme()
+    themeVersion.value++
+  }
+
+  onMounted(() => {
+    updateTheme()
+
+    let pendingUpdate: number | null = null
+
+    observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (
+          mutation.type === 'attributes' &&
+          (mutation.attributeName === 'data-theme' || mutation.attributeName === 'class')
+        ) {
+          if (pendingUpdate !== null) {
+            cancelAnimationFrame(pendingUpdate)
+          }
+          pendingUpdate = requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              updateTheme()
+              pendingUpdate = null
+            })
+          })
+          break
+        }
+      }
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme', 'class']
+    })
+  })
+
+  onUnmounted(() => {
+    observer?.disconnect()
+  })
+
+  const gridColor = computed(() => theme.value.colors.gridLines)
+  const textColor = computed(() => theme.value.colors.text)
+  const mutedTextColor = computed(() => theme.value.colors.textMuted)
+
+  function getDefaultOptions() {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          enabled: false
+        }
+      },
+      scales: {
+        x: {
+          grid: {
+            display: false
+          },
+          border: {
+            display: false
+          },
+          ticks: {
+            color: theme.value.colors.textMuted,
+            font: {
+              family: theme.value.fontFamily,
+              size: 12
+            }
+          }
+        },
+        y: {
+          grid: {
+            color: theme.value.colors.gridLines
+          },
+          border: {
+            display: false
+          },
+          ticks: {
+            color: theme.value.colors.textMuted,
+            font: {
+              family: theme.value.fontFamily,
+              size: 12
+            }
+          }
+        }
+      }
+    }
+  }
+
+  function getColor(index: number): string {
+    return theme.value.palette[index % theme.value.palette.length]
+  }
+
+  function getColorWithOpacity(index: number, opacity: number): string {
+    const color = getColor(index)
+    if (color.startsWith('oklch') || color.startsWith('rgb')) {
+      return color.replace(')', ` / ${opacity})`).replace('rgb(', 'rgba(').replace('oklch(', 'oklch(')
+    }
+    if (color.startsWith('#')) {
+      const hex = color.slice(1)
+      const r = parseInt(hex.slice(0, 2), 16)
+      const g = parseInt(hex.slice(2, 4), 16)
+      const b = parseInt(hex.slice(4, 6), 16)
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`
+    }
+    return color
+  }
+
+  return {
+    theme,
+    themeVersion,
+    gridColor,
+    textColor,
+    mutedTextColor,
+    getDefaultOptions,
+    getColor,
+    getColorWithOpacity,
+    updateTheme
+  }
+}

package/src/components/Checkbox/Checkbox.test.ts

@@ -0,0 +1,209 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Checkbox from './Checkbox.vue'
+
+describe('Checkbox', () => {
+  describe('Rendering', () => {
+    it('renders as a label element', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('label').exists()).toBe(true)
+    })
+
+    it('renders native checkbox input', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+    })
+
+    it('renders custom box element', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('.ui-checkbox__box').exists()).toBe(true)
+    })
+
+    it('does not render check icon when unchecked', () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: false }
+      })
+      expect(wrapper.find('.ui-checkbox__check').exists()).toBe(false)
+    })
+
+    it('renders check icon when checked', () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: true }
+      })
+      expect(wrapper.find('.ui-checkbox__check').exists()).toBe(true)
+    })
+  })
+
+  describe('v-model', () => {
+    it('reflects unchecked state', () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: false }
+      })
+      const input = wrapper.find('input')
+      expect((input.element as HTMLInputElement).checked).toBe(false)
+    })
+
+    it('reflects checked state', () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: true }
+      })
+      const input = wrapper.find('input')
+      expect((input.element as HTMLInputElement).checked).toBe(true)
+      expect(wrapper.find('.ui-checkbox').classes()).toContain('ui-checkbox--checked')
+    })
+
+    it('emits update:modelValue on change', async () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: false }
+      })
+      await wrapper.find('input').setValue(true)
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+    })
+
+    it('emits change event on change', async () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: false }
+      })
+      await wrapper.find('input').setValue(true)
+      expect(wrapper.emitted('change')?.[0]).toEqual([true])
+    })
+
+    it('unchecks when toggled from true', async () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: true }
+      })
+      await wrapper.find('input').setValue(false)
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    })
+  })
+
+  describe('Indeterminate state', () => {
+    it('applies indeterminate class', () => {
+      const wrapper = mount(Checkbox, {
+        props: { indeterminate: true }
+      })
+      expect(wrapper.find('.ui-checkbox').classes()).toContain('ui-checkbox--indeterminate')
+    })
+
+    it('renders indeterminate icon instead of check', () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: true, indeterminate: true }
+      })
+      expect(wrapper.find('.ui-checkbox__check').exists()).toBe(false)
+      expect(wrapper.find('.ui-checkbox__indeterminate').exists()).toBe(true)
+    })
+
+    it('renders indeterminate icon even when unchecked', () => {
+      const wrapper = mount(Checkbox, {
+        props: { modelValue: false, indeterminate: true }
+      })
+      expect(wrapper.find('.ui-checkbox__indeterminate').exists()).toBe(true)
+    })
+  })
+
+  describe('Size variants', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+
+    sizes.forEach(size => {
+      it(`applies ${size} size class`, () => {
+        const wrapper = mount(Checkbox, {
+          props: { size }
+        })
+        expect(wrapper.find('.ui-checkbox').classes()).toContain(`ui-checkbox--${size}`)
+      })
+    })
+
+    it('defaults to md size', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('.ui-checkbox').classes()).toContain('ui-checkbox--md')
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('applies disabled attribute to input', () => {
+      const wrapper = mount(Checkbox, {
+        props: { disabled: true }
+      })
+      expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+    })
+
+    it('applies disabled class', () => {
+      const wrapper = mount(Checkbox, {
+        props: { disabled: true }
+      })
+      expect(wrapper.find('.ui-checkbox').classes()).toContain('ui-checkbox--disabled')
+    })
+  })
+
+  describe('Label and description', () => {
+    it('renders label text', () => {
+      const wrapper = mount(Checkbox, {
+        props: { label: 'Accept terms' }
+      })
+      expect(wrapper.find('.ui-checkbox__label').text()).toBe('Accept terms')
+    })
+
+    it('renders description text', () => {
+      const wrapper = mount(Checkbox, {
+        props: { description: 'By checking this you agree' }
+      })
+      expect(wrapper.find('.ui-checkbox__description').text()).toBe('By checking this you agree')
+    })
+
+    it('renders both label and description', () => {
+      const wrapper = mount(Checkbox, {
+        props: {
+          label: 'Accept terms',
+          description: 'By checking this you agree'
+        }
+      })
+      expect(wrapper.find('.ui-checkbox__label').exists()).toBe(true)
+      expect(wrapper.find('.ui-checkbox__description').exists()).toBe(true)
+    })
+
+    it('does not render content wrapper when no label or description', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('.ui-checkbox__content').exists()).toBe(false)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('auto-generates unique id', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('input').attributes('id')).toMatch(/^checkbox-/)
+    })
+
+    it('uses provided id', () => {
+      const wrapper = mount(Checkbox, {
+        props: { id: 'custom-checkbox' }
+      })
+      expect(wrapper.find('input').attributes('id')).toBe('custom-checkbox')
+    })
+
+    it('input is visually hidden but accessible', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('.ui-checkbox__input').exists()).toBe(true)
+    })
+
+    it('custom box has aria-hidden', () => {
+      const wrapper = mount(Checkbox)
+      expect(wrapper.find('.ui-checkbox__box').attributes('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('Form attributes', () => {
+    it('applies name attribute', () => {
+      const wrapper = mount(Checkbox, {
+        props: { name: 'terms' }
+      })
+      expect(wrapper.find('input').attributes('name')).toBe('terms')
+    })
+
+    it('applies value attribute', () => {
+      const wrapper = mount(Checkbox, {
+        props: { value: 'accepted' }
+      })
+      expect(wrapper.find('input').attributes('value')).toBe('accepted')
+    })
+  })
+})