@idealyst/cli 1.2.80 → 1.2.81
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/dist/constants.js +1 -1
- package/dist/generators/core/shared.js +2 -2
- package/dist/templates/core/shared/src-layouts/AppLayout.tsx +5 -4
- package/dist/templates/core/shared/src-navigation/AppRouter.tsx +17 -0
- package/dist/templates/core/shared/src-screens/ChartsScreen.tsx +294 -0
- package/dist/templates/core/shared/src-screens/SettingsScreen.tsx +3 -2
- package/dist/types/constants.d.ts +6 -6
- package/package.json +1 -1
package/dist/constants.js
CHANGED
|
@@ -7,7 +7,7 @@ exports.DEPENDENCIES = exports.IGNORE_PATTERNS = exports.TEMPLATE_EXTENSIONS = e
|
|
|
7
7
|
// Package version - updated during build
|
|
8
8
|
exports.VERSION = '0.1.0';
|
|
9
9
|
// Current Idealyst framework version to use in templates
|
|
10
|
-
exports.IDEALYST_VERSION = '1.2.
|
|
10
|
+
exports.IDEALYST_VERSION = '1.2.81';
|
|
11
11
|
// React Native version
|
|
12
12
|
exports.REACT_NATIVE_VERSION = '0.83.0';
|
|
13
13
|
// React version
|
|
@@ -403,7 +403,7 @@ export default App;
|
|
|
403
403
|
return `${imports.join('\n')}
|
|
404
404
|
|
|
405
405
|
// API URL from environment configuration
|
|
406
|
-
const API_URL = config.get('API_URL'
|
|
406
|
+
const API_URL = config.get('API_URL')!;
|
|
407
407
|
|
|
408
408
|
/**
|
|
409
409
|
* Main App component for ${data.appDisplayName}
|
|
@@ -905,7 +905,7 @@ export default function App() {
|
|
|
905
905
|
${imports.join('\n')}
|
|
906
906
|
|
|
907
907
|
// API URL from environment configuration
|
|
908
|
-
const API_URL = config.get('API_URL'
|
|
908
|
+
const API_URL = config.get('API_URL')!;
|
|
909
909
|
|
|
910
910
|
export default function App() {
|
|
911
911
|
${stateLines.join('\n')}
|
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { View, Text, Button, IconButton, Icon, Badge } from '@idealyst/components';
|
|
3
3
|
import { useNavigator, Outlet } from '@idealyst/navigation';
|
|
4
4
|
import type { TabLayoutProps, StackLayoutProps } from '@idealyst/navigation';
|
|
5
|
-
import { UnistylesRuntime
|
|
5
|
+
import { UnistylesRuntime } from 'react-native-unistyles';
|
|
6
|
+
import { useTheme, ThemeSettings } from '@idealyst/theme';
|
|
6
7
|
|
|
7
8
|
/**
|
|
8
9
|
* Custom Tab Layout for the {{appDisplayName}} app.
|
|
@@ -16,12 +17,12 @@ export const AppTabLayout: React.FC<TabLayoutProps> = ({
|
|
|
16
17
|
currentPath,
|
|
17
18
|
}) => {
|
|
18
19
|
const navigator = useNavigator();
|
|
19
|
-
const
|
|
20
|
+
const theme = useTheme();
|
|
20
21
|
const currentTheme = UnistylesRuntime.themeName || 'light';
|
|
21
22
|
|
|
22
23
|
const cycleTheme = () => {
|
|
23
24
|
const nextTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
24
|
-
|
|
25
|
+
ThemeSettings.setTheme(nextTheme, nextTheme);
|
|
25
26
|
};
|
|
26
27
|
|
|
27
28
|
// Check if a route is active
|
|
@@ -181,7 +182,7 @@ export const AppStackLayout: React.FC<StackLayoutProps> = ({
|
|
|
181
182
|
options,
|
|
182
183
|
routes,
|
|
183
184
|
}) => {
|
|
184
|
-
const
|
|
185
|
+
const theme = useTheme();
|
|
185
186
|
|
|
186
187
|
return (
|
|
187
188
|
<View
|
|
@@ -5,6 +5,7 @@ import type { NavigatorParam, TabBarScreenOptions } from '@idealyst/navigation';
|
|
|
5
5
|
// Screens
|
|
6
6
|
import { HomeScreen } from '../screens/HomeScreen';
|
|
7
7
|
import { ExploreScreen } from '../screens/ExploreScreen';
|
|
8
|
+
import { ChartsScreen } from '../screens/ChartsScreen';
|
|
8
9
|
import { ProfileScreen } from '../screens/ProfileScreen';
|
|
9
10
|
import { SettingsScreen } from '../screens/SettingsScreen';
|
|
10
11
|
import { TRPCDemoScreen } from '../screens/TRPCDemoScreen';
|
|
@@ -54,6 +55,22 @@ const MainTabNavigator: NavigatorParam = {
|
|
|
54
55
|
),
|
|
55
56
|
} as TabBarScreenOptions,
|
|
56
57
|
},
|
|
58
|
+
{
|
|
59
|
+
path: 'charts',
|
|
60
|
+
type: 'screen',
|
|
61
|
+
component: ChartsScreen,
|
|
62
|
+
options: {
|
|
63
|
+
title: 'Charts',
|
|
64
|
+
tabBarLabel: 'Charts',
|
|
65
|
+
tabBarIcon: ({ focused, color, size }) => (
|
|
66
|
+
<Icon
|
|
67
|
+
name={focused ? 'chart-line' : 'chart-line-variant'}
|
|
68
|
+
color={color}
|
|
69
|
+
size={size}
|
|
70
|
+
/>
|
|
71
|
+
),
|
|
72
|
+
} as TabBarScreenOptions,
|
|
73
|
+
},
|
|
57
74
|
{
|
|
58
75
|
path: 'profile',
|
|
59
76
|
type: 'screen',
|
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Screen,
|
|
4
|
+
View,
|
|
5
|
+
Text,
|
|
6
|
+
Card,
|
|
7
|
+
Button,
|
|
8
|
+
Icon,
|
|
9
|
+
Select,
|
|
10
|
+
Switch,
|
|
11
|
+
} from '@idealyst/components';
|
|
12
|
+
import { LineChart, BarChart } from '@idealyst/charts';
|
|
13
|
+
import type { ChartDataSeries, CurveType } from '@idealyst/charts';
|
|
14
|
+
|
|
15
|
+
// Sample data for line chart
|
|
16
|
+
const lineChartData: ChartDataSeries[] = [
|
|
17
|
+
{
|
|
18
|
+
id: 'revenue',
|
|
19
|
+
name: 'Revenue',
|
|
20
|
+
intent: 'primary',
|
|
21
|
+
data: [
|
|
22
|
+
{ x: 'Jan', y: 120 },
|
|
23
|
+
{ x: 'Feb', y: 150 },
|
|
24
|
+
{ x: 'Mar', y: 130 },
|
|
25
|
+
{ x: 'Apr', y: 180 },
|
|
26
|
+
{ x: 'May', y: 160 },
|
|
27
|
+
{ x: 'Jun', y: 200 },
|
|
28
|
+
],
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
id: 'expenses',
|
|
32
|
+
name: 'Expenses',
|
|
33
|
+
intent: 'danger',
|
|
34
|
+
data: [
|
|
35
|
+
{ x: 'Jan', y: 80 },
|
|
36
|
+
{ x: 'Feb', y: 95 },
|
|
37
|
+
{ x: 'Mar', y: 85 },
|
|
38
|
+
{ x: 'Apr', y: 100 },
|
|
39
|
+
{ x: 'May', y: 110 },
|
|
40
|
+
{ x: 'Jun', y: 105 },
|
|
41
|
+
],
|
|
42
|
+
},
|
|
43
|
+
];
|
|
44
|
+
|
|
45
|
+
// Sample data for bar chart
|
|
46
|
+
const barChartData: ChartDataSeries[] = [
|
|
47
|
+
{
|
|
48
|
+
id: 'sales',
|
|
49
|
+
name: 'Sales',
|
|
50
|
+
intent: 'primary',
|
|
51
|
+
data: [
|
|
52
|
+
{ x: 'Q1', y: 120 },
|
|
53
|
+
{ x: 'Q2', y: 180 },
|
|
54
|
+
{ x: 'Q3', y: 150 },
|
|
55
|
+
{ x: 'Q4', y: 220 },
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
];
|
|
59
|
+
|
|
60
|
+
// Sample data for grouped bar chart
|
|
61
|
+
const groupedBarData: ChartDataSeries[] = [
|
|
62
|
+
{
|
|
63
|
+
id: '2023',
|
|
64
|
+
name: '2023',
|
|
65
|
+
intent: 'secondary',
|
|
66
|
+
data: [
|
|
67
|
+
{ x: 'Q1', y: 100 },
|
|
68
|
+
{ x: 'Q2', y: 150 },
|
|
69
|
+
{ x: 'Q3', y: 130 },
|
|
70
|
+
{ x: 'Q4', y: 180 },
|
|
71
|
+
],
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
id: '2024',
|
|
75
|
+
name: '2024',
|
|
76
|
+
intent: 'success',
|
|
77
|
+
data: [
|
|
78
|
+
{ x: 'Q1', y: 120 },
|
|
79
|
+
{ x: 'Q2', y: 180 },
|
|
80
|
+
{ x: 'Q3', y: 150 },
|
|
81
|
+
{ x: 'Q4', y: 220 },
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
];
|
|
85
|
+
|
|
86
|
+
const curveOptions = [
|
|
87
|
+
{ label: 'Monotone', value: 'monotone' },
|
|
88
|
+
{ label: 'Linear', value: 'linear' },
|
|
89
|
+
{ label: 'Step', value: 'step' },
|
|
90
|
+
{ label: 'Cardinal', value: 'cardinal' },
|
|
91
|
+
];
|
|
92
|
+
|
|
93
|
+
export const ChartsScreen: React.FC = () => {
|
|
94
|
+
const [curve, setCurve] = useState<CurveType>('monotone');
|
|
95
|
+
const [showDots, setShowDots] = useState(true);
|
|
96
|
+
const [showArea, setShowArea] = useState(false);
|
|
97
|
+
const [animate, setAnimate] = useState(true);
|
|
98
|
+
const [barOrientation, setBarOrientation] = useState<'vertical' | 'horizontal'>('vertical');
|
|
99
|
+
const [showGrouped, setShowGrouped] = useState(false);
|
|
100
|
+
const [chartKey, setChartKey] = useState(0);
|
|
101
|
+
|
|
102
|
+
// Replay animation by remounting component
|
|
103
|
+
const replayAnimation = () => {
|
|
104
|
+
setChartKey((k) => k + 1);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
return (
|
|
108
|
+
<Screen background="primary" padding="lg" scrollable>
|
|
109
|
+
<View gap="xl">
|
|
110
|
+
{/* Header */}
|
|
111
|
+
<View gap="sm">
|
|
112
|
+
<Text typography="h3">Charts</Text>
|
|
113
|
+
<Text color="secondary">
|
|
114
|
+
Cross-platform animated charts using @idealyst/charts
|
|
115
|
+
</Text>
|
|
116
|
+
</View>
|
|
117
|
+
|
|
118
|
+
{/* Line Chart Section */}
|
|
119
|
+
<View gap="md">
|
|
120
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
121
|
+
<Icon name="chart-line" size={24} intent="primary" />
|
|
122
|
+
<Text typography="subtitle1">Line Chart</Text>
|
|
123
|
+
</View>
|
|
124
|
+
|
|
125
|
+
<Card type="outlined" padding="md" gap="md">
|
|
126
|
+
<Text typography="caption" color="secondary">
|
|
127
|
+
Multi-series line chart with animation and curve options
|
|
128
|
+
</Text>
|
|
129
|
+
|
|
130
|
+
{/* Chart */}
|
|
131
|
+
<View style={{ height: 280 }}>
|
|
132
|
+
<LineChart
|
|
133
|
+
key={`line-${chartKey}`}
|
|
134
|
+
data={lineChartData}
|
|
135
|
+
height={260}
|
|
136
|
+
curve={curve}
|
|
137
|
+
showDots={showDots}
|
|
138
|
+
showArea={showArea}
|
|
139
|
+
areaOpacity={0.15}
|
|
140
|
+
animate={animate}
|
|
141
|
+
animationDuration={750}
|
|
142
|
+
/>
|
|
143
|
+
</View>
|
|
144
|
+
|
|
145
|
+
{/* Controls */}
|
|
146
|
+
<View gap="sm">
|
|
147
|
+
<Select
|
|
148
|
+
label="Curve Type"
|
|
149
|
+
value={curve}
|
|
150
|
+
onChange={(v) => setCurve(v as CurveType)}
|
|
151
|
+
options={curveOptions}
|
|
152
|
+
/>
|
|
153
|
+
|
|
154
|
+
<View
|
|
155
|
+
style={{
|
|
156
|
+
flexDirection: 'row',
|
|
157
|
+
justifyContent: 'space-between',
|
|
158
|
+
alignItems: 'center',
|
|
159
|
+
}}
|
|
160
|
+
>
|
|
161
|
+
<Text>Show Dots</Text>
|
|
162
|
+
<Switch checked={showDots} onChange={setShowDots} intent="primary" />
|
|
163
|
+
</View>
|
|
164
|
+
|
|
165
|
+
<View
|
|
166
|
+
style={{
|
|
167
|
+
flexDirection: 'row',
|
|
168
|
+
justifyContent: 'space-between',
|
|
169
|
+
alignItems: 'center',
|
|
170
|
+
}}
|
|
171
|
+
>
|
|
172
|
+
<Text>Show Area Fill</Text>
|
|
173
|
+
<Switch checked={showArea} onChange={setShowArea} intent="primary" />
|
|
174
|
+
</View>
|
|
175
|
+
|
|
176
|
+
<View
|
|
177
|
+
style={{
|
|
178
|
+
flexDirection: 'row',
|
|
179
|
+
justifyContent: 'space-between',
|
|
180
|
+
alignItems: 'center',
|
|
181
|
+
}}
|
|
182
|
+
>
|
|
183
|
+
<Text>Animate</Text>
|
|
184
|
+
<Switch checked={animate} onChange={setAnimate} intent="primary" />
|
|
185
|
+
</View>
|
|
186
|
+
|
|
187
|
+
<Button
|
|
188
|
+
type="outlined"
|
|
189
|
+
size="sm"
|
|
190
|
+
onPress={replayAnimation}
|
|
191
|
+
leftIcon={<Icon name="refresh" size={16} />}
|
|
192
|
+
>
|
|
193
|
+
Replay Animation
|
|
194
|
+
</Button>
|
|
195
|
+
</View>
|
|
196
|
+
</Card>
|
|
197
|
+
</View>
|
|
198
|
+
|
|
199
|
+
{/* Bar Chart Section */}
|
|
200
|
+
<View gap="md">
|
|
201
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
202
|
+
<Icon name="chart-bar" size={24} intent="primary" />
|
|
203
|
+
<Text typography="subtitle1">Bar Chart</Text>
|
|
204
|
+
</View>
|
|
205
|
+
|
|
206
|
+
<Card type="outlined" padding="md" gap="md">
|
|
207
|
+
<Text typography="caption" color="secondary">
|
|
208
|
+
Bar chart with staggered entrance animation
|
|
209
|
+
</Text>
|
|
210
|
+
|
|
211
|
+
{/* Chart */}
|
|
212
|
+
<View style={{ height: 280 }}>
|
|
213
|
+
<BarChart
|
|
214
|
+
key={`bar-${chartKey}-${showGrouped}`}
|
|
215
|
+
data={showGrouped ? groupedBarData : barChartData}
|
|
216
|
+
height={260}
|
|
217
|
+
orientation={barOrientation}
|
|
218
|
+
grouped={showGrouped}
|
|
219
|
+
barRadius={4}
|
|
220
|
+
animate={animate}
|
|
221
|
+
animationDuration={300}
|
|
222
|
+
/>
|
|
223
|
+
</View>
|
|
224
|
+
|
|
225
|
+
{/* Controls */}
|
|
226
|
+
<View gap="sm">
|
|
227
|
+
<View
|
|
228
|
+
style={{
|
|
229
|
+
flexDirection: 'row',
|
|
230
|
+
justifyContent: 'space-between',
|
|
231
|
+
alignItems: 'center',
|
|
232
|
+
}}
|
|
233
|
+
>
|
|
234
|
+
<Text>Horizontal</Text>
|
|
235
|
+
<Switch
|
|
236
|
+
checked={barOrientation === 'horizontal'}
|
|
237
|
+
onChange={(v) => setBarOrientation(v ? 'horizontal' : 'vertical')}
|
|
238
|
+
intent="primary"
|
|
239
|
+
/>
|
|
240
|
+
</View>
|
|
241
|
+
|
|
242
|
+
<View
|
|
243
|
+
style={{
|
|
244
|
+
flexDirection: 'row',
|
|
245
|
+
justifyContent: 'space-between',
|
|
246
|
+
alignItems: 'center',
|
|
247
|
+
}}
|
|
248
|
+
>
|
|
249
|
+
<Text>Grouped (Multi-series)</Text>
|
|
250
|
+
<Switch checked={showGrouped} onChange={setShowGrouped} intent="primary" />
|
|
251
|
+
</View>
|
|
252
|
+
|
|
253
|
+
<Button
|
|
254
|
+
type="outlined"
|
|
255
|
+
size="sm"
|
|
256
|
+
onPress={replayAnimation}
|
|
257
|
+
leftIcon={<Icon name="refresh" size={16} />}
|
|
258
|
+
>
|
|
259
|
+
Replay Animation
|
|
260
|
+
</Button>
|
|
261
|
+
</View>
|
|
262
|
+
</Card>
|
|
263
|
+
</View>
|
|
264
|
+
|
|
265
|
+
{/* Info Section */}
|
|
266
|
+
<View gap="md">
|
|
267
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
268
|
+
<Icon name="information-outline" size={24} intent="primary" />
|
|
269
|
+
<Text typography="subtitle1">About @idealyst/charts</Text>
|
|
270
|
+
</View>
|
|
271
|
+
|
|
272
|
+
<Card type="outlined" padding="md" gap="sm">
|
|
273
|
+
<Text typography="body2">
|
|
274
|
+
Cross-platform animated charting library with dual-renderer architecture:
|
|
275
|
+
</Text>
|
|
276
|
+
<View style={{ paddingLeft: 16 }} gap="xs">
|
|
277
|
+
<Text typography="body2">• SVG renderer for web (default)</Text>
|
|
278
|
+
<Text typography="body2">• Skia renderer for native (GPU-accelerated)</Text>
|
|
279
|
+
<Text typography="body2">• Full animation support with entrance transitions</Text>
|
|
280
|
+
<Text typography="body2">• Theme integration with intent-based colors</Text>
|
|
281
|
+
<Text typography="body2">• Multiple curve types for line charts</Text>
|
|
282
|
+
<Text typography="body2">• Grouped and stacked bar charts</Text>
|
|
283
|
+
</View>
|
|
284
|
+
<Text typography="caption" color="secondary" style={{ marginTop: 8 }}>
|
|
285
|
+
More chart types coming soon: PieChart, AreaChart, ScatterChart, CandlestickChart
|
|
286
|
+
</Text>
|
|
287
|
+
</Card>
|
|
288
|
+
</View>
|
|
289
|
+
</View>
|
|
290
|
+
</Screen>
|
|
291
|
+
);
|
|
292
|
+
};
|
|
293
|
+
|
|
294
|
+
export default ChartsScreen;
|
|
@@ -13,6 +13,7 @@ import {
|
|
|
13
13
|
} from '@idealyst/components';
|
|
14
14
|
import { useNavigator } from '@idealyst/navigation';
|
|
15
15
|
import { UnistylesRuntime } from 'react-native-unistyles';
|
|
16
|
+
import { ThemeSettings } from '@idealyst/theme';
|
|
16
17
|
|
|
17
18
|
export const SettingsScreen: React.FC = () => {
|
|
18
19
|
const { goBack, canGoBack } = useNavigator();
|
|
@@ -22,12 +23,12 @@ export const SettingsScreen: React.FC = () => {
|
|
|
22
23
|
const handleThemeToggle = () => {
|
|
23
24
|
const newTheme = isDarkMode ? 'light' : 'dark';
|
|
24
25
|
setTheme(newTheme);
|
|
25
|
-
|
|
26
|
+
ThemeSettings.setTheme(newTheme, newTheme);
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
const selectTheme = (theme: 'light' | 'dark') => {
|
|
29
30
|
setTheme(theme);
|
|
30
|
-
|
|
31
|
+
ThemeSettings.setTheme(theme, theme);
|
|
31
32
|
};
|
|
32
33
|
|
|
33
34
|
return (
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Constants and default values for the CLI
|
|
3
3
|
*/
|
|
4
4
|
export declare const VERSION = "0.1.0";
|
|
5
|
-
export declare const IDEALYST_VERSION = "1.2.
|
|
5
|
+
export declare const IDEALYST_VERSION = "1.2.81";
|
|
6
6
|
export declare const REACT_NATIVE_VERSION = "0.83.0";
|
|
7
7
|
export declare const REACT_VERSION = "19.1.0";
|
|
8
8
|
export declare const DEFAULT_TIMEOUT = 300000;
|
|
@@ -18,10 +18,10 @@ export declare const TEMPLATE_EXTENSIONS: readonly [".ts", ".tsx", ".js", ".jsx"
|
|
|
18
18
|
export declare const IGNORE_PATTERNS: readonly ["node_modules", ".git", "dist", "build", ".cache", ".DS_Store", "Thumbs.db", "*.log", "*.tmp", "*.bak", "~*"];
|
|
19
19
|
export declare const DEPENDENCIES: {
|
|
20
20
|
readonly core: {
|
|
21
|
-
readonly '@idealyst/components': "^1.2.
|
|
22
|
-
readonly '@idealyst/theme': "^1.2.
|
|
23
|
-
readonly '@idealyst/navigation': "^1.2.
|
|
24
|
-
readonly '@idealyst/config': "^1.2.
|
|
21
|
+
readonly '@idealyst/components': "^1.2.81";
|
|
22
|
+
readonly '@idealyst/theme': "^1.2.81";
|
|
23
|
+
readonly '@idealyst/navigation': "^1.2.81";
|
|
24
|
+
readonly '@idealyst/config': "^1.2.81";
|
|
25
25
|
};
|
|
26
26
|
readonly web: {
|
|
27
27
|
readonly '@mdi/js': "^7.4.47";
|
|
@@ -78,7 +78,7 @@ export declare const DEPENDENCIES: {
|
|
|
78
78
|
readonly prisma: "^5.19.0";
|
|
79
79
|
};
|
|
80
80
|
readonly tooling: {
|
|
81
|
-
readonly '@idealyst/tooling': "^1.2.
|
|
81
|
+
readonly '@idealyst/tooling': "^1.2.81";
|
|
82
82
|
};
|
|
83
83
|
readonly api: {
|
|
84
84
|
readonly express: "^4.21.0";
|