create-asterui 0.1.7 → 0.1.9
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/index.js +79 -50
- package/package.json +1 -1
- package/templates/js/index.html +1 -1
- package/templates/js/public/favicon.ico +0 -0
- package/templates/js/public/logo.png +0 -0
- package/templates/js/src/App.jsx +18 -15
- package/templates/ts/index.html +1 -1
- package/templates/ts/public/favicon.ico +0 -0
- package/templates/ts/public/logo.png +0 -0
- package/templates/ts/src/App.tsx +18 -15
package/dist/index.js
CHANGED
|
@@ -30,6 +30,9 @@ function parseArgs() {
|
|
|
30
30
|
if (arg === '--help' || arg === '-h') {
|
|
31
31
|
result.help = true;
|
|
32
32
|
}
|
|
33
|
+
else if (arg === '--yes' || arg === '-y') {
|
|
34
|
+
result.yes = true;
|
|
35
|
+
}
|
|
33
36
|
else if (arg === '--js') {
|
|
34
37
|
result.language = 'js';
|
|
35
38
|
}
|
|
@@ -48,6 +51,12 @@ function parseArgs() {
|
|
|
48
51
|
result.pm = pm;
|
|
49
52
|
}
|
|
50
53
|
}
|
|
54
|
+
else if (arg === '--icons' && args[i + 1]) {
|
|
55
|
+
result.icons = args[++i];
|
|
56
|
+
}
|
|
57
|
+
else if (arg === '--optional' && args[i + 1]) {
|
|
58
|
+
result.optional = args[++i].split(',').map(s => s.trim());
|
|
59
|
+
}
|
|
51
60
|
else if (!arg.startsWith('-') && !result.projectName) {
|
|
52
61
|
result.projectName = arg;
|
|
53
62
|
}
|
|
@@ -62,16 +71,20 @@ ${pc.bold('Usage:')}
|
|
|
62
71
|
npm create asterui [project-name] [options]
|
|
63
72
|
|
|
64
73
|
${pc.bold('Options:')}
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
|
|
74
|
+
-y, --yes Accept defaults for unprovided options (non-interactive)
|
|
75
|
+
--js Use JavaScript instead of TypeScript
|
|
76
|
+
--ts Use TypeScript (default)
|
|
77
|
+
--prefixed Use @aster-ui/prefixed with d- prefix for daisyUI
|
|
78
|
+
--themes <preset> Theme preset: light-dark, business, all
|
|
79
|
+
--pm <manager> Package manager: npm, pnpm, yarn
|
|
80
|
+
--icons <library> Icon library: @aster-ui/icons, lucide-react, etc.
|
|
81
|
+
--optional <deps> Optional deps: chart,editor,qrcode,virtuallist
|
|
82
|
+
-h, --help Show this help message
|
|
71
83
|
|
|
72
84
|
${pc.bold('Examples:')}
|
|
73
85
|
npm create asterui
|
|
74
86
|
npm create asterui my-app
|
|
87
|
+
npm create asterui my-app -y
|
|
75
88
|
npm create asterui my-app --js
|
|
76
89
|
npm create asterui my-app --themes business
|
|
77
90
|
npm create asterui my-app --js --themes all --pm pnpm
|
|
@@ -115,30 +128,36 @@ async function main() {
|
|
|
115
128
|
}),
|
|
116
129
|
language: () => cliArgs.language
|
|
117
130
|
? Promise.resolve(cliArgs.language)
|
|
118
|
-
:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
131
|
+
: cliArgs.yes
|
|
132
|
+
? Promise.resolve('ts')
|
|
133
|
+
: p.select({
|
|
134
|
+
message: 'Language',
|
|
135
|
+
options: [
|
|
136
|
+
{ value: 'ts', label: 'TypeScript', hint: 'recommended' },
|
|
137
|
+
{ value: 'js', label: 'JavaScript' },
|
|
138
|
+
],
|
|
139
|
+
}),
|
|
125
140
|
prefixed: () => cliArgs.prefixed !== undefined
|
|
126
141
|
? Promise.resolve(cliArgs.prefixed)
|
|
127
|
-
:
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
142
|
+
: cliArgs.yes
|
|
143
|
+
? Promise.resolve(false)
|
|
144
|
+
: p.confirm({
|
|
145
|
+
message: 'Use prefixed daisyUI classes?',
|
|
146
|
+
initialValue: false,
|
|
147
|
+
}),
|
|
131
148
|
themePreset: () => cliArgs.themes && THEME_PRESETS.includes(cliArgs.themes)
|
|
132
149
|
? Promise.resolve(cliArgs.themes)
|
|
133
|
-
:
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
150
|
+
: cliArgs.yes
|
|
151
|
+
? Promise.resolve('light-dark')
|
|
152
|
+
: p.select({
|
|
153
|
+
message: 'Themes',
|
|
154
|
+
options: [
|
|
155
|
+
{ value: 'light-dark', label: 'Light/Dark', hint: 'recommended' },
|
|
156
|
+
{ value: 'business', label: 'Business/Corporate' },
|
|
157
|
+
{ value: 'all', label: 'All themes' },
|
|
158
|
+
{ value: 'custom', label: 'Choose specific...' },
|
|
159
|
+
],
|
|
160
|
+
}),
|
|
142
161
|
customThemes: ({ results }) => results.themePreset === 'custom'
|
|
143
162
|
? p.multiselect({
|
|
144
163
|
message: 'Select themes',
|
|
@@ -149,30 +168,40 @@ async function main() {
|
|
|
149
168
|
: Promise.resolve([]),
|
|
150
169
|
packageManager: () => cliArgs.pm
|
|
151
170
|
? Promise.resolve(cliArgs.pm)
|
|
152
|
-
:
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
171
|
+
: cliArgs.yes
|
|
172
|
+
? Promise.resolve(detectedPm)
|
|
173
|
+
: p.select({
|
|
174
|
+
message: 'Package manager',
|
|
175
|
+
options: [
|
|
176
|
+
{ value: detectedPm, label: detectedPm, hint: 'detected' },
|
|
177
|
+
...['npm', 'pnpm', 'yarn']
|
|
178
|
+
.filter((pm) => pm !== detectedPm)
|
|
179
|
+
.map((pm) => ({ value: pm, label: pm })),
|
|
180
|
+
],
|
|
181
|
+
}),
|
|
182
|
+
optionalDeps: () => cliArgs.optional !== undefined
|
|
183
|
+
? Promise.resolve(cliArgs.optional)
|
|
184
|
+
: cliArgs.yes
|
|
185
|
+
? Promise.resolve([])
|
|
186
|
+
: p.multiselect({
|
|
187
|
+
message: 'Optional components (require extra dependencies)',
|
|
188
|
+
options: [
|
|
189
|
+
{ value: 'chart', label: 'Chart', hint: 'apexcharts' },
|
|
190
|
+
{ value: 'editor', label: 'RichTextEditor', hint: '@aster-ui/icons + @tiptap/react' },
|
|
191
|
+
{ value: 'qrcode', label: 'QRCode', hint: 'qrcode' },
|
|
192
|
+
{ value: 'virtuallist', label: 'VirtualList', hint: '@tanstack/react-virtual' },
|
|
193
|
+
],
|
|
194
|
+
required: false,
|
|
195
|
+
}),
|
|
196
|
+
iconLibrary: () => cliArgs.icons
|
|
197
|
+
? Promise.resolve(cliArgs.icons)
|
|
198
|
+
: cliArgs.yes
|
|
199
|
+
? Promise.resolve('@aster-ui/icons')
|
|
200
|
+
: p.select({
|
|
201
|
+
message: 'Icon library',
|
|
202
|
+
initialValue: '@aster-ui/icons',
|
|
203
|
+
options: ICON_LIBRARIES,
|
|
204
|
+
}),
|
|
176
205
|
}, {
|
|
177
206
|
onCancel: () => {
|
|
178
207
|
p.cancel('Operation cancelled.');
|
package/package.json
CHANGED
package/templates/js/index.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon"
|
|
5
|
+
<link rel="icon" href="/favicon.ico" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>AsterUI App</title>
|
|
8
8
|
</head>
|
|
Binary file
|
|
Binary file
|
package/templates/js/src/App.jsx
CHANGED
|
@@ -1,21 +1,24 @@
|
|
|
1
|
-
import { Button, useTheme, ThemeController, Hero, Space } from 'asterui'
|
|
1
|
+
import { Button, useTheme, ThemeController, Hero, Space, Flex } from 'asterui'
|
|
2
2
|
|
|
3
3
|
function Logo() {
|
|
4
|
-
const { colors } = useTheme()
|
|
4
|
+
const { isDark, colors } = useTheme()
|
|
5
5
|
return (
|
|
6
|
-
<
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
6
|
+
<Flex direction="column" align="center" gap="xs">
|
|
7
|
+
<img src="/logo.png" alt="" className="h-24 w-24" />
|
|
8
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40" className="h-12 w-auto">
|
|
9
|
+
<text
|
|
10
|
+
x="100"
|
|
11
|
+
y="30"
|
|
12
|
+
textAnchor="middle"
|
|
13
|
+
fontFamily="system-ui, -apple-system, sans-serif"
|
|
14
|
+
fontSize="28"
|
|
15
|
+
fontWeight="700"
|
|
16
|
+
>
|
|
17
|
+
<tspan fill="#8275BA">Aster</tspan>
|
|
18
|
+
<tspan fill={isDark ? '#FCFAFD' : `${colors.foreground}B3`}>UI</tspan>
|
|
19
|
+
</text>
|
|
20
|
+
</svg>
|
|
21
|
+
</Flex>
|
|
19
22
|
)
|
|
20
23
|
}
|
|
21
24
|
|
package/templates/ts/index.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon"
|
|
5
|
+
<link rel="icon" href="/favicon.ico" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>AsterUI App</title>
|
|
8
8
|
</head>
|
|
Binary file
|
|
Binary file
|
package/templates/ts/src/App.tsx
CHANGED
|
@@ -1,21 +1,24 @@
|
|
|
1
|
-
import { Button, useTheme, ThemeController, Hero, Space } from 'asterui'
|
|
1
|
+
import { Button, useTheme, ThemeController, Hero, Space, Flex } from 'asterui'
|
|
2
2
|
|
|
3
3
|
function Logo() {
|
|
4
|
-
const { colors } = useTheme()
|
|
4
|
+
const { isDark, colors } = useTheme()
|
|
5
5
|
return (
|
|
6
|
-
<
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
6
|
+
<Flex direction="column" align="center" gap="xs">
|
|
7
|
+
<img src="/logo.png" alt="" className="h-24 w-24" />
|
|
8
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 40" className="h-12 w-auto">
|
|
9
|
+
<text
|
|
10
|
+
x="100"
|
|
11
|
+
y="30"
|
|
12
|
+
textAnchor="middle"
|
|
13
|
+
fontFamily="system-ui, -apple-system, sans-serif"
|
|
14
|
+
fontSize="28"
|
|
15
|
+
fontWeight="700"
|
|
16
|
+
>
|
|
17
|
+
<tspan fill="#8275BA">Aster</tspan>
|
|
18
|
+
<tspan fill={isDark ? '#FCFAFD' : `${colors.foreground}B3`}>UI</tspan>
|
|
19
|
+
</text>
|
|
20
|
+
</svg>
|
|
21
|
+
</Flex>
|
|
19
22
|
)
|
|
20
23
|
}
|
|
21
24
|
|