Extract variable rest api

packages/export-variables-rest-api/.gitignore

@@ -0,0 +1,5 @@
+# Output files
+tokens
+build
+# Example files
+*example.json

packages/export-variables-rest-api/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "figma-variables-rest-api",
+  "version": "0.0.1",
+  "description": "Script to export Figma variables using REST API",
+  "module": "src/index.ts",
+  "scripts": {
+    "dev": "vite-node src/index.ts",
+    "clean": "rimraf build tokens",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jpmorganchase/Figma-Plugins-and-Widgets.git"
+  },
+  "author": "JPMC",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/jpmorganchase/Figma-Plugins-and-Widgets/issues"
+  },
+  "homepage": "https://github.com/jpmorganchase/Figma-Plugins-and-Widgets#readme",
+  "dependencies": {
+    "dotenv": "^16.3.1",
+    "proxy-agent": "^6.3.1",
+    "rimraf": "^5.0.5",
+    "style-dictionary": "^3.9.1",
+    "style-dictionary-utils": "^2.0.7",
+    "zod": "^3.22.4"
+  }
+}

packages/export-variables-rest-api/src/__tests__/modifyData.spec.ts

@@ -0,0 +1,214 @@
+import { describe, expect, test } from "vitest";
+import { updateApiResponse, toCamelCase, toKebabCase } from "../modifyData";
+
+describe("toCamelCase", () => {
+  test("make camel cases", () => {
+    expect(toCamelCase("Corner Radius")).toEqual("cornerRadius");
+  });
+
+  test("lower case CTA name", () => {
+    expect(toCamelCase("CTA")).toEqual("cta");
+  });
+});
+
+describe("toKebabCase", () => {
+  test("make kebab case", () => {
+    expect(toKebabCase("wordAnother")).toEqual("word-another");
+  });
+  test("lower case when number prefixed", () => {
+    expect(toKebabCase("40A")).toEqual("40a");
+  });
+});
+
+describe("updateApiResponse", () => {
+  test("filter out remote collections and variables", () => {
+    const input = {
+      variableCollections: {
+        "VariableCollectionId:1": {
+          defaultModeId: "1:0",
+          id: "VariableCollectionId:1",
+          name: "Remote collection",
+          remote: true,
+          modes: [{ modeId: "1:0", name: "Mode" }],
+          key: "123456",
+          hiddenFromPublishing: true,
+          variableIds: ["VariableID:1"],
+        },
+        "VariableCollectionId:2": {
+          defaultModeId: "2:0",
+          id: "VariableCollectionId:2",
+          name: "Local collection",
+          remote: false,
+          modes: [{ modeId: "2:0", name: "Mode" }],
+          key: "223456",
+          hiddenFromPublishing: false,
+          variableIds: ["VariableID:2"],
+        },
+      },
+      variables: {
+        "VariableID:1": {
+          id: "VariableID:1",
+          name: "Color 1",
+          remote: true,
+          key: "09876",
+          variableCollectionId: "VariableCollectionId:1",
+          resolvedType: "COLOR",
+          description: "",
+          hiddenFromPublishing: true,
+          valuesByMode: {
+            "1:0": {
+              r: 1,
+              g: 1,
+              b: 1,
+              a: 1,
+            },
+          },
+          scopes: ["ALL_SCOPES"],
+          codeSyntax: {},
+        },
+        "VariableID:2": {
+          id: "VariableID:2",
+          name: "Color",
+          remote: false,
+          key: "98766",
+          variableCollectionId: "VariableCollectionId:2",
+          resolvedType: "COLOR",
+          description: "",
+          hiddenFromPublishing: false,
+          valuesByMode: {
+            "1:0": {
+              r: 1,
+              g: 1,
+              b: 1,
+              a: 1,
+            },
+          },
+          scopes: ["ALL_SCOPES"],
+          codeSyntax: {},
+        },
+      },
+    } as const;
+    expect(
+      Object.values(input.variableCollections).every((c) => c.remote === false)
+    ).toBeFalsy();
+    expect(
+      Object.values(input.variables).every((c) => c.remote === false)
+    ).toBeFalsy();
+
+    const output = updateApiResponse(input);
+    expect(
+      Object.values(output.variableCollections).every((c) => c.remote === false)
+    ).toBeTruthy();
+    expect(
+      Object.values(output.variables).every((c) => c.remote === false)
+    ).toBeTruthy();
+  });
+  test("append default to variable name when used as group name, but only in the same collection", () => {
+    const input = {
+      variableCollections: {
+        "VariableCollectionId:1": {
+          defaultModeId: "1:0",
+          id: "VariableCollectionId:1",
+          name: "Remote collection",
+          remote: true,
+          modes: [{ modeId: "1:0", name: "Mode" }],
+          key: "123456",
+          hiddenFromPublishing: true,
+          variableIds: ["VariableID:1", "VariableID:2"],
+        },
+        "VariableCollectionId:2": {
+          defaultModeId: "2:0",
+          id: "VariableCollectionId:2",
+          name: "Local collection",
+          remote: false,
+          modes: [{ modeId: "2:0", name: "Mode" }],
+          key: "223456",
+          hiddenFromPublishing: false,
+          variableIds: ["VariableID:3"],
+        },
+      },
+      variables: {
+        "VariableID:1": {
+          id: "VariableID:1",
+          name: "Color",
+          remote: false,
+          key: "09876",
+          variableCollectionId: "VariableCollectionId:1",
+          resolvedType: "COLOR",
+          description: "",
+          hiddenFromPublishing: false,
+          valuesByMode: {
+            "1:0": {
+              r: 1,
+              g: 1,
+              b: 1,
+              a: 1,
+            },
+          },
+          scopes: ["ALL_SCOPES"],
+          codeSyntax: {},
+        },
+        "VariableID:2": {
+          id: "VariableID:2",
+          name: "Color/100",
+          remote: false,
+          key: "98766",
+          variableCollectionId: "VariableCollectionId:1",
+          resolvedType: "COLOR",
+          description: "",
+          hiddenFromPublishing: false,
+          valuesByMode: {
+            "1:0": {
+              r: 1,
+              g: 1,
+              b: 1,
+              a: 1,
+            },
+          },
+          scopes: ["ALL_SCOPES"],
+          codeSyntax: {},
+        },
+        "VariableID:3": {
+          id: "VariableID:3",
+          name: "Color",
+          remote: false,
+          key: "98766",
+          variableCollectionId: "VariableCollectionId:2",
+          resolvedType: "COLOR",
+          description: "",
+          hiddenFromPublishing: false,
+          valuesByMode: {
+            "1:0": {
+              r: 1,
+              g: 1,
+              b: 1,
+              a: 1,
+            },
+          },
+          scopes: ["ALL_SCOPES"],
+          codeSyntax: {},
+        },
+      },
+    } as const;
+    expect(input.variables["VariableID:1"].variableCollectionId).toEqual(
+      input.variables["VariableID:2"].variableCollectionId
+    );
+    expect(
+      input.variables["VariableID:2"].name.startsWith(
+        input.variables["VariableID:1"].name
+      )
+    ).toBeTruthy();
+    expect(input.variables["VariableID:3"].variableCollectionId).not.toEqual(
+      input.variables["VariableID:2"].variableCollectionId
+    );
+    expect(
+      input.variables["VariableID:2"].name.startsWith(
+        input.variables["VariableID:3"].name
+      )
+    ).toBeTruthy();
+
+    const output = updateApiResponse(input, { addDefault: true });
+    expect(output.variables["VariableID:1"].name).toEqual("Color/default");
+    expect(output.variables["VariableID:3"].name).not.toEqual("Color/default");
+  });
+});