@idealyst/navigation 1.0.0 → 1.0.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/package.json CHANGED
@@ -1,76 +1,75 @@
1
- {
2
- "name": "@idealyst/navigation",
3
- "version": "1.0.0",
4
- "description": "Cross-platform navigation library for React and React Native",
5
- "main": "src/index.ts",
6
- "module": "src/index.ts",
7
- "types": "src/index.ts",
8
- "repository": {
9
- "type": "git",
10
- "url": "https://github.com/your-username/idealyst-framework.git",
11
- "directory": "packages/navigation"
12
- },
13
- "author": "Nicholas Mercier <nicho.mercier@gmail.com>",
14
- "license": "MIT",
15
- "publishConfig": {
16
- "access": "public"
17
- },
18
- "exports": {
19
- ".": {
20
- "import": "./src/index.ts",
21
- "require": "./src/index.ts",
22
- "types": "./src/index.ts"
23
- },
24
- "./examples": {
25
- "import": "./src/examples/index.ts",
26
- "require": "./src/examples/index.ts",
27
- "types": "./src/examples/index.ts"
28
- },
29
- "./examples/unistyles": {
30
- "import": "./src/examples/unistyles.ts",
31
- "require": "./src/examples/unistyles.ts",
32
- "types": "./src/examples/unistyles.ts"
33
- }
34
- },
35
- "scripts": {
36
- "build": "rollup -c",
37
- "dev": "rollup -c -w",
38
- "prepublishOnly": "echo 'Publishing TypeScript source directly'",
39
- "publish:npm": "npm publish"
40
- },
41
- "dependencies": {
42
- "@idealyst/components": "^1.0.0"
43
- },
44
- "peerDependencies": {
45
- "@react-navigation/bottom-tabs": "^7.0.0",
46
- "@react-navigation/drawer": "^7.0.0",
47
- "@react-navigation/native": "^7.0.0",
48
- "@react-navigation/native-stack": "^7.0.0",
49
- "react": ">=16.8.0",
50
- "react-native": ">=0.60.0",
51
- "react-native-gesture-handler": "*",
52
- "react-native-reanimated": "*",
53
- "react-native-safe-area-context": "*",
54
- "react-native-screens": "*",
55
- "react-native-unistyles": "3.0.0-rc.5",
56
- "react-router": "^7.6.3",
57
- "react-router-dom": "^7.6.3"
58
- },
59
- "devDependencies": {
60
- "@types/react": "^19.1.8",
61
- "@types/react-dom": "^19.1.6",
62
- "rollup": "^3.20.0",
63
- "rollup-plugin-typescript2": "^0.34.0",
64
- "typescript": "^5.0.0"
65
- },
66
- "files": [
67
- "src"
68
- ],
69
- "keywords": [
70
- "react",
71
- "react-native",
72
- "navigation",
73
- "cross-platform",
74
- "router"
75
- ]
76
- }
1
+ {
2
+ "name": "@idealyst/navigation",
3
+ "version": "1.0.2",
4
+ "description": "Cross-platform navigation library for React and React Native",
5
+ "main": "src/index.ts",
6
+ "module": "src/index.ts",
7
+ "types": "src/index.ts",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/your-username/idealyst-framework.git",
11
+ "directory": "packages/navigation"
12
+ },
13
+ "author": "Nicholas Mercier <nicho.mercier@gmail.com>",
14
+ "license": "MIT",
15
+ "publishConfig": {
16
+ "access": "public"
17
+ },
18
+ "exports": {
19
+ ".": {
20
+ "import": "./src/index.ts",
21
+ "require": "./src/index.ts",
22
+ "types": "./src/index.ts"
23
+ },
24
+ "./examples": {
25
+ "import": "./src/examples/index.ts",
26
+ "require": "./src/examples/index.ts",
27
+ "types": "./src/examples/index.ts"
28
+ },
29
+ "./examples/unistyles": {
30
+ "import": "./src/examples/unistyles.ts",
31
+ "require": "./src/examples/unistyles.ts",
32
+ "types": "./src/examples/unistyles.ts"
33
+ }
34
+ },
35
+ "scripts": {
36
+ "build": "rollup -c",
37
+ "dev": "rollup -c -w",
38
+ "prepublishOnly": "echo 'Publishing TypeScript source directly'",
39
+ "publish:npm": "npm publish"
40
+ },
41
+ "peerDependencies": {
42
+ "@idealyst/components": "workspace:^1.0.2",
43
+ "@idealyst/theme": "workspace:^1.0.2",
44
+ "@react-navigation/bottom-tabs": "^7.0.0",
45
+ "@react-navigation/drawer": "^7.0.0",
46
+ "@react-navigation/native": "^7.0.0",
47
+ "@react-navigation/native-stack": "^7.0.0",
48
+ "react": ">=16.8.0",
49
+ "react-native": ">=0.60.0",
50
+ "react-native-gesture-handler": "*",
51
+ "react-native-reanimated": "*",
52
+ "react-native-safe-area-context": "*",
53
+ "react-native-screens": "*",
54
+ "react-native-unistyles": "^3.0.4",
55
+ "react-router": "^7.6.3",
56
+ "react-router-dom": "^7.6.3"
57
+ },
58
+ "devDependencies": {
59
+ "@types/react": "^19.1.8",
60
+ "@types/react-dom": "^19.1.6",
61
+ "rollup": "^3.20.0",
62
+ "rollup-plugin-typescript2": "^0.34.0",
63
+ "typescript": "^5.0.0"
64
+ },
65
+ "files": [
66
+ "src"
67
+ ],
68
+ "keywords": [
69
+ "react",
70
+ "react-native",
71
+ "navigation",
72
+ "cross-platform",
73
+ "router"
74
+ ]
75
+ }
@@ -1,7 +1,6 @@
1
1
  import {
2
2
  createTheme,
3
- type ThemeConfig,
4
- } from '@idealyst/components/src/theme';
3
+ } from '@idealyst/theme';
5
4
 
