@umituz/react-native-design-system 1.8.0 → 1.8.2
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/README.md +2 -2
- package/package.json +56 -30
- package/src/index.ts +58 -269
- package/lib/index.d.ts +0 -61
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js +0 -101
- package/lib/index.js.map +0 -1
- package/lib/presentation/atoms/AtomicAvatar.d.ts +0 -48
- package/lib/presentation/atoms/AtomicAvatar.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicAvatar.js +0 -85
- package/lib/presentation/atoms/AtomicAvatar.js.map +0 -1
- package/lib/presentation/atoms/AtomicAvatarGroup.d.ts +0 -56
- package/lib/presentation/atoms/AtomicAvatarGroup.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicAvatarGroup.js +0 -83
- package/lib/presentation/atoms/AtomicAvatarGroup.js.map +0 -1
- package/lib/presentation/atoms/AtomicBadge.d.ts +0 -42
- package/lib/presentation/atoms/AtomicBadge.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicBadge.js +0 -168
- package/lib/presentation/atoms/AtomicBadge.js.map +0 -1
- package/lib/presentation/atoms/AtomicButton.d.ts +0 -21
- package/lib/presentation/atoms/AtomicButton.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicButton.js +0 -172
- package/lib/presentation/atoms/AtomicButton.js.map +0 -1
- package/lib/presentation/atoms/AtomicCard.d.ts +0 -15
- package/lib/presentation/atoms/AtomicCard.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicCard.js +0 -70
- package/lib/presentation/atoms/AtomicCard.js.map +0 -1
- package/lib/presentation/atoms/AtomicChip.d.ts +0 -53
- package/lib/presentation/atoms/AtomicChip.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicChip.js +0 -131
- package/lib/presentation/atoms/AtomicChip.js.map +0 -1
- package/lib/presentation/atoms/AtomicDatePicker.d.ts +0 -75
- package/lib/presentation/atoms/AtomicDatePicker.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicDatePicker.js +0 -246
- package/lib/presentation/atoms/AtomicDatePicker.js.map +0 -1
- package/lib/presentation/atoms/AtomicDivider.d.ts +0 -45
- package/lib/presentation/atoms/AtomicDivider.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicDivider.js +0 -58
- package/lib/presentation/atoms/AtomicDivider.js.map +0 -1
- package/lib/presentation/atoms/AtomicFab.d.ts +0 -37
- package/lib/presentation/atoms/AtomicFab.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicFab.js +0 -68
- package/lib/presentation/atoms/AtomicFab.js.map +0 -1
- package/lib/presentation/atoms/AtomicFilter.d.ts +0 -37
- package/lib/presentation/atoms/AtomicFilter.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicFilter.js +0 -104
- package/lib/presentation/atoms/AtomicFilter.js.map +0 -1
- package/lib/presentation/atoms/AtomicFormError.d.ts +0 -30
- package/lib/presentation/atoms/AtomicFormError.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicFormError.js +0 -64
- package/lib/presentation/atoms/AtomicFormError.js.map +0 -1
- package/lib/presentation/atoms/AtomicIcon.d.ts +0 -35
- package/lib/presentation/atoms/AtomicIcon.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicIcon.js +0 -30
- package/lib/presentation/atoms/AtomicIcon.js.map +0 -1
- package/lib/presentation/atoms/AtomicImage.d.ts +0 -40
- package/lib/presentation/atoms/AtomicImage.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicImage.js +0 -92
- package/lib/presentation/atoms/AtomicImage.js.map +0 -1
- package/lib/presentation/atoms/AtomicInput.d.ts +0 -71
- package/lib/presentation/atoms/AtomicInput.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicInput.js +0 -196
- package/lib/presentation/atoms/AtomicInput.js.map +0 -1
- package/lib/presentation/atoms/AtomicNumberInput.d.ts +0 -69
- package/lib/presentation/atoms/AtomicNumberInput.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicNumberInput.js +0 -125
- package/lib/presentation/atoms/AtomicNumberInput.js.map +0 -1
- package/lib/presentation/atoms/AtomicPicker.d.ts +0 -52
- package/lib/presentation/atoms/AtomicPicker.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicPicker.js +0 -299
- package/lib/presentation/atoms/AtomicPicker.js.map +0 -1
- package/lib/presentation/atoms/AtomicProgress.d.ts +0 -44
- package/lib/presentation/atoms/AtomicProgress.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicProgress.js +0 -80
- package/lib/presentation/atoms/AtomicProgress.js.map +0 -1
- package/lib/presentation/atoms/AtomicSearchBar.d.ts +0 -19
- package/lib/presentation/atoms/AtomicSearchBar.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicSearchBar.js +0 -46
- package/lib/presentation/atoms/AtomicSearchBar.js.map +0 -1
- package/lib/presentation/atoms/AtomicSort.d.ts +0 -72
- package/lib/presentation/atoms/AtomicSort.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicSort.js +0 -77
- package/lib/presentation/atoms/AtomicSort.js.map +0 -1
- package/lib/presentation/atoms/AtomicSwitch.d.ts +0 -43
- package/lib/presentation/atoms/AtomicSwitch.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicSwitch.js +0 -104
- package/lib/presentation/atoms/AtomicSwitch.js.map +0 -1
- package/lib/presentation/atoms/AtomicText.d.ts +0 -14
- package/lib/presentation/atoms/AtomicText.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicText.js +0 -36
- package/lib/presentation/atoms/AtomicText.js.map +0 -1
- package/lib/presentation/atoms/AtomicTextArea.d.ts +0 -85
- package/lib/presentation/atoms/AtomicTextArea.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicTextArea.js +0 -196
- package/lib/presentation/atoms/AtomicTextArea.js.map +0 -1
- package/lib/presentation/atoms/AtomicTouchable.d.ts +0 -77
- package/lib/presentation/atoms/AtomicTouchable.d.ts.map +0 -1
- package/lib/presentation/atoms/AtomicTouchable.js +0 -138
- package/lib/presentation/atoms/AtomicTouchable.js.map +0 -1
- package/lib/presentation/atoms/fab/styles/fabStyles.d.ts +0 -23
- package/lib/presentation/atoms/fab/styles/fabStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/fab/styles/fabStyles.js +0 -63
- package/lib/presentation/atoms/fab/styles/fabStyles.js.map +0 -1
- package/lib/presentation/atoms/fab/types/index.d.ts +0 -71
- package/lib/presentation/atoms/fab/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/fab/types/index.js +0 -2
- package/lib/presentation/atoms/fab/types/index.js.map +0 -1
- package/lib/presentation/atoms/filter/styles/filterStyles.d.ts +0 -15
- package/lib/presentation/atoms/filter/styles/filterStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/filter/styles/filterStyles.js +0 -29
- package/lib/presentation/atoms/filter/styles/filterStyles.js.map +0 -1
- package/lib/presentation/atoms/filter/types/index.d.ts +0 -76
- package/lib/presentation/atoms/filter/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/filter/types/index.js +0 -2
- package/lib/presentation/atoms/filter/types/index.js.map +0 -1
- package/lib/presentation/atoms/index.d.ts +0 -273
- package/lib/presentation/atoms/index.d.ts.map +0 -1
- package/lib/presentation/atoms/index.js +0 -146
- package/lib/presentation/atoms/index.js.map +0 -1
- package/lib/presentation/atoms/input/hooks/useInputState.d.ts +0 -7
- package/lib/presentation/atoms/input/hooks/useInputState.d.ts.map +0 -1
- package/lib/presentation/atoms/input/hooks/useInputState.js +0 -13
- package/lib/presentation/atoms/input/hooks/useInputState.js.map +0 -1
- package/lib/presentation/atoms/input/styles/inputStyles.d.ts +0 -13
- package/lib/presentation/atoms/input/styles/inputStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/input/styles/inputStyles.js +0 -59
- package/lib/presentation/atoms/input/styles/inputStyles.js.map +0 -1
- package/lib/presentation/atoms/input/types/index.d.ts +0 -24
- package/lib/presentation/atoms/input/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/input/types/index.js +0 -2
- package/lib/presentation/atoms/input/types/index.js.map +0 -1
- package/lib/presentation/atoms/picker/styles/pickerStyles.d.ts +0 -85
- package/lib/presentation/atoms/picker/styles/pickerStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/picker/styles/pickerStyles.js +0 -177
- package/lib/presentation/atoms/picker/styles/pickerStyles.js.map +0 -1
- package/lib/presentation/atoms/picker/types/index.d.ts +0 -38
- package/lib/presentation/atoms/picker/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/picker/types/index.js +0 -2
- package/lib/presentation/atoms/picker/types/index.js.map +0 -1
- package/lib/presentation/atoms/touchable/styles/touchableStyles.d.ts +0 -31
- package/lib/presentation/atoms/touchable/styles/touchableStyles.d.ts.map +0 -1
- package/lib/presentation/atoms/touchable/styles/touchableStyles.js +0 -54
- package/lib/presentation/atoms/touchable/styles/touchableStyles.js.map +0 -1
- package/lib/presentation/atoms/touchable/types/index.d.ts +0 -134
- package/lib/presentation/atoms/touchable/types/index.d.ts.map +0 -1
- package/lib/presentation/atoms/touchable/types/index.js +0 -2
- package/lib/presentation/atoms/touchable/types/index.js.map +0 -1
- package/lib/presentation/hooks/useResponsive.d.ts +0 -80
- package/lib/presentation/hooks/useResponsive.d.ts.map +0 -1
- package/lib/presentation/hooks/useResponsive.js +0 -82
- package/lib/presentation/hooks/useResponsive.js.map +0 -1
- package/lib/presentation/molecules/AtomicConfirmationModal.d.ts +0 -73
- package/lib/presentation/molecules/AtomicConfirmationModal.d.ts.map +0 -1
- package/lib/presentation/molecules/AtomicConfirmationModal.js +0 -154
- package/lib/presentation/molecules/AtomicConfirmationModal.js.map +0 -1
- package/lib/presentation/molecules/EmptyState.d.ts +0 -41
- package/lib/presentation/molecules/EmptyState.d.ts.map +0 -1
- package/lib/presentation/molecules/EmptyState.js +0 -68
- package/lib/presentation/molecules/EmptyState.js.map +0 -1
- package/lib/presentation/molecules/FormField.d.ts +0 -22
- package/lib/presentation/molecules/FormField.d.ts.map +0 -1
- package/lib/presentation/molecules/FormField.js +0 -76
- package/lib/presentation/molecules/FormField.js.map +0 -1
- package/lib/presentation/molecules/GridContainer.d.ts +0 -40
- package/lib/presentation/molecules/GridContainer.d.ts.map +0 -1
- package/lib/presentation/molecules/GridContainer.js +0 -77
- package/lib/presentation/molecules/GridContainer.js.map +0 -1
- package/lib/presentation/molecules/IconContainer.d.ts +0 -29
- package/lib/presentation/molecules/IconContainer.d.ts.map +0 -1
- package/lib/presentation/molecules/IconContainer.js +0 -60
- package/lib/presentation/molecules/IconContainer.js.map +0 -1
- package/lib/presentation/molecules/ListItem.d.ts +0 -5
- package/lib/presentation/molecules/ListItem.d.ts.map +0 -1
- package/lib/presentation/molecules/ListItem.js +0 -24
- package/lib/presentation/molecules/ListItem.js.map +0 -1
- package/lib/presentation/molecules/ScreenHeader.d.ts +0 -55
- package/lib/presentation/molecules/ScreenHeader.d.ts.map +0 -1
- package/lib/presentation/molecules/ScreenHeader.js +0 -94
- package/lib/presentation/molecules/ScreenHeader.js.map +0 -1
- package/lib/presentation/molecules/SearchBar.d.ts +0 -18
- package/lib/presentation/molecules/SearchBar.d.ts.map +0 -1
- package/lib/presentation/molecules/SearchBar.js +0 -47
- package/lib/presentation/molecules/SearchBar.js.map +0 -1
- package/lib/presentation/molecules/SectionCard.d.ts +0 -25
- package/lib/presentation/molecules/SectionCard.d.ts.map +0 -1
- package/lib/presentation/molecules/SectionCard.js +0 -47
- package/lib/presentation/molecules/SectionCard.js.map +0 -1
- package/lib/presentation/molecules/SectionContainer.d.ts +0 -33
- package/lib/presentation/molecules/SectionContainer.d.ts.map +0 -1
- package/lib/presentation/molecules/SectionContainer.js +0 -64
- package/lib/presentation/molecules/SectionContainer.js.map +0 -1
- package/lib/presentation/molecules/SectionHeader.d.ts +0 -37
- package/lib/presentation/molecules/SectionHeader.d.ts.map +0 -1
- package/lib/presentation/molecules/SectionHeader.js +0 -73
- package/lib/presentation/molecules/SectionHeader.js.map +0 -1
- package/lib/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.d.ts +0 -50
- package/lib/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.d.ts.map +0 -1
- package/lib/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.js +0 -115
- package/lib/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.js.map +0 -1
- package/lib/presentation/molecules/confirmation-modal/types/index.d.ts +0 -86
- package/lib/presentation/molecules/confirmation-modal/types/index.d.ts.map +0 -1
- package/lib/presentation/molecules/confirmation-modal/types/index.js +0 -7
- package/lib/presentation/molecules/confirmation-modal/types/index.js.map +0 -1
- package/lib/presentation/molecules/index.d.ts +0 -27
- package/lib/presentation/molecules/index.d.ts.map +0 -1
- package/lib/presentation/molecules/index.js +0 -17
- package/lib/presentation/molecules/index.js.map +0 -1
- package/lib/presentation/molecules/listitem/styles/listItemStyles.d.ts +0 -12
- package/lib/presentation/molecules/listitem/styles/listItemStyles.d.ts.map +0 -1
- package/lib/presentation/molecules/listitem/styles/listItemStyles.js +0 -15
- package/lib/presentation/molecules/listitem/styles/listItemStyles.js.map +0 -1
- package/lib/presentation/molecules/listitem/types/index.d.ts +0 -17
- package/lib/presentation/molecules/listitem/types/index.d.ts.map +0 -1
- package/lib/presentation/molecules/listitem/types/index.js +0 -2
- package/lib/presentation/molecules/listitem/types/index.js.map +0 -1
- package/lib/presentation/organisms/AppHeader.d.ts +0 -31
- package/lib/presentation/organisms/AppHeader.d.ts.map +0 -1
- package/lib/presentation/organisms/AppHeader.js +0 -78
- package/lib/presentation/organisms/AppHeader.js.map +0 -1
- package/lib/presentation/organisms/FormContainer.d.ts +0 -76
- package/lib/presentation/organisms/FormContainer.d.ts.map +0 -1
- package/lib/presentation/organisms/FormContainer.js +0 -127
- package/lib/presentation/organisms/FormContainer.js.map +0 -1
- package/lib/presentation/organisms/ScreenLayout.d.ts +0 -84
- package/lib/presentation/organisms/ScreenLayout.d.ts.map +0 -1
- package/lib/presentation/organisms/ScreenLayout.js +0 -69
- package/lib/presentation/organisms/ScreenLayout.js.map +0 -1
- package/lib/presentation/organisms/index.d.ts +0 -16
- package/lib/presentation/organisms/index.d.ts.map +0 -1
- package/lib/presentation/organisms/index.js +0 -14
- package/lib/presentation/organisms/index.js.map +0 -1
- package/lib/presentation/tokens/commonStyles.d.ts +0 -122
- package/lib/presentation/tokens/commonStyles.d.ts.map +0 -1
- package/lib/presentation/tokens/commonStyles.js +0 -220
- package/lib/presentation/tokens/commonStyles.js.map +0 -1
- package/lib/presentation/utils/platformConstants.d.ts +0 -100
- package/lib/presentation/utils/platformConstants.d.ts.map +0 -1
- package/lib/presentation/utils/platformConstants.js +0 -114
- package/lib/presentation/utils/platformConstants.js.map +0 -1
- package/lib/presentation/utils/responsive.d.ts +0 -218
- package/lib/presentation/utils/responsive.d.ts.map +0 -1
- package/lib/presentation/utils/responsive.js +0 -452
- package/lib/presentation/utils/responsive.js.map +0 -1
- package/lib/presentation/utils/variants/compound.d.ts +0 -10
- package/lib/presentation/utils/variants/compound.d.ts.map +0 -1
- package/lib/presentation/utils/variants/compound.js +0 -16
- package/lib/presentation/utils/variants/compound.js.map +0 -1
- package/lib/presentation/utils/variants/core.d.ts +0 -15
- package/lib/presentation/utils/variants/core.d.ts.map +0 -1
- package/lib/presentation/utils/variants/core.js +0 -23
- package/lib/presentation/utils/variants/core.js.map +0 -1
- package/lib/presentation/utils/variants/helpers.d.ts +0 -5
- package/lib/presentation/utils/variants/helpers.d.ts.map +0 -1
- package/lib/presentation/utils/variants/helpers.js +0 -10
- package/lib/presentation/utils/variants/helpers.js.map +0 -1
- package/lib/presentation/utils/variants.d.ts +0 -4
- package/lib/presentation/utils/variants.d.ts.map +0 -1
- package/lib/presentation/utils/variants.js +0 -4
- package/lib/presentation/utils/variants.js.map +0 -1
- package/src/presentation/atoms/AtomicAvatar.tsx +0 -157
- package/src/presentation/atoms/AtomicAvatarGroup.tsx +0 -169
- package/src/presentation/atoms/AtomicBadge.tsx +0 -232
- package/src/presentation/atoms/AtomicButton.tsx +0 -236
- package/src/presentation/atoms/AtomicCard.tsx +0 -107
- package/src/presentation/atoms/AtomicChip.tsx +0 -223
- package/src/presentation/atoms/AtomicDatePicker.tsx +0 -354
- package/src/presentation/atoms/AtomicDivider.tsx +0 -114
- package/src/presentation/atoms/AtomicFab.tsx +0 -98
- package/src/presentation/atoms/AtomicFilter.tsx +0 -154
- package/src/presentation/atoms/AtomicFormError.tsx +0 -105
- package/src/presentation/atoms/AtomicIcon.tsx +0 -40
- package/src/presentation/atoms/AtomicImage.tsx +0 -149
- package/src/presentation/atoms/AtomicInput.tsx +0 -350
- package/src/presentation/atoms/AtomicNumberInput.tsx +0 -182
- package/src/presentation/atoms/AtomicPicker.tsx +0 -458
- package/src/presentation/atoms/AtomicProgress.tsx +0 -139
- package/src/presentation/atoms/AtomicSearchBar.tsx +0 -114
- package/src/presentation/atoms/AtomicSort.tsx +0 -145
- package/src/presentation/atoms/AtomicSwitch.tsx +0 -166
- package/src/presentation/atoms/AtomicText.tsx +0 -82
- package/src/presentation/atoms/AtomicTextArea.tsx +0 -313
- package/src/presentation/atoms/AtomicTouchable.tsx +0 -209
- package/src/presentation/atoms/fab/styles/fabStyles.ts +0 -69
- package/src/presentation/atoms/fab/types/index.ts +0 -82
- package/src/presentation/atoms/filter/styles/filterStyles.ts +0 -32
- package/src/presentation/atoms/filter/types/index.ts +0 -89
- package/src/presentation/atoms/index.ts +0 -366
- package/src/presentation/atoms/input/hooks/useInputState.ts +0 -15
- package/src/presentation/atoms/input/styles/inputStyles.ts +0 -66
- package/src/presentation/atoms/input/types/index.ts +0 -25
- package/src/presentation/atoms/picker/styles/pickerStyles.ts +0 -207
- package/src/presentation/atoms/picker/types/index.ts +0 -40
- package/src/presentation/atoms/touchable/styles/touchableStyles.ts +0 -62
- package/src/presentation/atoms/touchable/types/index.ts +0 -155
- package/src/presentation/hooks/useResponsive.ts +0 -180
- package/src/presentation/molecules/AtomicConfirmationModal.tsx +0 -243
- package/src/presentation/molecules/EmptyState.tsx +0 -130
- package/src/presentation/molecules/FormField.tsx +0 -128
- package/src/presentation/molecules/GridContainer.tsx +0 -124
- package/src/presentation/molecules/IconContainer.tsx +0 -94
- package/src/presentation/molecules/ListItem.tsx +0 -36
- package/src/presentation/molecules/ScreenHeader.tsx +0 -140
- package/src/presentation/molecules/SearchBar.tsx +0 -85
- package/src/presentation/molecules/SectionCard.tsx +0 -74
- package/src/presentation/molecules/SectionContainer.tsx +0 -106
- package/src/presentation/molecules/SectionHeader.tsx +0 -125
- package/src/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.ts +0 -133
- package/src/presentation/molecules/confirmation-modal/types/index.ts +0 -105
- package/src/presentation/molecules/index.ts +0 -41
- package/src/presentation/molecules/listitem/styles/listItemStyles.ts +0 -19
- package/src/presentation/molecules/listitem/types/index.ts +0 -17
- package/src/presentation/organisms/AppHeader.tsx +0 -137
- package/src/presentation/organisms/FormContainer.tsx +0 -180
- package/src/presentation/organisms/ScreenLayout.tsx +0 -171
- package/src/presentation/organisms/index.ts +0 -25
- package/src/presentation/tokens/commonStyles.ts +0 -253
- package/src/presentation/utils/platformConstants.ts +0 -124
- package/src/presentation/utils/responsive.ts +0 -516
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* GridContainer Molecule - Responsive Grid Layout
|
|
3
|
-
*
|
|
4
|
-
* Provides flexible grid layout with configurable columns and gap
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: MOLECULE
|
|
8
|
-
* Composition: View + Responsive Layout
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Stats grids (2 columns)
|
|
12
|
-
* - Action grids (2 columns)
|
|
13
|
-
* - Product grids (2-3 columns)
|
|
14
|
-
* - Gallery grids (3-4 columns)
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { View, StyleSheet } from 'react-native';
|
|
18
|
-
// =============================================================================
|
|
19
|
-
// COMPONENT IMPLEMENTATION
|
|
20
|
-
// =============================================================================
|
|
21
|
-
const GridContainerComponent = ({ columns = 2, gap = 8, style, children, }) => {
|
|
22
|
-
const styles = getStyles(gap);
|
|
23
|
-
return (<View style={[styles.container, style]}>
|
|
24
|
-
{React.Children.map(children, (child) => {
|
|
25
|
-
if (React.isValidElement(child)) {
|
|
26
|
-
const childStyle = child.props.style;
|
|
27
|
-
const itemStyle = getItemStyle(columns, gap);
|
|
28
|
-
return React.cloneElement(child, {
|
|
29
|
-
style: StyleSheet.flatten([itemStyle, childStyle]),
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
return child;
|
|
33
|
-
})}
|
|
34
|
-
</View>);
|
|
35
|
-
};
|
|
36
|
-
// =============================================================================
|
|
37
|
-
// GRID ITEM COMPONENT
|
|
38
|
-
// =============================================================================
|
|
39
|
-
export const GridItem = ({ children, style }) => {
|
|
40
|
-
return <View style={style}>{children}</View>;
|
|
41
|
-
};
|
|
42
|
-
// Export GridContainer with Item property
|
|
43
|
-
export const GridContainer = GridContainerComponent;
|
|
44
|
-
// Attach GridItem to GridContainer for convenient usage
|
|
45
|
-
GridContainer.Item = GridItem;
|
|
46
|
-
// =============================================================================
|
|
47
|
-
// HELPERS
|
|
48
|
-
// =============================================================================
|
|
49
|
-
const getItemStyle = (columns, gap) => {
|
|
50
|
-
// Calculate width: (100% - total gap space) / columns
|
|
51
|
-
// For 2 columns with 8px gap: (100% - 8px) / 2 = ~48%
|
|
52
|
-
// For 3 columns with 8px gap: (100% - 16px) / 3 = ~31.33%
|
|
53
|
-
const widthMap = {
|
|
54
|
-
2: '48%',
|
|
55
|
-
3: '31.33%',
|
|
56
|
-
4: '23%',
|
|
57
|
-
};
|
|
58
|
-
return {
|
|
59
|
-
width: widthMap[columns] || '48%',
|
|
60
|
-
marginHorizontal: gap / 2,
|
|
61
|
-
marginBottom: gap * 1.5,
|
|
62
|
-
};
|
|
63
|
-
};
|
|
64
|
-
// =============================================================================
|
|
65
|
-
// STYLES
|
|
66
|
-
// =============================================================================
|
|
67
|
-
const getStyles = (gap) => StyleSheet.create({
|
|
68
|
-
container: {
|
|
69
|
-
flexDirection: 'row',
|
|
70
|
-
flexWrap: 'wrap',
|
|
71
|
-
marginHorizontal: -(gap / 2),
|
|
72
|
-
},
|
|
73
|
-
});
|
|
74
|
-
// =============================================================================
|
|
75
|
-
// EXPORTS
|
|
76
|
-
// =============================================================================
|
|
77
|
-
//# sourceMappingURL=GridContainer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GridContainer.js","sourceRoot":"","sources":["../../../src/presentation/molecules/GridContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAA6B,MAAM,cAAc,CAAC;AAwB3E,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,sBAAsB,GAAiC,CAAC,EAC5D,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,CAAC,EACP,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;IAE9B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,IAAI,KAAK,CAAC,cAAc,CAAgB,KAAK,CAAC,EAAE,CAAC;gBAC/C,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;gBACrC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;gBAC7C,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC/B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;iBACnD,CAAC,CAAC;YACL,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,sBAAsB;AACtB,gFAAgF;AAEhF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,0CAA0C;AAC1C,MAAM,CAAC,MAAM,aAAa,GAAG,sBAE5B,CAAC;AAEF,wDAAwD;AACxD,aAAa,CAAC,IAAI,GAAG,QAAQ,CAAC;AAE9B,gFAAgF;AAChF,UAAU;AACV,gFAAgF;AAEhF,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,GAAW,EAAa,EAAE;IAC/D,sDAAsD;IACtD,sDAAsD;IACtD,0DAA0D;IAE1D,MAAM,QAAQ,GAAmC;QAC/C,CAAC,EAAE,KAAuB;QAC1B,CAAC,EAAE,QAA0B;QAC7B,CAAC,EAAE,KAAuB;KAC3B,CAAC;IAEF,OAAO;QACL,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAK,KAAwB;QACrD,gBAAgB,EAAE,GAAG,GAAG,CAAC;QACzB,YAAY,EAAE,GAAG,GAAG,GAAG;KACxB,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,SAAS;AACT,gFAAgF;AAEhF,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAChC,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,aAAa,EAAE,KAAc;QAC7B,QAAQ,EAAE,MAAe;QACzB,gBAAgB,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;KAC7B;CACF,CAAC,CAAC;AAEL,gFAAgF;AAChF,UAAU;AACV,gFAAgF"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* IconContainer Molecule Component
|
|
3
|
-
*
|
|
4
|
-
* Standardized icon container with consistent sizing and styling.
|
|
5
|
-
* Used throughout app for icon displays in lists, cards, and settings.
|
|
6
|
-
*
|
|
7
|
-
* Features:
|
|
8
|
-
* - Consistent sizing system
|
|
9
|
-
* - Optional background circle
|
|
10
|
-
* - Optional gradient background
|
|
11
|
-
* - Theme-aware colors
|
|
12
|
-
* - Accessibility support
|
|
13
|
-
*
|
|
14
|
-
* Atomic Design: Molecule (View + Icon)
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
interface IconContainerProps {
|
|
18
|
-
icon: React.ReactNode;
|
|
19
|
-
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
20
|
-
backgroundColor?: string;
|
|
21
|
-
gradient?: string[];
|
|
22
|
-
withBorder?: boolean;
|
|
23
|
-
borderColor?: string;
|
|
24
|
-
style?: object;
|
|
25
|
-
testID?: string;
|
|
26
|
-
}
|
|
27
|
-
export declare const IconContainer: React.FC<IconContainerProps>;
|
|
28
|
-
export {};
|
|
29
|
-
//# sourceMappingURL=IconContainer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IconContainer.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/IconContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,kBAAkB;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AASD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* IconContainer Molecule Component
|
|
3
|
-
*
|
|
4
|
-
* Standardized icon container with consistent sizing and styling.
|
|
5
|
-
* Used throughout app for icon displays in lists, cards, and settings.
|
|
6
|
-
*
|
|
7
|
-
* Features:
|
|
8
|
-
* - Consistent sizing system
|
|
9
|
-
* - Optional background circle
|
|
10
|
-
* - Optional gradient background
|
|
11
|
-
* - Theme-aware colors
|
|
12
|
-
* - Accessibility support
|
|
13
|
-
*
|
|
14
|
-
* Atomic Design: Molecule (View + Icon)
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { View, StyleSheet } from 'react-native';
|
|
18
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
19
|
-
import { LinearGradient } from 'expo-linear-gradient';
|
|
20
|
-
const getSizeMap = (tokens) => ({
|
|
21
|
-
sm: tokens.iconSizes.sm,
|
|
22
|
-
md: tokens.iconSizes.md,
|
|
23
|
-
lg: tokens.iconSizes.lg,
|
|
24
|
-
xl: tokens.iconSizes.xl,
|
|
25
|
-
});
|
|
26
|
-
export const IconContainer = ({ icon, size = 'md', backgroundColor, gradient, withBorder = false, borderColor, style, testID, }) => {
|
|
27
|
-
const tokens = useAppDesignTokens();
|
|
28
|
-
const sizeMap = getSizeMap(tokens);
|
|
29
|
-
const containerSize = sizeMap[size];
|
|
30
|
-
const borderRadius = containerSize / 2;
|
|
31
|
-
const containerStyle = [
|
|
32
|
-
styles.container,
|
|
33
|
-
{
|
|
34
|
-
width: containerSize,
|
|
35
|
-
height: containerSize,
|
|
36
|
-
borderRadius,
|
|
37
|
-
backgroundColor: backgroundColor || (gradient ? undefined : tokens.colors.surfaceVariant),
|
|
38
|
-
},
|
|
39
|
-
withBorder && {
|
|
40
|
-
borderWidth: 1,
|
|
41
|
-
borderColor: borderColor || tokens.colors.border,
|
|
42
|
-
},
|
|
43
|
-
style,
|
|
44
|
-
];
|
|
45
|
-
if (gradient) {
|
|
46
|
-
return (<LinearGradient colors={gradient} style={containerStyle} testID={testID}>
|
|
47
|
-
{icon}
|
|
48
|
-
</LinearGradient>);
|
|
49
|
-
}
|
|
50
|
-
return (<View style={containerStyle} testID={testID}>
|
|
51
|
-
{icon}
|
|
52
|
-
</View>);
|
|
53
|
-
};
|
|
54
|
-
const styles = StyleSheet.create({
|
|
55
|
-
container: {
|
|
56
|
-
alignItems: 'center',
|
|
57
|
-
justifyContent: 'center',
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
//# sourceMappingURL=IconContainer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IconContainer.js","sourceRoot":"","sources":["../../../src/presentation/molecules/IconContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAatD,MAAM,UAAU,GAAG,CAAC,MAA6C,EAAE,EAAE,CAAC,CAAC;IACrE,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE;IACvB,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE;IACvB,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE;IACvB,EAAE,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,eAAe,EACf,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,WAAW,EACX,KAAK,EACL,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,YAAY,GAAG,aAAa,GAAG,CAAC,CAAC;IAEvC,MAAM,cAAc,GAAG;QACrB,MAAM,CAAC,SAAS;QAChB;YACE,KAAK,EAAE,aAAa;YACpB,MAAM,EAAE,aAAa;YACrB,YAAY;YACZ,eAAe,EAAE,eAAe,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SAC1F;QACD,UAAU,IAAI;YACZ,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,WAAW,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM;SACjD;QACD,KAAK;KACN,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,CAAC,cAAc,CACb,MAAM,CAAC,CAAC,QAAQ,CAAC,CACjB,KAAK,CAAC,CAAC,cAAc,CAAC,CACtB,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;QAAA,CAAC,IAAI,CACP;MAAA,EAAE,cAAc,CAAC,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC1C;MAAA,CAAC,IAAI,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyB5C,CAAC"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { TouchableOpacity, View } from 'react-native';
|
|
3
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
4
|
-
import { AtomicText } from '../atoms/AtomicText';
|
|
5
|
-
import { AtomicIcon } from '../atoms/AtomicIcon';
|
|
6
|
-
import { getListItemStyles } from './listitem/styles/listItemStyles';
|
|
7
|
-
export const ListItem = ({ title, subtitle, leftIcon, rightIcon = 'forward', onPress, disabled = false, style, }) => {
|
|
8
|
-
const tokens = useAppDesignTokens();
|
|
9
|
-
const listItemStyles = getListItemStyles(tokens);
|
|
10
|
-
const Component = onPress ? TouchableOpacity : View;
|
|
11
|
-
return (<Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
|
|
12
|
-
{leftIcon && (<View style={listItemStyles.iconContainer}>
|
|
13
|
-
<AtomicIcon name={leftIcon} color={disabled ? 'surfaceVariant' : 'primary'}/>
|
|
14
|
-
</View>)}
|
|
15
|
-
<View style={listItemStyles.content}>
|
|
16
|
-
<AtomicText type="bodyLarge" color={disabled ? 'surfaceVariant' : 'onSurface'} numberOfLines={1}>{title}</AtomicText>
|
|
17
|
-
{subtitle && <AtomicText type="bodySmall" color="surfaceVariant" numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
|
|
18
|
-
</View>
|
|
19
|
-
{rightIcon && onPress && (<View style={listItemStyles.iconContainer}>
|
|
20
|
-
<AtomicIcon name={rightIcon} color="surfaceVariant"/>
|
|
21
|
-
</View>)}
|
|
22
|
-
</Component>);
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=ListItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/presentation/molecules/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIrE,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,GACnF,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,cAAc,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjD,MAAM,SAAS,GAA6B,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9E,OAAO,CACL,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAC5J;MAAA,CAAC,QAAQ,IAAI,CACX,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,CACxC;UAAA,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7E;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAClC;QAAA,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,CACpH;QAAA,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAC5I;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,SAAS,IAAI,OAAO,IAAI,CACvB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,CACxC;UAAA,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,gBAAgB,EACrD;QAAA,EAAE,IAAI,CAAC,CACR,CACH;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ScreenHeader Component - {{APP_NAME}}
|
|
3
|
-
*
|
|
4
|
-
* Reusable screen header with consistent back button placement
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Features:
|
|
8
|
-
* - Top-left back button (arrow-back icon)
|
|
9
|
-
* - Centered title text
|
|
10
|
-
* - Optional right action button
|
|
11
|
-
* - Consistent spacing and layout
|
|
12
|
-
* - Works with all 100+ generated apps
|
|
13
|
-
*
|
|
14
|
-
* CRITICAL: Back button MUST ALWAYS be top-left (never bottom, never center)
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { ViewStyle } from 'react-native';
|
|
18
|
-
export interface ScreenHeaderProps {
|
|
19
|
-
/** Screen title (centered) */
|
|
20
|
-
title: string;
|
|
21
|
-
/** Optional right action button */
|
|
22
|
-
rightAction?: React.ReactNode;
|
|
23
|
-
/** Custom back button action (default: navigation.goBack()) */
|
|
24
|
-
onBackPress?: () => void;
|
|
25
|
-
/** Hide back button (rare cases only) */
|
|
26
|
-
hideBackButton?: boolean;
|
|
27
|
-
/** Additional header style */
|
|
28
|
-
style?: ViewStyle;
|
|
29
|
-
/** Test ID for E2E testing */
|
|
30
|
-
testID?: string;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* ScreenHeader Component
|
|
34
|
-
*
|
|
35
|
-
* @example
|
|
36
|
-
* // Basic usage (most common)
|
|
37
|
-
* <ScreenHeader title="Settings" />
|
|
38
|
-
*
|
|
39
|
-
* @example
|
|
40
|
-
* // With right action
|
|
41
|
-
* <ScreenHeader
|
|
42
|
-
* title="Edit Profile"
|
|
43
|
-
* rightAction={<TouchableOpacity onPress={handleSave}><Text>Save</Text></TouchableOpacity>}
|
|
44
|
-
* />
|
|
45
|
-
*
|
|
46
|
-
* @example
|
|
47
|
-
* // Custom back action
|
|
48
|
-
* <ScreenHeader
|
|
49
|
-
* title="Unsaved Changes"
|
|
50
|
-
* onBackPress={handleUnsavedChanges}
|
|
51
|
-
* />
|
|
52
|
-
*/
|
|
53
|
-
export declare const ScreenHeader: React.FC<ScreenHeaderProps>;
|
|
54
|
-
export default ScreenHeader;
|
|
55
|
-
//# sourceMappingURL=ScreenHeader.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenHeader.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/ScreenHeader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsC,SAAS,EAAE,MAAM,cAAc,CAAC;AAM7E,MAAM,WAAW,iBAAiB;IAChC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyEpD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ScreenHeader Component - {{APP_NAME}}
|
|
3
|
-
*
|
|
4
|
-
* Reusable screen header with consistent back button placement
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Features:
|
|
8
|
-
* - Top-left back button (arrow-back icon)
|
|
9
|
-
* - Centered title text
|
|
10
|
-
* - Optional right action button
|
|
11
|
-
* - Consistent spacing and layout
|
|
12
|
-
* - Works with all 100+ generated apps
|
|
13
|
-
*
|
|
14
|
-
* CRITICAL: Back button MUST ALWAYS be top-left (never bottom, never center)
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { View, TouchableOpacity } from 'react-native';
|
|
18
|
-
import { useNavigation } from '@react-navigation/native';
|
|
19
|
-
import { AtomicIcon } from '../atoms/AtomicIcon';
|
|
20
|
-
import { AtomicText } from '../atoms/AtomicText';
|
|
21
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
22
|
-
/**
|
|
23
|
-
* ScreenHeader Component
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* // Basic usage (most common)
|
|
27
|
-
* <ScreenHeader title="Settings" />
|
|
28
|
-
*
|
|
29
|
-
* @example
|
|
30
|
-
* // With right action
|
|
31
|
-
* <ScreenHeader
|
|
32
|
-
* title="Edit Profile"
|
|
33
|
-
* rightAction={<TouchableOpacity onPress={handleSave}><Text>Save</Text></TouchableOpacity>}
|
|
34
|
-
* />
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* // Custom back action
|
|
38
|
-
* <ScreenHeader
|
|
39
|
-
* title="Unsaved Changes"
|
|
40
|
-
* onBackPress={handleUnsavedChanges}
|
|
41
|
-
* />
|
|
42
|
-
*/
|
|
43
|
-
export const ScreenHeader = ({ title, rightAction, onBackPress, hideBackButton = false, style, testID = 'screen-header', }) => {
|
|
44
|
-
const navigation = useNavigation();
|
|
45
|
-
const tokens = useAppDesignTokens();
|
|
46
|
-
const handleBackPress = () => {
|
|
47
|
-
if (onBackPress) {
|
|
48
|
-
onBackPress();
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
navigation.goBack();
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
return (<View style={[
|
|
55
|
-
{
|
|
56
|
-
flexDirection: 'row',
|
|
57
|
-
alignItems: 'center',
|
|
58
|
-
justifyContent: 'space-between',
|
|
59
|
-
paddingHorizontal: tokens.spacing.screenPadding,
|
|
60
|
-
paddingVertical: tokens.spacing.md,
|
|
61
|
-
borderBottomWidth: 0.5,
|
|
62
|
-
backgroundColor: tokens.colors.backgroundPrimary,
|
|
63
|
-
borderBottomColor: tokens.colors.border,
|
|
64
|
-
},
|
|
65
|
-
style
|
|
66
|
-
]} testID={testID}>
|
|
67
|
-
{/* Left: Back Button (ALWAYS top-left when visible) */}
|
|
68
|
-
<View style={{ width: 40, alignItems: 'flex-start' }}>
|
|
69
|
-
{!hideBackButton && (<TouchableOpacity onPress={handleBackPress} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} testID={`${testID}-back-button`}>
|
|
70
|
-
<AtomicIcon name="arrow-back" color="primary"/>
|
|
71
|
-
</TouchableOpacity>)}
|
|
72
|
-
</View>
|
|
73
|
-
|
|
74
|
-
{/* Center: Title */}
|
|
75
|
-
<View style={{ flex: 1, alignItems: 'center', paddingHorizontal: tokens.spacing.sm }}>
|
|
76
|
-
<AtomicText type="headlineMedium" style={[
|
|
77
|
-
{
|
|
78
|
-
fontWeight: tokens.typography.bold,
|
|
79
|
-
textAlign: 'center',
|
|
80
|
-
color: tokens.colors.textPrimary,
|
|
81
|
-
}
|
|
82
|
-
]} numberOfLines={1} testID={`${testID}-title`}>
|
|
83
|
-
{title}
|
|
84
|
-
</AtomicText>
|
|
85
|
-
</View>
|
|
86
|
-
|
|
87
|
-
{/* Right: Optional Action or Placeholder */}
|
|
88
|
-
<View style={{ width: 40, alignItems: 'flex-start' }}>
|
|
89
|
-
{rightAction || <View style={{ width: 40 }}/>}
|
|
90
|
-
</View>
|
|
91
|
-
</View>);
|
|
92
|
-
};
|
|
93
|
-
export default ScreenHeader;
|
|
94
|
-
//# sourceMappingURL=ScreenHeader.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenHeader.js","sourceRoot":"","sources":["../../../src/presentation/molecules/ScreenHeader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAc,gBAAgB,EAAa,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAsBhE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,WAAW,EACX,WAAW,EACX,cAAc,GAAG,KAAK,EACtB,KAAK,EACL,MAAM,GAAG,eAAe,GACzB,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,EAAE,CAAC;QAChB,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,MAAM,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL;gBACE,aAAa,EAAE,KAAK;gBACpB,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,eAAe;gBAC/B,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,aAAa;gBAC/C,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;gBAClC,iBAAiB,EAAE,GAAG;gBACtB,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB;gBAChD,iBAAiB,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM;aACxC;YACD,KAAK;SACN,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,sDAAsD,CACvD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,CACnD;QAAA,CAAC,CAAC,cAAc,IAAI,CAClB,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,eAAe,CAAC,CACzB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACtD,MAAM,CAAC,CAAC,GAAG,MAAM,cAAc,CAAC,CAEhC;YAAA,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,EAC/C;UAAA,EAAE,gBAAgB,CAAC,CACpB,CACH;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,mBAAmB,CACpB;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CACnF;QAAA,CAAC,UAAU,CACT,IAAI,CAAC,gBAAgB,CACrB,KAAK,CAAC,CAAC;YACL;gBACE,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI;gBAClC,SAAS,EAAE,QAAQ;gBACnB,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW;aACjC;SACF,CAAC,CACF,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,MAAM,CAAC,CAAC,GAAG,MAAM,QAAQ,CAAC,CAE1B;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,UAAU,CACd;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,2CAA2C,CAC5C;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,CACnD;QAAA,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAG,CAChD;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SearchBar Molecule - Search Input with Icon and Clear Button
|
|
3
|
-
*
|
|
4
|
-
* Combines AtomicInput + AtomicIcon + AtomicButton
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: MOLECULE
|
|
8
|
-
* Composition: AtomicInput + AtomicIcon + TouchableOpacity
|
|
9
|
-
*/
|
|
10
|
-
import React from 'react';
|
|
11
|
-
import { ViewStyle } from 'react-native';
|
|
12
|
-
import { AtomicInputProps } from '../atoms/AtomicInput';
|
|
13
|
-
export interface SearchBarProps extends Omit<AtomicInputProps, 'leftIcon' | 'rightIcon'> {
|
|
14
|
-
onClear?: () => void;
|
|
15
|
-
containerStyle?: ViewStyle;
|
|
16
|
-
}
|
|
17
|
-
export declare const SearchBar: React.FC<SearchBarProps>;
|
|
18
|
-
//# sourceMappingURL=SearchBar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/SearchBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAe,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOrE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,CAAC;IACtF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoC9C,CAAC"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SearchBar Molecule - Search Input with Icon and Clear Button
|
|
3
|
-
*
|
|
4
|
-
* Combines AtomicInput + AtomicIcon + AtomicButton
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: MOLECULE
|
|
8
|
-
* Composition: AtomicInput + AtomicIcon + TouchableOpacity
|
|
9
|
-
*/
|
|
10
|
-
import React from 'react';
|
|
11
|
-
import { View } from 'react-native';
|
|
12
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
13
|
-
import { AtomicInput } from '../atoms/AtomicInput';
|
|
14
|
-
// =============================================================================
|
|
15
|
-
// COMPONENT IMPLEMENTATION
|
|
16
|
-
// =============================================================================
|
|
17
|
-
export const SearchBar = ({ value, onChangeText, onClear, placeholder = 'Search...', containerStyle, ...inputProps }) => {
|
|
18
|
-
const tokens = useAppDesignTokens();
|
|
19
|
-
const handleClear = () => {
|
|
20
|
-
if (onChangeText) {
|
|
21
|
-
onChangeText('');
|
|
22
|
-
}
|
|
23
|
-
if (onClear) {
|
|
24
|
-
onClear();
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
const styles = getStyles(tokens);
|
|
28
|
-
return (<View style={[styles.container, containerStyle]}>
|
|
29
|
-
<AtomicInput {...inputProps} value={value} onChangeText={onChangeText} placeholder={placeholder} variant="filled" style={styles.input} leadingIcon="Search" trailingIcon={value && value.length > 0 ? "X" : undefined} onTrailingIconPress={value && value.length > 0 ? handleClear : undefined}/>
|
|
30
|
-
</View>);
|
|
31
|
-
};
|
|
32
|
-
// =============================================================================
|
|
33
|
-
// STYLES
|
|
34
|
-
// =============================================================================
|
|
35
|
-
const getStyles = (tokens) => ({
|
|
36
|
-
container: {
|
|
37
|
-
width: '100%',
|
|
38
|
-
marginVertical: tokens.spacing.sm,
|
|
39
|
-
},
|
|
40
|
-
input: {
|
|
41
|
-
backgroundColor: tokens.colors.surfaceVariant,
|
|
42
|
-
},
|
|
43
|
-
});
|
|
44
|
-
// =============================================================================
|
|
45
|
-
// EXPORTS
|
|
46
|
-
// =============================================================================
|
|
47
|
-
//# sourceMappingURL=SearchBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../src/presentation/molecules/SearchBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAA+B,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAoB,MAAM,sBAAsB,CAAC;AAYrE,gFAAgF;AAChF,2BAA2B;AAC3B,gFAAgF;AAEhF,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,KAAK,EACL,YAAY,EACZ,OAAO,EACP,WAAW,GAAG,WAAW,EACzB,cAAc,EACd,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAEjC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAC9C;MAAA,CAAC,WAAW,CACV,IAAI,UAAU,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,QAAQ,CAChB,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,WAAW,CAAC,QAAQ,CACpB,YAAY,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1D,mBAAmB,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,EAE7E;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,SAAS;AACT,gFAAgF;AAEhF,MAAM,SAAS,GAAG,CAAC,MAA6C,EAAE,EAAE,CAAC,CAAC;IACpE,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;KACrB;IACd,KAAK,EAAE;QACL,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc;KACjC;CACf,CAAC,CAAC;AAEH,gFAAgF;AAChF,UAAU;AACV,gFAAgF"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SectionCard Molecule Component
|
|
3
|
-
*
|
|
4
|
-
* Reusable section card with title and content area.
|
|
5
|
-
* Used throughout settings screens for consistent grouping.
|
|
6
|
-
*
|
|
7
|
-
* Features:
|
|
8
|
-
* - Automatic theme-aware styling
|
|
9
|
-
* - Uppercase section titles with proper spacing
|
|
10
|
-
* - Built on AtomicCard for consistency
|
|
11
|
-
* - Flexible content area
|
|
12
|
-
*
|
|
13
|
-
* Atomic Design: Molecule (Card + Text)
|
|
14
|
-
*/
|
|
15
|
-
import React from 'react';
|
|
16
|
-
interface SectionCardProps {
|
|
17
|
-
title: string;
|
|
18
|
-
children: React.ReactNode;
|
|
19
|
-
style?: object;
|
|
20
|
-
contentStyle?: object;
|
|
21
|
-
testID?: string;
|
|
22
|
-
}
|
|
23
|
-
export declare const SectionCard: React.FC<SectionCardProps>;
|
|
24
|
-
export {};
|
|
25
|
-
//# sourceMappingURL=SectionCard.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SectionCard.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/SectionCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4BlD,CAAC"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SectionCard Molecule Component
|
|
3
|
-
*
|
|
4
|
-
* Reusable section card with title and content area.
|
|
5
|
-
* Used throughout settings screens for consistent grouping.
|
|
6
|
-
*
|
|
7
|
-
* Features:
|
|
8
|
-
* - Automatic theme-aware styling
|
|
9
|
-
* - Uppercase section titles with proper spacing
|
|
10
|
-
* - Built on AtomicCard for consistency
|
|
11
|
-
* - Flexible content area
|
|
12
|
-
*
|
|
13
|
-
* Atomic Design: Molecule (Card + Text)
|
|
14
|
-
*/
|
|
15
|
-
import React from 'react';
|
|
16
|
-
import { View, StyleSheet } from 'react-native';
|
|
17
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
18
|
-
import { AtomicCard } from '../atoms/AtomicCard';
|
|
19
|
-
import { AtomicText } from '../atoms/AtomicText';
|
|
20
|
-
export const SectionCard = ({ title, children, style, contentStyle, testID, }) => {
|
|
21
|
-
const tokens = useAppDesignTokens();
|
|
22
|
-
const styles = getStyles(tokens);
|
|
23
|
-
return (<AtomicCard variant="outlined" style={StyleSheet.flatten([styles.card, style])} testID={testID}>
|
|
24
|
-
<AtomicText type="labelLarge" color={tokens.colors.textSecondary} style={styles.title}>
|
|
25
|
-
{title.toUpperCase()}
|
|
26
|
-
</AtomicText>
|
|
27
|
-
<View style={contentStyle}>
|
|
28
|
-
{children}
|
|
29
|
-
</View>
|
|
30
|
-
</AtomicCard>);
|
|
31
|
-
};
|
|
32
|
-
const getStyles = (tokens) => StyleSheet.create({
|
|
33
|
-
card: {
|
|
34
|
-
paddingVertical: tokens.spacing.md,
|
|
35
|
-
paddingHorizontal: 0,
|
|
36
|
-
marginHorizontal: tokens.spacing.md,
|
|
37
|
-
marginBottom: tokens.spacing.lg,
|
|
38
|
-
},
|
|
39
|
-
title: {
|
|
40
|
-
fontSize: tokens.typography.labelLarge.fontSize,
|
|
41
|
-
fontWeight: tokens.typography.labelLarge.fontWeight,
|
|
42
|
-
letterSpacing: 0.5,
|
|
43
|
-
paddingHorizontal: tokens.spacing.md,
|
|
44
|
-
marginBottom: tokens.spacing.sm,
|
|
45
|
-
},
|
|
46
|
-
});
|
|
47
|
-
//# sourceMappingURL=SectionCard.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SectionCard.js","sourceRoot":"","sources":["../../../src/presentation/molecules/SectionCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUjD,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,MAAM,GACP,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAEjC,OAAO,CACL,CAAC,UAAU,CACT,OAAO,CAAC,UAAU,CAClB,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAChD,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,YAAY,CACjB,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CACnC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAEpB;QAAA,CAAC,KAAK,CAAC,WAAW,EAAE,CACtB;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACxB;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAA6C,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC;IACrF,IAAI,EAAE;QACJ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;QAClC,iBAAiB,EAAE,CAAC;QACpB,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;QACnC,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;KAChC;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,QAAQ;QAC/C,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,UAAU;QACnD,aAAa,EAAE,GAAG;QAClB,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;QACpC,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;KAChC;CACF,CAAC,CAAC"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SectionContainer Molecule - Universal Section Wrapper
|
|
3
|
-
*
|
|
4
|
-
* Provides consistent section layout with optional title
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: MOLECULE
|
|
8
|
-
* Composition: View + AtomicText + Layout
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Home screen sections
|
|
12
|
-
* - Dashboard sections
|
|
13
|
-
* - Settings groups
|
|
14
|
-
* - Content sections
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { ViewStyle, TextStyle } from 'react-native';
|
|
18
|
-
export interface SectionContainerProps {
|
|
19
|
-
/** Section title (optional) */
|
|
20
|
-
title?: string;
|
|
21
|
-
/** Section title color (default: textPrimary) */
|
|
22
|
-
titleColor?: string;
|
|
23
|
-
/** Section title style override */
|
|
24
|
-
titleStyle?: TextStyle;
|
|
25
|
-
/** Container style override */
|
|
26
|
-
style?: ViewStyle;
|
|
27
|
-
/** Content to render inside section */
|
|
28
|
-
children: React.ReactNode;
|
|
29
|
-
/** Right action element (e.g., "See All" link) */
|
|
30
|
-
rightAction?: React.ReactNode;
|
|
31
|
-
}
|
|
32
|
-
export declare const SectionContainer: React.FC<SectionContainerProps>;
|
|
33
|
-
//# sourceMappingURL=SectionContainer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SectionContainer.d.ts","sourceRoot":"","sources":["../../../src/presentation/molecules/SectionContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQtE,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAMD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+B5D,CAAC"}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SectionContainer Molecule - Universal Section Wrapper
|
|
3
|
-
*
|
|
4
|
-
* Provides consistent section layout with optional title
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: MOLECULE
|
|
8
|
-
* Composition: View + AtomicText + Layout
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Home screen sections
|
|
12
|
-
* - Dashboard sections
|
|
13
|
-
* - Settings groups
|
|
14
|
-
* - Content sections
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { View, StyleSheet } from 'react-native';
|
|
18
|
-
import { AtomicText } from '../atoms/AtomicText';
|
|
19
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
20
|
-
// =============================================================================
|
|
21
|
-
// COMPONENT IMPLEMENTATION
|
|
22
|
-
// =============================================================================
|
|
23
|
-
export const SectionContainer = ({ title, titleColor, titleStyle, style, children, rightAction, }) => {
|
|
24
|
-
const tokens = useAppDesignTokens();
|
|
25
|
-
const styles = getStyles(tokens);
|
|
26
|
-
return (<View style={[styles.section, style]}>
|
|
27
|
-
{title && (<View style={styles.header}>
|
|
28
|
-
<AtomicText type="titleLarge" color={titleColor || "primary"} style={StyleSheet.flatten([
|
|
29
|
-
styles.sectionTitle,
|
|
30
|
-
titleStyle,
|
|
31
|
-
])}>
|
|
32
|
-
{title}
|
|
33
|
-
</AtomicText>
|
|
34
|
-
{rightAction && <View style={styles.rightAction}>{rightAction}</View>}
|
|
35
|
-
</View>)}
|
|
36
|
-
{children}
|
|
37
|
-
</View>);
|
|
38
|
-
};
|
|
39
|
-
// =============================================================================
|
|
40
|
-
// STYLES
|
|
41
|
-
// =============================================================================
|
|
42
|
-
const getStyles = (tokens) => StyleSheet.create({
|
|
43
|
-
section: {
|
|
44
|
-
marginBottom: tokens.spacing.lg,
|
|
45
|
-
paddingHorizontal: tokens.spacing.md,
|
|
46
|
-
},
|
|
47
|
-
header: {
|
|
48
|
-
flexDirection: 'row',
|
|
49
|
-
justifyContent: 'space-between',
|
|
50
|
-
alignItems: 'center',
|
|
51
|
-
marginBottom: tokens.spacing.md,
|
|
52
|
-
},
|
|
53
|
-
sectionTitle: {
|
|
54
|
-
fontSize: tokens.typography.titleLarge.fontSize,
|
|
55
|
-
fontWeight: tokens.typography.titleLarge.fontWeight,
|
|
56
|
-
},
|
|
57
|
-
rightAction: {
|
|
58
|
-
marginLeft: tokens.spacing.sm,
|
|
59
|
-
},
|
|
60
|
-
});
|
|
61
|
-
// =============================================================================
|
|
62
|
-
// EXPORTS
|
|
63
|
-
// =============================================================================
|
|
64
|
-
//# sourceMappingURL=SectionContainer.js.map
|