feat(ui-scripts): use tokens from external repo and convert JS to TS

INSTUI-5002

Author: joyenjoyer

…ges/ui-scripts/lib/build/build-themes.js …ges/ui-scripts/lib/build/build-themes.tspackages/ui-scripts/lib/build/build-themes.js renamed to packages/ui-scripts/lib/build/build-themes.ts packages/ui-scripts/lib/build/build-themes.js renamed to packages/ui-scripts/lib/build/build-themes.ts

@@ -22,31 +22,14 @@
  * SOFTWARE.
  */
 
-import path, { dirname } from 'path'
-import { fileURLToPath } from 'url'
-import { promises } from 'fs'
-import pkg from 'glob'
-import setupThemes from './buildThemes/setupThemes.js'
-
-const { glob } = pkg
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
+// @ts-ignore -- package ships JS source without type declarations
+import { themeTokens } from '@instructure/instructure-design-tokens'
+import setupThemes from './buildThemes/setupThemes.ts'
 
 export default {
   command: 'build-themes',
   desc: 'Generate themes',
   handler: async () => {
-    const tokensStudioDir = path.join(__dirname, 'tokensStudio')
-    const jsonFiles = glob.sync('**/*.json', { cwd: tokensStudioDir })
-
-    const themeTokens = {}
-    for (const filePath of jsonFiles) {
-      const fullPath = path.join(tokensStudioDir, filePath)
-      const rawData = await promises.readFile(fullPath, 'utf8')
-      const relativePath = filePath.replace('.json', '')
-      themeTokens[relativePath] = JSON.parse(rawData)
-    }
-
     await setupThemes(
       'packages/ui-themes/src/themes/newThemeTokens',
       themeTokens

…b/build/buildThemes/generateSemantics.js …b/build/buildThemes/generateSemantics.tspackages/ui-scripts/lib/build/buildThemes/generateSemantics.js renamed to packages/ui-scripts/lib/build/buildThemes/generateSemantics.ts packages/ui-scripts/lib/build/buildThemes/generateSemantics.js renamed to packages/ui-scripts/lib/build/buildThemes/generateSemantics.ts

@@ -22,10 +22,10 @@
  * SOFTWARE.
  */
 
-const isReference = (expression) =>
+const isReference = (expression: any): boolean =>
   expression[0] === '{' && expression[expression.length - 1] === '}'
 
-const formatSemantic = (collection, key) => {
+const formatSemantic = (collection: any, key?: any): any => {
   const value = key ? collection[key] : collection
   if (typeof value === 'object' && !value.value && !value.type) {
     return Object.keys(value).reduce((acc, key) => {
@@ -35,7 +35,7 @@ const formatSemantic = (collection, key) => {
   return value.value
 }
 
-const formatReference = (reference) => {
+const formatReference = (reference: string): string => {
   const referenceArr = reference.slice(1, -1).split('.')
   const lastElement = referenceArr[referenceArr.length - 1]
 
@@ -47,7 +47,7 @@ const formatReference = (reference) => {
   return `primitives.${reference.slice(1, -1)},\n`
 }
 
-export const resolveReferences = (semantics, key) => {
+export const resolveReferences = (semantics: any, key?: any): string => {
   const value = key ? semantics[key] : semantics
   if (typeof value === 'object' && !value.value && !value.type) {
     return Object.keys(value).reduce((acc, key, index) => {
@@ -74,7 +74,7 @@ export const resolveReferences = (semantics, key) => {
   return `"${value}",\n`
 }
 
-export const resolveTypeReferences = (semantics, key) => {
+export const resolveTypeReferences = (semantics: any, key?: any): string => {
   const value = key ? semantics[key] : semantics
   if (typeof value === 'object') {
     return Object.keys(value).reduce((acc, key, index) => {
@@ -94,7 +94,7 @@ export const resolveTypeReferences = (semantics, key) => {
     return `Primitives${value
       .slice(1, -1)
       .split('.')
-      .map((val) => `['${val}']`)
+      .map((val: string) => `['${val}']`)
       .join('')}, `
   }
 
@@ -104,16 +104,16 @@ export const resolveTypeReferences = (semantics, key) => {
   return `${typeof value}, `
 }
 
-export const mergeSemanticSets = (data, semanticList) =>
-  semanticList.reduce((acc, semantic) => ({ ...acc, ...data[semantic] }), {})
+export const mergeSemanticSets = (semanticList: any[]) =>
+  semanticList.reduce((acc, semantic) => ({ ...acc, ...semantic }), {})
 
-const generateSemantics = (data) => {
+const generateSemantics = (data: any): string => {
   const formattedSemantic = formatSemantic(data)
 
   return resolveReferences(formattedSemantic)
 }
 
-export const generateSemanticsType = (data) => {
+export const generateSemanticsType = (data: any): string => {
   const formattedSemantic = formatSemantic(data)
 
   return `{${resolveTypeReferences(formattedSemantic)}}`

…pts/lib/build/buildThemes/setupThemes.js …pts/lib/build/buildThemes/setupThemes.tspackages/ui-scripts/lib/build/buildThemes/setupThemes.js renamed to packages/ui-scripts/lib/build/buildThemes/setupThemes.ts packages/ui-scripts/lib/build/buildThemes/setupThemes.js renamed to packages/ui-scripts/lib/build/buildThemes/setupThemes.ts

@@ -28,42 +28,53 @@ import { generatePrimitives, generateType } from './generatePrimitives.js'
 import generateSemantics, {
   generateSemanticsType,
   mergeSemanticSets
-} from './generateSemantics.js'
+} from './generateSemantics.ts'
 import generateComponent, {
   generateComponentType
 } from './generateComponents.js'
 import { exec } from 'child_process'
 import { promisify } from 'node:util'
 
 // transform to an object for easier handling
-export const transformThemes = (themes) =>
+export const transformThemes = (themes: any, input: any) =>
   //TODO-rework the Primitive theme is a hackaround for design and only for the duration of the v12 work. This should be removed before the release (.filter(t=>t!=="Primitive"))
   themes
-    .filter((t) => t.name !== 'Primitive')
-    .reduce((acc, theme) => {
-      const tokenSets = Object.keys(theme.selectedTokenSets).reduce(
-        (acc, tokenSet) => {
-          if (tokenSet.includes('primitives')) {
-            return { ...acc, primitives: tokenSet }
+    .filter((t: any) => t.name !== 'Primitive')
+    .reduce((acc: any, theme: any) => {
+      const tokenSets = Object.entries(theme.selectedTokenSets).reduce(
+        (acc, [path, status]) => {
+          const value = path
+            .split('/')
+            .reduce((node, key) => node?.[key], input)
+          if (path.includes('primitives')) {
+            return { ...acc, primitives: value }
           }
-          if (tokenSet.includes('semantic')) {
-            return { ...acc, semantic: [...acc.semantic, tokenSet] }
+          if (path.includes('semantic')) {
+            return { ...acc, semantic: [...acc.semantic, value] }
           }
-          if (theme.selectedTokenSets[tokenSet] === 'enabled') {
-            return { ...acc, components: [...acc.components, tokenSet] }
+          if (status === 'enabled') {
+            return {
+              ...acc,
+              components: [
+                ...acc.components,
+                { name: path.split('/').at(-1), data: value }
+              ]
+            }
           }
           return acc
         },
-        { primitives: '', semantic: '', components: [] }
+        { primitives: null, semantic: [], components: [] } as any
       )
 
       return { ...acc, [theme.name]: tokenSets }
     }, {})
 
-const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)
-const unCapitalize = (str) => str.charAt(0).toLowerCase() + str.slice(1)
+const capitalize = (str: string): string =>
+  str.charAt(0).toUpperCase() + str.slice(1)
+const unCapitalize = (str: string): string =>
+  str.charAt(0).toLowerCase() + str.slice(1)
 
-const getTypeImports = (componentTypes, theme) => {
+const getTypeImports = (componentTypes: any, theme: any): string => {
   let imports = ''
   if (componentTypes.includes(`Semantics[`)) {
     imports =
@@ -86,7 +97,7 @@ const getTypeImports = (componentTypes, theme) => {
   return imports
 }
 
-const setupThemes = async (targetPath, input) => {
+const setupThemes = async (targetPath: string, input: any): Promise<void> => {
   //clear old themes
   await promises.rm(targetPath, { recursive: true, force: true })
   //make new root folder
@@ -95,7 +106,7 @@ const setupThemes = async (targetPath, input) => {
   // we need to put sharedTokensTypes to the commonTypes where it makes sense, however it comes from token studio as a component. This variable is seen by both parts of the code
   let sharedTokensTypes = ''
 
-  const themeData = transformThemes(input['$themes'])
+  const themeData = transformThemes(input['$themes'], input)
   //TODO-rework the Primitive theme is a hackaround for design and only for the duration of the v12 work. This should be removed before the release (.filter(t=>t!=="Primitive"))
   const themes = Object.keys(themeData).filter((t) => t !== 'Primitive')
   for (let themeIndex = 0; themeIndex < themes.length; themeIndex++) {
@@ -104,7 +115,7 @@ const setupThemes = async (targetPath, input) => {
     await promises.mkdir(themePath, { recursive: true })
 
     // primitives
-    const primitives = generatePrimitives(input[themeData[theme].primitives])
+    const primitives = generatePrimitives(themeData[theme].primitives)
     const primitiveTypes = generateType(primitives)
     const primitivesFileContent = `
           export type Primitives = ${primitiveTypes}
@@ -115,10 +126,7 @@ const setupThemes = async (targetPath, input) => {
     await createFile(`${themePath}/primitives.ts`, primitivesFileContent)
 
     // semantics
-    const mergedSemanticData = mergeSemanticSets(
-      input,
-      themeData[theme].semantic
-    )
+    const mergedSemanticData = mergeSemanticSets(themeData[theme].semantic)
     const semantics = generateSemantics(mergedSemanticData)
     const semanticsTypes = generateSemanticsType(mergedSemanticData)
     const semanticsFileContent = `
@@ -133,20 +141,18 @@ const setupThemes = async (targetPath, input) => {
 
     const componentAndSubcomponentNames = []
     //components
-    for (const componentpath of themeData[theme].components) {
-      const rawComponentName =
-        componentpath.split('/')[componentpath.split('/').length - 1]
+    for (const component of themeData[theme].components) {
+      const rawComponentName = component.name
       // e.g. ['tabs', 'tabsPanel', 'tabsTab']
-      const componentAndSubComponents = Object.keys(input[componentpath])
-      const componentNameDict = {}
+      const componentAndSubComponents = Object.keys(component.data)
+      const componentNameDict: Record<string, boolean> = {}
       for (let i = 0; i < componentAndSubComponents.length; i++) {
         // e.g. 'tag' or 'menuSeparator'
         const fullComponentName = componentAndSubComponents[i]
         if (componentNameDict[fullComponentName]) {
           throw new Error(
-            'Component names must be unique. The following name' +
-              ' appears more than once: ',
-            fullComponentName
+            'Component names must be unique. The following name appears more than once: ' +
+              fullComponentName
           )
         } else {
           componentNameDict[fullComponentName] = true
@@ -155,11 +161,11 @@ const setupThemes = async (targetPath, input) => {
           componentAndSubcomponentNames.push(fullComponentName)
         }
         const componentThemeVars = generateComponent(
-          input[componentpath][fullComponentName]
+          component.data[fullComponentName]
         )
 
         const componentTypes = generateComponentType(
-          input[componentpath][fullComponentName]
+          component.data[fullComponentName]
         )
         const usesSemantic = componentThemeVars.includes('semantics.')
 
@@ -368,13 +374,12 @@ const setupThemes = async (targetPath, input) => {
     const { stdout, stderr } = await execAsync(
       "dprint fmt '" + targetPath + "/**/*.*'"
     )
-    // eslint-disable-next-line no-console
     console.log('[dprint]', stdout)
     if (stderr) {
       console.error('[dprint error]:', stderr)
     }
   } catch (error) {
-    throw new Error('dprint: ' + error.message)
+    throw new Error('dprint: ' + (error as any).message)
   }
 }