@qafka/react-native 2.0.0

package/dist/components/defaults/DefaultCard.d.ts

@@ -0,0 +1,14 @@
+/**
+ * DefaultCard Component
+ *
+ * Generic card component for displaying single data items.
+ * Used as fallback when no custom component is registered.
+ *
+ * Displays:
+ * - Title (from first string field or 'title', 'name', 'label')
+ * - Description (from 'description', 'subtitle', 'content')
+ * - Key-value pairs for remaining fields
+ */
+import React from 'react';
+import { ToolComponentProps } from '../../types/components';
+export declare function DefaultCard({ data, theme }: ToolComponentProps): React.JSX.Element | null;

package/dist/components/defaults/DefaultCard.js

@@ -0,0 +1,156 @@
+"use strict";
+/**
+ * DefaultCard Component
+ *
+ * Generic card component for displaying single data items.
+ * Used as fallback when no custom component is registered.
+ *
+ * Displays:
+ * - Title (from first string field or 'title', 'name', 'label')
+ * - Description (from 'description', 'subtitle', 'content')
+ * - Key-value pairs for remaining fields
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultCard = DefaultCard;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function DefaultCard({ data, theme }) {
+    if (!data || typeof data !== 'object') {
+        return null;
+    }
+    // Helper: Get value from possible field names
+    const getField = (possibleNames) => {
+        for (const name of possibleNames) {
+            if (data[name] !== undefined && data[name] !== null) {
+                return data[name];
+            }
+        }
+        return null;
+    };
+    // Extract common fields
+    const title = getField(['title', 'name', 'label', 'heading']);
+    const description = getField(['description', 'subtitle', 'content', 'text', 'body']);
+    const imageUrl = getField(['imageUrl', 'image', 'thumbnail', 'photo', 'picture']);
+    // Get remaining fields (exclude known fields)
+    const excludedFields = [
+        'id', '_id', 'title', 'name', 'label', 'heading',
+        'description', 'subtitle', 'content', 'text', 'body',
+        'imageUrl', 'image', 'thumbnail', 'photo', 'picture',
+        'createdAt', 'updatedAt', '__v'
+    ];
+    const remainingFields = Object.keys(data)
+        .filter(key => !excludedFields.includes(key))
+        .slice(0, 5); // Max 5 additional fields
+    const spacing = theme?.spacing?.md || 12;
+    const borderRadius = theme?.borderRadius?.md || 8;
+    return (<react_native_1.View style={[
+            styles.container,
+            {
+                backgroundColor: theme?.colors?.surface || '#f5f5f5',
+                padding: spacing,
+                borderRadius,
+                borderWidth: 1,
+                borderColor: theme?.colors?.border || '#e0e0e0',
+            }
+        ]}>
+ {/* Title */}
+ {title && (<react_native_1.Text style={[
+                styles.title,
+                {
+                    color: theme?.colors?.text || '#000000',
+                    fontSize: theme?.typography?.fontSize?.md || 16,
+                    fontWeight: theme?.typography?.fontWeight?.semibold || '600',
+                }
+            ]}>
+ {String(title)}
+ </react_native_1.Text>)}
+
+ {/* Description */}
+ {description && (<react_native_1.Text style={[
+                styles.description,
+                {
+                    color: theme?.colors?.textSecondary || '#666666',
+                    fontSize: theme?.typography?.fontSize?.sm || 14,
+                    marginTop: theme?.spacing?.xs || 4,
+                }
+            ]} numberOfLines={3}>
+ {String(description)}
+ </react_native_1.Text>)}
+
+ {/* Image placeholder */}
+ {imageUrl && (<react_native_1.View style={[
+                styles.imagePlaceholder,
+                {
+                    marginTop: theme?.spacing?.sm || 8,
+                    padding: theme?.spacing?.sm || 8,
+                    backgroundColor: theme?.colors?.background || '#ffffff',
+                    borderRadius: theme?.borderRadius?.sm || 4,
+                }
+            ]}>
+ <react_native_1.Text style={{
+                color: theme?.colors?.textSecondary || '#666666',
+                fontSize: theme?.typography?.fontSize?.xs || 12,
+            }}>
+ 🖼️ {String(imageUrl).substring(0, 40)}...
+ </react_native_1.Text>
+ </react_native_1.View>)}
+
+ {/* Additional Fields */}
+ {remainingFields.length > 0 && (<react_native_1.View style={{ marginTop: theme?.spacing?.sm || 8 }}>
+ {remainingFields.map(key => {
+                const value = data[key];
+                if (value === undefined || value === null)
+                    return null;
+                return (<react_native_1.View key={key} style={styles.fieldRow}>
+ <react_native_1.Text style={[
+                        styles.fieldLabel,
+                        {
+                            color: theme?.colors?.textSecondary || '#666666',
+                            fontSize: theme?.typography?.fontSize?.xs || 12,
+                        }
+                    ]}>
+ {key}:
+ </react_native_1.Text>
+ <react_native_1.Text style={[
+                        styles.fieldValue,
+                        {
+                            color: theme?.colors?.text || '#000000',
+                            fontSize: theme?.typography?.fontSize?.xs || 12,
+                        }
+                    ]} numberOfLines={1}>
+ {typeof value === 'object' ? JSON.stringify(value) : String(value)}
+ </react_native_1.Text>
+ </react_native_1.View>);
+            })}
+ </react_native_1.View>)}
+ </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    title: {
+        marginBottom: 4,
+    },
+    description: {
+        lineHeight: 20,
+    },
+    imagePlaceholder: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    fieldRow: {
+        flexDirection: 'row',
+        marginTop: 4,
+    },
+    fieldLabel: {
+        fontWeight: '500',
+        marginRight: 4,
+    },
+    fieldValue: {
+        flex: 1,
+    },
+});

