@sudobility/building_blocks_rn 0.0.26 → 0.0.28

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