@umituz/react-native-notifications 1.1.2 → 1.1.3

package/lib/index.d.ts

@@ -11,4 +11,6 @@ export { NotificationService, notificationService } from './infrastructure/servi
 export { NotificationManager } from './infrastructure/services/NotificationManager';
 export { useNotificationSettings } from './infrastructure/hooks/useNotificationSettings';
 export { NotificationsScreen } from './presentation/screens/NotificationsScreen';
+export { NotificationsSection } from './presentation/components/NotificationsSection';
+export type { NotificationsSectionProps, NotificationsSectionConfig } from './presentation/components/NotificationsSection';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,YAAY,EACV,mBAAmB,EACnB,2BAA2B,EAC3B,qBAAqB,GACtB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAGtG,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACzG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAGpF,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAOzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,YAAY,EACV,mBAAmB,EACnB,2BAA2B,EAC3B,qBAAqB,GACtB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAGtG,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACzG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAGpF,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAQzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC;AACtF,YAAY,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,gDAAgD,CAAC"}

package/lib/index.js

@@ -16,5 +16,8 @@ export { useNotificationSettings } from './infrastructure/hooks/useNotificationS
 // PRESENTATION LAYER EXPORTS
 // ============================================================================
 // Screens
+// Screens
 export { NotificationsScreen } from './presentation/screens/NotificationsScreen';
+// Components
+export { NotificationsSection } from './presentation/components/NotificationsSection';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,gBAAgB;AAChB,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAOlF,wBAAwB;AACxB,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAEtG,WAAW;AACX,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACzG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAEpF,QAAQ;AACR,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAEzF,+EAA+E;AAC/E,6BAA6B;AAC7B,+EAA+E;AAE/E,UAAU;AACV,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,gBAAgB;AAChB,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAOlF,wBAAwB;AACxB,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAEtG,WAAW;AACX,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACzG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAEpF,QAAQ;AACR,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAEzF,+EAA+E;AAC/E,6BAA6B;AAC7B,+EAA+E;AAE/E,UAAU;AACV,UAAU;AACV,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AAEjF,aAAa;AACb,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC"}

package/lib/presentation/components/NotificationsSection.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface NotificationsSectionConfig {
+    initialValue?: boolean;
+    onToggleChange?: (value: boolean) => void;
+    route?: string;
+    defaultRoute?: string;
+    title?: string;
+    description?: string;
+    showToggle?: boolean;
+}
+export interface NotificationsSectionProps {
+    config?: NotificationsSectionConfig;
+    containerStyle?: ViewStyle;
+}
+export declare const NotificationsSection: React.FC<NotificationsSectionProps>;
+//# sourceMappingURL=NotificationsSection.d.ts.map

package/lib/presentation/components/NotificationsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsSection.d.ts","sourceRoot":"","sources":["../../../src/presentation/components/NotificationsSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAA6C,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpF,MAAM,WAAW,0BAA0B;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,yBAAyB;IACtC,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,cAAc,CAAC,EAAE,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAgHpE,CAAC"}

