@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,76 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* FormContainer Component
|
|
3
|
-
*
|
|
4
|
-
* A reusable container for forms with proper keyboard handling and responsive layout.
|
|
5
|
-
*
|
|
6
|
-
* Features:
|
|
7
|
-
* - Pure React Native implementation (no Paper dependency)
|
|
8
|
-
* - Universal keyboard handling (no platform-specific code)
|
|
9
|
-
* - ScrollView with automatic content padding
|
|
10
|
-
* - Safe area insets for bottom tab navigation overlap
|
|
11
|
-
* - Responsive max width for large screens (tablets)
|
|
12
|
-
* - Consistent vertical spacing between form elements
|
|
13
|
-
* - Theme-aware surface colors
|
|
14
|
-
* - Optimized performance with memoized styles
|
|
15
|
-
*
|
|
16
|
-
* Usage:
|
|
17
|
-
* ```tsx
|
|
18
|
-
* <FormContainer>
|
|
19
|
-
* <AtomicInput label="Name" value={name} onChangeText={setName} />
|
|
20
|
-
* <AtomicTextArea label="Description" value={desc} onChangeText={setDesc} />
|
|
21
|
-
* <AtomicButton variant="primary" onPress={handleSubmit}>
|
|
22
|
-
* Submit
|
|
23
|
-
* </AtomicButton>
|
|
24
|
-
* </FormContainer>
|
|
25
|
-
* ```
|
|
26
|
-
*
|
|
27
|
-
* Why This Component:
|
|
28
|
-
* - Prevents keyboard from covering input fields (universal solution)
|
|
29
|
-
* - Handles safe area (notch, bottom tabs) automatically
|
|
30
|
-
* - Consistent form layout across all 100+ generated apps
|
|
31
|
-
* - Responsive design for tablets (max 700px) and phones (full width)
|
|
32
|
-
* - Automatic vertical spacing between form elements (no manual marginBottom)
|
|
33
|
-
* - Reduces boilerplate in form screens
|
|
34
|
-
* - Universal code - no platform checks, works on iOS, Android, Web
|
|
35
|
-
*
|
|
36
|
-
* Technical Details:
|
|
37
|
-
* - Uses ScrollView with contentContainerStyle for keyboard handling
|
|
38
|
-
* - Pure React Native View for surface (lightweight)
|
|
39
|
-
* - Vertical spacing via Children.map() wrapping (universal compatibility)
|
|
40
|
-
* - Safe area insets from react-native-safe-area-context
|
|
41
|
-
* - Responsive values from useResponsive hook
|
|
42
|
-
*
|
|
43
|
-
* @module FormContainer
|
|
44
|
-
*/
|
|
45
|
-
import React from 'react';
|
|
46
|
-
import { StyleProp, ViewStyle } from 'react-native';
|
|
47
|
-
/**
|
|
48
|
-
* Props for FormContainer component
|
|
49
|
-
*/
|
|
50
|
-
export interface FormContainerProps {
|
|
51
|
-
/** Form content (inputs, buttons, etc.) */
|
|
52
|
-
children: React.ReactNode;
|
|
53
|
-
/** Container style override (for outer View) */
|
|
54
|
-
containerStyle?: StyleProp<ViewStyle>;
|
|
55
|
-
/** Content container style override (for ScrollView content) */
|
|
56
|
-
contentContainerStyle?: StyleProp<ViewStyle>;
|
|
57
|
-
/** Show vertical scroll indicator */
|
|
58
|
-
showsVerticalScrollIndicator?: boolean;
|
|
59
|
-
/** Optional test ID for E2E testing */
|
|
60
|
-
testID?: string;
|
|
61
|
-
/** Show surface border (default: true) */
|
|
62
|
-
showBorder?: boolean;
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* FormContainer - Universal form wrapper component
|
|
66
|
-
*
|
|
67
|
-
* Wraps forms with:
|
|
68
|
-
* - Pure React Native surface
|
|
69
|
-
* - Universal keyboard handling (no platform checks)
|
|
70
|
-
* - ScrollView for content overflow
|
|
71
|
-
* - Safe area insets (bottom tabs, notch)
|
|
72
|
-
* - Responsive max width (tablets)
|
|
73
|
-
* - Theme integration
|
|
74
|
-
*/
|
|
75
|
-
export declare const FormContainer: React.FC<FormContainerProps>;
|
|
76
|
-
//# sourceMappingURL=FormContainer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormContainer.d.ts","sourceRoot":"","sources":["../../../src/presentation/organisms/FormContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAIL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gDAAgD;IAChD,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,qCAAqC;IACrC,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6FtD,CAAC"}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* FormContainer Component
|
|
3
|
-
*
|
|
4
|
-
* A reusable container for forms with proper keyboard handling and responsive layout.
|
|
5
|
-
*
|
|
6
|
-
* Features:
|
|
7
|
-
* - Pure React Native implementation (no Paper dependency)
|
|
8
|
-
* - Universal keyboard handling (no platform-specific code)
|
|
9
|
-
* - ScrollView with automatic content padding
|
|
10
|
-
* - Safe area insets for bottom tab navigation overlap
|
|
11
|
-
* - Responsive max width for large screens (tablets)
|
|
12
|
-
* - Consistent vertical spacing between form elements
|
|
13
|
-
* - Theme-aware surface colors
|
|
14
|
-
* - Optimized performance with memoized styles
|
|
15
|
-
*
|
|
16
|
-
* Usage:
|
|
17
|
-
* ```tsx
|
|
18
|
-
* <FormContainer>
|
|
19
|
-
* <AtomicInput label="Name" value={name} onChangeText={setName} />
|
|
20
|
-
* <AtomicTextArea label="Description" value={desc} onChangeText={setDesc} />
|
|
21
|
-
* <AtomicButton variant="primary" onPress={handleSubmit}>
|
|
22
|
-
* Submit
|
|
23
|
-
* </AtomicButton>
|
|
24
|
-
* </FormContainer>
|
|
25
|
-
* ```
|
|
26
|
-
*
|
|
27
|
-
* Why This Component:
|
|
28
|
-
* - Prevents keyboard from covering input fields (universal solution)
|
|
29
|
-
* - Handles safe area (notch, bottom tabs) automatically
|
|
30
|
-
* - Consistent form layout across all 100+ generated apps
|
|
31
|
-
* - Responsive design for tablets (max 700px) and phones (full width)
|
|
32
|
-
* - Automatic vertical spacing between form elements (no manual marginBottom)
|
|
33
|
-
* - Reduces boilerplate in form screens
|
|
34
|
-
* - Universal code - no platform checks, works on iOS, Android, Web
|
|
35
|
-
*
|
|
36
|
-
* Technical Details:
|
|
37
|
-
* - Uses ScrollView with contentContainerStyle for keyboard handling
|
|
38
|
-
* - Pure React Native View for surface (lightweight)
|
|
39
|
-
* - Vertical spacing via Children.map() wrapping (universal compatibility)
|
|
40
|
-
* - Safe area insets from react-native-safe-area-context
|
|
41
|
-
* - Responsive values from useResponsive hook
|
|
42
|
-
*
|
|
43
|
-
* @module FormContainer
|
|
44
|
-
*/
|
|
45
|
-
import React, { useMemo, Children } from 'react';
|
|
46
|
-
import { ScrollView, StyleSheet, View, } from 'react-native';
|
|
47
|
-
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
48
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
49
|
-
import { useResponsive } from '../hooks/useResponsive';
|
|
50
|
-
/**
|
|
51
|
-
* FormContainer - Universal form wrapper component
|
|
52
|
-
*
|
|
53
|
-
* Wraps forms with:
|
|
54
|
-
* - Pure React Native surface
|
|
55
|
-
* - Universal keyboard handling (no platform checks)
|
|
56
|
-
* - ScrollView for content overflow
|
|
57
|
-
* - Safe area insets (bottom tabs, notch)
|
|
58
|
-
* - Responsive max width (tablets)
|
|
59
|
-
* - Theme integration
|
|
60
|
-
*/
|
|
61
|
-
export const FormContainer = ({ children, containerStyle, contentContainerStyle, showsVerticalScrollIndicator = false, testID, showBorder = true, }) => {
|
|
62
|
-
const tokens = useAppDesignTokens();
|
|
63
|
-
const insets = useSafeAreaInsets();
|
|
64
|
-
const { formContentWidth, formBottomPadding, formElementSpacing } = useResponsive();
|
|
65
|
-
// Memoize styles to prevent recreation on every render
|
|
66
|
-
// Only recreate when theme colors or responsive values change
|
|
67
|
-
const styles = useMemo(() => StyleSheet.create({
|
|
68
|
-
container: {
|
|
69
|
-
flex: 1,
|
|
70
|
-
backgroundColor: tokens.colors.backgroundPrimary,
|
|
71
|
-
},
|
|
72
|
-
surface: {
|
|
73
|
-
flex: 1,
|
|
74
|
-
backgroundColor: tokens.colors.surface,
|
|
75
|
-
borderWidth: showBorder ? 1 : 0,
|
|
76
|
-
borderColor: tokens.colors.border,
|
|
77
|
-
borderRadius: tokens.borders.radius.md,
|
|
78
|
-
},
|
|
79
|
-
scrollView: {
|
|
80
|
-
flex: 1,
|
|
81
|
-
},
|
|
82
|
-
contentContainer: {
|
|
83
|
-
flexGrow: 1,
|
|
84
|
-
padding: tokens.spacing.lg,
|
|
85
|
-
paddingTop: tokens.spacing.xl,
|
|
86
|
-
// Bottom padding: base + safe area insets for tab bar
|
|
87
|
-
paddingBottom: formBottomPadding + insets.bottom,
|
|
88
|
-
// Responsive max width (undefined for phones, 700px for tablets)
|
|
89
|
-
maxWidth: formContentWidth,
|
|
90
|
-
alignSelf: 'center',
|
|
91
|
-
width: '100%',
|
|
92
|
-
},
|
|
93
|
-
// Wrapper for each form element to add vertical spacing
|
|
94
|
-
// This is the universal replacement for CSS gap property
|
|
95
|
-
formElementWrapper: {
|
|
96
|
-
marginBottom: formElementSpacing,
|
|
97
|
-
},
|
|
98
|
-
}), [
|
|
99
|
-
tokens.colors.backgroundPrimary,
|
|
100
|
-
tokens.colors.surface,
|
|
101
|
-
tokens.colors.border,
|
|
102
|
-
tokens.borders.radius.md,
|
|
103
|
-
tokens.spacing.lg,
|
|
104
|
-
tokens.spacing.xl,
|
|
105
|
-
formBottomPadding,
|
|
106
|
-
formContentWidth,
|
|
107
|
-
formElementSpacing,
|
|
108
|
-
insets.bottom,
|
|
109
|
-
showBorder,
|
|
110
|
-
]);
|
|
111
|
-
// Wrap each child with spacing View (universal gap replacement)
|
|
112
|
-
// Children.map() handles arrays, fragments, single elements correctly
|
|
113
|
-
const childrenWithSpacing = useMemo(() => {
|
|
114
|
-
const childArray = Children.toArray(children);
|
|
115
|
-
return childArray.map((child, index) => (<View key={index} style={index < childArray.length - 1 ? styles.formElementWrapper : undefined}>
|
|
116
|
-
{child}
|
|
117
|
-
</View>));
|
|
118
|
-
}, [children, styles.formElementWrapper]);
|
|
119
|
-
return (<View style={[styles.container, containerStyle]} testID={testID}>
|
|
120
|
-
<View style={styles.surface}>
|
|
121
|
-
<ScrollView style={styles.scrollView} contentContainerStyle={[styles.contentContainer, contentContainerStyle]} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag" showsVerticalScrollIndicator={showsVerticalScrollIndicator} testID={testID ? `${testID}-scroll` : undefined}>
|
|
122
|
-
{childrenWithSpacing}
|
|
123
|
-
</ScrollView>
|
|
124
|
-
</View>
|
|
125
|
-
</View>);
|
|
126
|
-
};
|
|
127
|
-
//# sourceMappingURL=FormContainer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormContainer.js","sourceRoot":"","sources":["../../../src/presentation/organisms/FormContainer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ScreenLayout - Universal Screen Container Component
|
|
3
|
-
*
|
|
4
|
-
* Provides consistent layout structure for all screens:
|
|
5
|
-
* - SafeAreaView with configurable edges
|
|
6
|
-
* - Optional ScrollView for content
|
|
7
|
-
* - Theme-aware background colors
|
|
8
|
-
* - Optional header/footer slots
|
|
9
|
-
* - Consistent spacing and padding
|
|
10
|
-
*
|
|
11
|
-
* Usage:
|
|
12
|
-
* <ScreenLayout>
|
|
13
|
-
* <View>Your content here</View>
|
|
14
|
-
* </ScreenLayout>
|
|
15
|
-
*
|
|
16
|
-
* Advanced:
|
|
17
|
-
* <ScreenLayout
|
|
18
|
-
* scrollable={false}
|
|
19
|
-
* edges={['top', 'bottom']}
|
|
20
|
-
* header={<CustomHeader />}
|
|
21
|
-
* >
|
|
22
|
-
* <View>Content</View>
|
|
23
|
-
* </ScreenLayout>
|
|
24
|
-
*/
|
|
25
|
-
import React from 'react';
|
|
26
|
-
import { ViewStyle } from 'react-native';
|
|
27
|
-
import { Edge } from 'react-native-safe-area-context';
|
|
28
|
-
export interface ScreenLayoutProps {
|
|
29
|
-
/**
|
|
30
|
-
* Content to render inside the layout
|
|
31
|
-
*/
|
|
32
|
-
children: React.ReactNode;
|
|
33
|
-
/**
|
|
34
|
-
* Enable scrolling (default: true)
|
|
35
|
-
* Set to false for screens with custom scroll logic
|
|
36
|
-
*/
|
|
37
|
-
scrollable?: boolean;
|
|
38
|
-
/**
|
|
39
|
-
* Safe area edges to apply (default: ['top'])
|
|
40
|
-
* Common values:
|
|
41
|
-
* - ['top'] - For screens with bottom tabs
|
|
42
|
-
* - ['top', 'bottom'] - For modal screens
|
|
43
|
-
* - [] - No safe area (use cautiously)
|
|
44
|
-
*/
|
|
45
|
-
edges?: Edge[];
|
|
46
|
-
/**
|
|
47
|
-
* Optional header component
|
|
48
|
-
* Rendered above scrollable content
|
|
49
|
-
*/
|
|
50
|
-
header?: React.ReactNode;
|
|
51
|
-
/**
|
|
52
|
-
* Optional footer component
|
|
53
|
-
* Rendered below scrollable content
|
|
54
|
-
*/
|
|
55
|
-
footer?: React.ReactNode;
|
|
56
|
-
/**
|
|
57
|
-
* Override background color
|
|
58
|
-
* If not provided, uses theme's backgroundPrimary
|
|
59
|
-
*/
|
|
60
|
-
backgroundColor?: string;
|
|
61
|
-
/**
|
|
62
|
-
* Custom container style
|
|
63
|
-
*/
|
|
64
|
-
containerStyle?: ViewStyle;
|
|
65
|
-
/**
|
|
66
|
-
* Custom content container style (for ScrollView)
|
|
67
|
-
*/
|
|
68
|
-
contentContainerStyle?: ViewStyle;
|
|
69
|
-
/**
|
|
70
|
-
* Test ID for automation
|
|
71
|
-
*/
|
|
72
|
-
testID?: string;
|
|
73
|
-
/**
|
|
74
|
-
* Hide vertical scroll indicator (default: false)
|
|
75
|
-
*/
|
|
76
|
-
hideScrollIndicator?: boolean;
|
|
77
|
-
/**
|
|
78
|
-
* Enable keyboard avoiding behavior (default: false)
|
|
79
|
-
* Useful for screens with inputs
|
|
80
|
-
*/
|
|
81
|
-
keyboardAvoiding?: boolean;
|
|
82
|
-
}
|
|
83
|
-
export declare const ScreenLayout: React.FC<ScreenLayoutProps>;
|
|
84
|
-
//# sourceMappingURL=ScreenLayout.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenLayout.d.ts","sourceRoot":"","sources":["../../../src/presentation/organisms/ScreenLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAgC,SAAS,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EAAgB,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGpE,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAE3B;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAElC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAE5B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuDpD,CAAC"}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ScreenLayout - Universal Screen Container Component
|
|
3
|
-
*
|
|
4
|
-
* Provides consistent layout structure for all screens:
|
|
5
|
-
* - SafeAreaView with configurable edges
|
|
6
|
-
* - Optional ScrollView for content
|
|
7
|
-
* - Theme-aware background colors
|
|
8
|
-
* - Optional header/footer slots
|
|
9
|
-
* - Consistent spacing and padding
|
|
10
|
-
*
|
|
11
|
-
* Usage:
|
|
12
|
-
* <ScreenLayout>
|
|
13
|
-
* <View>Your content here</View>
|
|
14
|
-
* </ScreenLayout>
|
|
15
|
-
*
|
|
16
|
-
* Advanced:
|
|
17
|
-
* <ScreenLayout
|
|
18
|
-
* scrollable={false}
|
|
19
|
-
* edges={['top', 'bottom']}
|
|
20
|
-
* header={<CustomHeader />}
|
|
21
|
-
* >
|
|
22
|
-
* <View>Content</View>
|
|
23
|
-
* </ScreenLayout>
|
|
24
|
-
*/
|
|
25
|
-
import React, { useMemo } from 'react';
|
|
26
|
-
import { View, ScrollView, StyleSheet } from 'react-native';
|
|
27
|
-
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
28
|
-
import { useAppDesignTokens } from '@umituz/react-native-theme';
|
|
29
|
-
export const ScreenLayout = ({ children, scrollable = true, edges = ['top'], header, footer, backgroundColor, containerStyle, contentContainerStyle, testID, hideScrollIndicator = false, keyboardAvoiding = false, }) => {
|
|
30
|
-
// Automatically uses current theme from global store
|
|
31
|
-
const tokens = useAppDesignTokens();
|
|
32
|
-
const styles = useMemo(() => getStyles(tokens), [tokens]);
|
|
33
|
-
const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
|
|
34
|
-
// Non-scrollable layout
|
|
35
|
-
if (!scrollable) {
|
|
36
|
-
return (<SafeAreaView style={[styles.container, { backgroundColor: bgColor }, containerStyle]} edges={edges} testID={testID}>
|
|
37
|
-
{header}
|
|
38
|
-
<View style={[styles.content, contentContainerStyle]}>
|
|
39
|
-
{children}
|
|
40
|
-
</View>
|
|
41
|
-
{footer}
|
|
42
|
-
</SafeAreaView>);
|
|
43
|
-
}
|
|
44
|
-
// Scrollable layout (default)
|
|
45
|
-
return (<SafeAreaView style={[styles.container, { backgroundColor: bgColor }, containerStyle]} edges={edges} testID={testID}>
|
|
46
|
-
{header}
|
|
47
|
-
<ScrollView style={styles.scrollView} contentContainerStyle={[styles.scrollContent, contentContainerStyle]} showsVerticalScrollIndicator={!hideScrollIndicator} keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}>
|
|
48
|
-
{children}
|
|
49
|
-
</ScrollView>
|
|
50
|
-
{footer}
|
|
51
|
-
</SafeAreaView>);
|
|
52
|
-
};
|
|
53
|
-
const getStyles = (tokens) => StyleSheet.create({
|
|
54
|
-
container: {
|
|
55
|
-
flex: 1,
|
|
56
|
-
},
|
|
57
|
-
content: {
|
|
58
|
-
flex: 1,
|
|
59
|
-
},
|
|
60
|
-
scrollView: {
|
|
61
|
-
flex: 1,
|
|
62
|
-
},
|
|
63
|
-
scrollContent: {
|
|
64
|
-
flexGrow: 1,
|
|
65
|
-
paddingHorizontal: tokens.spacing.md,
|
|
66
|
-
paddingBottom: tokens.spacing.lg,
|
|
67
|
-
},
|
|
68
|
-
});
|
|
69
|
-
//# sourceMappingURL=ScreenLayout.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenLayout.js","sourceRoot":"","sources":["../../../src/presentation/organisms/ScreenLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAa,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,YAAY,EAAQ,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAqEhE,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,EACR,UAAU,GAAG,IAAI,EACjB,KAAK,GAAG,CAAC,KAAK,CAAC,EACf,MAAM,EACN,MAAM,EACN,eAAe,EACf,cAAc,EACd,qBAAqB,EACrB,MAAM,EACN,mBAAmB,GAAG,KAAK,EAC3B,gBAAgB,GAAG,KAAK,GACzB,EAAE,EAAE;IACH,qDAAqD;IACrD,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,eAAe,IAAI,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;IAEnE,wBAAwB;IACxB,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,CACL,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,cAAc,CAAC,CAAC,CACxE,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;QAAA,CAAC,MAAM,CACP;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC,CACnD;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,MAAM,CACT;MAAA,EAAE,YAAY,CAAC,CAChB,CAAC;IACJ,CAAC;IAED,8BAA8B;IAC9B,OAAO,CACL,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,cAAc,CAAC,CAAC,CACxE,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,UAAU,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACzB,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,qBAAqB,CAAC,CAAC,CACrE,4BAA4B,CAAC,CAAC,CAAC,mBAAmB,CAAC,CACnD,yBAAyB,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAElE;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,YAAY,CAAC,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAA6C,EAAE,EAAE,CAClE,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;KACR;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;KACR;IACD,UAAU,EAAE;QACV,IAAI,EAAE,CAAC;KACR;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,CAAC;QACX,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;QACpC,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,EAAE;KACjC;CACF,CAAC,CAAC"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Organism Components Export Index
|
|
3
|
-
*
|
|
4
|
-
* Organisms are complex components composed of molecules and atoms
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ORGANISMS
|
|
8
|
-
*/
|
|
9
|
-
export { AppHeader } from './AppHeader';
|
|
10
|
-
export { ScreenLayout } from './ScreenLayout';
|
|
11
|
-
export type { AppHeaderProps } from './AppHeader';
|
|
12
|
-
export type { ScreenLayoutProps } from './ScreenLayout';
|
|
13
|
-
import type { AppHeaderProps } from './AppHeader';
|
|
14
|
-
import type { ScreenLayoutProps } from './ScreenLayout';
|
|
15
|
-
export type OrganismComponentProps = AppHeaderProps | ScreenLayoutProps;
|
|
16
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/presentation/organisms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG,iBAAiB,CAAC"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Organism Components Export Index
|
|
3
|
-
*
|
|
4
|
-
* Organisms are complex components composed of molecules and atoms
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ORGANISMS
|
|
8
|
-
*/
|
|
9
|
-
// Component exports
|
|
10
|
-
// AppHeader - Main application header with navigation
|
|
11
|
-
export { AppHeader } from './AppHeader';
|
|
12
|
-
// ScreenLayout - Universal screen container with consistent layout
|
|
13
|
-
export { ScreenLayout } from './ScreenLayout';
|
|
14
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/presentation/organisms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,oBAAoB;AACpB,sDAAsD;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,mEAAmE;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -1,122 +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 { ViewStyle, TextStyle } from 'react-native';
|
|
18
|
-
/**
|
|
19
|
-
* Hook to get common styles with dynamic theme support
|
|
20
|
-
*/
|
|
21
|
-
export declare const useCommonStyles: () => {
|
|
22
|
-
/**
|
|
23
|
-
* Standard full-screen container
|
|
24
|
-
* Most common pattern: flex: 1 with background color
|
|
25
|
-
*/
|
|
26
|
-
screenContainer: ViewStyle;
|
|
27
|
-
/**
|
|
28
|
-
* Basic flex container without background
|
|
29
|
-
* Use when background is set elsewhere or not needed
|
|
30
|
-
*/
|
|
31
|
-
flexContainer: ViewStyle;
|
|
32
|
-
/**
|
|
33
|
-
* Screen container with secondary background
|
|
34
|
-
*/
|
|
35
|
-
screenContainerSecondary: ViewStyle;
|
|
36
|
-
/**
|
|
37
|
-
* Standard ScrollView wrapper
|
|
38
|
-
*/
|
|
39
|
-
scrollView: ViewStyle;
|
|
40
|
-
/**
|
|
41
|
-
* ScrollView content container with standard padding
|
|
42
|
-
*/
|
|
43
|
-
scrollContent: ViewStyle;
|
|
44
|
-
/**
|
|
45
|
-
* ScrollView content that grows to fill available space
|
|
46
|
-
*/
|
|
47
|
-
scrollContentGrow: ViewStyle;
|
|
48
|
-
/**
|
|
49
|
-
* Centered scroll content (for forms, onboarding screens)
|
|
50
|
-
*/
|
|
51
|
-
scrollContentCentered: ViewStyle;
|
|
52
|
-
/**
|
|
53
|
-
* Centered container - both horizontal and vertical
|
|
54
|
-
* Perfect for empty states, splash screens
|
|
55
|
-
*/
|
|
56
|
-
centerContainer: ViewStyle;
|
|
57
|
-
/**
|
|
58
|
-
* Centered container with padding
|
|
59
|
-
*/
|
|
60
|
-
centerContainerPadded: ViewStyle;
|
|
61
|
-
/**
|
|
62
|
-
* Horizontal row layout
|
|
63
|
-
*/
|
|
64
|
-
row: ViewStyle;
|
|
65
|
-
/**
|
|
66
|
-
* Horizontal row with space between
|
|
67
|
-
*/
|
|
68
|
-
rowBetween: ViewStyle;
|
|
69
|
-
/**
|
|
70
|
-
* Horizontal row centered
|
|
71
|
-
*/
|
|
72
|
-
rowCenter: ViewStyle;
|
|
73
|
-
/**
|
|
74
|
-
* Standard horizontal padding
|
|
75
|
-
*/
|
|
76
|
-
paddedHorizontal: ViewStyle;
|
|
77
|
-
/**
|
|
78
|
-
* Standard vertical padding
|
|
79
|
-
*/
|
|
80
|
-
paddedVertical: ViewStyle;
|
|
81
|
-
/**
|
|
82
|
-
* Standard padding all sides
|
|
83
|
-
*/
|
|
84
|
-
padded: ViewStyle;
|
|
85
|
-
/**
|
|
86
|
-
* Standard section container
|
|
87
|
-
*/
|
|
88
|
-
section: ViewStyle;
|
|
89
|
-
/**
|
|
90
|
-
* Section with padding
|
|
91
|
-
*/
|
|
92
|
-
sectionPadded: ViewStyle;
|
|
93
|
-
/**
|
|
94
|
-
* Screen title - primary heading
|
|
95
|
-
*/
|
|
96
|
-
screenTitle: TextStyle;
|
|
97
|
-
/**
|
|
98
|
-
* Section title
|
|
99
|
-
*/
|
|
100
|
-
sectionTitle: TextStyle;
|
|
101
|
-
/**
|
|
102
|
-
* Subtitle/description text
|
|
103
|
-
*/
|
|
104
|
-
subtitle: TextStyle;
|
|
105
|
-
/**
|
|
106
|
-
* Body text
|
|
107
|
-
*/
|
|
108
|
-
bodyText: TextStyle;
|
|
109
|
-
/**
|
|
110
|
-
* Secondary text (muted)
|
|
111
|
-
*/
|
|
112
|
-
secondaryText: TextStyle;
|
|
113
|
-
/**
|
|
114
|
-
* Form container
|
|
115
|
-
*/
|
|
116
|
-
form: ViewStyle;
|
|
117
|
-
/**
|
|
118
|
-
* Form header section
|
|
119
|
-
*/
|
|
120
|
-
formHeader: ViewStyle;
|
|
121
|
-
};
|
|
122
|
-
//# sourceMappingURL=commonStyles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../../src/presentation/tokens/commonStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpD;;GAEG;AACH,eAAO,MAAM,eAAe;IAQxB;;;OAGG;qBAIE,SAAS;IAEd;;;OAGG;mBAGE,SAAS;IAEd;;OAEG;8BAIE,SAAS;IAMd;;OAEG;gBAGE,SAAS;IAEd;;OAEG;mBAIE,SAAS;IAEd;;OAEG;uBAIE,SAAS;IAEd;;OAEG;2BAKE,SAAS;IAMd;;;OAGG;qBAKE,SAAS;IAEd;;OAEG;2BAME,SAAS;IAEd;;OAEG;SAIE,SAAS;IAEd;;OAEG;gBAKE,SAAS;IAEd;;OAEG;eAKE,SAAS;IAMd;;OAEG;sBAGE,SAAS;IAEd;;OAEG;oBAGE,SAAS;IAEd;;OAEG;YAGE,SAAS;IAMd;;OAEG;aAGE,SAAS;IAEd;;OAEG;mBAIE,SAAS;IAMd;;OAEG;iBAKE,SAAS;IAEd;;OAEG;kBAKE,SAAS;IAEd;;OAEG;cAKE,SAAS;IAEd;;OAEG;cAIE,SAAS;IAEd;;OAEG;mBAIE,SAAS;IAMd;;OAEG;UAGE,SAAS;IAEd;;OAEG;gBAIE,SAAS;CAEjB,CAAC"}
|