@umituz/react-native-design-system 1.5.65 → 1.6.0
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/package.json +3 -3
- package/src/index.ts +28 -12
- package/src/index.js +0 -28
- package/src/presentation/organisms/AppHeader.js +0 -76
- package/src/presentation/organisms/AppHeader.tsx +0 -124
- package/src/presentation/tokens/commonStyles.js +0 -219
- package/src/presentation/tokens/commonStyles.ts +0 -253
- package/src/presentation/utils/variants/compound.js +0 -15
- package/src/presentation/utils/variants/core.js +0 -22
- package/src/presentation/utils/variants/helpers.js +0 -9
- package/src/presentation/utils/variants.js +0 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@umituz/react-native-design-system-typography": "*",
|
|
52
52
|
"expo-linear-gradient": "^15.0.7",
|
|
53
53
|
"lucide-react-native": ">=0.468.0",
|
|
54
|
-
"react": ">=18.2.0
|
|
54
|
+
"react": ">=18.2.0",
|
|
55
55
|
"react-native": ">=0.74.0",
|
|
56
56
|
"react-native-gesture-handler": ">=2.16.0",
|
|
57
57
|
"react-native-reanimated": "~4.1.5",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
92
92
|
"expo-linear-gradient": "^15.0.7",
|
|
93
93
|
"lucide-react-native": ">=0.468.0",
|
|
94
|
-
"react": ">=18.2.0
|
|
94
|
+
"react": ">=18.2.0",
|
|
95
95
|
"react-native": ">=0.74.0",
|
|
96
96
|
"react-native-gesture-handler": "^2.16.0",
|
|
97
97
|
"react-native-reanimated": "~3.10.1",
|
package/src/index.ts
CHANGED
|
@@ -1,18 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @umituz/react-native-design-system
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* - @umituz/react-native-design-system-atoms
|
|
7
|
-
* - @umituz/react-native-design-system-molecules
|
|
8
|
-
* - @umituz/react-native-design-system-organisms
|
|
9
|
-
* - @umituz/react-native-design-system-theme
|
|
10
|
-
* - @umituz/react-native-design-system-responsive
|
|
11
|
-
* - @umituz/react-native-design-system-typography
|
|
12
|
-
*
|
|
13
|
-
* This package only exports its own utilities:
|
|
14
|
-
* - useCommonStyles
|
|
15
|
-
* - variants utilities
|
|
4
|
+
* Universal design system for React Native apps
|
|
5
|
+
* Re-exports from individual packages for convenience
|
|
16
6
|
*/
|
|
17
7
|
|
|
18
8
|
// =============================================================================
|
|
@@ -42,3 +32,29 @@ export {
|
|
|
42
32
|
responsiveStyle,
|
|
43
33
|
combineStyles,
|
|
44
34
|
} from './presentation/utils/variants/helpers';
|
|
35
|
+
|
|
36
|
+
// =============================================================================
|
|
37
|
+
// ATOMS - Re-export from @umituz/react-native-design-system-atoms
|
|
38
|
+
// =============================================================================
|
|
39
|
+
export {
|
|
40
|
+
AtomicText,
|
|
41
|
+
AtomicIcon,
|
|
42
|
+
AtomicButton,
|
|
43
|
+
type IconName,
|
|
44
|
+
} from '@umituz/react-native-design-system-atoms';
|
|
45
|
+
|
|
46
|
+
// =============================================================================
|
|
47
|
+
// ORGANISMS - Re-export from @umituz/react-native-design-system-organisms
|
|
48
|
+
// =============================================================================
|
|
49
|
+
export {
|
|
50
|
+
ScreenLayout,
|
|
51
|
+
} from '@umituz/react-native-design-system-organisms';
|
|
52
|
+
|
|
53
|
+
// =============================================================================
|
|
54
|
+
// THEME - Re-export from @umituz/react-native-design-system-theme
|
|
55
|
+
// =============================================================================
|
|
56
|
+
export {
|
|
57
|
+
useAppDesignTokens,
|
|
58
|
+
STATIC_TOKENS,
|
|
59
|
+
type DesignTokens,
|
|
60
|
+
} from '@umituz/react-native-design-system-theme';
|
package/src/index.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
// =============================================================================
|
|
2
|
-
// ATOMS - Atomic Design Components
|
|
3
|
-
// =============================================================================
|
|
4
|
-
export { AtomicButton, AtomicText, AtomicCard, AtomicInput, AtomicTextArea, AtomicPicker, AtomicIcon, AtomicImage, AtomicSwitch, AtomicBadge, AtomicFormError, AtomicAvatar, AtomicChip, AtomicDivider, AtomicProgress, AtomicAvatarGroup, AtomicFab, AtomicFilter, AtomicTouchable, AtomicNumberInput, AtomicDatePicker, AtomicSearchBar, AtomicSort, } from '@umituz/react-native-design-system-atoms';
|
|
5
|
-
// Icon alias
|
|
6
|
-
export { AtomicIcon as Icon, } from '@umituz/react-native-design-system-atoms';
|
|
7
|
-
// =============================================================================
|
|
8
|
-
// MOLECULES - Composite Components
|
|
9
|
-
// =============================================================================
|
|
10
|
-
export { FormField, ListItem, SearchBar, SectionCard, IconContainer, ScreenHeader, EmptyState, SectionHeader, SectionContainer, GridContainer, ConfirmationModal, useConfirmationModal, } from '@umituz/react-native-design-system-molecules';
|
|
11
|
-
// ConfirmationModal alias
|
|
12
|
-
export { ConfirmationModal as AtomicConfirmationModal, } from '@umituz/react-native-design-system-molecules';
|
|
13
|
-
// =============================================================================
|
|
14
|
-
// ORGANISMS - Complex Patterns
|
|
15
|
-
// =============================================================================
|
|
16
|
-
export { AppHeader, ScreenLayout, FormContainer, } from '@umituz/react-native-design-system-organisms';
|
|
17
|
-
// =============================================================================
|
|
18
|
-
// THEME & DESIGN TOKENS
|
|
19
|
-
// =============================================================================
|
|
20
|
-
export { createDesignTokens, STATIC_DESIGN_TOKENS, BASE_TOKENS, STATIC_TOKENS, withAlpha, lightColors, darkColors, getColorPalette, useAppDesignTokens, useDesignSystemTheme, useTheme, lightTheme, darkTheme, createResponsiveValue, ThemeStorage, } from '@umituz/react-native-design-system-theme';
|
|
21
|
-
// =============================================================================
|
|
22
|
-
// COMMON STYLES
|
|
23
|
-
// =============================================================================
|
|
24
|
-
export { useCommonStyles, } from './presentation/tokens/commonStyles';
|
|
25
|
-
// =============================================================================
|
|
26
|
-
// RESPONSIVE UTILITIES
|
|
27
|
-
// =============================================================================
|
|
28
|
-
export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, useResponsive, useResponsiveSizes, useDeviceType, getScreenDimensions, isSmallPhone, isTablet, getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isLandscape, getKeyboardBehavior, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, } from '@umituz/react-native-design-system-responsive';
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AppHeader Organism - Application Header Component
|
|
3
|
-
*
|
|
4
|
-
* Complex header combining atoms and molecules
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ORGANISM
|
|
8
|
-
* Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
|
|
9
|
-
*/
|
|
10
|
-
import React from 'react';
|
|
11
|
-
import { View, SafeAreaView } from 'react-native';
|
|
12
|
-
import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
|
|
13
|
-
import { AtomicText, AtomicButton } from '@umituz/react-native-design-system-atoms';
|
|
14
|
-
// =============================================================================
|
|
15
|
-
// COMPONENT IMPLEMENTATION
|
|
16
|
-
// =============================================================================
|
|
17
|
-
export const AppHeader = ({ title, subtitle, leftIcon, onLeftPress, rightIcon, onRightPress, showShadow = true, backgroundColor, style, }) => {
|
|
18
|
-
const tokens = useAppDesignTokens();
|
|
19
|
-
const bgColor = backgroundColor || tokens.colors.surface;
|
|
20
|
-
const styles = getStyles(tokens);
|
|
21
|
-
return (<SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }]}>
|
|
22
|
-
<View style={[styles.container, { backgroundColor: bgColor }, style]}>
|
|
23
|
-
{/* Left Action */}
|
|
24
|
-
<View style={styles.leftContainer}>
|
|
25
|
-
{leftIcon && onLeftPress && (<AtomicButton variant="text" size="sm" onPress={onLeftPress} icon={leftIcon}/>)}
|
|
26
|
-
</View>
|
|
27
|
-
|
|
28
|
-
{/* Title Section */}
|
|
29
|
-
<View style={styles.titleContainer}>
|
|
30
|
-
<AtomicText type="titleLarge" color="primary" numberOfLines={1}>
|
|
31
|
-
{title}
|
|
32
|
-
</AtomicText>
|
|
33
|
-
{subtitle && (<AtomicText type="bodySmall" color="secondary" numberOfLines={1}>
|
|
34
|
-
{subtitle}
|
|
35
|
-
</AtomicText>)}
|
|
36
|
-
</View>
|
|
37
|
-
|
|
38
|
-
{/* Right Action */}
|
|
39
|
-
<View style={styles.rightContainer}>
|
|
40
|
-
{rightIcon && onRightPress && (<AtomicButton variant="text" size="sm" onPress={onRightPress} icon={rightIcon}/>)}
|
|
41
|
-
</View>
|
|
42
|
-
</View>
|
|
43
|
-
</SafeAreaView>);
|
|
44
|
-
};
|
|
45
|
-
// =============================================================================
|
|
46
|
-
// STYLES
|
|
47
|
-
// =============================================================================
|
|
48
|
-
const getStyles = (tokens) => ({
|
|
49
|
-
safeArea: {
|
|
50
|
-
backgroundColor: tokens.colors.surface,
|
|
51
|
-
},
|
|
52
|
-
container: {
|
|
53
|
-
flexDirection: 'row',
|
|
54
|
-
alignItems: 'center',
|
|
55
|
-
justifyContent: 'space-between',
|
|
56
|
-
paddingHorizontal: tokens.spacing.md,
|
|
57
|
-
paddingVertical: tokens.spacing.sm,
|
|
58
|
-
minHeight: tokens.iconSizes.xl + tokens.spacing.md,
|
|
59
|
-
},
|
|
60
|
-
leftContainer: {
|
|
61
|
-
width: tokens.iconSizes.xl + tokens.spacing.sm,
|
|
62
|
-
alignItems: 'flex-start',
|
|
63
|
-
},
|
|
64
|
-
titleContainer: {
|
|
65
|
-
flex: 1,
|
|
66
|
-
alignItems: 'center',
|
|
67
|
-
paddingHorizontal: tokens.spacing.sm,
|
|
68
|
-
},
|
|
69
|
-
rightContainer: {
|
|
70
|
-
width: tokens.iconSizes.xl + tokens.spacing.sm,
|
|
71
|
-
alignItems: 'flex-start',
|
|
72
|
-
},
|
|
73
|
-
});
|
|
74
|
-
// =============================================================================
|
|
75
|
-
// EXPORTS
|
|
76
|
-
// =============================================================================
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AppHeader Organism - Application Header Component
|
|
3
|
-
*
|
|
4
|
-
* Complex header combining atoms and molecules
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ORGANISM
|
|
8
|
-
* Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
import React from 'react';
|
|
12
|
-
import { View, ViewStyle, SafeAreaView } from 'react-native';
|
|
13
|
-
import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
|
|
14
|
-
import { AtomicText, AtomicButton, AtomicIcon } from '@umituz/react-native-design-system-atoms';
|
|
15
|
-
|
|
16
|
-
export interface AppHeaderProps {
|
|
17
|
-
title: string;
|
|
18
|
-
subtitle?: string;
|
|
19
|
-
leftIcon?: string;
|
|
20
|
-
onLeftPress?: () => void;
|
|
21
|
-
rightIcon?: string;
|
|
22
|
-
onRightPress?: () => void;
|
|
23
|
-
showShadow?: boolean;
|
|
24
|
-
backgroundColor?: string;
|
|
25
|
-
style?: ViewStyle;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// =============================================================================
|
|
29
|
-
// COMPONENT IMPLEMENTATION
|
|
30
|
-
// =============================================================================
|
|
31
|
-
|
|
32
|
-
export const AppHeader: React.FC<AppHeaderProps> = ({
|
|
33
|
-
title,
|
|
34
|
-
subtitle,
|
|
35
|
-
leftIcon,
|
|
36
|
-
onLeftPress,
|
|
37
|
-
rightIcon,
|
|
38
|
-
onRightPress,
|
|
39
|
-
showShadow = true,
|
|
40
|
-
backgroundColor,
|
|
41
|
-
style,
|
|
42
|
-
}) => {
|
|
43
|
-
const tokens = useAppDesignTokens();
|
|
44
|
-
const bgColor = backgroundColor || tokens.colors.surface;
|
|
45
|
-
const styles = getStyles(tokens);
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }]}>
|
|
49
|
-
<View style={[styles.container, { backgroundColor: bgColor }, style]}>
|
|
50
|
-
{/* Left Action */}
|
|
51
|
-
<View style={styles.leftContainer}>
|
|
52
|
-
{leftIcon && onLeftPress && (
|
|
53
|
-
<AtomicButton
|
|
54
|
-
variant="text"
|
|
55
|
-
size="sm"
|
|
56
|
-
onPress={onLeftPress}
|
|
57
|
-
icon={leftIcon}
|
|
58
|
-
/>
|
|
59
|
-
)}
|
|
60
|
-
</View>
|
|
61
|
-
|
|
62
|
-
{/* Title Section */}
|
|
63
|
-
<View style={styles.titleContainer}>
|
|
64
|
-
<AtomicText type="titleLarge" color="primary" numberOfLines={1}>
|
|
65
|
-
{title}
|
|
66
|
-
</AtomicText>
|
|
67
|
-
{subtitle && (
|
|
68
|
-
<AtomicText type="bodySmall" color="secondary" numberOfLines={1}>
|
|
69
|
-
{subtitle}
|
|
70
|
-
</AtomicText>
|
|
71
|
-
)}
|
|
72
|
-
</View>
|
|
73
|
-
|
|
74
|
-
{/* Right Action */}
|
|
75
|
-
<View style={styles.rightContainer}>
|
|
76
|
-
{rightIcon && onRightPress && (
|
|
77
|
-
<AtomicButton
|
|
78
|
-
variant="text"
|
|
79
|
-
size="sm"
|
|
80
|
-
onPress={onRightPress}
|
|
81
|
-
icon={rightIcon}
|
|
82
|
-
/>
|
|
83
|
-
)}
|
|
84
|
-
</View>
|
|
85
|
-
</View>
|
|
86
|
-
</SafeAreaView>
|
|
87
|
-
);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
// =============================================================================
|
|
91
|
-
// STYLES
|
|
92
|
-
// =============================================================================
|
|
93
|
-
|
|
94
|
-
const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => ({
|
|
95
|
-
safeArea: {
|
|
96
|
-
backgroundColor: tokens.colors.surface,
|
|
97
|
-
} as ViewStyle,
|
|
98
|
-
container: {
|
|
99
|
-
flexDirection: 'row' as const,
|
|
100
|
-
alignItems: 'center' as const,
|
|
101
|
-
justifyContent: 'space-between' as const,
|
|
102
|
-
paddingHorizontal: tokens.spacing.md,
|
|
103
|
-
paddingVertical: tokens.spacing.sm,
|
|
104
|
-
minHeight: tokens.iconSizes.xl + tokens.spacing.md,
|
|
105
|
-
} as ViewStyle,
|
|
106
|
-
leftContainer: {
|
|
107
|
-
width: tokens.iconSizes.xl + tokens.spacing.sm,
|
|
108
|
-
alignItems: 'flex-start' as const,
|
|
109
|
-
} as ViewStyle,
|
|
110
|
-
titleContainer: {
|
|
111
|
-
flex: 1,
|
|
112
|
-
alignItems: 'center' as const,
|
|
113
|
-
paddingHorizontal: tokens.spacing.sm,
|
|
114
|
-
} as ViewStyle,
|
|
115
|
-
rightContainer: {
|
|
116
|
-
width: tokens.iconSizes.xl + tokens.spacing.sm,
|
|
117
|
-
alignItems: 'flex-start' as const,
|
|
118
|
-
} as ViewStyle,
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
// =============================================================================
|
|
122
|
-
// EXPORTS
|
|
123
|
-
// =============================================================================
|
|
124
|
-
|
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Common Styles - Reusable Style Patterns
|
|
3
|
-
*
|
|
4
|
-
* Centralized style utilities to reduce duplication across screens.
|
|
5
|
-
* These styles are composable and follow DRY principles.
|
|
6
|
-
*
|
|
7
|
-
* Usage:
|
|
8
|
-
* ```typescript
|
|
9
|
-
* import { useCommonStyles } from '@domains/design-system/commonStyles';
|
|
10
|
-
*
|
|
11
|
-
* const MyComponent = () => {
|
|
12
|
-
* const commonStyles = useCommonStyles();
|
|
13
|
-
* return <View style={commonStyles.screenContainer}>...</View>;
|
|
14
|
-
* };
|
|
15
|
-
* ```
|
|
16
|
-
*/
|
|
17
|
-
import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
|
|
18
|
-
/**
|
|
19
|
-
* Hook to get common styles with dynamic theme support
|
|
20
|
-
*/
|
|
21
|
-
export const useCommonStyles = () => {
|
|
22
|
-
const tokens = useAppDesignTokens();
|
|
23
|
-
return {
|
|
24
|
-
// ========================================================================
|
|
25
|
-
// SCREEN CONTAINERS
|
|
26
|
-
// ========================================================================
|
|
27
|
-
/**
|
|
28
|
-
* Standard full-screen container
|
|
29
|
-
* Most common pattern: flex: 1 with background color
|
|
30
|
-
*/
|
|
31
|
-
screenContainer: {
|
|
32
|
-
flex: 1,
|
|
33
|
-
backgroundColor: tokens.colors.backgroundPrimary,
|
|
34
|
-
},
|
|
35
|
-
/**
|
|
36
|
-
* Basic flex container without background
|
|
37
|
-
* Use when background is set elsewhere or not needed
|
|
38
|
-
*/
|
|
39
|
-
flexContainer: {
|
|
40
|
-
flex: 1,
|
|
41
|
-
},
|
|
42
|
-
/**
|
|
43
|
-
* Screen container with secondary background
|
|
44
|
-
*/
|
|
45
|
-
screenContainerSecondary: {
|
|
46
|
-
flex: 1,
|
|
47
|
-
backgroundColor: tokens.colors.backgroundSecondary,
|
|
48
|
-
},
|
|
49
|
-
// ========================================================================
|
|
50
|
-
// SCROLL CONTAINERS
|
|
51
|
-
// ========================================================================
|
|
52
|
-
/**
|
|
53
|
-
* Standard ScrollView wrapper
|
|
54
|
-
*/
|
|
55
|
-
scrollView: {
|
|
56
|
-
flex: 1,
|
|
57
|
-
},
|
|
58
|
-
/**
|
|
59
|
-
* ScrollView content container with standard padding
|
|
60
|
-
*/
|
|
61
|
-
scrollContent: {
|
|
62
|
-
paddingHorizontal: tokens.spacing.lg,
|
|
63
|
-
paddingBottom: tokens.spacing.xl,
|
|
64
|
-
},
|
|
65
|
-
/**
|
|
66
|
-
* ScrollView content that grows to fill available space
|
|
67
|
-
*/
|
|
68
|
-
scrollContentGrow: {
|
|
69
|
-
flexGrow: 1,
|
|
70
|
-
padding: tokens.spacing.lg,
|
|
71
|
-
},
|
|
72
|
-
/**
|
|
73
|
-
* Centered scroll content (for forms, onboarding screens)
|
|
74
|
-
*/
|
|
75
|
-
scrollContentCentered: {
|
|
76
|
-
flexGrow: 1,
|
|
77
|
-
padding: tokens.spacing.lg,
|
|
78
|
-
justifyContent: 'center',
|
|
79
|
-
},
|
|
80
|
-
// ========================================================================
|
|
81
|
-
// LAYOUT UTILITIES
|
|
82
|
-
// ========================================================================
|
|
83
|
-
/**
|
|
84
|
-
* Centered container - both horizontal and vertical
|
|
85
|
-
* Perfect for empty states, splash screens
|
|
86
|
-
*/
|
|
87
|
-
centerContainer: {
|
|
88
|
-
flex: 1,
|
|
89
|
-
justifyContent: 'center',
|
|
90
|
-
alignItems: 'center',
|
|
91
|
-
},
|
|
92
|
-
/**
|
|
93
|
-
* Centered container with padding
|
|
94
|
-
*/
|
|
95
|
-
centerContainerPadded: {
|
|
96
|
-
flex: 1,
|
|
97
|
-
justifyContent: 'center',
|
|
98
|
-
alignItems: 'center',
|
|
99
|
-
paddingHorizontal: tokens.spacing.xl,
|
|
100
|
-
},
|
|
101
|
-
/**
|
|
102
|
-
* Horizontal row layout
|
|
103
|
-
*/
|
|
104
|
-
row: {
|
|
105
|
-
flexDirection: 'row',
|
|
106
|
-
alignItems: 'center',
|
|
107
|
-
},
|
|
108
|
-
/**
|
|
109
|
-
* Horizontal row with space between
|
|
110
|
-
*/
|
|
111
|
-
rowBetween: {
|
|
112
|
-
flexDirection: 'row',
|
|
113
|
-
alignItems: 'center',
|
|
114
|
-
justifyContent: 'space-between',
|
|
115
|
-
},
|
|
116
|
-
/**
|
|
117
|
-
* Horizontal row centered
|
|
118
|
-
*/
|
|
119
|
-
rowCenter: {
|
|
120
|
-
flexDirection: 'row',
|
|
121
|
-
alignItems: 'center',
|
|
122
|
-
justifyContent: 'center',
|
|
123
|
-
},
|
|
124
|
-
// ========================================================================
|
|
125
|
-
// PADDING UTILITIES
|
|
126
|
-
// ========================================================================
|
|
127
|
-
/**
|
|
128
|
-
* Standard horizontal padding
|
|
129
|
-
*/
|
|
130
|
-
paddedHorizontal: {
|
|
131
|
-
paddingHorizontal: tokens.spacing.lg,
|
|
132
|
-
},
|
|
133
|
-
/**
|
|
134
|
-
* Standard vertical padding
|
|
135
|
-
*/
|
|
136
|
-
paddedVertical: {
|
|
137
|
-
paddingVertical: tokens.spacing.lg,
|
|
138
|
-
},
|
|
139
|
-
/**
|
|
140
|
-
* Standard padding all sides
|
|
141
|
-
*/
|
|
142
|
-
padded: {
|
|
143
|
-
padding: tokens.spacing.lg,
|
|
144
|
-
},
|
|
145
|
-
// ========================================================================
|
|
146
|
-
// SECTION STYLES
|
|
147
|
-
// ========================================================================
|
|
148
|
-
/**
|
|
149
|
-
* Standard section container
|
|
150
|
-
*/
|
|
151
|
-
section: {
|
|
152
|
-
marginBottom: tokens.spacing.xl,
|
|
153
|
-
},
|
|
154
|
-
/**
|
|
155
|
-
* Section with padding
|
|
156
|
-
*/
|
|
157
|
-
sectionPadded: {
|
|
158
|
-
marginBottom: tokens.spacing.xl,
|
|
159
|
-
paddingHorizontal: tokens.spacing.lg,
|
|
160
|
-
},
|
|
161
|
-
// ========================================================================
|
|
162
|
-
// TEXT STYLES
|
|
163
|
-
// ========================================================================
|
|
164
|
-
/**
|
|
165
|
-
* Screen title - primary heading
|
|
166
|
-
*/
|
|
167
|
-
screenTitle: {
|
|
168
|
-
...tokens.typography.headingLarge,
|
|
169
|
-
color: tokens.colors.textPrimary,
|
|
170
|
-
marginBottom: tokens.spacing.sm,
|
|
171
|
-
},
|
|
172
|
-
/**
|
|
173
|
-
* Section title
|
|
174
|
-
*/
|
|
175
|
-
sectionTitle: {
|
|
176
|
-
...tokens.typography.headingMedium,
|
|
177
|
-
color: tokens.colors.textPrimary,
|
|
178
|
-
marginBottom: tokens.spacing.md,
|
|
179
|
-
},
|
|
180
|
-
/**
|
|
181
|
-
* Subtitle/description text
|
|
182
|
-
*/
|
|
183
|
-
subtitle: {
|
|
184
|
-
...tokens.typography.bodyMedium,
|
|
185
|
-
color: tokens.colors.textSecondary,
|
|
186
|
-
textAlign: 'center',
|
|
187
|
-
},
|
|
188
|
-
/**
|
|
189
|
-
* Body text
|
|
190
|
-
*/
|
|
191
|
-
bodyText: {
|
|
192
|
-
...tokens.typography.bodyMedium,
|
|
193
|
-
color: tokens.colors.textPrimary,
|
|
194
|
-
},
|
|
195
|
-
/**
|
|
196
|
-
* Secondary text (muted)
|
|
197
|
-
*/
|
|
198
|
-
secondaryText: {
|
|
199
|
-
...tokens.typography.bodySmall,
|
|
200
|
-
color: tokens.colors.textSecondary,
|
|
201
|
-
},
|
|
202
|
-
// ========================================================================
|
|
203
|
-
// FORM STYLES
|
|
204
|
-
// ========================================================================
|
|
205
|
-
/**
|
|
206
|
-
* Form container
|
|
207
|
-
*/
|
|
208
|
-
form: {
|
|
209
|
-
width: '100%',
|
|
210
|
-
},
|
|
211
|
-
/**
|
|
212
|
-
* Form header section
|
|
213
|
-
*/
|
|
214
|
-
formHeader: {
|
|
215
|
-
alignItems: 'center',
|
|
216
|
-
marginBottom: tokens.spacing.xl,
|
|
217
|
-
},
|
|
218
|
-
};
|
|
219
|
-
};
|
|
@@ -1,253 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Common Styles - Reusable Style Patterns
|
|
3
|
-
*
|
|
4
|
-
* Centralized style utilities to reduce duplication across screens.
|
|
5
|
-
* These styles are composable and follow DRY principles.
|
|
6
|
-
*
|
|
7
|
-
* Usage:
|
|
8
|
-
* ```typescript
|
|
9
|
-
* import { useCommonStyles } from '@domains/design-system/commonStyles';
|
|
10
|
-
*
|
|
11
|
-
* const MyComponent = () => {
|
|
12
|
-
* const commonStyles = useCommonStyles();
|
|
13
|
-
* return <View style={commonStyles.screenContainer}>...</View>;
|
|
14
|
-
* };
|
|
15
|
-
* ```
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
import { ViewStyle, TextStyle } from 'react-native';
|
|
19
|
-
import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Hook to get common styles with dynamic theme support
|
|
23
|
-
*/
|
|
24
|
-
export const useCommonStyles = () => {
|
|
25
|
-
const tokens = useAppDesignTokens();
|
|
26
|
-
|
|
27
|
-
return {
|
|
28
|
-
// ========================================================================
|
|
29
|
-
// SCREEN CONTAINERS
|
|
30
|
-
// ========================================================================
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Standard full-screen container
|
|
34
|
-
* Most common pattern: flex: 1 with background color
|
|
35
|
-
*/
|
|
36
|
-
screenContainer: {
|
|
37
|
-
flex: 1,
|
|
38
|
-
backgroundColor: tokens.colors.backgroundPrimary,
|
|
39
|
-
} as ViewStyle,
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Basic flex container without background
|
|
43
|
-
* Use when background is set elsewhere or not needed
|
|
44
|
-
*/
|
|
45
|
-
flexContainer: {
|
|
46
|
-
flex: 1,
|
|
47
|
-
} as ViewStyle,
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Screen container with secondary background
|
|
51
|
-
*/
|
|
52
|
-
screenContainerSecondary: {
|
|
53
|
-
flex: 1,
|
|
54
|
-
backgroundColor: tokens.colors.backgroundSecondary,
|
|
55
|
-
} as ViewStyle,
|
|
56
|
-
|
|
57
|
-
// ========================================================================
|
|
58
|
-
// SCROLL CONTAINERS
|
|
59
|
-
// ========================================================================
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Standard ScrollView wrapper
|
|
63
|
-
*/
|
|
64
|
-
scrollView: {
|
|
65
|
-
flex: 1,
|
|
66
|
-
} as ViewStyle,
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* ScrollView content container with standard padding
|
|
70
|
-
*/
|
|
71
|
-
scrollContent: {
|
|
72
|
-
paddingHorizontal: tokens.spacing.lg,
|
|
73
|
-
paddingBottom: tokens.spacing.xl,
|
|
74
|
-
} as ViewStyle,
|
|
75
|
-
|
|
76
|
-
/**
|
|
77
|
-
* ScrollView content that grows to fill available space
|
|
78
|
-
*/
|
|
79
|
-
scrollContentGrow: {
|
|
80
|
-
flexGrow: 1,
|
|
81
|
-
padding: tokens.spacing.lg,
|
|
82
|
-
} as ViewStyle,
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* Centered scroll content (for forms, onboarding screens)
|
|
86
|
-
*/
|
|
87
|
-
scrollContentCentered: {
|
|
88
|
-
flexGrow: 1,
|
|
89
|
-
padding: tokens.spacing.lg,
|
|
90
|
-
justifyContent: 'center' as const,
|
|
91
|
-
} as ViewStyle,
|
|
92
|
-
|
|
93
|
-
// ========================================================================
|
|
94
|
-
// LAYOUT UTILITIES
|
|
95
|
-
// ========================================================================
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* Centered container - both horizontal and vertical
|
|
99
|
-
* Perfect for empty states, splash screens
|
|
100
|
-
*/
|
|
101
|
-
centerContainer: {
|
|
102
|
-
flex: 1,
|
|
103
|
-
justifyContent: 'center' as const,
|
|
104
|
-
alignItems: 'center' as const,
|
|
105
|
-
} as ViewStyle,
|
|
106
|
-
|
|
107
|
-
/**
|
|
108
|
-
* Centered container with padding
|
|
109
|
-
*/
|
|
110
|
-
centerContainerPadded: {
|
|
111
|
-
flex: 1,
|
|
112
|
-
justifyContent: 'center' as const,
|
|
113
|
-
alignItems: 'center' as const,
|
|
114
|
-
paddingHorizontal: tokens.spacing.xl,
|
|
115
|
-
} as ViewStyle,
|
|
116
|
-
|
|
117
|
-
/**
|
|
118
|
-
* Horizontal row layout
|
|
119
|
-
*/
|
|
120
|
-
row: {
|
|
121
|
-
flexDirection: 'row' as const,
|
|
122
|
-
alignItems: 'center' as const,
|
|
123
|
-
} as ViewStyle,
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* Horizontal row with space between
|
|
127
|
-
*/
|
|
128
|
-
rowBetween: {
|
|
129
|
-
flexDirection: 'row' as const,
|
|
130
|
-
alignItems: 'center' as const,
|
|
131
|
-
justifyContent: 'space-between' as const,
|
|
132
|
-
} as ViewStyle,
|
|
133
|
-
|
|
134
|
-
/**
|
|
135
|
-
* Horizontal row centered
|
|
136
|
-
*/
|
|
137
|
-
rowCenter: {
|
|
138
|
-
flexDirection: 'row' as const,
|
|
139
|
-
alignItems: 'center' as const,
|
|
140
|
-
justifyContent: 'center' as const,
|
|
141
|
-
} as ViewStyle,
|
|
142
|
-
|
|
143
|
-
// ========================================================================
|
|
144
|
-
// PADDING UTILITIES
|
|
145
|
-
// ========================================================================
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* Standard horizontal padding
|
|
149
|
-
*/
|
|
150
|
-
paddedHorizontal: {
|
|
151
|
-
paddingHorizontal: tokens.spacing.lg,
|
|
152
|
-
} as ViewStyle,
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* Standard vertical padding
|
|
156
|
-
*/
|
|
157
|
-
paddedVertical: {
|
|
158
|
-
paddingVertical: tokens.spacing.lg,
|
|
159
|
-
} as ViewStyle,
|
|
160
|
-
|
|
161
|
-
/**
|
|
162
|
-
* Standard padding all sides
|
|
163
|
-
*/
|
|
164
|
-
padded: {
|
|
165
|
-
padding: tokens.spacing.lg,
|
|
166
|
-
} as ViewStyle,
|
|
167
|
-
|
|
168
|
-
// ========================================================================
|
|
169
|
-
// SECTION STYLES
|
|
170
|
-
// ========================================================================
|
|
171
|
-
|
|
172
|
-
/**
|
|
173
|
-
* Standard section container
|
|
174
|
-
*/
|
|
175
|
-
section: {
|
|
176
|
-
marginBottom: tokens.spacing.xl,
|
|
177
|
-
} as ViewStyle,
|
|
178
|
-
|
|
179
|
-
/**
|
|
180
|
-
* Section with padding
|
|
181
|
-
*/
|
|
182
|
-
sectionPadded: {
|
|
183
|
-
marginBottom: tokens.spacing.xl,
|
|
184
|
-
paddingHorizontal: tokens.spacing.lg,
|
|
185
|
-
} as ViewStyle,
|
|
186
|
-
|
|
187
|
-
// ========================================================================
|
|
188
|
-
// TEXT STYLES
|
|
189
|
-
// ========================================================================
|
|
190
|
-
|
|
191
|
-
/**
|
|
192
|
-
* Screen title - primary heading
|
|
193
|
-
*/
|
|
194
|
-
screenTitle: {
|
|
195
|
-
...tokens.typography.headingLarge,
|
|
196
|
-
color: tokens.colors.textPrimary,
|
|
197
|
-
marginBottom: tokens.spacing.sm,
|
|
198
|
-
} as TextStyle,
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* Section title
|
|
202
|
-
*/
|
|
203
|
-
sectionTitle: {
|
|
204
|
-
...tokens.typography.headingMedium,
|
|
205
|
-
color: tokens.colors.textPrimary,
|
|
206
|
-
marginBottom: tokens.spacing.md,
|
|
207
|
-
} as TextStyle,
|
|
208
|
-
|
|
209
|
-
/**
|
|
210
|
-
* Subtitle/description text
|
|
211
|
-
*/
|
|
212
|
-
subtitle: {
|
|
213
|
-
...tokens.typography.bodyMedium,
|
|
214
|
-
color: tokens.colors.textSecondary,
|
|
215
|
-
textAlign: 'center' as const,
|
|
216
|
-
} as TextStyle,
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* Body text
|
|
220
|
-
*/
|
|
221
|
-
bodyText: {
|
|
222
|
-
...tokens.typography.bodyMedium,
|
|
223
|
-
color: tokens.colors.textPrimary,
|
|
224
|
-
} as TextStyle,
|
|
225
|
-
|
|
226
|
-
/**
|
|
227
|
-
* Secondary text (muted)
|
|
228
|
-
*/
|
|
229
|
-
secondaryText: {
|
|
230
|
-
...tokens.typography.bodySmall,
|
|
231
|
-
color: tokens.colors.textSecondary,
|
|
232
|
-
} as TextStyle,
|
|
233
|
-
|
|
234
|
-
// ========================================================================
|
|
235
|
-
// FORM STYLES
|
|
236
|
-
// ========================================================================
|
|
237
|
-
|
|
238
|
-
/**
|
|
239
|
-
* Form container
|
|
240
|
-
*/
|
|
241
|
-
form: {
|
|
242
|
-
width: '100%',
|
|
243
|
-
} as ViewStyle,
|
|
244
|
-
|
|
245
|
-
/**
|
|
246
|
-
* Form header section
|
|
247
|
-
*/
|
|
248
|
-
formHeader: {
|
|
249
|
-
alignItems: 'center' as const,
|
|
250
|
-
marginBottom: tokens.spacing.xl,
|
|
251
|
-
} as ViewStyle,
|
|
252
|
-
};
|
|
253
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { createVariants } from './core';
|
|
2
|
-
export function createAdvancedVariants(config) {
|
|
3
|
-
const baseVariantFn = createVariants(config);
|
|
4
|
-
return function (props = {}) {
|
|
5
|
-
let result = baseVariantFn(props);
|
|
6
|
-
if (config.compoundVariants) {
|
|
7
|
-
for (const compound of config.compoundVariants) {
|
|
8
|
-
const conditionsMet = Object.entries(compound.conditions).every(([key, value]) => props[key] === value);
|
|
9
|
-
if (conditionsMet)
|
|
10
|
-
result = { ...result, ...compound.style };
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
return result;
|
|
14
|
-
};
|
|
15
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export function createVariants(config) {
|
|
2
|
-
return function (props = {}) {
|
|
3
|
-
let result = { ...config.base };
|
|
4
|
-
if (config.defaultVariants) {
|
|
5
|
-
for (const [variantKey, defaultValue] of Object.entries(config.defaultVariants)) {
|
|
6
|
-
if (config.variants?.[variantKey] && defaultValue) {
|
|
7
|
-
const variantStyle = config.variants[variantKey][defaultValue];
|
|
8
|
-
if (variantStyle)
|
|
9
|
-
result = { ...result, ...variantStyle };
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
for (const [variantKey, variantValue] of Object.entries(props)) {
|
|
14
|
-
if (config.variants?.[variantKey] && variantValue) {
|
|
15
|
-
const variantStyle = config.variants[variantKey][variantValue];
|
|
16
|
-
if (variantStyle)
|
|
17
|
-
result = { ...result, ...variantStyle };
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
return result;
|
|
21
|
-
};
|
|
22
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export function combineStyles(...styles) {
|
|
2
|
-
return styles.reduce((acc, style) => (style ? { ...acc, ...style } : acc), {});
|
|
3
|
-
}
|
|
4
|
-
export function conditionalStyle(condition, trueStyle, falseStyle) {
|
|
5
|
-
return condition ? trueStyle : falseStyle;
|
|
6
|
-
}
|
|
7
|
-
export function responsiveStyle(small, medium, large) {
|
|
8
|
-
return small;
|
|
9
|
-
}
|