@oxyhq/services 5.17.18 → 5.18.1

package/src/ui/components/SettingRow.tsx

@@ -10,6 +10,12 @@ export interface SettingRowProps {
     textColor?: string;
     mutedTextColor?: string;
     borderColor?: string;
+    /** Active color for the switch track (default: #d169e5) */
+    activeColor?: string;
+    /** Inactive color for the switch track (default: #767577) */
+    inactiveColor?: string;
+    /** Accessibility label for the switch */
+    accessibilityLabel?: string;
 }
 
 /**
@@ -25,15 +31,27 @@ const SettingRow: React.FC<SettingRowProps> = ({
     textColor,
     mutedTextColor,
     borderColor,
+    activeColor = '#d169e5',
+    inactiveColor = '#767577',
+    accessibilityLabel,
 }) => {
     return (
-        <View style={[styles.settingRow, borderColor ? { borderBottomColor: borderColor } : undefined]}>
+        <View
+            style={[styles.settingRow, borderColor ? { borderBottomColor: borderColor } : undefined]}
+            accessibilityRole="none"
+        >
             <View style={styles.settingInfo}>
-                <Text style={[styles.settingTitle, textColor ? { color: textColor } : undefined]}>
+                <Text
+                    style={[styles.settingTitle, textColor ? { color: textColor } : undefined]}
+                    accessibilityRole="text"
+                >
                     {title}
                 </Text>
                 {description && (
-                    <Text style={[styles.settingDescription, mutedTextColor ? { color: mutedTextColor } : undefined]}>
+                    <Text
+                        style={[styles.settingDescription, mutedTextColor ? { color: mutedTextColor } : undefined]}
+                        accessibilityRole="text"
+                    >
                         {description}
                     </Text>
                 )}
@@ -42,8 +60,12 @@ const SettingRow: React.FC<SettingRowProps> = ({
                 value={value}
                 onValueChange={onValueChange}
                 disabled={disabled}
-                trackColor={{ false: '#767577', true: '#d169e5' }}
+                trackColor={{ false: inactiveColor, true: activeColor }}
                 thumbColor={value ? '#fff' : '#f4f3f4'}
+                accessibilityRole="switch"
+                accessibilityLabel={accessibilityLabel || title}
+                accessibilityState={{ checked: value, disabled }}
+                accessibilityHint={description}
             />
         </View>
     );

package/src/ui/components/feedback/FormInput.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { View, Text, TextInput } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import type { FeedbackColors } from './types';
+
+interface FormInputProps {
+    icon: string;
+    label: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    multiline?: boolean;
+    numberOfLines?: number;
+    testID?: string;
+    colors: FeedbackColors;
+    styles: any;
+    borderColor?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+
+const FormInput: React.FC<FormInputProps> = React.memo(({
+    icon,
+    label,
+    value,
+    onChangeText,
+    placeholder,
+    multiline = false,
+    numberOfLines = 1,
+    testID,
+    colors,
+    styles,
+    borderColor,
+    accessibilityLabel,
+    accessibilityHint,
+}) => (
+    <View style={styles.inputContainer}>
+        <View style={[
+            multiline ? styles.textAreaWrapper : styles.premiumInputWrapper,
+            {
+                borderColor: borderColor || colors.border,
+                backgroundColor: colors.inputBackground,
+                shadowColor: colors.primary,
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.1,
+                shadowRadius: 12,
+                elevation: 3,
+            }
+        ]}>
+            {!multiline && (
+                <Ionicons
+                    name={icon as any}
+                    size={22}
+                    color={colors.secondaryText}
+                    style={styles.inputIcon}
+                />
+            )}
+            <View style={styles.inputContent}>
+                <Text style={[styles.modernLabel, { color: colors.secondaryText }]}>
+                    {label}
+                </Text>
+                <TextInput
+                    style={[
+                        multiline ? styles.textArea : styles.modernInput,
+                        { color: colors.text }
+                    ]}
+                    value={value}
+                    onChangeText={onChangeText}
+                    placeholder={placeholder}
+                    placeholderTextColor={colors.secondaryText + '60'}
+                    multiline={multiline}
+                    numberOfLines={multiline ? numberOfLines : undefined}
+                    testID={testID}
+                    accessibilityLabel={accessibilityLabel || label}
+                    accessibilityHint={accessibilityHint}
+                />
+            </View>
+        </View>
+    </View>
+));
+
+FormInput.displayName = 'FormInput';
+
+export default FormInput;

package/src/ui/components/feedback/ProgressIndicator.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { FeedbackColors } from './types';
+
+interface ProgressIndicatorProps {
+    currentStep: number;
+    totalSteps: number;
+    colors: FeedbackColors;
+    styles: any;
+}
+
+const ProgressIndicator: React.FC<ProgressIndicatorProps> = React.memo(({
+    currentStep,
+    totalSteps,
+    colors,
+    styles,
+}) => (
+    <View style={styles.progressContainer} accessibilityRole="progressbar" accessibilityLabel={`Step ${currentStep + 1} of ${totalSteps}`}>
+        {Array.from({ length: totalSteps }, (_, index) => (
+            <View
+                key={index}
+                style={[
+                    styles.progressDot,
+                    currentStep === index ?
+                        { backgroundColor: colors.primary, width: 24 } :
+                        { backgroundColor: colors.border }
+                ]}
+            />
+        ))}
+    </View>
+));
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+
+export default ProgressIndicator;

package/src/ui/components/feedback/constants.ts

@@ -0,0 +1,22 @@
+import type { FeedbackType, PriorityLevel } from './types';
+
+export const FEEDBACK_TYPES: FeedbackType[] = [
+    { id: 'bug', label: 'Bug Report', icon: 'bug', color: '#FF3B30', description: 'Report a problem or issue' },
+    { id: 'feature', label: 'Feature Request', icon: 'bulb', color: '#007AFF', description: 'Suggest a new feature' },
+    { id: 'general', label: 'General Feedback', icon: 'chatbubble', color: '#34C759', description: 'Share your thoughts' },
+    { id: 'support', label: 'Support Request', icon: 'help-circle', color: '#FF9500', description: 'Get help with something' },
+];
+
+export const PRIORITY_LEVELS: PriorityLevel[] = [
+    { id: 'low', label: 'Low', icon: 'arrow-down', color: '#34C759' },
+    { id: 'medium', label: 'Medium', icon: 'remove', color: '#FF9500' },
+    { id: 'high', label: 'High', icon: 'arrow-up', color: '#FF3B30' },
+    { id: 'critical', label: 'Critical', icon: 'warning', color: '#FF0000' },
+];
+
+export const CATEGORIES: Record<string, string[]> = {
+    bug: ['UI/UX', 'Performance', 'Authentication', 'File Management', 'Billing', 'Other'],
+    feature: ['User Interface', 'File Management', 'Security', 'Performance', 'Integration', 'Other'],
+    general: ['User Experience', 'Design', 'Performance', 'Documentation', 'Other'],
+    support: ['Account Issues', 'Billing', 'Technical Problems', 'Feature Questions', 'Other'],
+};

package/src/ui/components/feedback/feedbackStyles.ts

@@ -0,0 +1,247 @@
+import { StyleSheet, Platform, Dimensions } from 'react-native';
+import { screenContentStyle } from '../../constants/spacing';
+import type { FeedbackColors } from './types';
+
+export const createFeedbackStyles = (colors: FeedbackColors) => StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    fullBleed: {
+        width: '100%',
+        alignSelf: 'stretch',
+    },
+    scrollContent: {
+        flexGrow: 1,
+        ...screenContentStyle,
+    },
+    stepContainer: {
+        flex: 1,
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+    },
+    modernHeader: {
+        alignItems: 'flex-start',
+        width: '100%',
+        marginBottom: 24,
+    },
+    stepTitle: {
+        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+        fontSize: 42,
+        lineHeight: 48,
+        marginBottom: 12,
+        textAlign: 'left',
+        letterSpacing: -1,
+    },
+    modernSubtitle: {
+        fontSize: 18,
+        lineHeight: 24,
+        textAlign: 'left',
+        opacity: 0.8,
+        marginBottom: 24,
+    },
+    inputContainer: {
+        width: '100%',
+        marginBottom: 24,
+    },
+    premiumInputWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 56,
+        borderRadius: 16,
+        paddingHorizontal: 20,
+        borderWidth: 2,
+        backgroundColor: colors.inputBackground,
+    },
+    textAreaWrapper: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        minHeight: 120,
+        borderRadius: 16,
+        paddingHorizontal: 20,
+        paddingVertical: 16,
+        borderWidth: 2,
+        backgroundColor: colors.inputBackground,
+    },
+    inputIcon: {
+        marginRight: 12,
+    },
+    inputContent: {
+        flex: 1,
+    },
+    modernLabel: {
+        fontSize: 12,
+        fontWeight: '500',
+        marginBottom: 2,
+    },
+    modernInput: {
+        flex: 1,
+        fontSize: 16,
+        height: '100%',
+    },
+    textArea: {
+        flex: 1,
+        fontSize: 16,
+        textAlignVertical: 'top',
+        minHeight: 80,
+    },
+    categoryContainer: {
+        marginBottom: 24,
+    },
+    checkboxContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 24,
+    },
+    checkbox: {
+        width: 24,
+        height: 24,
+        borderRadius: 6,
+        borderWidth: 2,
+        marginRight: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkboxText: {
+        fontSize: 16,
+        flex: 1,
+    },
+    button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 18,
+        paddingHorizontal: 32,
+        borderRadius: 16,
+        marginVertical: 8,
+        gap: 8,
+        width: '100%',
+        ...Platform.select({
+            web: {
+                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+            },
+            default: {
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.3,
+                shadowRadius: 8,
+                elevation: 6,
+            }
+        }),
+    },
+    buttonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+    navigationButtons: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: 16,
+        marginBottom: 8,
+        width: '100%',
+        gap: 8,
+    },
+    navButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        gap: 6,
+        minWidth: 70,
+        borderWidth: 1,
+        ...Platform.select({
+            web: {
+                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            },
+            default: {
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.1,
+                shadowRadius: 4,
+                elevation: 2,
+            }
+        }),
+    },
+    backButton: {
+        backgroundColor: 'transparent',
+        borderTopLeftRadius: 35,
+        borderBottomLeftRadius: 35,
+        borderTopRightRadius: 12,
+        borderBottomRightRadius: 12,
+    },
+    nextButton: {
+        backgroundColor: 'transparent',
+        borderTopRightRadius: 35,
+        borderBottomRightRadius: 35,
+        borderTopLeftRadius: 12,
+        borderBottomLeftRadius: 12,
+    },
+    navButtonText: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    progressContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginBottom: 20,
+        marginTop: 8,
+    },
+    progressDot: {
+        height: 10,
+        width: 10,
+        borderRadius: 5,
+        marginHorizontal: 6,
+        borderWidth: 2,
+        borderColor: '#fff',
+        ...Platform.select({
+            web: {
+                boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
+            },
+            default: {
+                shadowColor: colors.primary,
+                shadowOpacity: 0.08,
+                shadowOffset: { width: 0, height: 1 },
+                shadowRadius: 2,
+                elevation: 1,
+            }
+        }),
+    },
+    summaryContainer: {
+        padding: 0,
+        marginBottom: 24,
+        width: '100%',
+    },
+    summaryRow: {
+        flexDirection: 'row',
+        marginBottom: 10,
+    },
+    summaryLabel: {
+        fontSize: 15,
+        width: 90,
+    },
+    summaryValue: {
+        fontSize: 15,
+        fontWeight: '600',
+        flex: 1,
+    },
+    successContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 40,
+    },
+    successIcon: {
+        marginBottom: 24,
+    },
+    successTitle: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 12,
+        textAlign: 'center',
+    },
+    successMessage: {
+        fontSize: 16,
+        textAlign: 'center',
+        opacity: 0.8,
+        marginBottom: 24,
+    },
+});

package/src/ui/components/feedback/index.ts

@@ -0,0 +1,6 @@
+export { default as FormInput } from './FormInput';
+export { default as ProgressIndicator } from './ProgressIndicator';
+export { useFeedbackForm } from './useFeedbackForm';
+export { createFeedbackStyles } from './feedbackStyles';
+export { FEEDBACK_TYPES, PRIORITY_LEVELS, CATEGORIES } from './constants';
+export type { FeedbackData, FeedbackState, FeedbackColors, FeedbackStepAnimations, FeedbackType, PriorityLevel, User } from './types';

package/src/ui/components/feedback/types.ts

@@ -0,0 +1,52 @@
+import type { Animated } from 'react-native';
+
+export interface FeedbackData {
+    type: 'bug' | 'feature' | 'general' | 'support';
+    title: string;
+    description: string;
+    priority: 'low' | 'medium' | 'high' | 'critical';
+    category: string;
+    contactEmail: string;
+    systemInfo: boolean;
+}
+
+export interface FeedbackState {
+    status: 'idle' | 'submitting' | 'success' | 'error';
+    message: string;
+}
+
+export interface FeedbackType {
+    id: string;
+    label: string;
+    icon: string;
+    color: string;
+    description: string;
+}
+
+export interface PriorityLevel {
+    id: string;
+    label: string;
+    icon: string;
+    color: string;
+}
+
+export interface FeedbackColors {
+    primary: string;
+    text: string;
+    secondaryText: string;
+    border: string;
+    background: string;
+    inputBackground: string;
+    success?: string;
+}
+
+export interface FeedbackStepAnimations {
+    fadeAnim: Animated.Value;
+    slideAnim: Animated.Value;
+}
+
+export interface User {
+    id?: string;
+    email?: string;
+    username?: string;
+}

package/src/ui/components/feedback/useFeedbackForm.ts

@@ -0,0 +1,44 @@
+import { useState, useCallback } from 'react';
+import type { FeedbackData, FeedbackState } from './types';
+
+export const useFeedbackForm = () => {
+    const [feedbackData, setFeedbackData] = useState<FeedbackData>({
+        type: 'general',
+        title: '',
+        description: '',
+        priority: 'medium',
+        category: '',
+        contactEmail: '',
+        systemInfo: true,
+    });
+
+    const [feedbackState, setFeedbackState] = useState<FeedbackState>({
+        status: 'idle',
+        message: ''
+    });
+
+    const updateField = useCallback(<K extends keyof FeedbackData>(field: K, value: FeedbackData[K]) => {
+        setFeedbackData(prev => ({ ...prev, [field]: value }));
+    }, []);
+
+    const resetForm = useCallback(() => {
+        setFeedbackData({
+            type: 'general',
+            title: '',
+            description: '',
+            priority: 'medium',
+            category: '',
+            contactEmail: '',
+            systemInfo: true,
+        });
+        setFeedbackState({ status: 'idle', message: '' });
+    }, []);
+
+    return {
+        feedbackData,
+        feedbackState,
+        setFeedbackState,
+        updateField,
+        resetForm
+    };
+};