@sudobility/building_blocks_rn 0.0.31 → 0.0.33

package/dist/src/components/pages/AppTextScreen.js

@@ -1,18 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, Text, ScrollView } from 'react-native';
 import { createThemedStyles } from '../../utils/styles';
+import { useIsRTL } from '../../hooks/useRTL';
 function TextSectionView({ section, level = 2, }) {
     const styles = useStyles();
-    return (_jsxs(View, { style: styles.section, children: [_jsx(Text, { style: level === 2 ? styles.sectionTitle : styles.subsectionTitle, children: section.title }), section.content && (_jsx(Text, { style: styles.sectionContent, children: section.content })), section.items && section.items.length > 0 && (_jsx(View, { style: styles.list, children: section.items.map((item, index) => (_jsxs(View, { style: styles.listItem, children: [_jsx(Text, { style: styles.bullet, children: '\u2022' }), _jsx(Text, { style: styles.listItemText, children: item })] }, index))) })), section.subsections?.map((sub, index) => (_jsx(TextSectionView, { section: sub, level: 3 }, index)))] }));
+    const isRTL = useIsRTL();
+    return (_jsxs(View, { style: styles.section, children: [_jsx(Text, { style: [
+                    level === 2 ? styles.sectionTitle : styles.subsectionTitle,
+                    isRTL && styles.rtlText,
+                ], children: section.title }), section.content && (_jsx(Text, { style: [styles.sectionContent, isRTL && styles.rtlText], children: section.content })), section.items && section.items.length > 0 && (_jsx(View, { style: styles.list, children: section.items.map((item, index) => (_jsxs(View, { style: styles.listItem, children: [_jsx(Text, { style: styles.bullet, children: '\u2022' }), _jsx(Text, { style: [styles.listItemText, isRTL && styles.rtlText], children: item })] }, index))) })), section.subsections?.map((sub, index) => (_jsx(TextSectionView, { section: sub, level: 3 }, index)))] }));
 }
 export function AppTextScreen({ text, lastUpdatedDate, ScreenWrapper, style, }) {
     const styles = useStyles();
+    const isRTL = useIsRTL();
     const lastUpdated = text.lastUpdated
         ? text.lastUpdated.replace('{{date}}', lastUpdatedDate ?? '')
         : lastUpdatedDate
             ? `Last updated: ${lastUpdatedDate}`
             : undefined;
-    const content = (_jsxs(View, { style: [styles.container, style], children: [_jsx(Text, { style: styles.title, children: text.title }), lastUpdated && _jsx(Text, { style: styles.lastUpdated, children: lastUpdated }), text.sections.map((section, index) => (_jsx(TextSectionView, { section: section }, index))), text.contact && (_jsxs(View, { style: styles.contactSection, children: [_jsx(Text, { style: styles.sectionTitle, children: text.contact.title }), _jsx(Text, { style: styles.sectionContent, children: text.contact.description }), _jsx(Text, { style: styles.contactInfo, children: text.contact.info }), text.contact.gdprNotice && (_jsx(Text, { style: styles.gdprNotice, children: text.contact.gdprNotice }))] }))] }));
+    const content = (_jsxs(View, { style: [styles.container, style], children: [_jsx(Text, { style: [styles.title, isRTL && styles.rtlText], children: text.title }), lastUpdated && (_jsx(Text, { style: [styles.lastUpdated, isRTL && styles.rtlText], children: lastUpdated })), text.sections.map((section, index) => (_jsx(TextSectionView, { section: section }, index))), text.contact && (_jsxs(View, { style: styles.contactSection, children: [_jsx(Text, { style: [styles.sectionTitle, isRTL && styles.rtlText], children: text.contact.title }), _jsx(Text, { style: [styles.sectionContent, isRTL && styles.rtlText], children: text.contact.description }), _jsx(Text, { style: [styles.contactInfo, isRTL && styles.rtlText], children: text.contact.info }), text.contact.gdprNotice && (_jsx(Text, { style: [styles.gdprNotice, isRTL && styles.rtlText], children: text.contact.gdprNotice }))] }))] }));
     if (ScreenWrapper) {
         return _jsx(ScreenWrapper, { children: content });
     }
@@ -30,13 +36,11 @@ const useStyles = createThemedStyles(colors => ({
         fontWeight: '700',
         color: colors.text,
         marginBottom: 8,
-        textAlign: 'auto',
     },
     lastUpdated: {
         fontSize: 14,
         color: colors.textMuted,
         marginBottom: 24,
-        textAlign: 'auto',
     },
     section: {
         marginBottom: 24,
@@ -46,20 +50,17 @@ const useStyles = createThemedStyles(colors => ({
         fontWeight: '600',
         color: colors.text,
         marginBottom: 8,
-        textAlign: 'auto',
     },
     subsectionTitle: {
         fontSize: 17,
         fontWeight: '600',
         color: colors.text,
         marginBottom: 6,
-        textAlign: 'auto',
     },
     sectionContent: {
         fontSize: 15,
         lineHeight: 22,
         color: colors.textSecondary,
-        textAlign: 'auto',
     },
     list: {
         marginTop: 8,
@@ -80,7 +81,6 @@ const useStyles = createThemedStyles(colors => ({
         lineHeight: 22,
         color: colors.textSecondary,
         flex: 1,
-        textAlign: 'auto',
     },
     contactSection: {
         marginTop: 16,
@@ -92,13 +92,14 @@ const useStyles = createThemedStyles(colors => ({
         fontSize: 15,
         color: colors.primary,
         marginTop: 8,
-        textAlign: 'auto',
     },
     gdprNotice: {
         fontSize: 13,
         color: colors.textMuted,
         marginTop: 12,
         fontStyle: 'italic',
-        textAlign: 'auto',
+    },
+    rtlText: {
+        writingDirection: 'rtl',
     },
 }));

package/dist/src/components/settings/LanguagePicker.js

@@ -14,24 +14,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState } from 'react';
 import { View, Text, Pressable, Modal, FlatList, SafeAreaView, } from 'react-native';
+import { useRTLTextStyle } from '../../hooks/useRTL';
 import { DEFAULT_LANGUAGES } from '../../constants/languages';
 import { createThemedStyles } from '../../utils/styles';
 export function LanguagePicker({ languages = DEFAULT_LANGUAGES, currentLanguage = 'en', onLanguageChange, label, style, }) {
     const styles = useStyles();
+    const rtlText = useRTLTextStyle();
     const [modalVisible, setModalVisible] = useState(false);
     const currentLang = languages.find(l => l.code === currentLanguage);
     const handleSelect = (code) => {
         onLanguageChange?.(code);
         setModalVisible(false);
     };
-    return (_jsxs(View, { style: style, children: [label && _jsx(Text, { style: styles.label, children: label }), _jsxs(Pressable, { style: styles.trigger, onPress: () => setModalVisible(true), accessibilityRole: 'button', accessibilityLabel: `${label ?? 'Language'}: ${currentLang?.name ?? currentLanguage}. Tap to change.`, children: [_jsx(Text, { style: styles.triggerText, children: currentLang
+    return (_jsxs(View, { style: style, children: [label && _jsx(Text, { style: [styles.label, rtlText], children: label }), _jsxs(Pressable, { style: styles.trigger, onPress: () => setModalVisible(true), accessibilityRole: 'button', accessibilityLabel: `${label ?? 'Language'}: ${currentLang?.name ?? currentLanguage}. Tap to change.`, children: [_jsx(Text, { style: [styles.triggerText, rtlText], children: currentLang
                             ? `${currentLang.flag} ${currentLang.name}`
-                            : currentLanguage }), _jsx(Text, { style: styles.chevron, children: '\u25BC' })] }), _jsx(Modal, { visible: modalVisible, animationType: 'slide', presentationStyle: 'pageSheet', onRequestClose: () => setModalVisible(false), children: _jsxs(SafeAreaView, { style: styles.modal, children: [_jsxs(View, { style: styles.modalHeader, children: [_jsx(Text, { style: styles.modalTitle, accessibilityRole: 'header', children: label ?? 'Select Language' }), _jsx(Pressable, { onPress: () => setModalVisible(false), accessibilityRole: 'button', accessibilityLabel: 'Done, close language picker', children: _jsx(Text, { style: styles.closeButton, children: "Done" }) })] }), _jsx(FlatList, { data: languages, keyExtractor: item => item.code, renderItem: ({ item }) => (_jsxs(Pressable, { style: [
+                            : currentLanguage }), _jsx(Text, { style: styles.chevron, children: '\u25BC' })] }), _jsx(Modal, { visible: modalVisible, animationType: 'slide', presentationStyle: 'pageSheet', onRequestClose: () => setModalVisible(false), children: _jsxs(SafeAreaView, { style: styles.modal, children: [_jsxs(View, { style: styles.modalHeader, children: [_jsx(Text, { style: [styles.modalTitle, rtlText], accessibilityRole: 'header', children: label ?? 'Select Language' }), _jsx(Pressable, { onPress: () => setModalVisible(false), accessibilityRole: 'button', accessibilityLabel: 'Done, close language picker', children: _jsx(Text, { style: styles.closeButton, children: "Done" }) })] }), _jsx(FlatList, { data: languages, keyExtractor: item => item.code, renderItem: ({ item }) => (_jsxs(Pressable, { style: [
                                     styles.languageRow,
                                     item.code === currentLanguage && styles.languageRowActive,
                                 ], onPress: () => handleSelect(item.code), accessibilityRole: 'radio', accessibilityState: {
                                     selected: item.code === currentLanguage,
-                                }, accessibilityLabel: `${item.name}${item.code === currentLanguage ? ', selected' : ''}`, children: [_jsx(Text, { style: styles.flag, children: item.flag }), _jsx(Text, { style: styles.languageName, children: item.name }), item.code === currentLanguage && (_jsx(Text, { style: styles.checkmark, children: '\u2713' }))] })), ItemSeparatorComponent: () => _jsx(View, { style: styles.separator }) })] }) })] }));
+                                }, accessibilityLabel: `${item.name}${item.code === currentLanguage ? ', selected' : ''}`, children: [_jsx(Text, { style: styles.flag, children: item.flag }), _jsx(Text, { style: [styles.languageName, rtlText], children: item.name }), item.code === currentLanguage && (_jsx(Text, { style: styles.checkmark, children: '\u2713' }))] })), ItemSeparatorComponent: () => _jsx(View, { style: styles.separator }) })] }) })] }));
 }
 const useStyles = createThemedStyles(colors => ({
     label: {
@@ -39,7 +41,6 @@ const useStyles = createThemedStyles(colors => ({
         fontWeight: '500',
         color: colors.textSecondary,
         marginBottom: 8,
-        textAlign: 'auto',
     },
     trigger: {
         flexDirection: 'row',
@@ -56,7 +57,6 @@ const useStyles = createThemedStyles(colors => ({
     triggerText: {
         fontSize: 16,
         color: colors.text,
-        textAlign: 'auto',
     },
     chevron: {
         fontSize: 10,
@@ -103,7 +103,6 @@ const useStyles = createThemedStyles(colors => ({
         fontSize: 16,
         color: colors.text,
         flex: 1,
-        textAlign: 'auto',
     },
     checkmark: {
         fontSize: 18,

package/dist/src/components/settings/SettingsListScreen.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, Text, Pressable, ScrollView } from 'react-native';
 import { createThemedStyles } from '../../utils/styles';
+import { useRTLTextStyle } from '../../hooks/useRTL';
 export function SettingsListScreen({ sections, onSectionPress, title = 'Settings', style, onTrack, }) {
     const styles = useStyles();
+    const rtlText = useRTLTextStyle();
     const handlePress = (section) => {
         onTrack?.({
             eventType: 'navigation',
@@ -12,12 +14,12 @@ export function SettingsListScreen({ sections, onSectionPress, title = 'Settings
         });
         onSectionPress(section.id);
     };
-    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [_jsx(Text, { style: styles.title, accessibilityRole: 'header', children: title }), _jsx(View, { style: styles.sectionList, accessibilityRole: 'list', children: sections.map((section, index) => {
+    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [_jsx(Text, { style: [styles.title, rtlText], accessibilityRole: 'header', children: title }), _jsx(View, { style: styles.sectionList, accessibilityRole: 'list', children: sections.map((section, index) => {
                     const IconComponent = section.icon;
                     return (_jsxs(Pressable, { style: [
                             styles.sectionRow,
                             index < sections.length - 1 && styles.sectionRowBorder,
-                        ], onPress: () => handlePress(section), accessibilityRole: 'button', accessibilityLabel: `${section.label}${section.description ? `, ${section.description}` : ''}`, accessibilityHint: `Opens ${section.label} settings`, children: [IconComponent && (_jsx(View, { style: styles.iconContainer, children: _jsx(IconComponent, { size: 20, color: styles.iconColor.color }) })), _jsxs(View, { style: styles.sectionInfo, children: [_jsx(Text, { style: styles.sectionLabel, children: section.label }), section.description && (_jsx(Text, { style: styles.sectionDescription, children: section.description }))] }), _jsx(Text, { style: styles.chevron, children: '\u203A' })] }, section.id));
+                        ], onPress: () => handlePress(section), accessibilityRole: 'button', accessibilityLabel: `${section.label}${section.description ? `, ${section.description}` : ''}`, accessibilityHint: `Opens ${section.label} settings`, children: [IconComponent && (_jsx(View, { style: styles.iconContainer, children: _jsx(IconComponent, { size: 20, color: styles.iconColor.color }) })), _jsxs(View, { style: styles.sectionInfo, children: [_jsx(Text, { style: [styles.sectionLabel, rtlText], children: section.label }), section.description && (_jsx(Text, { style: [styles.sectionDescription, rtlText], children: section.description }))] }), _jsx(Text, { style: styles.chevron, children: '\u203A' })] }, section.id));
                 }) })] }));
 }
 const useStyles = createThemedStyles(colors => ({
@@ -33,7 +35,6 @@ const useStyles = createThemedStyles(colors => ({
         fontWeight: '700',
         color: colors.text,
         marginBottom: 20,
-        textAlign: 'auto',
     },
     sectionList: {
         backgroundColor: colors.card,
@@ -70,13 +71,11 @@ const useStyles = createThemedStyles(colors => ({
         fontSize: 16,
         fontWeight: '500',
         color: colors.text,
-        textAlign: 'auto',
     },
     sectionDescription: {
         fontSize: 13,
         color: colors.textMuted,
         marginTop: 2,
-        textAlign: 'auto',
     },
     chevron: {
         fontSize: 22,

package/dist/src/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useResponsive } from './useResponsive';
 export type { ResponsiveInfo } from './useResponsive';
+export { useIsRTL, useRTLTextStyle } from './useRTL';

package/dist/src/hooks/index.js

@@ -1 +1,2 @@
 export { useResponsive } from './useResponsive';
+export { useIsRTL, useRTLTextStyle } from './useRTL';

package/dist/src/hooks/useRTL.d.ts

@@ -0,0 +1,12 @@
+import { type TextStyle } from 'react-native';
+/**
+ * Returns whether the current language is RTL.
+ * Checks both I18nManager (native layout) and the current i18n language
+ * (covers the session before a restart applies forceRTL).
+ */
+export declare function useIsRTL(): boolean;
+/**
+ * Returns a text style object that sets the correct text alignment
+ * for the current language direction.
+ */
+export declare function useRTLTextStyle(): TextStyle;

package/dist/src/hooks/useRTL.js

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { I18nManager } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { isRTL as isRTLLanguage } from '../constants/languages';
+/**
+ * Returns whether the current language is RTL.
+ * Checks both I18nManager (native layout) and the current i18n language
+ * (covers the session before a restart applies forceRTL).
+ */
+export function useIsRTL() {
+    const { i18n } = useTranslation();
+    return I18nManager.isRTL || isRTLLanguage(i18n.language);
+}
+/**
+ * Returns a text style object that sets the correct text alignment
+ * for the current language direction.
+ */
+export function useRTLTextStyle() {
+    const isRTL = useIsRTL();
+    return useMemo(() => ({
+        textAlign: isRTL ? 'right' : 'left',
+        writingDirection: isRTL ? 'rtl' : 'ltr',
+    }), [isRTL]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/building_blocks_rn",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
   "type": "module",
   "main": "./dist/index.js",