feat: update json shape for docs (#8308)

**Related Issue:** #8287 ## Summary This changes the new format "json" to "docs" to better capture where this platform output should be used. This replaces the folder "json" with "docs".
Esri · Dec 2, 2023 · 6fac3e9 · 6fac3e9
1 parent 1d7a64c
commit 6fac3e9
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 12 deletions.
diff --git a/packages/calcite-design-tokens/src/$config.ts b/packages/calcite-design-tokens/src/$config.ts
@@ -15,7 +15,7 @@ export const config: CalciteTokenTransformConfig = {
   },
   output: {
     dir: resolve(__dirname, "../dist"),
-    platforms: [Platform.SCSS, Platform.CSS, Platform.JS, Platform.JSON, Platform.ES6],
+    platforms: [Platform.SCSS, Platform.CSS, Platform.JS, Platform.DOCS, Platform.ES6],
     expandFiles: {
       css: {
         typography: "classes.css",

diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts
@@ -16,6 +16,7 @@ import { registerValueStringWrapper } from "./styleDictionary/transformer/value/
 import { registerValueEvaluateMath } from "./styleDictionary/transformer/value/valueCheckEvaluateMath.js";
 import { registerValueRGBA } from "./styleDictionary/transformer/value/valueRGBA.js";
 import { registerNameSpacePath } from "./styleDictionary/transformer/name/nameSpacePath.js";
+import { registerFormatterDocs } from "./styleDictionary/formatter/docs.js";
 
 export async function registerCalciteTransformers(sd: StyleDictionary): Promise<void> {
   // Here we are registering the Transforms provided by Token Studio however,
@@ -41,4 +42,5 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise<
   registerValueAssetToken(sd);
   registerValueStringWrapper(sd);
   registerNameSpacePath(sd);
+  registerFormatterDocs(sd);
 }
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/docs.ts
@@ -0,0 +1,30 @@
+import { Core as StyleDictionary } from "style-dictionary";
+import { CalledFormatterFunction, FormatterConfig } from "../../../types/styleDictionary/formatterArguments";
+
+export const formatDocsPlatform: CalledFormatterFunction = (args) => {
+  const output = {
+    timestamp: Date.now(),
+    tokens: {},
+  };
+  for (let i = 0; i < args.dictionary.allTokens.length; i++) {
+    const token = args.dictionary.allTokens[i];
+
+    if (!output.tokens[token.type]) {
+      output.tokens[token.type] = [];
+    }
+    output.tokens[token.type].push(token);
+  }
+
+  return JSON.stringify(output, null, 2);
+};
+
+export const registerFormatterDocs = (sd: StyleDictionary): void => {
+  const formatterConfig: FormatterConfig = {
+    name: CalciteDocs,
+    formatter: formatDocsPlatform,
+  };
+
+  sd.registerFormat(formatterConfig);
+};
+
+export const CalciteDocs = "calcite/format/docs";
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/utils.ts
@@ -3,12 +3,13 @@ import { FormatterRules, MappedFormatterArguments } from "../../../types/styleDi
 import { CalciteCss } from "./css.js";
 import { CalciteJs } from "./javascript.js";
 import { CalciteScss } from "./scss.js";
+import { CalciteDocs } from "./docs.js";
 
 const formatters: Partial<Record<PlatformFormats, string>> = {
   css: CalciteCss,
   scss: CalciteScss,
   sass: CalciteScss,
-  json: "json",
+  docs: CalciteDocs,
   js: CalciteJs,
   es6: "javascript/es6",
   ts: "typescript/module-declarations",

diff --git a/...ign-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts b/...ign-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
@@ -59,7 +59,7 @@ export function formatExtraOutput(
             ...(mixins || []),
           ].filter((t) => t);
           break;
-        case "json":
+        case "docs":
         case "js":
         case "es6":
           const exports = index.export?.map((exp) =>
@@ -95,7 +95,7 @@ export function formatExtraOutput(
         case Platform.JS:
           writeFileSync(absoluteFilePath, args.header + "export default " + outputList[0] + "\n");
           break;
-        case Platform.JSON:
+        case Platform.DOCS:
           writeFileSync(absoluteFilePath, outputList[0]);
           break;
         default:

diff --git a/...support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts b/...support/token-transformer/styleDictionary/transformer/attributes/attributePlatformName.ts
@@ -11,7 +11,7 @@ export const transformAttributesNamesPerPlatform: CalledTransformerFunction<{ [k
       options: {
         ...args.options,
         platform,
-        prefix: platform === Platform.JSON || platform === Platform.JS ? undefined : args.options.prefix,
+        prefix: platform === Platform.DOCS || platform === Platform.JS ? undefined : args.options.prefix,
       },
     });
 

diff --git a/...-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.spec.ts b/...-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.spec.ts
@@ -51,14 +51,14 @@ describe("Set transformed name to token reference based on current platform", ()
       });
     });
 
-    describe("handle json format", () => {
+    describe("handle docs format", () => {
       it("should transform a token name to a token reference", () => {
         const token = {
           name: "some fake name",
           path: ["tier", "group", "element", "property", "state"],
         } as TransformedToken;
         const args = {
-          options: { platform: "json" },
+          options: { platform: "docs" },
         } as TransformerArgs;
         const transformedName = transformNamesSet(token, args);
         expect(transformedName).toBe("tier.group.element.property.state");

diff --git a/...lcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts b/...lcite-design-tokens/support/token-transformer/styleDictionary/transformer/name/nameSet.ts
@@ -17,7 +17,7 @@ export const transformNamesSet: CalledTransformerFunction<string> = (token, args
       ? transformNamesKebabCase(token, args)
       : transformNamesCamelCase(token, args),
   };
-  return platform === Platform.JSON || platform === Platform.JS
+  return platform === Platform.DOCS || platform === Platform.JS
     ? transformNamesJoinPath(token, args)
     : createTokenReference(t, args);
 };

diff --git a/...ages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/...ages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
@@ -59,7 +59,7 @@ export const transformations: Record<PlatformUnion, string[]> = {
   css: styles,
   sass: styles,
   scss: styles,
-  json: js,
+  docs: js,
   js,
   es6,
 };

diff --git a/...ens/support/token-transformer/styleDictionary/transformer/utils/setTokenNameByPlatform.ts b/...ens/support/token-transformer/styleDictionary/transformer/utils/setTokenNameByPlatform.ts
@@ -14,7 +14,7 @@ export function setTokenNameByPlatform(token: TransformedToken, args: PlatformOp
     ...token,
     name: ["css", "scss", "sass"].includes(format) ? kebabCaseName : camelCaseName,
   };
-  return format === Platform.JSON || format === Platform.JS
+  return format === Platform.DOCS || format === Platform.JS
     ? transformNamesJoinPath(token, args)
     : createTokenReference(t, args);
 }
diff --git a/packages/calcite-design-tokens/support/types/fileExtensions.ts b/packages/calcite-design-tokens/support/types/fileExtensions.ts
@@ -4,7 +4,7 @@ export const fileExtension: PlatformObject<string> = {
   css: ".css",
   sass: ".scss",
   scss: ".scss",
-  json: ".json",
+  docs: ".json",
   js: ".js",
   es6: ".js",
   ts: ".d.ts",

diff --git a/packages/calcite-design-tokens/support/types/platform.ts b/packages/calcite-design-tokens/support/types/platform.ts
@@ -2,7 +2,7 @@ export const enum Platform {
   CSS = "css",
   SCSS = "scss",
   SASS = "sass",
-  JSON = "json",
+  DOCS = "docs",
   JS = "js",
   ES6 = "es6",
 }