@tcbs/react-native-mazic-ui 0.1.1 → 0.1.3

package/lib/components/ExampleScreen.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExampleScreen: React.FC;
+export default ExampleScreen;

package/lib/components/ExampleScreen.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useTcbsColorStore } from '../store/themeStore';
+const ExampleScreen = () => {
+    const { colors, mode } = useTcbsColorStore();
+    const screenBgColor = colors[mode].screenBgColor;
+    return (React.createElement(View, { style: { flex: 1, backgroundColor: screenBgColor } },
+        React.createElement(Text, { style: { color: colors[mode].btnTextColor } }, "This screen uses theme screenBgColor!")));
+};
+export default ExampleScreen;

package/lib/components/TcbsButton.js

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Appearance } from 'react-native';
 import { TouchableOpacity, Text, View } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import Feather from 'react-native-vector-icons/Feather';
@@ -9,6 +10,7 @@ import MaterialDesignIcons from 'react-native-vector-icons/MaterialCommunityIcon
 import Octicons from 'react-native-vector-icons/Octicons';
 // import Lucide from 'react-native-vector-icons/Lucide';
 import { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS, } from './TcbsButton.types';
+import { useTcbsColorStore } from '../store/themeStore';
 const HEIGHTS = {
     [BUTTON_SIZE.LARGE]: 56,
     [BUTTON_SIZE.MEDIUM]: 40,
@@ -19,6 +21,7 @@ const FONT_SIZES = {
     [BUTTON_SIZE.MEDIUM]: 16,
     [BUTTON_SIZE.SMALL]: 14,
 };
+// Support for BORDER_RADIUS.NONE and BORDER_RADIUS.FULL (50%)
 const BORDER_RADIUSES = {
     [BUTTON_SIZE.LARGE]: BORDER_RADIUS.MEDIUM,
     [BUTTON_SIZE.MEDIUM]: BORDER_RADIUS.SMALL,
@@ -39,37 +42,70 @@ const BORDER_RADIUSES = {
  * />
  * ```
  */
-export const TcbsButton = ({ title, onPress, size = BUTTON_SIZE.LARGE, variant = BUTTON_VARIANT.PRIMARY, borderRadius, disabled = false, style, textStyle, iconName, iconGroup = 'MaterialDesignIcons', iconColor, iconSize, iconPosition = 'top', accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityState, themeColor = {
-    btnColor: '#007AFF',
-    themeColor: '#007AFF',
-    btnTextColor: '#FFFFFF',
-    btnTxtColor: '#FFFFFF',
-}, }) => {
-    const colors = themeColor;
+export const TcbsButton = ({ title, onPress, size = BUTTON_SIZE.LARGE, variant = BUTTON_VARIANT.PRIMARY, borderRadius, disabled = false, style, textStyle, iconName, iconGroup = 'MaterialDesignIcons', iconColor, iconSize, iconPosition = 'top', accessibilityLabel, accessibilityHint, accessibilityRole = 'button', accessibilityState, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    // Use themeColors from store if not provided as prop
+    const { themeColors, tcbsTheme } = useTcbsColorStore();
+    const effectiveThemeColor = themeColors;
+    // Normalize colors: if only one color is set, use it for all
+    const normalizedColors = {
+        btnColor: (_b = (_a = effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnColor) !== null && _a !== void 0 ? _a : effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.themeColor) !== null && _b !== void 0 ? _b : '#007AFF',
+        btnBorderColor: (_d = (_c = effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnBorderColor) !== null && _c !== void 0 ? _c : effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnColor) !== null && _d !== void 0 ? _d : '#007AFF',
+        btnIconColor: effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnIconColor,
+        btnTextColor: (_e = effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnTextColor) !== null && _e !== void 0 ? _e : effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnTxtColor,
+        themeColor: (_g = (_f = effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.themeColor) !== null && _f !== void 0 ? _f : effectiveThemeColor === null || effectiveThemeColor === void 0 ? void 0 : effectiveThemeColor.btnColor) !== null && _g !== void 0 ? _g : '#007AFF',
+    };
     const buttonStyle = useMemo(() => {
+        const height = HEIGHTS[size];
+        let computedBorderRadius;
+        if (borderRadius === BORDER_RADIUS.NONE) {
+            computedBorderRadius = 0;
+        }
+        else if (borderRadius === BORDER_RADIUS.FULL) {
+            computedBorderRadius = height / 2;
+        }
+        else if (borderRadius !== undefined) {
+            computedBorderRadius = borderRadius;
+        }
+        else {
+            computedBorderRadius = BORDER_RADIUSES[size];
+        }
         const baseStyle = {
-            height: HEIGHTS[size],
-            borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : BORDER_RADIUSES[size],
+            height,
+            borderRadius: computedBorderRadius,
             alignItems: 'center',
             justifyContent: 'center',
             opacity: disabled ? 0.6 : 1,
             paddingHorizontal: 24,
         };
         if (variant === BUTTON_VARIANT.SECONDARY) {
-            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#fff', borderWidth: 2, borderColor: colors.btnColor || colors.themeColor }), style);
+            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#fff', borderWidth: 2, borderColor: normalizedColors.btnBorderColor }), style);
         }
         if (variant === BUTTON_VARIANT.NO_BORDER) {
-            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#fff' }), style);
+            return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: 'transparent' }), style);
         }
         // Primary variant (default)
-        return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: colors.btnColor || colors.themeColor, shadowColor: colors.btnColor, shadowOpacity: 0.15, shadowRadius: 6, shadowOffset: { width: 0, height: 2 }, elevation: 2 }), style);
-    }, [size, variant, colors, style, disabled, borderRadius]);
+        return Object.assign(Object.assign(Object.assign({}, baseStyle), { backgroundColor: normalizedColors.btnColor, shadowColor: normalizedColors.btnColor, shadowOpacity: 0.15, shadowRadius: 6, shadowOffset: { width: 0, height: 2 }, elevation: 2 }), style);
+    }, [size, variant, normalizedColors, style, disabled, borderRadius]);
     const themedTextStyle = useMemo(() => {
-        const baseTextColor = variant === BUTTON_VARIANT.PRIMARY
-            ? colors.btnTextColor || colors.btnTxtColor || '#fff'
-            : colors.btnColor || colors.themeColor;
+        let baseTextColor;
+        if (variant === BUTTON_VARIANT.PRIMARY) {
+            baseTextColor = normalizedColors.btnTextColor || '#FFFFFF';
+        }
+        else if (variant === BUTTON_VARIANT.NO_BORDER) {
+            let colorScheme = tcbsTheme;
+            if (tcbsTheme === 'system') {
+                colorScheme = Appearance.getColorScheme() || 'light';
+            }
+            baseTextColor = colorScheme === 'dark'
+                ? normalizedColors.btnTextColor || '#FFFFFF'
+                : (normalizedColors === null || normalizedColors === void 0 ? void 0 : normalizedColors.btnColor) || '#007AFF';
+        }
+        else {
+            baseTextColor = (normalizedColors === null || normalizedColors === void 0 ? void 0 : normalizedColors.btnColor) || '#FFFFFF';
+        }
         return Object.assign({ color: baseTextColor, fontSize: FONT_SIZES[size], fontWeight: '700' }, textStyle);
-    }, [size, variant, colors, textStyle]);
+    }, [size, variant, normalizedColors, textStyle, tcbsTheme]);
     const renderIcon = (IconComponent) => (React.createElement(IconComponent, { name: iconName, size: iconSize || FONT_SIZES[size] * 2, color: iconColor || themedTextStyle.color, style: iconPosition === 'top'
             ? { marginBottom: 2 }
             : iconPosition === 'left'
@@ -113,5 +149,4 @@ export const TcbsButton = ({ title, onPress, size = BUTTON_SIZE.LARGE, variant =
     };
     return (React.createElement(TouchableOpacity, { onPress: onPress, disabled: disabled, style: buttonStyle, accessibilityLabel: accessibilityLabel || title, accessibilityHint: accessibilityHint, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState || { disabled } }, renderContent()));
 };
-// Export constants for use in consuming applications
 export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS };

package/lib/components/TcbsButton.types.d.ts

@@ -20,6 +20,8 @@ export declare const BORDER_RADIUS: {
     readonly SMALL: 8;
     readonly MEDIUM: 12;
     readonly LARGE: 16;
+    readonly NONE: 0;
+    readonly FULL: "50%";
 };
 export type ButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
 export type ButtonVariant = (typeof BUTTON_VARIANT)[keyof typeof BUTTON_VARIANT];
@@ -45,8 +47,11 @@ export interface TcbsButtonProps {
     accessibilityState?: AccessibilityState;
     themeColor?: {
         btnColor?: string;
+        btnBorderColor?: string;
+        btnIconColor?: string;
         themeColor?: string;
         btnTextColor?: string;
         btnTxtColor?: string;
     };
+    screenBgColor?: string;
 }

package/lib/components/TcbsButton.types.js

@@ -12,4 +12,6 @@ export const BORDER_RADIUS = {
     SMALL: 8,
     MEDIUM: 12,
     LARGE: 16,
+    NONE: 0,
+    FULL: '50%',
 };

package/lib/components/ThemeModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ThemeModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+export declare const ThemeModal: React.FC<ThemeModalProps>;
+export default ThemeModal;

package/lib/components/ThemeModal.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Modal, Pressable, View, Text, StyleSheet } from 'react-native';
+import { useTcbsColorStore } from '../store/themeStore';
+import { BUTTON_VARIANT, TcbsButton } from './TcbsButton';
+export const ThemeModal = ({ visible, onClose }) => {
+    const { tcbsTheme, setTcbsTheme, themeColors } = useTcbsColorStore();
+    // You can customize these colors or get them from your theme
+    const colors = {
+        menuCardBkgColor: themeColors.screenBgColor || '#fff',
+        textDark: themeColors.modalTitleColor || '#222',
+        textGray: '#888',
+    };
+    return (React.createElement(Modal, { transparent: true, animationType: "fade", visible: visible, onRequestClose: onClose },
+        React.createElement(Pressable, { style: styles.modalOverlay, onPress: onClose },
+            React.createElement(Pressable, { style: [styles.modalCard, { backgroundColor: themeColors.modalBgColor || "#00000080" }], onPress: () => { } },
+                React.createElement(View, { style: styles.modalClose },
+                    React.createElement(TcbsButton, { onPress: onClose, iconName: "close", iconColor: colors.textDark, iconPosition: "left", variant: BUTTON_VARIANT.NO_BORDER, iconSize: 22, accessibilityLabel: "Close", style: { padding: 8, marginRight: 0, minWidth: 0, minHeight: 0, alignSelf: 'flex-end' } })),
+                React.createElement(Text, { style: [styles.modalTitle, { color: colors.textDark }] }, "Theme"),
+                React.createElement(Text, { style: [styles.modalSubtitle, { color: colors.textDark }] }, "Choose how the app looks on this device."),
+                React.createElement(View, { style: { marginTop: 18 } },
+                    React.createElement(TcbsButton, { title: "Light", onPress: () => setTcbsTheme('light'), style: { marginBottom: 8 }, variant: tcbsTheme === 'light' ? 'primary' : 'secondary', iconGroup: "Ionicons", iconName: "sunny", iconPosition: "left", textStyle: { flex: 1, textAlign: 'center' } }),
+                    React.createElement(TcbsButton, { title: "Dark", onPress: () => setTcbsTheme('dark'), style: { marginBottom: 8 }, variant: tcbsTheme === 'dark' ? 'primary' : 'secondary', iconGroup: "Ionicons", iconName: "moon", iconPosition: "left", textStyle: { flex: 1, textAlign: 'center' } }),
+                    React.createElement(TcbsButton, { title: "System (default)", onPress: () => setTcbsTheme('system'), variant: tcbsTheme === 'system' ? 'primary' : 'secondary', iconGroup: "Ionicons", iconName: "settings", iconPosition: "left", textStyle: { flex: 1, textAlign: 'center' } }))))));
+};
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    modalCard: {
+        minWidth: 300,
+        borderRadius: 16,
+        padding: 24,
+        alignItems: 'stretch',
+        // shadowColor: '#000',
+        // shadowOpacity: 0.15,
+        shadowRadius: 12,
+        // shadowOffset: { width: 0, height: 4 },
+        // elevation: 4,
+    },
+    modalClose: {
+        position: 'absolute',
+        top: 8,
+        right: 8,
+        zIndex: 2,
+    },
+    modalTitle: {
+        fontSize: 20,
+        fontWeight: '700',
+        marginTop: 8,
+        marginBottom: 2,
+        textAlign: 'center',
+    },
+    modalSubtitle: {
+        fontSize: 14,
+        fontWeight: '400',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+});
+export default ThemeModal;

package/lib/components/error/AppErrorBoundary.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface AppErrorBoundaryProps {
+    children?: React.ReactNode;
+}
+export interface AppErrorBoundaryState {
+    hasError: boolean;
+    error: any;
+    reactError: {
+        name?: string;
+        message?: string;
+        stack?: string;
+    } | null;
+    errorInfo: {
+        componentStack?: string;
+    } | null;
+}
+export declare class AppErrorBoundary extends React.Component<AppErrorBoundaryProps, AppErrorBoundaryState> {
+    state: AppErrorBoundaryState;
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+        error: any;
+    };
+    componentDidCatch(error: any, errorInfo: any): void;
+    renderDevError(): React.JSX.Element | null;
+    renderProdError(): React.JSX.Element;
+    render(): React.ReactNode;
+}

package/lib/components/error/AppErrorBoundary.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { setupGlobalExceptionHandlers } from './setupGlobalExceptionHandlers';
+setupGlobalExceptionHandlers();
+export class AppErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+            error: null,
+            reactError: null,
+            errorInfo: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Log exactly what React gives
+        console.log('React Render Error:', error);
+        // Store everything needed for UI
+        this.setState({
+            error,
+            reactError: {
+                name: error === null || error === void 0 ? void 0 : error.name,
+                message: error === null || error === void 0 ? void 0 : error.message,
+                stack: error === null || error === void 0 ? void 0 : error.stack,
+            },
+            errorInfo,
+        });
+    }
+    renderDevError() {
+        const { error, reactError, errorInfo } = this.state;
+        if (!error)
+            return null;
+        return (React.createElement(SafeAreaView, { style: { flex: 1 } },
+            React.createElement(ScrollView, { style: styles.container },
+                React.createElement(Text, { style: styles.title }, "\uD83D\uDEA8 Application Error (DEV)"),
+                React.createElement(Section, { title: "\u274C What happened" },
+                    React.createElement(Text, { style: styles.errorText },
+                        error.name,
+                        ": ",
+                        error.message)),
+                React.createElement(Section, { title: "\u269B\uFE0F React render error" },
+                    React.createElement(Text, { style: styles.mono }, reactError === null || reactError === void 0 ? void 0 : reactError.stack)),
+                React.createElement(Section, { title: "\uD83D\uDCDC Component stack (Advanced)" },
+                    React.createElement(Text, { style: styles.stack }, errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack)))));
+    }
+    renderProdError() {
+        return (React.createElement(View, { style: styles.prodContainer },
+            React.createElement(Text, { style: styles.prodTitle }, "Something went wrong"),
+            React.createElement(Text, { style: styles.prodSubtitle }, "Please restart the application.")));
+    }
+    render() {
+        if (this.state.hasError) {
+            return __DEV__ ? this.renderDevError() : this.renderProdError();
+        }
+        return this.props.children;
+    }
+}
+const Section = ({ title, children }) => (React.createElement(View, { style: styles.section },
+    React.createElement(Text, { style: styles.sectionTitle }, title),
+    children));
+/* ---------- Styles ---------- */
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#0f172a',
+        padding: 16,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#f87171',
+        marginBottom: 12,
+    },
+    section: {
+        marginBottom: 16,
+    },
+    sectionTitle: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#38bdf8',
+        marginBottom: 6,
+    },
+    errorText: {
+        color: '#fecaca',
+        fontSize: 14,
+    },
+    mono: {
+        fontSize: 12,
+        color: '#e5e7eb',
+        lineHeight: 16,
+    },
+    stack: {
+        fontSize: 11,
+        color: '#94a3b8',
+        lineHeight: 16,
+    },
+    prodContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+    },
+    prodTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        marginBottom: 8,
+    },
+    prodSubtitle: {
+        fontSize: 14,
+        color: '#666',
+        textAlign: 'center',
+    },
+});

package/lib/index.d.ts

@@ -1,3 +1,5 @@
-export { Button } from './components/Button';
 export { TcbsButton } from './components/TcbsButton';
 export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS, ButtonSize, ButtonVariant, IconGroupType, IconPosition, TcbsButtonProps, IconComponentType, } from './components/TcbsButton.types';
+export { useTcbsColorStore } from './store/themeStore';
+export { ThemeModal } from './components/ThemeModal';
+export { AppErrorBoundary } from './components/error/AppErrorBoundary';

package/lib/index.js

@@ -1,3 +1,5 @@
-export { Button } from './components/Button';
 export { TcbsButton } from './components/TcbsButton';
 export { BUTTON_SIZE, BUTTON_VARIANT, BORDER_RADIUS, } from './components/TcbsButton.types';
+export { useTcbsColorStore } from './store/themeStore';
+export { ThemeModal } from './components/ThemeModal';
+export { AppErrorBoundary } from './components/error/AppErrorBoundary';

package/lib/store/themeStore.d.ts

@@ -0,0 +1,52 @@
+export type ThemeColor = {
+    btnColor: string;
+    btnBorderColor?: string;
+    btnIconColor?: string;
+    themeColor: string;
+    btnTextColor: string;
+    tabBarIconActiveColor?: string;
+    tabBarIconInactiveColor?: string;
+    modalBgColor?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    tertiaryColor?: string;
+    screenBgColor?: string;
+    modalHeaderBgColor?: string;
+    modalCardBgColor?: string;
+    modalTitleColor?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+    borderColor?: string;
+    dividerColor?: string;
+    inputBgColor?: string;
+    inputBorderColor?: string;
+    cardBgColor?: string;
+    cardBorderColor?: string;
+    accentColor?: string;
+    errorColor?: string;
+    successColor?: string;
+    warningColor?: string;
+};
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ThemeColors = {
+    light: ThemeColor;
+    dark: ThemeColor;
+};
+export interface ThemeStore {
+    colors: ThemeColors;
+    tcbsTheme: ThemeMode;
+    themeColors: ThemeColor;
+    /**
+     * Returns the current theme as 'light' or 'dark' (never 'system').
+     * If tcbsTheme is 'system', resolves to the current system color scheme.
+     */
+    currentThemeMode: 'light' | 'dark';
+    setTcbsColor: (colors: Partial<ThemeColor> & {
+        light?: Partial<ThemeColor>;
+        dark?: Partial<ThemeColor>;
+    }) => void;
+    setTcbsTheme: (mode: ThemeMode) => void;
+    toggleTcbsTheme: () => void;
+    setMazicColor: (baseColor: string) => void;
+}
+export declare const useTcbsColorStore: any;