@umituz/react-native-design-system 2.8.36 → 2.8.39

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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/atoms/AtomicIcon.tsx +32 -23
  3. package/src/atoms/button/AtomicButton.tsx +21 -20
  4. package/src/atoms/card/styles/cardStyles.ts +1 -1
  5. package/src/atoms/chip/AtomicChip.tsx +10 -13
  6. package/src/atoms/input/components/InputIcon.tsx +16 -6
  7. package/src/exports/molecules.ts +2 -0
  8. package/src/molecules/ListItem.tsx +12 -6
  9. package/src/molecules/alerts/AlertBanner.tsx +6 -7
  10. package/src/molecules/alerts/AlertToast.tsx +6 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-design-system",
3
- "version": "2.8.36",
3
+ "version": "2.8.39",
4
4
  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/atoms/AtomicIcon.tsx CHANGED
@@ -119,28 +119,41 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
119
119
  console.warn(`[DesignSystem] Invalid icon name: "${name}". Falling back to "${FALLBACK_ICON}"`);
120
120
  }
121
121
 
122
- const iconElement = svgPath ? (
123
- <Svg
124
- viewBox={svgViewBox}
125
- width={sizeInPixels}
126
- height={sizeInPixels}
127
- key="custom-svg-icon"
128
- >
129
- <Path
130
- d={svgPath}
131
- fill={iconColor}
132
- />
133
- </Svg>
134
- ) : (
122
+ const iconProps = {
123
+ testID,
124
+ accessibilityLabel,
125
+ style: [
126
+ !svgPath && {
127
+ padding: 4, // Prevent font truncation
128
+ includeFontPadding: false, // Android specific
129
+ },
130
+ style,
131
+ ] as StyleProp<ViewStyle>,
132
+ };
133
+
134
+ if (svgPath) {
135
+ return (
136
+ <Svg
137
+ viewBox={svgViewBox}
138
+ width={sizeInPixels}
139
+ height={sizeInPixels}
140
+ key="custom-svg-icon"
141
+ {...iconProps}
142
+ >
143
+ <Path
144
+ d={svgPath}
145
+ fill={iconColor}
146
+ />
147
+ </Svg>
148
+ );
149
+ }
150
+
151
+ const iconElement = (
135
152
  <Ionicons
136
153
  name={iconName as keyof typeof Ionicons.glyphMap}
137
154
  size={sizeInPixels}
138
155
  color={iconColor}
139
- testID={testID ? `${testID}-icon` : undefined}
140
- style={{
141
- padding: 4, // Prevent font truncation
142
- includeFontPadding: false, // Android specific
143
- }}
156
+ {...iconProps}
144
157
  />
145
158
  );
146
159
 
@@ -168,11 +181,7 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(({
168
181
  );
169
182
  }
170
183
 
171
- return (
172
- <View accessibilityLabel={accessibilityLabel} testID={testID} style={style}>
173
- {iconElement}
174
- </View>
175
- );
184
+ return iconElement;
176
185
  });
177
186
 
178
187
  AtomicIcon.displayName = "AtomicIcon";
package/src/atoms/button/AtomicButton.tsx CHANGED
@@ -72,32 +72,33 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
72
72
 
73
73
  return (
74
74
  <TouchableOpacity
75
- style={containerStyle}
75
+ style={[
76
+ containerStyle,
77
+ iconPosition === 'right' && buttonStyles.rowReverse,
78
+ ]}
76
79
  onPress={handlePress}
77
80
  activeOpacity={activeOpacity}
78
81
  disabled={isDisabled}
79
82
  testID={testID}
80
83
  >
81
- <View style={[buttonStyles.content, iconPosition === 'right' && buttonStyles.rowReverse]}>
82
- {loading ? (
83
- <AtomicSpinner
84
- size="sm"
85
- color={iconColor as string}
86
- style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
87
- />
88
- ) : showIcon ? (
89
- <AtomicIcon
90
- name={icon}
91
- customSize={config.iconSize}
92
- customColor={iconColor as string | undefined}
93
- style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
94
- />
95
- ) : null}
84
+ {loading ? (
85
+ <AtomicSpinner
86
+ size="sm"
87
+ color={iconColor as string}
88
+ style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
89
+ />
90
+ ) : (showIcon && icon) ? (
91
+ <AtomicIcon
92
+ name={icon}
93
+ customSize={config.iconSize}
94
+ customColor={iconColor as string | undefined}
95
+ style={iconPosition === 'right' ? buttonStyles.iconRight : buttonStyles.iconLeft}
96
+ />
97
+ ) : null}
96
98
 
97
- <AtomicText style={buttonTextStyle}>
98
- {buttonText}
99
- </AtomicText>
100
- </View>
99
+ <AtomicText style={buttonTextStyle}>
100
+ {buttonText}
101
+ </AtomicText>
101
102
  </TouchableOpacity>
102
103
  );
103
104
  });
package/src/atoms/card/styles/cardStyles.ts CHANGED
@@ -12,7 +12,7 @@ export const getCardVariantStyles = (variant: CardVariant, tokens: DesignTokens)
12
12
  container: {
13
13
  backgroundColor: tokens.colors.surface,
14
14
  borderWidth: 1,
15
- borderColor: tokens.colors.outlineVariant || '#E0E0E0',
15
+ borderColor: tokens.colors.outlineVariant || tokens.colors.border,
16
16
  },
17
17
  },
