jfs-components 0.0.37 → 0.0.38

package/src/design-tokens/figma-variables-resolver.js

@@ -1,243 +1,243 @@
-import variablesData from './JFS Variables-variables-full.json';
+import variablesData from './JFS Variables-variables-full.json'
   
 // 🔧 Configure the imports to include all the json files then add them to the allVariableData array 🔧
 const allVariableData = [
   variablesData,
-];
+]
 // 🔧 DO NOT EDIT BELOW THIS LINE 🔧
 // Create comprehensive lookup maps
-const variableMap = new Map();
-const collectionMap = new Map();
-const modeMap = new Map(); // collectionName -> {modeName -> modeId}
-const collectionNameToId = new Map(); // collectionName -> collectionId
-const keyMap = new Map(); // key -> variable (for cross-JSON references)
-const nameToVariableId = new Map(); // variable name -> variableId (for O(1) lookup)
-const cssVarToVariableId = new Map(); // CSS var format -> variableId (for O(1) lookup)
+const variableMap = new Map()
+const collectionMap = new Map()
+const modeMap = new Map() // collectionName -> {modeName -> modeId}
+const collectionNameToId = new Map() // collectionName -> collectionId
+const keyMap = new Map() // key -> variable (for cross-JSON references)
+const nameToVariableId = new Map() // variable name -> variableId (for O(1) lookup)
+const cssVarToVariableId = new Map() // CSS var format -> variableId (for O(1) lookup)
 
 // Optional caching (enabled by default for maximum performance)
 // Set ENABLE_CACHING = false if you need to reduce memory usage
-const ENABLE_CACHING = true;
-const resolvedValueCache = new Map(); // Cache key -> resolved value
+const ENABLE_CACHING = true
+const resolvedValueCache = new Map() // Cache key -> resolved value
 
 // Helper function to process collections from any JSON file
 function processCollections(collections) {
   collections.forEach(collection => {
-    collectionMap.set(collection.id, collection);
-    collectionNameToId.set(collection.name, collection.id);
+    collectionMap.set(collection.id, collection)
+    collectionNameToId.set(collection.name, collection.id)
     
     // Build mode mapping for this collection
-    const modes = {};
+    const modes = {}
     collection.modes.forEach(mode => {
-      modes[mode.name] = mode.modeId;
-    });
-    modeMap.set(collection.name, modes);
+      modes[mode.name] = mode.modeId
+    })
+    modeMap.set(collection.name, modes)
     
     // Add variables to both variable map and key map, plus name index
     collection.variables.forEach(variable => {
-      variableMap.set(variable.id, variable);
-      keyMap.set(variable.key, variable);
+      variableMap.set(variable.id, variable)
+      keyMap.set(variable.key, variable)
       
       // Build O(1) lookup index by name
-      nameToVariableId.set(variable.name, variable.id);
+      nameToVariableId.set(variable.name, variable.id)
       
       // Build O(1) lookup index by CSS variable format
       if (variable.codeSyntax && variable.codeSyntax.WEB) {
-        cssVarToVariableId.set(variable.codeSyntax.WEB, variable.id);
+        cssVarToVariableId.set(variable.codeSyntax.WEB, variable.id)
       }
-    });
-  });
+    })
+  })
 }
 
 // Automatically process all imported JSON files
 allVariableData.forEach(jsonData => {
   if (jsonData && jsonData.collections) {
-    processCollections(jsonData.collections);
+    processCollections(jsonData.collections)
   }
-});
+})
 
 // Helper to get all available collections and their modes
 function getAvailableCollections() {
-  const collections = {};
+  const collections = {}
   for (const [collectionName, modes] of modeMap.entries()) {
-    const collection = collectionMap.get(collectionNameToId.get(collectionName));
+    const collection = collectionMap.get(collectionNameToId.get(collectionName))
     collections[collectionName] = {
       modes: Object.keys(modes),
       defaultMode: collection.modes.find(m => m.modeId === collection.defaultModeId)?.name,
       id: collection.id
-    };
+    }
   }
