@idealyst/navigation 1.0.24 → 1.0.25

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.
Files changed (24) hide show
  1. package/package.json +3 -3
  2. package/src/context/NavigatorContext.native.tsx +50 -50
  3. package/src/context/NavigatorContext.web.tsx +36 -36
  4. package/src/context/index.native.ts +1 -1
  5. package/src/context/index.ts +1 -1
  6. package/src/context/index.web.ts +1 -1
  7. package/src/context/types.ts +12 -12
  8. package/src/examples/ExampleDrawerRouter.tsx +158 -158
  9. package/src/examples/ExampleStackRouter.tsx +244 -244
  10. package/src/examples/ExampleTabRouter.tsx +156 -156
  11. package/src/examples/highContrastThemes.ts +582 -582
  12. package/src/examples/index.ts +2 -2
  13. package/src/examples/unistyles.ts +83 -83
  14. package/src/index.ts +4 -4
  15. package/src/layouts/GeneralLayout/GeneralLayout.styles.ts +55 -55
  16. package/src/layouts/GeneralLayout/GeneralLayout.tsx +144 -144
  17. package/src/layouts/GeneralLayout/index.ts +2 -2
  18. package/src/layouts/GeneralLayout/types.ts +98 -98
  19. package/src/routing/index.native.tsx +1 -1
  20. package/src/routing/index.ts +1 -1
  21. package/src/routing/index.web.tsx +1 -1
  22. package/src/routing/router.native.tsx +89 -89
  23. package/src/routing/router.web.tsx +73 -73
  24. package/src/routing/types.ts +14 -14
