@sudobility/building_blocks_rn 0.0.29 → 0.0.31

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 -22
  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
  }
@@ -38,47 +30,44 @@ const useStyles = createThemedStyles(colors => ({
38
30
  fontWeight: '700',
39
31
  color: colors.text,
40
32
  marginBottom: 8,
41
- alignSelf: 'flex-start',
33
+ textAlign: 'auto',
42
34
  },
43
35
  lastUpdated: {
44
36
  fontSize: 14,
45
37
  color: colors.textMuted,
46
38
  marginBottom: 24,
47
- alignSelf: 'flex-start',
39
+ textAlign: 'auto',
48
40
  },
49
41
  section: {
50
42
  marginBottom: 24,
51
- alignItems: 'flex-start',
52
43
  },
53
44
  sectionTitle: {
54
45
  fontSize: 20,
55
46
  fontWeight: '600',
56
47
  color: colors.text,
57
48
  marginBottom: 8,
58
- alignSelf: 'flex-start',
49
+ textAlign: 'auto',
59
50
  },
60
51
  subsectionTitle: {
61
52
  fontSize: 17,
62
53
  fontWeight: '600',
63
54
  color: colors.text,
64
55
  marginBottom: 6,
65
- alignSelf: 'flex-start',
56
+ textAlign: 'auto',
66
57
  },
67
58
  sectionContent: {
68
59
  fontSize: 15,
69
60
  lineHeight: 22,
70
61
  color: colors.textSecondary,
71
- alignSelf: 'flex-start',
62
+ textAlign: 'auto',
72
63
  },
73
64
  list: {
74
65
  marginTop: 8,
75
66
  gap: 6,
76
- alignSelf: 'stretch',
77
67
  },
78
68
  listItem: {
79
69
  flexDirection: 'row',
80
70
  paddingStart: 8,
81
- alignSelf: 'flex-start',
82
71
  },
83
72
  bullet: {
84
73
  fontSize: 15,
@@ -91,25 +80,25 @@ const useStyles = createThemedStyles(colors => ({
91
80
  lineHeight: 22,
92
81
  color: colors.textSecondary,
93
82
  flex: 1,
83
+ textAlign: 'auto',
94
84
  },
95
85
  contactSection: {
96
86
  marginTop: 16,
97
87
  padding: 16,
98
88
  backgroundColor: colors.surfaceSecondary,
99
89
  borderRadius: 12,
100
- alignItems: 'flex-start',
101
90
  },
102
91
  contactInfo: {
103
92
  fontSize: 15,
104
93
  color: colors.primary,
105
94
  marginTop: 8,
106
- alignSelf: 'flex-start',
95
+ textAlign: 'auto',
107
96
  },
108
97
  gdprNotice: {
109
98
  fontSize: 13,
110
99
  color: colors.textMuted,
111
100
  marginTop: 12,
112
101
  fontStyle: 'italic',
113
- alignSelf: 'flex-start',
102
+ textAlign: 'auto',
114
103
  },
115
104
  }));
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.31",
4
4
  "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",