@oxyhq/services 6.9.13 → 6.9.15

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

@@ -0,0 +1,279 @@
+import type { FeedbackColors } from './types';
+export declare const createFeedbackStyles: (colors: FeedbackColors) => {
+    container: {
+        flex: number;
+    };
+    fullBleed: {
+        width: "100%";
+        alignSelf: "stretch";
+    };
+    scrollContent: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        paddingTop: number;
+        paddingBottom: number;
+        flexGrow: number;
+    };
+    stepContainer: {
+        flex: number;
+        justifyContent: "flex-start";
+        alignItems: "flex-start";
+    };
+    modernHeader: {
+        alignItems: "flex-start";
+        width: "100%";
+        marginBottom: number;
+    };
+    stepTitle: {
+        fontFamily: string;
+        fontWeight: "bold" | undefined;
+        fontSize: number;
+        lineHeight: number;
+        marginBottom: number;
+        textAlign: "left";
+        letterSpacing: number;
+    };
+    modernSubtitle: {
+        fontSize: number;
+        lineHeight: number;
+        textAlign: "left";
+        opacity: number;
+        marginBottom: number;
+    };
+    inputContainer: {
+        width: "100%";
+        marginBottom: number;
+    };
+    premiumInputWrapper: {
+        flexDirection: "row";
+        alignItems: "center";
+        height: number;
+        borderRadius: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        backgroundColor: string;
+    };
+    textAreaWrapper: {
+        flexDirection: "column";
+        alignItems: "flex-start";
+        minHeight: number;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderWidth: number;
+        backgroundColor: string;
+    };
+    inputIcon: {
+        marginRight: number;
+    };
+    inputContent: {
+        flex: number;
+    };
+    modernLabel: {
+        fontSize: number;
+        fontWeight: "500";
+        marginBottom: number;
+    };
+    modernInput: {
+        flex: number;
+        fontSize: number;
+        height: "100%";
+    };
+    textArea: {
+        flex: number;
+        fontSize: number;
+        textAlignVertical: "top";
+        minHeight: number;
+    };
+    categoryContainer: {
+        marginBottom: number;
+    };
+    checkboxContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        marginBottom: number;
+    };
+    checkbox: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        borderWidth: number;
+        marginRight: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    checkboxText: {
+        fontSize: number;
+        flex: number;
+    };
+    button: {
+        boxShadow: string;
+        shadowOffset?: undefined;
+        shadowOpacity?: undefined;
+        shadowRadius?: undefined;
+        elevation?: undefined;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        marginVertical: number;
+        gap: number;
+        width: "100%";
+    } | {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        boxShadow?: undefined;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        marginVertical: number;
+        gap: number;
+        width: "100%";
+    };
+    buttonText: {
+        color: string;
+        fontSize: number;
+        fontWeight: "600";
+        letterSpacing: number;
+    };
+    navigationButtons: {
+        flexDirection: "row";
+        justifyContent: "center";
+        marginTop: number;
+        marginBottom: number;
+        width: "100%";
+        gap: number;
+    };
+    navButton: {
+        boxShadow: string;
+        shadowOffset?: undefined;
+        shadowOpacity?: undefined;
+        shadowRadius?: undefined;
+        elevation?: undefined;
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        gap: number;
+        minWidth: number;
+        borderWidth: number;
+    } | {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        boxShadow?: undefined;
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        gap: number;
+        minWidth: number;
+        borderWidth: number;
+    };
+    backButton: {
+        backgroundColor: string;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
+    nextButton: {
+        backgroundColor: string;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+    };
+    navButtonText: {
+        fontSize: number;
+        fontWeight: "500";
+    };
+    progressContainer: {
+        flexDirection: "row";
+        justifyContent: "center";
+        marginBottom: number;
+        marginTop: number;
+    };
+    progressDot: {
+        boxShadow: string;
+        shadowColor?: undefined;
+        shadowOpacity?: undefined;
+        shadowOffset?: undefined;
+        shadowRadius?: undefined;
+        elevation?: undefined;
+        height: number;
+        width: number;
+        borderRadius: number;
+        marginHorizontal: number;
+        borderWidth: number;
+        borderColor: string;
+    } | {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation: number;
+        boxShadow?: undefined;
+        height: number;
+        width: number;
+        borderRadius: number;
+        marginHorizontal: number;
+        borderWidth: number;
+        borderColor: string;
+    };
+    summaryContainer: {
+        padding: number;
+        marginBottom: number;
+        width: "100%";
+    };
+    summaryRow: {
+        flexDirection: "row";
+        marginBottom: number;
+    };
+    summaryLabel: {
+        fontSize: number;
+        width: number;
+    };
+    summaryValue: {
+        fontSize: number;
+        fontWeight: "600";
+        flex: number;
+    };
+    successContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+        padding: number;
+    };
+    successIcon: {
+        marginBottom: number;
+    };
+    successTitle: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginBottom: number;
+        textAlign: "center";
+    };
+    successMessage: {
+        fontSize: number;
+        textAlign: "center";
+        opacity: number;
+        marginBottom: number;
+    };
+};

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

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFeedbackStyles = void 0;
+const react_native_1 = require("react-native");
+const spacing_1 = require("../../constants/spacing");
+const fonts_1 = require("../../styles/fonts");
+const createFeedbackStyles = (colors) => react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    fullBleed: {
+        width: '100%',
+        alignSelf: 'stretch',
+    },
+    scrollContent: {
+        flexGrow: 1,
+        ...spacing_1.screenContentStyle,
+    },
+    stepContainer: {
+        flex: 1,
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+    },
+    modernHeader: {
+        alignItems: 'flex-start',
+        width: '100%',
+        marginBottom: 24,
+    },
+    stepTitle: {
+        fontFamily: fonts_1.fontFamilies.interBold,
+        fontWeight: react_native_1.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%',
+        ...react_native_1.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,
+        ...react_native_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',
+        ...react_native_1.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,
+    },
+});
+exports.createFeedbackStyles = createFeedbackStyles;

