diff --git a/packages/canvas-tokens/utils/formatters/formatTypes.ts b/packages/canvas-tokens/utils/formatters/formatTypes.ts index 9974fa20..8097b1da 100644 --- a/packages/canvas-tokens/utils/formatters/formatTypes.ts +++ b/packages/canvas-tokens/utils/formatters/formatTypes.ts @@ -23,6 +23,7 @@ export const formatJSToTypes: Formatter = ({dictionary, file, options}) => { recursivelyCreateFileStructure({ originalValues, tokens: dictionary.properties, + allTokens: dictionary.allTokens, content, replaceInContent, }); @@ -35,6 +36,7 @@ const startingText = 'export declare const'; type ReplaceFn = (pattern: string, newText: string) => string; type HelperArgs = { + allTokens: Record[]; originalValues: Record; tokens: Record; depth?: number; @@ -43,6 +45,7 @@ type HelperArgs = { }; const recursivelyCreateFileStructure = ({ + allTokens, originalValues, tokens, content, @@ -57,7 +60,8 @@ const recursivelyCreateFileStructure = ({ const spaces = ' '.repeat(depth); if (typeof values === 'string') { - const jsDocText = generateJSDoc(original, depth); + const token = allTokens?.find(token => `--cnvs-${token.path.join('-')}` === values); + const jsDocText = generateJSDoc(token?.original || original, depth); const innerText = depth ? `${spaces}"${key}": "${values}",` @@ -79,6 +83,7 @@ const recursivelyCreateFileStructure = ({ updatedContent = replaceInContent(`**${key}**`, innerText); recursivelyCreateFileStructure({ + allTokens, originalValues: original, tokens: values, depth: depth + 1, @@ -98,25 +103,32 @@ const generateJSDoc = (original: TransformedToken, depth: number) => { const spaces = ' '.repeat(depth); const extraSpaces = spaces + ' '; const newJSDocLineStart = `\n${extraSpaces}* `; - const {value, comment, raw} = original; + const {value, comment, deprecated, deprecatedComment, raw} = original; const pxValue = `${value}`.includes('rem') ? parseFloat(value) * 16 : null; const valueText = value + (pxValue ? ` (${pxValue}px)` : ''); const tokenValue = typeof raw === 'string' - ? 'token: ' + raw.replace(/^{(.+)}$/, (_: any, b: any) => b).replace('palette.', '') + ? 'token: ' + + raw.replace(/^{(.+)}$/, (_: any, b: any) => b).replace('palette.', '') + + newJSDocLineStart + + newJSDocLineStart : ''; - const updatedComment = comment?.replace(/; /g, newJSDocLineStart); + const deprecatedText = deprecated ? `@deprecated ${deprecatedComment || ''}` : ''; + + const updatedComment = comment + ? comment.replace(/; /g, newJSDocLineStart) + newJSDocLineStart + newJSDocLineStart + : ''; + const text = comment ? newJSDocLineStart + valueText + newJSDocLineStart + newJSDocLineStart + tokenValue + - newJSDocLineStart + - newJSDocLineStart + updatedComment + + deprecatedText + `\n${extraSpaces}` : ` ${valueText} `; diff --git a/packages/canvas-tokens/utils/spec/formats.spec.ts b/packages/canvas-tokens/utils/spec/formats.spec.ts index c4622cfb..b44c7f26 100644 --- a/packages/canvas-tokens/utils/spec/formats.spec.ts +++ b/packages/canvas-tokens/utils/spec/formats.spec.ts @@ -369,7 +369,7 @@ describe('formats', () => { const expected = headerContent + - 'export declare const opacity: {\n /**\n * 0.4\n * \n * token: base.opacity.400\n * \n * Test JSDoc\n */\n "disabled": "--cnvs-base-opacity-300",\n};\n'; + 'export declare const opacity: {\n /**\n * 0.4\n * \n * token: base.opacity.400\n * \n * Test JSDoc\n * \n * \n */\n "disabled": "--cnvs-base-opacity-300",\n};\n'; expect(result).toBe(expected); });