@spark-ui/cli-utils 2.12.9 → 2.13.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.13.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.12.10...@spark-ui/cli-utils@2.13.0) (2024-05-03)
+
+### Features
+
+- **cli-utils:** add scan adoption script ([203e05e](https://github.com/adevinta/spark/commit/203e05e02285be18e5d0c6211f3ec04e4322837d))
+
+## [2.12.10](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.12.9...@spark-ui/cli-utils@2.12.10) (2024-04-29)
+
+**Note:** Version bump only for package @spark-ui/cli-utils
+
 ## [2.12.9](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.12.8...@spark-ui/cli-utils@2.12.9) (2024-04-08)
 
 **Note:** Version bump only for package @spark-ui/cli-utils

package/bin/spark-scan.mjs

@@ -0,0 +1,15 @@
+#! /usr/bin/env node
+
+import { Command } from 'commander'
+import { adoption } from '../src/scan/index.mjs'
+
+const program = new Command()
+
+program
+  .command('adoption')
+  .description('Scan @spark-ui adoption for .tsx files with given imports')
+  .option('-c, --configuration <path>', 'configuration file route', '.spark-ui.cjs')
+  .option('-o, --output <path>', 'output file route')
+  .action(adoption)
+
+program.parse(process.argv)

package/bin/spark.mjs

@@ -9,6 +9,6 @@ const { version } = require('../package.json')
 program.version(version, '--version')
 
 program.command('generate', 'Generate a component scaffolding').alias('g')
-program.command('setup-themes', 'Set up Spark theming configuration')
+program.command('scan', 'Scan a directory for components').alias('s')
 
 program.parse(process.argv)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.12.9",
+  "version": "2.13.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,8 @@
   ],
   "bin": {
     "spark": "./bin/spark.mjs",
-    "spark-generate": "./bin/spark-generate.mjs"
+    "spark-generate": "./bin/spark-generate.mjs",
+    "spark-scan": "./bin/spark-scan.mjs"
   },
   "type": "module",
   "repository": {
@@ -42,5 +43,5 @@
   "devDependencies": {
     "@types/fs-extra": "11.0.4"
   },
-  "gitHead": "38d74a10a4a9915b1a00d9e416a4132066d2bdc7"
+  "gitHead": "5d945ed8b0a31bf0d42382c560388c95a92f6411"
 }

package/src/generate/templates/component/[package.json].js

@@ -24,8 +24,8 @@ export default ({ name, description }) => `{
   },
   "peerDependencies": {
     "@spark-ui/theme-utils": "^4.0.0",
-    "react": "^16.8 || ^17.0 || ^18.0",
-    "react-dom": "^16.8 || ^17.0 || ^18.0",
+    "react": "^18.0 || ^19.0",
+    "react-dom": "^18.0 || ^19.0",
     "tailwindcss": "^3.0.0"
   },
   "repository": {

package/src/generate/templates/hook/[package.json].js

@@ -21,7 +21,7 @@ export default ({ name, description }) => {
     "build": "vite build"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17.0 || ^18.0",
+    "react": "^18.0 || ^19.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0"
   },
   "repository": {

package/src/index.doc.mdx

@@ -40,3 +40,73 @@ Then, a command prompt will guide you through the process by asking you for:
 - the package name (required),
 - the template used (required, only `Component` template available right now)
 - and the package description (optional).
+
+## Scanning directory adoption
+
+For viewing the adoption of packages in a project directory, the following command can be executed:
+
+```bash
+$ spark scan adoption
+```
+
+### Options
+
+#### Configuration
+
+```bash
+$ spark scan adoption --configuration <filename>
+```
+
+alias
+
+```bash
+$ spark scan adoption -c <filename>
+```
+
+example
+
+```bash
+spark scan adoption -c "./spark-ui.cjs"
+````
+
+
+##### configuration filename structure
+
+ ```js
+ // .spark-ui.cjs
+module.exports = {
+  adoption: {
+    details: true,
+    sort: 'count', // 'count' or 'alphabetical'
+    imports: ['@spark-ui'],
+    extensions: ['.tsx', '.ts'],
+    directory: './packages',
+  },
+}
+
+/***
+ - `details` (boolean) - whether to show the details of the adoption or not. Default: false
+- `sort` ('count' | 'alphabetical') - packages are sorted alphabetically. Default: false means sorted by adoption number
+- `imports` (array) - the imports to be scanned.
+- `extensions` (array) - the extensions to be scanned
+- `directory` (string) - the directory to be scanned. Default: '.' means the current directory
+***/
+```
+
+#### Output
+The output option is used to save the adoption data to a file. It is optional
+
+```bash
+$ spark scan adoption --output <filename>
+```
+ alias
+
+```bash
+$ spark scan adoption -o <filename>
+```
+
+example
+
+```bash
+spark scan adoption -o "./adoption.$(date +"%Y%m%d_%H:%M:%S").json"
+````

package/src/scan/index.mjs

@@ -0,0 +1,122 @@
+import * as process from 'node:process'
+
+import { appendFileSync, existsSync } from 'fs'
+import path from 'path'
+
+import { scanCallback } from './scanCallback.mjs'
+import { logger } from './utils/logger.mjs'
+import { scanDirectories } from './utils/scan-directories.mjs'
+
+const DEFAULT_CONFIG = {
+  adoption: {
+    details: false,
+    sort: 'count',
+    imports: ['@spark-ui'],
+    extensions: ['.tsx', '.ts'],
+    directory: '.',
+  },
+}
+
+export async function adoption(options) {
+  let config = DEFAULT_CONFIG
+
+  const configFileRoute = path.join(process.cwd(), options.configuration || '.spark-ui.cjs')
+  try {
+    if (existsSync(configFileRoute)) {
+      console.log('✨✨✨ loading spark-ui custom configuration file ✨✨✨')
+      const { default: customConfig } = await import(
+        path.join(process.cwd(), options.configuration)
+      )
+      config = structuredClone(customConfig, DEFAULT_CONFIG)
+    }
+  } catch (error) {
+    logger.info('ℹ️ Loading default configuration')
+  }
+
+  const extensions = config.adoption.extensions
+
+  let importCount = 0
+  const importResults = {}
+  let importsUsed = {}
+  let importsCount = {}
+  config.adoption.imports.forEach(moduleName => {
+    console.log(`scanning adoption for ${moduleName}`)
+    const directoryPath = path.join(process.cwd(), config.adoption.directory)
+
+    const response = scanDirectories(directoryPath, moduleName, extensions, scanCallback, {
+      importCount,
+      importResults,
+      importsUsed,
+      importsCount,
+    })
+    if (importCount !== response.importCount) {
+      logger.success(
+        `Found ${response.importCount - importCount} imports with "${moduleName}" modules across directory ${directoryPath}.`
+      )
+    } else {
+      logger.warn(`No files found with "${moduleName}" imports across directory ${directoryPath}.`)
+    }
+    importCount = response.importCount
+  })
+
+  // Sort importsUsed by alphabet
+  if (config.adoption.sort === 'alphabetical') {
+    importsUsed = Object.fromEntries(
+      Object.entries(importsUsed)
+        .sort(([pkgNameA], [pkgNameB]) => pkgNameA.localeCompare(pkgNameB))
+        .map(([pkgName, content]) => {
+          return [
+            pkgName,
+            {
+              default: Object.fromEntries(
+                Object.entries(content.default).sort(([a], [b]) => a.localeCompare(b))
+              ),
+              named: Object.fromEntries(
+                Object.entries(content.named).sort(([a], [b]) => a.localeCompare(b))
+              ),
+              importsCount: content.importsCount,
+            },
+          ]
+        })
+    )
+  } else if (config.adoption.sort === 'count') {
+    // Sort importsUsed by most used
+    importsUsed = Object.fromEntries(
+      Object.entries(importsUsed)
+        .sort(([, contentA], [, contentB]) => contentB.importsCount - contentA.importsCount)
+        .map(([pkgName, content]) => {
+          return [
+            pkgName,
+            {
+              default: Object.fromEntries(
+                Object.entries(content.default).sort(([, a], [, b]) => b - a)
+              ),
+              named: Object.fromEntries(
+                Object.entries(content.named).sort(([, a], [, b]) => b - a)
+              ),
+              importsCount: content.importsCount,
+            },
+          ]
+        })
+    )
+
+    importsCount = Object.fromEntries(Object.entries(importsCount).sort(([, a], [, b]) => b - a))
+  }
+
+  const result = Object.fromEntries(
+    Object.entries(importsUsed).map(([pkgName, value]) => [
+      pkgName,
+      { ...value, ...(config.adoption.details && { results: importResults[pkgName] }) },
+    ])
+  )
+
+  if (options.output) {
+    try {
+      appendFileSync(`${options.output}`, JSON.stringify(result, null, 2))
+    } catch (err) {
+      logger.error(`Error writing file: ${err}`)
+    }
+  } else {
+    logger.info(JSON.stringify(result, null, 2))
+  }
+}

package/src/scan/scanCallback.mjs

@@ -0,0 +1,62 @@
+import extractImports from './utils/extract-imports.mjs'
+
+export function scanCallback(
+  f,
+  moduleName,
+  { importCount, importResults, importsUsed, importsCount }
+) {
+  const response = { importCount, importResults, importsUsed, importsCount }
+  if (!f.fileContent) return response
+
+  const imports = extractImports(f.filePath, moduleName)
+
+  Object.entries(imports).forEach(([key, importDeclarations]) => {
+    const moduleName = key.split('/').splice(0, 2).join('/')
+    importDeclarations.forEach(importDeclaration => {
+      const statement = importDeclaration.getText()
+      const defaultImport = importDeclaration.getDefaultImport()?.getText() || null
+      const namedImports = importDeclaration.getNamedImports().map(n => n.getText())
+
+      if (!importResults[moduleName]) {
+        importResults[moduleName] = []
+      }
+
+      importResults[moduleName].push({
+        path: f.filePath,
+        statement,
+        hasDefault: !!defaultImport,
+        hasNamed: !!namedImports.length,
+        defaultImport,
+        namedImports,
+      })
+
+      if (!importsUsed[moduleName]) {
+        importsUsed[moduleName] = {
+          default: {},
+          named: {},
+          importsCount: 0,
+        }
+      }
+
+      if (defaultImport) {
+        importsUsed[moduleName].default[defaultImport] =
+          importsUsed[moduleName].default[defaultImport] + 1 || 1
+        importsUsed.importsCount = importsCount[defaultImport] + 1
+
+        importsCount[defaultImport] = importsCount[defaultImport] + 1 || 1
+        response.importCount++
+      }
+
+      if (namedImports.length) {
+        namedImports.forEach(n => {
+          importsUsed[moduleName].named[n] = importsUsed[moduleName].named[n] + 1 || 1
+          importsUsed[moduleName].importsCount = importsUsed[moduleName].importsCount + 1
+          importsCount[n] = importsCount[n] + 1 || 1
+          response.importCount++
+        })
+      }
+    })
+  })
+
+  return response
+}

package/src/scan/utils/extract-imports.mjs

@@ -0,0 +1,28 @@
+import { Project } from 'ts-morph'
+
+export function extractImports(filePath, requestedModuleName) {
+  const project = new Project()
+  const sourceFile = project.addSourceFileAtPath(filePath)
+
+  const importStatements = {}
+
+  const importNodes = sourceFile.getImportDeclarations()
+
+  importNodes
+    .filter(node => {
+      const moduleName = node.getModuleSpecifierValue()
+
+      return moduleName.includes(requestedModuleName)
+    })
+    .forEach(node => {
+      const moduleName = node.getModuleSpecifierValue()
+      if (!importStatements[moduleName]) {
+        importStatements[moduleName] = []
+      }
+      importStatements[moduleName].push(node)
+    })
+
+  return importStatements
+}
+
+export default extractImports

package/src/scan/utils/file-contains-import.mjs

@@ -0,0 +1,17 @@
+import fs from 'fs'
+
+/**
+ * Check if a file contains an import from a given import name.
+ * @param filePath The path to the file to check.
+ * @param importName The name of the import to check for.
+ * @returns Whether the file contains an import from the given import name.
+ */
+export function fileContainsImport(filePath, importName) {
+  const fileContent = fs.readFileSync(filePath, 'utf8')
+
+  if (new RegExp(`import.*from\\s+["']${importName}.*["']`, 'm').test(fileContent)) {
+    return { filePath, fileContent }
+  }
+
+  return { filePath }
+}

