@sudobility/building_blocks_rn 0.0.29 → 0.0.30

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 -11
  2. package/dist/src/components/settings/LanguagePicker.js +7 -8
  3. package/dist/src/components/settings/SettingsListScreen.js +6 -7
  4. package/package.json +1 -1
package/dist/src/components/pages/AppTextScreen.js CHANGED
@@ -1,26 +1,18 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { View, Text, ScrollView, I18nManager } from 'react-native';
2
+ import { View, Text, ScrollView } from 'react-native';
3
3
  import { createThemedStyles } from '../../utils/styles';
4
- function useRTLText() {
5
- return I18nManager.isRTL ? { writingDirection: 'rtl' } : undefined;
6
- }
7
4
  function TextSectionView({ section, level = 2, }) {
8
5
  const styles = useStyles();
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)))] }));
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)))] }));
14
7
  }
15
8
  export function AppTextScreen({ text, lastUpdatedDate, ScreenWrapper, style, }) {
16
9
  const styles = useStyles();
17
- const rtlText = useRTLText();
18
10
  const lastUpdated = text.lastUpdated
19
11
  ? text.lastUpdated.replace('{{date}}', lastUpdatedDate ?? '')
20
12
  : lastUpdatedDate
21
13
  ? `Last updated: ${lastUpdatedDate}`
22
14
  : undefined;
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 }))] }))] }));
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 }))] }))] }));
24
16
  if (ScreenWrapper) {
25
17
  return _jsx(ScreenWrapper, { children: content });
26
18
  }
@@ -39,12 +31,14 @@ const useStyles = createThemedStyles(colors => ({
39
31
  color: colors.text,
40
32
  marginBottom: 8,
41
33
  alignSelf: 'flex-start',
34
+ textAlign: 'auto',
42
35
  },
43
36
  lastUpdated: {
44
37
  fontSize: 14,
45
38
  color: colors.textMuted,
46
39
  marginBottom: 24,
47
40
  alignSelf: 'flex-start',
41
+ textAlign: 'auto',
48
42
  },
49
43
  section: {
50
44
  marginBottom: 24,
@@ -56,6 +50,7 @@ const useStyles = createThemedStyles(colors => ({
56
50
  color: colors.text,
57
51
  marginBottom: 8,
58
52
  alignSelf: 'flex-start',
53
+ textAlign: 'auto',
59
54
  },
60
55
  subsectionTitle: {
61
56
  fontSize: 17,
@@ -63,12 +58,14 @@ const useStyles = createThemedStyles(colors => ({
63
58
  color: colors.text,
64
59
  marginBottom: 6,
65
60
  alignSelf: 'flex-start',
61
+ textAlign: 'auto',
66
62
  },
67
63
  sectionContent: {
68
64
  fontSize: 15,
69
65
  lineHeight: 22,
70
66
  color: colors.textSecondary,
71
67
  alignSelf: 'flex-start',
68
+ textAlign: 'auto',
72
69
  },
73
70
  list: {
74
71
  marginTop: 8,
@@ -91,6 +88,7 @@ const useStyles = createThemedStyles(colors => ({
91
88
  lineHeight: 22,
92
89
  color: colors.textSecondary,
93
90
  flex: 1,
91
+ textAlign: 'auto',
94
92
  },
95
93
  contactSection: {
96
94
  marginTop: 16,
@@ -104,6 +102,7 @@ const useStyles = createThemedStyles(colors => ({
104
102
  color: colors.primary,
105
103
  marginTop: 8,
106
104
  alignSelf: 'flex-start',
105
+ textAlign: 'auto',
107
106
  },
108
107
  gdprNotice: {
109
108
  fontSize: 13,
@@ -111,5 +110,6 @@ const useStyles = createThemedStyles(colors => ({
111
110
  marginTop: 12,
112
111
  fontStyle: 'italic',
113
112
  alignSelf: 'flex-start',
113
+ textAlign: 'auto',
114
114
  },
115
115
  }));
package/dist/src/components/settings/LanguagePicker.js CHANGED
@@ -13,29 +13,25 @@ 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, I18nManager, } from 'react-native';
17
- function useRTLText() {
18
- return I18nManager.isRTL ? { writingDirection: 'rtl' } : undefined;
19
- }
16
+ import { View, Text, Pressable, Modal, FlatList, SafeAreaView, } from 'react-native';
20
17
  import { DEFAULT_LANGUAGES } from '../../constants/languages';
21
18
  import { createThemedStyles } from '../../utils/styles';
22
19
  export function LanguagePicker({ languages = DEFAULT_LANGUAGES, currentLanguage = 'en', onLanguageChange, label, style, }) {
23
20
  const styles = useStyles();
24
- const rtlText = useRTLText();
25
21
  const [modalVisible, setModalVisible] = useState(false);
26
22
  const currentLang = languages.find(l => l.code === currentLanguage);
27
23
  const handleSelect = (code) => {
28
24
  onLanguageChange?.(code);
29
25
  setModalVisible(false);
30
26
  };
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
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
32
28
  ? `${currentLang.flag} ${currentLang.name}`
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: [
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: [
34
30
  styles.languageRow,
35
31
  item.code === currentLanguage && styles.languageRowActive,
36
32
  ], onPress: () => handleSelect(item.code), accessibilityRole: 'radio', accessibilityState: {
37
33
  selected: item.code === currentLanguage,
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 }) })] }) })] }));
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 }) })] }) })] }));
39
35
  }
