@spark-ui/cli-utils 1.4.0 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 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

package/bin/spark-setup-theme.mjs

@@ -1,15 +1,18 @@
 #!/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 { Logger, System } from './core/index.mjs'
+import { createCSSTokensFile, createTailwindThemeConfigFile } from '../utils/setupTheme/index.js'
 
 const logger = new Logger()
 const system = new System({ logger })
 
-const jsFileExtension = '.js'
-
+const require = createRequire(import.meta.url)
 const configFile = readdirSync(process.cwd()).find(fileName =>
   /^(spark\.theme\.config)\.(js|ts|mjs|mts|cjs|cts)$/.test(fileName)
 )
@@ -20,30 +23,56 @@ if (!configFile) {
   )
 }
 
+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)) {
-  system.exit(`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)
-  logger.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -13,6 +13,7 @@
   "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",
@@ -26,5 +27,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/cli"
   },
-  "gitHead": "61d037acf7909f745ced1d1a0196fe6d2838850e"
+  "gitHead": "a7cfc5667178ab46c812a43423f57d10037a5c6a"
 }

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/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}`))