feat: apply design system to new glee

src/commands/new/file.ts

@@ -158,16 +158,16 @@ export default class NewFile extends Command {
     try {
       const content = await readFile(fileNameToWriteToDisk, { encoding: 'utf8' });
       if (content !== undefined) {
-        console.log(`File ${fileNameToWriteToDisk} already exists. Ignoring...`);
+        console.log(`A file named ${fileNameToWriteToDisk} already exists. Please choose a different name.`);
         return;
       }
     } catch (e:any) {
       if (e.code === 'EACCES') {
-        this.error('Permission denied to read the file. You do not have the necessary permissions.');
+        this.error('Permission has been denied to access the file');
       }
     }
     await writeFile(fileNameToWriteToDisk, asyncApiFile, { encoding: 'utf8' });
-    console.log(`Created file ${fileNameToWriteToDisk}...`);
+    console.log(`The ${fileNameToWriteToDisk} has been successfully created.`);
     this.specFile = await load(fileNameToWriteToDisk);
     this.metricsMetadata.selected_template = selectedTemplate;
   }

src/commands/new/glee.ts

@@ -9,10 +9,23 @@ import { prompt } from 'inquirer';
 // eslint-disable-next-line
 // @ts-ignore
 import Generator from '@asyncapi/generator';
+import { green, gray } from 'picocolors';
+
+const successMessage = (projectName: string) =>
+  `🎉 Your glee project "${projectName}" has been successfully created!
+⏩ Next steps: follow the instructions ${green('below')} to manage your project:
+
+  cd ${projectName}\t\t ${gray('# Navigate to the project directory')}
+  npm install\t\t ${gray('# Install the project dependencies')}
+  npm run dev\t\t ${gray('# Start the project in development mode')} 
+
+You can also open the project in your favourite editor and start tweaking it.
+`;
 
 export default class NewGlee extends Command {
   static description = 'Creates a new Glee project';
   protected commandName = 'glee';
+  static successMessage = successMessage;
 
   static flags = {
     help: Flags.help({ char: 'h' }),
@@ -234,9 +247,7 @@ export default class NewGlee extends Command {
           `${PROJECT_DIRECTORY}/README-template.md`,
           `${PROJECT_DIRECTORY}/README.md`
         );
-        this.log(
-          `Your project "${projectName}" has been created successfully!\n\nNext steps:\n\n  cd ${projectName}\n  npm install\n  npm run dev\n\nAlso, you can already open the project in your favorite editor and start tweaking it.`
-        );
+        this.log(successMessage(projectName));
       } catch (err) {
         this.error(
           `Unable to create the project. Please check the following message for further info about the error:\n\n${err}`

src/models/Studio.ts

@@ -7,6 +7,7 @@ import chokidar from 'chokidar';
 import open from 'open';
 import path from 'path';
 import { version as studioVersion } from '@asyncapi/studio/package.json';
+import { gray } from 'picocolors';
 
 const { readFile, writeFile } = fPromises;
 
@@ -99,7 +100,8 @@ export function start(filePath: string, port: number = DEFAULT_PORT): void {
 
   server.listen(port, () => {
     const url = `http://localhost:${port}?liveServer=${port}&studio-version=${studioVersion}`;
-    console.log(`Studio is running at ${url}`);
+    console.log(`Studio is now running at ${url}.`);
+    console.log(`You can open this URL in your web browser, and if needed, press ${gray('Ctrl + C')} to stop the process.`);
     console.log(`Watching changes on file ${filePath}`);
     open(url);
   });