Merge pull request #2543 from hashicorp/pipelines-figma-api-updates

FlightIcon pipeline - FigmaApi updates

Author: didoo

packages/flight-icons/package.json

@@ -27,12 +27,13 @@
     "@figma-export/output-components-as-svg": "^4.7.0",
     "@figma-export/transform-svg-with-svgo": "^4.7.0",
     "@figma-export/types": "^4.7.0",
+    "@figma/rest-api-spec": "^0.21.0",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-jsx": "^5.5.0",
     "@types/archiver": "^5.3.4",
     "@types/fs-extra": "^11.0.3",
     "@types/lodash": "^4.14.200",
-    "@types/node": "^20.8.9",
+    "@types/node": "^22.8.7",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@types/svgo": "~1.3.6",
@@ -43,14 +44,14 @@
     "del": "^6.1.1",
     "dotenv": "^10.0.0",
     "eslint": "^8.57.0",
-    "figma-api": "^1.11.0",
+    "figma-api": "^2.0.1-beta",
     "fs-extra": "^11.1.1",
     "lodash": "^4.17.21",
     "mini-svg-data-uri": "^1.4.4",
     "prettier": "^3.3.2",
     "svgo": "~1.3.2",
     "svgstore": "^3.0.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.3"
   }
 }

packages/flight-icons/scripts/sync-parts/getAssetsMetadata.ts

@@ -5,6 +5,8 @@
 
 import type { AssetCoreData, AssetsMetadata } from "../@types/AssetsMetadata";
 
+import { PublishedComponent, PublishedComponentSet } from '@figma/rest-api-spec';
+
 import { config } from '../config';
 
 import chalk from 'chalk';
@@ -27,13 +29,14 @@ export async function getAssetsMetadata(): Promise<AssetsMetadata> {
     });
 
     // retrieve all the component_sets from the Figma file (later we'll use their names and descriptions for the icons)
