deskforge 1.0.0 → 1.0.1

package/packages/ui/src/base/TextInput.ts

@@ -0,0 +1,113 @@
+/**
+ * TextInput Component
+ * 
+ * Text input field matching React Native TextInput props.
+ * Accepts style and configuration props. Returns DFNode.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * TextInput configuration properties
+ */
+export interface TextInputProps {
+  /** Initial text value */
+  value?: string
+  /** Placeholder text when empty */
+  placeholder?: string
+  /** Called when text changes */
+  onChangeText?: (text: string) => void
+  /** Called on focus */
+  onFocus?: () => void
+  /** Called on blur */
+  onBlur?: () => void
+  /** Keyboard type: 'default', 'numeric', 'email-address', 'phone-pad' */
+  keyboardType?: 'default' | 'numeric' | 'email-address' | 'phone-pad'
+  /** Return key type */
+  returnKeyType?: string
+  /** Placeholder text color */
+  placeholderTextColor?: string
+  /** Number of lines (mobile) */
+  numberOfLines?: number
+  /** Allow multiple lines */
+  multiline?: boolean
+  /** Editable state */
+  editable?: boolean
+  /** Max length of input */
+  maxLength?: number
+  /** Auto-capitalize mode */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters'
+  /** Auto-correct */
+  autoCorrect?: boolean
+  /** Security for password fields */
+  secureTextEntry?: boolean
+}
+
+/**
+ * TextInput - Text input field component
+ * 
+ * Single or multi-line text input field. Supports all React Native TextInput props.
+ * Automatically handles keyboard interactions and text changes.
+ * 
+ * @param style - StyleObject for sizing and appearance
+ * @param props - TextInputProps configuration object
+ * @returns DFNode object with type 'TextInput'
+ * 
+ * @example
+ * TextInput({ borderWidth: 1, borderColor: '#ccc', padding: 8 }, {
+ *   placeholder: 'Enter name',
+ *   onChangeText: (text) => updateName(text)
+ * })
+ * 
+ * TextInput({ 
+ *   flex: 1, 
+ *   padding: 12,
+ *   borderRadius: 8,
+ *   borderWidth: 1,
+ *   borderColor: '#e2e8f0'
+ * }, {
+ *   placeholder: 'Enter email',
+ *   keyboardType: 'email-address',
+ *   value: email,
+ *   onChangeText: setEmail
+ * })
+ * 
+ * TextInput({ flex: 1, padding: 8 }, {
+ *   placeholder: 'Enter password',
+ *   secureTextEntry: true,
+ *   value: password,
+ *   onChangeText: setPassword
+ * })
+ */
+export function TextInput(
+  style: StyleObject,
+  props: TextInputProps = {}
+): DFNode {
+  return createNode(
+    'TextInput',
+    {
+      style,
+      value: props.value ?? '',
+      placeholder: props.placeholder ?? '',
+      onChangeText: props.onChangeText,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      keyboardType: props.keyboardType ?? 'default',
+      returnKeyType: props.returnKeyType ?? 'done',
+      placeholderTextColor: props.placeholderTextColor,
+      numberOfLines: props.numberOfLines ?? 1,
+      multiline: props.multiline ?? false,
+      editable: props.editable ?? true,
+      maxLength: props.maxLength,
+      autoCapitalize: props.autoCapitalize ?? 'sentences',
+      autoCorrect: props.autoCorrect ?? true,
+      secureTextEntry: props.secureTextEntry ?? false,
+    } as Record<string, unknown>,
+    []
+  )
+}
+
+export type { StyleObject }

package/packages/ui/src/base/TouchableOpacity.ts

