@spark-ui/cli-utils 2.6.4 → 2.7.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.6.4...@spark-ui/cli-utils@2.7.0) (2023-03-17)
+
+### Bug Fixes
+
+- **cli-utils:** fix types ([4e4ee36](https://github.com/adevinta/spark/commit/4e4ee362b0af53c994c7b8c682d04c8160294854))
+
+### Features
+
+- **cli-utils:** fix some issues ([cd0cc3e](https://github.com/adevinta/spark/commit/cd0cc3e31100316c2b544cc6ef74994e1a124fa0))
+
 ## [2.6.4](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.6.3...@spark-ui/cli-utils@2.6.4) (2023-03-15)
 
 **Note:** Version bump only for package @spark-ui/cli-utils

package/bin/spark-generate.mjs

@@ -26,7 +26,7 @@ export const run = async () => {
   }
 
   const type = await prompt.select({
-    message: 'Chose a template:',
+    message: 'Choose a template:',
     initialValue: 'component',
     options: [
       {

package/bin/spark.mjs

@@ -8,7 +8,7 @@ const { version } = require('../package.json')
 
 program.version(version, '--version')
 
-program.command('generate <component>', 'Generate a component scaffolding').alias('g')
+program.command('generate', 'Generate a component scaffolding').alias('g')
 program.command('setup-themes', 'Set up Spark theming configuration')
 
 program.parse(process.argv)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.6.4",
+  "version": "2.7.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -11,9 +11,14 @@
     "spark-setup-themes": "./bin/spark-setup-themes.mjs"
   },
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:adevinta/spark.git",
+    "directory": "packages/utils/cli"
+  },
   "dependencies": {
     "@clack/prompts": "0.6.2",
-    "@spark-ui/theme-utils": "^2.9.0",
+    "@spark-ui/theme-utils": "2",
     "camel-case": "4.1.2",
     "chalk": "5.2.0",
     "commander": "10.0.0",
@@ -24,10 +29,8 @@
     "hex-rgb": "5.0.0",
     "pascal-case": "3.1.2"
   },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:adevinta/spark.git",
-    "directory": "packages/utils/cli"
+  "devDependencies": {
+    "@types/fs-extra": "11.0.1"
   },
-  "gitHead": "7cc5991255c85d87507369e9f0e9aea5dd29e349"
+  "gitHead": "b02d8de6793827cb8783dcf1029c7345c7629974"
 }

package/src/core/System.mjs

@@ -19,7 +19,6 @@ export class System {
 
   getPackageJSON() {
     const basePath = this.getBasePath()
-
     const raw = fse.readFileSync(`${basePath}/package.json`).toString()
 
     return JSON.parse(raw)

package/src/generate/generators/TemplateGenerator.mjs

@@ -23,6 +23,7 @@ export class TemplateGenerator extends Generator {
 
   constructor({ system }) {
     super()
+
     this.system = system
   }
 

package/test/spark-generate.test.ts

@@ -0,0 +1,68 @@
+import path from 'node:path'
+
+import fse from 'fs-extra'
+import { fileURLToPath } from 'url'
+import { describe, expect, it } from 'vitest'
+
+import { TemplateGenerator } from '../src/generate/generators/TemplateGenerator.mjs'
+import cmd, { ENTER } from './utils/cmd'
+
+const __dirname = fileURLToPath(import.meta.url)
+const cliPath = path.join(__dirname, '../../bin/spark.mjs')
+const cliProcess = cmd.create(cliPath)
+
+describe('CLI `spark generate` (component package)', () => {
+  it('should properly generate package from CLI when arguments are valid', async () => {
+    // GIVEN a package definition
+    const packageName = 'bar'
+    const packageType = 'component'
+
+    // WHEN we execute the `spark generate` command
+    const response = await cliProcess.execute(
+      ['generate'],
+      [packageName, ENTER, packageType, ENTER, 'This is my foo component', ENTER]
+    )
+    const contextPath = TemplateGenerator.CONTEXTS[packageType] as string
+    const packagePath = path.join(process.cwd(), 'packages', contextPath, packageName)
+
+    // THEN each file is created and the user is informed about it
+    const expectedFiles = [
+      '/.npmignore',
+      '/package.json',
+      '/src/index.ts',
+      '/src/Bar.variants.tsx',
+      '/src/Bar.tsx',
+      '/vite.config.ts',
+      '/src/Bar.stories.mdx',
+      '/src/Bar.test.tsx',
+      '/src/Bar.stories.tsx',
+      '/tsconfig.json',
+    ]
+    const assertExpectedFiles = (filePath: string) => {
+      expect(response).toContain(`Created ${packagePath}${filePath}`)
+      expect(fse.pathExistsSync(`${packagePath}${filePath}`)).toBe(true)
+    }
+
+    expectedFiles.forEach(assertExpectedFiles)
+
+    // Finally we clean up the generated component package
+    fse.removeSync(packagePath)
+  })
+
+  it('should prevent generating package when argument are invalid', async () => {
+    // GIVEN the package name is not using kebab-case notation
+    const packageName = '123'
+    const packageType = 'component'
+
+    // WHEN we try to create it
+    const response = await cliProcess.execute(['generate'], [packageName, ENTER])
+    const contextPath = TemplateGenerator.CONTEXTS[packageType] as string
+    const packagePath = path.join(process.cwd(), 'packages', contextPath, packageName)
+
+    // THEN it throws an error and fails to create files for this package
+    expect(response).toContain(
+      'Name name must contain letters and dash symbols only (ex: "my-package")'
+    )
+    expect(fse.pathExistsSync(packagePath)).toBe(false)
+  })
+})

package/test/utils/cmd.js

@@ -0,0 +1,158 @@
+/**
+ * CLI Integration Test Helper
+ * @author Andrés Zorro <zorrodg@gmail.com>
+ * @see https://gist.github.com/zorrodg/c349cf54a3f6d0a9ba62e0f4066f31cb
+ */
+
+import concat from 'concat-stream'
+import spawn from 'cross-spawn'
+import { existsSync } from 'fs'
+import { constants } from 'os'
+
+const PATH = process.env.PATH
+
+/**
+ * Creates a child process with script path
+ * @param processPath Path of the process to execute
+ * @param args Arguments to the command
+ * @param env (optional) Environment variables
+ */
+function createProcess(processPath, args = [], env = null) {
+  // Ensure that path exists
+  if (!processPath || !existsSync(processPath)) {
+    throw new Error('Invalid process path')
+  }
+
+  args = [processPath].concat(args)
+
+  // This works for node based CLIs, but can easily be adjusted to
+  // any other process installed in the system
+  return spawn('node', args, {
+    env: Object.assign(
+      {
+        NODE_ENV: 'test',
+        preventAutoStart: false,
+        PATH, // This is needed in order to get all the binaries in your current terminal
+      },
+      env
+    ),
+    stdio: [null, null, null, 'ipc'], // This enables interprocess communication (IPC)
+  })
+}
+
+/**
+ * Creates a command and executes inputs (user responses) to the stdin
+ * Returns a promise that resolves when all inputs are sent
+ * Rejects the promise if any error
+ * @param processPath Path of the process to execute
+ * @param args Arguments to the command
+ * @param inputs (Optional) Array of inputs (user responses)
+ * @param opts (optional) Environment variables
+ */
+function executeWithInput(processPath, args, inputs, opts = {}) {
+  if (!Array.isArray(inputs)) {
+    opts = inputs
+    inputs = []
+  }
+
+  const { env = null, timeout = 100, maxTimeout = 10000 } = opts
+  const childProcess = createProcess(processPath, args, env)
+  childProcess.stdin.setEncoding('utf-8')
+
+  let currentInputTimeout, killIOTimeout
+
+  // Creates a loop to feed user inputs to the child process in order to get results from the tool
+  // This code is heavily inspired (if not blantantly copied) from inquirer-test:
+  // https://github.com/ewnd9/inquirer-test/blob/6e2c40bbd39a061d3e52a8b1ee52cdac88f8d7f7/index.js#L14
+  const loop = ins => {
+    if (killIOTimeout) {
+      clearTimeout(killIOTimeout)
+    }
+
+    if (!ins.length) {
+      childProcess.stdin.end()
+
+      // Set a timeout to wait for CLI response. If CLI takes longer than
+      // maxTimeout to respond, kill the childProcess and notify user
+      killIOTimeout = setTimeout(() => {
+        console.error('Error: Reached I/O timeout')
+        childProcess.kill(constants.signals.SIGTERM)
+      }, maxTimeout)
+
+      return
+    }
+
+    currentInputTimeout = setTimeout(() => {
+      childProcess.stdin.write(ins[0])
+      // Log debug I/O statements on tests
+      if (env && env.DEBUG) {
+        console.log('input:', ins[0]) // eslint-disable-line no-console
+      }
+      loop(ins.slice(1))
+    }, timeout)
+  }
+
+  const promise = new Promise((resolve, reject) => {
+    // Get errors from CLI
+    childProcess.stderr.on('data', data => {
+      // Log debug I/O statements on tests
+      if (env && env.DEBUG) {
+        console.log('error:', data.toString()) // eslint-disable-line no-console
+      }
+    })
+
+    // Get output from CLI
+    childProcess.stdout.on('data', data => {
+      // Log debug I/O statements on tests
+      if (env && env.DEBUG) {
+        console.log('output:', data.toString()) // eslint-disable-line no-console
+      }
+    })
+
+    childProcess.stderr.once('data', err => {
+      childProcess.stdin.end()
+
+      if (currentInputTimeout) {
+        clearTimeout(currentInputTimeout)
+        inputs = []
+      }
+      reject(err.toString())
+    })
+
+    childProcess.on('error', reject)
+
+    // Kick off the process
+    loop(inputs)
+
+    childProcess.stdout.pipe(
+      concat(result => {
+        if (killIOTimeout) {
+          clearTimeout(killIOTimeout)
+        }
+
+        resolve(result.toString())
+      })
+    )
+  })
+
+  // Appending the process to the promise, in order to
+  // add additional parameters or behavior (such as IPC communication)
+  promise.attachedProcess = childProcess
+
+  return promise
+}
+
+export default {
+  create: processPath => {
+    const fn = (...args) => executeWithInput(processPath, ...args)
+
+    return {
+      execute: fn,
+    }
+  },
+}
+
+export const DOWN = '\x1B\x5B\x42'
+export const UP = '\x1B\x5B\x41'
+export const ENTER = '\x0D'
+export const SPACE = '\x20'