create-zen 1.2.0 → 1.3.0

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 (2) hide show
  1. package/index.js +44 -57
  2. package/package.json +1 -1
package/index.js CHANGED
@@ -5,34 +5,34 @@ const fs = require('fs');
5
5
  const path = require('path');
6
6
  const readline = require('readline');
7
7
 
8
- // Modern color palette matching the ZEN design
8
+ // Vue CLI inspired color palette
9
9
  const colors = {
10
10
  reset: '\x1b[0m',
11
11
  bright: '\x1b[1m',
12
12
  dim: '\x1b[2m',
13
13
 
14
- // Primary colors from ZEN design
15
- green: '\x1b[38;2;5;247;195m', // Bright green accent (#05F7C3)
16
- white: '\x1b[37m', // Pure white text
17
- lightGrey: '\x1b[38;2;156;163;175m', // Light grey (#9CA3AF)
18
- darkGrey: '\x1b[38;2;55;65;81m', // Dark grey (#374151)
14
+ // Vue CLI colors
15
+ green: '\x1b[38;2;76;175;80m', // Material green
16
+ lightGreen: '\x1b[38;2;129;199;132m', // Light green
17
+ blue: '\x1b[38;2;33;150;243m', // Material blue
18
+ white: '\x1b[37m', // Pure white
19
+ grey: '\x1b[38;2;158;158;158m', // Medium grey
20
+ lightGrey: '\x1b[38;2;189;189;189m', // Light grey
19
21
 
20
22
  // Additional colors
21
23
  red: '\x1b[31m',
22
- yellow: '\x1b[33m',
23
- blue: '\x1b[34m',
24
- magenta: '\x1b[35m',
25
- cyan: '\x1b[36m'
24
+ yellow: '\x1b[33m'
26
25
  };
27
26
 
28
- // Elegant text styling functions
29
- const logo = (text) => `${colors.bright}${colors.green}${text}${colors.reset}`;
30
- const heading = (text) => `${colors.bright}${colors.white}${text}${colors.reset}`;
31
- const accent = (text) => `${colors.green}${text}${colors.reset}`;
32
- const body = (text) => `${colors.lightGrey}${text}${colors.reset}`;
33
- const muted = (text) => `${colors.dim}${colors.lightGrey}${text}${colors.reset}`;
27
+ // Vue CLI inspired text styling
28
+ const vue = (text) => `${colors.bright}${colors.green}${text}${colors.reset}`;
29
+ const progressive = (text) => `${colors.lightGreen}${text}${colors.reset}`;
30
+ const framework = (text) => `${colors.blue}${text}${colors.reset}`;
31
+ const prompt = (text) => `${colors.white}${text}${colors.reset}`;
32
+ const option = (text) => `${colors.grey}${text}${colors.reset}`;
33
+ const selected = (text) => `${colors.bright}${colors.green}${text}${colors.reset}`;
34
+ const muted = (text) => `${colors.lightGrey}${text}${colors.reset}`;
34
35
  const error = (text) => `${colors.red}${text}${colors.reset}`;
35
- const warning = (text) => `${colors.yellow}${text}${colors.reset}`;
36
36
  const success = (text) => `${colors.green}${text}${colors.reset}`;
37
37
 
38
38
  // Create readline interface
@@ -41,43 +41,40 @@ const rl = readline.createInterface({
41
41
  output: process.stdout
42
42
  });
43
43
 
44
- // Display elegant header
44
+ // Display Vue CLI inspired header
45
45
  const displayHeader = () => {
46
46
  console.clear();
47
47
  console.log();
48
- console.log(' ' + '─'.repeat(80));
49
- console.log();
50
- console.log(' ' + ' '.repeat(35) + logo('ZEN') + ' '.repeat(35));
51
- console.log();
52
- console.log(' ' + ' '.repeat(20) + body('Professional Starter Kit • MIT License') + ' '.repeat(20));
53
- console.log();
54
- console.log(' ' + '─'.repeat(80));
48
+ console.log(' ' + vue('ZEN') + ' - ' + progressive('The Professional') + ' ' + framework('Web Development Starter'));
55
49
  console.log();
56
50
  };
57
51
 