package/src/scan/utils/get-formated-timestamp.mjs

@@ -0,0 +1,7 @@
+export function getFormatedTimestamp() {
+  const d = new Date()
+  const date = d.toISOString().split('T')[0]
+  const time = d.toTimeString().split(' ')[0].replace(/:/g, '-')
+
+  return `${date} ${time}`
+}

package/src/scan/utils/index.mjs

@@ -0,0 +1,5 @@
+export { extractImports } from './extract-imports.mjs'
+export { fileContainsImport } from './file-contains-import.mjs'
+export { getFormatedTimestamp } from './get-formated-timestamp.mjs'
+export { logger } from './logger.mjs'
+export { scanDirectories } from './scan-directories.mjs'

package/src/scan/utils/logger.mjs

@@ -0,0 +1,19 @@
+import chalk from 'chalk'
+
+export const logger = {
+  error(...args) {
+    console.log(chalk.red(...args))
+  },
+  warn(...args) {
+    console.log(chalk.yellow(...args))
+  },
+  info(...args) {
+    console.log(chalk.cyan(...args))
+  },
+  success(...args) {
+    console.log(chalk.green(...args))
+  },
+  break() {
+    console.log('')
+  },
+}

package/src/scan/utils/scan-directories.mjs

@@ -0,0 +1,45 @@
+import fs from 'fs'
+import path from 'path'
+
+import { fileContainsImport } from './file-contains-import.mjs'
+
+export function scanDirectories(
+  directoryPath,
+  importName,
+  extensions,
+  scanningCallback,
+  { importCount, importResults, importsUsed, importsCount }
+) {
+  const files = fs.readdirSync(directoryPath)
+
+  let response = {
+    importCount,
+    importResults,
+    importsUsed,
+    importsCount,
+  }
+
+  for (const file of files) {
+    const filePath = path.join(directoryPath, file)
+    const stats = fs.statSync(filePath)
+
+    if (stats.isDirectory()) {
+      response = scanDirectories(filePath, importName, extensions, scanningCallback, response)
+    } else if (stats.isFile() && extensions.includes(path.extname(filePath))) {
+      const f = fileContainsImport(filePath, importName)
+
+      if (f) {
+        response = scanningCallback(
+          {
+            filePath: f.filePath,
+            fileContent: f.fileContent,
+          },
+          importName,
+          response
+        )
+      }
+    }
+  }
+
+  return response
+}