tycho-components 0.36.7 → 0.36.9

package/dist/common/AppClarity/AppClarity.d.ts

@@ -0,0 +1,16 @@
+declare global {
+    interface Window {
+        clarity?: (...args: unknown[]) => void;
+    }
+}
+/**
+ * Microsoft Clarity loader — mirrors {@link AppAnalytics} (null render, injects
+ * the vendor tag on mount from a Vite env var). Set `VITE_APP_CLARITY_ID`.
+ *
+ * On top of the plain snippet it stitches every session of the logged-in Tycho
+ * user under their stable `uid` (decoded client-side from the `jwt_token_tycho`
+ * cookie) via `clarity('identify', …)`, so cross-module full-page navigations
+ * count as ONE identified user instead of N anonymous ones. The friendly name is
+ * PII — drop the last `identify` argument for a stricter privacy posture.
+ */
+export default function AppClarity(): null;

package/dist/common/AppClarity/AppClarity.js

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+/**
+ * Microsoft Clarity loader — mirrors {@link AppAnalytics} (null render, injects
+ * the vendor tag on mount from a Vite env var). Set `VITE_APP_CLARITY_ID`.
+ *
+ * On top of the plain snippet it stitches every session of the logged-in Tycho
+ * user under their stable `uid` (decoded client-side from the `jwt_token_tycho`
+ * cookie) via `clarity('identify', …)`, so cross-module full-page navigations
+ * count as ONE identified user instead of N anonymous ones. The friendly name is
+ * PII — drop the last `identify` argument for a stricter privacy posture.
+ */
+export default function AppClarity() {
+    const CLARITY_ID = import.meta.env.VITE_APP_CLARITY_ID;
+    useEffect(() => {
+        if (!CLARITY_ID) {
+            console.warn('Microsoft Clarity project ID not set.');
+            return;
+        }
+        // Inject the official Clarity loader (same shape as Clarity's install snippet).
+        const loader = document.createElement('script');
+        loader.innerHTML =
+            `(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};` +
+                `t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;` +
+                `y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)})` +
+                `(window,document,"clarity","script","${CLARITY_ID}");`;
+        document.head.appendChild(loader);
+        // Identify the logged-in Tycho user so sessions stitch under one real id.
+        try {
+            const match = document.cookie.match(/(?:^|;\s*)jwt_token_tycho=([^;]+)/);
+            if (match) {
+                let b64 = match[1].split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+                b64 += '==='.slice((b64.length + 3) % 4);
+                const payload = JSON.parse(decodeURIComponent(atob(b64)
+                    .split('')
+                    .map((ch) => '%' + ('00' + ch.charCodeAt(0).toString(16)).slice(-2))
+                    .join('')));
+                if (payload?.uid) {
+                    window.clarity?.('identify', payload.uid, undefined, undefined, payload.name || undefined);
+                }
+            }
+            window.clarity?.('consent');
+        }
+        catch {
+            /* not logged in / unparseable — track anonymously */
+        }
+    }, [CLARITY_ID]);
+    return null;
+}

package/dist/common/AppClarity/index.d.ts

@@ -0,0 +1,2 @@
+import AppClarity from './AppClarity';
+export default AppClarity;

package/dist/common/AppClarity/index.js

@@ -0,0 +1,2 @@
+import AppClarity from './AppClarity';
+export default AppClarity;

package/dist/common/AppForm/AppFormInfo.js

@@ -30,7 +30,7 @@ function getFieldDisplayContent(field, raw, t) {
             notAvailable: t('label.notavailable'),
         });
     }
-    if (raw) {
+    if (raw != null && raw !== '') {
         return raw;
     }
     return t('label.notavailable');

package/dist/common/index.d.ts

@@ -1,4 +1,5 @@
 export { default as AppAnalytics } from './AppAnalytics';
+export { default as AppClarity } from './AppClarity';
 export { default as AppCard } from './AppCard/AppCard';
 export { default as AppClipboard } from './AppClipboard';
 export { default as AppColorpicker } from './AppColorpicker';

package/dist/common/index.js

@@ -1,4 +1,5 @@
 export { default as AppAnalytics } from './AppAnalytics';
+export { default as AppClarity } from './AppClarity';
 export { default as AppCard } from './AppCard/AppCard';
 export { default as AppClipboard } from './AppClipboard';
 export { default as AppColorpicker } from './AppColorpicker';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.36.7",
+  "version": "0.36.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -82,7 +82,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.10.12",
+    "tycho-storybook": "0.10.13",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -111,7 +111,7 @@
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "tycho-storybook": "^0.10.12",
+    "tycho-storybook": "^0.10.13",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",