18
18
  outlined: {
package/src/atoms/chip/AtomicChip.tsx CHANGED
@@ -67,8 +67,15 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
67
67
 
68
68
  const iconColor = finalTextColor;
69
69
 
70
- const content = (
71
- <View style={[chipStyle, style]} testID={testID}>
70
+ const Component = (clickable && onPress && !disabled) ? TouchableOpacity : View;
71
+ const componentProps = (clickable && onPress && !disabled) ? { onPress, activeOpacity } : {};
72
+
73
+ return (
74
+ <Component
75
+ style={[chipStyle, style]}
76
+ testID={testID}
77
+ {...componentProps}
78
+ >
72
79
  {leadingIcon && (
73
80
  <AtomicIcon
74
81
  name={leadingIcon}
@@ -92,18 +99,8 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
92
99
  style={{ marginLeft: tokens.spacing.xs }}
93
100
  />
94
101
  )}
95
- </View>
102
+ </Component>
96
103
  );
97
-
98
- if (clickable && onPress && !disabled) {
99
- return (
100
- <TouchableOpacity onPress={onPress} activeOpacity={activeOpacity}>
101
- {content}
102
- </TouchableOpacity>
103
- );
104
- }
105
-
106
- return content;
107
104
  });
108
105
 
109
106
  AtomicChip.displayName = 'AtomicChip';
package/src/atoms/input/components/InputIcon.tsx CHANGED
@@ -19,14 +19,24 @@ export const InputIcon: React.FC<InputIconProps> = ({
19
19
  onPress,
20
20
  testID,
21
21
  }) => {
22
- const positionStyle = position === 'leading' ? styles.leadingIcon : styles.trailingIcon;
23
- const Wrapper = onPress ? Pressable : View;
24
- const wrapperProps = onPress ? { onPress, testID } : {};
22
+ const style = position === 'leading' ? styles.leadingIcon : styles.trailingIcon;
23
+
24
+ if (onPress) {
25
+ return (
26
+ <Pressable onPress={onPress} style={style} testID={testID}>
27
+ <AtomicIcon name={name as any} customSize={size} customColor={color} />
28
+ </Pressable>
29
+ );
30
+ }
25
31
 
26
32
  return (
27
- <Wrapper style={positionStyle} {...wrapperProps}>
28
- <AtomicIcon name={name} customSize={size} customColor={color} />
29
- </Wrapper>
33
+ <AtomicIcon
34
+ name={name as any}
35
+ customSize={size}
36
+ customColor={color}
37
+ style={style}
38
+ testID={testID}
39
+ />
30
40
  );
31
41
  };
32
42
 
package/src/exports/molecules.ts CHANGED
@@ -11,6 +11,8 @@ export {
11
11
  BaseModal,
12
12
  ConfirmationModal,
13
13
  useConfirmationModal,
14
+ Divider,
15
+ type DividerProps,
14
16
  StepProgress,
15
17
  List,
16
18
  Avatar,
package/src/molecules/ListItem.tsx CHANGED
@@ -17,18 +17,24 @@ export const ListItem: React.FC<ListItemProps> = ({
17
17
  return (
18
18
  <Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
19
19
  {leftIcon && (
20
- <View style={listItemStyles.iconContainer}>
21
- <AtomicIcon name={leftIcon} color={disabled ? 'surfaceVariant' : 'primary'} size="md" />
22
- </View>
20
+ <AtomicIcon
21
+ name={leftIcon}
22
+ color={disabled ? 'surfaceVariant' : 'primary'}
23
+ size="md"
24
+ style={listItemStyles.iconContainer}
25
+ />
23
26
  )}
24
27
  <View style={listItemStyles.content}>
25
28
  <AtomicText type="bodyLarge" color={disabled ? 'surfaceVariant' : 'onSurface'} numberOfLines={1}>{title}</AtomicText>
26
29
  {subtitle && <AtomicText type="bodySmall" color="surfaceVariant" numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
27
30
  </View>
28
31
  {rightIcon && onPress && (
29
- <View style={listItemStyles.iconContainer}>
30
- <AtomicIcon name={rightIcon} color="surfaceVariant" size="sm" />
31
- </View>
32
+ <AtomicIcon
33
+ name={rightIcon}
34
+ color="surfaceVariant"
35
+ size="sm"
36
+ style={{ marginLeft: tokens.spacing.md }}
37
+ />
32
38
  )}
33
39
  </Component>
34
40
  );
package/src/molecules/alerts/AlertBanner.tsx CHANGED
@@ -74,13 +74,12 @@ export function AlertBanner({ alert }: AlertBannerProps) {
74
74
  <View style={styles.content}>
75
75
  <View style={styles.row}>
76
76
  {alert.icon && (
77
- <View style={[styles.iconContainer, { marginRight: tokens.spacing.sm }]}>
78
- <AtomicIcon
79
- name={alert.icon}
80
- customSize={20}
81
- customColor={textColor}
82
- />
83
- </View>
77
+ <AtomicIcon
78
+ name={alert.icon}
79
+ customSize={20}
80
+ customColor={textColor}
81
+ style={{ marginRight: tokens.spacing.sm }}
82
+ />
84
83
  )}
85
84
 
86
85
  <View style={styles.textContainer}>
package/src/molecules/alerts/AlertToast.tsx CHANGED
@@ -89,13 +89,12 @@ export function AlertToast({ alert }: AlertToastProps) {
89
89
  <Pressable onPress={handleDismiss} style={styles.content}>
90
90
  <View style={styles.row}>
91
91
  {alert.icon && (
92
- <View style={[styles.iconContainer, { marginRight: tokens.spacing.sm }]}>
93
- <AtomicIcon
94
- name={alert.icon}
95
- customSize={20}
96
- customColor={textColor}
97
- />
98
- </View>
92
+ <AtomicIcon
93
+ name={alert.icon}
94
+ customSize={20}
95
+ customColor={textColor}
96
+ style={{ marginRight: tokens.spacing.sm }}
97
+ />
99
98
  )}
100
99
 
101
100
  <View style={styles.textContainer}>