package/dist/components/defaults/DefaultDetail.d.ts

@@ -0,0 +1,14 @@
+/**
+ * DefaultDetail Component
+ *
+ * Generic detail component for displaying single object with all fields.
+ * Used as fallback when no custom component is registered.
+ *
+ * Displays:
+ * - All key-value pairs in a detailed view
+ * - Nested objects are stringified
+ * - Special formatting for dates, numbers, booleans
+ */
+import React from 'react';
+import { ToolComponentProps } from '../../types/components';
+export declare function DefaultDetail({ data, theme }: ToolComponentProps): React.JSX.Element;

package/dist/components/defaults/DefaultDetail.js

@@ -0,0 +1,138 @@
+"use strict";
+/**
+ * DefaultDetail Component
+ *
+ * Generic detail component for displaying single object with all fields.
+ * Used as fallback when no custom component is registered.
+ *
+ * Displays:
+ * - All key-value pairs in a detailed view
+ * - Nested objects are stringified
+ * - Special formatting for dates, numbers, booleans
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultDetail = DefaultDetail;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function DefaultDetail({ data, theme }) {
+    if (!data || typeof data !== 'object') {
+        return (<react_native_1.Text style={{
+                color: theme?.colors?.text || '#000000',
+                fontSize: theme?.typography?.fontSize?.sm || 14,
+            }}>
+ {String(data)}
+ </react_native_1.Text>);
+    }
+    // Format value for display
+    const formatValue = (value) => {
+        if (value === null || value === undefined) {
+            return 'N/A';
+        }
+        // Boolean
+        if (typeof value === 'boolean') {
+            return value ? '✓ Yes' : '✗ No';
+        }
+        // Number
+        if (typeof value === 'number') {
+            return value.toLocaleString();
+        }
+        // Date
+        if (value instanceof Date) {
+            return value.toLocaleString();
+        }
+        // Array
+        if (Array.isArray(value)) {
+            return `[${value.length} items]`;
+        }
+        // Object
+        if (typeof value === 'object') {
+            return JSON.stringify(value, null, 2);
+        }
+        return String(value);
+    };
+    // Format field name (camelCase to Title Case)
+    const formatFieldName = (key) => {
+        return key
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, str => str.toUpperCase())
+            .trim();
+    };
+    // Get all fields (excluding internal fields)
+    const excludedFields = ['_id', '__v'];
+    const fields = Object.keys(data).filter(key => !excludedFields.includes(key));
+    const spacing = theme?.spacing?.md || 12;
+    const borderRadius = theme?.borderRadius?.md || 8;
+    return (<react_native_1.View style={[
+            styles.container,
+            {
+                backgroundColor: theme?.colors?.surface || '#f5f5f5',
+                padding: spacing,
+                borderRadius,
+                borderWidth: 1,
+                borderColor: theme?.colors?.border || '#e0e0e0',
+            }
+        ]}>
+ <react_native_1.ScrollView style={styles.scrollView} nestedScrollEnabled showsVerticalScrollIndicator={false}>
+ {fields.map((key, index) => {
+            const value = data[key];
+            const isObject = typeof value === 'object' && value !== null && !Array.isArray(value);
+            return (<react_native_1.View key={key} style={[
+                    styles.field,
+                    {
+                        marginBottom: theme?.spacing?.sm || 8,
+                        paddingBottom: theme?.spacing?.sm || 8,
+                        borderBottomWidth: index < fields.length - 1 ? 1 : 0,
+                        borderBottomColor: theme?.colors?.border || '#e0e0e0',
+                    }
+                ]}>
+ {/* Field Label */}
+ <react_native_1.Text style={[
+                    styles.fieldLabel,
+                    {
+                        color: theme?.colors?.textSecondary || '#666666',
+                        fontSize: theme?.typography?.fontSize?.xs || 12,
+                        fontWeight: theme?.typography?.fontWeight?.medium || '500',
+                    }
+                ]}>
+ {formatFieldName(key)}
+ </react_native_1.Text>
+
+ {/* Field Value */}
+ <react_native_1.Text style={[
+                    styles.fieldValue,
+                    {
+                        color: theme?.colors?.text || '#000000',
+                        fontSize: theme?.typography?.fontSize?.sm || 14,
+                        marginTop: theme?.spacing?.xs || 4,
+                        fontFamily: isObject ? 'monospace' : undefined,
+                    }
+                ]}>
+ {formatValue(value)}
+ </react_native_1.Text>
+ </react_native_1.View>);
+        })}
+ </react_native_1.ScrollView>
+ </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+        maxHeight: 400,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    field: {
+        width: '100%',
+    },
+    fieldLabel: {
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    fieldValue: {
+        lineHeight: 20,
+    },
+});