@@ -0,0 +1,52 @@
+/**
+ * TouchableOpacity Component
+ * 
+ * Tappable container with opacity animation on press.
+ * Like Pressable with built-in opacity feedback animation.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+import type { PressHandlers } from './Pressable'
+
+/**
+ * TouchableOpacity - Tappable container with opacity animation
+ * 
+ * Similar to Pressable but automatically applies opacity animation when pressed.
+ * Default opacity when active is 0.6. Returns to full opacity when released.
+ * 
+ * @param style - StyleObject containing layout and appearance properties
+ * @param handlers - PressHandlers object with onPress and other handlers
+ * @param children - Array of DFNode children to render inside
+ * @returns DFNode object with type 'TouchableOpacity'
+ * 
+ * @example
+ * TouchableOpacity({ padding: 12 }, {
+ *   onPress: () => navigate('details')
+ * }, [
+ *   Text('Go to Details', { fontSize: 16 })
+ * ])
+ */
+export function TouchableOpacity(
+  style: StyleObject,
+  handlers: PressHandlers = {},
+  children: DFNode[] = []
+): DFNode {
+  return createNode(
+    'TouchableOpacity',
+    {
+      style,
+      activeOpacity: 0.6,
+      onPress: handlers.onPress,
+      onLongPress: handlers.onLongPress,
+      onPressIn: handlers.onPressIn,
+      onPressOut: handlers.onPressOut,
+      disabled: handlers.disabled ?? false,
+    } as Record<string, unknown>,
+    children
+  )
+}
+
+export type { StyleObject, PressHandlers }

package/packages/ui/src/base/View.ts

@@ -0,0 +1,43 @@
+/**
+ * View Component
+ * 
+ * Primary container component in DeskForge. Maps to Column/Row based on flexDirection.
+ * Accepts style object and children array. Returns DFNode.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * View - Primary container component
+ * 
+ * Renders a flex container with optional children. flexDirection defaults to 'column'.
+ * All style properties from React Native are supported via StyleObject.
+ * 
+ * @param style - StyleObject containing layout, spacing, appearance properties
+ * @param children - Array of DFNode children to render inside the view
+ * @returns DFNode object with type 'View'
+ * 
+ * @example
+ * View({ flex: 1, backgroundColor: '#fff' }, [
+ *   Text('Hello', { fontSize: 16 }),
+ *   View({ height: 10 }, [])
+ * ])
+ */
+export function View(
+  style: StyleObject,
+  children: DFNode[] = []
+): DFNode {
+  return createNode(
+    'View',
+    {
+      style,
+      flexDirection: style.flexDirection ?? 'column',
+    } as Record<string, unknown>,
+    children
+  )
+}
+
+export type { StyleObject }

package/packages/ui/src/index.ts

@@ -1,33 +1,48 @@
-// index.ts
-// Public door into the entire UI package.
-// Import any component from here.
+/**
+ * DeskForge UI Components Package
+ * 
+ * Exports all UI components for building cross-platform interfaces.
+ * Pure functional syntax — no JSX, no HTML, no XML.
+ * 
+ * Import from 'deskforge':
+ * import { View, Text, Pressable, FlatList } from 'deskforge'
+ */
+
+// Base components
+export { View } from './base/View'
+export { Text } from './base/Text'
+export { Pressable, type PressHandlers } from './base/Pressable'
+export { Button } from './base/Button'
+export { TouchableOpacity } from './base/TouchableOpacity'
+export { Image, type ImageSource } from './base/Image'
+export { TextInput, type TextInputProps } from './base/TextInput'
+
+// List components
+export { ScrollView, type ScrollViewProps } from './list/ScrollView'
+export { FlatList, type FlatListProps } from './list/FlatList'
+export { SectionList, type SectionListProps, type Section } from './list/SectionList'
 
 // Layout components
-export * from './layout/index'
+export { SafeAreaView, type SafeAreaViewProps } from './layout/SafeAreaView'
+export { KeyboardAvoidingView, type KeyboardAvoidingViewProps } from './layout/KeyboardAvoidingView'
 
-// Typography components
-export * from './typography/index'
+// Overlay components
+export { Modal, type ModalProps } from './overlay/Modal'
+export { ActivityIndicator, type ActivityIndicatorProps } from './overlay/ActivityIndicator'
 
 // Input components
-export * from './input/index'
-
-// Display components
-export * from './display/index'
-
-// Feedback components
-export * from './feedback/index'
-
-// Navigation components
-export * from './navigation/index'
-
-// Overlay components
-export * from './overlay/index'
+export { Switch, type SwitchProps } from './input/Switch'
+export { Slider, type SliderProps } from './input/Slider'
+export { CheckBox, type CheckBoxProps } from './input/CheckBox'
 
-// Data components
-export * from './data/index'
+// Platform components
+export { StatusBar, type StatusBarProps } from './platform/StatusBar'
+export { Platform, type PlatformOS, type PlatformSelectOptions } from './platform/Platform'
 
