chore(ui-kit): design tokens sync scripts changes

propeldata · Apr 5, 2024 · f808593 · f808593
1 parent c058069
commit f808593
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/packages/ui-kit/scripts/parse-design-tokens.mts b/packages/ui-kit/scripts/parse-design-tokens.mts
@@ -55,21 +55,27 @@ type VariablesJSONProps = {
   }[]
 }
 
+type TypographyClassProps = {
+  className: string
+  props: { prop: string; value: string }[]
+}
+
 // Slugify string with strict mode
-const slugifyStr = (str: string): string => slugify(str.replaceAll('/', '-'), { lower: true, strict: true })
+export const slugifyStr = (str: string): string => slugify(str.replaceAll('/', '-'), { lower: true, strict: true })
 
 // Convert kebab-case to camelCase
-const kebabCaseToCamelCase = (kebabStr: string): string =>
+export const kebabCaseToCamelCase = (kebabStr: string): string =>
   kebabStr
     .split('-')
     .map((word, index) => (index === 0 ? word : word[0].toUpperCase() + word.slice(1)))
     .join('')
 
 // Convert camelCase to kebab-case
-const camelCaseToKebabCase = (camelStr: string): string => camelStr.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+export const camelCaseToKebabCase = (camelStr: string): string =>
+  camelStr.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
 
 // Parse Figma variable value
-const parseValue = (variable: VariableProps): string => {
+export const parseValue = (variable: VariableProps): string => {
   const { type, value } = variable
   switch (type) {
     case 'color':
@@ -86,15 +92,15 @@ const parseValue = (variable: VariableProps): string => {
 }
 
 // Parse Figma alias value
-const parseAlias = (variable: VariableProps, tokenData: TokenDataProps[]): string => {
+export const parseAlias = (variable: VariableProps, tokenData: TokenDataProps[]): string => {
   const { value } = variable
   const tokenKey = slugifyStr(value.name)
   const tokenValue = tokenData.find((token) => token.cssName === `--propel-${tokenKey}`)
   return tokenValue ? `var(${tokenValue.cssName})` : ''
 }
 
 // Generate design token data
-const generateTokenValue = (key: string, value: any, tokenData: TokenDataProps[]): TokenDataProps => ({
+export const generateTokenValue = (key: string, value: any, tokenData: TokenDataProps[]): TokenDataProps => ({
   cssName: `--propel-${key}`,
   jsName: kebabCaseToCamelCase(key),
   kind: value.kind,
@@ -103,11 +109,11 @@ const generateTokenValue = (key: string, value: any, tokenData: TokenDataProps[]
 })
 
 // Generate typography token data
-const generateTypographyValue = (key: string, type: 'number' | 'string', value: string): TokenDataProps =>
+export const generateTypographyValue = (key: string, type: 'number' | 'string', value: string): TokenDataProps =>
   generateTokenValue(key, { type, value, kind: 'typography' }, [])
 
 // Write design token content to file
-const writeToFileSync = (fileName: string, content: string): void => {
+export const writeToFileSync = (fileName: string, content: string): void => {
   const fullPath = path.join('./src/themes/generated/', fileName)
   const dirName = path.dirname(fullPath)
 
@@ -120,7 +126,7 @@ const writeToFileSync = (fileName: string, content: string): void => {
 }
 
 // Read Figma variables from JSON file
-const getJSONFromFile = async (): Promise<VariablesJSONProps> => {
+export const getJSONFromFile = async (): Promise<VariablesJSONProps> => {
   const data = await fsPromises.readFile('./src/themes/variables.json', 'utf-8')
   const variablesJSON: VariablesJSONProps = JSON.parse(data)
 
@@ -129,7 +135,7 @@ const getJSONFromFile = async (): Promise<VariablesJSONProps> => {
 
 // Get theme tokens
 
-const getThemeTokens = ({
+export const getThemeTokens = ({
   name,
   themes,
   variables,
@@ -153,14 +159,14 @@ const getThemeTokens = ({
 const main = async () => {
   const spinner = ora({ text: 'Parsing design variables and tokens...', color: 'yellow' }).start()
 
-  const variablesJSON = await getJSONFromFile()
+  try {
+    const variablesJSON = await getJSONFromFile()
 
-  if (!variablesJSON) {
-    spinner.fail('Failed to parse variables.json')
-    throw new Error('Failed to parse variables.json')
-  }
+    if (!variablesJSON) {
+      spinner.fail('Failed to parse variables.json')
+      throw new Error('Failed to parse variables.json')
+    }
 
-  try {
     const variables: TokenDataProps[] = []
     const tokens: TokenDataProps[] = []
 
@@ -182,18 +188,14 @@ const main = async () => {
         })
       })
 
-    type typographyClassProps = {
-      className: string
-      props: { prop: string; value: string }[]
-    }
-    const typographyClasses: typographyClassProps[] = []
+    const typographyClasses: TypographyClassProps[] = []
 
     variablesJSON.collections
       ?.find(({ name }) => name === 'Typography')
       ?.modes?.find(({ name }) => name.toLowerCase() === 'style')
       ?.variables?.forEach((variable) => {
         const key = slugifyStr(variable.name)
-        const typographyClass: typographyClassProps = {
+        const typographyClass: TypographyClassProps = {
           className: kebabCaseToCamelCase(key),
           props: []
         }

diff --git a/packages/ui-kit/scripts/validate-design-tokens.mts b/packages/ui-kit/scripts/validate-design-tokens.mts
@@ -15,7 +15,7 @@ interface GetAllFilesProps {
 }
 
 // Recursive function to get all files in a given directory
-const getAllFiles = ({ dirPath, type, arrayOfFiles = [] }: GetAllFilesProps): string[] => {
+export const getAllFiles = ({ dirPath, type, arrayOfFiles = [] }: GetAllFilesProps): string[] => {
   const files = fs.readdirSync(dirPath)
 
   files.forEach((file) => {
@@ -36,14 +36,14 @@ const getAllFiles = ({ dirPath, type, arrayOfFiles = [] }: GetAllFilesProps): st
 }
 
 // Extract CSS variables with --propel- prefix from a given file
-const extractCSSVariables = (file: string): string[] => {
+export const extractCSSVariables = (file: string): string[] => {
   const fileContent = fs.readFileSync(file, 'utf8')
   const regex = /--propel-[\w-]+/g // Regex updated to match only variables starting with --propel-
   return fileContent.match(regex) || []
 }
 
 // Get a list of propel's CSS variables from all CSS files in the given directory
-const getCSSVariables = (dirPath: string, type: 'current' | 'new'): string[] => {
+export const getCSSVariables = (dirPath: string, type: 'current' | 'new'): string[] => {
   const files = getAllFiles({ dirPath, type })
   const allVariables = new Set<string>()
 
@@ -58,7 +58,7 @@ const getCSSVariables = (dirPath: string, type: 'current' | 'new'): string[] =>
 }
 
 // Build SASS files into CSS
-const buildSASSFiles = async (spinner: Ora): Promise<void> => {
+export const buildSASSFiles = async (spinner: Ora): Promise<void> => {
   try {
     const { stderr } = await execAsync('sass src:src/generated')
     if (stderr) throw new Error(stderr)
@@ -70,7 +70,7 @@ const buildSASSFiles = async (spinner: Ora): Promise<void> => {
 }
 
 // Compare current and new CSS variables, and log any missing variables
-const validateDesignTokens = (spinner: Ora): void => {
+export const validateDesignTokens = (spinner: Ora): void => {
   spinner.start('Validating design tokens...')
   let validationFailed = false