@umituz/react-native-design-system 1.4.1 → 1.4.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/lib/index.d.ts +2 -3
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -3
- package/lib/index.js.map +1 -1
- package/lib/presentation/organisms/ScreenLayout.d.ts +0 -15
- package/lib/presentation/organisms/ScreenLayout.d.ts.map +1 -1
- package/lib/presentation/organisms/ScreenLayout.js +1 -10
- package/lib/presentation/organisms/ScreenLayout.js.map +1 -1
- package/lib/presentation/tokens/AppDesignTokens.d.ts +1 -1
- package/lib/presentation/tokens/AppDesignTokens.d.ts.map +1 -1
- package/lib/presentation/tokens/AppDesignTokens.js +1 -1
- package/lib/presentation/tokens/AppDesignTokens.js.map +1 -1
- package/lib/presentation/tokens/core/BaseTokens.d.ts +0 -25
- package/lib/presentation/tokens/core/BaseTokens.d.ts.map +1 -1
- package/lib/presentation/tokens/core/BaseTokens.js +1 -16
- package/lib/presentation/tokens/core/BaseTokens.js.map +1 -1
- package/lib/presentation/tokens/core/TokenFactory.d.ts +2 -15
- package/lib/presentation/tokens/core/TokenFactory.d.ts.map +1 -1
- package/lib/presentation/tokens/core/TokenFactory.js +1 -2
- package/lib/presentation/tokens/core/TokenFactory.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -4
- package/src/presentation/organisms/ScreenLayout.tsx +0 -40
- package/src/presentation/tokens/AppDesignTokens.ts +0 -2
- package/src/presentation/tokens/core/BaseTokens.ts +1 -19
- package/src/presentation/tokens/core/TokenFactory.ts +2 -4
- package/lib/presentation/loading/presentation/components/LoadingState.d.ts +0 -39
- package/lib/presentation/loading/presentation/components/LoadingState.d.ts.map +0 -1
- package/lib/presentation/loading/presentation/components/LoadingState.js +0 -123
- package/lib/presentation/loading/presentation/components/LoadingState.js.map +0 -1
- package/src/presentation/loading/presentation/components/LoadingState.tsx +0 -200
package/lib/index.d.ts
CHANGED
|
@@ -11,12 +11,11 @@
|
|
|
11
11
|
* - presentation/atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
|
|
12
12
|
* - presentation/molecules: Composite components (SearchBar, ListItem, etc.)
|
|
13
13
|
* - presentation/organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
|
|
14
|
-
* - presentation/loading: Loading states (LoadingState, LoadingSpinner)
|
|
15
14
|
* - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
|
|
16
15
|
* - presentation/utils: Utility functions and helpers
|
|
17
16
|
*
|
|
18
17
|
* Usage:
|
|
19
|
-
* import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar,
|
|
18
|
+
* import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, STATIC_TOKENS } from '@umituz/react-native-design-system';
|
|
20
19
|
*/
|
|
21
20
|
export { AtomicButton, type AtomicButtonProps, type ButtonVariant, type ButtonSize, } from './presentation/atoms/AtomicButton';
|
|
22
21
|
export { AtomicText, type AtomicTextProps, } from './presentation/atoms/AtomicText';
|
|
@@ -52,7 +51,7 @@ export { AtomicConfirmationModal, useConfirmationModal, type AtomicConfirmationM
|
|
|
52
51
|
export { ScreenLayout, type ScreenLayoutProps, } from './presentation/organisms/ScreenLayout';
|
|
53
52
|
export { AppHeader, type AppHeaderProps, } from './presentation/organisms/AppHeader';
|
|
54
53
|
export { FormContainer, type FormContainerProps, } from './presentation/organisms/FormContainer';
|
|
55
|
-
export { STATIC_TOKENS, BASE_TOKENS, createDesignTokens, withAlpha, lightColors, darkColors, getColorPalette, spacing, typography,
|
|
54
|
+
export { STATIC_TOKENS, BASE_TOKENS, createDesignTokens, withAlpha, lightColors, darkColors, getColorPalette, spacing, typography, borders, type DesignTokens, type ThemeMode, type ColorPalette, type Spacing, type Typography, type Borders, type BaseTokens, } from './presentation/tokens/AppDesignTokens';
|
|
56
55
|
export { useAppDesignTokens } from './presentation/hooks/useAppDesignTokens';
|
|
57
56
|
export { useCommonStyles, } from './presentation/tokens/commonStyles';
|
|
58
57
|
export { IOS_HIG, ANDROID_MATERIAL, PLATFORM_CONSTANTS, isValidTouchTarget, getMinTouchTarget, } from './presentation/utils/platformConstants';
|
package/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/lib/index.js
CHANGED
|
@@ -11,12 +11,11 @@
|
|
|
11
11
|
* - presentation/atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
|
|
12
12
|
* - presentation/molecules: Composite components (SearchBar, ListItem, etc.)
|
|
13
13
|
* - presentation/organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
|
|
14
|
-
* - presentation/loading: Loading states (LoadingState, LoadingSpinner)
|
|
15
14
|
* - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
|
|
16
15
|
* - presentation/utils: Utility functions and helpers
|
|
17
16
|
*
|
|
18
17
|
* Usage:
|
|
19
|
-
* import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar,
|
|
18
|
+
* import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, STATIC_TOKENS } from '@umituz/react-native-design-system';
|
|
20
19
|
*/
|
|
21
20
|
// =============================================================================
|
|
22
21
|
// ATOMS - Primitive UI Components
|
|
@@ -81,7 +80,7 @@ createDesignTokens,
|
|
|
81
80
|
// Color utilities
|
|
82
81
|
withAlpha, lightColors, darkColors, getColorPalette,
|
|
83
82
|
// Individual base tokens
|
|
84
|
-
spacing, typography,
|
|
83
|
+
spacing, typography, borders, } from './presentation/tokens/AppDesignTokens';
|
|
85
84
|
// Hook for dynamic theme-aware tokens (exported separately to avoid cycle)
|
|
86
85
|
export { useAppDesignTokens } from './presentation/hooks/useAppDesignTokens';
|
|
87
86
|
export { useCommonStyles, } from './presentation/tokens/commonStyles';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
* Provides consistent layout structure for all screens:
|
|
5
5
|
* - SafeAreaView with configurable edges
|
|
6
6
|
* - Optional ScrollView for content
|
|
7
|
-
* - Loading state support
|
|
8
7
|
* - Theme-aware background colors
|
|
9
8
|
* - Optional header/footer slots
|
|
10
9
|
* - Consistent spacing and padding
|
|
@@ -17,7 +16,6 @@
|
|
|
17
16
|
* Advanced:
|
|
18
17
|
* <ScreenLayout
|
|
19
18
|
* scrollable={false}
|
|
20
|
-
* loading={isLoading}
|
|
21
19
|
* edges={['top', 'bottom']}
|
|
22
20
|
* header={<CustomHeader />}
|
|
23
21
|
* >
|
|
@@ -45,19 +43,6 @@ export interface ScreenLayoutProps {
|
|
|
45
43
|
* - [] - No safe area (use cautiously)
|
|
46
44
|
*/
|
|
47
45
|
edges?: Edge[];
|
|
48
|
-
/**
|
|
49
|
-
* Show loading state
|
|
50
|
-
* When true, displays LoadingState component
|
|
51
|
-
*/
|
|
52
|
-
loading?: boolean;
|
|
53
|
-
/**
|
|
54
|
-
* Loading icon name (default: 'settings')
|
|
55
|
-
*/
|
|
56
|
-
loadingIcon?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Loading message (default: 'Loading...')
|
|
59
|
-
*/
|
|
60
|
-
loadingMessage?: string;
|
|
61
46
|
/**
|
|
62
47
|
* Optional header component
|
|
63
48
|
* Rendered above scrollable content
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenLayout.d.ts","sourceRoot":"","sources":["../../../src/presentation/organisms/ScreenLayout.tsx"],"names":[],"mappings":"AAAA
|
|
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"}
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
* Provides consistent layout structure for all screens:
|
|
5
5
|
* - SafeAreaView with configurable edges
|
|
6
6
|
* - Optional ScrollView for content
|
|
7
|
-
* - Loading state support
|
|
8
7
|
* - Theme-aware background colors
|
|
9
8
|
* - Optional header/footer slots
|
|
10
9
|
* - Consistent spacing and padding
|
|
@@ -17,7 +16,6 @@
|
|
|
17
16
|
* Advanced:
|
|
18
17
|
* <ScreenLayout
|
|
19
18
|
* scrollable={false}
|
|
20
|
-
* loading={isLoading}
|
|
21
19
|
* edges={['top', 'bottom']}
|
|
22
20
|
* header={<CustomHeader />}
|
|
23
21
|
* >
|
|
@@ -28,18 +26,11 @@ import React, { useMemo } from 'react';
|
|
|
28
26
|
import { View, ScrollView, StyleSheet } from 'react-native';
|
|
29
27
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
30
28
|
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
31
|
-
|
|
32
|
-
export const ScreenLayout = ({ children, scrollable = true, edges = ['top'], loading = false, loadingIcon = 'settings', loadingMessage = 'Loading...', header, footer, backgroundColor, containerStyle, contentContainerStyle, testID, hideScrollIndicator = false, keyboardAvoiding = false, }) => {
|
|
29
|
+
export const ScreenLayout = ({ children, scrollable = true, edges = ['top'], header, footer, backgroundColor, containerStyle, contentContainerStyle, testID, hideScrollIndicator = false, keyboardAvoiding = false, }) => {
|
|
33
30
|
// Automatically uses current theme from global store
|
|
34
31
|
const tokens = useAppDesignTokens();
|
|
35
32
|
const styles = useMemo(() => getStyles(tokens), [tokens]);
|
|
36
33
|
const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
|
|
37
|
-
// Show loading state
|
|
38
|
-
if (loading) {
|
|
39
|
-
return (<SafeAreaView style={[styles.container, { backgroundColor: bgColor }, containerStyle]} edges={edges} testID={testID}>
|
|
40
|
-
<LoadingState icon={loadingIcon} message={loadingMessage} size="large" fullScreen/>
|
|
41
|
-
</SafeAreaView>);
|
|
42
|
-
}
|
|
43
34
|
// Non-scrollable layout
|
|
44
35
|
if (!scrollable) {
|
|
45
36
|
return (<SafeAreaView style={[styles.container, { backgroundColor: bgColor }, containerStyle]} edges={edges} testID={testID}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenLayout.js","sourceRoot":"","sources":["../../../src/presentation/organisms/ScreenLayout.tsx"],"names":[],"mappings":"AAAA
|
|
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,6BAA6B,CAAC;AAqEjE,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"}
|
|
@@ -9,6 +9,6 @@
|
|
|
9
9
|
* @module AppDesignTokens
|
|
10
10
|
*/
|
|
11
11
|
export { createDesignTokens, STATIC_DESIGN_TOKENS, STATIC_TOKENS, withAlpha, type DesignTokens, type ThemeMode, type ColorPalette, } from './core/TokenFactory';
|
|
12
|
-
export { BASE_TOKENS, spacing, typography,
|
|
12
|
+
export { BASE_TOKENS, spacing, typography, borders, iconSizes, opacity, avatarSizes, type Spacing, type Typography, type Borders, type IconSizes, type Opacity, type AvatarSizes, type BaseTokens, } from './core/BaseTokens';
|
|
13
13
|
export { lightColors, darkColors, getColorPalette, } from './core/ColorPalette';
|
|
14
14
|
//# sourceMappingURL=AppDesignTokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppDesignTokens.d.ts","sourceRoot":"","sources":["../../../src/presentation/tokens/AppDesignTokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,SAAS,EACT,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAM7B,OAAO,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"AppDesignTokens.d.ts","sourceRoot":"","sources":["../../../src/presentation/tokens/AppDesignTokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,SAAS,EACT,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAM7B,OAAO,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,OAAO,EACP,WAAW,EACX,KAAK,OAAO,EACZ,KAAK,UAAU,EACf,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,mBAAmB,CAAC;AAM3B,OAAO,EACL,WAAW,EACX,UAAU,EACV,eAAe,GAChB,MAAM,qBAAqB,CAAC"}
|
|
@@ -15,7 +15,7 @@ export { createDesignTokens, STATIC_DESIGN_TOKENS, STATIC_TOKENS, withAlpha, } f
|
|
|
15
15
|
// =============================================================================
|
|
16
16
|
// BASE TOKEN EXPORTS
|
|
17
17
|
// =============================================================================
|
|
18
|
-
export { BASE_TOKENS, spacing, typography,
|
|
18
|
+
export { BASE_TOKENS, spacing, typography, borders, iconSizes, opacity, avatarSizes, } from './core/BaseTokens';
|
|
19
19
|
// =============================================================================
|
|
20
20
|
// COLOR PALETTE EXPORTS
|
|
21
21
|
// =============================================================================
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppDesignTokens.js","sourceRoot":"","sources":["../../../src/presentation/tokens/AppDesignTokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,gFAAgF;AAChF,mCAAmC;AACnC,gFAAgF;AAEhF,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,SAAS,GAIV,MAAM,qBAAqB,CAAC;AAE7B,gFAAgF;AAChF,qBAAqB;AACrB,gFAAgF;AAEhF,OAAO,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"AppDesignTokens.js","sourceRoot":"","sources":["../../../src/presentation/tokens/AppDesignTokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,gFAAgF;AAChF,mCAAmC;AACnC,gFAAgF;AAEhF,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,SAAS,GAIV,MAAM,qBAAqB,CAAC;AAE7B,gFAAgF;AAChF,qBAAqB;AACrB,gFAAgF;AAEhF,OAAO,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,OAAO,EACP,WAAW,GAQZ,MAAM,mBAAmB,CAAC;AAE3B,gFAAgF;AAChF,wBAAwB;AACxB,gFAAgF;AAEhF,OAAO,EACL,WAAW,EACX,UAAU,EACV,eAAe,GAChB,MAAM,qBAAqB,CAAC"}
|
|
@@ -73,18 +73,6 @@ export declare const typography: {
|
|
|
73
73
|
readonly caption: TextStyle;
|
|
74
74
|
readonly overline: TextStyle;
|
|
75
75
|
};
|
|
76
|
-
export declare const animations: {
|
|
77
|
-
readonly fastest: 150;
|
|
78
|
-
readonly fast: 150;
|
|
79
|
-
readonly normal: 300;
|
|
80
|
-
readonly slow: 500;
|
|
81
|
-
readonly slower: 750;
|
|
82
|
-
readonly slowest: 1000;
|
|
83
|
-
readonly easeInOut: "ease-in-out";
|
|
84
|
-
readonly easeIn: "ease-in";
|
|
85
|
-
readonly easeOut: "ease-out";
|
|
86
|
-
readonly linear: "linear";
|
|
87
|
-
};
|
|
88
76
|
export declare const opacity: {
|
|
89
77
|
readonly disabled: 0.6;
|
|
90
78
|
readonly subtle: 0.8;
|
|
@@ -233,18 +221,6 @@ export declare const BASE_TOKENS: {
|
|
|
233
221
|
readonly caption: TextStyle;
|
|
234
222
|
readonly overline: TextStyle;
|
|
235
223
|
};
|
|
236
|
-
readonly animations: {
|
|
237
|
-
readonly fastest: 150;
|
|
238
|
-
readonly fast: 150;
|
|
239
|
-
readonly normal: 300;
|
|
240
|
-
readonly slow: 500;
|
|
241
|
-
readonly slower: 750;
|
|
242
|
-
readonly slowest: 1000;
|
|
243
|
-
readonly easeInOut: "ease-in-out";
|
|
244
|
-
readonly easeIn: "ease-in";
|
|
245
|
-
readonly easeOut: "ease-out";
|
|
246
|
-
readonly linear: "linear";
|
|
247
|
-
};
|
|
248
224
|
readonly opacity: {
|
|
249
225
|
readonly disabled: 0.6;
|
|
250
226
|
readonly subtle: 0.8;
|
|
@@ -327,7 +303,6 @@ export declare const BASE_TOKENS: {
|
|
|
327
303
|
};
|
|
328
304
|
export type Spacing = typeof spacing;
|
|
329
305
|
export type Typography = typeof typography;
|
|
330
|
-
export type Animations = typeof animations;
|
|
331
306
|
export type Opacity = typeof opacity;
|
|
332
307
|
export type Borders = typeof borders;
|
|
333
308
|
export type Sizes = typeof sizes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTokens.d.ts","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/BaseTokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;CA6BV,CAAC;AAMX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;2BAoChB,SAAS;4BAMT,SAAS;2BAMT,SAAS;4BAOT,SAAS;6BAMT,SAAS;4BAMT,SAAS;yBAOT,SAAS;0BAMT,SAAS;yBAMT,SAAS;wBAOT,SAAS;yBAMT,SAAS;wBAMT,SAAS;yBAOT,SAAS;0BAMT,SAAS;yBAMT,SAAS;2BAUT,SAAS;4BAMT,SAAS;2BAMT,SAAS;qBAMT,SAAS;sBAMT,SAAS;uBAQT,SAAS;CACN,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseTokens.d.ts","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/BaseTokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;CA6BV,CAAC;AAMX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;2BAoChB,SAAS;4BAMT,SAAS;2BAMT,SAAS;4BAOT,SAAS;6BAMT,SAAS;4BAMT,SAAS;yBAOT,SAAS;0BAMT,SAAS;yBAMT,SAAS;wBAOT,SAAS;yBAMT,SAAS;wBAMT,SAAS;yBAOT,SAAS;0BAMT,SAAS;yBAMT,SAAS;2BAUT,SAAS;4BAMT,SAAS;2BAMT,SAAS;qBAMT,SAAS;sBAMT,SAAS;uBAQT,SAAS;CACN,CAAC;AAUX,eAAO,MAAM,OAAO;;;;;;CAMV,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCV,CAAC;AAMX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;CA8BR,CAAC;AAMX,eAAO,MAAM,SAAS;;;;;;;CAOZ,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAMX;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA1QjB,SAAS;gCAMT,SAAS;+BAMT,SAAS;gCAOT,SAAS;iCAMT,SAAS;gCAMT,SAAS;6BAOT,SAAS;8BAMT,SAAS;6BAMT,SAAS;4BAOT,SAAS;6BAMT,SAAS;4BAMT,SAAS;6BAOT,SAAS;8BAMT,SAAS;6BAMT,SAAS;+BAUT,SAAS;gCAMT,SAAS;+BAMT,SAAS;yBAMT,SAAS;0BAMT,SAAS;2BAQT,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJN,CAAC;AAMX,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC;AAC3C,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AACrC,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AACrC,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC;AACjC,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC;AACzC,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,OAAO,WAAW,CAAC"}
|
|
@@ -184,22 +184,8 @@ export const typography = {
|
|
|
184
184
|
},
|
|
185
185
|
};
|
|
186
186
|
// =============================================================================
|
|
187
|
-
// ANIMATION TOKENS
|
|
187
|
+
// ANIMATION TOKENS - REMOVED (moved to separate package)
|
|
188
188
|
// =============================================================================
|
|
189
|
-
export const animations = {
|
|
190
|
-
// Duration scale (milliseconds)
|
|
191
|
-
fastest: 150,
|
|
192
|
-
fast: 150,
|
|
193
|
-
normal: 300,
|
|
194
|
-
slow: 500,
|
|
195
|
-
slower: 750,
|
|
196
|
-
slowest: 1000,
|
|
197
|
-
// Easing functions
|
|
198
|
-
easeInOut: 'ease-in-out',
|
|
199
|
-
easeIn: 'ease-in',
|
|
200
|
-
easeOut: 'ease-out',
|
|
201
|
-
linear: 'linear',
|
|
202
|
-
};
|
|
203
189
|
// =============================================================================
|
|
204
190
|
// OPACITY TOKENS
|
|
205
191
|
// =============================================================================
|
|
@@ -312,7 +298,6 @@ export const avatarSizes = {
|
|
|
312
298
|
export const BASE_TOKENS = {
|
|
313
299
|
spacing,
|
|
314
300
|
typography,
|
|
315
|
-
animations,
|
|
316
301
|
opacity,
|
|
317
302
|
borders,
|
|
318
303
|
sizes,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTokens.js","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/BaseTokens.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"BaseTokens.js","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/BaseTokens.ts"],"names":[],"mappings":"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"}
|
|
@@ -12,13 +12,12 @@ import { BASE_TOKENS } from './BaseTokens';
|
|
|
12
12
|
import { withAlpha, type ThemeMode, type ColorPalette } from './ColorPalette';
|
|
13
13
|
/**
|
|
14
14
|
* Complete design tokens shape
|
|
15
|
-
* Combines static tokens (spacing, typography,
|
|
15
|
+
* Combines static tokens (spacing, typography, borders) + dynamic colors
|
|
16
16
|
*/
|
|
17
17
|
export type DesignTokens = {
|
|
18
18
|
colors: ColorPalette;
|
|
19
19
|
spacing: typeof BASE_TOKENS.spacing;
|
|
20
20
|
typography: typeof BASE_TOKENS.typography;
|
|
21
|
-
animations: typeof BASE_TOKENS.animations;
|
|
22
21
|
iconSizes: typeof BASE_TOKENS.iconSizes;
|
|
23
22
|
opacity: typeof BASE_TOKENS.opacity;
|
|
24
23
|
avatarSizes: typeof BASE_TOKENS.avatarSizes;
|
|
@@ -64,7 +63,7 @@ export declare const createDesignTokens: (mode: ThemeMode) => DesignTokens;
|
|
|
64
63
|
*/
|
|
65
64
|
export declare const STATIC_DESIGN_TOKENS: DesignTokens;
|
|
66
65
|
/**
|
|
67
|
-
* STATIC TOKENS (spacing, typography,
|
|
66
|
+
* STATIC TOKENS (spacing, typography, borders)
|
|
68
67
|
* These DON'T change with theme - safe to use anywhere
|
|
69
68
|
*/
|
|
70
69
|
export declare const STATIC_TOKENS: {
|
|
@@ -132,18 +131,6 @@ export declare const STATIC_TOKENS: {
|
|
|
132
131
|
readonly caption: import("react-native").TextStyle;
|
|
133
132
|
readonly overline: import("react-native").TextStyle;
|
|
134
133
|
};
|
|
135
|
-
readonly animations: {
|
|
136
|
-
readonly fastest: 150;
|
|
137
|
-
readonly fast: 150;
|
|
138
|
-
readonly normal: 300;
|
|
139
|
-
readonly slow: 500;
|
|
140
|
-
readonly slower: 750;
|
|
141
|
-
readonly slowest: 1000;
|
|
142
|
-
readonly easeInOut: "ease-in-out";
|
|
143
|
-
readonly easeIn: "ease-in";
|
|
144
|
-
readonly easeOut: "ease-out";
|
|
145
|
-
readonly linear: "linear";
|
|
146
|
-
};
|
|
147
134
|
readonly opacity: {
|
|
148
135
|
readonly disabled: 0.6;
|
|
149
136
|
readonly subtle: 0.8;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenFactory.d.ts","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/TokenFactory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAmB,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM/F;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,YAAY,CAAC;IACrB,OAAO,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC;IACpC,UAAU,EAAE,OAAO,WAAW,CAAC,UAAU,CAAC;IAC1C,
|
|
1
|
+
{"version":3,"file":"TokenFactory.d.ts","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/TokenFactory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAmB,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM/F;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,YAAY,CAAC;IACrB,OAAO,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC;IACpC,UAAU,EAAE,OAAO,WAAW,CAAC,UAAU,CAAC;IAC1C,SAAS,EAAE,OAAO,WAAW,CAAC,SAAS,CAAC;IACxC,OAAO,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC;IACpC,WAAW,EAAE,OAAO,WAAW,CAAC,WAAW,CAAC;IAC5C,OAAO,EAAE,OAAO,WAAW,CAAC,OAAO,GAAG;QACpC,IAAI,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC,IAAI,GAAG;YAAE,WAAW,EAAE,MAAM,CAAA;SAAE,CAAC;QAChE,KAAK,EAAE,OAAO,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG;YAAE,WAAW,EAAE,MAAM,CAAA;SAAE,CAAC;KACnE,CAAC;CACH,CAAC;AAMF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,SAAS,KAAG,YA6BpD,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,oBAAoB,cAA8B,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -40,7 +40,6 @@ export const createDesignTokens = (mode) => {
|
|
|
40
40
|
// ✅ STATIC: These don't change with theme
|
|
41
41
|
spacing: BASE_TOKENS.spacing,
|
|
42
42
|
typography: BASE_TOKENS.typography,
|
|
43
|
-
animations: BASE_TOKENS.animations,
|
|
44
43
|
iconSizes: BASE_TOKENS.iconSizes,
|
|
45
44
|
opacity: BASE_TOKENS.opacity,
|
|
46
45
|
avatarSizes: BASE_TOKENS.avatarSizes,
|
|
@@ -76,7 +75,7 @@ export const createDesignTokens = (mode) => {
|
|
|
76
75
|
*/
|
|
77
76
|
export const STATIC_DESIGN_TOKENS = createDesignTokens('light');
|
|
78
77
|
/**
|
|
79
|
-
* STATIC TOKENS (spacing, typography,
|
|
78
|
+
* STATIC TOKENS (spacing, typography, borders)
|
|
80
79
|
* These DON'T change with theme - safe to use anywhere
|
|
81
80
|
*/
|
|
82
81
|
export const STATIC_TOKENS = BASE_TOKENS;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenFactory.js","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/TokenFactory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"TokenFactory.js","sourceRoot":"","sources":["../../../../src/presentation/tokens/core/TokenFactory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,SAAS,EAAqC,MAAM,gBAAgB,CAAC;AAuB/F,gFAAgF;AAChF,yBAAyB;AACzB,gFAAgF;AAEhF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAe,EAAgB,EAAE;IAClE,mCAAmC;IACnC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAErC,yCAAyC;IACzC,OAAO;QACL,oCAAoC;QACpC,MAAM;QAEN,0CAA0C;QAC1C,OAAO,EAAE,WAAW,CAAC,OAAO;QAC5B,UAAU,EAAE,WAAW,CAAC,UAAU;QAClC,SAAS,EAAE,WAAW,CAAC,SAAS;QAChC,OAAO,EAAE,WAAW,CAAC,OAAO;QAC5B,WAAW,EAAE,WAAW,CAAC,WAAW;QAEpC,wDAAwD;QACxD,OAAO,EAAE;YACP,GAAG,WAAW,CAAC,OAAO;YACtB,IAAI,EAAE;gBACJ,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI;gBAC3B,WAAW,EAAE,MAAM,CAAC,MAAM;aAC3B;YACD,KAAK,EAAE;gBACL,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK;gBAC5B,WAAW,EAAE,MAAM,CAAC,MAAM;aAC3B;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,gFAAgF;AAChF,kDAAkD;AAClD,gFAAgF;AAEhF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;AAEzC,gFAAgF;AAChF,kBAAkB;AAClB,gFAAgF;AAEhF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-design-system",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.2",
|
|
4
4
|
"description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"types": "./lib/index.d.ts",
|
package/src/index.ts
CHANGED
|
@@ -11,12 +11,11 @@
|
|
|
11
11
|
* - presentation/atoms: Primitive UI components (AtomicButton, AtomicText, etc.)
|
|
12
12
|
* - presentation/molecules: Composite components (SearchBar, ListItem, etc.)
|
|
13
13
|
* - presentation/organisms: Complex patterns (ScreenLayout, AppHeader, FormContainer)
|
|
14
|
-
* - presentation/loading: Loading states (LoadingState, LoadingSpinner)
|
|
15
14
|
* - presentation/tokens: Design tokens (colors, typography, spacing, etc.)
|
|
16
15
|
* - presentation/utils: Utility functions and helpers
|
|
17
16
|
*
|
|
18
17
|
* Usage:
|
|
19
|
-
* import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar,
|
|
18
|
+
* import { AtomicButton, AtomicFilter, AtomicTouchable, SearchBar, STATIC_TOKENS } from '@umituz/react-native-design-system';
|
|
20
19
|
*/
|
|
21
20
|
|
|
22
21
|
// =============================================================================
|
|
@@ -255,7 +254,6 @@ export {
|
|
|
255
254
|
// Individual base tokens
|
|
256
255
|
spacing,
|
|
257
256
|
typography,
|
|
258
|
-
animations,
|
|
259
257
|
borders,
|
|
260
258
|
|
|
261
259
|
// Type exports
|
|
@@ -264,7 +262,6 @@ export {
|
|
|
264
262
|
type ColorPalette,
|
|
265
263
|
type Spacing,
|
|
266
264
|
type Typography,
|
|
267
|
-
type Animations,
|
|
268
265
|
type Borders,
|
|
269
266
|
type BaseTokens,
|
|
270
267
|
} from './presentation/tokens/AppDesignTokens';
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
* Provides consistent layout structure for all screens:
|
|
5
5
|
* - SafeAreaView with configurable edges
|
|
6
6
|
* - Optional ScrollView for content
|
|
7
|
-
* - Loading state support
|
|
8
7
|
* - Theme-aware background colors
|
|
9
8
|
* - Optional header/footer slots
|
|
10
9
|
* - Consistent spacing and padding
|
|
@@ -17,7 +16,6 @@
|
|
|
17
16
|
* Advanced:
|
|
18
17
|
* <ScreenLayout
|
|
19
18
|
* scrollable={false}
|
|
20
|
-
* loading={isLoading}
|
|
21
19
|
* edges={['top', 'bottom']}
|
|
22
20
|
* header={<CustomHeader />}
|
|
23
21
|
* >
|
|
@@ -29,7 +27,6 @@ import React, { useMemo } from 'react';
|
|
|
29
27
|
import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
|
|
30
28
|
import { SafeAreaView, Edge } from 'react-native-safe-area-context';
|
|
31
29
|
import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
|
|
32
|
-
import { LoadingState } from '../loading/presentation/components/LoadingState';
|
|
33
30
|
|
|
34
31
|
export interface ScreenLayoutProps {
|
|
35
32
|
/**
|
|
@@ -52,22 +49,6 @@ export interface ScreenLayoutProps {
|
|
|
52
49
|
*/
|
|
53
50
|
edges?: Edge[];
|
|
54
51
|
|
|
55
|
-
/**
|
|
56
|
-
* Show loading state
|
|
57
|
-
* When true, displays LoadingState component
|
|
58
|
-
*/
|
|
59
|
-
loading?: boolean;
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Loading icon name (default: 'settings')
|
|
63
|
-
*/
|
|
64
|
-
loadingIcon?: string;
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Loading message (default: 'Loading...')
|
|
68
|
-
*/
|
|
69
|
-
loadingMessage?: string;
|
|
70
|
-
|
|
71
52
|
/**
|
|
72
53
|
* Optional header component
|
|
73
54
|
* Rendered above scrollable content
|
|
@@ -118,9 +99,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
|
|
|
118
99
|
children,
|
|
119
100
|
scrollable = true,
|
|
120
101
|
edges = ['top'],
|
|
121
|
-
loading = false,
|
|
122
|
-
loadingIcon = 'settings',
|
|
123
|
-
loadingMessage = 'Loading...',
|
|
124
102
|
header,
|
|
125
103
|
footer,
|
|
126
104
|
backgroundColor,
|
|
@@ -136,24 +114,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
|
|
|
136
114
|
|
|
137
115
|
const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
|
|
138
116
|
|
|
139
|
-
// Show loading state
|
|
140
|
-
if (loading) {
|
|
141
|
-
return (
|
|
142
|
-
<SafeAreaView
|
|
143
|
-
style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
|
|
144
|
-
edges={edges}
|
|
145
|
-
testID={testID}
|
|
146
|
-
>
|
|
147
|
-
<LoadingState
|
|
148
|
-
icon={loadingIcon}
|
|
149
|
-
message={loadingMessage}
|
|
150
|
-
size="large"
|
|
151
|
-
fullScreen
|
|
152
|
-
/>
|
|
153
|
-
</SafeAreaView>
|
|
154
|
-
);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
117
|
// Non-scrollable layout
|
|
158
118
|
if (!scrollable) {
|
|
159
119
|
return (
|
|
@@ -220,25 +220,9 @@ export const typography = {
|
|
|
220
220
|
} as const;
|
|
221
221
|
|
|
222
222
|
// =============================================================================
|
|
223
|
-
// ANIMATION TOKENS
|
|
223
|
+
// ANIMATION TOKENS - REMOVED (moved to separate package)
|
|
224
224
|
// =============================================================================
|
|
225
225
|
|
|
226
|
-
export const animations = {
|
|
227
|
-
// Duration scale (milliseconds)
|
|
228
|
-
fastest: 150,
|
|
229
|
-
fast: 150,
|
|
230
|
-
normal: 300,
|
|
231
|
-
slow: 500,
|
|
232
|
-
slower: 750,
|
|
233
|
-
slowest: 1000,
|
|
234
|
-
|
|
235
|
-
// Easing functions
|
|
236
|
-
easeInOut: 'ease-in-out' as const,
|
|
237
|
-
easeIn: 'ease-in' as const,
|
|
238
|
-
easeOut: 'ease-out' as const,
|
|
239
|
-
linear: 'linear' as const,
|
|
240
|
-
} as const;
|
|
241
|
-
|
|
242
226
|
// =============================================================================
|
|
243
227
|
// OPACITY TOKENS
|
|
244
228
|
// =============================================================================
|
|
@@ -371,7 +355,6 @@ export const avatarSizes = {
|
|
|
371
355
|
export const BASE_TOKENS = {
|
|
372
356
|
spacing,
|
|
373
357
|
typography,
|
|
374
|
-
animations,
|
|
375
358
|
opacity,
|
|
376
359
|
borders,
|
|
377
360
|
sizes,
|
|
@@ -385,7 +368,6 @@ export const BASE_TOKENS = {
|
|
|
385
368
|
|
|
386
369
|
export type Spacing = typeof spacing;
|
|
387
370
|
export type Typography = typeof typography;
|
|
388
|
-
export type Animations = typeof animations;
|
|
389
371
|
export type Opacity = typeof opacity;
|
|
390
372
|
export type Borders = typeof borders;
|
|
391
373
|
export type Sizes = typeof sizes;
|
|
@@ -18,13 +18,12 @@ import { getColorPalette, withAlpha, type ThemeMode, type ColorPalette } from '.
|
|
|
18
18
|
|
|
19
19
|
/**
|
|
20
20
|
* Complete design tokens shape
|
|
21
|
-
* Combines static tokens (spacing, typography,
|
|
21
|
+
* Combines static tokens (spacing, typography, borders) + dynamic colors
|
|
22
22
|
*/
|
|
23
23
|
export type DesignTokens = {
|
|
24
24
|
colors: ColorPalette;
|
|
25
25
|
spacing: typeof BASE_TOKENS.spacing;
|
|
26
26
|
typography: typeof BASE_TOKENS.typography;
|
|
27
|
-
animations: typeof BASE_TOKENS.animations;
|
|
28
27
|
iconSizes: typeof BASE_TOKENS.iconSizes;
|
|
29
28
|
opacity: typeof BASE_TOKENS.opacity;
|
|
30
29
|
avatarSizes: typeof BASE_TOKENS.avatarSizes;
|
|
@@ -67,7 +66,6 @@ export const createDesignTokens = (mode: ThemeMode): DesignTokens => {
|
|
|
67
66
|
// ✅ STATIC: These don't change with theme
|
|
68
67
|
spacing: BASE_TOKENS.spacing,
|
|
69
68
|
typography: BASE_TOKENS.typography,
|
|
70
|
-
animations: BASE_TOKENS.animations,
|
|
71
69
|
iconSizes: BASE_TOKENS.iconSizes,
|
|
72
70
|
opacity: BASE_TOKENS.opacity,
|
|
73
71
|
avatarSizes: BASE_TOKENS.avatarSizes,
|
|
@@ -107,7 +105,7 @@ export const createDesignTokens = (mode: ThemeMode): DesignTokens => {
|
|
|
107
105
|
export const STATIC_DESIGN_TOKENS = createDesignTokens('light');
|
|
108
106
|
|
|
109
107
|
/**
|
|
110
|
-
* STATIC TOKENS (spacing, typography,
|
|
108
|
+
* STATIC TOKENS (spacing, typography, borders)
|
|
111
109
|
* These DON'T change with theme - safe to use anywhere
|
|
112
110
|
*/
|
|
113
111
|
export const STATIC_TOKENS = BASE_TOKENS;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* LoadingState - Dynamic Icon-Based Loading Component
|
|
3
|
-
*
|
|
4
|
-
* Universal loading component with configurable emoji/icon support
|
|
5
|
-
* Inspired by meditation_timer's breathing animation pattern
|
|
6
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
7
|
-
*
|
|
8
|
-
* Features:
|
|
9
|
-
* - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
|
|
10
|
-
* - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
|
|
11
|
-
* - ✅ Size variants (small, medium, large)
|
|
12
|
-
* - ✅ Full screen or inline modes
|
|
13
|
-
* - ✅ Optional loading message
|
|
14
|
-
* - ✅ Theme-aware styling
|
|
15
|
-
*/
|
|
16
|
-
import React from 'react';
|
|
17
|
-
export type LoadingStateSize = 'small' | 'medium' | 'large';
|
|
18
|
-
export interface LoadingStateProps {
|
|
19
|
-
/**
|
|
20
|
-
* Emoji/icon to display (changes per screen context)
|
|
21
|
-
* Examples: 🏠 Home, ⚙️ Settings, 💪 Workout, 🧘 Meditation, 📊 Analytics
|
|
22
|
-
*/
|
|
23
|
-
icon?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Optional loading message
|
|
26
|
-
*/
|
|
27
|
-
message?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Size variant
|
|
30
|
-
*/
|
|
31
|
-
size?: LoadingStateSize;
|
|
32
|
-
/**
|
|
33
|
-
* Full screen overlay mode
|
|
34
|
-
*/
|
|
35
|
-
fullScreen?: boolean;
|
|
36
|
-
}
|
|
37
|
-
export declare const LoadingState: React.FC<LoadingStateProps>;
|
|
38
|
-
export default LoadingState;
|
|
39
|
-
//# sourceMappingURL=LoadingState.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/components/LoadingState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAe1D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkCD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4EpD,CAAC;AAmCF,eAAe,YAAY,CAAC"}
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* LoadingState - Dynamic Icon-Based Loading Component
|
|
3
|
-
*
|
|
4
|
-
* Universal loading component with configurable emoji/icon support
|
|
5
|
-
* Inspired by meditation_timer's breathing animation pattern
|
|
6
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
7
|
-
*
|
|
8
|
-
* Features:
|
|
9
|
-
* - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
|
|
10
|
-
* - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
|
|
11
|
-
* - ✅ Size variants (small, medium, large)
|
|
12
|
-
* - ✅ Full screen or inline modes
|
|
13
|
-
* - ✅ Optional loading message
|
|
14
|
-
* - ✅ Theme-aware styling
|
|
15
|
-
*/
|
|
16
|
-
import React, { useRef, useEffect, useMemo } from 'react';
|
|
17
|
-
import { View, StyleSheet, Animated, Easing, } from 'react-native';
|
|
18
|
-
import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
|
|
19
|
-
import { AtomicText } from '../../../atoms/AtomicText';
|
|
20
|
-
const SIZE_CONFIG = {
|
|
21
|
-
small: {
|
|
22
|
-
iconSize: 32,
|
|
23
|
-
showMessage: false,
|
|
24
|
-
containerPadding: 16,
|
|
25
|
-
},
|
|
26
|
-
medium: {
|
|
27
|
-
iconSize: 48,
|
|
28
|
-
showMessage: true,
|
|
29
|
-
containerPadding: 24,
|
|
30
|
-
},
|
|
31
|
-
large: {
|
|
32
|
-
iconSize: 64,
|
|
33
|
-
showMessage: true,
|
|
34
|
-
containerPadding: 32,
|
|
35
|
-
},
|
|
36
|
-
};
|
|
37
|
-
// =============================================================================
|
|
38
|
-
// COMPONENT IMPLEMENTATION
|
|
39
|
-
// =============================================================================
|
|
40
|
-
export const LoadingState = ({ icon = '⏳', // Default hourglass icon
|
|
41
|
-
message, size = 'large', fullScreen = false, }) => {
|
|
42
|
-
// ✅ Dynamic theme tokens
|
|
43
|
-
const tokens = useAppDesignTokens();
|
|
44
|
-
// Animation ref for breathing effect
|
|
45
|
-
const scaleAnim = useRef(new Animated.Value(1)).current;
|
|
46
|
-
// Size configuration
|
|
47
|
-
const config = SIZE_CONFIG[size];
|
|
48
|
-
/**
|
|
49
|
-
* Breathing Animation Effect
|
|
50
|
-
* Smoothly scales icon from 1 → 1.15 → 1 in continuous loop
|
|
51
|
-
* Creates calming, natural breathing sensation
|
|
52
|
-
*/
|
|
53
|
-
useEffect(() => {
|
|
54
|
-
const breathingAnimation = Animated.loop(Animated.sequence([
|
|
55
|
-
// Expand (inhale)
|
|
56
|
-
Animated.timing(scaleAnim, {
|
|
57
|
-
toValue: 1.15,
|
|
58
|
-
duration: tokens.animations.slowest,
|
|
59
|
-
easing: Easing.inOut(Easing.ease),
|
|
60
|
-
useNativeDriver: true,
|
|
61
|
-
}),
|
|
62
|
-
// Contract (exhale)
|
|
63
|
-
Animated.timing(scaleAnim, {
|
|
64
|
-
toValue: 1,
|
|
65
|
-
duration: tokens.animations.slowest,
|
|
66
|
-
easing: Easing.inOut(Easing.ease),
|
|
67
|
-
useNativeDriver: true,
|
|
68
|
-
}),
|
|
69
|
-
]));
|
|
70
|
-
breathingAnimation.start();
|
|
71
|
-
return () => {
|
|
72
|
-
breathingAnimation.stop();
|
|
73
|
-
};
|
|
74
|
-
}, [scaleAnim]);
|
|
75
|
-
// Dynamic styles based on theme
|
|
76
|
-
const styles = useMemo(() => getStyles(tokens, config, fullScreen), [tokens, config, fullScreen]);
|
|
77
|
-
return (<View style={styles.container}>
|
|
78
|
-
{/* Animated Icon/Emoji */}
|
|
79
|
-
<Animated.Text style={[
|
|
80
|
-
styles.icon,
|
|
81
|
-
{
|
|
82
|
-
fontSize: config.iconSize,
|
|
83
|
-
transform: [{ scale: scaleAnim }],
|
|
84
|
-
},
|
|
85
|
-
]}>
|
|
86
|
-
{icon}
|
|
87
|
-
</Animated.Text>
|
|
88
|
-
|
|
89
|
-
{/* Optional Loading Message */}
|
|
90
|
-
{config.showMessage && message && (<AtomicText type="bodyMedium" style={styles.message}>
|
|
91
|
-
{message}
|
|
92
|
-
</AtomicText>)}
|
|
93
|
-
</View>);
|
|
94
|
-
};
|
|
95
|
-
// =============================================================================
|
|
96
|
-
// STYLES
|
|
97
|
-
// =============================================================================
|
|
98
|
-
const getStyles = (tokens, config, fullScreen) => StyleSheet.create({
|
|
99
|
-
container: {
|
|
100
|
-
...(fullScreen ? {
|
|
101
|
-
flex: 1,
|
|
102
|
-
justifyContent: 'center',
|
|
103
|
-
alignItems: 'center',
|
|
104
|
-
backgroundColor: tokens.colors.backgroundPrimary,
|
|
105
|
-
} : {
|
|
106
|
-
justifyContent: 'center',
|
|
107
|
-
alignItems: 'center',
|
|
108
|
-
padding: config.containerPadding,
|
|
109
|
-
}),
|
|
110
|
-
},
|
|
111
|
-
icon: {
|
|
112
|
-
textAlign: 'center',
|
|
113
|
-
marginBottom: tokens.spacing.md,
|
|
114
|
-
},
|
|
115
|
-
message: {
|
|
116
|
-
color: tokens.colors.textSecondary,
|
|
117
|
-
textAlign: 'center',
|
|
118
|
-
marginTop: tokens.spacing.sm,
|
|
119
|
-
maxWidth: 300,
|
|
120
|
-
},
|
|
121
|
-
});
|
|
122
|
-
export default LoadingState;
|
|
123
|
-
//# sourceMappingURL=LoadingState.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingState.js","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/components/LoadingState.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* LoadingState - Dynamic Icon-Based Loading Component
|
|
3
|
-
*
|
|
4
|
-
* Universal loading component with configurable emoji/icon support
|
|
5
|
-
* Inspired by meditation_timer's breathing animation pattern
|
|
6
|
-
* Theme: {{THEME_NAME}} ({{CATEGORY}} category)
|
|
7
|
-
*
|
|
8
|
-
* Features:
|
|
9
|
-
* - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
|
|
10
|
-
* - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
|
|
11
|
-
* - ✅ Size variants (small, medium, large)
|
|
12
|
-
* - ✅ Full screen or inline modes
|
|
13
|
-
* - ✅ Optional loading message
|
|
14
|
-
* - ✅ Theme-aware styling
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
import React, { useRef, useEffect, useMemo } from 'react';
|
|
18
|
-
import {
|
|
19
|
-
View,
|
|
20
|
-
StyleSheet,
|
|
21
|
-
Animated,
|
|
22
|
-
Easing,
|
|
23
|
-
} from 'react-native';
|
|
24
|
-
import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
|
|
25
|
-
import { STATIC_TOKENS } from '../../../tokens/AppDesignTokens';
|
|
26
|
-
import { AtomicText } from '../../../atoms/AtomicText';
|
|
27
|
-
|
|
28
|
-
// =============================================================================
|
|
29
|
-
// TYPE DEFINITIONS
|
|
30
|
-
// =============================================================================
|
|
31
|
-
|
|
32
|
-
export type LoadingStateSize = 'small' | 'medium' | 'large';
|
|
33
|
-
|
|
34
|
-
export interface LoadingStateProps {
|
|
35
|
-
/**
|
|
36
|
-
* Emoji/icon to display (changes per screen context)
|
|
37
|
-
* Examples: 🏠 Home, ⚙️ Settings, 💪 Workout, 🧘 Meditation, 📊 Analytics
|
|
38
|
-
*/
|
|
39
|
-
icon?: string;
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Optional loading message
|
|
43
|
-
*/
|
|
44
|
-
message?: string;
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* Size variant
|
|
48
|
-
*/
|
|
49
|
-
size?: LoadingStateSize;
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Full screen overlay mode
|
|
53
|
-
*/
|
|
54
|
-
fullScreen?: boolean;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
// =============================================================================
|
|
58
|
-
// SIZE CONFIGURATION
|
|
59
|
-
// =============================================================================
|
|
60
|
-
|
|
61
|
-
interface SizeConfig {
|
|
62
|
-
iconSize: number;
|
|
63
|
-
showMessage: boolean;
|
|
64
|
-
containerPadding: number;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
const SIZE_CONFIG: Record<LoadingStateSize, SizeConfig> = {
|
|
68
|
-
small: {
|
|
69
|
-
iconSize: 32,
|
|
70
|
-
showMessage: false,
|
|
71
|
-
containerPadding: 16,
|
|
72
|
-
},
|
|
73
|
-
medium: {
|
|
74
|
-
iconSize: 48,
|
|
75
|
-
showMessage: true,
|
|
76
|
-
containerPadding: 24,
|
|
77
|
-
},
|
|
78
|
-
large: {
|
|
79
|
-
iconSize: 64,
|
|
80
|
-
showMessage: true,
|
|
81
|
-
containerPadding: 32,
|
|
82
|
-
},
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
// =============================================================================
|
|
86
|
-
// COMPONENT IMPLEMENTATION
|
|
87
|
-
// =============================================================================
|
|
88
|
-
|
|
89
|
-
export const LoadingState: React.FC<LoadingStateProps> = ({
|
|
90
|
-
icon = '⏳', // Default hourglass icon
|
|
91
|
-
message,
|
|
92
|
-
size = 'large',
|
|
93
|
-
fullScreen = false,
|
|
94
|
-
}) => {
|
|
95
|
-
// ✅ Dynamic theme tokens
|
|
96
|
-
const tokens = useAppDesignTokens();
|
|
97
|
-
|
|
98
|
-
// Animation ref for breathing effect
|
|
99
|
-
const scaleAnim = useRef(new Animated.Value(1)).current;
|
|
100
|
-
|
|
101
|
-
// Size configuration
|
|
102
|
-
const config = SIZE_CONFIG[size];
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* Breathing Animation Effect
|
|
106
|
-
* Smoothly scales icon from 1 → 1.15 → 1 in continuous loop
|
|
107
|
-
* Creates calming, natural breathing sensation
|
|
108
|
-
*/
|
|
109
|
-
useEffect(() => {
|
|
110
|
-
const breathingAnimation = Animated.loop(
|
|
111
|
-
Animated.sequence([
|
|
112
|
-
// Expand (inhale)
|
|
113
|
-
Animated.timing(scaleAnim, {
|
|
114
|
-
toValue: 1.15,
|
|
115
|
-
duration: tokens.animations.slowest,
|
|
116
|
-
easing: Easing.inOut(Easing.ease),
|
|
117
|
-
useNativeDriver: true,
|
|
118
|
-
}),
|
|
119
|
-
// Contract (exhale)
|
|
120
|
-
Animated.timing(scaleAnim, {
|
|
121
|
-
toValue: 1,
|
|
122
|
-
duration: tokens.animations.slowest,
|
|
123
|
-
easing: Easing.inOut(Easing.ease),
|
|
124
|
-
useNativeDriver: true,
|
|
125
|
-
}),
|
|
126
|
-
])
|
|
127
|
-
);
|
|
128
|
-
|
|
129
|
-
breathingAnimation.start();
|
|
130
|
-
|
|
131
|
-
return () => {
|
|
132
|
-
breathingAnimation.stop();
|
|
133
|
-
};
|
|
134
|
-
}, [scaleAnim]);
|
|
135
|
-
|
|
136
|
-
// Dynamic styles based on theme
|
|
137
|
-
const styles = useMemo(() => getStyles(tokens, config, fullScreen), [tokens, config, fullScreen]);
|
|
138
|
-
|
|
139
|
-
return (
|
|
140
|
-
<View style={styles.container}>
|
|
141
|
-
{/* Animated Icon/Emoji */}
|
|
142
|
-
<Animated.Text
|
|
143
|
-
style={[
|
|
144
|
-
styles.icon,
|
|
145
|
-
{
|
|
146
|
-
fontSize: config.iconSize,
|
|
147
|
-
transform: [{ scale: scaleAnim }],
|
|
148
|
-
},
|
|
149
|
-
]}
|
|
150
|
-
>
|
|
151
|
-
{icon}
|
|
152
|
-
</Animated.Text>
|
|
153
|
-
|
|
154
|
-
{/* Optional Loading Message */}
|
|
155
|
-
{config.showMessage && message && (
|
|
156
|
-
<AtomicText
|
|
157
|
-
type="bodyMedium"
|
|
158
|
-
style={styles.message}
|
|
159
|
-
>
|
|
160
|
-
{message}
|
|
161
|
-
</AtomicText>
|
|
162
|
-
)}
|
|
163
|
-
</View>
|
|
164
|
-
);
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
// =============================================================================
|
|
168
|
-
// STYLES
|
|
169
|
-
// =============================================================================
|
|
170
|
-
|
|
171
|
-
const getStyles = (
|
|
172
|
-
tokens: ReturnType<typeof useAppDesignTokens>,
|
|
173
|
-
config: SizeConfig,
|
|
174
|
-
fullScreen: boolean
|
|
175
|
-
) => StyleSheet.create({
|
|
176
|
-
container: {
|
|
177
|
-
...(fullScreen ? {
|
|
178
|
-
flex: 1,
|
|
179
|
-
justifyContent: 'center',
|
|
180
|
-
alignItems: 'center',
|
|
181
|
-
backgroundColor: tokens.colors.backgroundPrimary,
|
|
182
|
-
} : {
|
|
183
|
-
justifyContent: 'center',
|
|
184
|
-
alignItems: 'center',
|
|
185
|
-
padding: config.containerPadding,
|
|
186
|
-
}),
|
|
187
|
-
},
|
|
188
|
-
icon: {
|
|
189
|
-
textAlign: 'center',
|
|
190
|
-
marginBottom: tokens.spacing.md,
|
|
191
|
-
},
|
|
192
|
-
message: {
|
|
193
|
-
color: tokens.colors.textSecondary,
|
|
194
|
-
textAlign: 'center',
|
|
195
|
-
marginTop: tokens.spacing.sm,
|
|
196
|
-
maxWidth: 300,
|
|
197
|
-
},
|
|
198
|
-
});
|
|
199
|
-
|
|
200
|
-
export default LoadingState;
|