chore: version and metadata for packages at runtime

.cspell.json

@@ -149,7 +149,8 @@
       "screenreader",
       "screenreaders",
       "showdefaulticon",
-      "spelcheck"
+      "spelcheck",
+      "reactjs"
     ],
     "dictionaries": ["npm", "softwareTerms", "node", "html", "css", "bash", "en-gb", "misc", "la"],
     "ignorePaths": [

README.md

@@ -118,6 +118,52 @@ npm link ../path/to/ic-ui-kit/packages/react
 > [!NOTE]
 > Now you can develop and debug faster with `ic-ui-kit` in `ic-design-system`.
 
+## Accessing the version of ui-kit
+
+When using the component system through:
+
+- [nextjs](./packages/nextjs/README.md)
+- [react](./packages/react/README.md)
+- [web-components](./packages/web-components/README.md)
+- [canary-web-components](./packages/canary-web-components/README.md)
+- [canary-react](./packages/canary-react/README.md)
+- [fonts](./packages/fonts/README.md)
+
+..then the ic-ui-kit project expose the version, build date and unique build hash of packages on the global variable `window`. This metadata is accessed and sealed, which means that window  variables cant be changed during runtime in any web application. Below is all the variables that are available:
+
+```javascript
+    // web components metadata
+    window['IC_UI_KIT_WEB_COMPONENTS_VERSION'];
+    window['IC_UI_KIT_WEB_COMPONENTS_BUILD_DATE'];
+    window['IC_UI_KIT_WEB_COMPONENTS_BUILD_HASH'];
+
+    // canary web components metadata 
+    window['IC_UI_KIT_CANARY_WEB_COMPONENTS_VERSION'];
+    window['IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_DATE'];
+    window['IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_HASH'];
+
+    // fonts metadata
+    window['IC_UI_KIT_FONTS_VERSION'];
+    window['IC_UI_KIT_FONTS_BUILD_DATE'];
+    window['IC_UI_KIT_FONTS_BUILD_HASH'];
+
+    // nextjs metadata
+    window['IC_UI_KIT_NEXTJS_VERSION'];
+    window['IC_UI_KIT_NEXTJS_BUILD_DATE'];
+    window['IC_UI_KIT_NEXTJS_BUILD_HASH'];
+
+    // reactjs metadata
+    window['IC_UI_KIT_REACT_VERSION'];
+    window['IC_UI_KIT_REACT_BUILD_DATE'];
+    window['IC_UI_KIT_REACT_BUILD_HASH'];
+
+    // canary react metadata
+    window['IC_UI_KIT_CANARY_REACT_VERSION'];
+    window['IC_UI_KIT_CANARY_REACT_BUILD_DATE'];
+    window['IC_UI_KIT_CANARY_REACT_BUILD_HASH'];
+```
+
+
 ## Contributing
 
 We have a couple of resources to help you with contributing.

packages/web-components/bootstrap_window.ts

@@ -0,0 +1,52 @@
+import { Env } from "@stencil/core";
+
+export default function() {
+    // web components metadata
+    window['IC_UI_KIT_WEB_COMPONENTS_VERSION'] = Object.freeze(Env.IC_UI_KIT_WEB_COMPONENTS_VERSION);
+    window['IC_UI_KIT_WEB_COMPONENTS_BUILD_DATE'] = Object.freeze(Env.IC_UI_KIT_WEB_COMPONENTS_BUILD_DATE);
+    window['IC_UI_KIT_WEB_COMPONENTS_BUILD_HASH'] = Object.freeze(Env.IC_UI_KIT_WEB_COMPONENTS_BUILD_HASH);
+
+    Object.defineProperty(window, "IC_UI_KIT_WEB_COMPONENTS_VERSION", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_WEB_COMPONENTS_BUILD_DATE", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_WEB_COMPONENTS_BUILD_HASH", { configurable: false, writable: false });
+
+    // canary web components metadata 
+    window['IC_UI_KIT_CANARY_WEB_COMPONENTS_VERSION'] = Object.freeze(Env.IC_UI_KIT_CANARY_WEB_COMPONENTS_VERSION);
+    window['IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_DATE'] = Object.freeze(Env.IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_DATE);
+    window['IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_HASH'] = Object.freeze(Env.IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_HASH);
+    Object.defineProperty(window, "IC_UI_KIT_CANARY_WEB_COMPONENTS_VERSION", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_DATE", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_HASH", { configurable: false, writable: false });
+
+    // fonts metadata
+    window['IC_UI_KIT_FONTS_VERSION'] = Object.freeze(Env.IC_UI_KIT_FONTS_VERSION);
+    window['IC_UI_KIT_FONTS_BUILD_DATE'] = Object.freeze(Env.IC_UI_KIT_FONTS_BUILD_DATE);
+    window['IC_UI_KIT_FONTS_BUILD_HASH'] = Object.freeze(Env.IC_UI_KIT_FONTS_BUILD_HASH);
+    Object.defineProperty(window, "IC_UI_KIT_FONTS_VERSION", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_FONTS_BUILD_DATE", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_FONTS_BUILD_HASH", { configurable: false, writable: false });
+
+    // nextjs metadata
+    window['IC_UI_KIT_NEXTJS_VERSION'] = Object.freeze(Env.IC_UI_KIT_NEXTJS_VERSION);
+    window['IC_UI_KIT_NEXTJS_BUILD_DATE'] = Object.freeze(Env.IC_UI_KIT_NEXTJS_BUILD_DATE);
+    window['IC_UI_KIT_NEXTJS_BUILD_HASH'] = Object.freeze(Env.IC_UI_KIT_NEXTJS_BUILD_HASH);
+    Object.defineProperty(window, "IC_UI_KIT_NEXTJS_VERSION", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_NEXTJS_BUILD_DATE", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_NEXTJS_BUILD_HASH", { configurable: false, writable: false });
+
+    // reactjs metadata
+    window['IC_UI_KIT_REACT_VERSION'] = Object.freeze(Env.IC_UI_KIT_REACT_VERSION);
+    window['IC_UI_KIT_REACT_BUILD_DATE'] = Object.freeze(Env.IC_UI_KIT_REACT_BUILD_DATE);
+    window['IC_UI_KIT_REACT_BUILD_HASH'] = Object.freeze(Env.IC_UI_KIT_REACT_BUILD_HASH);
+    Object.defineProperty(window, "IC_UI_KIT_REACT_VERSION", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_REACT_BUILD_DATE", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_REACT_BUILD_HASH", { configurable: false, writable: false });
+
+    // canary react metadata
+    window['IC_UI_KIT_CANARY_REACT_VERSION'] = Object.freeze(Env.IC_UI_KIT_CANARY_REACT_VERSION);
+    window['IC_UI_KIT_CANARY_REACT_BUILD_DATE'] = Object.freeze(Env.IC_UI_KIT_CANARY_REACT_BUILD_DATE);
+    window['IC_UI_KIT_CANARY_REACT_BUILD_HASH'] = Object.freeze(Env.IC_UI_KIT_CANARY_REACT_BUILD_HASH);
+    Object.defineProperty(window, "IC_UI_KIT_CANARY_REACT_VERSION", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_CANARY_REACT_BUILD_DATE", { configurable: false, writable: false });
+    Object.defineProperty(window, "IC_UI_KIT_CANARY_REACT_BUILD_HASH", { configurable: false, writable: false });
+}

packages/web-components/stencil.config.ts

@@ -10,6 +10,26 @@ interface StencilOverride extends Omit<JsonDocs, "timestamp"> {
   timestamp: string | undefined
 }
 
+const fs = require("fs");
+const path = require("path");
+const crypto = require("node:crypto");
+
+const stencilVersion = JSON.parse(
+  fs.readFileSync(path.join(__dirname, "package.json"))
+).version;
+
+function findVersion(packageName: string) {
+  return JSON.parse(fs.readFileSync(path.join(__dirname, "..", packageName, "package.json"))).version;
+}
+
+function generateDate() {
+  return new Date().toString()
+}
+
+function generateHash() {
+  return crypto.createHash("sha256").update("bacon").digest("hex");
+}
+
 export const config: Config = {
   namespace: "core",
   globalStyle: "src/global/icds.css",
@@ -29,8 +49,8 @@ export const config: Config = {
         {
           src: "global/normalize.css",
           dest: "normalize.css",
-        }
-      ]
+        },
+      ],
     },
     {
       type: "dist-custom-elements",
@@ -47,7 +67,7 @@ export const config: Config = {
       type: "docs-custom",
       generator: (docs: StencilOverride) => {
         docs.timestamp = undefined;
-      }
+      },
     },
     {
       type: "docs-vscode",
@@ -64,22 +84,20 @@ export const config: Config = {
       "\\.svg": "<rootDir>/mocks/svgMock.ts",
     },
     coverageThreshold: {
-      './src/components/*/*.tsx': {
+      "./src/components/*/*.tsx": {
         branches: 80,
         functions: 80,
         lines: 80,
         statements: 80,
       },
-      './src/utils/*.ts': {
+      "./src/utils/*.ts": {
         branches: 80,
         functions: 80,
         lines: 80,
         statements: 80,
-      }
+      },
     },
-    setupFilesAfterEnv: [
-      "./src/testspec.setup.ts"
-    ]
+    setupFilesAfterEnv: ["./src/testspec.setup.ts"],
   },
   plugins: [
     inlineSvg(),
@@ -90,4 +108,37 @@ export const config: Config = {
   extras: {
     experimentalImportInjection: true,
   },
+  env: {
+    // web components metadata
+    IC_UI_KIT_WEB_COMPONENTS_VERSION: Object.freeze(stencilVersion),
+    IC_UI_KIT_WEB_COMPONENTS_BUILD_DATE: Object.freeze(generateDate()),
+    IC_UI_KIT_WEB_COMPONENTS_BUILD_HASH: Object.freeze(generateHash()),
+
+    // canary web components metadata 
+    IC_UI_KIT_CANARY_WEB_COMPONENTS_VERSION: Object.freeze(findVersion("canary-web-components")),
+    IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_DATE: Object.freeze(generateDate()),
+    IC_UI_KIT_CANARY_WEB_COMPONENTS_BUILD_HASH: Object.freeze(generateHash()),
+
+    // fonts metadata
+    IC_UI_KIT_FONTS_VERSION: Object.freeze(findVersion("fonts")),
+    IC_UI_KIT_FONTS_BUILD_DATE: Object.freeze(generateDate()),
+    IC_UI_KIT_FONTS_BUILD_HASH: Object.freeze(generateHash()),
+
+    // nextjs metadata
+    IC_UI_KIT_NEXTJS_VERSION: Object.freeze(findVersion("nextjs")),
+    IC_UI_KIT_NEXTJS_BUILD_DATE: Object.freeze(generateDate()),
+    IC_UI_KIT_NEXTJS_BUILD_HASH: Object.freeze(generateHash()),
+
+    // reactjs metadata
+    IC_UI_KIT_REACT_VERSION: Object.freeze(findVersion("react")),
+    IC_UI_KIT_REACT_BUILD_DATE: Object.freeze(generateDate()),
+    IC_UI_KIT_REACT_BUILD_HASH: Object.freeze(generateHash()),
+
+    // canary react metadata
+    IC_UI_KIT_CANARY_REACT_VERSION: Object.freeze(findVersion("canary-react")),
+    IC_UI_KIT_CANARY_REACT_BUILD_DATE: Object.freeze(generateDate()),
+    IC_UI_KIT_CANARY_REACT_BUILD_HASH: Object.freeze(generateHash()),
+
+  },
+  globalScript: './bootstrap_window.ts'
 };