deskforge 1.0.0 → 1.0.1

package/examples/deskforge-app/screens/NotesApp.ts

@@ -0,0 +1,376 @@
+/**
+ * Notes App - Complete Example
+ * 
+ * Demonstrates View, Text, Pressable, FlatList, TextInput, Modal, 
+ * State management, and StyleSheet usage.
+ */
+
+import {
+  View,
+  Text,
+  Pressable,
+  FlatList,
+  TextInput,
+  Modal,
+  Button,
+  ScrollView,
+  StyleSheet,
+} from '@deskforge/ui/src'
+import { State, Effect } from '@deskforge/state/src'
+import { DB } from '@deskforge/db/src'
+import { Toast } from '@deskforge/notifications/src'
+import { Router } from '@deskforge/router/src'
+
+/**
+ * Note data structure
+ */
+interface Note {
+  id: string
+  title: string
+  content: string
+  createdAt: number
+  updatedAt: number
+}
+
+/**
+ * Style definitions - all properties match React Native exactly
+ */
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fc',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#ffffff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#111111',
+  },
+  addButton: {
+    backgroundColor: '#0077ff',
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  addButtonText: {
+    color: '#ffffff',
+    fontWeight: 'bold',
+    fontSize: 14,
+  },
+  noteCard: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    padding: 16,
+    marginHorizontal: 16,
+    marginTop: 12,
+    marginBottom: 0,
+    shadowColor: '#000000',
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  noteTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#111111',
+    marginBottom: 8,
+  },
+  notePreview: {
+    fontSize: 14,
+    color: '#666666',
+    lineHeight: 20,
+  },
+  noteTimestamp: {
+    fontSize: 12,
+    color: '#999999',
+    marginTop: 8,
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  emptyStateText: {
+    fontSize: 16,
+    color: '#999999',
+    textAlign: 'center',
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '85%',
+    maxHeight: '80%',
+    backgroundColor: '#ffffff',
+    borderRadius: 16,
+    padding: 20,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#111111',
+    marginBottom: 16,
+  },
+  inputLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#666666',
+    marginBottom: 8,
+  },
+  textInputStyle: {
+    borderWidth: 1,
+    borderColor: '#e2e8f0',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+    color: '#111111',
+    marginBottom: 16,
+  },
+  multilineInput: {
+    height: 120,
+    paddingVertical: 12,
+    textAlignVertical: 'top',
+  },
+  modalActions: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 16,
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  cancelButtonText: {
+    color: '#666666',
+    fontWeight: '600',
+  },
+  submitButton: {
+    flex: 1,
+    backgroundColor: '#0077ff',
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  submitButtonText: {
+    color: '#ffffff',
+    fontWeight: '600',
+  },
+})
+
+/**
+ * NotesApp - Main component
+ * 
+ * Displays list of notes with ability to create, view, and delete notes.
+ * Uses FlatList for efficient rendering of large note lists.
+ */
+export const NotesApp = () => {
+  const state = State({
+    notes: [] as Note[],
+    loading: false,
+    showModal: false,
+    newTitle: '',
+    newContent: '',
+  })
+
+  /**
+   * Load notes from database on app launch
+   */
+  Effect(() => {
+    state.loading = true
+    DB.query('notes')
+      .orderBy('updatedAt', 'desc')
+      .all()
+      .then((result: any) => {
+        state.notes = result as Note[]
+      })
+      .catch(() => {
+        Toast.error('Failed to load notes')
+      })
+      .finally(() => {
+        state.loading = false
+      })
+  })
+
+  /**
+   * Create a new note
+   */
+  const handleCreateNote = () => {
+    if (!state.newTitle.trim() || !state.newContent.trim()) {
+      Toast.warning('Please fill in all fields')
+      return
+    }
+
+    const note: Note = {
+      id: `note_${Date.now()}`,
+      title: state.newTitle,
+      content: state.newContent,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    }
+
+    DB.insert('notes', note)
+      .then(() => {
+        state.notes.unshift(note)
+        state.newTitle = ''
+        state.newContent = ''
+        state.showModal = false
+        Toast.success('Note created')
+      })
+      .catch(() => {
+        Toast.error('Failed to create note')
+      })
+  }
+
+  /**
+   * Navigate to note details screen
+   */
+  const handleNotePress = (noteId: string) => {
+    // Navigate to note detail screen with note ID
+    if (typeof Router.go === 'function') {
+      Router.go('note-detail', { id: noteId })
+    }
+  }
+
+  /**
+   * Render individual note card
+   */
+  const renderNote = (note: Note) => {
+    const preview = note.content.substring(0, 100)
+    const timeString = new Date(note.updatedAt).toLocaleDateString()
+
+    return Pressable(styles.noteCard, {
+      onPress: () => handleNotePress(note.id),
+    }, [
+      Text(note.title, styles.noteTitle),
+      Text(preview + (note.content.length > 100 ? '...' : ''), styles.notePreview),
+      Text(`Updated ${timeString}`, styles.noteTimestamp),
+    ])
+  }
+
+  /**
+   * Render empty state when no notes exist
+   */
+  const renderEmpty = () => {
+    return View(styles.emptyState, [
+      Text('No notes yet', styles.emptyStateText),
+      Text('Tap + to create your first note', {
+        fontSize: 14,
+        color: '#ccc',
+        marginTop: 8,
+      }),
+    ])
+  }
+
+  // Show loading spinner
+  if (state.loading) {
+    return View(styles.loadingContainer, [])
+  }
+
+  // Main app layout
+  return View(styles.container, [
+    // Header
+    View(styles.header, [
+      Text('My Notes', styles.headerTitle),
+      Pressable(styles.addButton, {
+        onPress: () => {
+          state.showModal = true
+        },
+      }, [
+        Text('+ New', styles.addButtonText),
+      ]),
+    ]),
+
+    // Notes list
+    state.notes.length === 0
+      ? renderEmpty()
+      : FlatList(
+          state.notes,
+          renderNote,
+          { flex: 1, paddingTop: 8, paddingBottom: 8 }
+        ),
+
+    // Create note modal
+    Modal([
+      View(styles.modalContent, [
+        Text('Create Note', styles.modalTitle),
+
+        // Title input
+        Text('Title', styles.inputLabel),
+        TextInput(styles.textInputStyle, {
+          placeholder: 'Enter note title',
+          value: state.newTitle,
+          onChangeText: (text) => {
+            state.newTitle = text
+          },
+          maxLength: 100,
+        }),
+
+        // Content input
+        Text('Content', styles.inputLabel),
+        TextInput(
+          {
+            ...styles.textInputStyle,
+            ...styles.multilineInput,
+          },
+          {
+            placeholder: 'Enter note content',
+            value: state.newContent,
+            onChangeText: (text) => {
+              state.newContent = text
+            },
+            multiline: true,
+            numberOfLines: 5,
+          }
+        ),
+
+        // Action buttons
+        View(styles.modalActions, [
+          Pressable(styles.cancelButton, {
+            onPress: () => {
+              state.showModal = false
+              state.newTitle = ''
+              state.newContent = ''
+            },
+          }, [
+            Text('Cancel', styles.cancelButtonText),
+          ]),
+
+          Pressable(styles.submitButton, {
+            onPress: handleCreateNote,
+          }, [
+            Text('Create', styles.submitButtonText),
+          ]),
+        ]),
+      ]),
+    ], {
+      open: state.showModal,
+      onClose: () => {
+        state.showModal = false
+      },
+    }),
+  ])
+}
+
+export default NotesApp