package/lib/presentation/components/NotificationsSection.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, Pressable, StyleSheet, Switch } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+import { useNavigation } from '@react-navigation/native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { notificationService } from '../../infrastructure/services/NotificationService';
+export const NotificationsSection = ({ config, containerStyle, }) => {
+    const navigation = useNavigation();
+    const tokens = useAppDesignTokens();
+    const colors = tokens.colors;
+    const [notificationsEnabled, setNotificationsEnabled] = useState(config?.initialValue ?? true);
+    useEffect(() => {
+        if (config?.initialValue !== undefined) {
+            setNotificationsEnabled(config.initialValue);
+        }
+    }, [config?.initialValue]);
+    const handleToggle = useCallback(async (value) => {
+        if (!value) {
+            // When turning ON (value is false -> true? Wait. onChange value is the NEW value)
+            // If value is true (turning on)
+        }
+        // Logic from settings:
+        /*
+        if (notificationService && !value) { // Wait, logic in settings was: if (!value) ...?
+           // Actually typically we request permissions when enabling.
+           // Settings code:
+           // if (notificationService && !value) { ... } -> This implies when value is FALSE?
+           // Ah, maybe the switch value logic was inverted or I misread.
+           // Let's re-read settings code.
+        }
+        */
+        if (value) { // Enabling
+            const hasPermissions = await notificationService.hasPermissions();
+            if (!hasPermissions) {
+                const granted = await notificationService.requestPermissions();
+                if (!granted) {
+                    // Permission denied, maybe don't enable switch?
+                    // For now just allow toggle and let app handle it or sync with state
+                }
+            }
+        }
+        setNotificationsEnabled(value);
+        config?.onToggleChange?.(value);
+    }, [config]);
+    const handlePress = useCallback(async () => {
+        const hasPermissions = await notificationService.hasPermissions();
+        if (!hasPermissions) {
+            await notificationService.requestPermissions();
+        }
+        navigation.navigate((config?.route || config?.defaultRoute || 'Notifications'));
+    }, [navigation, config?.route, config?.defaultRoute]);
+    const title = config?.title || 'Notifications';
+    const description = config?.description || 'Manage notification preferences';
+    const showToggle = config?.showToggle ?? true;
+    return (<View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
+            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>General</Text>
+
+            <Pressable style={({ pressed }) => [
+            styles.itemContainer,
+            {
+                backgroundColor: pressed && !showToggle ? `${colors.primary}08` : 'transparent',
+            },
+        ]} onPress={showToggle ? undefined : handlePress} disabled={showToggle}>
+                <View style={styles.content}>
+                    <View style={[
+            styles.iconContainer,
+            { backgroundColor: `${colors.primary}15` },
+        ]}>
+                        <Feather name="bell" size={24} color={colors.primary}/>
+                    </View>
+                    <View style={styles.textContainer}>
+                        <Text style={[styles.title, { color: colors.textPrimary }]}>{title}</Text>
+                        {!showToggle && (<Text style={[styles.description, { color: colors.textSecondary }]}>
+                                {description}
+                            </Text>)}
+                    </View>
+
+                    {showToggle ? (<Switch value={notificationsEnabled} onValueChange={handleToggle} trackColor={{
+                false: `${colors.textSecondary}30`,
+                true: colors.primary,
+            }} thumbColor={"#FFFFFF"} ios_backgroundColor={`${colors.textSecondary}30`}/>) : (<Feather name="chevron-right" size={20} color={colors.textSecondary}/>)}
+                </View>
+            </Pressable>
+        </View>);
+};
+const styles = StyleSheet.create({
+    sectionContainer: {
+        marginBottom: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 8,
+    },
+    itemContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        minHeight: 72,
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 16,
+    },
+    textContainer: {
+        flex: 1,
+        marginRight: 8,
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '500',
+        marginBottom: 4,
+    },
+    description: {
+        fontSize: 14,
+    },
+});
+//# sourceMappingURL=NotificationsSection.js.map

