@umituz/react-native-design-system 1.3.4 → 1.3.6
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.
- package/lib/presentation/atoms/AtomicButton.d.ts.map +1 -1
- package/lib/presentation/atoms/AtomicButton.js +2 -20
- package/lib/presentation/atoms/AtomicButton.js.map +1 -1
- package/lib/presentation/atoms/AtomicCard.d.ts.map +1 -1
- package/lib/presentation/atoms/AtomicCard.js +4 -23
- package/lib/presentation/atoms/AtomicCard.js.map +1 -1
- package/package.json +1 -1
- package/src/presentation/atoms/AtomicButton.tsx +3 -28
- package/src/presentation/atoms/AtomicCard.tsx +4 -32
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicButton.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,SAAS,EAA6C,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AtomicButton.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,SAAS,EAA6C,MAAM,cAAc,CAAC;AAItH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oDAAoD,CAAC;AAEnF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AACpF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+LpD,CAAC;AA8BF,YAAY,EAAE,iBAAiB,IAAI,WAAW,EAAE,CAAC"}
|
|
@@ -1,28 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StyleSheet, TouchableOpacity, ActivityIndicator, View } from 'react-native';
|
|
3
|
-
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
|
|
4
3
|
import { AtomicText } from './AtomicText';
|
|
5
4
|
import { Icon } from '../../domains/icons/presentation/components/Icon';
|
|
6
5
|
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
7
|
-
const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
|
|
8
6
|
export const AtomicButton = ({ title, children, onPress, variant = 'primary', size = 'md', disabled = false, loading = false, icon, fullWidth = false, style, textStyle, testID, }) => {
|
|
9
7
|
const tokens = useAppDesignTokens();
|
|
10
|
-
// Animation
|
|
11
|
-
const scale = useSharedValue(1);
|
|
12
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
13
|
-
transform: [{ scale: scale.value }],
|
|
14
|
-
}));
|
|
15
|
-
const handlePressIn = () => {
|
|
16
|
-
if (!disabled && !loading) {
|
|
17
|
-
scale.value = withSpring(0.95, {
|
|
18
|
-
damping: 15,
|
|
19
|
-
stiffness: 150,
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
const handlePressOut = () => {
|
|
24
|
-
scale.value = withSpring(1);
|
|
25
|
-
};
|
|
26
8
|
const handlePress = () => {
|
|
27
9
|
if (!disabled && !loading) {
|
|
28
10
|
onPress();
|
|
@@ -153,7 +135,7 @@ export const AtomicButton = ({ title, children, onPress, variant = 'primary', si
|
|
|
153
135
|
const buttonText = title || children;
|
|
154
136
|
const showIcon = icon && !loading;
|
|
155
137
|
const iconColor = variantStyles.text.color;
|
|
156
|
-
return (<
|
|
138
|
+
return (<TouchableOpacity style={containerStyle} onPress={handlePress} activeOpacity={0.8} disabled={disabled || loading} testID={testID}>
|
|
157
139
|
<View style={styles.content}>
|
|
158
140
|
{loading ? (<ActivityIndicator size="small" color={variantStyles.text.color} style={styles.loader}/>) : showIcon ? (<Icon name={icon} customSize={config.iconSize} customColor={typeof iconColor === 'string' ? iconColor : undefined} style={styles.icon}/>) : null}
|
|
159
141
|
|
|
@@ -161,7 +143,7 @@ export const AtomicButton = ({ title, children, onPress, variant = 'primary', si
|
|
|
161
143
|
{buttonText}
|
|
162
144
|
</AtomicText>
|
|
163
145
|
</View>
|
|
164
|
-
</
|
|
146
|
+
</TouchableOpacity>);
|
|
165
147
|
};
|
|
166
148
|
const styles = StyleSheet.create({
|
|
167
149
|
button: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicButton.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAmC,gBAAgB,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACtH,OAAO,
|
|
1
|
+
{"version":3,"file":"AtomicButton.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicCard.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"AtomicCard.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAa,MAAM,cAAc,CAAC;AAGrE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AACjE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnE,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAGD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwFhD,CAAC"}
|
|
@@ -1,27 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
|
|
4
|
-
import { Pressable } from 'react-native';
|
|
2
|
+
import { View, Pressable } from 'react-native';
|
|
5
3
|
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
6
|
-
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
|
|
7
4
|
export const AtomicCard = ({ variant = 'elevated', padding = 'md', onPress, disabled = false, style, children, testID, }) => {
|
|
8
5
|
const tokens = useAppDesignTokens();
|
|
9
|
-
// Animation for tap feedback
|
|
10
|
-
const scale = useSharedValue(1);
|
|
11
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
12
|
-
transform: [{ scale: scale.value }],
|
|
13
|
-
}));
|
|
14
|
-
const handlePressIn = () => {
|
|
15
|
-
if (onPress && !disabled) {
|
|
16
|
-
scale.value = withSpring(0.98, {
|
|
17
|
-
damping: 15,
|
|
18
|
-
stiffness: 150,
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
const handlePressOut = () => {
|
|
23
|
-
scale.value = withSpring(1);
|
|
24
|
-
};
|
|
25
6
|
const handlePress = () => {
|
|
26
7
|
if (onPress && !disabled) {
|
|
27
8
|
onPress();
|
|
@@ -77,11 +58,11 @@ export const AtomicCard = ({ variant = 'elevated', padding = 'md', onPress, disa
|
|
|
77
58
|
const cardContent = (<View style={cardStyle} testID={testID}>
|
|
78
59
|
{children}
|
|
79
60
|
</View>);
|
|
80
|
-
// If onPress provided, wrap with
|
|
61
|
+
// If onPress provided, wrap with pressable
|
|
81
62
|
if (onPress && !disabled) {
|
|
82
|
-
return (<
|
|
63
|
+
return (<Pressable onPress={handlePress}>
|
|
83
64
|
{cardContent}
|
|
84
|
-
</
|
|
65
|
+
</Pressable>);
|
|
85
66
|
}
|
|
86
67
|
// Otherwise just return static card
|
|
87
68
|
return cardContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicCard.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAwB,
|
|
1
|
+
{"version":3,"file":"AtomicCard.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAwB,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAgBjE,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,OAAO,GAAG,UAAU,EACpB,OAAO,GAAG,IAAI,EACd,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;YACzB,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,8BAA8B;IAC9B,MAAM,eAAe,GAAG,GAAW,EAAE;QACnC,MAAM,UAAU,GAAG;YACjB,IAAI,EAAE,CAAC;YACP,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;YACrB,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;YACrB,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;YACrB,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;SACtB,CAAC;QACF,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,qBAAqB;IACrB,MAAM,eAAe,GAAG,GAAc,EAAE;QACtC,MAAM,SAAS,GAAc;YAC3B,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO;YACtC,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;SACvC,CAAC;QAEF,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,UAAU;gBACb,OAAO;oBACL,GAAG,SAAS;oBACZ,WAAW,EAAE,CAAC;oBACd,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM;iBAClC,CAAC;YAEJ,KAAK,UAAU;gBACb,OAAO;oBACL,GAAG,SAAS;oBACZ,WAAW,EAAE,CAAC;oBACd,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM;iBAClC,CAAC;YAEJ,KAAK,MAAM;gBACT,OAAO;oBACL,GAAG,SAAS;oBACZ,WAAW,EAAE,CAAC;iBACf,CAAC;YAEJ;gBACE,OAAO,SAAS,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAyB;QACtC,eAAe,EAAE;QACjB;YACE,OAAO,EAAE,eAAe,EAAE;YAC1B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SAC5B;QACD,KAAK;KACN,CAAC;IAEF,MAAM,WAAW,GAAG,CAClB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACrC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,2CAA2C;IAC3C,IAAI,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;QACzB,OAAO,CACL,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAC9B;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,SAAS,CAAC,CACb,CAAC;IACJ,CAAC;IAED,oCAAoC;IACpC,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-design-system",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.6",
|
|
4
4
|
"description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"types": "./lib/index.d.ts",
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StyleSheet, StyleProp, ViewStyle, TextStyle, TouchableOpacity, ActivityIndicator, View } from 'react-native';
|
|
3
|
-
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
|
|
4
3
|
import { AtomicText } from './AtomicText';
|
|
5
4
|
import { Icon } from '../../domains/icons/presentation/components/Icon';
|
|
6
5
|
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
@@ -24,8 +23,6 @@ export interface AtomicButtonProps {
|
|
|
24
23
|
testID?: string;
|
|
25
24
|
}
|
|
26
25
|
|
|
27
|
-
const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
|
|
28
|
-
|
|
29
26
|
export const AtomicButton: React.FC<AtomicButtonProps> = ({
|
|
30
27
|
title,
|
|
31
28
|
children,
|
|
@@ -42,26 +39,6 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
|
|
|
42
39
|
}) => {
|
|
43
40
|
const tokens = useAppDesignTokens();
|
|
44
41
|
|
|
45
|
-
// Animation
|
|
46
|
-
const scale = useSharedValue(1);
|
|
47
|
-
|
|
48
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
49
|
-
transform: [{ scale: scale.value }],
|
|
50
|
-
}));
|
|
51
|
-
|
|
52
|
-
const handlePressIn = () => {
|
|
53
|
-
if (!disabled && !loading) {
|
|
54
|
-
scale.value = withSpring(0.95, {
|
|
55
|
-
damping: 15,
|
|
56
|
-
stiffness: 150,
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
const handlePressOut = () => {
|
|
62
|
-
scale.value = withSpring(1);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
42
|
const handlePress = () => {
|
|
66
43
|
if (!disabled && !loading) {
|
|
67
44
|
onPress();
|
|
@@ -208,10 +185,8 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
|
|
|
208
185
|
const iconColor = variantStyles.text.color;
|
|
209
186
|
|
|
210
187
|
return (
|
|
211
|
-
<
|
|
212
|
-
style={
|
|
213
|
-
onPressIn={handlePressIn}
|
|
214
|
-
onPressOut={handlePressOut}
|
|
188
|
+
<TouchableOpacity
|
|
189
|
+
style={containerStyle}
|
|
215
190
|
onPress={handlePress}
|
|
216
191
|
activeOpacity={0.8}
|
|
217
192
|
disabled={disabled || loading}
|
|
@@ -237,7 +212,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = ({
|
|
|
237
212
|
{buttonText}
|
|
238
213
|
</AtomicText>
|
|
239
214
|
</View>
|
|
240
|
-
</
|
|
215
|
+
</TouchableOpacity>
|
|
241
216
|
);
|
|
242
217
|
};
|
|
243
218
|
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { View, StyleProp, ViewStyle } from 'react-native';
|
|
3
|
-
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
|
|
4
|
-
import { Pressable } from 'react-native';
|
|
2
|
+
import { View, StyleProp, ViewStyle, Pressable } from 'react-native';
|
|
5
3
|
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
6
4
|
|
|
7
5
|
export type AtomicCardVariant = 'flat' | 'elevated' | 'outlined';
|
|
@@ -17,7 +15,6 @@ export interface AtomicCardProps {
|
|
|
17
15
|
testID?: string;
|
|
18
16
|
}
|
|
19
17
|
|
|
20
|
-
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
|
|
21
18
|
|
|
22
19
|
export const AtomicCard: React.FC<AtomicCardProps> = ({
|
|
23
20
|
variant = 'elevated',
|
|
@@ -30,26 +27,6 @@ export const AtomicCard: React.FC<AtomicCardProps> = ({
|
|
|
30
27
|
}) => {
|
|
31
28
|
const tokens = useAppDesignTokens();
|
|
32
29
|
|
|
33
|
-
// Animation for tap feedback
|
|
34
|
-
const scale = useSharedValue(1);
|
|
35
|
-
|
|
36
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
37
|
-
transform: [{ scale: scale.value }],
|
|
38
|
-
}));
|
|
39
|
-
|
|
40
|
-
const handlePressIn = () => {
|
|
41
|
-
if (onPress && !disabled) {
|
|
42
|
-
scale.value = withSpring(0.98, {
|
|
43
|
-
damping: 15,
|
|
44
|
-
stiffness: 150,
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const handlePressOut = () => {
|
|
50
|
-
scale.value = withSpring(1);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
30
|
const handlePress = () => {
|
|
54
31
|
if (onPress && !disabled) {
|
|
55
32
|
onPress();
|
|
@@ -116,17 +93,12 @@ export const AtomicCard: React.FC<AtomicCardProps> = ({
|
|
|
116
93
|
</View>
|
|
117
94
|
);
|
|
118
95
|
|
|
119
|
-
// If onPress provided, wrap with
|
|
96
|
+
// If onPress provided, wrap with pressable
|
|
120
97
|
if (onPress && !disabled) {
|
|
121
98
|
return (
|
|
122
|
-
<
|
|
123
|
-
style={animatedStyle}
|
|
124
|
-
onPressIn={handlePressIn}
|
|
125
|
-
onPressOut={handlePressOut}
|
|
126
|
-
onPress={handlePress}
|
|
127
|
-
>
|
|
99
|
+
<Pressable onPress={handlePress}>
|
|
128
100
|
{cardContent}
|
|
129
|
-
</
|
|
101
|
+
</Pressable>
|
|
130
102
|
);
|
|
131
103
|
}
|
|
132
104
|
|