@tachui/core 0.7.0-alpha1

package/src/components/Section.ts

@@ -0,0 +1,472 @@
+/**
+ * Enhanced Section Component (Phase 6.4.2)
+ *
+ * @deprecated This component has been superseded by FormSection from @tachui/forms 
+ * for form contexts, which provides the same features with better semantic HTML.
+ * For general layout grouping, use VStack or HStack with styling instead.
+ *
+ * Migration Guide:
+ * - For forms: Replace with FormSection from @tachui/forms
+ * - For general grouping: Use VStack with styling modifiers
+ * - All props are compatible between Section and FormSection
+ *
+ * SwiftUI-inspired Section component for grouping form content
+ * with headers, footers, and automatic styling.
+ */
+
+import type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'
+import { isSignal } from '../reactive'
+import type { Signal } from '../reactive/types'
+import { h, text } from '../runtime'
+import type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'
+import { withModifiers } from './wrapper'
+
+/**
+ * Section component properties
+ */
+export interface SectionProps extends ComponentProps {
+  children?: ComponentInstance[]
+
+  // Content
+  header?: string | (() => string) | Signal<string> | ComponentInstance
+  footer?: string | (() => string) | Signal<string> | ComponentInstance
+
+  // Styling
+  style?: 'automatic' | 'grouped' | 'inset' | 'plain' | 'sidebar'
+  spacing?: number
+
+  // Behavior
+  collapsible?: boolean
+  collapsed?: boolean | Signal<boolean>
+  onToggle?: (collapsed: boolean) => void
+
+  // Accessibility
+  accessibilityLabel?: string
+  accessibilityRole?: string
+}
+
+/**
+ * Enhanced Section component class
+ */
+export class EnhancedSection implements ComponentInstance<SectionProps> {
+  public readonly type = 'component' as const
+  public readonly id: string
+  public mounted = false
+  public cleanup: (() => void)[] = []
+
+  constructor(public props: SectionProps) {
+    this.id = `section-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  /**
+   * Resolve dynamic content
+   */
+  private resolveContent(
+    content: string | (() => string) | Signal<string> | ComponentInstance | undefined
+  ): string | ComponentInstance | null {
+    if (!content) return null
+
+    if (typeof content === 'string') {
+      return content
+    } else if (typeof content === 'function') {
+      return content()
+    } else if (isSignal(content)) {
+      return (content as () => string)()
+    } else {
+      return content as ComponentInstance
+    }
+  }
+
+  /**
+   * Check if section is collapsed
+   */
+  private isCollapsed(): boolean {
+    const { collapsed } = this.props
+    if (typeof collapsed === 'boolean') return collapsed
+    if (isSignal(collapsed)) return (collapsed as () => boolean)()
+    return false
+  }
+
+  /**
+   * Handle toggle action
+   */
+  private handleToggle = () => {
+    if (this.props.onToggle) {
+      this.props.onToggle(!this.isCollapsed())
+    }
+  }
+
+  /**
+   * Helper to render component content safely
+   */
+  private renderComponentContent(content: ComponentInstance): DOMNode[] {
+    const rendered = content.render()
+    return Array.isArray(rendered) ? rendered : [rendered]
+  }
+
+  /**
+   * Get section styles based on style prop
+   */
+  private getSectionStyles() {
+    const { style = 'automatic' } = this.props
+
+    const baseStyles = {
+      marginBottom: '20px',
+    }
+
+    switch (style) {
+      case 'grouped':
+        return {
+          ...baseStyles,
+          backgroundColor: '#ffffff',
+          border: '1px solid #e0e0e0',
+          borderRadius: '12px',
+          overflow: 'hidden' as const,
+        }
+
+      case 'inset':
+        return {
+          ...baseStyles,
+          backgroundColor: '#f8f9fa',
+          border: '1px solid #e9ecef',
+          borderRadius: '8px',
+          margin: '0 16px 20px 16px',
+        }
+
+      case 'sidebar':
+        return {
+          ...baseStyles,
+          borderLeft: '3px solid #007AFF',
+          paddingLeft: '16px',
+          backgroundColor: '#f8f9fa',
+          borderRadius: '0 8px 8px 0',
+        }
+
+      case 'plain':
+        return baseStyles
+      default:
+        return {
+          ...baseStyles,
+          backgroundColor: '#ffffff',
+          border: '1px solid #f0f0f0',
+          borderRadius: '8px',
+        }
+    }
+  }
+
+  /**
+   * Get header styles
+   */
+  private getHeaderStyles() {
+    const { style = 'automatic' } = this.props
+
+    const baseStyles = {
+      fontSize: '16px',
+      fontWeight: '600' as const,
+      color: '#1a1a1a',
+      margin: '0 0 12px 0',
+    }
+
+    switch (style) {
+      case 'grouped':
+      case 'inset':
+        return {
+          ...baseStyles,
+          padding: '12px 16px 0 16px',
+          backgroundColor: '#f8f9fa',
+          borderBottom: '1px solid #e9ecef',
+        }
+
+      case 'sidebar':
+        return {
+          ...baseStyles,
+          fontSize: '14px',
+          textTransform: 'uppercase' as const,
+          letterSpacing: '0.5px',
+          color: '#666',
+          marginBottom: '8px',
+        }
+
+      default:
+        return {
+          ...baseStyles,
+          padding: '0 0 8px 0',
+        }
+    }
+  }
+
+  /**
+   * Get content styles
+   */
+  private getContentStyles() {
+    const { style = 'automatic', spacing = 12 } = this.props
+
+    const baseStyles = {
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: `${spacing}px`,
+    }
+
+    switch (style) {
+      case 'grouped':
+      case 'inset':
+        return {
+          ...baseStyles,
+          padding: '16px',
+        }
+
+      case 'sidebar':
+        return {
+          ...baseStyles,
+          padding: '8px 0',
+        }
+
+      default:
+        return {
+          ...baseStyles,
+          padding: '12px',
+        }
+    }
+  }
+
+  /**
+   * Get footer styles
+   */
+  private getFooterStyles() {
+    const { style = 'automatic' } = this.props
+
+    const baseStyles = {
+      fontSize: '14px',
+      color: '#666',
+      margin: '8px 0 0 0',
+    }
+
+    switch (style) {
+      case 'grouped':
+      case 'inset':
+        return {
+          ...baseStyles,
+          padding: '0 16px 12px 16px',
+          backgroundColor: '#f8f9fa',
+          borderTop: '1px solid #e9ecef',
+        }
+
+      default:
+        return {
+          ...baseStyles,
+          padding: '0 0 4px 0',
+        }
+    }
+  }
+
+  /**
+   * Render header content
+   */
+  private renderHeader() {
+    const headerContent = this.resolveContent(this.props.header)
+    if (!headerContent) return null
+
+    const headerStyles = this.getHeaderStyles()
+
+    // Add collapse toggle if collapsible
+    if (this.props.collapsible) {
+      const toggleIcon = this.isCollapsed() ? '▶' : '▼'
+
+      return h(
+        'div',
+        {
+          style: {
+            ...headerStyles,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+          },
+          onClick: this.handleToggle,
+        },
+        h(
+          'span',
+          {
+            style: {
+              fontSize: '12px',
+              color: '#666',
+            },
+          },
+          text(toggleIcon)
+        ),
+
+        ...(typeof headerContent === 'string'
+          ? [text(headerContent)]
+          : this.renderComponentContent(headerContent as ComponentInstance))
+      )
+    }
+
+    return h(
+      'div',
+      { style: headerStyles },
+      ...(typeof headerContent === 'string'
+        ? [text(headerContent)]
+        : this.renderComponentContent(headerContent as ComponentInstance))
+    )
+  }
+
+  /**
+   * Render content
+   */
+  private renderContent() {
+    const { children = [] } = this.props
+
+    // Don't render content if collapsed
+    if (this.props.collapsible && this.isCollapsed()) {
+      return null
+    }
+
+    if (children.length === 0) return null
+
+    return h(
+      'div',
+      {
+        style: this.getContentStyles(),
+      },
+      ...children.flatMap((child) => {
+        const rendered = child.render()
+        return Array.isArray(rendered) ? rendered : [rendered]
+      })
+    )
+  }
+
+  /**
+   * Render footer content
+   */
+  private renderFooter() {
+    const footerContent = this.resolveContent(this.props.footer)
+    if (!footerContent) return null
+
+    return h(
+      'div',
+      {
+        style: this.getFooterStyles(),
+      },
+      ...(typeof footerContent === 'string'
+        ? [text(footerContent)]
+        : this.renderComponentContent(footerContent as ComponentInstance))
+    )
+  }
+
+  render() {
+    const { accessibilityLabel, accessibilityRole = 'group' } = this.props
+
+    return h(
+      'div',
+      {
+        style: this.getSectionStyles(),
+        'aria-label': accessibilityLabel,
+        role: accessibilityRole,
+      },
+      ...[this.renderHeader(), this.renderContent(), this.renderFooter()].filter(
+        (item): item is DOMNode => item !== null
+      )
+    )
+  }
+}
+
+/**
+ * Section component function
+ * @deprecated Use FormSection from @tachui/forms for form contexts, or VStack for general grouping
+ */
+export function Section(
+  children: ComponentInstance[],
+  props: Omit<SectionProps, 'children'> = {}
+): ModifiableComponent<SectionProps> & {
+  modifier: ModifierBuilder<ModifiableComponent<SectionProps>>
+} {
+  console.warn(
+    'Section from @tachui/core is deprecated. Use FormSection from @tachui/forms for form contexts, or VStack for general layout grouping.'
+  )
+  const sectionProps: SectionProps = { ...props, children }
+  const component = new EnhancedSection(sectionProps)
+  return withModifiers(component)
+}
+
+/**
+ * Section with header
+ * @deprecated Use FormSection from @tachui/forms
+ */
+export function SectionWithHeader(
+  header: string | (() => string) | Signal<string> | ComponentInstance,
+  children: ComponentInstance[],
+  props: Omit<SectionProps, 'children' | 'header'> = {}
+) {
+  return Section(children, { ...props, header })
+}
+
+/**
+ * Section with header and footer
+ * @deprecated Use FormSection from @tachui/forms
+ */
+export function SectionWithHeaderFooter(
+  header: string | (() => string) | Signal<string> | ComponentInstance,
+  footer: string | (() => string) | Signal<string> | ComponentInstance,
+  children: ComponentInstance[],
+  props: Omit<SectionProps, 'children' | 'header' | 'footer'> = {}
+) {
+  return Section(children, { ...props, header, footer })
+}
+
+/**
+ * Section style variants
+ * @deprecated Use FormSection from @tachui/forms with style prop
+ */
+export const SectionStyles = {
+  /**
+   * Automatic section styling (default)
+   */
+  Automatic(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {
+    return Section(children, { ...props, style: 'automatic' })
+  },
+
+  /**
+   * Grouped section with container styling
+   */
+  Grouped(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {
+    return Section(children, { ...props, style: 'grouped' })
+  },
+
+  /**
+   * Inset section styling
+   */
+  Inset(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {
+    return Section(children, { ...props, style: 'inset' })
+  },
+
+  /**
+   * Sidebar-style section
+   */
+  Sidebar(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {
+    return Section(children, { ...props, style: 'sidebar' })
+  },
+
+  /**
+   * Plain section without styling
+   */
+  Plain(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {
+    return Section(children, { ...props, style: 'plain' })
+  },
+
+  /**
+   * Collapsible section
+   */
+  Collapsible(
+    header: string | (() => string) | Signal<string> | ComponentInstance,
+    children: ComponentInstance[],
+    collapsed: boolean | Signal<boolean> = false,
+    props: Omit<SectionProps, 'children' | 'header' | 'collapsible' | 'collapsed'> = {}
+  ) {
+    return Section(children, {
+      ...props,
+      header,
+      collapsible: true,
+      collapsed,
+    })
+  },
+}

package/src/components/Show.ts

@@ -0,0 +1,205 @@
+/**
+ * Show component for conditional rendering
+ *
+ * Reactive implementation that works with TachUI's reactive architecture
+ */
+
+import { createEffect, createRoot, isComputed, isSignal } from '../reactive'
+import type { ComponentInstance, DOMNode } from '../runtime/types'
+import { DOMRenderer } from '../runtime/renderer'
+
+export interface ShowProps {
+  /**
+   * Condition to determine if content should be shown
+   */
+  when: boolean | (() => boolean)
+
+  /**
+   * Content to render when condition is true
+   */
+  children: ComponentInstance
+
+  /**
+   * Optional fallback content when condition is false
+   */
+  fallback?: ComponentInstance
+}
+
+/**
+ * Show component implementation that integrates with TachUI's reactive system
+ */
+export class ShowComponent implements ComponentInstance<ShowProps> {
+  public readonly type = 'component' as const
+  public readonly id: string
+  public readonly props: ShowProps
+  public mounted = false
+  public cleanup: (() => void)[] = []
+
+  constructor(props: ShowProps) {
+    this.props = props
+    this.id = `show-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  /**
+   * Evaluate the condition
+   */
+  private evaluateCondition(): boolean {
+    const { when } = this.props
+
+    if (typeof when === 'boolean') {
+      return when
+    } else if (typeof when === 'function') {
+      return when()
+    } else if (isSignal(when) || isComputed(when)) {
+      return (when as () => boolean)()
+    }
+
+    return false
+  }
+
+  /**
+   * Get the content to render based on condition
+   */
+  private getContent(): ComponentInstance | null {
+    const condition = this.evaluateCondition()
+
+    const { children, fallback } = this.props
+    const content = condition ? children : fallback
+
+    if (!content) {
+      return null
+    }
+
+    return content
+  }
+
+  /**
+   * Render the Show component with self-contained reactivity like text() function
+   */
+  render(): DOMNode[] {
+    // Check if condition is reactive
+    const { when } = this.props
+    const isReactive = typeof when === 'function' || isSignal(when) || isComputed(when)
+    
+    if (!isReactive) {
+      // Static condition - simple render
+      const content = this.getContent()
+      if (!content) return []
+      
+      const rendered = content.render()
+      return Array.isArray(rendered) ? rendered : [rendered]
+    }
+
+    // Reactive condition - always create reactive container for consistency
+    const containerNode: DOMNode = {
+      type: 'element',
+      tag: 'div',
+      props: {
+        style: { display: 'contents' } // Make container invisible
+      },
+      children: [],
+      dispose: undefined,
+    }
+
+    // Create reactive effect that updates the container
+    const cleanup = createRoot(() => {
+      const effect = createEffect(() => {
+        const content = this.getContent()
+        
+        if (content) {
+          const rendered = content.render()
+          const nodes = Array.isArray(rendered) ? rendered : [rendered]
+          containerNode.children = nodes
+        } else {
+          containerNode.children = []
+        }
+        
+        // Update DOM if already rendered
+        if (containerNode.element && containerNode.element instanceof HTMLElement) {
+          this.updateContainerDOM(containerNode.element, containerNode.children)
+        }
+      })
+
+      return () => effect.dispose()
+    })
+
+    containerNode.dispose = cleanup
+
+    // Initialize with current content
+    const initialContent = this.getContent()
+    if (initialContent) {
+      const rendered = initialContent.render()
+      const nodes = Array.isArray(rendered) ? rendered : [rendered]
+      containerNode.children = nodes
+    }
+
+    return [containerNode]
+  }
+
+  /**
+   * Update the container DOM element with new children using TachUI's renderer
+   */
+  private updateContainerDOM(container: HTMLElement, children: DOMNode[]): void {
+    // Clear existing content
+    container.innerHTML = ''
+    
+    // Use TachUI's renderer to properly handle modifiers and reactivity
+    const renderer = new DOMRenderer()
+    
+    // Render new content using TachUI's renderer which handles modifiers
+    children.forEach(child => {
+      try {
+        const element = renderer.render(child)
+        if (element) {
+          container.appendChild(element)
+        }
+      } catch (error) {
+        console.error('Error rendering Show component child:', error)
+      }
+    })
+  }
+
+  /**
+   * Cleanup resources
+   */
+  dispose(): void {
+    this.cleanup.forEach(fn => {
+      try {
+        fn()
+      } catch (error) {
+        console.error('Show component cleanup error:', error)
+      }
+    })
+    this.cleanup = []
+  }
+}
+
+/**
+ * Create Show component for conditional rendering
+ */
+export function Show(props: ShowProps): ShowComponent {
+  return new ShowComponent(props)
+}
+
+/**
+ * Convenience function for simple conditional rendering
+ */
+export function When(
+  condition: boolean | (() => boolean),
+  content: ComponentInstance
+): ShowComponent {
+  return Show({ when: condition, children: content })
+}
+
+/**
+ * Convenience function for negated conditional rendering
+ */
+export function Unless(
+  condition: boolean | (() => boolean),
+  content: ComponentInstance
+): ShowComponent {
+  // Negate the condition for unless semantics
+  const negatedCondition = typeof condition === 'function' ? () => !condition() : !condition
+
+  return Show({ when: negatedCondition, children: content })
+}