From 1a76dc1ef8cfd44f817e6fe47484c2d2764e1533 Mon Sep 17 00:00:00 2001 From: juanfabrega Date: Wed, 14 Oct 2020 10:43:11 -0400 Subject: [PATCH] feat(types): Added Type generation to build export (#86) * better type generation * add font weights --- build.js | 8 +- .../generateTokenConstants.js | 100 ----------- .../generateTokenTypes/generateTokenTypes.js | 167 ++++++++++++++++++ 3 files changed, 171 insertions(+), 104 deletions(-) delete mode 100644 utils/generateTokenConstants/generateTokenConstants.js create mode 100644 utils/generateTokenTypes/generateTokenTypes.js diff --git a/build.js b/build.js index 1800080..060691c 100644 --- a/build.js +++ b/build.js @@ -46,7 +46,7 @@ const FIGMA_TOKENS_DOCUMENT = 'abGRptpr7iPaMsXdEPVm6W'; * Ideally the figma file version _label_ and the npm package version will match * but it is not required. */ -const FIGMA_FILE_VERSION = '491147764'; +const FIGMA_FILE_VERSION = '496707122'; // APPLY THE CONFIGURATION // IMPORTANT: the registration of custom transforms @@ -78,10 +78,10 @@ getFigmaDocument(FIGMA_TOKENS_DOCUMENT, FIGMA_FILE_VERSION) // From the built dictionary, generate constants of all token options. // File can't be required at the top since build files do not exist until the style dictionary is built. - const generateTokenConstants = require('./utils/generateTokenConstants/generateTokenConstants'); - generateTokenConstants(); + const generateTokenTypes = require('./utils/generateTokenTypes/generateTokenTypes'); + generateTokenTypes(); console.log('\n=============================================='); - console.log('\nToken constants generated!'); + console.log('\nToken types generated!'); console.log('\n=============================================='); console.log('\nAll done!'); diff --git a/utils/generateTokenConstants/generateTokenConstants.js b/utils/generateTokenConstants/generateTokenConstants.js deleted file mode 100644 index 4dfac7e..0000000 --- a/utils/generateTokenConstants/generateTokenConstants.js +++ /dev/null @@ -1,100 +0,0 @@ -const fs = require('fs'); -const colorTokens = require('../../build/json/variables-color.json'); -const sizeTokens = require('../../build/json/variables-size.json'); - -/** - * COLORS - */ -const brandColors = colorTokens.color.brand; -const fontColors = colorTokens.color.font; - -const brandColorOptions = [].concat.apply([], Object.keys(brandColors) - .map(colorName => ( - Object.keys(brandColors[colorName]) - .map(colorGrade => `${colorName}-${colorGrade}`) - ))); - -const fontColorOptions = [].concat.apply([], Object.keys(fontColors) - .map(colorName => ( - Object.keys(brandColors[colorName]) - .map(colorGrade => `${colorName}-${colorGrade}`) - ))); - -/** - * SIZES - */ -const { size } = sizeTokens; - -const borderSizeOptions = Object.keys(size.border); -const borderRadiusSizeOptions = Object.keys(size['border-radius']); -const boxShadowSizeOptions = Object.keys(size['box-shadow']); -const breakpointSizeOptions = Object.keys(size.breakpoint); -const fontSizeOptions = Object.keys(size.font); -const heightSizeOptions = Object.keys(size.height); -const lineHeightSizeOptions = Object.keys(size['line-height']); -const opacitySizeOptions = Object.keys(size.opacity); -const spacingSizeOptions = Object.keys(size.spacing); -const widthSizeOptions = Object.keys(size.width); -const zIndexSizeOptions = Object.keys(size['z-index']); - -/** - * UTILITY FUNCTIONS - */ -const writeArray = (array, arrayName, options = { newLine: true }) => { - let result = `const ${arrayName} = [`; - - array.forEach(element => { - result = `${result}\n '${element}',`; - }); - - return `${result}\n];\n${options.newLine ? '\n' : ''}`; -}; - -const writeExport = string => 'export '.concat(string); - -const createFileHeader = currentFile => `/**\n* This file was autogenerated. DO NOT edit the contents of this file directly.\n*/\n\n${currentFile}`; // eslint-disable-line max-len - -/** - * TOKEN CREATION - */ -const createColorTokens = currentFile => { - let result = currentFile; - - result = result.concat(writeExport(writeArray(brandColorOptions, 'BRAND_COLORS'))); - result = result.concat(writeExport(writeArray(fontColorOptions, 'FONT_COLORS'))); - - return result; -}; - -const createSizeTokens = currentFile => { - let result = currentFile; - - result = result.concat(writeExport(writeArray(borderSizeOptions, 'BORDER_SIZES'))); - result = result.concat(writeExport(writeArray(borderRadiusSizeOptions, 'BORDER_RADIUS_SIZES'))); - result = result.concat(writeExport(writeArray(boxShadowSizeOptions, 'BOX_SHADOW_SIZES'))); - result = result.concat(writeExport(writeArray(breakpointSizeOptions, 'BREAKPOINT_SIZES'))); - result = result.concat(writeExport(writeArray(fontSizeOptions, 'FONT_SIZES'))); - result = result.concat(writeExport(writeArray(heightSizeOptions, 'HEIGHT_SIZES'))); - result = result.concat(writeExport(writeArray(lineHeightSizeOptions, 'LINE_HEIGHT_SIZES'))); - result = result.concat(writeExport(writeArray(opacitySizeOptions, 'OPACITY_SIZES'))); - result = result.concat(writeExport(writeArray(spacingSizeOptions, 'SPACING_SIZES'))); - result = result.concat(writeExport(writeArray(widthSizeOptions, 'WIDTH_SIZES'))); - result = result.concat(writeExport(writeArray(zIndexSizeOptions, 'Z_INDEX_SIZES', { newLine: false }))); - - return result; -}; - -/** - * WRITE FILE - */ -const writeFile = () => { - let tokensData = ''; - - tokensData = createFileHeader(tokensData); - tokensData = createColorTokens(tokensData); - tokensData = createSizeTokens(tokensData); - - fs.writeFileSync(`${__dirname}/../../build/tokens.js`, tokensData); -}; - -module.exports = writeFile; diff --git a/utils/generateTokenTypes/generateTokenTypes.js b/utils/generateTokenTypes/generateTokenTypes.js new file mode 100644 index 0000000..55ee13d --- /dev/null +++ b/utils/generateTokenTypes/generateTokenTypes.js @@ -0,0 +1,167 @@ +const fs = require('fs'); +const colorTokens = require('../../build/json/variables-color.json'); +const sizeTokens = require('../../build/json/variables-size.json'); + +/** + * COLORS + */ +const brandColors = colorTokens.color.brand; +const fontColors = colorTokens.color.font; +const BRAND_COLORS = 'BRAND_COLORS'; +const FONT_COLORS = 'FONT_COLORS'; +const BRAND_COLOR_NAMES = 'BRAND_COLOR_NAMES'; + +const brandColorOptions = [].concat.apply([], Object.keys(brandColors) + .map(colorName => ( + Object.keys(brandColors[colorName]) + .map(colorGrade => colorGrade === 'base' ? colorName : `${colorName}-${colorGrade}`) + ))); + +const brandColorNames = Object.keys(brandColors); + +const fontColorOptions = [].concat.apply([], Object.keys(fontColors) + .map(colorName => ( + Object.keys(brandColors[colorName]) + .map(colorGrade => colorGrade === 'base' ? colorName : `${colorName}-${colorGrade}`) + ))); + + +/** + * SIZES + */ +const { size } = sizeTokens; + +const borderSizeOptions = Object.keys(size.border); +const borderRadiusSizeOptions = Object.keys(size['border-radius']); +const boxShadowSizeOptions = Object.keys(size['box-shadow']); +const breakpointSizeOptions = Object.keys(size.breakpoint); +const fontSizeOptions = Object.keys(size.font); +const fontWeightOptions = Object.keys(size['font-weight']); +const heightSizeOptions = Object.keys(size.height); +const lineHeightSizeOptions = Object.keys(size['line-height']); +const opacitySizeOptions = Object.keys(size.opacity); +const spacingSizeOptions = Object.keys(size.spacing); +const widthSizeOptions = Object.keys(size.width); +const zIndexSizeOptions = Object.keys(size['z-index']); + +const BORDER_SIZES = 'BORDER_SIZES'; +const BORDER_RADIUS_SIZES = 'BORDER_RADIUS_SIZES'; +const BOX_SHADOW_SIZES = 'BOX_SHADOW_SIZES'; +const BREAKPOINT_SIZES = 'BREAKPOINT_SIZES'; +const FONT_SIZES = 'FONT_SIZES'; +const FONT_WEIGHTS = 'FONT_WEIGHTS'; +const HEIGHT_SIZES = 'HEIGHT_SIZES'; +const LINE_HEIGHT_SIZES = 'LINE_HEIGHT_SIZES'; +const OPACITY_SIZES = 'OPACITY_SIZES'; +const SPACING_SIZES = 'SPACING_SIZES'; +const WIDTH_SIZES = 'WIDTH_SIZES'; +const Z_INDEX_SIZES = 'Z_INDEX_SIZES'; + +/** + * UTILITY FUNCTIONS + */ +const writeArray = (array, arrayName, options = { lineBreak: true, asConst: true }) => { + const { lineBreak, asConst } = options; + + let result = `const ${arrayName} = [`; + + array.forEach(element => { + result = `${result}\n '${element}',`; + }); + + return `${result}\n]${asConst ? ' as const': ''};\n${lineBreak ? '\n' : ''}`; +}; + +const writeExport = string => 'export '.concat(string); + +const writeUnionTypeFromArray = (typeName, arrayName) => { + return `type ${typeName} = typeof ${arrayName}[number];\n`; +} + +const createFileHeader = currentFile => `/**\n* This file was autogenerated. DO NOT edit the contents of this file directly.\n*/\n\n${currentFile}`; // eslint-disable-line max-len + +/** + * TOKEN CONSTANT CREATION + */ +const createColorTokens = currentFile => { + let result = currentFile; + + result = result.concat(writeExport(writeArray(brandColorOptions, BRAND_COLORS))); + result = result.concat(writeExport(writeArray(fontColorOptions, FONT_COLORS))); + result = result.concat(writeArray(brandColorNames, BRAND_COLOR_NAMES)); + + return result; +}; + +const createSizeTokens = currentFile => { + let result = currentFile; + + result = result.concat(writeArray(borderSizeOptions, BORDER_SIZES)); + result = result.concat(writeArray(borderRadiusSizeOptions, BORDER_RADIUS_SIZES)); + result = result.concat(writeArray(boxShadowSizeOptions, BOX_SHADOW_SIZES)); + result = result.concat(writeArray(breakpointSizeOptions, BREAKPOINT_SIZES)); + result = result.concat(writeArray(fontSizeOptions, FONT_SIZES)); + result = result.concat(writeArray(fontWeightOptions, FONT_WEIGHTS)); + result = result.concat(writeArray(heightSizeOptions, HEIGHT_SIZES)); + result = result.concat(writeArray(lineHeightSizeOptions, LINE_HEIGHT_SIZES)); + result = result.concat(writeArray(opacitySizeOptions, OPACITY_SIZES)); + result = result.concat(writeArray(spacingSizeOptions, SPACING_SIZES)); + result = result.concat(writeArray(widthSizeOptions, WIDTH_SIZES)); + result = result.concat(writeArray(zIndexSizeOptions, Z_INDEX_SIZES)); + + return result; +}; + +/** + * TYPE CREATION + */ +const createColorTypes = currentFile => { + let result = currentFile; + + result = result.concat(writeExport(writeUnionTypeFromArray('BrandColor', BRAND_COLORS))); + result = result.concat(writeExport(writeUnionTypeFromArray('FontColor', FONT_COLORS))); + result = result.concat(writeExport(writeUnionTypeFromArray('ColorName', BRAND_COLOR_NAMES))); + + return result; +}; + +const createSizeTypes = currentFile => { + let result = currentFile; + + result = result.concat(writeExport(writeUnionTypeFromArray('BorderSize', BORDER_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('BorderRadiusSize', BORDER_RADIUS_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('BoxShadowSize', BOX_SHADOW_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('BreakpointSize', BREAKPOINT_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('FontSize', FONT_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('FontWeight', FONT_WEIGHTS))); + result = result.concat(writeExport(writeUnionTypeFromArray('HeightSize', HEIGHT_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('LineHeightSize', LINE_HEIGHT_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('OpacitySize', OPACITY_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('SpacingSize', SPACING_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('WidthSize', WIDTH_SIZES))); + result = result.concat(writeExport(writeUnionTypeFromArray('ZIndexSize', Z_INDEX_SIZES))); + + return result; +}; + +/** + * WRITE FILE + */ +const writeFile = () => { + let tokensData = ''; + + tokensData = createFileHeader(tokensData); + tokensData = createColorTokens(tokensData); + tokensData = createSizeTokens(tokensData); + + tokensData = createColorTypes(tokensData); + tokensData = createSizeTypes(tokensData); + + if (!fs.existsSync(`${__dirname}/../../build/types`)){ + fs.mkdirSync(`${__dirname}/../../build/types`); + } + + fs.writeFileSync(`${__dirname}/../../build/types/index.d.ts`, tokensData); +}; + +module.exports = writeFile;