package/src/ui/components/feedback/index.d.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/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CATEGORIES = exports.PRIORITY_LEVELS = exports.FEEDBACK_TYPES = exports.createFeedbackStyles = exports.useFeedbackForm = exports.ProgressIndicator = exports.FormInput = void 0;
+var FormInput_1 = require("./FormInput");
+Object.defineProperty(exports, "FormInput", { enumerable: true, get: function () { return __importDefault(FormInput_1).default; } });
+var ProgressIndicator_1 = require("./ProgressIndicator");
+Object.defineProperty(exports, "ProgressIndicator", { enumerable: true, get: function () { return __importDefault(ProgressIndicator_1).default; } });
+var useFeedbackForm_1 = require("./useFeedbackForm");
+Object.defineProperty(exports, "useFeedbackForm", { enumerable: true, get: function () { return useFeedbackForm_1.useFeedbackForm; } });
+var feedbackStyles_1 = require("./feedbackStyles");
+Object.defineProperty(exports, "createFeedbackStyles", { enumerable: true, get: function () { return feedbackStyles_1.createFeedbackStyles; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "FEEDBACK_TYPES", { enumerable: true, get: function () { return constants_1.FEEDBACK_TYPES; } });
+Object.defineProperty(exports, "PRIORITY_LEVELS", { enumerable: true, get: function () { return constants_1.PRIORITY_LEVELS; } });
+Object.defineProperty(exports, "CATEGORIES", { enumerable: true, get: function () { return constants_1.CATEGORIES; } });

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

@@ -0,0 +1,45 @@
+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: FeedbackData['type'];
+    label: string;
+    icon: string;
+    color: string;
+    description: string;
+}
+export interface PriorityLevel {
+    id: FeedbackData['priority'];
+    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/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+import type { FeedbackData, FeedbackState } from './types';
+export declare const useFeedbackForm: () => {
+    feedbackData: FeedbackData;
+    feedbackState: FeedbackState;
+    setFeedbackState: import("react").Dispatch<import("react").SetStateAction<FeedbackState>>;
+    updateField: <K extends keyof FeedbackData>(field: K, value: FeedbackData[K]) => void;
+    resetForm: () => void;
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeedbackForm = void 0;
+const react_1 = require("react");
+const useFeedbackForm = () => {
+    const [feedbackData, setFeedbackData] = (0, react_1.useState)({
+        type: 'general',
+        title: '',
+        description: '',
+        priority: 'medium',
+        category: '',
+        contactEmail: '',
+        systemInfo: true,
+    });
+    const [feedbackState, setFeedbackState] = (0, react_1.useState)({
+        status: 'idle',
+        message: ''
+    });
+    const updateField = (0, react_1.useCallback)((field, value) => {
+        setFeedbackData(prev => ({ ...prev, [field]: value }));
+    }, []);
+    const resetForm = (0, react_1.useCallback)(() => {
+        setFeedbackData({
+            type: 'general',
+            title: '',
+            description: '',
+            priority: 'medium',
+            category: '',
+            contactEmail: '',
+            systemInfo: true,
+        });
+        setFeedbackState({ status: 'idle', message: '' });
+    }, []);
+    return {
+        feedbackData,
+        feedbackState,
+        setFeedbackState,
+        updateField,
+        resetForm
+    };
+};
+exports.useFeedbackForm = useFeedbackForm;

package/src/ui/components/fileManagement/AnimatedButton.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+interface AnimatedButtonProps {
+    isSelected: boolean;
+    onPress: () => void;
+    icon: string;
+    primaryColor: string;
+    textColor: string;
+    style: Record<string, unknown>;
+}
+/**
+ * Animated button component for smooth selection transitions
+ * Used in file management views for view mode toggles
+ */
+export declare const AnimatedButton: React.FC<AnimatedButtonProps>;
+export {};

package/src/ui/components/fileManagement/AnimatedButton.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+const vector_icons_1 = require("@expo/vector-icons");
+/**
+ * Animated button component for smooth selection transitions
+ * Used in file management views for view mode toggles
+ */
+const AnimatedButton = ({ isSelected, onPress, icon, primaryColor, textColor, style, }) => {
+    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(isSelected ? 1 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(animatedValue, {
+            toValue: isSelected ? 1 : 0,
+            duration: 200,
+            easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+            useNativeDriver: false,
+        }).start();
+    }, [isSelected, animatedValue]);
+    const backgroundColor = animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['transparent', primaryColor],
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, activeOpacity: 0.7, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [style, { backgroundColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { children: (0, jsx_runtime_1.jsx)(vector_icons_1.MaterialCommunityIcons, { name: icon, size: 16, color: isSelected ? '#FFFFFF' : textColor }) }) }) }));
+};
+exports.AnimatedButton = AnimatedButton;