@spark-ui/theme-utils 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [1.1.0](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@0.0.1...@spark-ui/theme-utils@1.1.0) (2023-02-10)
+
+### Features
+
+- **theme-utils:** force first release ([77122ff](https://github.com/adevinta/spark/commit/77122ffea409244b8268c1e90096e60beedbcd86))
+
+## 0.0.1 (2023-02-09)
+
+**Note:** Version bump only for package @spark-ui/theme-utils

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/createCSSTokensFile.mts

@@ -0,0 +1,101 @@
+import { appendFileSync, existsSync, mkdirSync } from 'fs'
+import hexRgb from 'hex-rgb'
+import parentModule from 'parent-module'
+import { join } from 'path'
+
+import type { Theme } from './types.mjs'
+import {
+  buildFilePath,
+  isHex,
+  isStringOrNumber,
+  objectEntries,
+  objectKeys,
+  toKebabCase,
+} from './utils.mjs'
+
+/* eslint-disable-next-line @typescript-eslint/ban-types */
+type FlattenedTheme = Record<'className' | (string & {}), string | number>
+type NestedObj = Record<string, string | number | Record<string, string | number>>
+
+function flattenTheme(theme: Theme, className: string): FlattenedTheme {
+  const flattenedTheme = {} as FlattenedTheme
+
+  function flatten(obj: Theme, path?: string) {
+    objectEntries(obj as unknown as NestedObj).forEach(([key, value]) => {
+      if (value !== null && typeof value === 'object') {
+        const formattedPath = path ? `--${path}-${key}` : `--${key}`
+        flatten(value as unknown as Theme, 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 as string)}`] = getFormattedValue()
+      }
+    })
+  }
+
+  flatten(theme)
+
+  return {
+    ...flattenedTheme,
+    className,
+  }
+}
+
+const toStringifiedTheme = (theme: Record<string, string | number>) =>
+  Object.entries(theme)
+    .map(([k, v]) => `${k}:${v}`)
+    .join(';')
+
+const getStringifiedThemes = (themeRecord: Record<string, Theme>) =>
+  objectKeys(themeRecord).map(key => {
+    const { className, ...rest } = flattenTheme(themeRecord[key] as Theme, key)
+
+    return key === 'default'
+      ? `:root{${toStringifiedTheme(rest)}}`
+      : `.${className}{${toStringifiedTheme(rest)}}`
+  })
+
+export function createCSSTokensFile(path: string, themeRecord: Record<string, Theme>) {
+  const { filepath, rootPath } = buildFilePath(join(parentModule() || '', path))
+
+  const folders = filepath.split('/').slice(0, -1)
+  folders.reduce((acc, folder) => {
+    const folderPath = acc + folder + '/'
+    if (!existsSync(folderPath)) {
+      mkdirSync(folderPath)
+    }
+
+    return folderPath
+  }, rootPath)
+
+  try {
+    appendFileSync(
+      rootPath + filepath,
+      `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        @layer base {${getStringifiedThemes(themeRecord).join('')}}
+        `,
+      {
+        flag: 'w',
+      }
+    )
+
+    console.log(`✨ CSS tokens file has been created 👉 ${path}`)
+  } catch (error) {
+    console.error(error)
+  }
+}

package/createTailwindConfigFile.mts

@@ -0,0 +1,76 @@
+import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import parentModule from 'parent-module'
+import { join } from 'path'
+
+import { defaultTheme } from './defaultTheme.mjs'
+import type { Theme } from './types.mjs'
+import {
+  buildFilePath,
+  isHex,
+  isStringOrNumber,
+  objectEntries,
+  toKebabCase,
+  toKebabCaseKeys,
+} from './utils.mjs'
+
+type NestedObj = Record<string, string | number | Record<string, string | number>>
+type TailwindConfig = Record<string, Theme[keyof Theme]>
+
+function toTailwindConfig(theme: Theme): TailwindConfig {
+  const themeCpy: Theme = JSON.parse(JSON.stringify(theme))
+
+  function flatten(obj: Theme, path?: string) {
+    objectEntries(obj as unknown as NestedObj).forEach(([key, value]) => {
+      if (value !== null && typeof value === 'object') {
+        const formattedPath = path ? `--${path}-${key}` : `--${key}`
+        flatten(value as unknown as Theme, toKebabCase(formattedPath.replace(/-{3,}/, '--')))
+
+        return
+      }
+
+      /* eslint-disable */
+      if (isStringOrNumber(value)) {
+        const formattedPath =
+          /--colors/.test(path || '') && isHex(value)
+            ? `rgb(var(${path}-${toKebabCase(key as string)}) / <alpha-value>)`
+            : `var(${path}-${toKebabCase(key as string)})`
+
+        /* @ts-ignore */
+        obj[key as any] = formattedPath
+        /* eslint-enable */
+      }
+    })
+  }
+
+  flatten(themeCpy)
+
+  return toKebabCaseKeys(themeCpy)
+}
+
+export function createTailwindConfigFile(path: string) {
+  const { filepath, rootPath } = buildFilePath(join(parentModule() || '', path))
+
+  const folders = filepath.split('/').slice(0, -1)
+  folders.reduce((acc, folder) => {
+    const folderPath = acc + folder + '/'
+    if (!existsSync(folderPath)) {
+      mkdirSync(folderPath)
+    }
+
+    return folderPath
+  }, rootPath)
+
+  try {
+    writeFileSync(
+      rootPath + filepath,
+      `module.exports = ${JSON.stringify(toTailwindConfig(defaultTheme))}`,
+      {
+        flag: 'w',
+      }
+    )
+
+    console.log(`✨ Tailwind theme config file has been created 👉 ${path}`)
+  } catch (error) {
+    console.error(error)
+  }
+}

package/createTheme.mts

@@ -0,0 +1,9 @@
+import deepMerge from 'deepmerge'
+import { PartialDeep } from 'type-fest'
+
+import { defaultTheme } from './defaultTheme.mjs'
+import type { Theme } from './types.mjs'
+
+export function createTheme(theme: PartialDeep<Theme> = {}): Theme {
+  return deepMerge<Theme, PartialDeep<Theme>>(defaultTheme, theme)
+}

package/defaultTheme.mts

@@ -0,0 +1,106 @@
+import type { Theme } from './types.mjs'
+
+export const defaultTheme: Theme = {
+  screens: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+  },
+  borderWidth: {
+    none: '0',
+    xs: '0.1rem',
+    s: '0.2rem',
+    m: '0.4rem',
+  },
+  colors: {
+    transparent: 'transparent',
+    bg: {
+      primary: '#f28133',
+      primaryAccent: '#ad4c07',
+      primarySubtle: '#fba56c',
+      secondary: '#3481f2',
+      secondaryAccent: '#074aad',
+      secondarySubtle: '#4c93f7',
+      body: '#fff',
+    },
+    bd: {
+      primary: '#f28133',
+      secondary: '#3481f2',
+    },
+    fg: {
+      default: '#334155',
+      accent: '#1161d7',
+      cta: '#000',
+      ctaInverse: '#fff',
+    },
+  },
+  fontFamily: {
+    openSans:
+      'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"',
+  },
+  fontSize: {
+    xs: '1rem',
+    s: '1.2rem',
+    m: '1.4rem',
+    l: '1.6rem',
+    xl: '1.8rem',
+    '2xl': '2rem',
+    '3xl': '2.4rem',
+  },
+  fontWeight: {
+    regular: 400,
+    semibold: 600,
+    bold: 700,
+  },
+  lineHeight: {
+    xs: '1.4rem',
+    s: '1.7rem',
+    m: '1.9rem',
+    l: '2.2rem',
+    xl: '2.4rem',
+    '2xl': '2.6rem',
+    '3xl': '2.8rem',
+  },
+  width: {
+    pageMin: '320px',
+    pageMax: '1066px',
+  },
+  borderRadius: {
+    none: '0',
+    xs: '0.4rem',
+    s: '0.8rem',
+    m: '1.6rem',
+    l: '2.4rem',
+    full: '100%',
+  },
+  boxShadow: {
+    none: 'none',
+    normal: '0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)',
+    highlighted: '0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)',
+  },
+  spacing: {
+    auto: 'auto',
+    none: '0',
+    xs: '0.4rem',
+    s: '0.8rem',
+    m: '1.6rem',
+    l: '2.4rem',
+    xl: '3.2rem',
+    xxl: '4rem',
+  },
+  zIndex: {
+    hide: -1,
+    base: 0,
+    raised: 1,
+    dropdown: 1000,
+    sticky: 1100,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    tooltip: 1800,
+  },
+}

package/index.mts

@@ -0,0 +1,6 @@
+export { createTheme } from './createTheme.mjs'
+export { createTailwindConfigFile } from './createTailwindConfigFile.mjs'
+export { createCSSTokensFile } from './createCSSTokensFile.mjs'
+export { defaultTheme } from './defaultTheme.mjs'
+
+export type { Theme } from './types.mjs'

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@spark-ui/theme-utils",
+  "version": "1.1.0",
+  "description": "Theme configuration",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "deepmerge": "4.3.0",
+    "hex-rgb": "5.0.0",
+    "parent-module": "3.0.0",
+    "type-fest": "3.5.6"
+  },
+  "gitHead": "807a2fbdf384a277d4110cff7dbb549bb9ab4563"
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "./",
+     "outDir": "./dist",
+    "declaration": true,
+  },
+  "include": ["**/*", "../../global.d.ts"]
+}

package/types.mts

@@ -0,0 +1,103 @@
+export interface Theme {
+  screens: {
+    sm: string
+    md: string
+    lg: string
+    xl: string
+    '2xl': string
+  }
+  borderWidth: {
+    none: string
+    xs: string
+    s: string
+    m: string
+  }
+  colors: {
+    transparent: string
+    bg: {
+      body: string
+      primary: string
+      primaryAccent: string
+      primarySubtle: string
+      secondary: string
+      secondaryAccent: string
+      secondarySubtle: string
+    }
+    fg: {
+      default: string
+      accent: string
+      cta: string
+      ctaInverse: string
+    }
+    bd: {
+      primary: string
+      secondary: string
+    }
+  }
+  fontFamily: {
+    openSans: string
+  }
+  fontSize: {
+    xs: string
+    s: string
+    m: string
+    l: string
+    xl: string
+    '2xl': string
+    '3xl': string
+  }
+  fontWeight: {
+    regular: number
+    semibold: number
+    bold: number
+  }
+  lineHeight: {
+    xs: string
+    s: string
+    m: string
+    l: string
+    xl: string
+    '2xl': string
+    '3xl': string
+  }
+  width: {
+    pageMin: string
+    pageMax: string
+  }
+  borderRadius: {
+    none: string
+    xs: string
+    s: string
+    m: string
+    l: string
+    full: string
+  }
+  boxShadow: {
+    none: string
+    normal: string
+    highlighted: string
+  }
+  spacing: {
+    auto: string
+    none: string
+    xs: string
+    s: string
+    m: string
+    l: string
+    xl: string
+    xxl: string
+  }
+  zIndex: {
+    hide: number
+    base: number
+    raised: number
+    dropdown: number
+    sticky: number
+    overlay: number
+    modal: number
+    popover: number
+    skipLink: number
+    toast: number
+    tooltip: number
+  }
+}

package/utils.mts

@@ -0,0 +1,71 @@
+function objectKeys<T extends Record<string | number, unknown>>(obj: T): (keyof T)[] {
+  return Object.keys(obj) as (keyof T)[]
+}
+
+function objectEntries<T extends Record<string | number, unknown>>(
+  obj: T
+): [keyof T, T[keyof T]][] {
+  return Object.entries(obj) as [keyof T, T[keyof T]][]
+}
+
+function toKebabCase(v: string) {
+  return v.replace(/[A-Z]/g, e => `-${e.toLocaleLowerCase()}`)
+}
+
+function isHex(value: string | number): value is string {
+  if (typeof value === 'number') {
+    return false
+  }
+
+  const regexp = /^#[0-9a-fA-F]+$/
+
+  return regexp.test(value)
+}
+
+function isStringOrNumber(value: unknown): value is string | number {
+  return typeof value === 'string' || typeof value === 'number'
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+function toKebabCaseKeys<T extends Object>(obj: T, level = 1): Record<string, T[keyof T]> {
+  const result: any = {}
+  for (const key in obj) {
+    const value =
+      typeof obj[key] === 'object' ? toKebabCaseKeys(obj[key] as T, level + 1) : obj[key]
+    result[level > 1 ? key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : key] = value
+  }
+
+  return result
+}
+
+function getFormattedPath(input: string) {
+  const preFormat = input.slice(input.indexOf(':') + 1)
+  const extensionRegex = /\/([^/]+)\.(jsx|js|tsx|ts|mjs|mts|cjs|cts)(?!$)/g
+
+  return preFormat.replace(preFormat.match(extensionRegex)?.at(0) || '', '')
+}
+
+function buildFilePath(path: string) {
+  let filepath = getFormattedPath(path).replace(/\\/g, '/')
+
+  let rootPath = ''
+  if (filepath[0] === '/') {
+    rootPath = '/'
+    filepath = filepath.slice(1)
+  } else if (filepath[1] === ':') {
+    rootPath = filepath.slice(0, 3)
+    filepath = filepath.slice(3)
+  }
+
+  return { filepath, rootPath }
+}
+
+export {
+  objectKeys,
+  objectEntries,
+  toKebabCase,
+  isHex,
+  toKebabCaseKeys,
+  buildFilePath,
+  isStringOrNumber,
+}

package/vite.config.ts

@@ -0,0 +1,24 @@
+import path from 'path'
+import { terser } from 'rollup-plugin-terser'
+import typescript from '@rollup/plugin-typescript'
+
+const pkg = require(path.resolve(__dirname, './package.json'))
+
+const deps = Object.keys(pkg.dependencies || {})
+const devDeps = Object.keys(pkg.devDependencies || {})
+
+export default {
+  build: {
+    target: 'es2015',
+    lib: {
+      entry: 'index.mts',
+      formats: ['es', 'cjs'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [...deps, ...devDeps, 'path', 'fs'],
+      preserveModules: false,
+      plugins: [terser(), typescript({ cacheDir: './dist' })],
+    },
+  },
+}