create-zen 1.3.2 → 1.4.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 +27 -46
  2. package/package.json +1 -1
package/index.js CHANGED
@@ -5,34 +5,28 @@ const fs = require('fs');
5
5
  const path = require('path');
6
6
  const readline = require('readline');
7
7
 
8
- // Vue CLI inspired color palette
8
+ // Vue CLI exact color palette from the photo
9
9
  const colors = {
10
10
  reset: '\x1b[0m',
11
11
  bright: '\x1b[1m',
12
12
  dim: '\x1b[2m',
13
13
 
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
14
+ // Exact colors from Vue CLI photo
15
+ green: '\x1b[38;2;76;175;80m', // Vue.js green
16
+ lightBlue: '\x1b[38;2;129;199;132m', // Light blue for subtitle
17
+ blue: '\x1b[38;2;33;150;243m', // Blue diamond
18
18
  white: '\x1b[37m', // Pure white
19
19
  grey: '\x1b[38;2;158;158;158m', // Medium grey
20
- lightGrey: '\x1b[38;2;189;189;189m', // Light grey
21
-
22
- // Additional colors
23
- red: '\x1b[31m',
24
- yellow: '\x1b[33m'
20
+ lightGrey: '\x1b[38;2;189;189;189m' // Light grey for descriptions
25
21
  };
26
22
 
27
- // Vue CLI inspired text styling
23
+ // Vue CLI exact text styling
28
24
  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}`;
25
+ const subtitle = (text) => `${colors.lightBlue}${text}${colors.reset}`;
31
26
  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}`;
35
- const error = (text) => `${colors.red}${text}${colors.reset}`;
27
+ const option = (text) => `${colors.white}${text}${colors.reset}`;
28
+ const description = (text) => `${colors.lightGrey}${text}${colors.reset}`;
29
+ const error = (text) => `\x1b[31m${text}${colors.reset}`;
36
30
  const success = (text) => `${colors.green}${text}${colors.reset}`;
37
31
 
38
32
  // Create readline interface
@@ -41,40 +35,38 @@ const rl = readline.createInterface({
41
35
  output: process.stdout
42
36
  });
43
37
 
44
- // Display Vue CLI inspired header
38
+ // Display Vue CLI exact header
45
39
  const displayHeader = () => {
46
40
  console.clear();
47
41
  console.log();
48
- console.log(' ' + vue('ZEN') + ' - ' + progressive('The Professional') + ' ' + framework('Web Development Starter'));
42
+ console.log(' ' + vue('ZEN') + ' - ' + subtitle('The Professional Web Development Starter'));
49
43
  console.log();
50
44
  };
51
45
 
52
- // Get project name with Vue CLI styling
46
+ // Get project name with Vue CLI exact styling
53
47
  const getProjectName = () => {
54
48
  return new Promise((resolve) => {
55
49
  console.log(' ' + '◇' + ' ' + prompt('Project name (target directory):'));
56
50
  rl.question(' ', (answer) => {
57
51
  const projectName = answer.trim() || 'zen-starter-app';
58
- console.log(' ' + selected(projectName));
52
+ console.log(' ' + option(projectName));
59
53
  resolve(projectName);
60
54
  });
61
55
  });
62
56
  };
63
57
 
64
- // Get project version choice with Vue CLI styling
58
+ // Get project version choice with Vue CLI exact styling
65
59
  const getProjectVersion = () => {
66
60
  return new Promise((resolve) => {
67
61
  console.log();
68
62
  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');
71
- console.log();
72
- console.log(' ' + muted('↑/↓ to navigate, enter to confirm'));
63
+ console.log(' ' + option('□ Standard Version') + ' ' + description('(Full-featured with all components)'));
64
+ console.log(' ' + option('□ Lite Version') + ' ' + description('(Lightweight for static sites)'));
65
+ console.log(' ' + description('(↑/↓ to navigate, space to select, enter to confirm)'));
73
66
 
74
- // For now, we'll use simple input, but this simulates the Vue CLI experience
75
67
  rl.question(' ', (answer) => {
76
- const choice = answer.trim() || '2'; // Default to Lite version as shown selected
77
- const isLite = choice === '2' || choice.toLowerCase() === 'lite';
68
+ const choice = answer.trim() || 'lite';
69
+ const isLite = choice.toLowerCase().includes('lite') || choice === '2';
78
70
  resolve(isLite);
79
71
  });
80
72
  });
@@ -96,16 +88,6 @@ const getVersionDescription = (isLite) => {
96
88
  return 'Standard Version - Full-featured with all components';
97
89
  };
98
90
 
99
- // Display project summary
100
- const displaySummary = (projectName, versionDesc, repoUrl) => {
101
- console.log();
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));
106
- console.log();
107
- };
108
-
109
91
  // Main function
110
92
  const main = async () => {
111
93
  try {
@@ -116,16 +98,15 @@ const main = async () => {
116
98
  const REPO_URL = getRepositoryUrl(isLite);
117
99
  const VERSION_DESC = getVersionDescription(isLite);
118
100
 
119
- displaySummary(PROJECT_NAME, VERSION_DESC, REPO_URL);
120
-
121
101
  if (fs.existsSync(PROJECT_NAME)) {
102
+ console.log();
122
103
  console.log(' ' + error('⛔ Directory "' + PROJECT_NAME + '" already exists!'));
123
- console.log(' 💡 ' + muted('Please choose a different name or remove the existing directory.'));
104
+ console.log(' 💡 ' + description('Please choose a different name or remove the existing directory.'));
124
105
  process.exit(1);
125
106
  }
126
107
 
127
- console.log(' ' + '◇' + ' ' + prompt('Cloning repository...'));
128
108
  console.log();
109
+ console.log(' ' + '◇' + ' ' + prompt('Cloning repository...'));
129
110
 
130
111
  try {
131
112
  execSync(`git clone --depth=1 "${REPO_URL}" "${PROJECT_NAME}"`, { stdio: 'inherit' });
@@ -141,9 +122,9 @@ const main = async () => {
141
122
  console.log(' ' + success('✅ Project created successfully!'));
142
123
  console.log();
143
124
  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'));
125
+ console.log(' ' + option(`cd ${PROJECT_NAME}`));
126
+ console.log(' ' + option('npm install'));
127
+ console.log(' ' + option('npm run dev'));
147
128
  console.log();
148
129
  console.log(' ' + vue('Happy coding with ZEN!') + ' ✨');
149
130
  console.log();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-zen",
3
- "version": "1.3.2",
3
+ "version": "1.4.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"