jellyfish_designtokens/getCompsFiles.js

Ultimate design tokens from Jelly Fish Design System

const fs = require("fs");
const glob = require("glob");
const path = require("path");



//This function reads all names from the files contained in COMPS folder
//and extracts the first part of the path that contains the component name.
//It then adds this name to an array (componentNames) that will be used to generate dynamic folders of component tokens.

function getComponentNamesFromJSONFiles(directoryPattern) {
    const componentNames = [];
  
    // Finds all files matching the pattern using the 'glob' module
    const jsonFiles = glob.sync(directoryPattern);
  
    // Extracts the first part of the path (component name) from each file
    jsonFiles.forEach((fullPath) => {
      const parts = path.parse(fullPath);
      componentNames.push(parts.name); // Adds component name to array
    });
  
    return componentNames;
  }
  
  const compsDirectory = "figma/COMPS/**/*.json";
  
  //This function reads all JSON files contained in the subfolders of the COMPS folder
  
  const componentNames = getComponentNamesFromJSONFiles(compsDirectory);
  console.log(componentNames);
  
  
  // Takes a component name and returns a filter function
  //that checks if a token's path matches the component name.
  
  const compsFilter = (componentName) => (token) =>
    token.path[1].toLowerCase() === componentName.toLowerCase();
  
  
  //Takes an array of component names and generates an array of configuration objects.
  //Each configuration object includes a filter based on the component name,
  //a destination path, and a format for the generated files.
  
  const configComponentsFiles = (tokenComponentArray) =>
    tokenComponentArray.map((componentName) => ({
      filter: compsFilter(componentName),
      destination: `${componentName}.css`,
      format: "css/variables",
      options:{
        outputReferences: true
      }
    }));

module.exports = {
  componentNames,
  compsFilter,
  configComponentsFiles,
};