✨ feat: page component command

Author: gleisonkz

.prettierignore

@@ -0,0 +1 @@
+*.ejs

delpe/delpe.page.html

@@ -0,0 +1 @@
+<p>delpe works</p>

delpe/delpe.page.scss

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './delpe.page.html',
+  styleUrls: ['./delpe.page.scss'],
+})
+export class DelpePage implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {    
+  }
+}

delpe/delpe.page.ts

@@ -14,6 +14,7 @@
     "prepublishOnly": "npm run build",
     "format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
     "test": "jest",
+    "test-watch": "jest --watchAll",
     "watch": "jest --watch",
     "snapupdate": "jest --updateSnapshot",
     "coverage": "jest --coverage"

package.json

@@ -1,6 +1,13 @@
 # ngx-devs-cli CLI
 
-A CLI for ngx-devs-cli.
+Uma CLI criada para modernizar, padronizar e facilitar a criação/atualização e gestão de projetos angular.
+
+███╗░░██╗░██████╗░██╗░░██╗░░░░░░██████╗░███████╗██╗░░░██╗░██████╗  ░█████╗░██╗░░░░░██╗
+████╗░██║██╔════╝░╚██╗██╔╝░░░░░░██╔══██╗██╔════╝██║░░░██║██╔════╝  ██╔══██╗██║░░░░░██║
+██╔██╗██║██║░░██╗░░╚███╔╝░█████╗██║░░██║█████╗░░╚██╗░██╔╝╚█████╗░  ██║░░╚═╝██║░░░░░██║
+██║╚████║██║░░╚██╗░██╔██╗░╚════╝██║░░██║██╔══╝░░░╚████╔╝░░╚═══██╗  ██║░░██╗██║░░░░░██║
+██║░╚███║╚██████╔╝██╔╝╚██╗░░░░░░██████╔╝███████╗░░╚██╔╝░░██████╔╝  ╚█████╔╝███████╗██║
+╚═╝░░╚══╝░╚═════╝░╚═╝░░╚═╝░░░░░░╚═════╝░╚══════╝░░░╚═╝░░░╚═════╝░  ░╚════╝░╚══════╝╚═╝
 
 ## Customizing your CLI
 
@@ -23,4 +30,3 @@ $ npm publish
 # License
 
 MIT - see LICENSE
-

readme.md

@@ -5,12 +5,18 @@ async function run(argv) {
     .brand('ngx-devs-cli')
     .src(__dirname)
     .plugins('./node_modules', { matching: 'ngx-devs-cli-*', hidden: true })
-    .version() // provides default for version, v, --version, -v
+    .version()
+    .exclude([
+      'meta',
+      'filesystem',
+      'semver',
+      'system',
+      'http',
+      'patching',
+      'package-manager',
+    ])
     .create()
-  // enable the following method if you'd like to skip loading one of these core extensions
-  // this can improve performance if they're not necessary for your project:
-  // .exclude(['meta', 'strings', 'print', 'filesystem', 'semver', 'system', 'prompt', 'http', 'template', 'patching', 'package-manager'])
-  // and run it
+
   const toolbox = await cli.run(argv)
   return toolbox
 }

src/cli.ts

@@ -0,0 +1,50 @@
+import { GluegunCommand, GluegunToolbox } from 'gluegun';
+import { GluegunAskResponse } from 'gluegun/build/types/toolbox/prompt-types';
+
+import { findCommand } from '../../../utils/functions.helper';
+
+const COMMAND: GluegunCommand = {
+  name: 'component',
+  alias: ['c'],
+  description: 'Cria um componente Angular de tipo específico',
+  run: async (toolbox: GluegunToolbox) => {
+    const { parameters, prompt } = toolbox
+
+    let componentName = parameters.first
+
+    if (!componentName) {
+      const response: GluegunAskResponse = await prompt.ask({
+        type: 'input',
+        name: 'componentName',
+        message: 'Qual o nome do componente?',
+        validate: (value: string) => {
+          if (!value) {
+            return 'O nome do componente não pode ser vazio'
+          }
+
+          return true
+        },
+      })
+
+      componentName = response.componentName
+    }
+
+    const QUESTION = 'Qual tipo de componente você deseja criar?'
+    const TYPES = ['common', 'page', 'widget', 'layout']
+
+    const componentTypeResponse: GluegunAskResponse = await prompt.ask({
+      type: 'select',
+      name: 'type',
+      message: QUESTION,
+      choices: TYPES,
+    })
+
+    const componentType = componentTypeResponse.type
+    const command = findCommand(toolbox, componentType)
+
+    toolbox.parameters.first = componentName
+    command.run(toolbox)
+  },
+}
+
+module.exports = COMMAND

