@spark-ui/cli-utils 2.7.3 → 2.8.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.
 
+# [2.8.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.7.3...@spark-ui/cli-utils@2.8.0) (2023-03-23)
+
+### Features
+
+- **cli-utils:** remove deprecated spark-setup-themes cli package ([a2efa9c](https://github.com/adevinta/spark/commit/a2efa9c15b3ece4285043fd25858435f455f257d))
+
 ## [2.7.3](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.7.2...@spark-ui/cli-utils@2.7.3) (2023-03-22)
 
 **Note:** Version bump only for package @spark-ui/cli-utils

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.7.3",
+  "version": "2.8.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
   },
   "bin": {
     "spark": "./bin/spark.mjs",
-    "spark-generate": "./bin/spark-generate.mjs",
-    "spark-setup-themes": "./bin/spark-setup-themes.mjs"
+    "spark-generate": "./bin/spark-generate.mjs"
   },
   "type": "module",
   "repository": {
@@ -18,19 +17,16 @@
   },
   "dependencies": {
     "@clack/prompts": "0.6.2",
-    "@spark-ui/theme-utils": "^2.10.1",
     "camel-case": "4.1.2",
     "chalk": "5.2.0",
     "commander": "10.0.0",
-    "deepmerge": "4.3.0",
     "esbuild": "0.17.11",
     "fs-extra": "11.1.0",
     "glob": "8.1.0",
-    "hex-rgb": "5.0.0",
     "pascal-case": "3.1.2"
   },
   "devDependencies": {
     "@types/fs-extra": "11.0.1"
   },
-  "gitHead": "8d5929fd944837fe356de0a553b2db7577fa83d2"
+  "gitHead": "9b2398b8c58cf0359169bdde07e8e33ede075e16"
 }

package/src/index.doc.mdx

@@ -9,7 +9,6 @@ import { Alert } from '@docs/helpers/Alert'
 This package provides some CLI commands to improve the development experience when building the Spark design system. Right now there are some different commands available:
 
 - A command for generating new components: `$ spark generate`.
-- A command for doing the initial setup for one or more themes: `$ spark setup-themes`.
 
 ## Contents
 
