deskforge 1.0.0 → 1.0.1

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

@@ -0,0 +1,181 @@
+/**
+ * Counter App - Complete Example
+ * 
+ * Demonstrates basic State reactivity, Pressable handlers,
+ * and simple component composition.
+ */
+
+import {
+  View,
+  Text,
+  Pressable,
+  Button,
+  StyleSheet,
+} from '@deskforge/ui/src'
+import { State, Computed } from '@deskforge/state/src'
+
+/**
+ * Style definitions
+ */
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fc',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderRadius: 20,
+    padding: 40,
+    shadowColor: '#000000',
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 8,
+    alignItems: 'center',
+    minWidth: 280,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#111111',
+    marginBottom: 20,
+  },
+  counterDisplay: {
+    fontSize: 64,
+    fontWeight: 'bold',
+    color: '#0077ff',
+    marginBottom: 30,
+    minHeight: 80,
+  },
+  label: {
+    fontSize: 14,
+    color: '#999999',
+    marginBottom: 20,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 20,
+  },
+  button: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 8,
+    minHeight: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  incrementButton: {
+    backgroundColor: '#2ecc71',
+  },
+  decrementButton: {
+    backgroundColor: '#e74c3c',
+  },
+  resetButton: {
+    backgroundColor: '#95a5a6',
+    marginTop: 12,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+  statusText: {
+    fontSize: 14,
+    color: '#666666',
+    marginTop: 20,
+    fontStyle: 'italic',
+  },
+})
+
+/**
+ * CounterApp - Main component
+ * 
+ * Simple counter demonstrating State reactivity and button handlers.
+ * Shows how State mutations automatically trigger re-renders.
+ */
+export const CounterApp = () => {
+  // Reactive state - mutate directly, no setState needed
+  const state = State({
+    count: 0,
+  })
+
+  // Computed value - automatically updates when count changes
+  const isEven = Computed(() => state.count % 2 === 0)
+
+  // Handlers
+  const increment = () => {
+    state.count++
+  }
+
+  const decrement = () => {
+    state.count--
+  }
+
+  const reset = () => {
+    state.count = 0
+  }
+
+  return View(styles.container, [
+    View(styles.card, [
+      Text('Counter App', styles.title),
+
+      // Counter display
+      Text(String(state.count), styles.counterDisplay),
+
+      // Status
+      Text(
+        `The count is ${isEven.value ? 'even' : 'odd'}`,
+        styles.statusText
+      ),
+
+      // Increment/Decrement buttons
+      View(styles.buttonRow, [
+        Pressable(
+          {
+            ...styles.button,
+            ...styles.decrementButton,
+          },
+          {
+            onPress: decrement,
+          },
+          [
+            Text('−', { fontSize: 28, color: '#ffffff' }),
+          ]
+        ),
+
+        Pressable(
+          {
+            ...styles.button,
+            ...styles.incrementButton,
+          },
+          {
+            onPress: increment,
+          },
+          [
+            Text('+', { fontSize: 28, color: '#ffffff' }),
+          ]
+        ),
+      ]),
+
+      // Reset button
+      Pressable(
+        {
+          ...styles.button,
+          ...styles.resetButton,
+        },
+        {
+          onPress: reset,
+        },
+        [
+          Text('Reset', styles.buttonText),
+        ]
+      ),
+    ]),
+  ])
+}
+
+export default CounterApp

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

