From 9f2b11e0825376c81cfeb78933110d95c31ce523 Mon Sep 17 00:00:00 2001 From: Alex Bueno <44420072+aweell@users.noreply.github.com> Date: Fri, 13 Sep 2024 19:07:15 +0200 Subject: [PATCH] Improvements in file organization --- tokens/figma/update-middleware.mjs | 142 +++++------------- tokens/figma/update-skins.mjs | 67 +++------ tokens/figma/utils/api-request.mjs | 50 ++++++ tokens/figma/utils/constants.mjs | 20 +++ .../figma/{ => utils}/extract-json-data.mjs | 2 +- .../{utils.mjs => utils/figma-utils.mjs} | 48 +----- tokens/figma/utils/hex-to-rgba.mjs | 28 ++++ 7 files changed, 157 insertions(+), 200 deletions(-) create mode 100644 tokens/figma/utils/api-request.mjs create mode 100644 tokens/figma/utils/constants.mjs rename tokens/figma/{ => utils}/extract-json-data.mjs (99%) rename tokens/figma/{utils.mjs => utils/figma-utils.mjs} (87%) create mode 100644 tokens/figma/utils/hex-to-rgba.mjs diff --git a/tokens/figma/update-middleware.mjs b/tokens/figma/update-middleware.mjs index 4f2dc5da7d..7e2a57ea3f 100644 --- a/tokens/figma/update-middleware.mjs +++ b/tokens/figma/update-middleware.mjs @@ -6,11 +6,18 @@ import { updateOrCreateVariables, updateOrCreateVariableModeValues, hasDefaultMode, - generateTempModeId, +} from "./utils/figma-utils.mjs"; + +import { VARIABLE_TYPES, COLLECTION_NAMES, MODE_NAMES, -} from "./utils.mjs"; +} from "./utils/constants.mjs"; + +import { + getFigmaData, + postFigmaVariables, +} from "./utils/api-request.mjs"; function formatBrandName(brand) { // Check if the brand is "tu" and return it in uppercase @@ -39,19 +46,10 @@ async function updateTheme( FIGMA_TOKEN ) { try { - // Fetch existing variables and collections from Figma - const response = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`, - { - method: "GET", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - } + const figmaData = await getFigmaData( + FILE_KEY, + FIGMA_TOKEN ); - - const figmaData = await response.json(); const existingVariables = figmaData.meta.variables; const existingCollections = @@ -214,26 +212,12 @@ async function updateTheme( ); // Update the variables and modes in Figma - const updateResponse = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables`, - { - method: "POST", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - body: JSON.stringify(newData), - } + await postFigmaVariables( + FILE_KEY, + FIGMA_TOKEN, + newData ); - if (!updateResponse.ok) { - const errorText = - await updateResponse.text(); - throw new Error( - `Error updating variables and modes: ${updateResponse.statusText}. Response: ${errorText}` - ); - } - return newData; } catch (error) { console.error("Error:", error); @@ -247,19 +231,10 @@ async function updateSkinColorVariables( FIGMA_TOKEN ) { try { - // Step 1: Fetch existing data from "Mode" and "Brand" collections - const response = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`, - { - method: "GET", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - } + const figmaData = await getFigmaData( + FILE_KEY, + FIGMA_TOKEN ); - - const figmaData = await response.json(); const themeCollections = figmaData.meta.variableCollections; @@ -428,25 +403,12 @@ async function updateSkinColorVariables( } // Step 9: Send the data to update the Brand collection (POST) - const updateResponse = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables`, - { - method: "POST", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - body: JSON.stringify(newData), - } - ); - if (!updateResponse.ok) { - const errorText = - await updateResponse.text(); - throw new Error( - `Error updating Brand collection: ${updateResponse.statusText}. Response: ${errorText}` - ); - } + await postFigmaVariables( + FILE_KEY, + FIGMA_TOKEN, + newData + ); return newData; // Returning newData for debugging } catch (error) { @@ -461,18 +423,10 @@ async function updateSkinOtherVariables( FILE_KEY, FIGMA_TOKEN ) { - const response = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`, - { - method: "GET", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - } + const figmaData = await getFigmaData( + FILE_KEY, + FIGMA_TOKEN ); - - const figmaData = await response.json(); const existingVariables = figmaData.meta.variables; const existingCollections = @@ -631,24 +585,12 @@ async function updateSkinOtherVariables( } // Make the POST request to update the variables and mode values in the Brand collection - const updateResponse = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables`, - { - method: "POST", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - body: JSON.stringify(newData), - } - ); - if (!updateResponse.ok) { - const errorText = await updateResponse.text(); - throw new Error( - `Error updating Brand collection: ${updateResponse.statusText}. Response: ${errorText}` - ); - } + await postFigmaVariables( + FILE_KEY, + FIGMA_TOKEN, + newData + ); return newData; } @@ -670,22 +612,10 @@ async function postCollections( FIGMA_TOKEN ); - const response = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables/`, - { - method: "POST", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - body: JSON.stringify(newData), - } - ); - - const data = await response.json(); - console.log( - `Success creating collections for brand ${brand}:`, - data + await postFigmaVariables( + FILE_KEY, + FIGMA_TOKEN, + newData ); } catch (error) { console.error( diff --git a/tokens/figma/update-skins.mjs b/tokens/figma/update-skins.mjs index 0c5c51a33e..42f3bd4b93 100644 --- a/tokens/figma/update-skins.mjs +++ b/tokens/figma/update-skins.mjs @@ -1,12 +1,19 @@ -import fetch from "node-fetch"; import { updateCollections, updateOrCreateVariables, updateOrCreateVariableModeValues, - COLLECTION_NAMES, +} from "./utils/figma-utils.mjs"; + +import { VARIABLE_TYPES, + COLLECTION_NAMES, MODE_NAMES, -} from "./utils.mjs"; +} from "./utils/constants.mjs"; + +import { + getFigmaData, + postFigmaVariables, +} from "./utils/api-request.mjs"; const collectionNames = [ COLLECTION_NAMES.PALETTE, @@ -19,19 +26,11 @@ async function updatePalette( FIGMA_TOKEN ) { try { - const response = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`, - { - method: "GET", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - } + const figmaData = await getFigmaData( + FILE_KEY, + FIGMA_TOKEN ); - const figmaData = await response.json(); - const existingVariables = figmaData.meta.variables; const existingCollections = @@ -127,22 +126,10 @@ async function postCollections( FIGMA_TOKEN ); - const response = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables/`, - { - method: "POST", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - body: JSON.stringify(newData), - } - ); - - const data = await response.json(); - console.log( - `Success creating collections for brand ${brand}:`, - data + await postFigmaVariables( + FILE_KEY, + FIGMA_TOKEN, + newData ); } catch (error) { console.error( @@ -166,22 +153,10 @@ async function postPalette( FIGMA_TOKEN ); - const response = await fetch( - `https://api.figma.com/v1/files/${FILE_KEY}/variables/`, - { - method: "POST", - headers: { - "X-Figma-Token": FIGMA_TOKEN, - "Content-Type": "application/json", - }, - body: JSON.stringify(newData), - } - ); - - const data = await response.json(); - console.log( - `Success updating palette for brand ${brand}:`, - data + await postFigmaVariables( + FILE_KEY, + FIGMA_TOKEN, + newData ); } catch (error) { console.error( diff --git a/tokens/figma/utils/api-request.mjs b/tokens/figma/utils/api-request.mjs new file mode 100644 index 0000000000..c7807e3973 --- /dev/null +++ b/tokens/figma/utils/api-request.mjs @@ -0,0 +1,50 @@ +import fetch from "node-fetch"; + +async function getFigmaData( + FILE_KEY, + FIGMA_TOKEN +) { + const response = await fetch( + `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`, + { + method: "GET", + headers: { + "X-Figma-Token": FIGMA_TOKEN, + "Content-Type": "application/json", + }, + } + ); + if (!response.ok) { + throw new Error( + `Error fetching Figma data: ${response.statusText}` + ); + } + return response.json(); +} + +async function postFigmaVariables( + FILE_KEY, + FIGMA_TOKEN, + newData +) { + const response = await fetch( + `https://api.figma.com/v1/files/${FILE_KEY}/variables`, + { + method: "POST", + headers: { + "X-Figma-Token": FIGMA_TOKEN, + "Content-Type": "application/json", + }, + body: JSON.stringify(newData), + } + ); + if (!response.ok) { + const errorText = await response.text(); + throw new Error( + `Error updating variables: ${response.statusText}. Response: ${errorText}` + ); + } + return response.json(); +} + +export { getFigmaData, postFigmaVariables }; diff --git a/tokens/figma/utils/constants.mjs b/tokens/figma/utils/constants.mjs new file mode 100644 index 0000000000..13e30b2599 --- /dev/null +++ b/tokens/figma/utils/constants.mjs @@ -0,0 +1,20 @@ +export const VARIABLE_TYPES = { + COLOR: "COLOR", + FLOAT: "FLOAT", + STRING: "STRING", + FONT_WEIGHT: "FONT_WEIGHT", + FONT_SIZE: "FONT_SIZE", + LINE_HEIGHT: "LINE_HEIGHT", +}; + +export const COLLECTION_NAMES = { + BRAND: "Brand", + COLOR_SCHEME: "Mode", + PALETTE: "Palette", +}; + +export const MODE_NAMES = { + DEFAULT: "Mode 1", + LIGHT: "Light", + DARK: "Dark", +}; diff --git a/tokens/figma/extract-json-data.mjs b/tokens/figma/utils/extract-json-data.mjs similarity index 99% rename from tokens/figma/extract-json-data.mjs rename to tokens/figma/utils/extract-json-data.mjs index 391e81f49a..2e6cbcc9c6 100644 --- a/tokens/figma/extract-json-data.mjs +++ b/tokens/figma/utils/extract-json-data.mjs @@ -1,6 +1,6 @@ import fs from "fs"; import path from "path"; -import { hexToRgba } from "./utils.mjs"; +import hexToRgba from "./hex-to-rgba.mjs"; export const extractSkinJsonData = ( jsonFiles, diff --git a/tokens/figma/utils.mjs b/tokens/figma/utils/figma-utils.mjs similarity index 87% rename from tokens/figma/utils.mjs rename to tokens/figma/utils/figma-utils.mjs index ff351b2e13..35f8415ecd 100644 --- a/tokens/figma/utils.mjs +++ b/tokens/figma/utils/figma-utils.mjs @@ -1,50 +1,4 @@ -export const VARIABLE_TYPES = { - COLOR: "COLOR", - FLOAT: "FLOAT", - STRING: "STRING", - FONT_WEIGHT: "FONT_WEIGHT", - FONT_SIZE: "FONT_SIZE", - LINE_HEIGHT: "LINE_HEIGHT", -}; - -export const COLLECTION_NAMES = { - BRAND: "Brand", - COLOR_SCHEME: "Mode", - PALETTE: "Palette", -}; - -export const MODE_NAMES = { - DEFAULT: "Mode 1", - LIGHT: "Light", - DARK: "Dark", -}; - -export function hexToRgba(hex, alpha = 1) { - // Remove the leading # if it's present - hex = hex.replace(/^#/, ""); - - // Expand shorthand form (e.g., "03F") to full form (e.g., "0033FF") - if (hex.length === 3) { - hex = hex - .split("") - .map((char) => char + char) - .join(""); - } - - // Parse the r, g, b values - const bigint = parseInt(hex, 16); - const r = ((bigint >> 16) & 255) / 255; - const g = ((bigint >> 8) & 255) / 255; - const b = (bigint & 255) / 255; - - // Return the RGBA object with normalized values - return { - r, - g, - b, - a: alpha, - }; -} +import { MODE_NAMES } from "./constants.mjs"; export function generateTempModeId( targetMode, diff --git a/tokens/figma/utils/hex-to-rgba.mjs b/tokens/figma/utils/hex-to-rgba.mjs new file mode 100644 index 0000000000..1e9f533d4c --- /dev/null +++ b/tokens/figma/utils/hex-to-rgba.mjs @@ -0,0 +1,28 @@ +export function hexToRgba(hex, alpha = 1) { + // Remove the leading # if it's present + hex = hex.replace(/^#/, ""); + + // Expand shorthand form (e.g., "03F") to full form (e.g., "0033FF") + if (hex.length === 3) { + hex = hex + .split("") + .map((char) => char + char) + .join(""); + } + + // Parse the r, g, b values + const bigint = parseInt(hex, 16); + const r = ((bigint >> 16) & 255) / 255; + const g = ((bigint >> 8) & 255) / 255; + const b = (bigint & 255) / 255; + + // Return the RGBA object with normalized values + return { + r, + g, + b, + a: alpha, + }; +} + +export default hexToRgba;