Merge pull request #1292 from vtex/feature/token-object

feat(tokens): export token object

Author: matheusps

packages/theme/src/gen-tokens-object.ts

@@ -0,0 +1,21 @@
+import type { ShorelineConfig } from '@vtex/shoreline-utils'
+import { format } from 'prettier'
+
+import { tokensToDictionary } from './tokens-to-dictionary'
+
+export async function genTokensObject(
+  config: ShorelineConfig
+): Promise<Buffer> {
+  const tokens = tokensToDictionary(config)
+  const tsDeclaration = `export const ShorelineTokens = ${JSON.stringify(
+    tokens
+  )};`
+
+  const tsCode = await format(tsDeclaration, {
+    parser: 'typescript',
+    semi: false,
+    singleQuote: true,
+  })
+
+  return Buffer.from(tsCode)
+}

packages/theme/src/tests/tokens-to-dictionary.test.ts

@@ -0,0 +1,25 @@
+import { tokensToDictionary } from '../tokens-to-dictionary'
+
+const tokens = {
+  color: {
+    red: {
+      6: '#FF0000',
+    },
+  },
+  bg: {
+    '*': '$color-red-6',
+  },
+}
+
+describe('tokens-to-dictionary', () => {
+  it('should', () => {
+    expect(
+      tokensToDictionary({
+        tokens,
+      })
+    ).toStrictEqual({
+      ColorRed6: 'var(--sl-color-red-6)',
+      Bg: 'var(--sl-bg)',
+    })
+  })
+})

packages/theme/src/theme.ts

@@ -3,6 +3,7 @@ import { loadConfig } from './config'
 import { outputFile } from './output-file'
 import { genTypescript } from './gen-typescript'
 import { extendConfig } from './extend-config'
+import { genTokensObject } from './gen-tokens-object'
 
 export async function theme() {
   const config = loadConfig({
@@ -26,4 +27,12 @@ export async function theme() {
     code: ts,
     successMessage: '🏆 Types generated!',
   })
+
+  const tokens = await genTokensObject(extendedConfig)
+
+  outputFile({
+    path: `${extendedConfig.outdir}/tokens.ts`,
+    code: tokens,
+    successMessage: '🍰 Tokens generated!',
+  })
 }

packages/theme/src/tokens-to-dictionary.ts

@@ -0,0 +1,29 @@
+import type { ShorelineConfig } from '@vtex/shoreline-utils'
+import { toVar, parseTokens } from '@vtex/shoreline-utils'
+
+export function tokensToDictionary(config: ShorelineConfig) {
+  const { tokens = {}, prefix } = config
+
+  const res: Record<string, string> = {}
+  const unprefixedTokens = parseTokens({
+    tokens,
+    prefix,
+    unprefixed: true,
+  })
+
+  for (const prop in unprefixedTokens) {
+    const key = toPascalCase(prop)
+
+    res[key] = `var(${toVar(prop)})`
+  }
+
+  return res
+}
+
+function toPascalCase(text: string) {
+  return text.replace(/(^\w|-\w)/g, clearAndUpper)
+}
+
+function clearAndUpper(text: string) {
+  return text.replace(/-/, '').toUpperCase()
+}

packages/tokens/src/index.ts

@@ -1,2 +1 @@
-// TODO: Export theme as Object: https://github.com/vtex/shoreline/issues/1281.
-export const theme = {}
+export * from './tokens'

packages/tokens/src/stories/tokens.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { ShorelineTokens } from '../tokens'
+
+export default {
+  title: 'tokens/token-object',
+}
+
+export function Default() {
+  return (
+    <div
+      style={{
+        width: 100,
+        height: 100,
+        background: ShorelineTokens.ColorBlue13,
+        borderRadius: ShorelineTokens.BorderRadiusMedium,
+      }}
+    />
+  )
+}

packages/tokens/src/tokens.ts

@@ -0,0 +1 @@
+export * from '../shoreline/tokens'

packages/utils/src/index.ts

@@ -16,6 +16,7 @@ import { useId } from './use-id'
 import { useMergeRef } from './use-merge-ref'
 import { useSafeLayoutEffect } from './use-safe-layout-effect'
 import { hasSomeTextSelected } from './has-some-text-selected'
+import { toVar } from './to-var'
 
 export {
   chain,
@@ -39,6 +40,7 @@ export {
   useMergeRef,
   useSafeLayoutEffect,
   hasSomeTextSelected,
+  toVar,
 }
 
 export * from './css-types'

packages/utils/src/parse-tokens.ts

@@ -2,6 +2,7 @@ import type { AnyObject, Dict } from './utility-types'
 import { constants } from './constants'
 import { cssVar } from './css-var'
 import { flattenObject } from './flatten-object'
+import { toVar } from './to-var'
 
 /**
  * Parse token from the config to a Token Dict.
@@ -23,15 +24,6 @@ export function parseTokens(props: ParseTokensProps): Dict {
   return tokenDict
 }
 
-/**
- * Parse a prefix-value to a CSS Variable declaration
- * @param {string} value
- * @param {string} prefix
- */
-function toVar(value: string, prefix: string = constants.dsPrefix) {
-  return `--${prefix}-${value}`
-}
-
 interface ParseTokensProps {
   tokens: AnyObject
   unprefixed?: boolean

packages/utils/src/to-var.ts

@@ -0,0 +1,10 @@
+import { constants } from './constants'
+
+/**
+ * Parse a prefix-value to a CSS Variable declaration
+ * @param {string} value
+ * @param {string} prefix
+ */
+export function toVar(value: string, prefix: string = constants.dsPrefix) {
+  return `--${prefix}-${value}`
+}