package/lib/presentation/components/NotificationsSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsSection.js","sourceRoot":"","sources":["../../../src/presentation/components/NotificationsSection.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-notifications",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Offline-first local notifications system for React Native apps using expo-notifications",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -41,12 +41,14 @@
     "zustand": "^5.0.2"
   },
   "devDependencies": {
+    "@expo/vector-icons": "^15.0.3",
     "@react-native-async-storage/async-storage": "^1.21.0",
+    "@react-navigation/native": "^7.1.25",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
     "@umituz/react-native-design-system": "^1.5.28",
-    "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system-atoms": "*",
+    "@umituz/react-native-design-system-theme": "^1.8.0",
     "expo-device": "~6.0.2",
     "expo-notifications": "~0.28.0",
     "react": "^18.2.0",
@@ -65,7 +67,6 @@
   ],
   "dependencies": {
     "@react-native-community/datetimepicker": "^8.5.0",
-    "@react-navigation/native": "^7.1.19",
     "@umituz/react-native-design-system-atoms": "*",
     "expo-linear-gradient": "^15.0.7",
     "react-native-safe-area-context": "^5.6.2"

package/src/index.ts

@@ -37,5 +37,10 @@ export { useNotificationSettings } from './infrastructure/hooks/useNotificationS
 // PRESENTATION LAYER EXPORTS
 // ============================================================================
 
+// Screens
 // Screens
 export { NotificationsScreen } from './presentation/screens/NotificationsScreen';
+
+// Components
+export { NotificationsSection } from './presentation/components/NotificationsSection';
+export type { NotificationsSectionProps, NotificationsSectionConfig } from './presentation/components/NotificationsSection';

package/src/presentation/components/NotificationsSection.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, Pressable, StyleSheet, Switch, ViewStyle } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+import { useNavigation } from '@react-navigation/native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { notificationService } from '../../infrastructure/services/NotificationService';
+
+export interface NotificationsSectionConfig {
+    initialValue?: boolean;
+    onToggleChange?: (value: boolean) => void;
+    route?: string;
+    defaultRoute?: string;
+    title?: string;
+    description?: string;
+    showToggle?: boolean;
+}
+
+export interface NotificationsSectionProps {
+    config?: NotificationsSectionConfig;
+    containerStyle?: ViewStyle;
+}
+
+export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
+    config,
+    containerStyle,
+}) => {
+    const navigation = useNavigation();
+    const tokens = useAppDesignTokens();
+    const colors = tokens.colors;
+
+    const [notificationsEnabled, setNotificationsEnabled] = useState(
+        config?.initialValue ?? true,
+    );
+
+    useEffect(() => {
+        if (config?.initialValue !== undefined) {
+            setNotificationsEnabled(config.initialValue);
+        }
+    }, [config?.initialValue]);
+
+    const handleToggle = useCallback(async (value: boolean) => {
+        if (!value) {
+            // When turning ON (value is false -> true? Wait. onChange value is the NEW value)
+            // If value is true (turning on)
+        }
+
+        // Logic from settings:
+        /*
+        if (notificationService && !value) { // Wait, logic in settings was: if (!value) ...?
+           // Actually typically we request permissions when enabling.
+           // Settings code:
+           // if (notificationService && !value) { ... } -> This implies when value is FALSE?
+           // Ah, maybe the switch value logic was inverted or I misread.
+           // Let's re-read settings code.
+        }
+        */
+
+        if (value) { // Enabling
+            const hasPermissions = await notificationService.hasPermissions();
+            if (!hasPermissions) {
+                const granted = await notificationService.requestPermissions();
+                if (!granted) {
+                    // Permission denied, maybe don't enable switch?
+                    // For now just allow toggle and let app handle it or sync with state
+                }
+            }
+        }
+
+        setNotificationsEnabled(value);
+        config?.onToggleChange?.(value);
+    }, [config]);
+
+    const handlePress = useCallback(async () => {
+        const hasPermissions = await notificationService.hasPermissions();
+        if (!hasPermissions) {
+            await notificationService.requestPermissions();
+        }
+        navigation.navigate((config?.route || config?.defaultRoute || 'Notifications') as never);
+    }, [navigation, config?.route, config?.defaultRoute]);
+
+    const title = config?.title || 'Notifications';
+    const description = config?.description || 'Manage notification preferences';
+    const showToggle = config?.showToggle ?? true;
+
+    return (
+        <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
+            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>General</Text>
+
+            <Pressable
+                style={({ pressed }) => [
+                    styles.itemContainer,
+                    {
+                        backgroundColor: pressed && !showToggle ? `${colors.primary}08` : 'transparent',
+                    },
+                ]}
+                onPress={showToggle ? undefined : handlePress}
+                disabled={showToggle}
+            >
+                <View style={styles.content}>
+                    <View
+                        style={[
+                            styles.iconContainer,
+                            { backgroundColor: `${colors.primary}15` },
+                        ]}
+                    >
+                        <Feather name="bell" size={24} color={colors.primary} />
+                    </View>
+                    <View style={styles.textContainer}>
+                        <Text style={[styles.title, { color: colors.textPrimary }]}>{title}</Text>
+                        {!showToggle && (
+                            <Text style={[styles.description, { color: colors.textSecondary }]}>
+                                {description}
+                            </Text>
+                        )}
+                    </View>
+
+                    {showToggle ? (
+                        <Switch
+                            value={notificationsEnabled}
+                            onValueChange={handleToggle}
+                            trackColor={{
+                                false: `${colors.textSecondary}30`,
+                                true: colors.primary,
+                            }}
+                            thumbColor={"#FFFFFF"}
+                            ios_backgroundColor={`${colors.textSecondary}30`}
+                        />
+                    ) : (
+                        <Feather name="chevron-right" size={20} color={colors.textSecondary} />
+                    )}
+                </View>
+            </Pressable>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionContainer: {
+        marginBottom: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 8,
+    },
+    itemContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        minHeight: 72,
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 16,
+    },
+    textContainer: {
+        flex: 1,
+        marginRight: 8,
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '500',
+        marginBottom: 4,
+    },
+    description: {
+        fontSize: 14,
+    },
+});