CX-549: Query Editor

[biozal]

Summary

This PR adds a comprehensive Query Editor feature to the React Native Ditto Tools library, enabling DQL (Document Query Language) execution with a complete interface for query input, execution, and results display.

New Components Added

Core Components

• QueryEditor - Main container component integrating all query functionality
• QueryEditorView - Multi-line TextInput component for DQL query input
• QueryHeaderView - Header with Execute and Share buttons
• QueryResultsView - Performance-optimized results display with expandable JSON view

Hook Implementation

• useQueryExecution - Core hook managing query execution, results processing, and export functionality

Key Features

Query Input and Execution

• Multi-line TextInput with 3-line height, word wrap, and scrollable content
• Smart button states (disabled when query empty, loading indicators during execution)
• Support for all DQL query types (SELECT, INSERT, UPDATE, DELETE, SHOW statements)

Results Display

• FlatList virtualization supporting large datasets (20,000+ records)
• Expandable JSON view for detailed result inspection
• Differentiated display for SELECT queries vs mutating operations
• Performance optimizations including getItemLayout and removeClippedSubviews

Export Functionality

• React Native Share API integration for exporting query results
• Formatted JSON output with proper indentation
• Cross-platform compatibility (iOS and Android native share dialogs)

Memory Management

• Automatic result dematerialization to prevent memory leaks
• Efficient rendering with virtual scrolling
• Proper cleanup of query resources

Style Customization

Complete style customization through props:

• Container-level styling via main style prop
• Individual component styling via nested style objects
• Consistent with existing component patterns in the library

Example App Integration

• Added QueryEditor to example app in new "DITTO STORE" section
• Proper navigation integration following existing patterns
• DittoContext usage for consistent ditto instance access

Text-Based Interface

• Replaced all icon dependencies with text labels for zero-setup compatibility
• "Run" and "Share" text buttons instead of icons
• Removed react-native-vector-icons dependency to eliminate native configuration requirements

Testing

• Cross-platform testing on iOS and Android
• Performance validation with large datasets
• Memory usage verification with proper cleanup
• Example app integration testing
• Tested with MFlix app that uses Expo

QueryEditor.mp4

[Copilot]

Pull Request Overview

This PR adds a comprehensive Query Editor feature for executing DQL (Document Query Language) queries against the Ditto store, providing a complete interface for query input, execution, and results display with performance optimizations for large datasets.

• Introduces a new QueryEditor component with multi-line text input, execution controls, and virtualized results display
• Implements useQueryExecution hook for managing query execution, results processing, and export functionality
• Replaces emoji-based icons with text symbols throughout the library for zero-setup compatibility

Reviewed Changes

Copilot reviewed 22 out of 26 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/index.ts	Exports new QueryEditor components and useQueryExecution hook
src/hooks/useQueryExecution.ts	Core hook for DQL query execution with memory management and export features
src/hooks/index.ts	Adds useQueryExecution to hook exports
src/components/*.tsx	New QueryEditor, QueryEditorView, QueryResultsView, and QueryHeaderView components
src/components/index.ts	Exports new query editor components and type definitions
src/components/SystemSettings.tsx	Replaces emoji refresh icons with text symbols
src/components/PeersList.tsx	Replaces emoji warning icon with text
src/components/DiskUsage.tsx	Replaces emoji warning icon with text
example/*	Integration of QueryEditor into example app with navigation and screen setup
README.md	Comprehensive documentation for new QueryEditor component

Files not reviewed (1)

• example/package-lock.json: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 21 out of 25 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• example/package-lock.json: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}