package/dist/components/defaults/DefaultList.d.ts

@@ -0,0 +1,12 @@
+/**
+ * DefaultList Component
+ *
+ * Generic list component for displaying array of items.
+ * Used as fallback when no custom component is registered.
+ *
+ * Renders each item as a simple text representation or
+ * uses DefaultCard for object items.
+ */
+import React from 'react';
+import { ToolComponentProps } from '../../types/components';
+export declare function DefaultList({ data, theme }: ToolComponentProps): React.JSX.Element;

package/dist/components/defaults/DefaultList.js

@@ -0,0 +1,98 @@
+"use strict";
+/**
+ * DefaultList Component
+ *
+ * Generic list component for displaying array of items.
+ * Used as fallback when no custom component is registered.
+ *
+ * Renders each item as a simple text representation or
+ * uses DefaultCard for object items.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultList = DefaultList;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const DefaultCard_1 = require("./DefaultCard");
+function DefaultList({ data, theme }) {
+    // If data is not an array, try to render as single item
+    if (!Array.isArray(data)) {
+        if (typeof data === 'object' && data !== null) {
+            return <DefaultCard_1.DefaultCard data={data} theme={theme}/>;
+        }
+        return (<react_native_1.Text style={{
+                color: theme?.colors?.text || '#000000',
+                fontSize: theme?.typography?.fontSize?.sm || 14,
+            }}>
+ {String(data)}
+ </react_native_1.Text>);
+    }
+    // Empty list
+    if (data.length === 0) {
+        return (<react_native_1.View style={[
+                styles.emptyContainer,
+                {
+                    padding: theme?.spacing?.md || 12,
+                    backgroundColor: theme?.colors?.surface || '#f5f5f5',
+                    borderRadius: theme?.borderRadius?.md || 8,
+                }
+            ]}>
+ <react_native_1.Text style={{
+                color: theme?.colors?.textSecondary || '#666666',
+                fontSize: theme?.typography?.fontSize?.sm || 14,
+                textAlign: 'center',
+            }}>
+ No items found
+ </react_native_1.Text>
+ </react_native_1.View>);
+    }
+    return (<react_native_1.View style={styles.container}>
+ {data.map((item, index) => {
+            // Render object items as cards
+            if (typeof item === 'object' && item !== null) {
+                return (<react_native_1.View key={index} style={{
+                        marginBottom: theme?.spacing?.sm || 8
+                    }}>
+ <DefaultCard_1.DefaultCard data={item} theme={theme}/>
+ </react_native_1.View>);
+            }
+            // Render primitive items as list items with bullets
+            return (<react_native_1.View key={index} style={[
+                    styles.listItem,
+                    {
+                        marginBottom: theme?.spacing?.xs || 4,
+                    }
+                ]}>
+ <react_native_1.Text style={{
+                    color: theme?.colors?.textSecondary || '#666666',
+                    fontSize: theme?.typography?.fontSize?.sm || 14,
+                    marginRight: theme?.spacing?.xs || 4,
+                }}>
+ •
+ </react_native_1.Text>
+ <react_native_1.Text style={{
+                    color: theme?.colors?.text || '#000000',
+                    fontSize: theme?.typography?.fontSize?.sm || 14,
+                    flex: 1,
+                }}>
+ {String(item)}
+ </react_native_1.Text>
+ </react_native_1.View>);
+        })}
+ </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    emptyContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    listItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+});

package/dist/components/defaults/DefaultTable.d.ts

@@ -0,0 +1,14 @@
+/**
+ * DefaultTable Component
+ *
+ * Generic table component for displaying array of objects in tabular format.
+ * Used as fallback when no custom component is registered.
+ *
+ * Displays:
+ * - Column headers (from first object keys)
+ * - Rows with data
+ * - Horizontal scrolling for wide tables
+ */
+import React from 'react';
+import { ToolComponentProps } from '../../types/components';
+export declare function DefaultTable({ data, theme }: ToolComponentProps): React.JSX.Element;

