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