40
36
  const useStyles = createThemedStyles(colors => ({
41
37
  label: {
@@ -43,6 +39,7 @@ const useStyles = createThemedStyles(colors => ({
43
39
  fontWeight: '500',
44
40
  color: colors.textSecondary,
45
41
  marginBottom: 8,
42
+ textAlign: 'auto',
46
43
  },
47
44
  trigger: {
48
45
  flexDirection: 'row',
@@ -59,6 +56,7 @@ const useStyles = createThemedStyles(colors => ({
59
56
  triggerText: {
60
57
  fontSize: 16,
61
58
  color: colors.text,
59
+ textAlign: 'auto',
62
60
  },
63
61
  chevron: {
64
62
  fontSize: 10,
@@ -105,6 +103,7 @@ const useStyles = createThemedStyles(colors => ({
105
103
  fontSize: 16,
106
104
  color: colors.text,
107
105
  flex: 1,
106
+ textAlign: 'auto',
108
107
  },
109
108
  checkmark: {
110
109
  fontSize: 18,
package/dist/src/components/settings/SettingsListScreen.js CHANGED
@@ -1,12 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { View, Text, Pressable, ScrollView, I18nManager } from 'react-native';
2
+ import { View, Text, Pressable, ScrollView } from 'react-native';
3
3
  import { createThemedStyles } from '../../utils/styles';
4
- function useRTLText() {
5
- return I18nManager.isRTL ? { writingDirection: 'rtl' } : undefined;
6
- }
7
4
  export function SettingsListScreen({ sections, onSectionPress, title = 'Settings', style, onTrack, }) {
8
5
  const styles = useStyles();
9
- const rtlText = useRTLText();
10
6
  const handlePress = (section) => {
11
7
  onTrack?.({
12
8
  eventType: 'navigation',
@@ -16,12 +12,12 @@ export function SettingsListScreen({ sections, onSectionPress, title = 'Settings
16
12
  });
17
13
  onSectionPress(section.id);
18
14
  };
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) => {
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) => {
20
16
  const IconComponent = section.icon;
21
17
  return (_jsxs(Pressable, { style: [
22
18
  styles.sectionRow,
23
19
  index < sections.length - 1 && styles.sectionRowBorder,
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));
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));
25
21
  }) })] }));
26
22
  }
27
23
  const useStyles = createThemedStyles(colors => ({
@@ -37,6 +33,7 @@ const useStyles = createThemedStyles(colors => ({
37
33
  fontWeight: '700',
38
34
  color: colors.text,
39
35
  marginBottom: 20,
36
+ textAlign: 'auto',
40
37
  },
41
38
  sectionList: {
42
39
  backgroundColor: colors.card,
@@ -73,11 +70,13 @@ const useStyles = createThemedStyles(colors => ({
73
70
  fontSize: 16,
74
71
  fontWeight: '500',
75
72
  color: colors.text,
73
+ textAlign: 'auto',
76
74
  },
77
75
  sectionDescription: {
78
76
  fontSize: 13,
79
77
  color: colors.textMuted,
80
78
  marginTop: 2,
79
+ textAlign: 'auto',
81
80
  },
82
81
  chevron: {
83
82
  fontSize: 22,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sudobility/building_blocks_rn",
3
- "version": "0.0.29",
3
+ "version": "0.0.30",
4
4
  "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",