feat: add second workflow to get svg icons from figma api

.travis.yml

@@ -16,7 +16,6 @@ jobs:
     - stage: build and deploy design tokens
       if: env(TYPE) = tokens OR NOT env(TYPE)
       script:
-      - echo 'First'
       - npm run lint
       - npm run build:tokens
       - node ci/gitPushProperties.js -i "$TRAVIS_BUILD_ID"

figmaExtractor/figmaIcons.js

@@ -0,0 +1,137 @@
+const axios = require('axios');
+
+const getIconNamesAndIds = (frames) => {
+  const icons = {};
+
+  frames.forEach((frame) => {
+    frame.children.forEach((child) => {
+      icons[child.id] = child.name;
+    });
+  });
+
+  return icons;
+};
+
+const getIconUrlRequests = (figmaConfig, icons) => {
+  const {
+    fileId,
+    token
+  } = figmaConfig;
+
+  const requestHeaders = {
+    'X-Figma-Token': token
+  };
+
+  const requestConfig = {
+    headers: requestHeaders,
+    method: 'GET'
+  };
+
+  const requests = [];
+  const keys = Object.keys(icons);
+
+  keys.forEach((key) => {
+    requestConfig.url = `https://api.figma.com/v1/images/${fileId}/?ids=${key}&format=svg`;
+
+    requests.push(axios.request(requestConfig));
+
+  });
+
+  return requests;
+};
+
+const getSVGUrls = (iconResponses) => {
+  const urls = {};
+
+  iconResponses.forEach((response) => {
+    const item = response.data;
+
+    if (item.err !== null) {
+      console.log(`ERROR: ${item.err}`);
+
+      return;
+    }
+
+    const imagesKeys = Object.keys(item.images);
+
+    if (imagesKeys.length !== 1) {
+      console.log('ATTENTION: skip icon because there seem to be multiple images on aws related to that icon');
+
+      return;
+    }
+
+    const imageUrl = item.images[imagesKeys[0]];
+
+    urls[imagesKeys[0]] = imageUrl;
+  });
+
+  return urls;
+};
+
+const getMergedIdsAndNames = (names, urls) => {
+  const mergedIconInfo = [];
+  const urlKeys = Object.keys(urls);
+
+  urlKeys.forEach((urlKey) => {
+    const name = names[urlKey];
+    const url = urls[urlKey]
+
+    mergedIconInfo.push({
+      id: urlKey,
+      name,
+      url
+    });
+  });
+
+  return mergedIconInfo;
+};
+
+const getIconContentRequests = (iconsInfo) => {
+  const requests = [];
+
+  iconsInfo.forEach((info) => {
+    const config = {
+      data: {
+        id: info.id,
+        name: info.name
+      },
+      method: 'GET',
+      url: info.url
+    }
+
+    const request = axios.request(config);
+
+    requests.push(request);
+  });
+
+  return requests;
+};
+
+const getSVGContent = (responses) => {
+  const content = [];
+
+  responses.forEach((response) => {
+    const config = JSON.parse(response.config.data);
+
+    content.push({
+      id: config.id,
+      name: config.name,
+      svg: response.data
+    });
+  });
+
+  return content;
+};
+
+module.exports = async (frames, figmaConfig) => {
+  const icons = getIconNamesAndIds(frames);
+  const urlRequests = getIconUrlRequests(figmaConfig, icons);
+  const response = await Promise.all(urlRequests);
+  const iconUrls = getSVGUrls(response);
+  const iconsInfo = getMergedIdsAndNames(icons, iconUrls);
+  const iconsContentRequests = getIconContentRequests(iconsInfo);
+  const svgResponses = await Promise.all(iconsContentRequests);
+  const svgContent = getSVGContent(svgResponses);
+
+  console.log(svgContent);
+};

figmaExtractor/figmaIconsExtractor.js

@@ -0,0 +1,42 @@
+const shell = require('shelljs');
+const figmaApi = require('./figmaApi');
+const getFigmaFrames = require('./figmaFrames');
+const figmaIcons = require('./figmaIcons');
+
+require('dotenv')
+  .config();
+
+// general configuration
+const config = {
+  figma: {
+    childTypes: {
+      frame: 'FRAME'
+    }
+  },
+  frameIgnorePattern: '***ignore***'
+};
+
+// self-invoking
+(async () => {
+  try {
+
+    const apiConfig = {
+      file: `https://api.figma.com/v1/files/${process.env.FIGMA_ICONS_FILE_ID}`,
+      fileId: process.env.FIGMA_ICONS_FILE_ID,
+      token: process.env.FIGMA_ACCESS_TOKEN
+    };
+
+    const figmaData = await figmaApi(apiConfig);
+
+    const figmaFrames = getFigmaFrames(figmaData, config);
+
+    await figmaIcons(figmaFrames, apiConfig);
+
+    console.log('-->> FIGMA JSON FOR ICONS EXTRACTED SUCCESSFULLY');
+    shell.exit(0);
+
+  } catch (error) {
+    console.log(error);
+    shell.exit(1);
+  }
+})();

figmaExtractor/figmaExtractor.js → figmaExtractor/figmaTokensExtractor.js

@@ -1,7 +1,7 @@
 const shell = require('shelljs');
 const figmaApi = require('./figmaApi');
 const getFigmaFrames = require('./figmaFrames');
-const getFigmaJson = require('./figmaJson');
+const getFigmaJson = require('./figmaTokensJson');
 const writeJson = require('./figmaWriteJson');
 
 require('dotenv')
@@ -37,7 +37,7 @@ const config = {
   try {
 
     const apiConfig = {
-      file: process.env.FIGMA_FILE_URL,
+      file: `https://api.figma.com/v1/files/${process.env.FIGMA_TOKENS_FILE_ID}`,
       token: process.env.FIGMA_ACCESS_TOKEN
     };
 
@@ -48,7 +48,7 @@ const config = {
 
     writeJson(figmaJson, config);
 
-    console.log('-->> FIGMA JSON EXTRACTED SUCCESSFULLY');
+    console.log('-->> FIGMA JSON FOR TOKENS EXTRACTED SUCCESSFULLY');
     shell.exit(0);
 
   } catch (error) {

package.json

@@ -31,7 +31,7 @@
   "scripts": {
     "build:tokens": "npm run figma:extract && npm run build:stiledictionary",
     "build:stiledictionary": "node ./build.js",
-    "figma:extract": "node figmaExtractor/figmaExtractor.js",
+    "figma:extract": "node figmaExtractor/figmaTokensExtractor.js",
     "lint": "npm run lint:yml && npm run lint:js",
     "lint:js": "eslint ./ --ext .js",
     "lint:yml": "eslint ./ --ext .yml,.yaml",