-// Chart components
-export * from './charts/index'
+// Style types
+export type { StyleObject } from '@deskforge/core'
+export { StyleSheet } from '@deskforge/core'
 
-// Add this line to packages/ui/src/index.ts
-export * from './conditional/If'
+// Core types
+export type { DFNode } from '@deskforge/core'
+export { createNode } from '@deskforge/core'

package/packages/ui/src/input/CheckBox.ts

@@ -0,0 +1,69 @@
+/**
+ * CheckBox Component
+ * 
+ * Checkbox input matching React Native accessibility patterns.
+ * Binary check state with optional styling.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * CheckBox configuration properties
+ */
+export interface CheckBoxProps {
+  /** Checked color */
+  tintColor?: string
+  /** Unchecked color */
+  onTintColor?: string
+  /** Disabled state */
+  disabled?: boolean
+}
+
+/**
+ * CheckBox - Checkbox input component
+ * 
+ * Binary checkbox control. Fires onValueChange when toggled.
+ * Supports optional styling for checked/unchecked states.
+ * 
+ * @param value - Current checked state
+ * @param onValueChange - Callback fired when checkbox is toggled
+ * @param style - Optional StyleObject for sizing
+ * @param props - Optional CheckBoxProps configuration
+ * @returns DFNode object with type 'CheckBox'
+ * 
+ * @example
+ * CheckBox(isChecked, (newValue) => setIsChecked(newValue))
+ * 
+ * CheckBox(agreeToTerms, setAgreeToTerms, {}, {
+ *   tintColor: '#0077ff',
+ *   onTintColor: '#ccc'
+ * })
+ * 
+ * CheckBox(selected, toggleSelected, { width: 24, height: 24 }, {
+ *   tintColor: '#2ecc71'
+ * })
+ */
+export function CheckBox(
+  value: boolean,
+  onValueChange: (value: boolean) => void,
+  style?: StyleObject,
+  props: CheckBoxProps = {}
+): DFNode {
+  return createNode(
+    'CheckBox',
+    {
+      style: style ?? {},
+      value,
+      onValueChange,
+      tintColor: props.tintColor ?? '#0077ff',
+      onTintColor: props.onTintColor ?? '#ccc',
+      disabled: props.disabled ?? false,
+    } as Record<string, unknown>,
+    []
+  )
+}
+
+export type { StyleObject }

package/packages/ui/src/input/Slider.ts

@@ -57,8 +57,25 @@ interface SliderProps {
 }
 
 // Creates a range slider node
