@spark-ui/cli-utils 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@1.1.1...@spark-ui/cli-utils@1.2.0) (2023-02-15)
+
+### Features
+
+- **cli-utils:** prompt system for spark generate command ([12aec9b](https://github.com/adevinta/spark/commit/12aec9bb2af9aacdf2337e0de92e97ea608db962)), closes [#237](https://github.com/adevinta/spark/issues/237) [#237](https://github.com/adevinta/spark/issues/237)
+
 ## [1.1.1](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@1.1.0...@spark-ui/cli-utils@1.1.1) (2023-02-15)
 
 ### Bug Fixes

package/bin/spark-generate.mjs

@@ -1,56 +1,156 @@
 #!/usr/bin/env node
 
+import chalk from 'chalk'
+import fse from 'fs-extra'
+import * as prompt from '@clack/prompts'
 import { fileURLToPath } from 'node:url'
-import { program } from 'commander'
 import glob from 'glob'
 import { pascalCase } from 'pascal-case'
 import { log, showError, writeFile } from '../utils.js'
 
 const BASE_DIR = process.cwd()
-const WORDS_ONLY_REGEX = /^[A-Za-z-]*$/
-
-program
-  .option('-D, --description <description>', 'Description of this component')
-  .on('--help', () => {
-    console.log('Examples:')
-    console.log('  $ spark generate button')
-    console.log('  $ spark generate button -D "My button description"')
-    console.log('  $ spark generate button --description "My button description"')
-    console.log('  $ spark generate --help')
+const rawRootPackageJSON = fse.readFileSync(`${BASE_DIR}/package.json`)
+let rootPackageJSON = JSON.parse(rawRootPackageJSON)
+
+const TEMPLATE_TYPE = {
+  COMPONENT: 'component',
+  HOOK: 'hook',
+}
+
+const WORKSPACES = {
+  [TEMPLATE_TYPE.COMPONENT]: '/packages/components',
+  [TEMPLATE_TYPE.HOOK]: '/packages/hooks',
+}
+
+const ERRORS = {
+  ABORT: 'Aborted package generation',
+  NO_PKG_NAME: 'Package name must me defined',
+  INVALID_PKG_NAME: 'Name name must contain letters and dash symbols only (ex: "my-package")',
+  INVALID_DESCRIPTION: 'Description is too short (minimum is 10 chars)',
+  PKG_ALREADY_EXISTS:
+    'A package with that name already exists. Either delete it manually or use another name.',
+}
+
+const packageUtils = {
+  /** Validate the format of the package name (kebab case format) */
+  hasValidName: name => /^[a-z-]*$/.test(name),
+  /** Check that a package of the same name does not exists across all workspaces */
+  alreadyExists: name => {
+    return rootPackageJSON.workspaces.some(workspace => {
+      const existingPackages = glob.sync(`${BASE_DIR}/${workspace}/`)
+      return existingPackages.some(path => path.endsWith(`/${name}/`))
+    })
+  },
+  /** Retrieves the target folder of the generated package */
+  getDirectory: (name, template) => `${WORKSPACES[template]}/${name}/`,
+  /** Retrieves the full path to the folder of the generated package */
+  getFullPath: (name, template) => `${BASE_DIR}${packageUtils.getDirectory(name, template)}`,
+}
+
+async function promptPackageName() {
+  const name = await prompt.text({
+    message: 'Package name (must contain letters and dash symbols only):',
+    initialValue: '',
+    validate(value) {
+      if (value == null) return ERRORS.NO_PKG_NAME
+      if (!packageUtils.hasValidName(value)) return ERRORS.INVALID_PKG_NAME
+      if (packageUtils.alreadyExists(value)) return ERRORS.PKG_ALREADY_EXISTS
+    },
+  })
+
+  if (prompt.isCancel(name)) showError(ERRORS.ABORT)
+
+  return name
+}
+
+async function promptPackageTemplate() {
+  const template = await prompt.select({
+    message: 'Chose a template:',
+    initialValue: TEMPLATE_TYPE.COMPONENT,
+    options: [
+      {
+        value: TEMPLATE_TYPE.COMPONENT,
+        label: 'Component',
+        hint: 'Typescript dummy component with some tests, stories and config files',
+      },
+      {
+        value: TEMPLATE_TYPE.HOOK,
+        label: 'Hook',
+        hint: 'Typescript hook with some tests, stories and config files',
+      },
+    ],
   })
-  .parse(process.argv)
 
-const [component] = program.args
-const { description = '' } = program.opts()
+  if (prompt.isCancel(template)) showError(ERRORS.ABORT)
 
-if (!component) {
-  showError('Argument "component" must be defined!')
+  return template
 }
-if (!WORDS_ONLY_REGEX.test(component)) {
-  showError('"component" name must contain letters and dash symbols only')
+
+async function promptPackageDescription() {
+  const description = await prompt.text({
+    message: 'Describe your package (short description):',
+    initialValue: '',
+    validate(value) {
+      if (!value) return `You package must have a description`
+      if (value.length < 10) return ERRORS.INVALID_DESCRIPTION
+    },
+  })
+
+  if (prompt.isCancel(description)) showError(ERRORS.ABORT)
+
+  return description
 }
 
-const componentDir = `/packages/components/${component}/`
-const componentPath = `${BASE_DIR}${componentDir}`
-const templatesPattern = fileURLToPath(new URL('../templates/**/*.js', import.meta.url))
+/**
+ * Program starts here
+ */
+prompt.intro(`Generate Spark package`)
 
-glob(templatesPattern, async (err, res) => {
-  if (err) showError(err)
-  if (res) {
-    const templateContents = res.map(templatePath =>
-      import(templatePath).then(module => ({
-        path: templatePath
-          .replace(/(.*)\/templates\//, componentPath)
-          .replace('Component', pascalCase(component))
-          .replaceAll(/\[|\]|\.js$/g, ''),
-        content: module.default({ component, description }),
-      }))
-    )
+const name = await promptPackageName()
+const template = await promptPackageTemplate()
+const description = await promptPackageDescription()
 
-    const filesToWrite = await Promise.all(templateContents)
+const packagePath = packageUtils.getFullPath(name, template)
 
-    Promise.all(filesToWrite.map(writeFile)).then(() => {
-      log('All component files have been properly written!')
-    })
-  }
-})
+switch (template) {
+  case TEMPLATE_TYPE.COMPONENT:
+    generateComponentPackage(name, description)
+    break
+  case TEMPLATE_TYPE.HOOK:
+    generateHookPackage(name, description)
+    break
+}
+
+prompt.outro(`Generating package...`)
+
+function generateComponentPackage(name, description) {
+  const templatesPattern = fileURLToPath(new URL('../templates/**/*.js', import.meta.url))
+
+  glob(templatesPattern, async (err, res) => {
+    if (err) showError(err)
+    if (res) {
+      const templateContents = res.map(templatePath =>
+        import(templatePath).then(module => ({
+          path: templatePath
+            .replace(/(.*)\/templates\//, packagePath)
+            .replace('Component', pascalCase(name))
+            .replaceAll(/\[|\]|\.js$/g, ''),
+          content: module.default({
+            component: name,
+            description: description,
+          }),
+        }))
+      )
+
+      const filesToWrite = await Promise.all(templateContents)
+
+      Promise.all(filesToWrite.map(writeFile)).then(() => {
+        log.success('All package files has been properly written!')
+      })
+    }
+  })
+}
+
+function generateHookPackage(name, description) {
+  showError('Todo: template for hook packages is not ready yet.')
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -11,11 +11,12 @@
   },
   "type": "module",
   "devDependencies": {
+    "@clack/prompts": "^0.2.2",
     "chalk": "5.2.0",
     "commander": "10.0.0",
     "fs-extra": "11.1.0",
     "glob": "8.1.0",
     "pascal-case": "3.1.2"
   },
-  "gitHead": "1857690fc7d399de062fcdee6b7b03feacbc791f"
+  "gitHead": "3df014946de14807674052ae9a6624a11b9c725b"
 }

package/utils.js

@@ -3,15 +3,20 @@ import fs from 'node:fs'
 import chalk from 'chalk'
 import fse from 'fs-extra'
 
-export const log = msg => console.log(chalk.gray(msg)) // eslint-disable-line no-console
+export const log = {
+  success: msg => console.log(chalk.green(msg)), // eslint-disable-line no-console
+  error: msg => console.log(chalk.red(msg)), // eslint-disable-line no-console
+  info: msg => console.log(chalk.yellow(msg)), // eslint-disable-line no-console
+  warning: msg => console.log(chalk.orange(msg)), // eslint-disable-line no-console
+}
 
 export const showError = (msg, foreignProgram) => {
-  console.error(chalk.red(`✖ Error: ${msg}\n`))
+  log.error(`✖ Error: ${msg}\n`)
   process.exit(1)
 }
 
 export const writeFile = ({ path, content }) =>
   fse
     .outputFile(path, content)
-    .then(() => log(`Created ${path}`))
+    .then(() => log.info(`Created ${path}`))
     .catch(() => showError(`Failed creating ${path}`))