@umituz/react-native-design-system 1.7.1 → 1.7.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 +61 -35
- package/src/index.ts +72 -272
- package/lib/index.d.ts +0 -59
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js +0 -99
- 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/useAppDesignTokens.d.ts +0 -13
- package/lib/presentation/hooks/useAppDesignTokens.d.ts.map +0 -1
- package/lib/presentation/hooks/useAppDesignTokens.js +0 -13
- package/lib/presentation/hooks/useAppDesignTokens.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 -220
- 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/useAppDesignTokens.ts +0 -13
- 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
package/lib/index.js
DELETED
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @umituz/react-native-design-system - Public API
|
|
3
|
-
*
|
|
4
|
-
* Universal UI component library for React Native apps
|
|
5
|
-
* Domain-Driven Design (DDD) Architecture
|
|
6
|
-
*
|
|
7
|
-
* This is the SINGLE SOURCE OF TRUTH for all UI components.
|
|
8
|
-
* ALL imports from the design system MUST go through this file.
|
|
9
|
-
*
|
|
10
|
-
* Architecture:
|
|
11
|
-
* - presentation/atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
|
|
12
|
-
* - presentation/molecules: Composite components (SearchBar, ListItem, etc.)
|
|
13
|
-
* - presentation/organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
|
|
14
|
-
* - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
|
|
15
|
-
* - presentation/utils: Utility functions and helpers
|
|
16
|
-
*
|
|
17
|
-
* Usage:
|
|
18
|
-
* import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, STATIC_TOKENS } from '@umituz/react-native-design-system';
|
|
19
|
-
*/
|
|
20
|
-
// =============================================================================
|
|
21
|
-
// ATOMS - Primitive UI Components
|
|
22
|
-
// =============================================================================
|
|
23
|
-
export { AtomicButton, } from './presentation/atoms/AtomicButton';
|
|
24
|
-
export { AtomicText, } from './presentation/atoms/AtomicText';
|
|
25
|
-
export { AtomicCard, } from './presentation/atoms/AtomicCard';
|
|
26
|
-
export { AtomicInput, } from './presentation/atoms/AtomicInput';
|
|
27
|
-
export { AtomicNumberInput, } from './presentation/atoms/AtomicNumberInput';
|
|
28
|
-
export { AtomicSwitch, } from './presentation/atoms/AtomicSwitch';
|
|
29
|
-
export { AtomicIcon, } from './presentation/atoms/AtomicIcon';
|
|
30
|
-
export { AtomicFormError, } from './presentation/atoms/AtomicFormError';
|
|
31
|
-
export { AtomicDatePicker, } from './presentation/atoms/AtomicDatePicker';
|
|
32
|
-
export { AtomicPicker, } from './presentation/atoms/AtomicPicker';
|
|
33
|
-
export { AtomicTextArea, } from './presentation/atoms/AtomicTextArea';
|
|
34
|
-
export { AtomicBadge, } from './presentation/atoms/AtomicBadge';
|
|
35
|
-
export { AtomicProgress, } from './presentation/atoms/AtomicProgress';
|
|
36
|
-
export { AtomicDivider, } from './presentation/atoms/AtomicDivider';
|
|
37
|
-
export { AtomicFab, getFabVariants, } from './presentation/atoms/AtomicFab';
|
|
38
|
-
export { AtomicFilter, getFilterContainerStyle, getClearAllContainerStyle, getScrollContentContainerStyle, } from './presentation/atoms/AtomicFilter';
|
|
39
|
-
export { AtomicTouchable, TouchablePresets, getOpacityValue, normalizeHitSlop, } from './presentation/atoms/AtomicTouchable';
|
|
40
|
-
export { AtomicSearchBar, } from './presentation/atoms/AtomicSearchBar';
|
|
41
|
-
export { AtomicSort, } from './presentation/atoms/AtomicSort';
|
|
42
|
-
// =============================================================================
|
|
43
|
-
// MOLECULES - Composite Components
|
|
44
|
-
// =============================================================================
|
|
45
|
-
export { FormField, } from './presentation/molecules/FormField';
|
|
46
|
-
export { ListItem, } from './presentation/molecules/ListItem';
|
|
47
|
-
export { SearchBar, } from './presentation/molecules/SearchBar';
|
|
48
|
-
// SettingItem moved to @domains/settings/presentation/components/SettingItem
|
|
49
|
-
// LanguageSwitcher moved to @umituz/react-native-localization
|
|
50
|
-
// Import directly: import { SettingItem } from '@domains/settings/presentation/components/SettingItem';
|
|
51
|
-
export { SectionCard, } from './presentation/molecules/SectionCard';
|
|
52
|
-
export { IconContainer, } from './presentation/molecules/IconContainer';
|
|
53
|
-
export { SectionHeader, } from './presentation/molecules/SectionHeader';
|
|
54
|
-
export { EmptyState, } from './presentation/molecules/EmptyState';
|
|
55
|
-
export { GridContainer, } from './presentation/molecules/GridContainer';
|
|
56
|
-
export { SectionContainer, } from './presentation/molecules/SectionContainer';
|
|
57
|
-
export { ScreenHeader, } from './presentation/molecules/ScreenHeader';
|
|
58
|
-
export { AtomicConfirmationModal, useConfirmationModal, } from './presentation/molecules/AtomicConfirmationModal';
|
|
59
|
-
// =============================================================================
|
|
60
|
-
// ORGANISMS - Complex Patterns
|
|
61
|
-
// =============================================================================
|
|
62
|
-
export { ScreenLayout, } from './presentation/organisms/ScreenLayout';
|
|
63
|
-
export { AppHeader, } from './presentation/organisms/AppHeader';
|
|
64
|
-
export { FormContainer, } from './presentation/organisms/FormContainer';
|
|
65
|
-
// Note: FeedbackModal moved to @domains/feedback
|
|
66
|
-
// Import from feedback domain: import { FeedbackModal } from '@domains/feedback';
|
|
67
|
-
// =============================================================================
|
|
68
|
-
// TOKENS - MOVED TO @umituz/react-native-theme
|
|
69
|
-
// =============================================================================
|
|
70
|
-
// All design tokens (BASE_TOKENS, STATIC_TOKENS, spacing, typography, etc.)
|
|
71
|
-
// have been moved to @umituz/react-native-theme package.
|
|
72
|
-
// Import directly from theme package:
|
|
73
|
-
// import { BASE_TOKENS, STATIC_TOKENS, spacing, typography } from '@umituz/react-native-theme';
|
|
74
|
-
// import { useAppDesignTokens, createDesignTokens, lightColors, darkColors } from '@umituz/react-native-theme';
|
|
75
|
-
// Re-export for backward compatibility (deprecated - use @umituz/react-native-theme directly)
|
|
76
|
-
export { BASE_TOKENS, STATIC_TOKENS, spacing, typography, borders, iconSizes, opacity, avatarSizes, sizes, createDesignTokens, STATIC_DESIGN_TOKENS, withAlpha, lightColors, darkColors, getColorPalette, useAppDesignTokens, } from '@umituz/react-native-theme';
|
|
77
|
-
export { useCommonStyles, } from './presentation/tokens/commonStyles';
|
|
78
|
-
// =============================================================================
|
|
79
|
-
// UTILITIES - Helper Functions
|
|
80
|
-
// =============================================================================
|
|
81
|
-
export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, } from './presentation/utils/platformConstants';
|
|
82
|
-
// =============================================================================
|
|
83
|
-
// RESPONSIVE UTILITIES - Centralized Responsive Management
|
|
84
|
-
// =============================================================================
|
|
85
|
-
export { useResponsive, useResponsiveSizes, useDeviceType, } from './presentation/hooks/useResponsive';
|
|
86
|
-
export { getScreenDimensions, isSmallPhone, isTablet, getResponsiveLogoSize, getResponsiveInputHeight, getResponsiveHorizontalPadding, getResponsiveBottomPosition, getResponsiveFABPosition, getResponsiveModalMaxHeight, getResponsiveMinModalHeight, getResponsiveIconContainerSize, getResponsiveGridColumns, getResponsiveMaxWidth, getResponsiveFontSize, isLandscape, getKeyboardBehavior, getDeviceType, getMinTouchTargetSize, getSpacingMultiplier, getOnboardingIconMarginTop, getOnboardingIconMarginBottom, getOnboardingTitleMarginBottom, getOnboardingTextPadding, getOnboardingDescriptionMarginTop, DeviceType, } from './presentation/utils/responsive';
|
|
87
|
-
// =============================================================================
|
|
88
|
-
// THEME MANAGEMENT - MOVED TO @umituz/react-native-theme
|
|
89
|
-
// =============================================================================
|
|
90
|
-
// useDesignSystemTheme has been moved to @umituz/react-native-theme package.
|
|
91
|
-
// Import directly: import { useDesignSystemTheme } from '@umituz/react-native-theme';
|
|
92
|
-
// =============================================================================
|
|
93
|
-
// ICONS DOMAIN - MOVED TO @umituz/react-native-icon
|
|
94
|
-
// =============================================================================
|
|
95
|
-
// Icon components have been moved to @umituz/react-native-icon package.
|
|
96
|
-
// Import directly: import { Icon, IconName, IconSize, IconColor } from '@umituz/react-native-icon';
|
|
97
|
-
// Re-export for backward compatibility (deprecated - use @umituz/react-native-icon directly)
|
|
98
|
-
export { Icon, } from '@umituz/react-native-icon';
|
|
99
|
-
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicAvatar - Universal Avatar Component
|
|
3
|
-
*
|
|
4
|
-
* Displays user profile images with fallback to initials
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: User profile image display
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - User profile pictures
|
|
12
|
-
* - Contact avatars
|
|
13
|
-
* - Group member avatars
|
|
14
|
-
* - Default user placeholders
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { ViewStyle, ImageStyle } from 'react-native';
|
|
18
|
-
export interface AtomicAvatarProps {
|
|
19
|
-
/** Image source (URI or require) */
|
|
20
|
-
source?: {
|
|
21
|
-
uri: string;
|
|
22
|
-
} | number;
|
|
23
|
-
/** User's name for fallback initials */
|
|
24
|
-
name?: string;
|
|
25
|
-
/** Size of the avatar */
|
|
26
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
27
|
-
/** Custom size in pixels */
|
|
28
|
-
customSize?: number;
|
|
29
|
-
/** Background color for fallback */
|
|
30
|
-
backgroundColor?: string;
|
|
31
|
-
/** Text color for initials */
|
|
32
|
-
textColor?: string;
|
|
33
|
-
/** Border radius (default: circular) */
|
|
34
|
-
borderRadius?: number;
|
|
35
|
-
/** Border width */
|
|
36
|
-
borderWidth?: number;
|
|
37
|
-
/** Border color */
|
|
38
|
-
borderColor?: string;
|
|
39
|
-
/** Style overrides */
|
|
40
|
-
style?: ViewStyle | ViewStyle[];
|
|
41
|
-
/** Image style overrides */
|
|
42
|
-
imageStyle?: ImageStyle | ImageStyle[];
|
|
43
|
-
/** Test ID for testing */
|
|
44
|
-
testID?: string;
|
|
45
|
-
}
|
|
46
|
-
export declare const AtomicAvatar: React.FC<AtomicAvatarProps>;
|
|
47
|
-
export default AtomicAvatar;
|
|
48
|
-
//# sourceMappingURL=AtomicAvatar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicAvatar.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicAvatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AASvE,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;IAClC,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACvC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6FpD,CAAC;AAMF,eAAe,YAAY,CAAC"}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicAvatar - Universal Avatar Component
|
|
3
|
-
*
|
|
4
|
-
* Displays user profile images with fallback to initials
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: User profile image display
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - User profile pictures
|
|
12
|
-
* - Contact avatars
|
|
13
|
-
* - Group member avatars
|
|
14
|
-
* - Default user placeholders
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { View, StyleSheet } from 'react-native';
|
|
18
|
-
import { AtomicImage } from './AtomicImage';
|
|
19
|
-
import { AtomicText } from './AtomicText';
|
|
20
|
-
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
21
|
-
// =============================================================================
|
|
22
|
-
// COMPONENT IMPLEMENTATION
|
|
23
|
-
// =============================================================================
|
|
24
|
-
export const AtomicAvatar = ({ source, name, size = 'md', customSize, backgroundColor, textColor, borderRadius, borderWidth = 0, borderColor, style, imageStyle, testID, }) => {
|
|
25
|
-
const tokens = useAppDesignTokens();
|
|
26
|
-
const avatarSize = customSize || tokens.avatarSizes[size];
|
|
27
|
-
const avatarRadius = borderRadius ?? avatarSize / 2;
|
|
28
|
-
// Generate initials from name
|
|
29
|
-
const getInitials = (name) => {
|
|
30
|
-
return name
|
|
31
|
-
.split(' ')
|
|
32
|
-
.map(word => word.charAt(0))
|
|
33
|
-
.join('')
|
|
34
|
-
.toUpperCase()
|
|
35
|
-
.slice(0, 2);
|
|
36
|
-
};
|
|
37
|
-
// Default colors
|
|
38
|
-
const defaultBackgroundColor = backgroundColor || tokens.colors.primary;
|
|
39
|
-
const defaultTextColor = textColor || tokens.colors.onPrimary;
|
|
40
|
-
const defaultBorderColor = borderColor || tokens.colors.border;
|
|
41
|
-
const avatarStyle = {
|
|
42
|
-
width: avatarSize,
|
|
43
|
-
height: avatarSize,
|
|
44
|
-
borderRadius: avatarRadius,
|
|
45
|
-
backgroundColor: defaultBackgroundColor,
|
|
46
|
-
borderWidth,
|
|
47
|
-
borderColor: defaultBorderColor,
|
|
48
|
-
alignItems: 'center',
|
|
49
|
-
justifyContent: 'center',
|
|
50
|
-
overflow: 'hidden',
|
|
51
|
-
};
|
|
52
|
-
const imageStyleFinal = {
|
|
53
|
-
width: avatarSize,
|
|
54
|
-
height: avatarSize,
|
|
55
|
-
borderRadius: avatarRadius,
|
|
56
|
-
};
|
|
57
|
-
// Font size based on avatar size
|
|
58
|
-
const getFontSize = (size) => {
|
|
59
|
-
if (size <= 32)
|
|
60
|
-
return 12;
|
|
61
|
-
if (size <= 48)
|
|
62
|
-
return 16;
|
|
63
|
-
if (size <= 64)
|
|
64
|
-
return 20;
|
|
65
|
-
return 24;
|
|
66
|
-
};
|
|
67
|
-
return (<View style={[avatarStyle, style]} testID={testID}>
|
|
68
|
-
{source ? (<AtomicImage source={source} style={StyleSheet.flatten([imageStyleFinal, imageStyle])} resizeMode="cover"/>) : name ? (<AtomicText type="labelLarge" color={defaultTextColor} style={{
|
|
69
|
-
fontSize: getFontSize(avatarSize),
|
|
70
|
-
fontWeight: tokens.typography.semibold,
|
|
71
|
-
}}>
|
|
72
|
-
{getInitials(name)}
|
|
73
|
-
</AtomicText>) : (<AtomicText type="labelLarge" color={defaultTextColor} style={{
|
|
74
|
-
fontSize: getFontSize(avatarSize),
|
|
75
|
-
fontWeight: tokens.typography.semibold,
|
|
76
|
-
}}>
|
|
77
|
-
?
|
|
78
|
-
</AtomicText>)}
|
|
79
|
-
</View>);
|
|
80
|
-
};
|
|
81
|
-
// =============================================================================
|
|
82
|
-
// EXPORTS
|
|
83
|
-
// =============================================================================
|
|
84
|
-
export default AtomicAvatar;
|
|
85
|
-
//# sourceMappingURL=AtomicAvatar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicAvatar.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicAvatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicAvatarGroup - Universal Avatar Group Component
|
|
3
|
-
*
|
|
4
|
-
* Displays multiple avatars in a group with overlap and overflow handling
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: Multiple avatar display with group behavior
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Team member avatars
|
|
12
|
-
* - Group chat participants
|
|
13
|
-
* - Project collaborators
|
|
14
|
-
* - Event attendees
|
|
15
|
-
* - Social connections
|
|
16
|
-
*/
|
|
17
|
-
import React from 'react';
|
|
18
|
-
import { ViewStyle } from 'react-native';
|
|
19
|
-
export interface AvatarData {
|
|
20
|
-
id: string;
|
|
21
|
-
source?: {
|
|
22
|
-
uri: string;
|
|
23
|
-
} | number;
|
|
24
|
-
name?: string;
|
|
25
|
-
backgroundColor?: string;
|
|
26
|
-
textColor?: string;
|
|
27
|
-
}
|
|
28
|
-
export interface AtomicAvatarGroupProps {
|
|
29
|
-
/** Array of avatar data */
|
|
30
|
-
avatars: AvatarData[];
|
|
31
|
-
/** Maximum number of avatars to show */
|
|
32
|
-
maxVisible?: number;
|
|
33
|
-
/** Avatar size */
|
|
34
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
35
|
-
/** Custom avatar size */
|
|
36
|
-
customSize?: number;
|
|
37
|
-
/** Spacing between avatars */
|
|
38
|
-
spacing?: number;
|
|
39
|
-
/** Whether to show overflow count */
|
|
40
|
-
showOverflow?: boolean;
|
|
41
|
-
/** Overflow count background color */
|
|
42
|
-
overflowBackgroundColor?: string;
|
|
43
|
-
/** Overflow count text color */
|
|
44
|
-
overflowTextColor?: string;
|
|
45
|
-
/** Avatar border width */
|
|
46
|
-
borderWidth?: number;
|
|
47
|
-
/** Avatar border color */
|
|
48
|
-
borderColor?: string;
|
|
49
|
-
/** Style overrides */
|
|
50
|
-
style?: ViewStyle;
|
|
51
|
-
/** Test ID for testing */
|
|
52
|
-
testID?: string;
|
|
53
|
-
}
|
|
54
|
-
export declare const AtomicAvatarGroup: React.FC<AtomicAvatarGroupProps>;
|
|
55
|
-
export default AtomicAvatarGroup;
|
|
56
|
-
//# sourceMappingURL=AtomicAvatarGroup.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicAvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicAvatarGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAS3D,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,MAAM,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgG9D,CAAC;AAMF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicAvatarGroup - Universal Avatar Group Component
|
|
3
|
-
*
|
|
4
|
-
* Displays multiple avatars in a group with overlap and overflow handling
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: Multiple avatar display with group behavior
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Team member avatars
|
|
12
|
-
* - Group chat participants
|
|
13
|
-
* - Project collaborators
|
|
14
|
-
* - Event attendees
|
|
15
|
-
* - Social connections
|
|
16
|
-
*/
|
|
17
|
-
import React from 'react';
|
|
18
|
-
import { View } from 'react-native';
|
|
19
|
-
import { AtomicAvatar } from './AtomicAvatar';
|
|
20
|
-
import { AtomicText } from './AtomicText';
|
|
21
|
-
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
22
|
-
// =============================================================================
|
|
23
|
-
// COMPONENT IMPLEMENTATION
|
|
24
|
-
// =============================================================================
|
|
25
|
-
export const AtomicAvatarGroup = ({ avatars, maxVisible = 3, size = 'md', customSize, spacing = -8, showOverflow = true, overflowBackgroundColor, overflowTextColor, borderWidth = 2, borderColor, style, testID, }) => {
|
|
26
|
-
const tokens = useAppDesignTokens();
|
|
27
|
-
// Calculate visible avatars and overflow count
|
|
28
|
-
const visibleAvatars = avatars.slice(0, maxVisible);
|
|
29
|
-
const overflowCount = avatars.length - maxVisible;
|
|
30
|
-
// Size mapping for overflow text
|
|
31
|
-
const sizeMap = {
|
|
32
|
-
xs: 10,
|
|
33
|
-
sm: 12,
|
|
34
|
-
md: 14,
|
|
35
|
-
lg: 16,
|
|
36
|
-
xl: 18,
|
|
37
|
-
xxl: 20,
|
|
38
|
-
};
|
|
39
|
-
const textSize = sizeMap[size];
|
|
40
|
-
// Default colors for overflow
|
|
41
|
-
const defaultOverflowBackground = overflowBackgroundColor || tokens.colors.surfaceVariant;
|
|
42
|
-
const defaultOverflowText = overflowTextColor || tokens.colors.textPrimary;
|
|
43
|
-
const containerStyle = {
|
|
44
|
-
flexDirection: 'row',
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
};
|
|
47
|
-
const avatarStyle = {
|
|
48
|
-
marginLeft: spacing,
|
|
49
|
-
borderWidth,
|
|
50
|
-
borderColor: borderColor || tokens.colors.surface,
|
|
51
|
-
};
|
|
52
|
-
return (<View style={[containerStyle, style]} testID={testID}>
|
|
53
|
-
{visibleAvatars.map((avatar, index) => (<AtomicAvatar key={avatar.id} source={avatar.source} name={avatar.name} size={size} customSize={customSize} backgroundColor={avatar.backgroundColor} textColor={avatar.textColor} borderWidth={borderWidth} borderColor={borderColor} style={[
|
|
54
|
-
avatarStyle,
|
|
55
|
-
...(index === 0 ? [{ marginLeft: 0 }] : []), // First avatar has no left margin
|
|
56
|
-
]}/>))}
|
|
57
|
-
{showOverflow && overflowCount > 0 && (<View style={[
|
|
58
|
-
{
|
|
59
|
-
alignItems: 'center',
|
|
60
|
-
justifyContent: 'center',
|
|
61
|
-
width: customSize || 40,
|
|
62
|
-
height: customSize || 40,
|
|
63
|
-
borderRadius: (customSize || 40) / 2,
|
|
64
|
-
backgroundColor: defaultOverflowBackground,
|
|
65
|
-
borderWidth,
|
|
66
|
-
borderColor: borderColor || tokens.colors.surface,
|
|
67
|
-
marginLeft: spacing,
|
|
68
|
-
},
|
|
69
|
-
]}>
|
|
70
|
-
<AtomicText type="labelMedium" color={defaultOverflowText} style={{
|
|
71
|
-
fontWeight: tokens.typography.semibold,
|
|
72
|
-
fontSize: textSize,
|
|
73
|
-
}}>
|
|
74
|
-
+{overflowCount}
|
|
75
|
-
</AtomicText>
|
|
76
|
-
</View>)}
|
|
77
|
-
</View>);
|
|
78
|
-
};
|
|
79
|
-
// =============================================================================
|
|
80
|
-
// EXPORTS
|
|
81
|
-
// =============================================================================
|
|
82
|
-
export default AtomicAvatarGroup;
|
|
83
|
-
//# sourceMappingURL=AtomicAvatarGroup.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicAvatarGroup.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicAvatarGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicBadge - Universal Badge Component
|
|
3
|
-
*
|
|
4
|
-
* Provides consistent badge/notification count display
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: Display counts, notifications, status indicators
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Notification counts
|
|
12
|
-
* - Cart item counts
|
|
13
|
-
* - Status indicators
|
|
14
|
-
* - Achievement badges
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
18
|
-
export interface AtomicBadgeProps {
|
|
19
|
-
/** Badge content (number, text, or custom element) */
|
|
20
|
-
children: React.ReactNode;
|
|
21
|
-
/** Size variant */
|
|
22
|
-
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
23
|
-
/** Color variant */
|
|
24
|
-
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
25
|
-
/** Shape variant */
|
|
26
|
-
shape?: 'circle' | 'rounded' | 'square';
|
|
27
|
-
/** Maximum value to display (e.g., 99+) */
|
|
28
|
-
max?: number;
|
|
29
|
-
/** Show badge even when count is 0 */
|
|
30
|
-
showZero?: boolean;
|
|
31
|
-
/** Container style override */
|
|
32
|
-
style?: StyleProp<ViewStyle>;
|
|
33
|
-
/** Text style override */
|
|
34
|
-
textStyle?: StyleProp<TextStyle>;
|
|
35
|
-
/** Minimum width */
|
|
36
|
-
minWidth?: number;
|
|
37
|
-
/** Maximum width */
|
|
38
|
-
maxWidth?: number;
|
|
39
|
-
}
|
|
40
|
-
export declare const AtomicBadge: React.FC<AtomicBadgeProps>;
|
|
41
|
-
export default AtomicBadge;
|
|
42
|
-
//# sourceMappingURL=AtomicBadge.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicBadge.d.ts","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicBadge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASjF,MAAM,WAAW,gBAAgB;IAC/B,sDAAsD;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7E,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IACxC,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAqCD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoElD,CAAC;AA+EF,eAAe,WAAW,CAAC"}
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* AtomicBadge - Universal Badge Component
|
|
3
|
-
*
|
|
4
|
-
* Provides consistent badge/notification count display
|
|
5
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
6
|
-
*
|
|
7
|
-
* Atomic Design Level: ATOM
|
|
8
|
-
* Purpose: Display counts, notifications, status indicators
|
|
9
|
-
*
|
|
10
|
-
* Usage:
|
|
11
|
-
* - Notification counts
|
|
12
|
-
* - Cart item counts
|
|
13
|
-
* - Status indicators
|
|
14
|
-
* - Achievement badges
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
import { View, StyleSheet } from 'react-native';
|
|
18
|
-
import { AtomicText } from './AtomicText';
|
|
19
|
-
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
20
|
-
// =============================================================================
|
|
21
|
-
// SIZE CONFIGURATION
|
|
22
|
-
// =============================================================================
|
|
23
|
-
const getSizeConfig = (tokens) => ({
|
|
24
|
-
xs: {
|
|
25
|
-
minHeight: tokens.spacing.sm,
|
|
26
|
-
paddingHorizontal: tokens.spacing.xs,
|
|
27
|
-
fontSize: tokens.typography.labelSmall.fontSize,
|
|
28
|
-
borderRadius: tokens.borders.radius.sm,
|
|
29
|
-
},
|
|
30
|
-
sm: {
|
|
31
|
-
minHeight: tokens.spacing.md,
|
|
32
|
-
paddingHorizontal: tokens.spacing.sm,
|
|
33
|
-
fontSize: tokens.typography.bodySmall.fontSize,
|
|
34
|
-
borderRadius: tokens.borders.radius.md,
|
|
35
|
-
},
|
|
36
|
-
md: {
|
|
37
|
-
minHeight: tokens.spacing.lg,
|
|
38
|
-
paddingHorizontal: tokens.spacing.sm,
|
|
39
|
-
fontSize: tokens.typography.bodyMedium.fontSize,
|
|
40
|
-
borderRadius: tokens.borders.radius.md,
|
|
41
|
-
},
|
|
42
|
-
lg: {
|
|
43
|
-
minHeight: tokens.spacing.xl,
|
|
44
|
-
paddingHorizontal: tokens.spacing.md,
|
|
45
|
-
fontSize: tokens.typography.bodyLarge.fontSize,
|
|
46
|
-
borderRadius: tokens.borders.radius.lg,
|
|
47
|
-
},
|
|
48
|
-
});
|
|
49
|
-
// =============================================================================
|
|
50
|
-
// COMPONENT IMPLEMENTATION
|
|
51
|
-
// =============================================================================
|
|
52
|
-
export const AtomicBadge = ({ children, size = 'md', variant = 'primary', shape = 'circle', max, showZero = false, style, textStyle, minWidth, maxWidth, }) => {
|
|
53
|
-
const tokens = useAppDesignTokens();
|
|
54
|
-
const styles = getStyles(tokens);
|
|
55
|
-
const sizeConfig = getSizeConfig(tokens)[size];
|
|
56
|
-
const colors = getVariantColors(tokens, variant);
|
|
57
|
-
const borderRadius = getBorderRadius(shape, sizeConfig.borderRadius, tokens);
|
|
58
|
-
// Handle max value display
|
|
59
|
-
const displayValue = React.useMemo(() => {
|
|
60
|
-
if (typeof children === 'number') {
|
|
61
|
-
if (max && children > max) {
|
|
62
|
-
return `${max}+`;
|
|
63
|
-
}
|
|
64
|
-
return children.toString();
|
|
65
|
-
}
|
|
66
|
-
return children;
|
|
67
|
-
}, [children, max]);
|
|
68
|
-
// Don't render if count is 0 and showZero is false
|
|
69
|
-
if (typeof children === 'number' && children === 0 && !showZero) {
|
|
70
|
-
return null;
|
|
71
|
-
}
|
|
72
|
-
const containerStyle = [
|
|
73
|
-
styles.container,
|
|
74
|
-
{
|
|
75
|
-
minHeight: sizeConfig.minHeight,
|
|
76
|
-
paddingHorizontal: sizeConfig.paddingHorizontal,
|
|
77
|
-
borderRadius,
|
|
78
|
-
backgroundColor: colors.background,
|
|
79
|
-
minWidth: minWidth || sizeConfig.minHeight,
|
|
80
|
-
maxWidth,
|
|
81
|
-
},
|
|
82
|
-
style,
|
|
83
|
-
];
|
|
84
|
-
const textStyleFinal = StyleSheet.flatten([
|
|
85
|
-
styles.text,
|
|
86
|
-
{
|
|
87
|
-
fontSize: sizeConfig.fontSize,
|
|
88
|
-
},
|
|
89
|
-
textStyle,
|
|
90
|
-
]);
|
|
91
|
-
return (<View style={containerStyle}>
|
|
92
|
-
<AtomicText type="bodySmall" color={colors.text} style={textStyleFinal} numberOfLines={1}>
|
|
93
|
-
{displayValue}
|
|
94
|
-
</AtomicText>
|
|
95
|
-
</View>);
|
|
96
|
-
};
|
|
97
|
-
// =============================================================================
|
|
98
|
-
// HELPER FUNCTIONS
|
|
99
|
-
// =============================================================================
|
|
100
|
-
const getVariantColors = (tokens, variant) => {
|
|
101
|
-
switch (variant) {
|
|
102
|
-
case 'primary':
|
|
103
|
-
return {
|
|
104
|
-
background: tokens.colors.primary,
|
|
105
|
-
text: tokens.colors.textInverse,
|
|
106
|
-
};
|
|
107
|
-
case 'secondary':
|
|
108
|
-
return {
|
|
109
|
-
background: tokens.colors.secondary,
|
|
110
|
-
text: tokens.colors.textInverse,
|
|
111
|
-
};
|
|
112
|
-
case 'success':
|
|
113
|
-
return {
|
|
114
|
-
background: tokens.colors.success,
|
|
115
|
-
text: tokens.colors.textInverse,
|
|
116
|
-
};
|
|
117
|
-
case 'warning':
|
|
118
|
-
return {
|
|
119
|
-
background: tokens.colors.warning,
|
|
120
|
-
text: tokens.colors.textInverse,
|
|
121
|
-
};
|
|
122
|
-
case 'error':
|
|
123
|
-
return {
|
|
124
|
-
background: tokens.colors.error,
|
|
125
|
-
text: tokens.colors.textInverse,
|
|
126
|
-
};
|
|
127
|
-
case 'info':
|
|
128
|
-
return {
|
|
129
|
-
background: tokens.colors.info,
|
|
130
|
-
text: tokens.colors.textInverse,
|
|
131
|
-
};
|
|
132
|
-
default:
|
|
133
|
-
return {
|
|
134
|
-
background: tokens.colors.primary,
|
|
135
|
-
text: tokens.colors.textInverse,
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
const getBorderRadius = (shape, defaultRadius, tokens) => {
|
|
140
|
-
switch (shape) {
|
|
141
|
-
case 'circle':
|
|
142
|
-
return tokens.borders.radius.full; // Very large radius for circle
|
|
143
|
-
case 'square':
|
|
144
|
-
return tokens.borders.radius.sm;
|
|
145
|
-
case 'rounded':
|
|
146
|
-
default:
|
|
147
|
-
return defaultRadius;
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
// =============================================================================
|
|
151
|
-
// STYLES
|
|
152
|
-
// =============================================================================
|
|
153
|
-
const getStyles = (tokens) => StyleSheet.create({
|
|
154
|
-
container: {
|
|
155
|
-
justifyContent: 'center',
|
|
156
|
-
alignItems: 'center',
|
|
157
|
-
alignSelf: 'flex-start',
|
|
158
|
-
},
|
|
159
|
-
text: {
|
|
160
|
-
fontWeight: tokens.typography.semibold,
|
|
161
|
-
textAlign: 'center',
|
|
162
|
-
},
|
|
163
|
-
});
|
|
164
|
-
// =============================================================================
|
|
165
|
-
// EXPORTS
|
|
166
|
-
// =============================================================================
|
|
167
|
-
export default AtomicBadge;
|
|
168
|
-
//# sourceMappingURL=AtomicBadge.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AtomicBadge.js","sourceRoot":"","sources":["../../../src/presentation/atoms/AtomicBadge.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
3
|
-
import type { IconName } from '@umituz/react-native-icon';
|
|
4
|
-
export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
|
|
5
|
-
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
6
|
-
export interface AtomicButtonProps {
|
|
7
|
-
title?: string;
|
|
8
|
-
children?: React.ReactNode;
|
|
9
|
-
onPress: () => void;
|
|
10
|
-
variant?: ButtonVariant;
|
|
11
|
-
size?: ButtonSize;
|
|
12
|
-
disabled?: boolean;
|
|
13
|
-
icon?: IconName;
|
|
14
|
-
fullWidth?: boolean;
|
|
15
|
-
style?: StyleProp<ViewStyle>;
|
|
16
|
-
textStyle?: StyleProp<TextStyle>;
|
|
17
|
-
testID?: string;
|
|
18
|
-
}
|
|
19
|
-
export declare const AtomicButton: React.FC<AtomicButtonProps>;
|
|
20
|
-
export type { AtomicButtonProps as ButtonProps };
|
|
21
|
-
//# sourceMappingURL=AtomicButton.d.ts.map
|