src/commands/generate/component/component.ts

@@ -0,0 +1,37 @@
+import { GluegunCommand, GluegunToolbox } from 'gluegun';
+
+import { printCreated } from '../../../../utils/functions.helper';
+
+const COMMAND: GluegunCommand = {
+  name: 'page',
+  alias: ['p'],
+  description: 'Cria um componente Angular de tipo Page',
+  run: async (toolbox: GluegunToolbox) => {
+    const { parameters, print, template, strings } = toolbox
+
+    const componentName = parameters.first
+
+    template.generate({
+      template: 'component.page.html.ejs',
+      target: `./${componentName}/${componentName}.page.html`,
+      props: { name: componentName, ...strings },
+    })
+
+    template.generate({
+      template: 'component.page.ts.ejs',
+      target: `./${componentName}/${componentName}.page.ts`,
+      props: { name: componentName, ...strings },
+    })
+
+    template.generate({
+      template: 'component.page.scss.ejs',
+      target: `./${componentName}/${componentName}.page.scss`,
+    })
+
+    printCreated(print, `${componentName}/${componentName}.page.html`)
+    printCreated(print, `${componentName}/${componentName}.page.ts`)
+    printCreated(print, `${componentName}/${componentName}.page.scss`)
+  },
+}
+
+module.exports = COMMAND

src/commands/generate/component/page/page.ts

@@ -0,0 +1,36 @@
+import { GluegunCommand, GluegunToolbox } from 'gluegun';
+import { GluegunAskResponse } from 'gluegun/build/types/toolbox/prompt-types';
+
+import { findCommand } from '../../utils/functions.helper';
+
+const COMMAND: GluegunCommand = {
+  name: 'generate',
+  description: 'Cria uma nova entidade',
+  alias: ['g'],
+  run: async (toolbox: GluegunToolbox) => {
+    const { prompt } = toolbox
+
+    const GENERATE_MODEL_TYPE_QUESTION =
+      'Qual o tipo de entidade que você deseja criar?'
+
+    const GENERATE_MODEL_TYPE_OPTIONS = [
+      'component',
+      'directive',
+      'guard',
+      'interceptor',
+      'module',
+    ]
+
+    const modelTypeResponse: GluegunAskResponse = await prompt.ask({
+      type: 'select',
+      name: 'type',
+      message: GENERATE_MODEL_TYPE_QUESTION,
+      choices: GENERATE_MODEL_TYPE_OPTIONS,
+    })
+
+    const command = findCommand(toolbox, modelTypeResponse.type)
+    command.run(toolbox)
+  },
+}
+
+module.exports = COMMAND

src/commands/generate/generate.ts

@@ -1,8 +1,9 @@
-import { GluegunToolbox } from 'gluegun'
+import { GluegunCommand, GluegunToolbox } from 'gluegun';
 
-module.exports = {
-  name: 'generate',
-  alias: ['g'],
+const COMMAND: GluegunCommand = {
+  name: 'new',
+  alias: ['n'],
+  description: 'Cria um novo projeto Angular',
   run: async (toolbox: GluegunToolbox) => {
     const {
       parameters,
@@ -21,3 +22,5 @@ module.exports = {
     info(`Generated file at models/${name}-model.ts`)
   },
 }
+
+module.exports = COMMAND

src/commands/generate.ts renamed to src/commands/new.ts

@@ -0,0 +1 @@
+<p><%= props.name %> works</p>

src/templates/component.page.html.ejs

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './<%= kebabCase(props.name) %>.page.html',
+  styleUrls: ['./<%= kebabCase(props.name) %>.page.scss'],
+})
+export class <%= pascalCase(props.name) %>Page implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {    
+  }
+}

src/templates/component.page.scss.ejs

@@ -0,0 +1,19 @@
+import { GluegunPrint, GluegunToolbox } from 'gluegun';
+import { Command } from 'gluegun/build/types/domain/command';
+
+export function findCommand(
+  toolbox: GluegunToolbox,
+  commandName: string
+): Command {
+  const command = toolbox.runtime.commands.find(
+    (command) => command.name === commandName
+  )
+
+  return command
+}
+
+export function printCreated(print: GluegunPrint, message: string) {
+  const text =
+    print.colors.green('CREATED') + ' ' + print.colors.yellow(message)
+  print.info(text)
+}