package/dist/components/defaults/DefaultTable.js

@@ -0,0 +1,204 @@
+"use strict";
+/**
+ * DefaultTable Component
+ *
+ * Generic table component for displaying array of objects in tabular format.
+ * Used as fallback when no custom component is registered.
+ *
+ * Displays:
+ * - Column headers (from first object keys)
+ * - Rows with data
+ * - Horizontal scrolling for wide tables
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultTable = DefaultTable;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function DefaultTable({ data, theme }) {
+    // Validate data is array
+    if (!Array.isArray(data) || data.length === 0) {
+        return (<react_native_1.View style={[
+                styles.emptyContainer,
+                {
+                    padding: theme?.spacing?.md || 12,
+                    backgroundColor: theme?.colors?.surface || '#f5f5f5',
+                    borderRadius: theme?.borderRadius?.md || 8,
+                }
+            ]}>
+ <react_native_1.Text style={{
+                color: theme?.colors?.textSecondary || '#666666',
+                fontSize: theme?.typography?.fontSize?.sm || 14,
+                textAlign: 'center',
+            }}>
+ No data to display
+ </react_native_1.Text>
+ </react_native_1.View>);
+    }
+    // Get columns from first object
+    const firstItem = data[0];
+    if (typeof firstItem !== 'object' || firstItem === null) {
+        return (<react_native_1.View style={{
+                padding: theme?.spacing?.md || 12,
+            }}>
+ <react_native_1.Text style={{
+                color: theme?.colors?.textSecondary || '#666666',
+            }}>
+ Table requires array of objects
+ </react_native_1.Text>
+ </react_native_1.View>);
+    }
+    // Extract column names (exclude internal fields)
+    const excludedFields = ['_id', '__v', 'id'];
+    const columns = Object.keys(firstItem)
+        .filter(key => !excludedFields.includes(key))
+        .slice(0, 5); // Max 5 columns for mobile
+    // Format column name
+    const formatColumnName = (key) => {
+        return key
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, str => str.toUpperCase())
+            .trim();
+    };
+    // Format cell value
+    const formatValue = (value) => {
+        if (value === null || value === undefined)
+            return '-';
+        if (typeof value === 'boolean')
+            return value ? '✓' : '✗';
+        if (typeof value === 'number')
+            return value.toLocaleString();
+        if (Array.isArray(value))
+            return `[${value.length}]`;
+        if (typeof value === 'object')
+            return '{...}';
+        const str = String(value);
+        return str.length > 30 ? str.substring(0, 27) + '...' : str;
+    };
+    const spacing = theme?.spacing || { xs: 4, sm: 8, md: 12 };
+    const borderColor = theme?.colors?.border || '#e0e0e0';
+    return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.container}>
+ <react_native_1.View style={[
+            styles.table,
+            {
+                borderWidth: 1,
+                borderColor,
+                borderRadius: theme?.borderRadius?.md || 8,
+                backgroundColor: theme?.colors?.surface || '#f5f5f5',
+            }
+        ]}>
+ {/* Header Row */}
+ <react_native_1.View style={[
+            styles.headerRow,
+            {
+                backgroundColor: theme?.colors?.primary || '#3b82f6',
+                borderTopLeftRadius: theme?.borderRadius?.md || 8,
+                borderTopRightRadius: theme?.borderRadius?.md || 8,
+            }
+        ]}>
+ {columns.map((column, index) => (<react_native_1.View key={column} style={[
+                styles.headerCell,
+                {
+                    paddingHorizontal: spacing.sm,
+                    paddingVertical: spacing.sm,
+                    borderRightWidth: index < columns.length - 1 ? 1 : 0,
+                    borderRightColor: 'rgba(255, 255, 255, 0.2)',
+                }
+            ]}>
+ <react_native_1.Text style={[
+                styles.headerText,
+                {
+                    color: '#ffffff',
+                    fontSize: theme?.typography?.fontSize?.xs || 12,
+                    fontWeight: theme?.typography?.fontWeight?.semibold || '600',
+                }
+            ]}>
+ {formatColumnName(column)}
+ </react_native_1.Text>
+ </react_native_1.View>))}
+ </react_native_1.View>
+
+ {/* Data Rows */}
+ {data.slice(0, 10).map((row, rowIndex) => (<react_native_1.View key={rowIndex} style={[
+                styles.dataRow,
+                {
+                    backgroundColor: rowIndex % 2 === 0
+                        ? theme?.colors?.background || '#ffffff'
+                        : theme?.colors?.surface || '#f9fafb',
+                    borderTopWidth: 1,
+                    borderTopColor: borderColor,
+                }
+            ]}>
+ {columns.map((column, colIndex) => (<react_native_1.View key={`${rowIndex}-${column}`} style={[
+                    styles.dataCell,
+                    {
+                        paddingHorizontal: spacing.sm,
+                        paddingVertical: spacing.sm,
+                        borderRightWidth: colIndex < columns.length - 1 ? 1 : 0,
+                        borderRightColor: borderColor,
+                    }
+                ]}>
+ <react_native_1.Text style={[
+                    styles.cellText,
+                    {
+                        color: theme?.colors?.text || '#000000',
+                        fontSize: theme?.typography?.fontSize?.xs || 12,
+                    }
+                ]}>
+ {formatValue(row[column])}
+ </react_native_1.Text>
+ </react_native_1.View>))}
+ </react_native_1.View>))}
+
+ {/* Show more indicator */}
+ {data.length > 10 && (<react_native_1.View style={{
+                padding: spacing.sm,
+                alignItems: 'center',
+                borderTopWidth: 1,
+                borderTopColor: borderColor,
+            }}>
+ <react_native_1.Text style={{
+                color: theme?.colors?.textSecondary || '#666666',
+                fontSize: theme?.typography?.fontSize?.xs || 12,
+            }}>
+ ... and {data.length - 10} more rows
+ </react_native_1.Text>
+ </react_native_1.View>)}
+ </react_native_1.View>
+ </react_native_1.ScrollView>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    table: {
+        minWidth: '100%',
+    },
+    headerRow: {
+        flexDirection: 'row',
+    },
+    headerCell: {
+        minWidth: 100,
+        justifyContent: 'center',
+    },
+    headerText: {
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    dataRow: {
+        flexDirection: 'row',
+    },
+    dataCell: {
+        minWidth: 100,
+        justifyContent: 'center',
+    },
+    cellText: {
+    // Default styles
+    },
+    emptyContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/dist/components/defaults/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Default Components
+ * Export all default components for Tool Registry
+ */
+export { DefaultCard } from './DefaultCard';
+export { DefaultList } from './DefaultList';
+export { DefaultDetail } from './DefaultDetail';
+export { DefaultTable } from './DefaultTable';
+/**
+ * Default component registry
+ * Can be used as fallback or merged with custom components
+ */
+import { ComponentRegistry } from '../../types/components';
+export declare const defaultComponentRegistry: ComponentRegistry;