@@ -44,14 +43,3 @@ 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).
-
-<StoryHeading label="Setting up your themes" as="h2" />
-
-<Alert kind="info">
-  [Step-by-step guide to integrating Spark into your current
-  project](?path=/docs/getting-started--docs#getting-started)
-</Alert>
-
-```bash
-$ spark setup-themes
-```

package/bin/spark-setup-themes.mjs

@@ -1,80 +0,0 @@
-#!/usr/bin/env node
-
-import { spawn } from 'child_process'
-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 '../src/core/index.mjs'
-import {
-  createCSSTokensFile,
-  createTailwindThemeConfigFile,
-} from '../src/setup-themes/utils/index.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) {
-  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 configFileIsMJS = /spark\.theme\.config\.(mjs)$/.test(configFile)
-
-const allowedExtensions = ['.ts', '.mts', '.cts', '.js', '.cjs', '.mjs']
-const jsFileExtension = '.mjs'
-const configFileExtension = extname(configFilePath)
-if (!allowedExtensions.includes(configFileExtension)) {
-  system.exit(`Your spark.theme.config file extension (${configFileExtension}) is not supported.`)
-}
-
-const configFileContent = readFileSync(configFilePath, 'utf-8')
-const jsCode = transformSync(configFileContent, { loader: 'ts' }).code
-
-const jsFilePath = configFilePath.replace(/\.ts$|\.mts$|\.cts$|\.js|\.cjs$/, jsFileExtension)
-const jsFileContents = jsCode
-
-if (!configFileIsMJS) writeFileSync(jsFilePath, jsFileContents)
-
-import(jsFilePath)
-  .then(module => {
-    const { tailwindThemeConfigPath, tailwindCSSPath, themes, htmlFontSize = 16 } = module.default
-
-    createTailwindThemeConfigFile(tailwindThemeConfigPath)
-    createCSSTokensFile(tailwindCSSPath, themes, htmlFontSize)
-
-    const child = spawn(process.execPath, [jsFilePath], {
-      stdio: 'inherit',
-    })
-
-    child.on('exit', code => {
-      if (!configFileIsMJS) unlinkSync(jsFilePath)
-      logger.success(
-        `✨ Your Spark Tailwind theme config file has been successfully created: ${join(
-          process.cwd(),
-          tailwindThemeConfigPath
-        )}`
-      )
-
-      logger.success(
-        `✨ Your Spark Tailwind CSS Tokens file file has been successfully created: ${join(
-          process.cwd(),
-          tailwindCSSPath
-        )}`
-      )
-
-      process.exit(code)
-    })
-  })
-  .catch(err => {
-    unlinkSync(jsFilePath)
-    system.exit(`
-    Something went wrong while running ${configFilePath}: ${err}`)
-  })

package/src/setup-themes/utils/constants.js

@@ -1,13 +0,0 @@
-export const tailwindKeys = {
-  colors: 'colors',
-  fontSize: 'fontSize',
-  screens: 'screens',
-}
-
-export const DEFAULT_KEY = 'DEFAULT'
-
-export const defaultColors = {
-  inherit: 'inherit',
-  current: 'currentColor',
-  transparent: 'transparent',
-}

package/src/setup-themes/utils/createCSSTokenfile.js

@@ -1,109 +0,0 @@
-import { appendFileSync } from 'node:fs'
-import { join } from 'node:path'
-
-import hexRgb from 'hex-rgb'
-
-import { DEFAULT_KEY } from './constants.js'
-import {
-  doubleHyphensRegex,
-  getRemEquivalentValue,
-  isHex,
-  isObject,
-  isStringOrNumber,
-  toKebabCase,
-} from './utils.js'
-
-function toCSSVars(_theme, className, htmlFontSize) {
-  const flattenedTheme = {}
-
-  function flatten(theme, paths = []) {
-    Object.entries(theme).forEach(([key, value]) => {
-      if (isObject(value)) {
-        return flatten(value, paths.concat(key))
-      }
-
-      if (isStringOrNumber(value)) {
-        const getFormattedValue = () => {
-          if (isHex(value)) {
-            const { red, green, blue } = hexRgb(value)
-
-            return `${red} ${green} ${blue}`
-          }
-
-          if (/rem$/gi.test(value)) {
-            return getRemEquivalentValue(value, htmlFontSize)
-          }
-
-          return value
-        }
-
-        flattenedTheme[
-          `--${[...paths, key === DEFAULT_KEY ? key.toLowerCase() : key]
-            .map(toKebabCase)
-            .join('-')
-            .replace(doubleHyphensRegex, '-')}`
-        ] = getFormattedValue()
-      }
-    })
-  }
-
-  flatten(_theme)
-
-  return {
-    ...flattenedTheme,
-    className,
-  }
-}
-
-const toStringifiedTheme = theme =>
-  Object.entries(theme)
-    .map(([k, v]) => `${k}:${v}`)
-    .join(';')
-
-const getStringifiedThemes = (themeRecord, htmlFontSize) =>
-  Object.keys(themeRecord).map(key => {
-    const { className, ...rest } = toCSSVars(themeRecord[key], key, htmlFontSize)
-
-    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, htmlFontSize) {
-  try {
-    appendFileSync(
-      join(process.cwd(), path),
-      `
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @layer base {${getStringifiedThemes(themeRecord, htmlFontSize).join('')}}
-        `,
-      {
-        flag: 'w',
-      }
-    )
-  } catch (error) {
-    console.error('Failed to create the CSS token file', error)
-  }
-}

package/src/setup-themes/utils/createTailwindThemeConfigFile.js

@@ -1,136 +0,0 @@
-import { writeFileSync } from 'node:fs'
-import { join } from 'node:path'
-
-import { defaultTheme } from '@spark-ui/theme-utils'
-
-import { DEFAULT_KEY, defaultColors, tailwindKeys } from './constants.js'
-import {
-  doubleHyphensRegex,
-  hasNumber,
-  isAlphanumericWithLeadingLetter,
-  isCamelCase,
-  isHex,
-  isObject,
-  isStringOrNumber,
-  toKebabCase,
-} from './utils.js'
-
-function toTailwindConfig(_theme) {
-  const themeCpy = JSON.parse(JSON.stringify(_theme))
-
-  const { fontSize, colors, screens } = tailwindKeys
-
-  /* eslint-disable complexity */
-  function traverse(theme, paths = []) {
-    Object.entries(theme).forEach(([key, value]) => {
-      // 👀 see: https://tailwindcss.com/docs/font-size#providing-a-default-line-height
-      if (isObject(value) && !paths.length && key === fontSize) {
-        Object.keys(value).forEach(k => {
-          const prefix = toKebabCase(fontSize)
-          if (isStringOrNumber(value[k])) {
-            theme[key][k] = `var(--${prefix}-${k})`
-
-            return
-          }
-
-          const kebabedKey = isCamelCase(k) || hasNumber(k) ? toKebabCase(k) : k
-
-          if (kebabedKey !== k) {
-            const tmp = theme[key][k]
-            delete theme[key][k]
-            theme[key][kebabedKey] = tmp
-          }
-
-          theme[key][kebabedKey] = [
-            `var(--${prefix}-${kebabedKey}-font-size)`,
-            {
-              ...(value[kebabedKey].lineHeight && {
-                lineHeight: `var(--${prefix}-${kebabedKey}-line-height)`,
-              }),
-              ...(value[kebabedKey].letterSpacing && {
-                letterSpacing: `var(--${prefix}-${kebabedKey}-letter-spacing)`,
-              }),
-              ...(value[kebabedKey].fontWeight && {
-                fontWeight: `var(--${prefix}-${kebabedKey}-font-weight)`,
-              }),
-            },
-          ]
-        })
-
-        return
-      }
-
-      if (isObject(value)) {
-        Object.keys(value).forEach(k => {
-          if (k === DEFAULT_KEY) {
-            return
-          }
-
-          if (!isObject(value[k]) && !isCamelCase(k)) {
-            return
-          }
-
-          const tmp = value[k]
-          delete value[k]
-          value[toKebabCase(k)] = tmp
-        })
-
-        return traverse(value, paths.concat(key))
-      }
-
-      if (isStringOrNumber(value)) {
-        const rootPath = paths.at(0) ?? ''
-        const isScreenValue = rootPath.includes(screens)
-        const isColorValue = rootPath.includes(colors)
-
-        const formattedValue = (() => {
-          if (isColorValue && isHex(value)) {
-            return `rgb(var(--${paths.join('-')}-${key}) / <alpha-value>)`
-          }
-          if (isScreenValue) {
-            return String(value).toLowerCase()
-          }
-
-          return `var(--${paths.join('-')}-${key.toLowerCase()})`
-        })()
-
-        const formattedKey = isAlphanumericWithLeadingLetter(key) ? toKebabCase(key) : key
-
-        if (formattedKey !== key) {
-          delete theme[key]
-        }
-
-        theme[formattedKey] = isScreenValue
-          ? formattedValue
-          : toKebabCase(formattedValue).replace(doubleHyphensRegex, '-')
-      }
-    })
-  }
-
-  traverse(themeCpy)
-
-  return { ...themeCpy, colors: { ...themeCpy.colors, ...defaultColors } }
-}
-
-/**
- * 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/src/setup-themes/utils/index.js

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

package/src/setup-themes/utils/utils.js

@@ -1,54 +0,0 @@
-function toKebabCase(v) {
-  return v.replace(/[A-Z]+(?=[a-z0-9])|\d+/g, match => '-' + match.toLowerCase())
-}
-
-function isAlphanumericWithLeadingLetter(v) {
-  return /^[a-zA-Z](?=.*\d)[a-zA-Z\d]*$/.test(v)
-}
-
-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'
-}
-
-function isObject(x) {
-  return !!x && x.constructor === Object
-}
-
-function isCamelCase(value) {
-  return /[A-Z]/.test(value.slice(1))
-}
-
-function hasNumber(value) {
-  return /\d/.test(value)
-}
-
-function getRemEquivalentValue(remValue, htmlFontSize) {
-  const defaultBrowserBase = 16
-  const pxValue = parseFloat(remValue) * defaultBrowserBase
-
-  return `${pxValue / htmlFontSize}rem`
-}
-
-const doubleHyphensRegex = /(?<!var\()--+/g
-
-export {
-  toKebabCase,
-  isHex,
-  isStringOrNumber,
-  isObject,
-  isCamelCase,
-  isAlphanumericWithLeadingLetter,
-  hasNumber,
-  getRemEquivalentValue,
-  doubleHyphensRegex,
-}