@bikdotai/bik-component-library 0.0.725 → 0.0.726-beta.0

package/dist/esm/components/feature-announcements/hooks/useFeatureAnnouncements.js

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{useState as t,useCallback as r,useEffect as o}from"react";import{ANIMATION_TIMING as i}from"../constants/animations.js";import{QUERY_PARAMS as a,LOCAL_STORAGE_KEYS as n}from"../constants/localStorageKeys.js";const l=l=>{let{fetchVisibleFeatures:d,getStoreFeatureProgress:u,fetchFeatureById:s,markFeatureAsViewedForStore:c,isFeatureApplicableToCurrentPage:f,module:p,router:g}=l;var v;const y=(()=>{const[e,r]=t(null);return o((()=>{if("undefined"!=typeof window){let e=null;try{if(e=localStorage.getItem(n.STORE_ID)||localStorage.getItem(n.BIK_STORE_ID)||localStorage.getItem(n.CURRENT_STORE)||localStorage.getItem(n.STORE),!e){const t=localStorage.getItem(n.CURRENT_USER);t&&(e=JSON.parse(t).storeId)}e||(e=new URLSearchParams(window.location.search).get(n.QUERY_PARAM))}catch(e){}r(e)}}),[]),e})(),[m,D]=t([]),[U,w]=t([]),[h,R]=t([]),[I,S]=t(!1),[T,x]=t(null),E=r((()=>e(void 0,void 0,void 0,(function*(){if(y){S(!0),x(null);try{const[e,t]=yield d(p);if(e||!t)return void x("Failed to fetch features");const[r,o]=yield u(y),a=new Date,n="undefined"!=typeof window?window.location.pathname:"",l=e=>{if(!e.expirationDate)return!0;let t;return"object"==typeof e.expirationDate&&null!==e.expirationDate&&("seconds"in e.expirationDate||"nanoseconds"in e.expirationDate)?t=new Date(1e3*e.expirationDate.seconds):"string"==typeof e.expirationDate?t=new Date(e.expirationDate):e.expirationDate instanceof Date&&(t=e.expirationDate),!(!t||isNaN(t.getTime()))&&a<t},s=e=>{if("Major"===e.featureUpdateType){let t=[];return Array.isArray(e.pageUrls)?t=e.pageUrls:"object"==typeof e.pageUrls&&null!==e.pageUrls&&"length"in e.pageUrls&&(t=Array.from(e.pageUrls)),t.some((e=>{if(e===n)return!0;const t=e.replace(/\[([^\]]+)\]/g,"[^/]+").replace(/\//g,"\\/");return new RegExp(`^${t}$`).test(n)}))}return!0},c=t.filter((e=>{var t;const r=(null===(t=null==o?void 0:o.viewedFeatures)||void 0===t?void 0:t[e.id])||!1,i=e.archived||!1,a=f(e),n=l(e),d=s(e);return!r&&!i&&a&&n&&d})),g=c.filter((e=>"Major"===e.featureUpdateType)),v=c.filter((e=>"Minor"===e.featureUpdateType));D(c),w(g),setTimeout((()=>{R(v)}),i.MINOR_POPUP_DELAY)}catch(e){x("An unexpected error occurred")}finally{S(!1)}}}))),[y,d,u,f,p]),F=r((t=>e(void 0,void 0,void 0,(function*(){S(!0),x(null);try{const[e,r]=yield s(t);if(e||!r)return void x("Failed to fetch feature by ID");"Major"===r.featureUpdateType?w([r]):R([r]),D([r])}catch(e){x("An unexpected error occurred while fetching by ID")}finally{S(!1)}}))),[s]),A=r((t=>e(void 0,void 0,void 0,(function*(){if(!y)return;const[e]=yield c(y,t);D((e=>e.filter((e=>e.id!==t)))),w((e=>e.filter((e=>e.id!==t)))),R((e=>e.filter((e=>e.id!==t))))}))),[y,c]);return o((()=>{var e;const t=null===(e=null==g?void 0:g.query)||void 0===e?void 0:e[a.FEATURE_ID];t&&g?F(t):E()}),[null==g?void 0:g.pathname,null===(v=null==g?void 0:g.query)||void 0===v?void 0:v[a.FEATURE_ID],y,E,F,g]),{features:m,majorUpdateFeatures:U,minorUpdateFeatures:h,isLoading:I,error:T,markFeatureAsViewed:A,refetch:E}};export{l as useFeatureAnnouncements};

package/dist/esm/components/feature-announcements/index.d.ts

@@ -0,0 +1,7 @@
+export { default as FeatureAnnouncementProvider } from './FeatureAnnouncementProvider';
+export { default as MajorUpdatePopup } from './MajorUpdatePopup';
+export { default as MinorUpdatePopup } from './MinorUpdatePopup';
+export { VideoModal } from './VideoModal';
+export { useFeatureAnnouncements } from './hooks/useFeatureAnnouncements';
+export * from './types';
+export { TEXT, ANIMATION_TIMING, POPUP_DIMENSIONS } from './constants';

package/dist/esm/components/feature-announcements/styles/index.d.ts

@@ -0,0 +1,4 @@
+export * from './majorPopup.styles';
+export * from './minorPopup.styles';
+export * from './videoModal.styles';
+export * from './joyride.styles';

package/dist/esm/components/feature-announcements/styles/joyride.styles.d.ts

@@ -0,0 +1,125 @@
+export declare const majorStepStyles: {
+    tooltip: {
+        padding: number;
+        backgroundColor: string;
+        borderRadius: string;
+        border: string;
+        filter: string;
+        boxShadow: string;
+    };
+    tooltipContent: {
+        padding: number;
+    };
+    buttonNext: {
+        display: string;
+    };
+    buttonBack: {
+        display: string;
+    };
+    buttonClose: {
+        display: string;
+    };
+    buttonSkip: {
+        display: string;
+    };
+};
+export declare const minorStepStyles: {
+    tooltip: {
+        padding: number;
+        backgroundColor: string;
+        borderRadius: "4px";
+        border: string;
+        filter: string;
+        boxShadow: string;
+    };
+    tooltipContent: {
+        padding: number;
+    };
+    buttonNext: {
+        display: string;
+    };
+    buttonBack: {
+        display: string;
+    };
+    buttonClose: {
+        display: string;
+    };
+    buttonSkip: {
+        display: string;
+    };
+};
+export declare const getMajorJoyrideStyles: (isClosing: boolean) => {
+    options: {
+        arrowColor: string;
+        backgroundColor: string;
+        overlayColor: string;
+        primaryColor: string;
+        textColor: string;
+        zIndex: 10000;
+    };
+    tooltip: {
+        padding: number;
+        backgroundColor: string;
+        borderRadius: string;
+        border: string;
+        filter: string;
+        boxShadow: string;
+        position: "fixed";
+        top: string;
+        left: string;
+        transform: string;
+    };
+    tooltipContent: {
+        padding: number;
+    };
+    buttonNext: {
+        display: string;
+    };
+    buttonBack: {
+        display: string;
+    };
+    buttonClose: {
+        display: string;
+    };
+    buttonSkip: {
+        display: string;
+    };
+};
+export declare const getMinorJoyrideStyles: (isClosing: boolean) => {
+    options: {
+        arrowColor: string;
+        backgroundColor: string;
+        overlayColor: string;
+        primaryColor: string;
+        textColor: string;
+        zIndex: 10000;
+    };
+    spotlight: {
+        boxShadow: string;
+        borderRadius: "8px";
+    };
+    tooltip: {
+        padding: number;
+        backgroundColor: string;
+        borderRadius: "4px";
+        border: string;
+        filter: string;
+        boxShadow: string;
+        maxWidth: string;
+    };
+    tooltipContent: {
+        padding: number;
+    };
+    buttonNext: {
+        display: string;
+    };
+    buttonBack: {
+        display: string;
+    };
+    buttonClose: {
+        display: string;
+    };
+    buttonSkip: {
+        display: string;
+    };
+};

package/dist/esm/components/feature-announcements/styles/majorPopup.styles.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+export declare const getMajorPopupStyles: (startAnimation: boolean, transform: string) => {
+    container: CSSProperties;
+    skipButton: {
+        base: CSSProperties;
+        hover: CSSProperties;
+    };
+    imageContainer: CSSProperties;
+    image: CSSProperties;
+    imagePlaceholder: CSSProperties;
+    contentContainer: CSSProperties;
+    title: CSSProperties;
+    content: CSSProperties;
+    exploreButton: {
+        base: CSSProperties;
+        hover: CSSProperties;
+    };
+    navigationContainer: CSSProperties;
+    navigationButton: (disabled: boolean) => {
+        base: CSSProperties;
+        hover: CSSProperties;
+    };
+};

package/dist/esm/components/feature-announcements/styles/majorPopup.styles.js

@@ -0,0 +1 @@
+import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{POPUP_DIMENSIONS as n,BORDER_RADIUS as i,SPACING as o}from"../constants/dimensions.js";import{Z_INDEX as a}from"../constants/zIndex.js";const r=(r,l)=>({container:{width:`${n.MAJOR.width}px`,height:`${n.MAJOR.height}px`,display:"flex",backgroundColor:t.grayscale[900],borderRadius:i.POPUP,overflow:"hidden",position:"relative",transform:r?l:"scale(1)",opacity:r?0:1,transition:e},skipButton:{base:{position:"absolute",top:o.MAJOR.skipButtonTop,right:o.MAJOR.skipButtonRight,background:"transparent",border:"none",color:t.grayscale[400],fontSize:"14px",fontWeight:"500",cursor:"pointer",zIndex:a.SKIP_BUTTON,transition:"all 0.2s"},hover:{backgroundColor:t.grayscale[100],color:t.grayscale[700]}},imageContainer:{backgroundColor:t.grayscale[900],width:`${n.MAJOR.imageWidth}px`,height:`${n.MAJOR.imageHeight}px`,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",padding:o.MAJOR.imagePadding},image:{width:`${n.MAJOR.imageInnerWidth}px`,height:`${n.MAJOR.imageInnerHeight}px`,objectFit:"cover"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:`${n.MAJOR.imagePlaceholderWidth}px`,height:`${n.MAJOR.imagePlaceholderHeight}px`,display:"flex",alignItems:"center",justifyContent:"center"},contentContainer:{flex:1,display:"flex",margin:o.MAJOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:o.MAJOR.titlePadding,color:t.grayscale.white,lineHeight:"1.25",textAlign:"left"},content:{fontSize:"14px",lineHeight:"1.5",color:"rgba(255, 255, 255, 0.8)",textAlign:"left"},exploreButton:{base:{backgroundColor:"transparent",border:`1px solid ${t.warning[500]}`,color:t.warning[500],borderRadius:i.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center",marginTop:o.MAJOR.buttonMarginTop},hover:{backgroundColor:"rgba(254, 192, 45, 0.1)"}},navigationContainer:{position:"absolute",bottom:o.MAJOR.navigationBottom,right:o.MAJOR.navigationRight,display:"flex",gap:o.MAJOR.navigationGap,alignItems:"center"},navigationButton:e=>({base:{width:"24px",height:"24px",backgroundColor:"transparent",border:"none",color:e?t.grayscale[700]:t.grayscale.white,fontSize:"20px",cursor:e?"not-allowed":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s"},hover:{color:t.warning[500]}})});export{r as getMajorPopupStyles};

package/dist/esm/components/feature-announcements/styles/minorPopup.styles.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export declare const getMinorPopupStyles: (startAnimation: boolean, transform: string) => {
+    container: CSSProperties;
+    imageContainer: CSSProperties;
+    imageWrapper: CSSProperties;
+    image: CSSProperties;
+    badge: CSSProperties;
+    badgeText: CSSProperties;
+    imagePlaceholder: CSSProperties;
+    contentContainer: CSSProperties;
+    title: CSSProperties;
+    content: CSSProperties;
+    actionsContainer: CSSProperties;
+    understoodText: CSSProperties;
+    exploreButton: CSSProperties;
+};

package/dist/esm/components/feature-announcements/styles/minorPopup.styles.js

@@ -0,0 +1 @@
+import{BASE_COLORS as t}from"../../../constants/Theme.js";import{POPUP_TRANSITION as e}from"../constants/animations.js";import{POPUP_DIMENSIONS as i,BORDER_RADIUS as o,SPACING as n}from"../constants/dimensions.js";import{Z_INDEX as a}from"../constants/zIndex.js";const r=(r,s)=>({container:{width:`${i.MINOR.width}px`,height:`${i.MINOR.height}px`,display:"flex",backgroundColor:t.grayscale.white,borderRadius:o.POPUP,overflow:"hidden",position:"relative",boxShadow:"0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",transform:r?s:"scale(1)",opacity:r?0:1,transition:e},imageContainer:{backgroundColor:t.grayscale[50],borderRadius:o.IMAGE,position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:n.MINOR.imageMargin,width:`${i.MINOR.imageWidth}px`,minWidth:`${i.MINOR.imageWidth}px`,maxWidth:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`},imageWrapper:{position:"relative",width:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`},image:{width:`${i.MINOR.imageWidth}px`,height:`${i.MINOR.imageHeight}px`,objectFit:"cover",borderRadius:o.IMAGE,display:"block"},badge:{position:"absolute",top:"0px",left:"0px",right:"0px",height:`${i.MINOR.badgeHeight}px`,backgroundColor:"rgba(0, 0, 0, 0.26)",borderRadius:`${o.IMAGE} ${o.IMAGE} ${o.IMAGE} ${o.IMAGE}`,display:"flex",alignItems:"center",justifyContent:"center",zIndex:a.IMAGE_BADGE},badgeText:{color:t.grayscale.white,fontWeight:"600",fontSize:"14px"},imagePlaceholder:{color:t.grayscale[500],fontSize:"14px",textAlign:"center",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:t.grayscale[100],borderRadius:o.IMAGE},contentContainer:{flex:1,display:"flex",margin:n.MINOR.contentMargin,flexDirection:"column",justifyContent:"space-between",background:"transparent"},title:{fontSize:"16px",fontWeight:"600",padding:"0 0 0 0",color:t.grayscale[900],lineHeight:"1.25",textAlign:"left"},content:{fontSize:"12px",fontWeight:"400",lineHeight:"1.2",color:t.grayscale[700],textAlign:"left",maxHeight:"48px",overflow:"hidden",display:"-webkit-box",WebkitLineClamp:3,WebkitBoxOrient:"vertical"},actionsContainer:{position:"absolute",bottom:n.MINOR.actionsBottom,right:n.MINOR.actionsRight,display:"flex",gap:n.MINOR.actionsGap,alignItems:"center"},understoodText:{color:t.brand[800],fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s"},exploreButton:{backgroundColor:t.brand[800],border:"none",color:t.grayscale.white,borderRadius:o.BUTTON,fontSize:"14px",fontWeight:"600",cursor:"pointer",width:"154px",height:"32px",transition:"all 0.2s",textAlign:"center",display:"flex",alignItems:"center",justifyContent:"center"}});export{r as getMinorPopupStyles};

package/dist/esm/components/feature-announcements/styles/videoModal.styles.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+export declare const videoModalStyles: {
+    backdrop: CSSProperties;
+    container: CSSProperties;
+    closeButton: {
+        base: CSSProperties;
+        hover: CSSProperties;
+    };
+    videoWrapper: CSSProperties;
+    iframe: CSSProperties;
+    video: CSSProperties;
+    noVideoMessage: CSSProperties;
+};

package/dist/esm/components/feature-announcements/styles/videoModal.styles.js

@@ -0,0 +1 @@
+import"../constants/animations.js";import{BORDER_RADIUS as o}from"../constants/dimensions.js";import{Z_INDEX as t}from"../constants/zIndex.js";const e={backdrop:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.9)",zIndex:t.VIDEO_MODAL,display:"flex",justifyContent:"center",alignItems:"center",padding:"20px"},container:{position:"relative",width:"90vw",height:"90vh",maxWidth:"1200px",maxHeight:"800px",backgroundColor:"black",borderRadius:o.VIDEO_MODAL,overflow:"hidden",boxShadow:"0 25px 50px rgba(0, 0, 0, 0.8)"},closeButton:{base:{position:"absolute",top:"20px",right:"20px",background:"rgba(0, 0, 0, 0.7)",border:"none",color:"white",fontSize:"24px",width:"40px",height:"40px",borderRadius:o.CLOSE_BUTTON,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",zIndex:t.CLOSE_BUTTON,transition:"background-color 0.2s"},hover:{backgroundColor:"rgba(0, 0, 0, 0.9)"}},videoWrapper:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center"},iframe:{borderRadius:o.VIDEO_MODAL},video:{width:"100%",height:"100%",objectFit:"contain",borderRadius:o.VIDEO_MODAL},noVideoMessage:{color:"white",fontSize:"18px",textAlign:"center"}};export{e as videoModalStyles};

package/dist/esm/components/feature-announcements/types/feature.types.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Firestore Timestamp type
+ */
+export interface FirestoreTimestamp {
+    seconds: number;
+    nanoseconds?: number;
+}
+/**
+ * Feature announcement data model
+ */
+export interface FeatureAnnouncement {
+    id: string;
+    title: string;
+    body: string;
+    content: string;
+    buttonText: string;
+    displayImage: string;
+    featureTag: string;
+    featureUpdateType: 'Major' | 'Minor';
+    image: string;
+    module: string[];
+    pageUrls: string[];
+    productVideo: string;
+    redirectUrl: string;
+    updates: string;
+    visibility: boolean;
+    archived?: boolean;
+    createdAt: FirestoreTimestamp;
+    expirationDate?: FirestoreTimestamp | string | Date;
+}
+/**
+ * Store feature progress tracking
+ */
+export interface StoreFeatureProgress {
+    storeId: string;
+    viewedFeatures: Record<string, boolean>;
+}
+/**
+ * Feature update types
+ */
+export type FeatureUpdateType = 'Major' | 'Minor';

package/dist/esm/components/feature-announcements/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './feature.types';
+export * from './props.types';
+export * from './repository.types';
+export * from './router.types';

package/dist/esm/components/feature-announcements/types/props.types.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FeatureAnnouncement } from './feature.types';
+import { FeatureAnnouncementRepository } from './repository.types';
+import { RouterProps } from './router.types';
+/**
+ * Base popup component props
+ */
+export interface PopupBaseProps {
+    feature: FeatureAnnouncement;
+    currentIndex: number;
+    totalFeatures: number;
+    onSkip: () => void;
+    onExplore: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    setIsClosing?: (isClosing: boolean) => void;
+}
+/**
+ * Major update popup props
+ */
+export interface MajorUpdatePopupProps extends PopupBaseProps {
+}
+/**
+ * Minor update popup props
+ */
+export interface MinorUpdatePopupProps extends PopupBaseProps {
+}
+/**
+ * Video modal props
+ */
+export interface VideoModalProps {
+    isOpen: boolean;
+    videoUrl: string;
+    onClose: () => void;
+}
+/**
+ * Feature announcement provider props
+ */
+export interface FeatureAnnouncementProviderProps extends FeatureAnnouncementRepository {
+    children: React.ReactNode;
+    module?: string;
+    router?: RouterProps;
+}

package/dist/esm/components/feature-announcements/types/repository.types.d.ts

@@ -0,0 +1,11 @@
+import { FeatureAnnouncement, StoreFeatureProgress } from './feature.types';
+/**
+ * Repository function types for dependency injection
+ */
+export interface FeatureAnnouncementRepository {
+    fetchVisibleFeatures: (module?: string) => Promise<[Error | null, FeatureAnnouncement[] | null]>;
+    getStoreFeatureProgress: (storeId: string) => Promise<[Error | null, StoreFeatureProgress | null]>;
+    fetchFeatureById: (featureId: string) => Promise<[Error | null, FeatureAnnouncement | null]>;
+    markFeatureAsViewedForStore: (storeId: string, featureId: string) => Promise<[Error | null]>;
+    isFeatureApplicableToCurrentPage: (feature: FeatureAnnouncement) => boolean;
+}

package/dist/esm/components/feature-announcements/types/router.types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Router properties
+ */
+export interface RouterProps {
+    pathname: string;
+    query: Record<string, string | string[] | undefined>;
+}

package/dist/esm/components/feature-announcements/useFeatureAnnouncements.d.ts

@@ -0,0 +1,13 @@
+import { FeatureAnnouncement, FeatureAnnouncementRepository, RouterProps } from './types';
+export declare const useFeatureAnnouncements: ({ fetchVisibleFeatures, getStoreFeatureProgress, fetchFeatureById, markFeatureAsViewedForStore, isFeatureApplicableToCurrentPage, module, router, }: FeatureAnnouncementRepository & {
+    module?: string | undefined;
+    router?: RouterProps | undefined;
+}) => {
+    features: FeatureAnnouncement[];
+    majorUpdateFeatures: FeatureAnnouncement[];
+    minorUpdateFeatures: FeatureAnnouncement[];
+    isLoading: boolean;
+    error: string | null;
+    markFeatureAsViewed: (featureId: string) => Promise<void>;
+    refetch: () => Promise<void>;
+};

package/dist/esm/components/feature-announcements/utils/animationHelpers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Calculate transform for closing animation
+ * @param popupElement - Popup element reference
+ * @param targetElement - Target element to animate towards
+ * @returns Transform CSS string
+ */
+export declare const calculateCloseTransform: (popupElement: HTMLElement, targetElement: Element) => string;
+/**
+ * Hide Joyride arrow element
+ * @param popupRef - Reference to popup element
+ */
+export declare const hideJoyrideArrow: (popupRef: HTMLElement | null) => void;
+/**
+ * Execute callback after animation completes
+ * @param callback - Function to execute
+ * @param delay - Optional delay override
+ */
+export declare const executeAfterAnimation: (callback: () => void, delay?: number) => void;

package/dist/esm/components/feature-announcements/utils/animationHelpers.js

@@ -0,0 +1 @@
+import{ANIMATION_TIMING as t}from"../constants/animations.js";const e=(t,e)=>{const i=t.getBoundingClientRect(),o=e.getBoundingClientRect();return`translate(${o.left+o.width/2-(i.left+i.width/2)}px, ${o.top+o.height/2-(i.top+i.height/2)}px) scale(0)`},i=t=>{if(!t)return;const e=t.closest('[class*="react-joyride__tooltip"]');if(!e)return;const i=e.querySelector('[class*="react-joyride__arrow"]');i&&(i.style.display="none",i.style.visibility="hidden",i.style.opacity="0")},o=function(e){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.CLOSE_DURATION;setTimeout(e,i)};export{e as calculateCloseTransform,o as executeAfterAnimation,i as hideJoyrideArrow};

package/dist/esm/components/feature-announcements/utils/elementHelpers.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Find What's New button using multiple strategies
+ * @returns Element or null
+ */
+export declare const findWhatsNewButton: () => Element | null;
+/**
+ * Find target element for minor update
+ * @param featureTag - Feature tag selector
+ * @returns Element or null
+ */
+export declare const findFeatureTagElement: (featureTag: string) => Element | null;
+/**
+ * Normalize selector string
+ * @param selector - Selector string
+ * @returns Normalized selector
+ */
+export declare const normalizeSelector: (selector: string) => string;
+/**
+ * Check if element is fully visible in viewport
+ * @param element - Element to check
+ * @returns True if element is fully visible
+ */
+export declare const isElementInViewport: (element: Element) => boolean;
+/**
+ * Scroll to element smoothly with offset
+ * @param element - Element to scroll to
+ * @param offset - Offset from top (default 120px for popup space)
+ * @returns Promise that resolves when scroll completes
+ */
+export declare const scrollToElementSmooth: (element: Element, offset?: number) => Promise<void>;

package/dist/esm/components/feature-announcements/utils/elementHelpers.js

@@ -0,0 +1 @@
+import"../constants/animations.js";import{SELECTORS as t}from"../constants/selectors.js";const e=()=>{let e=document.querySelector(t.WHATS_NEW_BUTTON);if(e)return e;if(e=document.querySelector(t.MAIN_ICON_CLASS),e)return e;const n=document.querySelector(t.SVG_VIEWBOX);if(n){if(n.querySelector(t.CLIPPATH_PATTERN))return n.closest(t.WHATS_NEW_BUTTON)||n.parentElement}return null},n=t=>{const e=t.startsWith("#")||t.startsWith(".")||t.startsWith("[")?t:`#${t}`;return document.querySelector(e)},o=t=>t.startsWith("#")||t.startsWith(".")||t.startsWith("[")?t:`#${t}`,r=t=>{const e=t.getBoundingClientRect(),n=window.innerHeight||document.documentElement.clientHeight,o=window.innerWidth||document.documentElement.clientWidth,r=e.top>=120&&e.bottom<=n,i=e.left>=0&&e.right<=o;return r&&i},i=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:120;return new Promise((n=>{if(r(t))return void n();const o=t.getBoundingClientRect().top+window.pageYOffset-e;let i;window.scrollTo({top:o,behavior:"smooth"});const s=()=>{clearTimeout(i),i=setTimeout((()=>{window.removeEventListener("scroll",s),setTimeout((()=>n()),100)}),100)};window.addEventListener("scroll",s,{passive:!0}),setTimeout((()=>{window.removeEventListener("scroll",s),n()}),1e3)}))};export{n as findFeatureTagElement,e as findWhatsNewButton,r as isElementInViewport,o as normalizeSelector,i as scrollToElementSmooth};

package/dist/esm/components/feature-announcements/utils/htmlHelpers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Decode HTML entities in text
+ * @param text - Text containing HTML entities
+ * @returns Decoded text
+ */
+export declare const decodeHTMLEntities: (text: string) => string;
+/**
+ * Format video URL for embedding
+ * @param videoUrl - Original video URL
+ * @returns Formatted video URL
+ */
+export declare const formatVideoUrl: (videoUrl: string) => string;
+/**
+ * Check if URL is a YouTube video
+ * @param videoUrl - Video URL to check
+ * @returns True if YouTube video
+ */
+export declare const isYouTubeVideo: (videoUrl: string) => boolean;

package/dist/esm/components/feature-announcements/utils/htmlHelpers.js

@@ -0,0 +1 @@
+const e=e=>{if(!e)return"";const t=document.createElement("textarea");return t.innerHTML=e,t.value},t=e=>e.replace("watch?v=","embed/").replace("youtu.be/","youtube.com/embed/"),u=e=>e.includes("youtube.com")||e.includes("youtu.be");export{e as decodeHTMLEntities,t as formatVideoUrl,u as isYouTubeVideo};

package/dist/esm/components/feature-announcements/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './htmlHelpers';
+export * from './animationHelpers';
+export * from './elementHelpers';

package/dist/esm/components/whats-new/WhatsNew.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { WhatsNewContent } from './WhatsNew.types';
+interface WhatsNewProps {
+    title?: string;
+    tooltip?: string;
+    searchPlaceholder?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    noResultsText?: string;
+    width?: string;
+    onContentClick?: (content: WhatsNewContent) => void;
+    renderCustomContent?: (content: WhatsNewContent) => React.ReactNode;
+    buttonTestId?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    customIcon?: React.ComponentType<{
+        width?: number;
+        height?: number;
+        color?: string;
+    }>;
+}
+export declare const WhatsNew: React.FC<WhatsNewProps>;
+export {};

package/dist/esm/components/whats-new/WhatsNew.js

@@ -0,0 +1 @@
+import{j as t}from"../../node_modules/react/jsx-runtime.js";import{useState as e}from"react";import{WhatsNewButton as o}from"./WhatsNewButton.js";import{WhatsNewPanel as n}from"./WhatsNewPanel.js";import{useWhatsNewContext as s}from"./WhatsNewProvider.js";const i=i=>{let{title:r="What's new",tooltip:a="What's new",searchPlaceholder:c="Search posts",emptyStateTitle:h="Nothing new!",emptyStateDescription:m="There are no new updates or features at the moment. Check back soon!",noResultsText:l="Sorry, no results found.",width:d="480px",onContentClick:p,renderCustomContent:u,buttonTestId:C="whats-new-button",iconWidth:w=32,iconHeight:j=32,customIcon:x}=i;const[f,g]=e(!1),{whatsNewContent:W,isLoading:S,newContentCount:T}=s();return t.jsxs(t.Fragment,{children:[t.jsx(o,{onClick:()=>g(!0),newContentCount:T,isOpen:f,isLoading:S,tooltip:a,testId:C,iconWidth:w,iconHeight:j,customIcon:x}),t.jsx(n,{isOpen:f,onClose:()=>g(!1),content:W,isLoading:S,title:r,searchPlaceholder:c,emptyStateTitle:h,emptyStateDescription:m,noResultsText:l,width:d,onContentClick:t=>{p&&p(t)},renderCustomContent:u})]})};export{i as WhatsNew};

package/dist/esm/components/whats-new/WhatsNew.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const WhatsNewIconContainer: import("styled-components").StyledComponent<"div", any, {
+    count?: number | undefined;
+}, never>;
+export declare const WhatsNewWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BackgroundImageContainer: import("styled-components").StyledComponent<"div", any, {
+    imageUrl: string;
+    height?: string | undefined;
+    width?: string | undefined;
+}, never>;

package/dist/esm/components/whats-new/WhatsNew.styles.js

@@ -0,0 +1,185 @@
+import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const i=e.div`
+	cursor: pointer;
+	position: relative;
+
+	.main-icon-class {
+		padding: 6px;
+		border-radius: 32px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: background-color 0.2s ease;
+	}
+
+	.icon-active {
+		background: ${t.background.brandLight};
+	}
+
+	.main-icon-class:hover {
+		background: ${t.background.base};
+	}
+
+	.notification--count {
+		box-sizing: border-box;
+		position: absolute;
+		right: 6px;
+		top: 4px;
+		border-radius: 50%;
+		width: 14px;
+		height: 14px;
+		background: ${t.background.negative.vibrant};
+		border: 1.25px solid ${t.surface.standard};
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.count--text {
+		font-size: 8px;
+		line-height: 7.2px;
+		font-weight: 400;
+		color: ${t.surface.standard};
+	}
+`,n=e.div`
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	max-height: calc(100vh - 60px);
+
+	&::-webkit-scrollbar {
+		display: block;
+		width: 6px;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background: ${t.content.inactive};
+		border-radius: 3px;
+		min-height: 30px;
+	}
+
+	.icon--wrapper {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 64px;
+		height: 64px;
+		border-radius: 50%;
+		background: ${t.background.base};
+		margin-bottom: 16px;
+	}
+
+	.no--data--found {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 300px;
+		text-align: center;
+		padding: 24px;
+	}
+
+	.text--align {
+		text-align: center;
+	}
+
+	.scroller {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding: 16px 0;
+	}
+
+	.full--width {
+		width: 100%;
+	}
+
+	.flex {
+		display: flex;
+	}
+
+	.flex--row {
+		flex-direction: row;
+	}
+
+	.flex--column {
+		flex-direction: column;
+	}
+
+	.mt-8 {
+		margin-top: 8px;
+	}
+
+	.mt-20 {
+		margin-top: 20px;
+	}
+
+	.mt--8 {
+		margin-top: 8px;
+	}
+
+	.mt--12 {
+		margin-top: 12px;
+	}
+
+	.mb-mt-8 {
+		margin-bottom: 8px;
+		margin-top: 8px;
+	}
+
+	.padding--16 {
+		padding: 16px;
+	}
+
+	.card--desc {
+		max-height: 200px;
+		overflow-y: auto;
+		font-size: 12px;
+		color: ${t.content.secondary};
+
+		p {
+			margin-bottom: 0px;
+		}
+	}
+
+	.created--at {
+		align-items: center;
+		gap: 4px;
+	}
+
+	.new--content--tag {
+		padding: 2px 6px;
+		gap: 4px;
+		border-radius: 14px;
+		background: ${t.background.warning.vibrant};
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 8px;
+	}
+`,r=e.div`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+`,o=e.div`
+	background: ${t.surface.standard};
+	border-radius: 8px;
+	border: 1px solid ${t.stroke.primary};
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	transition: all 0.2s ease;
+
+	&:hover {
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	}
+`,a=e.div`
+	background-image: url(${e=>e.imageUrl});
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	height: ${e=>e.height||"200px"};
+	width: ${e=>e.width||"100%"};
+	border-radius: 4px;
+`;export{a as BackgroundImageContainer,o as MainCardContainer,r as MainContainer,i as WhatsNewIconContainer,n as WhatsNewWrapper};