@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/src/compiler/types.ts

@@ -1,177 +0,0 @@
-/**
- * TypeScript definitions for the TachUI compiler system
- */
-
-export interface TachUIPluginOptions {
-  /**
-   * File extensions to transform (default: ['.tsx', '.ts'])
-   */
-  include?: string[]
-
-  /**
-   * File patterns to exclude from transformation
-   */
-  exclude?: string[]
-
-  /**
-   * Enable development mode optimizations
-   */
-  dev?: boolean
-
-  /**
-   * Custom transformer options
-   */
-  transform?: TransformOptions
-}
-
-export interface TransformOptions {
-  /**
-   * Enable tree-shaking optimizations
-   */
-  treeShaking?: boolean
-
-  /**
-   * Enable compile-time constant folding
-   */
-  constantFolding?: boolean
-
-  /**
-   * Generate source maps
-   */
-  sourceMaps?: boolean
-
-  /**
-   * Target output format
-   */
-  target?: 'es2020' | 'es2022' | 'esnext'
-}
-
-/**
- * AST Node types for SwiftUI syntax parsing
- */
-export interface ASTNode {
-  type: string
-  loc?: SourceLocation
-}
-
-export interface SourceLocation {
-  start: Position
-  end: Position
-  source?: string
-}
-
-export interface Position {
-  line: number
-  column: number
-  offset: number
-}
-
-/**
- * SwiftUI Component AST Nodes
- */
-export interface ComponentNode extends ASTNode {
-  type: 'Component'
-  name: string
-  children: ASTNode[]
-  modifiers: ModifierNode[]
-}
-
-export interface ModifierNode extends ASTNode {
-  type: 'Modifier'
-  name: string
-  arguments: Expression[]
-}
-
-export interface Expression extends ASTNode {
-  type:
-    | 'Literal'
-    | 'Identifier'
-    | 'CallExpression'
-    | 'ArrowFunction'
-    | 'MemberExpression'
-    | 'ArrayExpression'
-}
-
-/**
- * Advanced AST Node Types (Phase 2.1.2)
- */
-export interface ConditionalNode extends ASTNode {
-  type: 'Conditional'
-  condition: Expression
-  thenBody: ASTNode[]
-  elseBody?: ASTNode[] | undefined
-}
-
-export interface ForEachNode extends ASTNode {
-  type: 'ForEach'
-  iterable: Expression
-  itemIdentifier: string
-  body: ASTNode[]
-}
-
-export interface StateBindingNode extends ASTNode {
-  type: 'StateBinding'
-  identifier: string
-  initialValue?: Expression
-}
-
-export interface PropertyWrapperNode extends ASTNode {
-  type: 'PropertyWrapper'
-  wrapper: 'State' | 'Computed' | 'Effect'
-  identifier: string
-  initialValue?: Expression | undefined
-}
-
-export interface CallExpressionNode extends Expression {
-  type: 'CallExpression'
-  callee: Expression
-  arguments: Expression[]
-}
-
-export interface MemberExpressionNode extends Expression {
-  type: 'MemberExpression'
-  object: string
-  property: string
-}
-
-export interface ArrayExpressionNode extends Expression {
-  type: 'ArrayExpression'
-  elements: Expression[]
-}
-
-export interface LiteralExpression extends Expression {
-  type: 'Literal'
-  value: string | number | boolean
-  raw: string
-}
-
-export interface IdentifierExpression extends Expression {
-  type: 'Identifier'
-  name: string
-}
-
-/**
- * Layout component types
- */
-export type LayoutComponent = 'VStack' | 'HStack' | 'ZStack' | 'List' | 'Form'
-
-/**
- * UI component types
- */
-export type UIComponent = 'Text' | 'Button' | 'Image' | 'TextField' | 'Toggle'
-
-/**
- * Modifier types
- */
-export interface ModifierMapping {
-  padding: (value?: number | string) => string
-  background: (color: string) => string
-  foregroundColor: (color: string) => string
-  font: (size: string | number) => string
-  border: (width: number, color: string) => string
-  cornerRadius: (radius: number) => string
-  shadow: (radius: number, offset?: { x: number; y: number }) => string
-  opacity: (value: number) => string
-  frame: (width?: number, height?: number) => string
-  onTapGesture: (handler: () => void) => void
-}

package/src/components/BasicInput.ts

