feat(web): Make type definitions of objects static (#42)

Components

Co-authored-by: @alanbsmith <[email protected]>

packages/canvas-tokens/build.ts

@@ -64,7 +64,7 @@ const config = setConfig({
           level: ['brand', 'sys'],
           extensions: ['d.ts'],
           format: 'merge/types',
-          combineWith: ['merge/objects', '{platform}/objects'],
+          combineWith: ['merge/objects', '{platform}/types'],
         },
         {
           level: ['base'],

packages/canvas-tokens/utils/formatters/formatJS.ts

@@ -45,6 +45,19 @@ export const formatES6ToObjects: Formatter = ({dictionary, file}) => {
   }, headerContent);
 };
 
+/**
+ * Style Dictionary format function that create token type definitions.
+ * @param {*} FormatterArguments - Style Dictionary formatter object containing `dictionary`, `options`, `file` and `platform` properties.
+ * @returns file content as a string
+ */
+export const formatES6ToTypes: Formatter = ({dictionary, file}) => {
+  const headerContent = formatHelpers.fileHeader({file});
+  return Object.entries(dictionary.properties).reduce((acc: string, [key, values]) => {
+    return (acc +=
+      `export declare const ${key} = ` + JSON.stringify(values, null, 2) + ' as const;\n\n');
+  }, headerContent);
+};
+
 /**
  * Style Dictionary format function that create the export index file for es6 folder.
  * @param {*} FormatterArguments - Style Dictionary formatter object containing `dictionary`, `options`, `file` and `platform` properties.

packages/canvas-tokens/utils/formatters/index.ts

@@ -5,6 +5,7 @@ import {
   formatCommonToObjects,
   formatES6Exports,
   formatCommonJSExports,
+  formatES6ToTypes,
 } from './formatJS';
 import {formatCSSComposite, formatLessComposite, formatSassComposite} from './formatStyles';
 import {mergeObjects} from './mergeObjects';
@@ -18,6 +19,9 @@ export const formats: Record<string, Formatter> = {
   // formatter creating the es6 file structure
   // with tokens united in objects
   'es6/objects': formatES6ToObjects,
+  // formatter creating the es6 and common-js types including the `as const`
+  'es6/types': formatES6ToTypes,
+  'common-js/types': formatES6ToTypes,
   // formatter creating the common-js file structure
   // with tokens united in objects
   'common-js/objects': formatCommonToObjects,

packages/canvas-tokens/utils/spec/formats.spec.ts

@@ -347,6 +347,58 @@ describe('formats', () => {
     });
   });
 
+  describe('es6/types', () => {
+    it('should return correct file structure for es6', () => {
+      const result = formats['es6/types']({
+        ...defaultArgs,
+        options: {
+          formats: ['javascript/es6'],
+          level: 'sys',
+        },
+        dictionary: {
+          properties: {
+            opacity: {
+              disabled: '--cnvs-base-opacity-300',
+            },
+          },
+        },
+      });
+
+      const expected =
+        headerContent +
+        'export declare const opacity = {\n  "disabled": "--cnvs-base-opacity-300"\n} as const;' +
+        '\n\n';
+
+      expect(result).toBe(expected);
+    });
+  });
+
+  describe('common-js/types', () => {
+    it('should return correct file structure for es6', () => {
+      const result = formats['es6/types']({
+        ...defaultArgs,
+        options: {
+          formats: ['javascript/common-js'],
+          level: 'sys',
+        },
+        dictionary: {
+          properties: {
+            opacity: {
+              disabled: '--cnvs-base-opacity-300',
+            },
+          },
+        },
+      });
+
+      const expected =
+        headerContent +
+        'export declare const opacity = {\n  "disabled": "--cnvs-base-opacity-300"\n} as const;' +
+        '\n\n';
+
+      expect(result).toBe(expected);
+    });
+  });
+
   describe('merge/refs', () => {
     it('should return correct file structure for es6', () => {
       const result = formats['merge/refs']({