-// props — slider configuration
-function Slider(props: SliderProps = {}): DFNode {
+// Accepts flexible parameters: Slider(props) or Slider(style, props)
+function Slider(
+  styleOrProps?: any,
+  propsOverride?: SliderProps
+): DFNode {
+  let props: SliderProps = {}
+
+  // If first arg is object with style properties
+  if (styleOrProps && typeof styleOrProps === 'object') {
+    // Check if it looks like a style object (has layout properties)
+    if ('flex' in styleOrProps || 'width' in styleOrProps || 'height' in styleOrProps || 'padding' in styleOrProps) {
+      // First arg is style, second is props
+      props = { ...styleOrProps, ...propsOverride }
+    } else {
+      // First arg is props
+      props = styleOrProps
+    }
+  }
+
   return createNode('Slider', {
     min:         props.min         ?? 0,
     max:         props.max         ?? 100,

package/packages/ui/src/input/Switch.ts

@@ -0,0 +1,68 @@
+/**
+ * Switch Component
+ * 
+ * On/off toggle switch matching React Native Switch.
+ * Supports value and change callbacks.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * Switch configuration properties
+ */
+export interface SwitchProps {
+  /** On tint color */
+  onTintColor?: string
+  /** Off tint color */
+  offTintColor?: string
+  /** Thumb tint color */
+  thumbTintColor?: string
+  /** Disabled state */
+  disabled?: boolean
+}
+
+/**
+ * Switch - Toggle on/off component
+ * 
+ * Binary toggle switch control. Fires onValueChange callback when toggled.
+ * Supports styling for on/off states.
+ * 
+ * @param value - Current switch state (on/off)
+ * @param onValueChange - Callback fired when switch is toggled
+ * @param props - Optional SwitchProps configuration
+ * @returns DFNode object with type 'Switch'
+ * 
+ * @example
+ * Switch(isEnabled, (newValue) => setIsEnabled(newValue), {
+ *   onTintColor: '#2ecc71',
+ *   thumbTintColor: '#fff'
+ * })
+ * 
+ * Switch(darkMode, toggleDarkMode, {
+ *   onTintColor: '#0077ff',
+ *   offTintColor: '#ccc'
+ * })
+ */
+export function Switch(
+  value: boolean,
+  onValueChange: (value: boolean) => void,
+  props: SwitchProps = {}
+): DFNode {
+  return createNode(
+    'Switch',
+    {
+      value,
+      onValueChange,
+      onTintColor: props.onTintColor ?? '#2ecc71',
+      offTintColor: props.offTintColor ?? '#ccc',
+      thumbTintColor: props.thumbTintColor ?? '#fff',
+      disabled: props.disabled ?? false,
+    } as Record<string, unknown>,
+    []
+  )
+}
+
+export type { StyleObject }

package/packages/ui/src/layout/KeyboardAvoidingView.ts

@@ -0,0 +1,65 @@
+/**
+ * KeyboardAvoidingView Component
+ * 
+ * Adjusts layout when keyboard appears on mobile.
+ * Prevents content from being hidden behind keyboard.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * KeyboardAvoidingView configuration properties
+ */
+export interface KeyboardAvoidingViewProps {
+  /** Behavior when keyboard appears: 'height' | 'padding' | 'position' */
+  behavior?: 'height' | 'padding' | 'position'
+  /** Enable/disable adjustment */
+  enabled?: boolean
+  /** Offset amount in pixels */
+  keyboardVerticalOffset?: number
+}
+
+/**
+ * KeyboardAvoidingView - Keyboard-aware layout component
+ * 
+ * Automatically adjusts the view layout when software keyboard appears.
+ * Prevents content from being hidden behind the keyboard input.
+ * 
+ * @param style - StyleObject for sizing and appearance
+ * @param children - Array of DFNode children to render inside
+ * @param props - Optional KeyboardAvoidingViewProps configuration
+ * @returns DFNode object with type 'KeyboardAvoidingView'
+ * 
+ * @example
+ * KeyboardAvoidingView({ flex: 1 }, [
+ *   View({ flex: 1 }, [
+ *     Text('Enter your message', { padding: 16 })
+ *   ]),
+ *   TextInput({ padding: 12 }, {
+ *     placeholder: 'Type here...'
+ *   })
+ * ], {
+ *   behavior: 'padding'
+ * })
+ */
+export function KeyboardAvoidingView(
+  style: StyleObject,
+  children: DFNode[] = [],
+  props: KeyboardAvoidingViewProps = {}
+): DFNode {
+  return createNode(
+    'KeyboardAvoidingView',
+    {
+      style,
+      behavior: props.behavior ?? 'padding',
+      enabled: props.enabled ?? true,
+      keyboardVerticalOffset: props.keyboardVerticalOffset ?? 0,
+    } as Record<string, unknown>,
+    children
+  )
+}
+
+export type { StyleObject }

package/packages/ui/src/layout/SafeAreaView.ts

@@ -0,0 +1,58 @@
+/**
+ * SafeAreaView Component
+ * 
+ * Respects notch, status bar, and safe areas on mobile devices.
+ * Automatically adjusts insets based on device.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * SafeAreaView configuration properties
+ */
+export interface SafeAreaViewProps {
+  /** Top inset direction */
+  edges?: ('top' | 'bottom' | 'left' | 'right')[]
+}
+
+/**
+ * SafeAreaView - Safe area respecting container component
+ * 
+ * Automatically adjusts padding/layout to account for notches, status bars,
+ * and other device-specific safe areas on mobile devices.
+ * 
+ * @param style - StyleObject for sizing and appearance
+ * @param children - Array of DFNode children to render inside
+ * @param props - Optional SafeAreaViewProps configuration
+ * @returns DFNode object with type 'SafeAreaView'
+ * 
+ * @example
+ * SafeAreaView({ flex: 1, backgroundColor: '#fff' }, [
+ *   Text('Safe area content', { padding: 16 })
+ * ])
+ * 
+ * SafeAreaView({ flex: 1 }, [
+ *   // Content here automatically respects safe areas
+ * ], {
+ *   edges: ['top', 'bottom']
+ * })
+ */
+export function SafeAreaView(
+  style: StyleObject,
+  children: DFNode[] = [],
+  props: SafeAreaViewProps = {}
+): DFNode {
+  return createNode(
+    'SafeAreaView',
+    {
+      style,
+      edges: props.edges ?? ['top', 'bottom', 'left', 'right'],
+    } as Record<string, unknown>,
+    children
+  )
+}
+
+export type { StyleObject }

package/packages/ui/src/list/FlatList.ts

@@ -0,0 +1,111 @@
+/**
+ * FlatList Component
+ * 
+ * Optimized list renderer for large datasets.
+ * Supports virtualization and performance optimizations.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * FlatList configuration properties
+ */
+export interface FlatListProps {
+  /** Item separator component renderer */
+  ItemSeparatorComponent?: () => DFNode
+  /** Rendered at start of list */
+  ListHeaderComponent?: DFNode
+  /** Rendered at end of list */
+  ListFooterComponent?: DFNode
+  /** Rendered when list is empty */
+  ListEmptyComponent?: DFNode
+  /** Number of items to render at once (optimization) */
+  initialNumToRender?: number
+  /** Scroll callback */
+  onScroll?: (offset: { x: number; y: number }) => void
+  /** Fired at end of list */
+  onEndReached?: () => void
+  /** Distance from end to trigger onEndReached */
+  onEndReachedThreshold?: number
+  /** Horizontal scroll */
+  horizontal?: boolean
+  /** Enable scroll indicators */
+  showsVerticalScrollIndicator?: boolean
+  /** Bounce effect */
+  bounces?: boolean
+  /** Column count for grid */
+  numColumns?: number
+}
+
+/**
+ * FlatList - Optimized list renderer component
+ * 
+ * High-performance list component with virtualization. Renders large datasets
+ * efficiently by only rendering visible items. Generic over item type.
+ * 
+ * @param data - Array of items to render
+ * @param renderItem - Function that renders each item — receives (item, index)
+ * @param style - Optional StyleObject for sizing
+ * @param props - Optional FlatListProps configuration
+ * @returns DFNode object with type 'FlatList'
+ * 
+ * @example
+ * FlatList(
+ *   [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }],
+ *   (item) => Text(item.name, { padding: 12 }),
+ *   { flex: 1 }
+ * )
+ * 
+ * FlatList(
+ *   users,
+ *   (user, index) => Pressable(
+ *     { padding: 12, borderBottomWidth: 1, borderBottomColor: '#eee' },
+ *     { onPress: () => selectUser(user.id) },
+ *     [
+ *       Text(user.name, { fontSize: 16, fontWeight: 'bold' }),
+ *       Text(user.email, { fontSize: 12, color: '#666', marginTop: 4 })
+ *     ]
+ *   ),
+ *   { flex: 1 },
+ *   {
+ *     ItemSeparatorComponent: () => View({ height: 1, backgroundColor: '#f0f0f0' }, []),
+ *     onEndReached: () => loadMore(),
+ *     onEndReachedThreshold: 0.5
+ *   }
+ * )
+ */
+export function FlatList<T>(
+  data: T[],
+  renderItem: (item: T, index: number) => DFNode,
+  style?: StyleObject,
+  props: FlatListProps = {}
+): DFNode {
+  const items = data.map((item, index) => renderItem(item, index))
+
+  return createNode(
+    'FlatList',
+    {
+      style: style ?? {},
+      data,
+      renderItem,
+      ItemSeparatorComponent: props.ItemSeparatorComponent,
+      ListHeaderComponent: props.ListHeaderComponent,
+      ListFooterComponent: props.ListFooterComponent,
+      ListEmptyComponent: props.ListEmptyComponent,
+      initialNumToRender: props.initialNumToRender ?? 10,
+      onScroll: props.onScroll,
+      onEndReached: props.onEndReached,
+      onEndReachedThreshold: props.onEndReachedThreshold ?? 0.1,
+      horizontal: props.horizontal ?? false,
+      showsVerticalScrollIndicator: props.showsVerticalScrollIndicator ?? true,
+      bounces: props.bounces ?? true,
+      numColumns: props.numColumns ?? 1,
+    } as Record<string, unknown>,
+    items
+  )
+}
+
+export type { StyleObject }