@sudobility/building_blocks_rn 0.0.27 → 0.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/src/components/pages/AppTextScreen.js +11 -3
  2. package/dist/src/components/settings/LanguagePicker.js +8 -4
  3. package/dist/src/components/settings/SettingsListScreen.js +8 -3
  4. package/package.json +1 -1
package/dist/src/components/pages/AppTextScreen.js CHANGED
@@ -1,18 +1,26 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { View, Text, ScrollView } from 'react-native';
2
+ import { View, Text, ScrollView, I18nManager } from 'react-native';
3
3
  import { createThemedStyles } from '../../utils/styles';
4
+ function useRTLText() {
5
+ return I18nManager.isRTL ? { writingDirection: 'rtl' } : undefined;
6
+ }
4
7
  function TextSectionView({ section, level = 2, }) {
5
8
  const styles = useStyles();
6
- 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)))] }));
9
+ const rtlText = useRTLText();
10
+ return (_jsxs(View, { style: styles.section, children: [_jsx(Text, { style: [
11
+ level === 2 ? styles.sectionTitle : styles.subsectionTitle,
12
+ rtlText,
13
+ ], children: section.title }), section.content && (_jsx(Text, { style: [styles.sectionContent, 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, rtlText], children: item })] }, index))) })), section.subsections?.map((sub, index) => (_jsx(TextSectionView, { section: sub, level: 3 }, index)))] }));
7
14
  }
8
15
  export function AppTextScreen({ text, lastUpdatedDate, ScreenWrapper, style, }) {
9
16
  const styles = useStyles();
17
+ const rtlText = useRTLText();
10
18
  const lastUpdated = text.lastUpdated
11
19
  ? text.lastUpdated.replace('{{date}}', lastUpdatedDate ?? '')
12
20
  : lastUpdatedDate
13
21
  ? `Last updated: ${lastUpdatedDate}`
14
22
  : undefined;
15
- 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 }))] }))] }));
23
+ const content = (_jsxs(View, { style: [styles.container, style], children: [_jsx(Text, { style: [styles.title, rtlText], children: text.title }), lastUpdated && (_jsx(Text, { style: [styles.lastUpdated, 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, rtlText], children: text.contact.title }), _jsx(Text, { style: [styles.sectionContent, rtlText], children: text.contact.description }), _jsx(Text, { style: [styles.contactInfo, rtlText], children: text.contact.info }), text.contact.gdprNotice && (_jsx(Text, { style: [styles.gdprNotice, rtlText], children: text.contact.gdprNotice }))] }))] }));
16
24
  if (ScreenWrapper) {
17
25
  return _jsx(ScreenWrapper, { children: content });
18
26
  }
package/dist/src/components/settings/LanguagePicker.js CHANGED
@@ -13,25 +13,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  * The `presentationStyle` prop is ignored on Android.
14
14
  */
15
15
  import { useState } from 'react';
16
- import { View, Text, Pressable, Modal, FlatList, SafeAreaView, } from 'react-native';
16
+ import { View, Text, Pressable, Modal, FlatList, SafeAreaView, I18nManager, } from 'react-native';
17
+ function useRTLText() {
18
+ return I18nManager.isRTL ? { writingDirection: 'rtl' } : undefined;
19
+ }
17
20
  import { DEFAULT_LANGUAGES } from '../../constants/languages';
18
21
  import { createThemedStyles } from '../../utils/styles';
19
22
  export function LanguagePicker({ languages = DEFAULT_LANGUAGES, currentLanguage = 'en', onLanguageChange, label, style, }) {
20
23
  const styles = useStyles();
24
+ const rtlText = useRTLText();
21
25
  const [modalVisible, setModalVisible] = useState(false);
22
26
  const currentLang = languages.find(l => l.code === currentLanguage);
23
27
  const handleSelect = (code) => {
24
28
  onLanguageChange?.(code);
25
29
  setModalVisible(false);
26
30
  };
27
- 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
31
+ 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
28
32
  ? `${currentLang.flag} ${currentLang.name}`
29
- : 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: [
33
+ : 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: [
30
34
  styles.languageRow,
31
35
  item.code === currentLanguage && styles.languageRowActive,
32
36
  ], onPress: () => handleSelect(item.code), accessibilityRole: 'radio', accessibilityState: {
33
37
  selected: item.code === currentLanguage,
34
- }, 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 }) })] }) })] }));
38
+ }, 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 }) })] }) })] }));
35
39
  }
36
40
  const useStyles = createThemedStyles(colors => ({
37
41
  label: {
package/dist/src/components/settings/SettingsListScreen.js CHANGED
@@ -1,8 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { View, Text, Pressable, ScrollView } from 'react-native';
2
+ import { View, Text, Pressable, ScrollView, I18nManager } from 'react-native';
3
3
  import { createThemedStyles } from '../../utils/styles';
4
+ function useRTLText() {
5
+ return I18nManager.isRTL ? { writingDirection: 'rtl' } : undefined;
6
+ }
4
7
  export function SettingsListScreen({ sections, onSectionPress, title = 'Settings', style, onTrack, }) {
5
8
  const styles = useStyles();
9
+ const rtlText = useRTLText();
6
10
  const handlePress = (section) => {
7
11
  onTrack?.({
8
12
  eventType: 'navigation',
@@ -12,12 +16,12 @@ export function SettingsListScreen({ sections, onSectionPress, title = 'Settings
12
16
  });
13
17
  onSectionPress(section.id);
14
18
  };
15
- 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) => {
19
+ 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) => {
16
20
  const IconComponent = section.icon;
17
21
  return (_jsxs(Pressable, { style: [
18
22
  styles.sectionRow,
19
23
  index < sections.length - 1 && styles.sectionRowBorder,
20
- ], 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));
24
+ ], 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));
21
25
  }) })] }));
22
26
  }
23
27
  const useStyles = createThemedStyles(colors => ({
@@ -63,6 +67,7 @@ const useStyles = createThemedStyles(colors => ({
63
67
  },
64
68
  sectionInfo: {
65
69
  flex: 1,
70
+ alignItems: 'flex-start',
66
71
  },
67
72
  sectionLabel: {
68
73
  fontSize: 16,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sudobility/building_blocks_rn",
3
- "version": "0.0.27",
3
+ "version": "0.0.29",
4
4
  "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",