6
5
  // High contrast color palettes - designed for maximum accessibility
7
6
  export const highContrastLightPalettes = {
@@ -1,4 +1,4 @@
1
- import { breakpoints, extendedThemes } from '@idealyst/components/src/theme';
1
+ import { breakpoints, defaultLightTheme, defaultDarkTheme } from '@idealyst/theme';
2
2
  import { highContrastThemes } from './highContrastThemes';
3
3
  import { StyleSheet } from 'react-native-unistyles';
4
4
 
@@ -6,8 +6,8 @@ import { StyleSheet } from 'react-native-unistyles';
6
6
  // This overrides the more limited declaration from the components package
7
7
  declare module 'react-native-unistyles' {
8
8
  export interface UnistylesThemes {
9
- light: typeof extendedThemes.light;
10
- dark: typeof extendedThemes.dark;
9
+ light: typeof defaultLightTheme;
10
+ dark: typeof defaultDarkTheme;
11
11
  lightHighContrast: typeof highContrastThemes.lightHighContrast;
12
12
  darkHighContrast: typeof highContrastThemes.darkHighContrast;
13
13
  }
@@ -17,8 +17,8 @@ declare module 'react-native-unistyles' {
17
17
  // This will override any previous configuration
18
18
  StyleSheet.configure({
19
19
  themes: {
20
- light: extendedThemes.light,
21
- dark: extendedThemes.dark,
20
+ light: defaultLightTheme,
21
+ dark: defaultDarkTheme,
22
22
  lightHighContrast: highContrastThemes.lightHighContrast,
23
23
  darkHighContrast: highContrastThemes.darkHighContrast,
24
24
  },
@@ -1,171 +0,0 @@
1
- # GeneralLayout
2
-
3
- A flexible layout component that provides a sidebar and header for web applications using the @idealyst/components library.
4
-
5
- ## Features
6
-
7
- - **Collapsible Sidebar**: Expandable and collapsible sidebar with smooth animations
8
- - **Configurable Header**: Optional header with customizable content and height
9
- - **Responsive Design**: Adapts to different screen sizes
10
- - **Theme Integration**: Uses @idealyst/components theme system
11
- - **Flexible Configuration**: Both sidebar and header can be disabled
12
-
13
- ## Usage
14
-
15
- ```tsx
16
- import { GeneralLayout } from '@idealyst/navigation';
17
- import { View, Text } from '@idealyst/components';
18
-
19
- function App() {
20
- return (
21
- <GeneralLayout
22
- header={{
23
- enabled: true,
24
- height: 64,
25
- content: <Text>My Header Content</Text>,
26
- }}
27
- sidebar={{
28
- enabled: true,
29
- initiallyExpanded: true,
30
- expandedWidth: 280,
31
- collapsedWidth: 60,
32
- collapsible: true,
33
- position: 'left',
34
- content: <Text>My Sidebar Content</Text>,
35
- }}
36
- >
37
- <View>
38
- <Text>Main content goes here</Text>
39
- </View>
40
- </GeneralLayout>
41
- );
42
- }
43
- ```
44
-
45
- ## Props
46
-
47
- ### GeneralLayoutProps
48
-
49
- | Prop | Type | Default | Description |
50
- |------|------|---------|-------------|
51
- | `children` | `ReactNode` | - | The main content to display |
52
- | `sidebar` | `SidebarConfig` | `{}` | Sidebar configuration object |
53
- | `header` | `HeaderConfig` | `{}` | Header configuration object |
54
- | `style` | `any` | - | Additional styles for the layout container |
55
- | `testID` | `string` | - | Test ID for testing |
56
-
57
- ### SidebarConfig
58
-
59
- | Prop | Type | Default | Description |
60
- |------|------|---------|-------------|
61
- | `enabled` | `boolean` | `true` | Whether the sidebar is enabled |
62
- | `initiallyExpanded` | `boolean` | `true` | Whether the sidebar is initially expanded |
63
- | `expandedWidth` | `number` | `280` | Width of the sidebar when expanded (px) |
64
- | `collapsedWidth` | `number` | `60` | Width of the sidebar when collapsed (px) |
65
- | `collapsible` | `boolean` | `true` | Whether the sidebar can be collapsed |
66
- | `position` | `'left' \| 'right'` | `'left'` | Position of the sidebar |
67
- | `content` | `ReactNode` | - | Content to display in the sidebar |
68
- | `style` | `any` | - | Custom styles for the sidebar |
69
-
70
- ### HeaderConfig
71
-
72
- | Prop | Type | Default | Description |
73
- |------|------|---------|-------------|
74
- | `enabled` | `boolean` | `true` | Whether the header is enabled |
75
- | `height` | `number` | `64` | Height of the header (px) |
76
- | `content` | `ReactNode` | - | Content to display in the header |
77
- | `style` | `any` | - | Custom styles for the header |
78
-
79
- ## Examples
80
-
81
- ### Basic Layout with Header and Sidebar
82
-
83
- ```tsx
84
- <GeneralLayout
85
- header={{
86
- content: <Text>My App</Text>,
87
- }}
88
- sidebar={{
89
- content: (
90
- <View>
91
- <Text>Home</Text>
92
- <Text>About</Text>
93
- </View>
94
- ),
95
- }}
96
- >
97
- <View>
98
- <Text>Main content</Text>
99
- </View>
100
- </GeneralLayout>
101
- ```
102
-
103
- ### Layout with Disabled Header
104
-
105
- ```tsx
106
- <GeneralLayout
107
- header={{ enabled: false }}
108
- sidebar={{
109
- content: <Text>Navigation items</Text>,
110
- }}
111
- >
112
- <View>
113
- <Text>Main content</Text>
114
- </View>
115
- </GeneralLayout>
116
- ```
117
-
118
- ### Layout with Right Sidebar
119
-
120
- ```tsx
121
- <GeneralLayout
122
- sidebar={{
123
- position: 'right',
124
- content: <Text>Right sidebar content</Text>,
125
- }}
126
- >
127
- <View>
128
- <Text>Main content</Text>
129
- </View>
130
- </GeneralLayout>
131
- ```
132
-
133
- ### Layout with Custom Dimensions
134
-
135
- ```tsx
136
- <GeneralLayout
137
- header={{
138
- height: 80,
139
- content: <Text>Tall header</Text>,
140
- }}
141
- sidebar={{
142
- expandedWidth: 320,
143
- collapsedWidth: 80,
144
- content: <Text>Wide sidebar</Text>,
145
- }}
146
- >
147
- <View>
148
- <Text>Main content</Text>
149
- </View>
150
- </GeneralLayout>
151
- ```
152
-
153
- ## Styling
154
-
155
- The GeneralLayout uses the @idealyst/components theme system for consistent styling:
156
-
157
- - **Background**: Uses `background="surface"` for sidebar and header
158
- - **Borders**: Uses `border="thin"` for visual separation
159
- - **Spacing**: Uses `spacing="md"` for consistent padding
160
- - **Theme Integration**: Automatically inherits theme colors and spacing
161
-
162
- ## Platform Support
163
-
164
- Currently, the GeneralLayout only supports web platforms. React Native support may be added in future versions.
165
-
166
- ## Implementation Notes
167
-
168
- - The layout uses CSS flexbox for responsive behavior
169
- - Sidebar transitions use CSS animations for smooth expand/collapse
170
- - Toggle button automatically adjusts position based on sidebar location
171
- - Theme colors and spacing are applied through the View component variants