@tachui/forms 0.7.1-alpha → 0.8.0-alpha

package/src/utils/formatters.ts

@@ -0,0 +1,184 @@
+/**
+ * TextField Formatters
+ *
+ * Pre-built formatting functions for common input types.
+ * Migrated from core TextField to forms plugin.
+ */
+
+import type { TextFieldFormatter } from '../types'
+
+/**
+ * Common text formatters
+ */
+export const TextFieldFormatters = {
+  /**
+   * Phone number formatter (US format)
+   */
+  phone: (value: string): string => {
+    const digits = value.replace(/\D/g, '')
+    if (digits.length <= 3) {
+      return digits
+    } else if (digits.length <= 6) {
+      return `(${digits.slice(0, 3)}) ${digits.slice(3)}`
+    } else {
+      return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`
+    }
+  },
+
+  /**
+   * Credit card formatter
+   */
+  creditCard: (value: string): string => {
+    const digits = value.replace(/\D/g, '')
+    return digits.replace(/(\d{4})(?=\d)/g, '$1 ')
+  },
+
+  /**
+   * Currency formatter
+   */
+  currency: (value: string): string => {
+    const number = parseFloat(value.replace(/[^\d.]/g, ''))
+    if (Number.isNaN(number)) return ''
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(number)
+  },
+
+  /**
+   * Uppercase formatter
+   */
+  uppercase: (value: string): string => value.toUpperCase(),
+
+  /**
+   * Lowercase formatter
+   */
+  lowercase: (value: string): string => value.toLowerCase(),
+
+  /**
+   * Title case formatter
+   */
+  titleCase: (value: string): string => {
+    return value.replace(
+      /\w\S*/g,
+      txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
+    )
+  },
+
+  /**
+   * Social Security Number formatter
+   */
+  ssn: (value: string): string => {
+    const digits = value.replace(/\D/g, '')
+    if (digits.length <= 3) {
+      return digits
+    } else if (digits.length <= 5) {
+      return `${digits.slice(0, 3)}-${digits.slice(3)}`
+    } else {
+      return `${digits.slice(0, 3)}-${digits.slice(3, 5)}-${digits.slice(5, 9)}`
+    }
+  },
+
+  /**
+   * Postal code formatter (US ZIP)
+   */
+  postalCode: (value: string): string => {
+    const digits = value.replace(/\D/g, '')
+    if (digits.length <= 5) {
+      return digits
+    } else {
+      return `${digits.slice(0, 5)}-${digits.slice(5, 9)}`
+    }
+  },
+
+  /**
+   * Decimal number formatter
+   */
+  decimal:
+    (places: number = 2) =>
+    (value: string): string => {
+      const number = parseFloat(value.replace(/[^\d.-]/g, ''))
+      if (Number.isNaN(number)) return ''
+      return number.toFixed(places)
+    },
+
+  /**
+   * Percentage formatter
+   */
+  percentage: (value: string): string => {
+    const number = parseFloat(value.replace(/[^\d.-]/g, ''))
+    if (Number.isNaN(number)) return ''
+    return `${number}%`
+  },
+
+  /**
+   * Custom formatter factory
+   */
+  custom: (formatFn: (value: string) => string): TextFieldFormatter => formatFn,
+}
+
+/**
+ * Common text parsers (reverse of formatters)
+ */
+export const TextFieldParsers = {
+  /**
+   * Phone number parser - extracts digits only
+   */
+  phone: (value: string): string => {
+    return value.replace(/\D/g, '')
+  },
+
+  /**
+   * Credit card parser - extracts digits only
+   */
+  creditCard: (value: string): string => {
+    return value.replace(/\D/g, '')
+  },
+
+  /**
+   * Currency parser - extracts numeric value
+   */
+  currency: (value: string): string => {
+    const matches = value.match(/[\d.-]+/)
+    return matches ? matches[0] : ''
+  },
+
+  /**
+   * SSN parser - extracts digits only
+   */
+  ssn: (value: string): string => {
+    return value.replace(/\D/g, '')
+  },
+
+  /**
+   * Postal code parser - extracts digits only
+   */
+  postalCode: (value: string): string => {
+    return value.replace(/\D/g, '')
+  },
+
+  /**
+   * Decimal parser - extracts number
+   */
+  decimal: (value: string): string => {
+    const matches = value.match(/^-?\d*\.?\d*/)
+    return matches ? matches[0] : ''
+  },
+
+  /**
+   * Percentage parser - extracts number without %
+   */
+  percentage: (value: string): string => {
+    return value.replace(/[^\d.-]/g, '')
+  },
+
+  /**
+   * No-op parser (returns value unchanged)
+   */
+  none: (value: string): string => value,
+
+  /**
+   * Custom parser factory
+   */
+  custom: (parseFn: (value: string) => string) => parseFn,
+}

package/src/utils/index.ts

@@ -0,0 +1,57 @@
+/**
+ * Form Utilities
+ *
+ * Shared utilities for form handling, formatting, and validation
+ */
+
+// TODO: Migrate actual utilities from @tachui/forms
+// Placeholder implementation for unified package structure
+
+// Form state utilities (stubs)
+export function useFormState() {
+  return {
+    /* TODO: Implement form state hook */
+  }
+}
+
+export function useFormValidation() {
+  return {
+    /* TODO: Implement form validation hook */
+  }
+}
+
+// Formatting utilities (stubs)
+export function formatCreditCard(value: string): string {
+  return value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
+}
+
+export function formatPhoneNumber(value: string): string {
+  return value.replace(/\D/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3')
+}
+
+export function formatSSN(value: string): string {
+  return value.replace(/\D/g, '').replace(/(\d{3})(\d{2})(\d{4})/, '$1-$2-$3')
+}
+
+export function formatPostalCode(value: string): string {
+  return value.toUpperCase().replace(/[^A-Z0-9]/g, '')
+}
+
+// Date utilities (stubs)
+export function formatDate(date: Date, _format: string = 'yyyy-MM-dd'): string {
+  return date.toISOString().split('T')[0]
+}
+
+export function parseDate(value: string): Date {
+  return new Date(value)
+}
+
+export function isValidDate(date: Date): boolean {
+  return date instanceof Date && !isNaN(date.getTime())
+}
+
+// Type aliases
+export type FormStateManager = any
+export type FormatterFunction = (value: string) => string
+export type DateFormat = string
+export type FormUtilOptions = any

package/src/validation/component-validation.ts

@@ -0,0 +1,429 @@
+/**
+ * Forms Package Component Validation
+ *
+ * Validation for @tachui/advanced-forms components that registers with the Core
+ * validation system, following proper plugin architecture.
+ */
+
+// Import from core to register with the validation system
+// ComponentValidator type is defined locally since it's not exported from core
+
+/**
+ * Component validator interface (matches core's internal interface)
+ */
+interface ComponentValidator {
+  packageName: string
+  componentName: string
+  validate: (args: unknown[]) => void
+}
+
+/**
+ * TachUI Forms validation error class
+ */
+export class FormsValidationError extends Error {
+  constructor(
+    message: string,
+    public context: {
+      component: string
+      property?: string
+      suggestion?: string
+      documentation?: string
+      example?: {
+        wrong: string
+        correct: string
+      }
+    }
+  ) {
+    super(message)
+    this.name = 'FormsValidationError'
+  }
+
+  getFormattedMessage(): string {
+    const { component, suggestion, example, documentation } = this.context
+
+    let formatted = `❌ [@tachui/advanced-forms] ${component} Component Error: ${this.message}\n`
+
+    if (suggestion) {
+      formatted += `\n💡 Suggestion: ${suggestion}\n`
+    }
+
+    if (example) {
+      formatted += `\n❌ Wrong: ${example.wrong}`
+      formatted += `\n✅ Correct: ${example.correct}\n`
+    }
+
+    if (documentation) {
+      formatted += `\n📚 Documentation: ${documentation}`
+    }
+
+    return formatted
+  }
+}
+
+/**
+ * Forms Components Validation
+ */
+export const FormsComponentValidation = {
+  // TextField Component
+  validateTextField(args: unknown[]): void {
+    if (args.length === 0) {
+      throw new FormsValidationError(
+        'TextField component requires a props object with name',
+        {
+          component: 'TextField',
+          suggestion: 'Add name property: TextField({ name: "fieldName" })',
+          documentation:
+            'https://docs.tachui.dev/advanced-forms/components/textfield',
+          example: {
+            wrong: 'TextField()',
+            correct: 'TextField({ name: "email", value: emailSignal })',
+          },
+        }
+      )
+    }
+
+    const [props] = args
+    if (!props || typeof props !== 'object') {
+      throw new FormsValidationError('TextField requires a props object', {
+        component: 'TextField',
+        suggestion: 'Pass a props object with name property',
+        example: {
+          wrong: 'TextField("email")',
+          correct: 'TextField({ name: "email" })',
+        },
+      })
+    }
+
+    const propsObj = props as any
+    if (!propsObj.name || typeof propsObj.name !== 'string') {
+      throw new FormsValidationError(
+        'TextField name property is required and must be a string',
+        {
+          component: 'TextField',
+          suggestion: 'Provide a unique name for the field',
+          example: {
+            wrong: 'TextField({ placeholder: "Email" })',
+            correct: 'TextField({ name: "email", placeholder: "Email" })',
+          },
+        }
+      )
+    }
+  },
+
+  // EmailField Component
+  validateEmailField(args: unknown[]): void {
+    if (args.length === 0) {
+      throw new FormsValidationError(
+        'EmailField component requires a props object with name',
+        {
+          component: 'EmailField',
+          suggestion: 'Add name property: EmailField({ name: "email" })',
+          documentation:
+            'https://docs.tachui.dev/advanced-forms/components/emailfield',
+          example: {
+            wrong: 'EmailField()',
+            correct: 'EmailField({ name: "email", value: emailSignal })',
+          },
+        }
+      )
+    }
+
+    const [props] = args
+    if (!props || typeof props !== 'object') {
+      throw new FormsValidationError('EmailField requires a props object', {
+        component: 'EmailField',
+        suggestion: 'Pass a props object with name property',
+        example: {
+          wrong: 'EmailField("email@example.com")',
+          correct: 'EmailField({ name: "email", value: "email@example.com" })',
+        },
+      })
+    }
+
+    const propsObj = props as any
+    if (!propsObj.name || typeof propsObj.name !== 'string') {
+      throw new FormsValidationError(
+        'EmailField name property is required and must be a string',
+        {
+          component: 'EmailField',
+          suggestion: 'Provide a unique name for the email field',
+          example: {
+            wrong: 'EmailField({ placeholder: "Email" })',
+            correct: 'EmailField({ name: "email", placeholder: "Email" })',
+          },
+        }
+      )
+    }
+  },
+
+  // PasswordField Component
+  validatePasswordField(args: unknown[]): void {
+    if (args.length === 0) {
+      throw new FormsValidationError(
+        'PasswordField component requires a props object with name',
+        {
+          component: 'PasswordField',
+          suggestion: 'Add name property: PasswordField({ name: "password" })',
+          documentation:
+            'https://docs.tachui.dev/advanced-forms/components/passwordfield',
+          example: {
+            wrong: 'PasswordField()',
+            correct:
+              'PasswordField({ name: "password", value: passwordSignal })',
+          },
+        }
+      )
+    }
+
+    const [props] = args
+    if (!props || typeof props !== 'object') {
+      throw new FormsValidationError('PasswordField requires a props object', {
+        component: 'PasswordField',
+        suggestion: 'Pass a props object with name property',
+        example: {
+          wrong: 'PasswordField("password")',
+          correct: 'PasswordField({ name: "password", value: passwordSignal })',
+        },
+      })
+    }
+
+    const propsObj = props as any
+    if (!propsObj.name || typeof propsObj.name !== 'string') {
+      throw new FormsValidationError(
+        'PasswordField name property is required and must be a string',
+        {
+          component: 'PasswordField',
+          suggestion: 'Provide a unique name for the password field',
+          example: {
+            wrong: 'PasswordField({ placeholder: "Password" })',
+            correct:
+              'PasswordField({ name: "password", placeholder: "Password" })',
+          },
+        }
+      )
+    }
+  },
+
+  // PhoneField Component
+  validatePhoneField(args: unknown[]): void {
+    if (args.length === 0) {
+      throw new FormsValidationError(
+        'PhoneField component requires a props object with name',
+        {
+          component: 'PhoneField',
+          suggestion: 'Add name property: PhoneField({ name: "phone" })',
+          documentation:
+            'https://docs.tachui.dev/advanced-forms/components/phonefield',
+          example: {
+            wrong: 'PhoneField()',
+            correct: 'PhoneField({ name: "phone", format: "US" })',
+          },
+        }
+      )
+    }
+
+    const [props] = args
+    if (!props || typeof props !== 'object') {
+      throw new FormsValidationError('PhoneField requires a props object', {
+        component: 'PhoneField',
+        suggestion: 'Pass a props object with name property',
+        example: {
+          wrong: 'PhoneField("(555) 123-4567")',
+          correct: 'PhoneField({ name: "phone", value: phoneSignal })',
+        },
+      })
+    }
+
+    const propsObj = props as any
+    if (!propsObj.name || typeof propsObj.name !== 'string') {
+      throw new FormsValidationError(
+        'PhoneField name property is required and must be a string',
+        {
+          component: 'PhoneField',
+          suggestion: 'Provide a unique name for the phone field',
+          example: {
+            wrong: 'PhoneField({ format: "US" })',
+            correct: 'PhoneField({ name: "phone", format: "US" })',
+          },
+        }
+      )
+    }
+  },
+
+  // NumberField Component
+  validateNumberField(args: unknown[]): void {
+    if (args.length === 0) {
+      throw new FormsValidationError(
+        'NumberField component requires a props object with name',
+        {
+          component: 'NumberField',
+          suggestion: 'Add name property: NumberField({ name: "amount" })',
+          documentation:
+            'https://docs.tachui.dev/advanced-forms/components/numberfield',
+          example: {
+            wrong: 'NumberField()',
+            correct: 'NumberField({ name: "amount", min: 0, max: 100 })',
+          },
+        }
+      )
+    }
+
+    const [props] = args
+    if (!props || typeof props !== 'object') {
+      throw new FormsValidationError('NumberField requires a props object', {
+        component: 'NumberField',
+        suggestion: 'Pass a props object with name property',
+        example: {
+          wrong: 'NumberField(42)',
+          correct: 'NumberField({ name: "amount", value: 42 })',
+        },
+      })
+    }
+
+    const propsObj = props as any
+    if (!propsObj.name || typeof propsObj.name !== 'string') {
+      throw new FormsValidationError(
+        'NumberField name property is required and must be a string',
+        {
+          component: 'NumberField',
+          suggestion: 'Provide a unique name for the number field',
+          example: {
+            wrong: 'NumberField({ min: 0, max: 100 })',
+            correct: 'NumberField({ name: "amount", min: 0, max: 100 })',
+          },
+        }
+      )
+    }
+  },
+
+  // CreditCardField Component
+  validateCreditCardField(args: unknown[]): void {
+    if (args.length === 0) {
+      throw new FormsValidationError(
+        'CreditCardField component requires a props object with name',
+        {
+          component: 'CreditCardField',
+          suggestion:
+            'Add name property: CreditCardField({ name: "cardNumber" })',
+          documentation:
+            'https://docs.tachui.dev/advanced-forms/components/creditcardfield',
+          example: {
+            wrong: 'CreditCardField()',
+            correct:
+              'CreditCardField({ name: "cardNumber", onChange: handleChange })',
+          },
+        }
+      )
+    }
+
+    const [props] = args
+    if (!props || typeof props !== 'object') {
+      throw new FormsValidationError(
+        'CreditCardField requires a props object',
+        {
+          component: 'CreditCardField',
+          suggestion: 'Pass a props object with name property',
+          example: {
+            wrong: 'CreditCardField("4111111111111111")',
+            correct:
+              'CreditCardField({ name: "cardNumber", value: cardSignal })',
+          },
+        }
+      )
+    }
+
+    const propsObj = props as any
+    if (!propsObj.name || typeof propsObj.name !== 'string') {
+      throw new FormsValidationError(
+        'CreditCardField name property is required and must be a string',
+        {
+          component: 'CreditCardField',
+          suggestion: 'Provide a unique name for the credit card field',
+          example: {
+            wrong: 'CreditCardField({ placeholder: "Card Number" })',
+            correct:
+              'CreditCardField({ name: "cardNumber", placeholder: "Card Number" })',
+          },
+        }
+      )
+    }
+  },
+
+  // Additional Forms components would go here...
+  // (SearchField, URLField, TextArea, ColorField, etc.)
+}
+
+/**
+ * Create Forms component validators for registration
+ */
+export function createFormsValidators(): ComponentValidator[] {
+  return [
+    {
+      packageName: 'advanced-forms',
+      componentName: 'TextField',
+      validate: FormsComponentValidation.validateTextField,
+    },
+    {
+      packageName: 'advanced-forms',
+      componentName: 'EmailField',
+      validate: FormsComponentValidation.validateEmailField,
+    },
+    {
+      packageName: 'advanced-forms',
+      componentName: 'PasswordField',
+      validate: FormsComponentValidation.validatePasswordField,
+    },
+    {
+      packageName: 'advanced-forms',
+      componentName: 'PhoneField',
+      validate: FormsComponentValidation.validatePhoneField,
+    },
+    {
+      packageName: 'advanced-forms',
+      componentName: 'NumberField',
+      validate: FormsComponentValidation.validateNumberField,
+    },
+    {
+      packageName: 'advanced-forms',
+      componentName: 'CreditCardField',
+      validate: FormsComponentValidation.validateCreditCardField,
+    },
+    // Additional validators would be added here for remaining Forms components
+  ]
+}
+
+/**
+ * Register Forms validators with Core validation system
+ */
+export async function registerFormsValidators(): Promise<void> {
+  try {
+    // Dynamic import to avoid circular dependency
+    const { registerComponentValidator } = await import(
+      '@tachui/core/validation'
+    )
+
+    const validators = createFormsValidators()
+
+    for (const validator of validators) {
+      registerComponentValidator(validator)
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      console.info(
+        `🔍 [@tachui/advanced-forms] Registered ${validators.length} component validators`
+      )
+    }
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        '⚠️ [@tachui/advanced-forms] Could not register validators with Core:',
+        error
+      )
+    }
+  }
+}
+
+// Auto-register when Forms package loads
+if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
+  setTimeout(registerFormsValidators, 10)
+}