@@ -1,352 +0,0 @@
-/**
- * BasicInput Component (Phase 1)
- *
- * Lightweight text input component for Core-only applications.
- * Provides SwiftUI-style reactive binding without the complexity
- * of the Forms plugin validation and formatting system.
- */
-
-import type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'
-import { createEffect, isSignal } from '../reactive'
-import type { Signal } from '../reactive/types'
-import { h } from '../runtime'
-import type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'
-import { withModifiers } from './wrapper'
-import {
-  ComponentWithCSSClasses,
-  type CSSClassesProps
-} from '../css-classes'
-
-/**
- * BasicInput supported input types
- */
-export type BasicInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url'
-
-/**
- * BasicInput component properties with CSS classes support
- */
-export interface BasicInputProps extends ComponentProps, CSSClassesProps {
-  // Core reactive binding
-  text: Signal<string>
-  setText?: (value: string) => void
-
-  // Input configuration
-  placeholder?: string | Signal<string>
-  inputType?: BasicInputType | Signal<BasicInputType>
-  disabled?: boolean | Signal<boolean>
-  readonly?: boolean | Signal<boolean>
-
-  // Behavior
-  onChange?: (text: string) => void
-  onSubmit?: (text: string) => void
-  onFocus?: () => void
-  onBlur?: () => void
-
-  // Accessibility
-  accessibilityLabel?: string
-  accessibilityHint?: string
-}
-
-/**
- * BasicInput theme configuration
- */
-export interface BasicInputTheme {
-  colors: {
-    background: string
-    border: string
-    text: string
-    placeholder: string
-    focusBorder: string
-    disabledBackground: string
-    disabledText: string
-  }
-  spacing: {
-    padding: number
-    borderWidth: number
-  }
-  borderRadius: number
-  fontSize: number
-  fontFamily: string
-  transition: string
-}
-
-/**
- * Default BasicInput theme
- */
-const defaultBasicInputTheme: BasicInputTheme = {
-  colors: {
-    background: '#FFFFFF',
-    border: '#D1D1D6',
-    text: '#000000',
-    placeholder: '#8E8E93',
-    focusBorder: '#007AFF',
-    disabledBackground: '#F2F2F7',
-    disabledText: '#8E8E93',
-  },
-  spacing: {
-    padding: 8,
-    borderWidth: 1,
-  },
-  borderRadius: 4,
-  fontSize: 16,
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  transition: 'border-color 0.2s ease, background-color 0.2s ease',
-}
-
-/**
- * BasicInput component implementation with CSS classes support
- */
-export class BasicInputComponent extends ComponentWithCSSClasses implements ComponentInstance<BasicInputProps> {
-  public readonly type = 'component' as const
-  public readonly id: string
-  public readonly props: BasicInputProps
-  private theme: BasicInputTheme = defaultBasicInputTheme
-  private inputElement: HTMLInputElement | null = null
-
-  constructor(props: BasicInputProps) {
-    super()
-    this.props = props
-    this.id = `basicinput-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-  }
-
-  private resolveValue<T>(value: T | Signal<T>): T {
-    return isSignal(value) ? value() : value
-  }
-
-  private getText(): string {
-    return this.resolveValue(this.props.text)
-  }
-
-  private setText(value: string): void {
-    if (this.props.setText) {
-      this.props.setText(value)
-    }
-  }
-
-  private getPlaceholder(): string {
-    return this.resolveValue(this.props.placeholder || '')
-  }
-
-  private getInputType(): BasicInputType {
-    return this.resolveValue(this.props.inputType || 'text')
-  }
-
-  private isDisabled(): boolean {
-    return this.resolveValue(this.props.disabled || false)
-  }
-
-  private isReadonly(): boolean {
-    return this.resolveValue(this.props.readonly || false)
-  }
-
-  private handleInput = (e: Event): void => {
-    const target = e.target as HTMLInputElement
-    const value = target.value
-
-    // Update reactive signal
-    this.setText(value)
-
-    // Call onChange callback
-    if (this.props.onChange) {
-      this.props.onChange(value)
-    }
-  }
-
-  private handleKeyDown = (e: KeyboardEvent): void => {
-    if (e.key === 'Enter' && this.props.onSubmit) {
-      e.preventDefault()
-      this.props.onSubmit(this.getText())
-    }
-  }
-
-  private handleFocus = (): void => {
-    if (this.props.onFocus) {
-      this.props.onFocus()
-    }
-
-    // Update focus border color
-    if (this.inputElement) {
-      this.inputElement.style.borderColor = this.theme.colors.focusBorder
-    }
-  }
-
-  private handleBlur = (): void => {
-    if (this.props.onBlur) {
-      this.props.onBlur()
-    }
-
-    // Reset border color
-    if (this.inputElement) {
-      this.inputElement.style.borderColor = this.theme.colors.border
-    }
-  }
-
-  private getInputStyles(): Record<string, string> {
-    const disabled = this.isDisabled()
-
-    return {
-      width: '100%',
-      padding: `${this.theme.spacing.padding}px`,
-      border: `${this.theme.spacing.borderWidth}px solid ${this.theme.colors.border}`,
-      borderRadius: `${this.theme.borderRadius}px`,
-      backgroundColor: disabled
-        ? this.theme.colors.disabledBackground
-        : this.theme.colors.background,
-      color: disabled ? this.theme.colors.disabledText : this.theme.colors.text,
-      fontSize: `${this.theme.fontSize}px`,
-      fontFamily: this.theme.fontFamily,
-      outline: 'none',
-      transition: this.theme.transition,
-      cursor: disabled ? 'not-allowed' : 'text',
-    }
-  }
-
-  render(): DOMNode[] {
-    const currentText = this.getText()
-    const placeholder = this.getPlaceholder()
-    const inputType = this.getInputType()
-    const disabled = this.isDisabled()
-    const readonly = this.isReadonly()
-
-    // Process CSS classes for this component
-    const baseClasses = ['tachui-basic-input']
-    const classString = this.createClassString(this.props, baseClasses)
-    
-    const input = h('input', {
-      id: this.id,
-      className: classString,
-      type: inputType,
-      value: currentText,
-      placeholder: placeholder,
-      disabled: disabled,
-      readonly: readonly,
-      'aria-label': this.props.accessibilityLabel,
-      'aria-describedby': this.props.accessibilityHint ? `${this.id}-hint` : undefined,
-      style: this.getInputStyles(),
-      oninput: this.handleInput,
-      onkeydown: this.handleKeyDown,
-      onfocus: this.handleFocus,
-      onblur: this.handleBlur,
-    })
-
-    // Store reference to input element
-    this.inputElement = input.element as HTMLInputElement
-
-    // Set up reactive effects for dynamic updates
-    createEffect(() => {
-      if (this.inputElement && isSignal(this.props.text)) {
-        const newValue = this.getText()
-        if (this.inputElement.value !== newValue) {
-          this.inputElement.value = newValue
-        }
-      }
-    })
-
-    createEffect(() => {
-      if (
-        this.inputElement &&
-        (isSignal(this.props.placeholder) ||
-          isSignal(this.props.inputType) ||
-          isSignal(this.props.disabled))
-      ) {
-        // Update placeholder
-        if (isSignal(this.props.placeholder)) {
-          this.inputElement.placeholder = this.getPlaceholder()
-        }
-
-        // Update input type
-        if (isSignal(this.props.inputType)) {
-          this.inputElement.type = this.getInputType()
-        }
-
-        // Update disabled state
-        if (isSignal(this.props.disabled)) {
-          this.inputElement.disabled = this.isDisabled()
-        }
-      }
-    })
-
-    return [input]
-  }
-}
-
-/**
- * Create a BasicInput component
- */
-export function BasicInput(props: BasicInputProps): ModifiableComponent<BasicInputProps> & {
-  modifier: ModifierBuilder<ModifiableComponent<BasicInputProps>>
-} {
-  return withModifiers(new BasicInputComponent(props))
-}
-
-/**
- * BasicInput utility functions and presets
- */
-export const BasicInputUtils = {
-  /**
-   * Create a search input
-   */
-  search(
-    text: Signal<string>,
-    setText: (value: string) => void,
-    onSearch?: (query: string) => void
-  ): BasicInputProps {
-    return {
-      text,
-      setText,
-      inputType: 'search',
-      placeholder: 'Search...',
-      onSubmit: onSearch,
-    }
-  },
-
-  /**
-   * Create an email input
-   */
-  email(text: Signal<string>, setText: (value: string) => void): BasicInputProps {
-    return {
-      text,
-      setText,
-      inputType: 'email',
-      placeholder: 'Enter email address',
-    }
-  },
-
-  /**
-   * Create a password input
-   */
-  password(text: Signal<string>, setText: (value: string) => void): BasicInputProps {
-    return {
-      text,
-      setText,
-      inputType: 'password',
-      placeholder: 'Enter password',
-    }
-  },
-
-  /**
-   * Create a phone number input
-   */
-  phone(text: Signal<string>, setText: (value: string) => void): BasicInputProps {
-    return {
-      text,
-      setText,
-      inputType: 'tel',
-      placeholder: 'Enter phone number',
-    }
-  },
-}
-
-/**
- * BasicInput styles and theming
- */
-export const BasicInputStyles = {
-  theme: defaultBasicInputTheme,
-
-  /**
-   * Create a custom theme
-   */
-  createTheme(overrides: Partial<BasicInputTheme>): BasicInputTheme {
-    return { ...defaultBasicInputTheme, ...overrides }
-  },
-}