@idealyst/navigation 1.0.83 → 1.0.84

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 (29) hide show
  1. package/package.json +10 -3
  2. package/src/context/NavigatorContext.native.tsx +37 -6
  3. package/src/context/NavigatorContext.web.tsx +3 -1
  4. package/src/context/types.ts +2 -0
  5. package/src/examples/CustomStackLayout.tsx +1 -3
  6. package/src/examples/CustomTabLayout.tsx +6 -5
  7. package/src/examples/ExampleNavigationRouter.tsx +111 -0
  8. package/src/examples/ExampleSearchDialog.tsx +134 -0
  9. package/src/examples/ExampleSidebar.tsx +134 -0
  10. package/src/examples/ExampleWebLayout.tsx +107 -0
  11. package/src/examples/HeaderRight.tsx +27 -0
  12. package/src/examples/index.ts +3 -5
  13. package/src/examples/unistyles.ts +6 -12
  14. package/src/index.native.ts +4 -1
  15. package/src/layouts/DefaultStackLayout.tsx +5 -3
  16. package/src/layouts/DefaultTabLayout.tsx +10 -5
  17. package/src/routing/DrawerContentWrapper.native.tsx +25 -0
  18. package/src/routing/HeaderWrapper.native.tsx +19 -0
  19. package/src/routing/router.native.tsx +133 -23
  20. package/src/routing/router.web.tsx +1 -2
  21. package/src/routing/types.ts +40 -12
  22. package/CLAUDE.md +0 -417
  23. package/LLM-ACCESS-GUIDE.md +0 -166
  24. package/src/examples/ExampleDrawerRouter.tsx +0 -196
  25. package/src/examples/ExampleHybridRouter.tsx +0 -62
  26. package/src/examples/ExampleStackRouter.tsx +0 -276
  27. package/src/examples/ExampleTabRouter.tsx +0 -318
  28. package/src/examples/README.md +0 -394
  29. package/src/examples/highContrastThemes.ts +0 -583