-  return collections;
+  return collections
 }
 
 // Resolve mode ID for a specific collection (optimized - only resolves what's needed)
 function resolveModeIdForCollection(collectionName, modesByCollectionName = {}) {
-  const availableModes = modeMap.get(collectionName);
+  const availableModes = modeMap.get(collectionName)
   if (!availableModes) {
     // Fallback: get default mode from collection
-    const collectionId = collectionNameToId.get(collectionName);
-    const collection = collectionMap.get(collectionId);
-    return collection?.defaultModeId || null;
+    const collectionId = collectionNameToId.get(collectionName)
+    const collection = collectionMap.get(collectionId)
+    return collection?.defaultModeId || null
   }
   
-  const requestedMode = modesByCollectionName[collectionName];
+  const requestedMode = modesByCollectionName[collectionName]
   if (requestedMode && availableModes[requestedMode]) {
-    return availableModes[requestedMode];
+    return availableModes[requestedMode]
   }
   
   // Fall back to default mode
-  const collectionId = collectionNameToId.get(collectionName);
-  const collection = collectionMap.get(collectionId);
-  return collection?.defaultModeId || null;
+  const collectionId = collectionNameToId.get(collectionName)
+  const collection = collectionMap.get(collectionId)
+  return collection?.defaultModeId || null
 }
 
 // Convert mode names to mode IDs for variable resolution (kept for backward compatibility)
 function resolveModeIds(modesByCollectionName = {}) {
-  const resolvedModes = {};
+  const resolvedModes = {}
   
   // For each collection, resolve the mode name to mode ID
   for (const [collectionName, availableModes] of modeMap.entries()) {
-    const requestedMode = modesByCollectionName[collectionName];
-    let modeId;
+    const requestedMode = modesByCollectionName[collectionName]
+    let modeId
     
     if (requestedMode && availableModes[requestedMode]) {
       // Use requested mode if it exists
-      modeId = availableModes[requestedMode];
+      modeId = availableModes[requestedMode]
     } else {
       // Fall back to default mode
-      const collection = collectionMap.get(collectionNameToId.get(collectionName));
-      modeId = collection.defaultModeId;
+      const collection = collectionMap.get(collectionNameToId.get(collectionName))
+      modeId = collection.defaultModeId
     }
     
-    resolvedModes[collectionName] = modeId;
+    resolvedModes[collectionName] = modeId
   }
   
-  return resolvedModes;
+  return resolvedModes
 }
 
 // Convert RGB color object to CSS color string
 function rgbaToCSS(colorObj) {
   if (typeof colorObj !== 'object' || colorObj.type === 'VARIABLE_ALIAS') {
-    return colorObj;
+    return colorObj
   }
-  const { r, g, b, a = 1 } = colorObj;
-  const red = Math.round(r * 255);
-  const green = Math.round(g * 255);
-  const blue = Math.round(b * 255);
+  const { r, g, b, a = 1 } = colorObj
+  const red = Math.round(r * 255)
+  const green = Math.round(g * 255)
+  const blue = Math.round(b * 255)
   
   if (a === 1) {
-    return `rgb(${red}, ${green}, ${blue})`;
+    return `rgb(${red}, ${green}, ${blue})`
   }
-  return `rgba(${red}, ${green}, ${blue}, ${a})`;
+  return `rgba(${red}, ${green}, ${blue}, ${a})`
 }
 
 // Resolve variable value with support for aliases and dynamic modes
 function resolveVariable(variableId, modesByCollectionName = {}) {
-  const variable = variableMap.get(variableId);
+  const variable = variableMap.get(variableId)
   if (!variable) {
-    console.warn(`Variable ${variableId} not found`);
-    return null;
+    console.warn(`Variable ${variableId} not found`)
+    return null
   }
 
-  const collection = collectionMap.get(variable.variableCollectionId);
+  const collection = collectionMap.get(variable.variableCollectionId)
   if (!collection) {
-    console.warn(`Collection ${variable.variableCollectionId} not found`);
-    return null;
+    console.warn(`Collection ${variable.variableCollectionId} not found`)
+    return null
   }
 
   // Optimized: Only resolve mode for the specific collection we need
-  const modeId = resolveModeIdForCollection(collection.name, modesByCollectionName);
+  const modeId = resolveModeIdForCollection(collection.name, modesByCollectionName)
   if (!modeId) {
-    console.warn(`No mode found for collection ${collection.name}`);
-    return null;
+    console.warn(`No mode found for collection ${collection.name}`)
+    return null
   }
   
-  const value = variable.valuesByMode[modeId];
+  const value = variable.valuesByMode[modeId]
 
   // Allow falsy numeric/string values like 0 or '' by only treating
   // undefined/null as missing.
   if (value === undefined || value === null) {
-    console.warn(`No value found for variable ${variableId} in mode ${modeId} for collection ${collection.name}`);
-    return null;
+    console.warn(`No value found for variable ${variableId} in mode ${modeId} for collection ${collection.name}`)
+    return null
   }
 
   // Handle variable alias
   if (value.type === 'VARIABLE_ALIAS') {
-    const aliasId = value.id;
+    const aliasId = value.id
     
     // Check if this is a cross-JSON reference (contains "/" and starts with "VariableID:")
     if (aliasId.includes('/') && aliasId.startsWith('VariableID:')) {
-      const keyPart = aliasId.substring('VariableID:'.length, aliasId.indexOf('/'));
-      const referencedVariable = keyMap.get(keyPart);
+      const keyPart = aliasId.substring('VariableID:'.length, aliasId.indexOf('/'))
+      const referencedVariable = keyMap.get(keyPart)
       
       if (referencedVariable) {
-        return resolveVariable(referencedVariable.id, modesByCollectionName);
+        return resolveVariable(referencedVariable.id, modesByCollectionName)
       } else {
-        console.warn(`Cross-JSON reference key "${keyPart}" not found`);
-        return null;
+        console.warn(`Cross-JSON reference key "${keyPart}" not found`)
+        return null
       }
     }
     
     // Handle normal alias within same JSON
-    return resolveVariable(aliasId, modesByCollectionName);
+    return resolveVariable(aliasId, modesByCollectionName)
   }
 
   // Handle color values
   if (variable.resolvedType === 'COLOR') {
-    return rgbaToCSS(value);
+    return rgbaToCSS(value)
   }
 
   // Return numeric or other values as-is
-  return value;
+  return value
 }
 
 // Serialize modes object to create a stable cache key
 function serializeModes(modes) {
   if (!modes || Object.keys(modes).length === 0) {
-    return '';
+    return ''
   }
   // Sort keys for consistent serialization
-  const sortedKeys = Object.keys(modes).sort();
-  return sortedKeys.map(key => `${key}:${modes[key]}`).join('|');
+  const sortedKeys = Object.keys(modes).sort()
+  return sortedKeys.map(key => `${key}:${modes[key]}`).join('|')
 }
 
 // Get variable by name with dynamic mode resolution (optimized with O(1) lookup)
 function getVariableByName(name, modesByCollectionName = {}) {
   // Check cache if enabled
   if (ENABLE_CACHING) {
-    const cacheKey = `${name}|${serializeModes(modesByCollectionName)}`;
+    const cacheKey = `${name}|${serializeModes(modesByCollectionName)}`
     if (resolvedValueCache.has(cacheKey)) {
-      return resolvedValueCache.get(cacheKey);
+      return resolvedValueCache.get(cacheKey)
     }
   }
   
   // O(1) lookup by name
-  let variableId = nameToVariableId.get(name);
+  let variableId = nameToVariableId.get(name)
   
   // If not found, try CSS variable format (O(1) lookup)
   if (!variableId) {
-    const cssVarFormat = `var(--${name})`;
-    variableId = cssVarToVariableId.get(cssVarFormat);
+    const cssVarFormat = `var(--${name})`
+    variableId = cssVarToVariableId.get(cssVarFormat)
   }
   
   if (variableId) {
-    const result = resolveVariable(variableId, modesByCollectionName);
+    const result = resolveVariable(variableId, modesByCollectionName)
     
     // Cache result if enabled
     if (ENABLE_CACHING && result !== null) {
-      const cacheKey = `${name}|${serializeModes(modesByCollectionName)}`;
-      resolvedValueCache.set(cacheKey, result);
+      const cacheKey = `${name}|${serializeModes(modesByCollectionName)}`
+      resolvedValueCache.set(cacheKey, result)
     }
     
-    return result;
+    return result
   }
   
-  console.warn(`Variable with name "${name}" not found`);
-  return null;
+  console.warn(`Variable with name "${name}" not found`)
+  return null
 }
 
 // Get all variables that match a pattern (useful for discovery)
 function findVariablesByPattern(pattern) {
-  const matches = [];
+  const matches = []
   for (const variable of variableMap.values()) {
     if (variable.name.includes(pattern)) {
       matches.push({
@@ -245,92 +245,92 @@ function findVariablesByPattern(pattern) {
         id: variable.id,
         type: variable.resolvedType,
         collectionName: collectionMap.get(variable.variableCollectionId)?.name
-      });
+      })
     }
   }
