create-asterui 0.1.0 → 0.1.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.
Files changed (5) hide show
  1. package/README.md +70 -0
  2. package/dist/index.js +103 -41
  3. package/package.json +1 -1
  4. package/templates/js/src/App.jsx +1 -1
  5. package/templates/ts/src/App.tsx +1 -1
package/README.md ADDED
@@ -0,0 +1,70 @@
1
+ # create-asterui
2
+
3
+ Scaffold a new [AsterUI](https://asterui.com) project with Vite, Tailwind CSS v4, and DaisyUI v5.
4
+
5
+ ## Usage
6
+
7
+ ```bash
8
+ npm create asterui
9
+ # or
10
+ pnpm create asterui
11
+ # or
12
+ yarn create asterui
13
+ ```
14
+
15
+ ### With arguments
16
+
17
+ ```bash
18
+ npm create asterui my-app
19
+ npm create asterui my-app --js
20
+ npm create asterui my-app --themes business
21
+ npm create asterui my-app --js --themes all --pm pnpm
22
+ ```
23
+
24
+ ### Options
25
+
26
+ ```
27
+ --js Use JavaScript instead of TypeScript
28
+ --ts Use TypeScript (default)
29
+ --themes <preset> Theme preset: light-dark, business, all
30
+ --pm <manager> Package manager: npm, pnpm, yarn
31
+ -h, --help Show help message
32
+ ```
33
+
34
+ ## What it does
35
+
36
+ - Creates a new Vite + React project
37
+ - Configures Tailwind CSS v4 and DaisyUI v5
38
+ - Installs AsterUI and react-hook-form
39
+ - Sets up theme configuration (light/dark, business/corporate, or custom)
40
+ - Supports TypeScript or JavaScript
41
+
42
+ ## After scaffolding
43
+
44
+ ```bash
45
+ cd your-project
46
+ npm run dev
47
+ ```
48
+
49
+ ## Optional components
50
+
51
+ Some AsterUI components require additional peer dependencies and use separate imports:
52
+
53
+ ```bash
54
+ # For Chart component
55
+ npm install apexcharts
56
+ import { Chart } from 'asterui/chart'
57
+
58
+ # For QRCode component
59
+ npm install qrcode
60
+ import { QRCode } from 'asterui/qrcode'
61
+
62
+ # For VirtualList component
63
+ npm install @tanstack/react-virtual
64
+ import { VirtualList } from 'asterui/virtuallist'
65
+ ```
66
+
67
+ ## Links
68
+
69
+ - [AsterUI Documentation](https://asterui.com)
70
+ - [GitHub](https://github.com/edadma/asterui)
package/dist/index.js CHANGED
@@ -13,6 +13,58 @@ const DAISYUI_THEMES = [
13
13
  'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
14
14
  'night', 'coffee', 'winter', 'dim', 'nord', 'sunset'
15
15
  ];
16
+ const THEME_PRESETS = ['light-dark', 'business', 'all'];
17
+ function parseArgs() {
18
+ const args = process.argv.slice(2);
19
+ const result = {};
20
+ for (let i = 0; i < args.length; i++) {
21
+ const arg = args[i];
22
+ if (arg === '--help' || arg === '-h') {
23
+ result.help = true;
24
+ }
25
+ else if (arg === '--js') {
26
+ result.language = 'js';
27
+ }
28
+ else if (arg === '--ts') {
29
+ result.language = 'ts';
30
+ }
31
+ else if (arg === '--themes' && args[i + 1]) {
32
+ result.themes = args[++i];
33
+ }
34
+ else if (arg === '--pm' && args[i + 1]) {
35
+ const pm = args[++i];
36
+ if (pm === 'npm' || pm === 'pnpm' || pm === 'yarn') {
37
+ result.pm = pm;
38
+ }
39
+ }
40
+ else if (!arg.startsWith('-') && !result.projectName) {
41
+ result.projectName = arg;
42
+ }
43
+ }
44
+ return result;
45
+ }
46
+ function showHelp() {
47
+ console.log(`
48
+ ${pc.bold('create-asterui')} - Scaffold a new AsterUI project
49
+
50
+ ${pc.bold('Usage:')}
51
+ npm create asterui [project-name] [options]
52
+
53
+ ${pc.bold('Options:')}
54
+ --js Use JavaScript instead of TypeScript
55
+ --ts Use TypeScript (default)
56
+ --themes <preset> Theme preset: light-dark, business, all
57
+ --pm <manager> Package manager: npm, pnpm, yarn
58
+ -h, --help Show this help message
59
+
60
+ ${pc.bold('Examples:')}
61
+ npm create asterui
62
+ npm create asterui my-app
63
+ npm create asterui my-app --js
64
+ npm create asterui my-app --themes business
65
+ npm create asterui my-app --js --themes all --pm pnpm
66
+ `);
67
+ }
16
68
  function detectPackageManager() {
17
69
  const userAgent = process.env.npm_config_user_agent || '';
18
70
  if (userAgent.includes('pnpm'))
@@ -21,46 +73,54 @@ function detectPackageManager() {
21
73
  return 'yarn';
22
74
  return 'npm';
23
75
  }
24
- function getInstallCommand(pm) {
25
- return pm === 'yarn' ? 'yarn' : `${pm} install`;
26
- }
27
76
  function getRunCommand(pm) {
28
77
  return pm === 'npm' ? 'npm run' : pm;
29
78
  }
30
79
  async function main() {
80
+ const cliArgs = parseArgs();
81
+ if (cliArgs.help) {
82
+ showHelp();
83
+ process.exit(0);
84
+ }
31
85
  console.log();
32
86
  p.intro(pc.bgCyan(pc.black(' create-asterui ')));
33
87
  const detectedPm = detectPackageManager();
34
88
  const options = await p.group({
35
- projectName: () => p.text({
36
- message: 'Project name',
37
- placeholder: 'my-asterui-app',
38
- defaultValue: 'my-asterui-app',
39
- validate: (value) => {
40
- if (!value)
41
- return 'Project name is required';
42
- if (!/^[a-z0-9-]+$/.test(value))
43
- return 'Project name must be lowercase with hyphens only';
44
- if (fs.existsSync(value))
45
- return `Directory "${value}" already exists`;
46
- },
47
- }),
48
- language: () => p.select({
49
- message: 'Language',
50
- options: [
51
- { value: 'ts', label: 'TypeScript', hint: 'recommended' },
52
- { value: 'js', label: 'JavaScript' },
53
- ],
54
- }),
55
- themePreset: () => p.select({
56
- message: 'Themes',
57
- options: [
58
- { value: 'light-dark', label: 'Light/Dark', hint: 'recommended' },
59
- { value: 'business', label: 'Business/Corporate' },
60
- { value: 'all', label: 'All themes' },
61
- { value: 'custom', label: 'Choose specific...' },
62
- ],
63
- }),
89
+ projectName: () => cliArgs.projectName
90
+ ? Promise.resolve(cliArgs.projectName)
91
+ : p.text({
92
+ message: 'Project name',
93
+ placeholder: 'my-asterui-app',
94
+ defaultValue: 'my-asterui-app',
95
+ validate: (value) => {
96
+ if (!value)
97
+ return 'Project name is required';
98
+ if (!/^[a-z0-9-]+$/.test(value))
99
+ return 'Project name must be lowercase with hyphens only';
100
+ if (fs.existsSync(value))
101
+ return `Directory "${value}" already exists`;
102
+ },
103
+ }),
104
+ language: () => cliArgs.language
105
+ ? Promise.resolve(cliArgs.language)
106
+ : p.select({
107
+ message: 'Language',
108
+ options: [
109
+ { value: 'ts', label: 'TypeScript', hint: 'recommended' },
110
+ { value: 'js', label: 'JavaScript' },
111
+ ],
112
+ }),
113
+ themePreset: () => cliArgs.themes && THEME_PRESETS.includes(cliArgs.themes)
114
+ ? Promise.resolve(cliArgs.themes)
115
+ : p.select({
116
+ message: 'Themes',
117
+ options: [
118
+ { value: 'light-dark', label: 'Light/Dark', hint: 'recommended' },
119
+ { value: 'business', label: 'Business/Corporate' },
120
+ { value: 'all', label: 'All themes' },
121
+ { value: 'custom', label: 'Choose specific...' },
122
+ ],
123
+ }),
64
124
  customThemes: ({ results }) => results.themePreset === 'custom'
65
125
  ? p.multiselect({
66
126
  message: 'Select themes',
@@ -69,15 +129,17 @@ async function main() {
69
129
  required: true,
70
130
  })
71
131
  : Promise.resolve([]),
72
- packageManager: () => p.select({
73
- message: 'Package manager',
74
- options: [
75
- { value: detectedPm, label: detectedPm, hint: 'detected' },
76
- ...['npm', 'pnpm', 'yarn']
77
- .filter((pm) => pm !== detectedPm)
78
- .map((pm) => ({ value: pm, label: pm })),
79
- ],
80
- }),
132
+ packageManager: () => cliArgs.pm
133
+ ? Promise.resolve(cliArgs.pm)
134
+ : p.select({
135
+ message: 'Package manager',
136
+ options: [
137
+ { value: detectedPm, label: detectedPm, hint: 'detected' },
138
+ ...['npm', 'pnpm', 'yarn']
139
+ .filter((pm) => pm !== detectedPm)
140
+ .map((pm) => ({ value: pm, label: pm })),
141
+ ],
142
+ }),
81
143
  }, {
82
144
  onCancel: () => {
83
145
  p.cancel('Operation cancelled.');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-asterui",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Create a new AsterUI project",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/js/src/App.jsx CHANGED
@@ -6,7 +6,7 @@ function App() {
6
6
  <Navbar
7
7
  className="bg-base-100 shadow-lg"
8
8
  start={<a className="text-xl font-bold">AsterUI App</a>}
9
- end={<ThemeController.Swap />}
9
+ end={<ThemeController.Swap className="scale-75" />}
10
10
  />
11
11
 
12
12
  <div className="p-6">
package/templates/ts/src/App.tsx CHANGED
@@ -6,7 +6,7 @@ function App() {
6
6
  <Navbar
7
7
  className="bg-base-100 shadow-lg"
8
8
  start={<a className="text-xl font-bold">AsterUI App</a>}
9
- end={<ThemeController.Swap />}
9
+ end={<ThemeController.Swap className="scale-75" />}
10
10
  />
11
11
 
12
12
  <div className="p-6">