package/src/examples/ExampleTabRouter.tsx DELETED
@@ -1,318 +0,0 @@
1
- import React from 'react';
2
- import { ButtonExamples, CardExamples, IconExamples, SVGImageExamples, ThemeExtensionExamples } from "../../../components/src/examples";
3
- import { Screen, Text, View, Button, Icon } from "../../../components/src";
4
- import { UnistylesRuntime } from 'react-native-unistyles';
5
- import { NavigatorParam, RouteParam } from '../routing';
6
- import { useNavigator } from '../context';
7
- import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
8
- import CustomTabLayout from './CustomTabLayout';
9
-
10
- const HomeTabScreen = () => {
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
- newTheme = currentTheme.includes('dark') ? 'dark' : 'light';
26
- } else {
27
- newTheme = currentTheme.includes('dark') ? 'darkHighContrast' : 'lightHighContrast';
28
- }
29
-
30
- UnistylesRuntime.setTheme(newTheme as any);
31
- console.log('Theme toggled to:', newTheme);
32
- };
33
-
34
- return (
35
- <Screen>
36
- <View spacing="lg">
37
- <Text size="large" weight="bold">
38
- TabBar Navigation Demo
39
- </Text>
40
- <Text size="medium">
41
- This demonstrates native tab navigation with custom headers
42
- </Text>
43
-
44
- <View spacing="sm" style={{ padding: 12, backgroundColor: 'rgba(0,150,255,0.1)', borderRadius: 8 }}>
45
- <Text size="small" weight="semibold">📋 Header Features Demonstrated:</Text>
46
- <Text size="small">• headerTitle: Custom title component with icon</Text>
47
- <Text size="small">• headerLeft: Menu button (appears before title)</Text>
48
- <Text size="small">• headerRight: Multiple action buttons</Text>
49
- <Text size="small">• Cross-platform: Works on both mobile and web</Text>
50
- </View>
51
-
52
- <View spacing="md" style={{ marginTop: 24 }}>
53
- <Text size="medium" weight="semibold">Navigation Tabs</Text>
54
- <Text size="small">
55
- Each tab demonstrates different header configurations:
56
- </Text>
57
- <Text size="small">• Home: Custom headerTitle, headerLeft menu, headerRight actions</Text>
58
- <Text size="small">• Components: Simple headerLeft back button, headerRight refresh</Text>
59
- <Text size="small">• Settings: String headerTitle override, help + menu buttons</Text>
60
- <Text size="small">• Theme: Component headerTitle with icon, save button</Text>
61
-
62
- <View spacing="sm">
63
- <Button size="small" variant="outlined" onPress={() => navigator.navigate({ path: '/components', vars: {} })}>
64
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
65
- <Icon name="view-dashboard" size="sm" style={{ marginRight: 8 }} />
66
- <Text>Components Tab</Text>
67
- </View>
68
- </Button>
69
- <Button size="small" variant="outlined" onPress={() => navigator.navigate({ path: '/settings', vars: {} })}>
70
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
71
- <Icon name="cog" size="sm" style={{ marginRight: 8 }} />
72
- <Text>Settings Tab</Text>
73
- </View>
74
- </Button>
75
- <Button size="small" variant="outlined" onPress={() => navigator.navigate({ path: '/theme', vars: {} })}>
76
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
77
- <Icon name="palette" size="sm" style={{ marginRight: 8 }} />
78
- <Text>Theme Tab</Text>
79
- </View>
80
- </Button>
81
- </View>
82
- </View>
83
-
84
- <View spacing="md" style={{ marginTop: 24 }}>
85
- <Text size="medium" weight="semibold">Theme Controls</Text>
86
- <Text size="small">Current Theme: {getThemeDisplayName(currentTheme)}</Text>
87
-
88
- <View style={{ flexDirection: 'row', marginTop: 12 }}>
89
- <Button variant="outlined" onPress={cycleTheme} style={{ marginRight: 12 }}>
90
- Cycle Theme
91
- </Button>
92
- <Button variant="outlined" onPress={toggleHighContrast}>
93
- Toggle High Contrast
94
- </Button>
95
- </View>
96
-
97
- {isHighContrastTheme(currentTheme) && (
98
- <Text size="small" style={{ fontStyle: 'italic', marginTop: 8 }}>
99
- ♿ High contrast mode is active for better accessibility
100
- </Text>
101
- )}
102
- </View>
103
- </View>
104
- </Screen>
105
- );
106
- };
107
-
108
- const ComponentsTabScreen = () => (
109
- <Screen>
110
- <View spacing="lg">
111
- <Text size="large" weight="bold">Components</Text>
112
- <Text>Explore UI components with custom header navigation</Text>
113
-
114
- <View spacing="sm" style={{ padding: 12, backgroundColor: 'rgba(100,200,100,0.1)', borderRadius: 8 }}>
115
- <Text size="small" weight="semibold">🔧 This tab demonstrates:</Text>
116
- <Text size="small">• headerLeft: Back arrow button</Text>
117
- <Text size="small">• headerRight: Refresh action button</Text>
118
- <Text size="small">• Default title: Uses 'Components' from screenOptions</Text>
119
- </View>
120
-
121
- <View spacing="md">
122
- <Text size="medium" weight="semibold">Button Examples</Text>
123
- <ButtonExamples />
124
- </View>
125
-
126
- <View spacing="md">
127
- <Text size="medium" weight="semibold">Card Examples</Text>
128
- <CardExamples />
129
- </View>
130
-
131
- <View spacing="md">
132
- <Text size="medium" weight="semibold">Icon Examples</Text>
133
- <IconExamples />
134
- </View>
135
-
136
- <View spacing="md">
137
- <Text size="medium" weight="semibold">SVG Image Examples</Text>
138
- <SVGImageExamples />
139
- </View>
140
- </View>
141
- </Screen>
142
- );
143
-
144
- const SettingsTabScreen = () => {
145
- const currentTheme = UnistylesRuntime.themeName || 'light';
146
-
147
- return (
148
- <Screen>
149
- <View spacing="lg">
150
- <Text size="large" weight="bold">Settings</Text>
151
- <Text>Configure the TabBar demo settings</Text>
152
-
153
- <View spacing="sm" style={{ padding: 12, backgroundColor: 'rgba(255,150,0,0.1)', borderRadius: 8 }}>
154
- <Text size="small" weight="semibold">⚙️ This tab demonstrates:</Text>
155
- <Text size="small">• headerTitle: String override ('App Settings')</Text>
156
- <Text size="small">• headerLeft: Chevron back button</Text>
157
- <Text size="small">• headerRight: Help + menu buttons</Text>
158
- <Text size="small">• Notice: Title in header != tab title</Text>
159
- </View>
160
-
161
- <View spacing="md">
162
- <Text size="medium" weight="semibold">Screen Options Used</Text>
163
- <Text size="small" style={{ fontFamily: 'monospace', backgroundColor: 'rgba(0,0,0,0.05)', padding: 8 }}>
164
- Test
165
- </Text>
166
- </View>
167
-
168
- <View spacing="md">
169
- <Text size="medium" weight="semibold">Current State</Text>
170
- <Text size="small">Theme: {getThemeDisplayName(currentTheme)}</Text>
171
- <Text size="small">Platform: React Navigation (Native) / React Router (Web)</Text>
172
- </View>
173
- </View>
174
- </Screen>
175
- );
176
- };
177
-
178
- const ThemeTabScreen = () => (
179
- <Screen>
180
- <View spacing="lg">
181
- <Text size="large" weight="bold">Theme System</Text>
182
- <Text>Explore the theme extension system with custom header</Text>
183
-
184
- <View spacing="sm" style={{ padding: 12, backgroundColor: 'rgba(150,0,255,0.1)', borderRadius: 8 }}>
185
- <Text size="small" weight="semibold">🎨 This tab demonstrates:</Text>
186
- <Text size="small">• headerTitle: React component with icon + text</Text>
187
- <Text size="small">• headerRight: Styled save button</Text>
188
- <Text size="small">• Custom styling: Intent colors and typography</Text>
189
- </View>
190
-
191
- <ThemeExtensionExamples />
192
- </View>
193
- </Screen>
194
- );
195
-
196
- const TabRouter: NavigatorParam = {
197
- path: "/",
198
- layout: 'tab',
199
- layoutComponent: CustomTabLayout,
200
- routes: [
201
- {
202
- path: '/',
203
- type: 'screen',
204
- component: HomeTabScreen,
205
- options: {
206
- title: 'Home',
207
- headerTitle: () => (
208
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
209
- <Icon name="home" size="md" style={{ marginRight: 8 }} />
210
- <Text size="large" weight="bold">Tab Demo</Text>
211
- </View>
212
- ),
213
- headerLeft: () => (
214
- <Button variant="text" size="small">
215
- <Icon name="menu" size="md" />
216
- </Button>
217
- ),
218
- headerRight: () => (
219
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
220
- <Button variant="text" size="small" style={{ marginRight: 8 }}>
221
- <Icon name="bell" size="md" />
222
- </Button>
223
- <Button variant="text" size="small">
224
- <Icon name="account" size="md" />
225
- </Button>
226
- </View>
227
- ),
228
- tabBarLabel: 'Home',
229
- tabBarIcon: ({ focused, size }) => {
230
- return <Icon name="home" color={focused ? 'blue' : 'black'} size={size} />
231
- },
232
- },
233
- },
234
- {
235
- path: "components",
236
- component: ComponentsTabScreen,
237
- type: 'screen',
238
- options: {
239
- title: 'Components',
240
- headerLeft: () => (
241
- <Button variant="text" size="small">
242
- <Icon name="arrow-left" size="md" />
243
- </Button>
244
- ),
245
- headerRight: () => (
246
- <Button variant="text" size="small">
247
- <Icon name="refresh" size="md" />
248
- </Button>
249
- ),
250
- tabBarLabel: 'Components',
251
- tabBarIcon: (props) => {
252
- if (props.focused) {
253
- return <Icon name="view-dashboard" color={props.focused ? 'blue' : 'black'} size={props.size} />;
254
- }
255
- return <Icon name="view-dashboard-outline" color={props.color} size={props.size} />;
256
- },
257
- },
258
- },
259
- {
260
- path: "settings",
261
- component: SettingsTabScreen,
262
- type: 'screen',
263
- options: {
264
- title: 'Settings',
265
- headerTitle: 'App Settings',
266
- headerLeft: () => (
267
- <Button variant="text" size="small">
268
- <Icon name="chevron-left" size="md" />
269
- </Button>
270
- ),
271
- headerRight: () => (
272
- <View style={{ flexDirection: 'row' }}>
273
- <Button variant="text" size="small" style={{ marginRight: 4 }}>
274
- <Icon name="help-circle" size="md" />
275
- </Button>
276
- <Button variant="text" size="small">
277
- <Icon name="dots-vertical" size="md" />
278
- </Button>
279
- </View>
280
- ),
281
- tabBarLabel: 'Settings',
282
- tabBarIcon: ({ focused, size }) => (
283
- <Icon
284
- name="cog"
285
- color={focused ? 'blue' : 'black'}
286
- size={size}
287
- style={{ opacity: focused ? 1 : 0.8 }}
288
- />
289
- ),
290
- },
291
- },
292
- {
293
- path: "theme",
294
- component: ThemeTabScreen,
295
- type: 'screen',
296
- options: {
297
- title: 'Theme',
298
- headerTitle: () => (
299
- <View style={{ flexDirection: 'row', alignItems: 'center' }}>
300
- <Icon name="palette" size="sm" style={{ marginRight: 6 }} />
301
- <Text size="medium" weight="semibold">Theme System</Text>
302
- </View>
303
- ),
304
- headerRight: () => (
305
- <Button variant="contained" size="small" intent="primary">
306
- <Text size="small" color="white">Save</Text>
307
- </Button>
308
- ),
309
- tabBarLabel: 'Theme',
310
- tabBarIcon: ({ focused, size }) => (
311
- <Icon name="palette" color={focused ? 'blue' : 'black'} size={size} />
312
- ),
313
- },
314
- },
315
- ],
316
- };
317
-
318
- export default TabRouter;