package/src/examples/ExampleStackRouter.tsx CHANGED
@@ -1,245 +1,245 @@
1
- import React, { useState } from 'react';
2
- import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DividerExamples, IconExamples, InputExamples, ScreenExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
3
- import { Button, Divider, Screen, Text, View } from "../../../components/src";
4
- import { useNavigator } from "../context";
5
- import { UnistylesRuntime, StyleSheet } from 'react-native-unistyles';
6
- import { GeneralLayout } from '../layouts/GeneralLayout';
7
- import { RouteParam } from '../routing';
8
- import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
9
-
10
- const HomeScreen = () => {
11
- const navigator = useNavigator();
12
- const currentTheme = UnistylesRuntime.themeName || 'light';
13
-
14
- const cycleTheme = () => {
15
- const nextTheme = getNextTheme(currentTheme);
16
- UnistylesRuntime.setTheme(nextTheme as any);
17
- console.log('Theme changed to:', nextTheme);
18
- };
19
-
20
- const toggleHighContrast = () => {
21
- const currentTheme = UnistylesRuntime.themeName || 'light';
22
- let newTheme: string;
23
-
24
- if (isHighContrastTheme(currentTheme)) {
25
- // Switch to standard variant
26
- newTheme = currentTheme.includes('dark') ? 'dark' : 'light';
27
- } else {
28
- // Switch to high contrast variant
29
- newTheme = currentTheme.includes('dark') ? 'darkHighContrast' : 'lightHighContrast';
30
- }
31
-
32
- UnistylesRuntime.setTheme(newTheme as any);
33
- console.log('Theme toggled to:', newTheme);
34
- };
35
-
36
- return (
37
- <Screen>
38
- <View style={{ maxWidth: 800, width: '100%', gap: 10, marginHorizontal: 'auto' }}>
39
- {/* Theme Controls Section */}
40
- <View style={{ gap: 12, padding: 16, backgroundColor: 'rgba(128, 128, 128, 0.1)', borderRadius: 8 }}>
41
- <Text size="medium" weight="bold">
42
- Theme Controls
43
- </Text>
44
- <Text size="small">
45
- Current Theme: {getThemeDisplayName(currentTheme)}
46
- </Text>
47
-
48
- <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
49
- <Button
50
- variant="outlined"
51
- intent="primary"
52
- size="medium"
53
- onPress={cycleTheme}
54
- >
55
- 🔄 Cycle Theme
56
- </Button>
57
-
58
- <Button
59
- variant="outlined"
60
- intent="neutral"
61
- size="medium"
62
- onPress={toggleHighContrast}
63
- >
64
- ♿ Toggle High Contrast
65
- </Button>
66
- </View>
67
-
68
- {isHighContrastTheme(currentTheme) && (
69
- <Text size="small" style={{ fontStyle: 'italic', color: '#666' }}>
70
- ♿ High contrast mode is active for better accessibility
71
- </Text>
72
- )}
73
- </View>
74
-
75
- {/* Component Navigation Buttons */}
76
- <View style={{ gap: 10 }}>
77
- <Button
78
- onPress={() => {
79
- navigator.navigate({
80
- path: "/avatar",
81
- vars: {},
82
- });
83
- }}>
84
- Avatar
85
- </Button>
86
- <Button
87
- onPress={() => {
88
- navigator.navigate({
89
- path: "/badge",
90
- vars: {},
91
- });
92
- }}>
93
- Badge
94
- </Button>
95
- <Button
96
- onPress={() => {
97
- navigator.navigate({
98
- path: "/button",
99
- vars: {},
100
- });
101
- }}>
102
- Button
103
- </Button>
104
- <Button
105
- onPress={() => {
106
- navigator.navigate({
107
- path: "/card",
108
- vars: {},
109
- });
110
- }}>
111
- Card
112
- </Button>
113
- <Button
114
- onPress={() => {
115
- navigator.navigate({
116
- path: "/checkbox",
117
- vars: {},
118
- });
119
- }}>
120
- Checkbox
121
- </Button>
122
- <Button
123
- onPress={() => {
124
- navigator.navigate({
125
- path: "/divider",
126
- vars: {},
127
- });
128
- }}>
129
- Divider
130
- </Button>
131
- <Button
132
- onPress={() => {
133
- navigator.navigate({
134
- path: "/input",
135
- vars: {},
136
- });
137
- }}>
138
- Input
139
- </Button>
140
- <Button
141
- onPress={() => {
142
- navigator.navigate({
143
- path: "/text",
144
- vars: {},
145
- });
146
- }}>
147
- Text
148
- </Button>
149
- <Button
150
- onPress={() => {
151
- navigator.navigate({
152
- path: "/view",
153
- vars: {},
154
- });
155
- }}>
156
- View
157
- </Button>
158
- <Button
159
- onPress={() => {
160
- navigator.navigate({
161
- path: "/screen",
162
- vars: {},
163
- });
164
- }}>
165
- Screen
166
- </Button>
167
- <Button
168
- onPress={() => {
169
- navigator.navigate({
170
- path: "/icon",
171
- vars: {},
172
- });
173
- }}>
174
- Icon
175
- </Button>
176
-
177
- <Divider spacing="medium" />
178
- <Text size="small" weight="semibold" color="secondary">Theme System</Text>
179
- <Button
180
- variant="outlined"
181
- intent="success"
182
- onPress={() => {
183
- navigator.navigate({
184
- path: "/theme-extension",
185
- vars: {},
186
- });
187
- }}>
188
- 🎨 Theme Extension Demo
189
- </Button>
190
- </View>
191
- </View>
192
- </Screen>
193
- )
194
- };
195
-
196
- const WrappedGeneralLayout = (props: any) => {
197
-
198
- const navigator = useNavigator();
199
-
200
- return (
201
- <GeneralLayout
202
- header={{
203
- content: <Text style={{ marginHorizontal: 'auto' }} color="inverse">Stack Router Demo App</Text>,
204
- }}
205
- sidebar={{
206
- enabled: true,
207
- collapsible: true,
208
- position: 'left',
209
- initiallyExpanded: false,
210
- content: <Button onPress={() => {
211
- navigator.navigate({
212
- path: "/",
213
- vars: {},
214
- });
215
- }}>Home</Button>,
216
- }}
217
- {...props}>
218
- </GeneralLayout>
219
- )
220
- }
221
-
222
- const StackRouter: RouteParam = {
223
- path: "/",
224
- component: HomeScreen,
225
- layout: {
226
- type: "stack",
227
- component: WrappedGeneralLayout,
228
- },
229
- routes: [
230
- { path: "avatar", component: AvatarExamples},
231
- { path: "badge", component: BadgeExamples},
232
- { path: "button", component: ButtonExamples},
233
- { path: "card", component: CardExamples},
234
- { path: "checkbox", component: CheckboxExamples},
235
- { path: "divider", component: DividerExamples},
236
- { path: "input", component: InputExamples},
237
- { path: "text", component: TextExamples},
238
- { path: "view", component: ViewExamples},
239
- { path: "screen", component: ScreenExamples},
240
- { path: "icon", component: IconExamples},
241
- { path: "theme-extension", component: ThemeExtensionExamples},
242
- ],
243
- };
244
-
1
+ import React, { useState } from 'react';
2
+ import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DividerExamples, IconExamples, InputExamples, ScreenExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
3
+ import { Button, Divider, Screen, Text, View } from "../../../components/src";
4
+ import { useNavigator } from "../context";
5
+ import { UnistylesRuntime, StyleSheet } from 'react-native-unistyles';
6
+ import { GeneralLayout } from '../layouts/GeneralLayout';
7
+ import { RouteParam } from '../routing';
8
+ import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
9
+
10
+ const HomeScreen = () => {
11
+ const navigator = useNavigator();
12
+ const currentTheme = UnistylesRuntime.themeName || 'light';
13
+
14
+ const cycleTheme = () => {
15
+ const nextTheme = getNextTheme(currentTheme);
16
+ UnistylesRuntime.setTheme(nextTheme as any);
17
+ console.log('Theme changed to:', nextTheme);
18
+ };
19
+
20
+ const toggleHighContrast = () => {
21
+ const currentTheme = UnistylesRuntime.themeName || 'light';
22
+ let newTheme: string;
23
+
24
+ if (isHighContrastTheme(currentTheme)) {
25
+ // Switch to standard variant
26
+ newTheme = currentTheme.includes('dark') ? 'dark' : 'light';
27
+ } else {
28
+ // Switch to high contrast variant
29
+ newTheme = currentTheme.includes('dark') ? 'darkHighContrast' : 'lightHighContrast';
30
+ }
31
+
32
+ UnistylesRuntime.setTheme(newTheme as any);
33
+ console.log('Theme toggled to:', newTheme);
34
+ };
35
+
36
+ return (
37
+ <Screen>
38
+ <View style={{ maxWidth: 800, width: '100%', gap: 10, marginHorizontal: 'auto' }}>
39
+ {/* Theme Controls Section */}
40
+ <View style={{ gap: 12, padding: 16, backgroundColor: 'rgba(128, 128, 128, 0.1)', borderRadius: 8 }}>
41
+ <Text size="medium" weight="bold">
42
+ Theme Controls
43
+ </Text>
44
+ <Text size="small">
45
+ Current Theme: {getThemeDisplayName(currentTheme)}
46
+ </Text>
47
+
48
+ <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
49
+ <Button
50
+ variant="outlined"
51
+ intent="primary"
52
+ size="medium"
53
+ onPress={cycleTheme}
54
+ >
55
+ 🔄 Cycle Theme
56
+ </Button>
57
+
58
+ <Button
59
+ variant="outlined"
60
+ intent="neutral"
61
+ size="medium"
62
+ onPress={toggleHighContrast}
63
+ >
64
+ ♿ Toggle High Contrast
65
+ </Button>
66
+ </View>
67
+
68
+ {isHighContrastTheme(currentTheme) && (
69
+ <Text size="small" style={{ fontStyle: 'italic', color: '#666' }}>
70
+ ♿ High contrast mode is active for better accessibility
71
+ </Text>
72
+ )}
73
+ </View>
74
+
75
+ {/* Component Navigation Buttons */}
76
+ <View style={{ gap: 10 }}>
77
+ <Button
78
+ onPress={() => {
79
+ navigator.navigate({
80
+ path: "/avatar",
81
+ vars: {},
82
+ });
83
+ }}>
84
+ Avatar
85
+ </Button>
86
+ <Button
87
+ onPress={() => {
88
+ navigator.navigate({
89
+ path: "/badge",
90
+ vars: {},
91
+ });
92
+ }}>
93
+ Badge
94
+ </Button>
95
+ <Button
96
+ onPress={() => {
97
+ navigator.navigate({
98
+ path: "/button",
99
+ vars: {},
100
+ });
101
+ }}>
102
+ Button
103
+ </Button>
104
+ <Button
105
+ onPress={() => {
106
+ navigator.navigate({
107
+ path: "/card",
108
+ vars: {},
109
+ });
110
+ }}>
111
+ Card
112
+ </Button>
113
+ <Button
114
+ onPress={() => {
115
+ navigator.navigate({
116
+ path: "/checkbox",
117
+ vars: {},
118
+ });
119
+ }}>
120
+ Checkbox
121
+ </Button>
122
+ <Button
123
+ onPress={() => {
124
+ navigator.navigate({
125
+ path: "/divider",
126
+ vars: {},
127
+ });
128
+ }}>
129
+ Divider
130
+ </Button>
131
+ <Button
132
+ onPress={() => {
133
+ navigator.navigate({
134
+ path: "/input",
135
+ vars: {},
136
+ });
137
+ }}>
138
+ Input
139
+ </Button>
140
+ <Button
141
+ onPress={() => {
142
+ navigator.navigate({
143
+ path: "/text",
144
+ vars: {},
145
+ });
146
+ }}>
147
+ Text
148
+ </Button>
149
+ <Button
150
+ onPress={() => {
151
+ navigator.navigate({
152
+ path: "/view",
153
+ vars: {},
154
+ });
155
+ }}>
156
+ View
157
+ </Button>
158
+ <Button
159
+ onPress={() => {
160
+ navigator.navigate({
161
+ path: "/screen",
162
+ vars: {},
163
+ });
164
+ }}>
165
+ Screen
166
+ </Button>
167
+ <Button
168
+ onPress={() => {
169
+ navigator.navigate({
170
+ path: "/icon",
171
+ vars: {},
172
+ });
173
+ }}>
174
+ Icon
175
+ </Button>
176
+
177
+ <Divider spacing="medium" />
178
+ <Text size="small" weight="semibold" color="secondary">Theme System</Text>
179
+ <Button
180
+ variant="outlined"
181
+ intent="success"
182
+ onPress={() => {
183
+ navigator.navigate({
184
+ path: "/theme-extension",
185
+ vars: {},
186
+ });
187
+ }}>
188
+ 🎨 Theme Extension Demo
189
+ </Button>
190
+ </View>
191
+ </View>
192
+ </Screen>
193
+ )
194
+ };
195
+
196
+ const WrappedGeneralLayout = (props: any) => {
197
+
198
+ const navigator = useNavigator();
199
+
200
+ return (
201
+ <GeneralLayout
202
+ header={{
203
+ content: <Text style={{ marginHorizontal: 'auto' }} color="inverse">Stack Router Demo App</Text>,
204
+ }}
205
+ sidebar={{
206
+ enabled: true,
207
+ collapsible: true,
208
+ position: 'left',
209
+ initiallyExpanded: false,
210
+ content: <Button onPress={() => {
211
+ navigator.navigate({
212
+ path: "/",
213
+ vars: {},
214
+ });
215
+ }}>Home</Button>,
216
+ }}
217
+ {...props}>
218
+ </GeneralLayout>
219
+ )
220
+ }
221
+
222
+ const StackRouter: RouteParam = {
223
+ path: "/",
224
+ component: HomeScreen,
225
+ layout: {
226
+ type: "stack",
227
+ component: WrappedGeneralLayout,
228
+ },
229
+ routes: [
230
+ { path: "avatar", component: AvatarExamples},
231
+ { path: "badge", component: BadgeExamples},
232
+ { path: "button", component: ButtonExamples},
233
+ { path: "card", component: CardExamples},
234
+ { path: "checkbox", component: CheckboxExamples},
235
+ { path: "divider", component: DividerExamples},
236
+ { path: "input", component: InputExamples},
237
+ { path: "text", component: TextExamples},
238
+ { path: "view", component: ViewExamples},
239
+ { path: "screen", component: ScreenExamples},
240
+ { path: "icon", component: IconExamples},
241
+ { path: "theme-extension", component: ThemeExtensionExamples},
242
+ ],
243
+ };
244
+
245
245
  export default StackRouter;