Merge pull request #506 from department-of-veterans-affairs/cu/482-48…

…6-sort-and-add-comments-to-tokens

[CU] Alphabetize and add value comments to token declarations

packages/tokens/build.js

@@ -5,7 +5,7 @@ const StyleDictionary = require('style-dictionary')
  * Utils
  */
 
-/** Reterns a new tokens object sorted alphabetically by key */
+/** Returns a new tokens object sorted alphabetically by key */
 const sortTokensByKey = (obj) => {
   const sortedKeys = Object.keys(obj).sort()
   const sortedObj = {}
@@ -16,6 +16,12 @@ const sortTokensByKey = (obj) => {
   return sortedObj
 }
 
+/** Returns a new tokens array sorted alphabetically by token name */
+const sortTokensByName = (tokens) =>
+  tokens.sort((a, b) => {
+    return a.name.localeCompare(b.name)
+  })
+
 /** Reusable filter function that returns only non-dark-mode tokens */
 const filterLight = (token) =>
   token.attributes.category.includes('color') &&
@@ -120,8 +126,10 @@ StyleDictionary.registerFormat({
 StyleDictionary.registerFormat({
   name: 'typescript/es6-declarations/colors',
   formatter: function (dictionary) {
+    const sortedTokens = sortTokensByName(dictionary.allTokens)
     let declaration = 'export declare const colors: {\n'
-    dictionary.allProperties.forEach((token) => {
+    sortedTokens.forEach((token) => {
+      declaration += `  /** ${token.value} */\n`
       declaration += `  ${token.name}: string;\n`
     })
     declaration += '}'
@@ -134,20 +142,26 @@ StyleDictionary.registerFormat({
   name: 'typescript/es6-declarations/spacing',
   formatter: function (dictionary) {
     let declaration = 'export declare const spacing: {\n'
-    dictionary.allProperties.forEach((token) => {
+    let allValuesComment = '/**\n * '
+    dictionary.allProperties.forEach((token, index) => {
+      declaration += `  /** Value: ${token.value} */\n`
       declaration += `  ${token.name}: number;\n`
+      allValuesComment += `${index !== 0 ? ' | ' : ''}${token.name.replace('vadsSpace', '')}: ${token.value}`
     })
     declaration += '}'
-    return declaration
+    allValuesComment += '\n */\n'
+    return allValuesComment + declaration
   },
 })
 
 /** Creates named type declaration for Themes. Allows for TypeScript autocomplete */
 StyleDictionary.registerFormat({
   name: 'typescript/es6-declarations/theme',
   formatter: function (dictionary) {
+    const sortedTokens = sortTokensByName(dictionary.allTokens)
     let declaration = 'export declare type Theme = {\n'
-    dictionary.allProperties.forEach((token) => {
+    sortedTokens.forEach((token) => {
+      declaration += `  /** ${token.value} */\n`
       declaration += `  ${stripMode(token.name)}: string;\n`
     })
     declaration += '}\n\n'

packages/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.17.0",
+  "version": "0.17.1-alpha.4",
   "description": "VA Design System Mobile Token Library",
   "main": "dist/js/index.js",
   "types": "dist/index.d.ts",