@ably/ui 15.4.1-dev.a5e2f45d → 15.5.0-dev.49d8b1c

package/core/Header/HeaderLinks.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";const testSessionState={signedIn:false,account:{links:{dashboard:{href:"/dashboard"}}}};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton,className})=>{const signedIn=sessionState.signedIn;const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";return React.createElement("nav",{className:cn("flex md:flex-1 md:items-center md:justify-end flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 p-12 md:p-0 gap-12",className)},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 mt-8 md:mt-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn&&sessionState.account?React.createElement(LinkButton,{href:sessionState.account.links?.dashboard.href,variant:"secondary",className:"md:ui-button-secondary-xs","aria-label":"Access your dashboard"},"Dashboard"):React.createElement("div",{className:"flex gap-12"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"Start free")))};
+import React from"react";import Icon from"../Icon";import LinkButton from"../LinkButton";import cn from"../utils/cn";const testSessionState={signedIn:false,account:{links:{dashboard:{href:"/dashboard"}}}};export const HeaderLinks=({sessionState=testSessionState,headerLinks,searchButtonVisibility,searchButton})=>{const signedIn=sessionState.signedIn;const headerLinkClasses="ui-text-menu2 md:ui-text-menu3 !font-bold py-16 text-neutral-1300 dark:text-neutral-000 md:text-neutral-1000 dark:md:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1300 dark:active:text-neutral-000 transition-colors";return React.createElement("div",{className:"flex md:items-center flex-col md:flex-row border-t-[1px] border-neutral-300 md:border-t-0 p-12 gap-12"},headerLinks?.map(({href,label,external})=>React.createElement("a",{key:href,className:cn(headerLinkClasses,"flex items-center gap-4 mt-8 md:mt-0"),href:href,target:external?"_blank":undefined,rel:external?"noreferrer noopener":undefined},label,external&&React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline"}))),searchButtonVisibility!=="mobile"?searchButton:null,signedIn&&sessionState.account?React.createElement(LinkButton,{href:sessionState.account.links?.dashboard.href,variant:"secondary",className:"md:ui-button-secondary-xs","aria-label":"Access your dashboard"},"Dashboard"):React.createElement("div",{className:"flex gap-12"},React.createElement(LinkButton,{href:"/login",variant:"secondary",className:"flex-1 md:flex-none md:ui-button-secondary-xs"},"Login"),React.createElement(LinkButton,{href:"/sign-up",variant:"primary",className:"flex-1 md:flex-none md:ui-button-primary-xs"},"Start free")))};

package/core/Header.js

@@ -1 +1 @@
-import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const Header=({searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 transition-colors px-24 md:px-64",scrollpointClasses),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:"flex items-center h-full"},React.createElement("nav",{className:"flex flex-1 h-full items-center"},React.createElement(Logo,{href:logoHref,theme:"light",additionalLinkAttrs:{className:"flex dark:hidden h-full focus-base rounded mr-32"}}),React.createElement(Logo,{href:logoHref,theme:"dark",additionalLinkAttrs:{className:"hidden dark:flex h-full focus-base rounded mr-32"}}),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:FLEXIBLE_DESKTOP_CLASSES,headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden left-0 right-0 mx-12 bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
+import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const Header=({searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed top-0 left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 transition-colors px-24 md:px-64",scrollpointClasses),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:"flex items-center h-full"},React.createElement(Logo,{href:logoHref,theme:"light",additionalLinkAttrs:{className:"flex dark:hidden h-full focus-base rounded mr-32"}}),React.createElement(Logo,{href:logoHref,theme:"dark",additionalLinkAttrs:{className:"hidden dark:flex h-full focus-base rounded mr-32"}}),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),React.createElement("div",{className:"hidden md:flex flex-1 items-center h-full"},nav,React.createElement("div",{className:"flex-1 flex justify-center px-16"},searchBar),React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility})))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden left-0 right-0 mx-12 bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;

package/core/insights/index.js

@@ -0,0 +1 @@
+import*as mixpanel from"./mixpanel";import*as posthog from"./posthog";let debugMode=false;export const initInsights=({mixpanelToken,mixpanelAutoCapture,posthogApiKey,posthogApiHost,debug=false})=>{debugMode=!!debug;try{mixpanel.initMixpanel(mixpanelToken,mixpanelAutoCapture,debugMode)}catch(e){if(debugMode){console.error("Failed to initialize Mixpanel",e)}}try{posthog.initPosthog(posthogApiKey,posthogApiHost)}catch(e){if(debugMode){console.error("Failed to initialize Posthog",e)}}};export const enableDebugMode=()=>{debugMode=true;mixpanel.enableDebugMode();posthog.enableDebugMode()};export const disableDebugMode=()=>{debugMode=false;mixpanel.disableDebugMode();posthog.disableDebugMode()};export const identify=({userId,accountId,organisationId,email,name})=>{try{mixpanel.identify(userId,accountId,organisationId,email,name)}catch(e){if(debugMode){console.error("Failed to identify user in Mixpanel",e)}}try{posthog.identify(userId,accountId,organisationId,email,name)}catch(e){if(debugMode){console.error("Failed to identify user in Posthog",e)}}};export const trackPageView=()=>{try{mixpanel.trackPageView()}catch(e){if(debugMode){console.error("Failed to track page view in Mixpanel",e)}}try{posthog.trackPageView()}catch(e){if(debugMode){console.error("Failed to track page view in Posthog",e)}}};export const track=(event,properties)=>{try{mixpanel.track(event,properties)}catch(e){if(debugMode){console.error("Failed to track event in Mixpanel",e)}}try{posthog.track(event,properties)}catch(e){if(debugMode){console.error("Failed to track event in Posthog",e)}}};export const setupObserver=()=>{const getInsightAttributes=element=>{const attributes={};for(const attr of element.attributes){if(attr.name.startsWith("data-insight-")){const key=attr.name.replace("data-insight-","").split("-").map((part,index)=>index===0?part:part.charAt(0).toUpperCase()+part.slice(1)).join("");attributes[key]=attr.value}}return attributes};const findClosestElementWithInsights=element=>{let current=element;while(current&&current!==document.body){const insights=getInsightAttributes(current);if(Object.keys(insights).length>0){return insights}current=current.parentElement}return null};const handleClick=event=>{if(!(event.target instanceof HTMLElement))return;const insights=findClosestElementWithInsights(event.target);if(insights){const{event:eventName,...properties}=insights;track(eventName||"element_clicked",properties)}};document.body.addEventListener("click",handleClick);return()=>{document.body.removeEventListener("click",handleClick)}};

package/core/insights/mixpanel.js

@@ -0,0 +1 @@
+import mixpanel from"mixpanel-browser";export const initMixpanel=(token,autoCapture=false,debug=false)=>{const blockSelectors=["[ph-no-capture]",'[data-sl="mask"]'];if(!token){console.warn("Mixpanel token not provided, skipping initialization");return}mixpanel.init(token,{debug:debug,persistence:"localStorage",autocapture:autoCapture?{block_selectors:blockSelectors}:false,track_pageview:false})};export const enableDebugMode=()=>{mixpanel.set_config({debug:true})};export const disableDebugMode=()=>{mixpanel.set_config({debug:false})};export const identify=(userId,accountId,organisationId,email,name)=>{mixpanel.identify(userId);mixpanel.people.set({"$email":email,"$name":name});mixpanel.people.union({"account_id":[accountId]});if(organisationId){mixpanel.people.set({"organisation_id":[organisationId]})}};export const trackPageView=()=>{mixpanel.track_pageview()};export const track=(event,properties)=>{mixpanel.track(event,properties)};

package/core/insights/posthog.js

@@ -0,0 +1 @@
+import posthog from"posthog-js";export const initPosthog=(apiKey,apiHost)=>{posthog.init(apiKey,{api_host:apiHost,capture_pageview:false})};export const enableDebugMode=()=>{posthog.debug()};export const disableDebugMode=()=>{posthog.debug(false)};export const identify=(userId,accountId,organisationId,email,name)=>{if(userId!==posthog.get_distinct_id()){posthog.identify(userId,{email,name})}posthog.group("account",accountId);if(organisationId){posthog.group("organisation",organisationId)}};export const trackPageView=()=>{posthog.capture("$pageview")};export const track=(event,properties)=>{posthog.capture(event,properties)};

package/core/styles/colors/computed-colors.json

@@ -0,0 +1 @@
+["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]

package/index.d.ts

@@ -514,9 +514,7 @@ export default Footer;
 declare module '@ably/ui/core/Header/HeaderLinks' {
 import React from "react";
 import { HeaderProps } from ".@ably/ui/core/Header";
-export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton"> & {
-    className?: string;
-}>;
+export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLinks" | "searchButtonVisibility" | "searchButton">>;
 //# sourceMappingURL=HeaderLinks.d.ts.map
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.4.1-dev.a5e2f45d",
+  "version": "15.5.0-dev.49d8b1c",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -46,9 +46,11 @@
     "eslint-plugin-storybook": "^0.11.2",
     "heroicons": "^2.2.0",
     "http-server": "14.1.1",
+    "mixpanel-browser": "^2.60.0",
     "msw": "2.7.0",
     "msw-storybook-addon": "^2.0.2",
     "playwright": "^1.49.1",
+    "posthog-js": "^1.217.4",
     "prettier": "^3.2.5",
     "react-syntax-highlighter": "^15.6.1",
     "storybook": "^8.4.7",
@@ -99,6 +101,10 @@
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.5"
   },
+  "peerDependencies": {
+    "mixpanel-browser": "^2.60.0 || <3",
+    "posthog-js": "^1.217.4 || <2"
+  },
   "bugs": {
     "url": "https://github.com/ably/ably-ui/issues"
   },