-    const componentSetsResponse = await api.getFileComponentSets(config.figmaFile.id);
+    const componentSetsResponse = await api.getFileComponentSets({ file_key: config.figmaFile.id });
     const componentSetData: ComponentSetData = {};
     if (componentSetsResponse.meta && componentSetsResponse.meta.component_sets) {
-        componentSetsResponse.meta.component_sets.forEach(component_set => {
+        componentSetsResponse.meta.component_sets.forEach((component_set: PublishedComponentSet) => {
             // check that the component_set is inside the expected page/frame
             if (
                 component_set.containing_frame &&
+                component_set.containing_frame.name &&
                 component_set.containing_frame.pageName === config.figmaFile.page &&
                 !config.figmaFile.excludeFrames.includes(component_set.containing_frame.name)
             ) {
@@ -47,12 +50,13 @@ export async function getAssetsMetadata(): Promise<AssetsMetadata> {
         console.log(chalk.magenta('ATTENTION:\nNo component sets ("icons") found in the Figma file, please check that your configuration file has the right values for "page" and "frame" names.'));
     }
 
-    const componentsResponse = await api.getFileComponents(config.figmaFile.id);
+    const componentsResponse = await api.getFileComponents({ file_key: config.figmaFile.id });
     if (componentsResponse.meta && componentsResponse.meta.components) {
-        componentsResponse.meta.components.forEach(component => {
+        componentsResponse.meta.components.forEach((component: PublishedComponent) => {
             // check that the component is inside the expected page/frame
             if (
                 component.containing_frame &&
+                component.containing_frame.name &&
                 component.containing_frame.pageName === config.figmaFile.page &&
                 !config.figmaFile.excludeFrames.includes(component.containing_frame.name)
             ) {
@@ -67,7 +71,12 @@ export async function getAssetsMetadata(): Promise<AssetsMetadata> {
                     // by convention the category of an icon is the containing frame's name
                     assetsMetadata[component.node_id].category = component.containing_frame.name;
                 }
+                // this (missing `containingStateGroup` property) is a known issue:
+                // - https://forum.figma.com/t/missing-containingstategroup-parameter-in-documentation-for-frameinfo/2558
+                // - https://github.com/figma/rest-api-spec/issues/29
+                // @ts-ignore
                 if (component.containing_frame.containingStateGroup) {
+                    // @ts-ignore
                     const parentComponentSet = componentSetData[component.containing_frame.containingStateGroup.nodeId]
                     if (parentComponentSet) {
                         assetsMetadata[component.node_id].iconName = parentComponentSet.name;

packages/tokens/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "@types/fs-extra": "^11.0.3",
     "@types/lodash": "^4.14.200",
-    "@types/node": "^20.8.9",
+    "@types/node": "^22.8.7",
     "@types/tinycolor2": "^1.4.5",
     "@typescript-eslint/eslint-plugin": "^8.5.0",
     "@typescript-eslint/parser": "^8.5.0",
@@ -35,7 +35,7 @@
     "path": "^0.12.7",
     "style-dictionary": "^3.9.0",
     "tinycolor2": "^1.6.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.3.3"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.3"
   }
 }

yarn.lock

@@ -3628,6 +3628,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@figma/rest-api-spec@npm:^0.21.0":
+  version: 0.21.0
+  resolution: "@figma/rest-api-spec@npm:0.21.0"
+  checksum: 10/8feee26a50272f22d03de2a284ce1bef3e1aaedc14606e5a8457aaf32773cb05a0a51870d4d157dabee8b16d469c16c8e90efda2685ae36213ac022c7f58760c
+  languageName: node
+  linkType: hard
+
 "@floating-ui/core@npm:^1.0.0":
   version: 1.6.0
   resolution: "@floating-ui/core@npm:1.6.0"
@@ -4307,7 +4314,7 @@ __metadata:
   dependencies:
     "@types/fs-extra": "npm:^11.0.3"
     "@types/lodash": "npm:^4.14.200"
-    "@types/node": "npm:^20.8.9"
+    "@types/node": "npm:^22.8.7"
     "@types/tinycolor2": "npm:^1.4.5"
     "@typescript-eslint/eslint-plugin": "npm:^8.5.0"
     "@typescript-eslint/parser": "npm:^8.5.0"
@@ -4318,8 +4325,8 @@ __metadata:
     path: "npm:^0.12.7"
     style-dictionary: "npm:^3.9.0"
     tinycolor2: "npm:^1.6.0"
-    ts-node: "npm:^10.9.1"
-    typescript: "npm:^5.3.3"
+    ts-node: "npm:^10.9.2"
+    typescript: "npm:^5.6.3"
   languageName: unknown
   linkType: soft
 
@@ -4386,12 +4393,13 @@ __metadata:
     "@figma-export/output-components-as-svg": "npm:^4.7.0"
     "@figma-export/transform-svg-with-svgo": "npm:^4.7.0"
     "@figma-export/types": "npm:^4.7.0"
+    "@figma/rest-api-spec": "npm:^0.21.0"
     "@svgr/core": "npm:^5.5.0"
     "@svgr/plugin-jsx": "npm:^5.5.0"
     "@types/archiver": "npm:^5.3.4"
     "@types/fs-extra": "npm:^11.0.3"
     "@types/lodash": "npm:^4.14.200"
-    "@types/node": "npm:^20.8.9"
+    "@types/node": "npm:^22.8.7"
     "@types/react": "npm:^18.2.33"
     "@types/react-dom": "npm:^18.2.14"
     "@types/svgo": "npm:~1.3.6"
@@ -4402,15 +4410,15 @@ __metadata:
     del: "npm:^6.1.1"
     dotenv: "npm:^10.0.0"
     eslint: "npm:^8.57.0"
-    figma-api: "npm:^1.11.0"
+    figma-api: "npm:^2.0.1-beta"
     fs-extra: "npm:^11.1.1"
     lodash: "npm:^4.17.21"
     mini-svg-data-uri: "npm:^1.4.4"
     prettier: "npm:^3.3.2"
     svgo: "npm:~1.3.2"
     svgstore: "npm:^3.0.1"
     ts-node: "npm:^10.9.2"
-    typescript: "npm:^5.3.3"
+    typescript: "npm:^5.6.3"
   languageName: unknown
   linkType: soft
 
@@ -6198,7 +6206,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:>=10.0.0, @types/node@npm:^20.8.9":
+"@types/node@npm:*, @types/node@npm:>=10.0.0":
   version: 20.10.4
   resolution: "@types/node@npm:20.10.4"
   dependencies:
@@ -6207,13 +6215,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:12.0.2":
-  version: 12.0.2
-  resolution: "@types/node@npm:12.0.2"
-  checksum: 10/533bc925ae3a8df02c97cc9384af0e3f43430b5390c5114fe16c7187ff58547281006f49626b408d801e91927e0de7f55923e73a1da231c5ae86f43fc062087a
-  languageName: node
-  linkType: hard
-
 "@types/node@npm:^12.7.1":
   version: 12.20.55
   resolution: "@types/node@npm:12.20.55"
@@ -6228,6 +6229,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^22.8.7":
+  version: 22.9.0
+  resolution: "@types/node@npm:22.9.0"
+  dependencies:
+    undici-types: "npm:~6.19.8"
+  checksum: 10/a7df3426891868b0f5fb03e46aeddd8446178233521c624a44531c92a040cf08a82d8235f7e1e02af731fd16984665d4d71f3418caf9c2788313b10f040d615d
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^9.6.0":
   version: 9.6.61
   resolution: "@types/node@npm:9.6.61"
@@ -7719,7 +7729,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:~0.27.2":
+"axios@npm:^0.27.2, axios@npm:~0.27.2":
   version: 0.27.2
   resolution: "axios@npm:0.27.2"
   dependencies:
@@ -15216,13 +15226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"figma-api@npm:^1.11.0":
-  version: 1.11.0
-  resolution: "figma-api@npm:1.11.0"
+"figma-api@npm:^2.0.1-beta":
+  version: 2.0.1-beta
+  resolution: "figma-api@npm:2.0.1-beta"
   dependencies:
-    "@types/node": "npm:12.0.2"
-    axios: "npm:^0.21.1"
-  checksum: 10/82fbbf772b4e46c9449338d09f8b5b07785bdbaaa61deb2409b87142b10670d634f20e25bf1d9080cb334d51b234edcc013d75345def0ea1a715e130f280a093
+    "@types/node": "npm:^22.8.7"
+    axios: "npm:^0.27.2"
+  checksum: 10/332a792a53b6efa5dc4b8d7a0b5130711a467a75be63a0fdb6d183f751548943c9f46c49c4189f1b1a2be5469936f0603af417598861da497b161ca1eb1dc270
   languageName: node
   linkType: hard
 
@@ -15638,7 +15648,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.14.9":
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0":
   version: 1.15.6
   resolution: "follow-redirects@npm:1.15.6"
   peerDependenciesMeta:
@@ -15648,6 +15658,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.14.9":
+  version: 1.15.9
+  resolution: "follow-redirects@npm:1.15.9"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 10/e3ab42d1097e90d28b913903841e6779eb969b62a64706a3eb983e894a5db000fbd89296f45f08885a0e54cd558ef62e81be1165da9be25a6c44920da10f424c
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -26786,7 +26806,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-node@npm:^10.9.1, ts-node@npm:^10.9.2":
+"ts-node@npm:^10.9.2":
   version: 10.9.2
   resolution: "ts-node@npm:10.9.2"
   dependencies:
@@ -27093,6 +27113,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.6.3":
+  version: 5.6.3
+  resolution: "typescript@npm:5.6.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/c328e418e124b500908781d9f7b9b93cf08b66bf5936d94332b463822eea2f4e62973bfb3b8a745fdc038785cb66cf59d1092bac3ec2ac6a3e5854687f7833f1
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A^5.3.3#optional!builtin<compat/typescript>":
   version: 5.4.2
   resolution: "typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>::version=5.4.2&hash=5adc0c"
@@ -27113,6 +27143,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^5.6.3#optional!builtin<compat/typescript>":
+  version: 5.6.3
+  resolution: "typescript@patch:typescript@npm%3A5.6.3#optional!builtin<compat/typescript>::version=5.6.3&hash=74658d"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/dc4bec403cd33a204b655b1152a096a08e7bad2c931cb59ef8ff26b6f2aa541bf98f09fc157958a60c921b1983a8dde9a85b692f9de60fa8f574fd131e3ae4dd
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^1.0.35":
   version: 1.0.37
   resolution: "ua-parser-js@npm:1.0.37"
@@ -27172,6 +27212,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici-types@npm:~6.19.8":
+  version: 6.19.8
+  resolution: "undici-types@npm:6.19.8"
+  checksum: 10/cf0b48ed4fc99baf56584afa91aaffa5010c268b8842f62e02f752df209e3dea138b372a60a963b3b2576ed932f32329ce7ddb9cb5f27a6c83040d8cd74b7a70
+  languageName: node
+  linkType: hard
+
 "unherit@npm:^1.0.4":
   version: 1.1.3
   resolution: "unherit@npm:1.1.3"