-  return matches;
+  return matches
 }
 
 // Trace all collections that a variable (and its alias chain) belongs to
 // This function checks ALL modes of each variable in the chain
 function traceVariableCollections(variableName) {
   // O(1) lookup by name
-  const variableId = nameToVariableId.get(variableName);
+  const variableId = nameToVariableId.get(variableName)
   if (!variableId) {
-    return [];
+    return []
   }
   
-  const variable = variableMap.get(variableId);
+  const variable = variableMap.get(variableId)
   if (!variable) {
-    return [];
+    return []
   }
   
   // Use a Set to track collection IDs (to avoid duplicates)
-  const collectionIds = new Set();
-  const visitedVariableIds = new Set();
+  const collectionIds = new Set()
+  const visitedVariableIds = new Set()
   
   // Recursive function to trace aliases
   function traceVariableById(variableId) {
     if (visitedVariableIds.has(variableId)) {
-      return; // Prevent infinite loops
+      return // Prevent infinite loops
     }
-    visitedVariableIds.add(variableId);
+    visitedVariableIds.add(variableId)
     
-    const varObj = variableMap.get(variableId);
+    const varObj = variableMap.get(variableId)
     if (!varObj) {
-      return;
+      return
     }
     
     // Add this variable's collection
-    collectionIds.add(varObj.variableCollectionId);
+    collectionIds.add(varObj.variableCollectionId)
     
     // Get the collection to access all its modes
-    const collection = collectionMap.get(varObj.variableCollectionId);
+    const collection = collectionMap.get(varObj.variableCollectionId)
     if (!collection) {
-      return;
+      return
     }
     
     // Check ALL modes - each mode could have a different alias
     for (const mode of collection.modes) {
-      const modeId = mode.modeId;
-      const value = varObj.valuesByMode[modeId];
+      const modeId = mode.modeId
+      const value = varObj.valuesByMode[modeId]
       
       if (value && typeof value === 'object' && value.type === 'VARIABLE_ALIAS') {
-        const aliasId = value.id;
+        const aliasId = value.id
         
         // Handle cross-JSON reference
         if (aliasId.includes('/') && aliasId.startsWith('VariableID:')) {
-          const keyPart = aliasId.substring('VariableID:'.length, aliasId.indexOf('/'));
-          const referencedVariable = keyMap.get(keyPart);
+          const keyPart = aliasId.substring('VariableID:'.length, aliasId.indexOf('/'))
+          const referencedVariable = keyMap.get(keyPart)
           if (referencedVariable) {
-            traceVariableById(referencedVariable.id);
+            traceVariableById(referencedVariable.id)
           }
         } else {
           // Handle normal alias
-          traceVariableById(aliasId);
+          traceVariableById(aliasId)
         }
       }
     }
   }
   
   // Start tracing from the initial variable
-  traceVariableById(variable.id);
+  traceVariableById(variable.id)
   
   // Convert collection IDs to collection info, filter for those with multiple modes
-  const collections = [];
+  const collections = []
   for (const collectionId of collectionIds) {
-    const collection = collectionMap.get(collectionId);
+    const collection = collectionMap.get(collectionId)
     if (collection && collection.modes.length > 1) {
       collections.push({
         name: collection.name,
         id: collection.id,
         modes: collection.modes.map(m => m.name),
         defaultMode: collection.modes.find(m => m.modeId === collection.defaultModeId)?.name
-      });
+      })
     }
   }
   
-  return collections;
+  return collections
 }
 
 export { 
@@ -343,4 +343,4 @@ export {
   collectionMap,
   modeMap,
   keyMap
-};
+}