package/examples/deskforge-app/screens/SettingsApp.ts

@@ -0,0 +1,226 @@
+/**
+ * Settings App - Complete Example
+ * 
+ * Demonstrates Switch, Slider, ScrollView, Platform detection,
+ * and state persistence.
+ */
+
+import {
+  View,
+  Text,
+  Switch,
+  Slider,
+  ScrollView,
+  StyleSheet,
+  Platform,
+} from '@deskforge/ui/src'
+import { State } from '@deskforge/state/src'
+import { Theme } from '@deskforge/theme/src'
+
+/**
+ * Style definitions
+ */
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fc',
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#ffffff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#111111',
+  },
+  scrollContent: {
+    padding: 16,
+  },
+  section: {
+    backgroundColor: '#ffffff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#111111',
+    marginBottom: 12,
+  },
+  settingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  settingRowLast: {
+    borderBottomWidth: 0,
+  },
+  settingLabel: {
+    fontSize: 14,
+    color: '#111111',
+    fontWeight: '500',
+  },
+  settingDescription: {
+    fontSize: 12,
+    color: '#999999',
+    marginTop: 4,
+  },
+  sliderContainer: {
+    paddingVertical: 16,
+  },
+  sliderLabel: {
+    fontSize: 12,
+    color: '#666666',
+    marginBottom: 8,
+  },
+  valueDisplay: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#0077ff',
+  },
+  platformInfo: {
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 8,
+  },
+  platformText: {
+    fontSize: 12,
+    color: '#666666',
+  },
+})
+
+/**
+ * SettingsApp - Main component
+ * 
+ * Demonstrates Switch and Slider components for user preferences.
+ * Shows platform detection and conditional rendering.
+ */
+export const SettingsApp = () => {
+  const state = State({
+    darkMode: false,
+    notifications: true,
+    volume: 70,
+    brightness: 100,
+  })
+
+  return View(styles.container, [
+    // Header
+    View(styles.header, [
+      Text('Settings', styles.headerTitle),
+    ]),
+
+    // Scrollable settings
+    ScrollView({ flex: 1 }, [
+      View(styles.scrollContent, [
+        // Display settings section
+        View(styles.section, [
+          Text('Display', styles.sectionTitle),
+
+          View(styles.settingRow, [
+            View({ flex: 1 }, [
+              Text('Dark Mode', styles.settingLabel),
+              Text('Easier on the eyes', styles.settingDescription),
+            ]),
+            Switch(
+              state.darkMode,
+              (value) => {
+                state.darkMode = value
+                // Apply theme changes
+                Theme.apply({ isDark: value })
+              }
+            ),
+          ]),
+
+          View({
+            ...styles.settingRow,
+            ...styles.settingRowLast,
+          }, [
+            View({ flex: 1 }, [
+              Text('Brightness', styles.settingLabel),
+              Text(`${state.brightness}%`, styles.settingDescription),
+            ]),
+          ]),
+
+          View(styles.sliderContainer, [
+            Slider({ flex: 1 }, {
+              value: state.brightness,
+              min: 0,
+              max: 100,
+              step: 5,
+              onChange: (value) => {
+                state.brightness = value
+              },
+              color: '#0077ff',
+              trackColor: '#e2e8f0',
+            }),
+          ]),
+        ]),
+
+        // Sound settings section
+        View(styles.section, [
+          Text('Sound', styles.sectionTitle),
+
+          View(styles.settingRow, [
+            View({ flex: 1 }, [
+              Text('Notifications', styles.settingLabel),
+              Text('Enable sound alerts', styles.settingDescription),
+            ]),
+            Switch(
+              state.notifications,
+              (value) => {
+                state.notifications = value
+              }
+            ),
+          ]),
+
+          View({
+            ...styles.settingRow,
+            ...styles.settingRowLast,
+          }, [
+            View({ flex: 1 }, [
+              Text('Volume', styles.settingLabel),
+              Text(`${state.volume}%`, styles.settingDescription),
+            ]),
+          ]),
+
+          View(styles.sliderContainer, [
+            Slider({ flex: 1 }, {
+              value: state.volume,
+              min: 0,
+              max: 100,
+              step: 1,
+              onChange: (value) => {
+                state.volume = value
+              },
+            }),
+          ]),
+        ]),
+
+        // Platform info
+        View(styles.section, [
+          Text('Device', styles.sectionTitle),
+          View(styles.platformInfo, [
+            Text(`OS: ${Platform.OS}`, styles.platformText),
+            Text(
+              Platform.OS === 'ios' || Platform.OS === 'android'
+                ? '📱 Mobile Device'
+                : '🖥️ Desktop Device',
+              { ...styles.platformText, marginTop: 4 }
+            ),
+          ]),
+        ]),
+      ]),
+    ]),
+  ])
+}
+
+export default SettingsApp