@spark-ui/cli-utils 1.3.2 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@1.4.0...@spark-ui/cli-utils@2.0.0) (2023-02-22)
+
+### Code Refactoring
+
+- **cli-utils:** clean up code following PR feedbacks ([724c83e](https://github.com/adevinta/spark/commit/724c83e771307addeabd1fcea45b810d56f41e2f))
+
+### Features
+
+- **cli-utils:** optimize DS configuration for spark consumers ([8d18892](https://github.com/adevinta/spark/commit/8d188920cffc3d24f96b1d5a9398eb22149c1640))
+
+### BREAKING CHANGES
+
+- **cli-utils:** update the way the cli spark-setup-theme command works
+- **cli-utils:** update the way the cli spark-setup-theme command works
+
+# [1.4.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@1.3.2...@spark-ui/cli-utils@1.4.0) (2023-02-22)
+
+### Features
+
+- **cli-utils:** add hook and utils template ([e22d672](https://github.com/adevinta/spark/commit/e22d672e349909cc4bc8673312846d10d77e7ea5))
+
 ## [1.3.2](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@1.3.1...@spark-ui/cli-utils@1.3.2) (2023-02-22)
 
 **Note:** Version bump only for package @spark-ui/cli-utils

package/bin/core/Logger.mjs

@@ -0,0 +1,19 @@
+import chalk from 'chalk'
+
+export class Logger {
+  success(message) {
+    console.log(chalk.green(message))
+  }
+
+  error(message) {
+    console.log(chalk.red(message))
+  }
+
+  info(message) {
+    console.log(chalk.yellow(message))
+  }
+
+  warning(message) {
+    console.log(chalk.green(message))
+  }
+}

package/bin/core/System.mjs

@@ -0,0 +1,45 @@
+import fse from 'fs-extra'
+import glob from 'glob'
+
+export class System {
+  logger
+
+  constructor({ logger }) {
+    this.logger = logger
+  }
+
+  exit(message) {
+    this.logger.error(`✖ Error: ${message}\n`)
+    process.exit(1)
+  }
+
+  getBasePath() {
+    return process.cwd()
+  }
+
+  getPackageJSON() {
+    const basePath = this.getBasePath()
+
+    const raw = fse.readFileSync(`${basePath}/package.json`).toString()
+
+    return JSON.parse(raw)
+  }
+
+  isPackageCreated(name) {
+    const base = this.getBasePath()
+    const packageJSON = this.getPackageJSON()
+
+    return packageJSON.workspaces.some(workspace => {
+      const packages = glob.sync(`${base}/${workspace}/`)
+
+      return packages.some(path => path.endsWith(`/${name}/`))
+    })
+  }
+
+  writeFile({ path, content }) {
+    return fse
+      .outputFile(path, content)
+      .then(() => this.logger.info(`Created ${path}`))
+      .catch(error => this.exit(`Failed creating ${path}`))
+  }
+}

package/bin/core/index.mjs

@@ -0,0 +1,2 @@
+export { Logger } from './Logger.mjs'
+export { System } from './System.mjs'

package/bin/generators/Generator.mjs

@@ -0,0 +1,5 @@
+export class Generator {
+  execute() {
+    throw new Error('execute method should be implemented')
+  }
+}

package/bin/generators/TemplateGenerator.mjs

@@ -0,0 +1,83 @@
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import glob from 'glob'
+import { pascalCase } from 'pascal-case'
+import { camelCase } from 'camel-case'
+
+import { System } from '../core/index.mjs'
+import { Generator } from './Generator.mjs'
+
+export class TemplateGenerator extends Generator {
+  static TYPES = {
+    COMPONENT: 'component',
+    HOOK: 'hook',
+    UTIL: 'util',
+  }
+
+  static CONTEXTS = {
+    [TemplateGenerator.TYPES.COMPONENT]: 'components',
+    [TemplateGenerator.TYPES.HOOK]: 'components',
+    [TemplateGenerator.TYPES.UTIL]: 'utils',
+  }
+
+  constructor({ system }) {
+    super()
+    this.system = system
+  }
+
+  getDest({ type, name }) {
+    const basePath = this.system.getBasePath()
+    const context = TemplateGenerator.CONTEXTS[type]
+
+    return `${basePath}/packages/${context}/${name}`
+  }
+
+  getTemplatePaths({ type }) {
+    const pattern = fileURLToPath(new URL(`../../templates/${type}/**/*.js`, import.meta.url))
+
+    return new Promise((resolve, reject) => {
+      glob(pattern, async (error, paths) => {
+        if (error) {
+          return reject(error)
+        }
+
+        resolve(paths)
+      })
+    })
+  }
+
+  getTemplatePath({ path, name, type, dest }) {
+    const parsed = path
+      .replace(/(.*)\/templates\/([a-z-]+)\//, `${dest}/`)
+      .replaceAll(/\[|\]|\.js$/g, '')
+
+    if (type === TemplateGenerator.TYPES.COMPONENT) {
+      return parsed.replace('Component', pascalCase(name))
+    }
+
+    if (type === TemplateGenerator.TYPES.HOOK) {
+      return parsed.replace('name', camelCase(name))
+    }
+
+    return parsed
+  }
+
+  async execute({ type, name, description }) {
+    const dest = this.getDest({ type, name })
+    const paths = await this.getTemplatePaths({ type })
+
+    const promises = paths.map(path =>
+      import(path).then(module => ({
+        path: this.getTemplatePath({ path, name, type, dest }),
+        content: module.default({
+          name,
+          description,
+        }),
+      }))
+    )
+
+    const files = await Promise.all(promises)
+
+    return Promise.all(files.map(file => this.system.writeFile(file)))
+  }
+}

package/bin/generators/index.mjs

@@ -0,0 +1,2 @@
+export { Generator } from './Generator.mjs'
+export { TemplateGenerator } from './TemplateGenerator.mjs'

package/bin/spark-generate.mjs

@@ -1,157 +1,71 @@
 #!/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 glob from 'glob'
-import { pascalCase } from 'pascal-case'
-import { log, showError, writeFile } from '../utils.js'
 
-const BASE_DIR = process.cwd()
-const rawRootPackageJSON = fse.readFileSync(`${BASE_DIR}/package.json`)
-let rootPackageJSON = JSON.parse(rawRootPackageJSON)
+import { TemplateGenerator } from './generators/index.mjs'
+import { Logger, System } from './core/index.mjs'
+import { DescriptionValidator, NameValidator } from './validators/index.mjs'
 
-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)}`,
-}
+const logger = new Logger()
+const system = new System({ logger })
+const generator = new TemplateGenerator({ system })
 
-async function promptPackageName() {
+export const run = async () => {
   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
+      const validator = new NameValidator({ system })
+
+      return validator.validate(value)
     },
   })
 
-  if (prompt.isCancel(name)) showError(ERRORS.ABORT)
-
-  return name
-}
+  if (prompt.isCancel(name)) {
+    system.exit('Aborted package generation')
+  }
 
-async function promptPackageTemplate() {
-  const template = await prompt.select({
+  const type = await prompt.select({
     message: 'Chose a template:',
-    initialValue: TEMPLATE_TYPE.COMPONENT,
+    initialValue: 'component',
     options: [
       {
-        value: TEMPLATE_TYPE.COMPONENT,
+        value: TemplateGenerator.TYPES.COMPONENT,
         label: 'Component',
-        hint: 'Typescript dummy component with some tests, stories and config files',
+        hint: 'TypeScript component package',
       },
       {
-        value: TEMPLATE_TYPE.HOOK,
+        value: TemplateGenerator.TYPES.HOOK,
         label: 'Hook',
-        hint: 'Typescript hook with some tests, stories and config files',
+        hint: 'TypeScript hook package',
+      },
+      {
+        value: TemplateGenerator.TYPES.UTIL,
+        label: 'Utility',
+        hint: 'TypeScript utility package',
       },
     ],
   })
 
-  if (prompt.isCancel(template)) showError(ERRORS.ABORT)
-
-  return template
-}
+  if (prompt.isCancel(type)) {
+    system.exit('Aborted package generation')
+  }
 
-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
+      const validator = new DescriptionValidator()
+
+      return validator.validate(value)
     },
   })
 
-  if (prompt.isCancel(description)) showError(ERRORS.ABORT)
-
-  return description
-}
-
-/**
- * Program starts here
- */
-prompt.intro(`Generate Spark package`)
-
-const name = await promptPackageName()
-const template = await promptPackageTemplate()
-const description = await promptPackageDescription()
-
-const packagePath = packageUtils.getFullPath(name, template)
-
-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,
-          }),
-        }))
-      )
+  if (prompt.isCancel(description)) {
+    system.exit('Aborted package generation')
+  }
 
-      const filesToWrite = await Promise.all(templateContents)
-
-      Promise.all(filesToWrite.map(writeFile)).then(() => {
-        log.success('All package files has been properly written!')
-      })
-    }
-  })
+  generator.execute({ name, type, description })
 }
 
-function generateHookPackage(name, description) {
-  showError('Todo: template for hook packages is not ready yet.')
-}
+run()

package/bin/spark-setup-theme.mjs

@@ -1,47 +1,78 @@
 #!/usr/bin/env node
 
 import { spawn } from 'child_process'
-import { join, extname, parse, sep } from 'path'
-import { readFileSync, readdirSync, writeFileSync, unlinkSync } from 'fs'
+import { join, extname } from 'node:path'
+import { readFileSync, readdirSync, writeFileSync, unlinkSync } from 'node:fs'
 import { transformSync } from 'esbuild'
+import { createRequire } from 'node:module'
 
-import { log, showError } from '../utils.js'
+import { Logger, System } from './core/index.mjs'
+import { createCSSTokensFile, createTailwindThemeConfigFile } from '../utils/setupTheme/index.js'
 
-const jsFileExtension = '.js'
+const logger = new Logger()
+const system = new System({ logger })
 
+const require = createRequire(import.meta.url)
 const configFile = readdirSync(process.cwd()).find(fileName =>
   /^(spark\.theme\.config)\.(js|ts|mjs|mts|cjs|cts)$/.test(fileName)
 )
 
 if (!configFile) {
-  showError(
+  system.exit(
     "We couldn't find a `spark.theme.config` file in this folder. Please make sure that the file is located in the root folder of your project"
   )
 }
 
+const configFilePath = join(process.cwd(), configFile)
 const configFileIsInJS = configFile === 'spark.theme.config.js'
-const filePath = join(process.cwd(), configFile)
 
 const allowedExtensions = ['.ts', '.mts', '.cts', '.js', '.cjs', '.mjs']
-const fileExtension = extname(filePath)
-if (!allowedExtensions.includes(fileExtension)) {
-  showError(`Your spark.theme.config file extension (${fileExtension}) is not supported.`)
+const jsFileExtension = '.js'
+const configFileExtension = extname(configFilePath)
+if (!allowedExtensions.includes(configFileExtension)) {
+  system.exit(`Your spark.theme.config file extension (${configFileExtension}) is not supported.`)
 }
 
-const tsCode = readFileSync(filePath, 'utf-8')
-const jsCode = transformSync(tsCode, { loader: 'ts' }).code
+const configFileContent = readFileSync(configFilePath, 'utf-8')
+const jsCode = transformSync(configFileContent, { loader: 'ts' }).code
 
-const jsFilePath = filePath.replace(/\.ts$|\.mts$|\.cts$|\.mjs|\.cjs$/, jsFileExtension)
-const jsFileContents = Buffer.from(jsCode, 'utf-8')
+const jsFilePath = configFilePath.replace(/\.ts$|\.mts$|\.cts$|\.mjs|\.cjs$/, jsFileExtension)
+const jsFileContents = jsCode
 
 if (!configFileIsInJS) writeFileSync(jsFilePath, jsFileContents)
 
-const child = spawn(process.execPath, [jsFilePath], {
-  stdio: 'inherit',
-})
+import(jsFilePath)
+  .then(module => {
+    const { tailwindThemeConfigFilePath, CSSTokens } = module.default
+
+    createTailwindThemeConfigFile(tailwindThemeConfigFilePath)
+    createCSSTokensFile(CSSTokens.filePath, CSSTokens.themes)
+
+    const child = spawn(process.execPath, [jsFilePath], {
+      stdio: 'inherit',
+    })
+
+    child.on('exit', code => {
+      if (!configFileIsInJS) unlinkSync(jsFilePath)
+      logger.success(
+        `✨ Your Spark Tailwind theme config file has been successfully created: ${join(
+          process.cwd(),
+          tailwindThemeConfigFilePath
+        )}`
+      )
+
+      logger.success(
+        `✨ Your Spark Tailwind CSS Tokens file file has been successfully created: ${join(
+          process.cwd(),
+          CSSTokens.filePath
+        )}`
+      )
 
-child.on('exit', code => {
-  if (!configFileIsInJS) unlinkSync(jsFilePath)
-  log.success('✨ Your Spark theme config files have been successfully created!')
-  process.exit(code)
-})
+      process.exit(code)
+    })
+  })
+  .catch(err => {
+    unlinkSync(jsFilePath)
+    system.exit(`
+    Something went wrong while running ${configFilePath}: ${err}`)
+  })

package/bin/validators/DescriptionValidator.mjs

@@ -0,0 +1,19 @@
+import { Validator } from './Validator.mjs'
+
+export class DescriptionValidator extends Validator {
+  constructor() {
+    super()
+  }
+
+  validate(description) {
+    if (!description) {
+      return 'You package must have a description'
+    }
+
+    if (description.length < 10) {
+      return 'Description is too short (minimum is 10 chars)'
+    }
+
+    return undefined
+  }
+}

package/bin/validators/NameValidator.mjs

@@ -0,0 +1,25 @@
+import { System } from '../core/index.mjs'
+import { Validator } from './Validator.mjs'
+
+export class NameValidator extends Validator {
+  system
+
+  constructor({ system }) {
+    super()
+    this.system = system
+  }
+
+  validate(name) {
+    if (!name) {
+      return 'Package name must me defined'
+    }
+
+    if (!/^[a-z-]*$/.test(name)) {
+      return 'Name name must contain letters and dash symbols only (ex: "my-package")'
+    }
+
+    if (this.system.isPackageCreated(name)) {
+      return 'A package with that name already exists. Either delete it manually or use another name.'
+    }
+  }
+}

package/bin/validators/Validator.mjs

@@ -0,0 +1,5 @@
+export class Validator {
+  validate() {
+    throw new Error('validate method should be implemented')
+  }
+}

package/bin/validators/index.mjs

@@ -0,0 +1,2 @@
+export { NameValidator } from './NameValidator.mjs'
+export { DescriptionValidator } from './DescriptionValidator.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -13,6 +13,8 @@
   "type": "module",
   "dependencies": {
     "@clack/prompts": "0.2.2",
+    "@spark-ui/theme-utils": "*",
+    "camel-case": "4.1.2",
     "chalk": "5.2.0",
     "commander": "10.0.0",
     "esbuild": "0.17.8",
@@ -25,5 +27,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/cli"
   },
-  "gitHead": "d31d127a513beafe224e16ba94347cf0b968c486"
+  "gitHead": "a7cfc5667178ab46c812a43423f57d10037a5c6a"
 }

package/templates/{[package.json].js → component/[package.json].js}

@@ -1,5 +1,5 @@
-export default ({ component, description }) => `{
-  "name": "@spark-ui/${component}",
+export default ({ name, description }) => `{
+  "name": "@spark-ui/${name}",
   "version": "1.0.0",
   "description": "${description}",
   "publishConfig": {

package/templates/{src → component/src}/[Component.stories.mdx].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component, description }) => {
-  const componentName = pascalCase(component)
+export default ({ name, description }) => {
+  const componentName = pascalCase(name)
 
   return `import { ArgsTable, Meta, Story } from '@storybook/addon-docs'
 import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
@@ -20,13 +20,13 @@ ${description}
 <StoryHeading label="Install" />
 
 \`\`\`
-npm install @spark-ui/${component}
+npm install @spark-ui/${name}
 \`\`\`
 
 <StoryHeading label="Import" />
 
 \`\`\`
-import { ${componentName} } from "@spark-ui/${component}"
+import { ${componentName} } from "@spark-ui/${name}"
 \`\`\`
 
 <StoryHeading label="Props" />

package/templates/{src → component/src}/[Component.stories.tsx].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component, description }) => {
-  const componentName = pascalCase(component)
+export default ({ name, description }) => {
+  const componentName = pascalCase(name)
 
   return `import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
 

package/templates/{src → component/src}/[Component.test.tsx].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component }) => {
-  const componentName = pascalCase(component)
+export default ({ name }) => {
+  const componentName = pascalCase(name)
 
   return `import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'

package/templates/{src → component/src}/[Component.tsx].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component }) => {
-  const componentName = pascalCase(component)
+export default ({ name }) => {
+  const componentName = pascalCase(name)
 
   return `import { ComponentPropsWithoutRef, PropsWithChildren } from 'react'
 

package/templates/component/src/[Component.variants.tsx].js

@@ -0,0 +1,8 @@
+import { pascalCase } from 'pascal-case'
+
+export default ({ name }) => {
+  const componentName = pascalCase(name)
+
+  return `
+`
+}

package/templates/{src → component/src}/[index.ts].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component }) => {
-  const componentName = pascalCase(component)
+export default ({ name }) => {
+  const componentName = pascalCase(name)
 
   return `export { ${componentName} } from './${componentName}'
 `

package/templates/hook/[.npmignore].js

@@ -0,0 +1,3 @@
+export default () => `src
+**/*.stories.*
+`

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

@@ -0,0 +1,15 @@
+export default ({ name, description }) => `{
+  "name": "@spark-ui/${name}",
+  "version": "1.0.0",
+  "description": "${description}",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  }
+}
+`

package/templates/hook/[tsconfig.json].js

@@ -0,0 +1,4 @@
+export default () => `{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}`

package/templates/hook/[vite.config.ts].js

@@ -0,0 +1,7 @@
+export default () => `import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(name)
+`

package/templates/hook/src/[index.ts].js

@@ -0,0 +1,8 @@
+import { camelCase } from 'camel-case'
+
+export default ({ name }) => {
+  const hookName = camelCase(name)
+
+  return `export { ${hookName} } from './${hookName}'
+`
+}

package/templates/hook/src/[name.stories.mdx].js

@@ -0,0 +1,42 @@
+import { camelCase } from 'camel-case'
+
+export default ({ name, description }) => {
+  const hookName = camelCase(name)
+
+  return `import { ArgsTable, Meta, Story } from '@storybook/addon-docs'
+import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
+import { StoryHeading } from '@docs/helpers/StoryHeading'
+
+import { ${hookName} } from '.'
+
+import * as stories from './${hookName}.stories'
+
+<Meta title="Hooks/${hookName}" />
+
+# ${hookName}
+
+${description}
+
+<StoryHeading label="Install" />
+
+\`\`\`
+npm install @spark-ui/${name}
+\`\`\`
+
+<StoryHeading label="Import" />
+
+\`\`\`
+import { ${hookName} } from "@spark-ui/${name}"
+\`\`\`
+
+<StoryHeading label="Usage" />
+
+<ArgsTable of={${hookName}} />
+
+\`\`\`jsx
+import { ${hookName} } from "@spark-ui/${name}"
+
+const Demo = () => {}
+\`\`\`
+`
+}

package/templates/hook/src/[name.test.tsx].js

@@ -0,0 +1,17 @@
+import { camelCase } from 'camel-case'
+
+export default ({ name }) => {
+  const hookName = camelCase(name)
+
+  return `import { renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { ${hookName} } from './${hookName}'
+
+describe('${hookName}', () => {
+  it('should be defined', () => {
+    expect(${hookName}).toBeDefined()
+  })
+})
+`
+}

package/templates/hook/src/[name.tsx].js

@@ -0,0 +1,10 @@
+import { camelCase } from 'camel-case'
+
+export default ({ name }) => {
+  const hookName = camelCase(name)
+
+  return `export function ${hookName}() {
+  return null
+}
+`
+}

package/templates/util/[.npmignore].js

@@ -0,0 +1 @@
+export default () => 'src'

package/templates/util/[package.json].js

@@ -0,0 +1,15 @@
+export default ({ name, description }) => `{
+  "name": "@spark-ui/${name}",
+  "version": "1.0.0",
+  "description": "${description}",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  }
+}
+`

package/templates/util/[tsconfig.json].js

@@ -0,0 +1,5 @@
+export default () => `{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../global.d.ts"]
+}
+`

package/templates/util/[vite.config.ts].js

@@ -0,0 +1,23 @@
+export default () => `import { terser } from 'rollup-plugin-terser'
+import dts from 'vite-plugin-dts'
+
+export default {
+  build: {
+    target: 'es2015',
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es', 'cjs'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['node:path', 'node:fs'],
+      plugins: [terser()],
+    },
+  },
+  plugins: [
+    dts({
+      entryRoot: './src',
+    }),
+  ],
+}
+`

package/templates/util/src/[index.ts].js

@@ -0,0 +1 @@
+export default () => ''

package/utils/setupTheme/createCSSTokenfile.js

@@ -0,0 +1,95 @@
+import { appendFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import hexRgb from 'hex-rgb'
+
+import { isHex, isStringOrNumber, toKebabCase } from './utils.js'
+
+function flattenTheme(theme, className) {
+  const flattenedTheme = {}
+
+  function flatten(obj, path) {
+    Object.entries(obj).forEach(([key, value]) => {
+      if (value !== null && typeof value === 'object') {
+        const formattedPath = path ? `--${path}-${key}` : `--${key}`
+        flatten(value, toKebabCase(formattedPath.replace(/-{3,}/, '--')))
+
+        return
+      }
+
+      if (isStringOrNumber(value)) {
+        const getFormattedValue = () => {
+          if (isHex(value)) {
+            const { red, green, blue } = hexRgb(value)
+
+            return `${red} ${green} ${blue}`
+          }
+
+          return value
+        }
+
+        flattenedTheme[`${path}-${toKebabCase(key)}`] = getFormattedValue()
+      }
+    })
+  }
+
+  flatten(theme)
+
+  return {
+    ...flattenedTheme,
+    className,
+  }
+}
+
+const toStringifiedTheme = theme =>
+  Object.entries(theme)
+    .map(([k, v]) => `${k}:${v}`)
+    .join(';')
+
+const getStringifiedThemes = themeRecord =>
+  Object.keys(themeRecord).map(key => {
+    const { className, ...rest } = flattenTheme(themeRecord[key], key)
+
+    return key === 'default'
+      ? `:root{${toStringifiedTheme(rest)}}`
+      : `.${className}{${toStringifiedTheme(rest)}}`
+  })
+
+/**
+ * Creates a CSS file containing theme tokens represented as CSS custom properties
+ *
+ * @param {string} path - The file path where the CSS file will be created.
+ * @param {Record<string, Theme>} themeRecord - A record (with a required key of "default") of themes that will be included in the CSS Tokens file.
+ *
+ * @example
+ *
+ * const defaultTheme: Theme = { ... }
+ * const darkTheme: Theme = { ... }
+ * const otherTheme: Theme = { ... }
+ *
+ * const themes = {
+ *   default: defaultTheme,
+ *   dark: darkTheme
+ *   other: otherTheme
+ * }
+ *
+ * createCSSTokensFile('somePath.css', themes) // will generate a "somePath.css" file in the relative location from which it was called
+ */
+export function createCSSTokensFile(path, themeRecord) {
+  try {
+    appendFileSync(
+      join(process.cwd(), path),
+      `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        @layer base {${getStringifiedThemes(themeRecord).join('')}}
+        `,
+      {
+        flag: 'w',
+      }
+    )
+  } catch (error) {
+    console.error('Failed to create the CSS token file', error)
+  }
+}

package/utils/setupTheme/createTailwindThemeConfigFile.js

@@ -0,0 +1,60 @@
+import { writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { defaultTheme } from '@spark-ui/theme-utils'
+
+import { isHex, isStringOrNumber, toKebabCase, toKebabCaseKeys } from './utils.js'
+
+function toTailwindConfig(theme) {
+  const themeCpy = JSON.parse(JSON.stringify(theme))
+
+  function flatten(obj, path) {
+    Object.entries(obj).forEach(([key, value]) => {
+      if (value !== null && typeof value === 'object') {
+        const formattedPath = path ? `--${path}-${key}` : `--${key}`
+        flatten(value, toKebabCase(formattedPath.replace(/-{3,}/, '--')))
+
+        return
+      }
+
+      /* eslint-disable */
+      if (isStringOrNumber(value)) {
+        const formattedPath =
+          /--colors/.test(path || '') && isHex(value)
+            ? `rgb(var(${path}-${toKebabCase(key)}) / <alpha-value>)`
+            : `var(${path}-${toKebabCase(key)})`
+
+        /* @ts-ignore */
+        obj[key] = formattedPath
+        /* eslint-enable */
+      }
+    })
+  }
+
+  flatten(themeCpy)
+
+  return toKebabCaseKeys(themeCpy)
+}
+
+/**
+ * Creates a Tailwind config file that links the [theme options](https://tailwindcss.com/docs/theme#configuration-reference) provided by Tailwind with the CSS custom property values generated using the "createCSSTokensFile" function
+ *
+ * @param {string} path - The file path where the Tailwind config file will be created.
+ *
+ * @example
+ *
+ * createTailwindThemeConfigFile('./tailwind.theme.js') // will generate a "tailwind.theme.js" in the relative location from which it was called
+ */
+export function createTailwindThemeConfigFile(path) {
+  try {
+    writeFileSync(
+      join(process.cwd(), path),
+      `module.exports = ${JSON.stringify(toTailwindConfig(defaultTheme))}`,
+      {
+        flag: 'w',
+      }
+    )
+  } catch (error) {
+    console.error('Failed to create the Tailwind theme config file', error)
+  }
+}

package/utils/setupTheme/index.js

@@ -0,0 +1,2 @@
+export { createCSSTokensFile } from './createCSSTokenfile.js'
+export { createTailwindThemeConfigFile } from './createTailwindThemeConfigFile.js'

package/utils/setupTheme/utils.js

@@ -0,0 +1,30 @@
+function toKebabCase(v) {
+  return v.replace(/[A-Z]/g, e => `-${e.toLocaleLowerCase()}`)
+}
+
+function isHex(value) {
+  if (typeof value === 'number') {
+    return false
+  }
+
+  const regexp = /^#[0-9a-fA-F]+$/
+
+  return regexp.test(value)
+}
+
+function isStringOrNumber(value) {
+  return typeof value === 'string' || typeof value === 'number'
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+function toKebabCaseKeys(obj, level = 1) {
+  const result = {}
+  for (const key in obj) {
+    const value = typeof obj[key] === 'object' ? toKebabCaseKeys(obj[key], level + 1) : obj[key]
+    result[level > 1 ? key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : key] = value
+  }
+
+  return result
+}
+
+export { toKebabCase, isHex, toKebabCaseKeys, isStringOrNumber }

package/templates/src/[Component.variants.tsx].js

@@ -1,8 +0,0 @@
-import { pascalCase } from 'pascal-case'
-
-export default ({ component }) => {
-  const componentName = pascalCase(component)
-
-  return `
-`
-}

package/utils.js

@@ -1,22 +0,0 @@
-import fs from 'node:fs'
-
-import chalk from 'chalk'
-import fse from 'fs-extra'
-
-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) => {
-  log.error(`✖ Error: ${msg}\n`)
-  process.exit(1)
-}
-
-export const writeFile = ({ path, content }) =>
-  fse
-    .outputFile(path, content)
-    .then(() => log.info(`Created ${path}`))
-    .catch(() => showError(`Failed creating ${path}`))