58
- // Get project name with elegant styling
52
+ // Get project name with Vue CLI styling
59
53
  const getProjectName = () => {
60
54
  return new Promise((resolve) => {
61
- rl.question(' 📝 ' + body('Enter your project name: ') + muted(' (press Enter for zen-starter-app) '), (answer) => {
55
+ console.log(' ' + '◇' + ' ' + prompt('Project name (target directory):'));
56
+ rl.question(' ', (answer) => {
62
57
  const projectName = answer.trim() || 'zen-starter-app';
58
+ console.log(' ' + selected(projectName));
63
59
  resolve(projectName);
64
60
  });
65
61
  });
66
62
  };
67
63
 
68
- // Get project version choice with elegant styling
64
+ // Get project version choice with Vue CLI styling
69
65
  const getProjectVersion = () => {
70
66
  return new Promise((resolve) => {
71
67
  console.log();
72
- console.log(' ' + heading('Choose your ZEN starter version:'));
73
- console.log();
74
- console.log(' ' + muted('1.') + ' ' + accent('Standard Version') + ' ' + body('- Full-featured with all components'));
75
- console.log(' ' + muted('2.') + ' ' + accent('Lite Version') + ' ' + body('- Lightweight for static sites'));
68
+ console.log(' ' + '◇' + ' ' + prompt('Select ZEN starter version:'));
69
+ console.log(' ' + option('o') + ' ' + option('Standard Version') + ' - Full-featured with all components');
70
+ console.log(' ' + selected('●') + ' ' + selected('Lite Version') + ' - Lightweight for static sites');
76
71
  console.log();
72
+ console.log(' ' + muted('↑/↓ to navigate, enter to confirm'));
77
73
 
78
- rl.question(' 🎯 ' + body('Select version (1 or 2): ') + muted(' (default: 1) '), (answer) => {
79
- const choice = answer.trim() || '1';
80
- const isLite = choice === '2';
74
+ // For now, we'll use simple input, but this simulates the Vue CLI experience
75
+ rl.question(' ', (answer) => {
76
+ const choice = answer.trim() || '2'; // Default to Lite version as shown selected
77
+ const isLite = choice === '2' || choice.toLowerCase() === 'lite';
81
78
  resolve(isLite);
82
79
  });
83
80
  });
@@ -102,13 +99,10 @@ const getVersionDescription = (isLite) => {
102
99
  // Display project summary
103
100
  const displaySummary = (projectName, versionDesc, repoUrl) => {
104
101
  console.log();
105
- console.log(' ' + '─'.repeat(80));
106
- console.log(' 📋 ' + heading('Project Summary'));
107
- console.log(' ' + '─'.repeat(80));
108
- console.log(' 🏷️ ' + accent('Project Name:') + ' ' + heading(projectName));
109
- console.log(' 🎯 ' + accent('Version:') + ' ' + heading(versionDesc));
110
- console.log(' 🔗 ' + accent('Repository:') + ' ' + muted(repoUrl));
111
- console.log(' ' + '─'.repeat(80));
102
+ console.log(' ' + '◇' + ' ' + prompt('Project Summary:'));
103
+ console.log(' ' + option('Name:') + ' ' + selected(projectName));
104
+ console.log(' ' + option('Version:') + ' ' + selected(versionDesc));
105
+ console.log(' ' + option('Repository:') + ' ' + muted(repoUrl));
112
106
  console.log();
113
107
  };
114
108
 
@@ -126,11 +120,11 @@ const main = async () => {
126
120
 
127
121
  if (fs.existsSync(PROJECT_NAME)) {
128
122
  console.log(' ' + error('⛔ Directory "' + PROJECT_NAME + '" already exists!'));
129
- console.log(' 💡 ' + body('Please choose a different name or remove the existing directory.'));
123
+ console.log(' 💡 ' + muted('Please choose a different name or remove the existing directory.'));
130
124
  process.exit(1);
131
125
  }
132
126
 
133
- console.log(' 🚀 ' + warning(`Cloning ${VERSION_DESC} into "${PROJECT_NAME}"...`));
127
+ console.log(' ' + '◇' + ' ' + prompt('Cloning repository...'));
134
128
  console.log();
135
129
 
136
130
  try {
@@ -144,21 +138,14 @@ const main = async () => {
144
138
  fs.rmSync(path.join(PROJECT_NAME, '.git'), { recursive: true, force: true });
145
139
 
146
140
  console.log();
147
- console.log(' ' + '─'.repeat(80));
148
- console.log(' ' + success('✅ SUCCESS! Your project is ready to go!') + ' 🎉');
149
- console.log(' ' + '─'.repeat(80));
150
- console.log();
151
- console.log(' 🚀 ' + heading('Next steps:'));
152
- console.log();
153
- console.log(' 📁 ' + accent(`cd ${PROJECT_NAME}`));
154
- console.log(' 📦 ' + accent('npm install'));
155
- console.log(' 🧑‍💻 ' + accent('npm run dev'));
141
+ console.log(' ' + success('✅ Project created successfully!'));
156
142
  console.log();
157
- console.log(' 🌟 ' + logo('Happy coding with ZEN!') + ' ✨');
143
+ console.log(' ' + '◇' + ' ' + prompt('Next steps:'));
144
+ console.log(' ' + selected(`cd ${PROJECT_NAME}`));
145
+ console.log(' ' + selected('npm install'));
146
+ console.log(' ' + selected('npm run dev'));
158
147
  console.log();
159
- console.log(' ' + '─'.repeat(80));
160
- console.log(' 💡 ' + muted('Need help? Check out the README.md file in your project!'));
161
- console.log(' ' + '─'.repeat(80));
148
+ console.log(' ' + vue('Happy coding with ZEN!') + ' ✨');
162
149
  console.log();
163
150
 
164
151
  } catch (error) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-zen",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "✨ Create a new web development project with modern setup powered by Vite 🚀",
5
5
  "bin": {
6
6
  "create-zen": "./index.js"