@@ -0,0 +1,267 @@
+/**
+ * Gallery App - Complete Example
+ * 
+ * Demonstrates Image component, FlatList with images,
+ * Modal for full-screen preview, and image gallery patterns.
+ */
+
+import {
+  View,
+  Text,
+  Image,
+  Pressable,
+  FlatList,
+  Modal,
+  ActivityIndicator,
+  StyleSheet,
+} from '@deskforge/ui/src'
+import { State } from '@deskforge/state/src'
+
+/**
+ * Image item structure
+ */
+interface GalleryImage {
+  id: string
+  title: string
+  uri: string
+  width: number
+  height: number
+}
+
+/**
+ * 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',
+  },
+  galleryGrid: {
+    padding: 8,
+  },
+  gridRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginBottom: 8,
+  },
+  thumbnail: {
+    flex: 1,
+    aspectRatio: 1,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#e2e8f0',
+  },
+  thumbnailImage: {
+    width: '100%',
+    height: '100%',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.95)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 40,
+  },
+  fullscreenImage: {
+    width: '90%',
+    height: '70%',
+    borderRadius: 12,
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#ffffff',
+    marginTop: 20,
+    textAlign: 'center',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    width: 40,
+    height: 40,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeButtonText: {
+    fontSize: 28,
+    color: '#ffffff',
+  },
+})
+
+/**
+ * GalleryApp - Main component
+ * 
+ * Image gallery with grid layout and full-screen preview modal.
+ */
+export const GalleryApp = () => {
+  const state = State({
+    images: [
+      {
+        id: '1',
+        title: 'Sunset',
+        uri: 'https://images.unsplash.com/photo-1495567720989-cebddd5913d8?w=400&h=400&fit=crop',
+        width: 400,
+        height: 400,
+      },
+      {
+        id: '2',
+        title: 'Mountain',
+        uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
+        width: 400,
+        height: 400,
+      },
+      {
+        id: '3',
+        title: 'Ocean',
+        uri: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=400&h=400&fit=crop',
+        width: 400,
+        height: 400,
+      },
+      {
+        id: '4',
+        title: 'Forest',
+        uri: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=400&fit=crop',
+        width: 400,
+        height: 400,
+      },
+      {
+        id: '5',
+        title: 'Desert',
+        uri: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=400&h=400&fit=crop',
+        width: 400,
+        height: 400,
+      },
+      {
+        id: '6',
+        title: 'City',
+        uri: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=400&h=400&fit=crop',
+        width: 400,
+        height: 400,
+      },
+    ] as GalleryImage[],
+    selectedImage: null as GalleryImage | null,
+    showPreview: false,
+    loading: false,
+  })
+
+  /**
+   * Open image preview
+   */
+  const openPreview = (image: GalleryImage) => {
+    state.selectedImage = image
+    state.showPreview = true
+  }
+
+  /**
+   * Close image preview
+   */
+  const closePreview = () => {
+    state.showPreview = false
+    state.selectedImage = null
+  }
+
+  /**
+   * Render grid row with 2 images
+   */
+  const renderGridRow = (items: GalleryImage[]) => {
+    const firstImage = items[0]
+    const secondImage = items[1]
+
+    return View(styles.gridRow, [
+      firstImage
+        ? Pressable(
+            styles.thumbnail,
+            {
+              onPress: () => openPreview(firstImage),
+            },
+            [
+              Image(firstImage.uri, styles.thumbnailImage),
+            ]
+          )
+        : View(styles.thumbnail, []),
+
+      secondImage
+        ? Pressable(
+            styles.thumbnail,
+            {
+              onPress: () => openPreview(secondImage),
+            },
+            [
+              Image(secondImage.uri, styles.thumbnailImage),
+            ]
+          )
+        : View(styles.thumbnail, []),
+    ])
+  }
+
+  /**
+   * Convert flat array to pairs for grid
+   */
+  const imageRows = []
+  for (let i = 0; i < state.images.length; i += 2) {
+    imageRows.push(state.images.slice(i, i + 2))
+  }
+
+  return View(styles.container, [
+    // Header
+    View(styles.header, [
+      Text('Gallery', styles.headerTitle),
+    ]),
+
+    // Grid
+    FlatList(
+      imageRows,
+      renderGridRow,
+      styles.galleryGrid
+    ),
+
+    // Preview modal
+    Modal([
+      Pressable(
+        styles.closeButton,
+        {
+          onPress: closePreview,
+        },
+        [
+          Text('×', styles.closeButtonText),
+        ]
+      ),
+
+      View(styles.modalContent, [
+        state.selectedImage
+          ? Image(state.selectedImage.uri, styles.fullscreenImage)
+          : ActivityIndicator({ margin: 20 }, { animating: true }),
+
+        state.selectedImage
+          ? Text(state.selectedImage.title, styles.modalTitle)
+          : null,
+      ].filter(Boolean) as any),
+    ], {
+      open: state.showPreview,
+      onClose: closePreview,
+    }),
+  ])
+}
+
+export default GalleryApp