@titan-design/react-ui 0.1.0 → 0.1.1

package/src/utils/form.ts

@@ -0,0 +1,188 @@
+/**
+ * Form utility functions for consistent form field handling
+ */
+
+import React from 'react'
+
+export interface FieldState {
+  /** Whether the field has been touched */
+  touched: boolean
+  /** Whether the field has an error */
+  hasError: boolean
+  /** Error message if any */
+  errorMessage?: string
+  /** Whether the field is required */
+  isRequired?: boolean
+}
+
+export interface FieldWrapperProps {
+  /** Field label */
+  label?: string
+  /** Helper text */
+  helperText?: string
+  /** Error message */
+  errorMessage?: string
+  /** Whether the field is required */
+  isRequired?: boolean
+  /** Whether the field is disabled */
+  isDisabled?: boolean
+  /** Whether to show error state */
+  isInvalid?: boolean
+}
+
+/**
+ * Get validation state props from field state
+ */
+export function getFieldValidationProps(state: FieldState): {
+  isInvalid: boolean
+  errorMessage?: string
+} {
+  return {
+    isInvalid: state.touched && state.hasError,
+    errorMessage: state.touched && state.hasError ? state.errorMessage : undefined,
+  }
+}
+
+/**
+ * Create a field ID from label text
+ */
+export function createFieldId(label: string): string {
+  return label
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+}
+
+/**
+ * Get aria attributes for form field
+ */
+export function getFieldAriaProps(props: FieldWrapperProps & { id: string }): {
+  'aria-invalid'?: boolean
+  'aria-required'?: boolean
+  'aria-describedby'?: string
+} {
+  const describedBy: string[] = []
+
+  if (props.helperText) {
+    describedBy.push(`${props.id}-helper`)
+  }
+
+  if (props.isInvalid && props.errorMessage) {
+    describedBy.push(`${props.id}-error`)
+  }
+
+  return {
+    'aria-invalid': props.isInvalid || undefined,
+    'aria-required': props.isRequired || undefined,
+    'aria-describedby': describedBy.length > 0 ? describedBy.join(' ') : undefined,
+  }
+}
+
+/**
+ * Validate email format
+ */
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+/**
+ * Validate minimum length
+ */
+export function hasMinLength(value: string, minLength: number): boolean {
+  return value.length >= minLength
+}
+
+/**
+ * Validate maximum length
+ */
+export function hasMaxLength(value: string, maxLength: number): boolean {
+  return value.length <= maxLength
+}
+
+/**
+ * Check if value is empty (null, undefined, or empty string)
+ */
+export function isEmpty(value: unknown): boolean {
+  if (value === null || value === undefined) return true
+  if (typeof value === 'string') return value.trim() === ''
+  if (Array.isArray(value)) return value.length === 0
+  return false
+}
+
+/**
+ * Common validation rules
+ */
+export const validationRules = {
+  required: (value: unknown) => {
+    if (isEmpty(value)) {
+      return 'This field is required'
+    }
+    return undefined
+  },
+
+  email: (value: string) => {
+    if (value && !isValidEmail(value)) {
+      return 'Please enter a valid email address'
+    }
+    return undefined
+  },
+
+  minLength: (min: number) => (value: string) => {
+    if (value && !hasMinLength(value, min)) {
+      return `Must be at least ${min} characters`
+    }
+    return undefined
+  },
+
+  maxLength: (max: number) => (value: string) => {
+    if (value && !hasMaxLength(value, max)) {
+      return `Must be no more than ${max} characters`
+    }
+    return undefined
+  },
+
+  pattern: (regex: RegExp, message: string) => (value: string) => {
+    if (value && !regex.test(value)) {
+      return message
+    }
+    return undefined
+  },
+
+  match: (otherValue: string, fieldName: string) => (value: string) => {
+    if (value !== otherValue) {
+      return `Must match ${fieldName}`
+    }
+    return undefined
+  },
+}
+
+/**
+ * Compose multiple validation functions
+ */
+export function composeValidators(
+  ...validators: Array<(value: any) => string | undefined>
+) {
+  return (value: any): string | undefined => {
+    for (const validator of validators) {
+      const error = validator(value)
+      if (error) return error
+    }
+    return undefined
+  }
+}
+
+/**
+ * Type for form values
+ */
+export type FormValues = Record<string, unknown>
+
+/**
+ * Type for form errors
+ */
+export type FormErrors<T extends FormValues> = Partial<Record<keyof T, string>>
+
+/**
+ * Type for form touched state
+ */
+export type FormTouched<T extends FormValues> = Partial<Record<keyof T, boolean>>

package/src/utils/index.ts

@@ -0,0 +1,29 @@
+export { cn } from './cn'
+export {
+  getStatusColor,
+  getResultColor,
+  getContrastText,
+  getLuminance,
+  alpha,
+  lighten,
+  darken,
+} from './colors'
+export type { StatusType, ResultType } from './colors'
+export {
+  getFieldValidationProps,
+  createFieldId,
+  getFieldAriaProps,
+  isValidEmail,
+  hasMinLength,
+  hasMaxLength,
+  isEmpty,
+  validationRules,
+  composeValidators,
+} from './form'
+export type {
+  FieldState,
+  FieldWrapperProps,
+  FormValues,
+  FormErrors,
+  FormTouched,
+} from './form'

package/src/utils/useTheme.ts

@@ -0,0 +1,72 @@
+import { useSyncExternalStore } from 'react'
+
+/**
+ * Utility function to detect the current theme.
+ * Checks for the 'light' class on the html element (set by Storybook's theme addon).
+ * 
+ * NOTE: This function reads the theme at call time. For reactive theme detection
+ * that re-renders when the theme changes, use the `useTheme` hook instead.
+ * 
+ * @returns 'light' if light theme is active, 'dark' otherwise
+ */
+export function getTheme(): 'light' | 'dark' {
+  if (typeof document === 'undefined') return 'dark'
+  return document.documentElement.classList.contains('light') ? 'light' : 'dark'
+}
+
+// Subscribers for theme changes
+let listeners: Array<() => void> = []
+
+function subscribe(listener: () => void) {
+  listeners = [...listeners, listener]
+  
+  // Set up MutationObserver to watch for class changes on html element
+  if (typeof document !== 'undefined' && listeners.length === 1) {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          // Notify all listeners when class changes
+          listeners.forEach(l => l())
+        }
+      }
+    })
+    
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+    
+    // Store observer for cleanup
+    ;(subscribe as any)._observer = observer
+  }
+  
+  return () => {
+    listeners = listeners.filter(l => l !== listener)
+    
+    // Clean up observer when no more listeners
+    if (listeners.length === 0 && (subscribe as any)._observer) {
+      ;(subscribe as any)._observer.disconnect()
+      ;(subscribe as any)._observer = null
+    }
+  }
+}
+
+function getSnapshot(): 'light' | 'dark' {
+  return getTheme()
+}
+
+function getServerSnapshot(): 'light' | 'dark' {
+  return 'dark'
+}
+
+/**
+ * React hook for reactive theme detection.
+ * Automatically re-renders when the theme changes (via class changes on html element).
+ * 
+ * Uses useSyncExternalStore for proper React 18 concurrent mode support.
+ * 
+ * @returns 'light' if light theme is active, 'dark' otherwise
+ */
+export function useTheme(): 'light' | 'dark' {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}