@cuemath/leap 3.2.22 → 3.2.23-m

package/dist/features/ui/modals/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport FlexView from '../layout/flex-view';\nimport AppLoader from '../loader/app-loader/app-loader';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { renderAs, element, modalWidth, isDismissable } = modal;\n\n  const sentryCaptureException = useCallback((error: Error) => {\n    captureException(error);\n  }, []);\n\n  const handleStopPropagation = useCallback((e: React.MouseEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  if (renderAs === 'bottom-sheet') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing} onClick={isDismissable ? onClose : () => null}>\n        <Styled.BottomSheetModal $isClosing={isClosing} onClick={handleStopPropagation}>\n          <ErrorBoundary\n            fallback={\n              <FlexView $gap={24}>\n                <Error height=\"100%\" />\n              </FlexView>\n            }\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BottomSheetModal>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <ErrorBoundary\n          fallback={\n            <Styled.ModalLoaderWrapper>\n              <Error height=\"100vh\" />\n            </Styled.ModalLoaderWrapper>\n          }\n          onError={sentryCaptureException}\n        >\n          <Suspense\n            fallback={\n              <Styled.ModalLoaderWrapper>\n                <AppLoader height=\"100vh\" />\n              </Styled.ModalLoaderWrapper>\n            }\n          >\n            <Styled.SpotlightModal $isClosing={isClosing} />\n            {element}\n          </Suspense>\n        </ErrorBoundary>\n      </Styled.ModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>\n          <ErrorBoundary\n            fallback={<Error height=\"50vh\" size=\"compact\" />}\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","sentryCaptureException","useCallback","error","captureException","handleStopPropagation","e","Styled.ModalContainer","Styled.BottomSheetModal","jsx","ErrorBoundary","FlexView","Error","Suspense","AppLoader","Styled.ModalLoaderWrapper","jsxs","Styled.SpotlightModal","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;;AAkBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN,GAEnDO,IAAyBC,EAAY,CAACC,MAAiB;AAC3D,IAAAC,EAAiBD,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA,GAECE,IAAwBH,EAAY,CAACI,MAAwB;AACjE,IAAAA,EAAE,gBAAgB;AAAA,EACpB,GAAG,CAAE,CAAA;AAEL,SAAIT,MAAa,mCAEZU,GAAA,EAAsB,YAAYZ,GAAW,SAASK,IAAgBJ,IAAU,MAAM,MACrF,4BAACY,GAAA,EAAwB,YAAYb,GAAW,SAASU,GACvD,UAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,MAAM,IACd,UAAC,gBAAAF,EAAAG,GAAA,EAAM,QAAO,OAAA,CAAO,EACvB,CAAA;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQhB,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA,EAE9D,CAAA,EACF,CAAA,IAIAD,MAAa,cAEZ,gBAAAY,EAAAF,GAAA,EAAsB,YAAYZ,GACjC,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGK,GAAA,EACC,UAAC,gBAAAN,EAAAG,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAe;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,4BACGE,GAAA,EACC,UAAC,gBAAAN,EAAAK,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAL,EAACQ,GAAA,EAAsB,YAAYtB,EAAW,CAAA;AAAA,YAC7CG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAKD,gBAAAW,EAAAF,GAAA,EAAsB,YAAYZ,GACjC,UAAC,gBAAAqB,EAAAE,GAAA,EAAiB,YAAYvB,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBmB,GAAA,EAA4B,aAAapB,GACxC,4BAACqB,GAAU,EAAA,OAAM,SAAQ,SAASxB,GAChC,4BAACyB,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAZ,EAAAa,GAAA,EAAwB,aAAavB,GACpC,UAAA,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAD,EAAAG,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASX;AAAA,QAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQhB,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"modal.js","sources":["../../../../src/features/ui/modals/modal.tsx"],"sourcesContent":["import type { IModalProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { captureException } from '@sentry/browser';\nimport { memo, Suspense, useCallback } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport CrossIcon from '../../../assets/line-icons/icons/cross';\nimport Error from '../../ui/error/error';\nimport Clickable from '../buttons/clickable/clickable';\nimport FlexView from '../layout/flex-view';\nimport AppLoader from '../loader/app-loader/app-loader';\nimport * as Styled from './modal-styled';\n\n/**\n * Modal component that renders modal content with close button\n * Handles animation state for entry and exit transitions\n */\nconst Modal: FC<IModalProps> = memo(({ modal, isClosing = false, onClose }) => {\n  const { renderAs, element, modalWidth, isDismissable } = modal;\n\n  const sentryCaptureException = useCallback((error: Error) => {\n    captureException(error);\n  }, []);\n\n  const handleStopPropagation = useCallback((e: React.MouseEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  if (renderAs === 'bottom-sheet') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing} onClick={isDismissable ? onClose : () => null}>\n        <Styled.BottomSheetModal $isClosing={isClosing} onClick={handleStopPropagation}>\n          <ErrorBoundary\n            fallback={\n              <FlexView $gap={24}>\n                <Error height=\"100%\" />\n              </FlexView>\n            }\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BottomSheetModal>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'spotlight') {\n    return (\n      <Styled.ModalContainer $isClosing={isClosing}>\n        <ErrorBoundary\n          fallback={\n            <Styled.ModalLoaderWrapper>\n              <Error height=\"100vh\" />\n            </Styled.ModalLoaderWrapper>\n          }\n          onError={sentryCaptureException}\n        >\n          <Suspense\n            fallback={\n              <Styled.ModalLoaderWrapper>\n                <AppLoader height=\"100vh\" />\n              </Styled.ModalLoaderWrapper>\n            }\n          >\n            <Styled.SpotlightModal $isClosing={isClosing} />\n            {element}\n          </Suspense>\n        </ErrorBoundary>\n      </Styled.ModalContainer>\n    );\n  }\n\n  if (renderAs === 'fullscreen-transparent') {\n    return (\n      <Styled.TransparentModalContainer $isClosing={isClosing}>\n        {element}\n      </Styled.TransparentModalContainer>\n    );\n  }\n\n  return (\n    <Styled.ModalContainer $isClosing={isClosing}>\n      <Styled.BaseModal $isClosing={isClosing} $width={modalWidth}>\n        {isDismissable !== false && (\n          <Styled.CloseButtonContainer $modalWidth={modalWidth}>\n            <Clickable label=\"Close\" onClick={onClose}>\n              <CrossIcon width={40} height={40} />\n            </Clickable>\n          </Styled.CloseButtonContainer>\n        )}\n        <Styled.BaseModalContent $modalWidth={modalWidth}>\n          <ErrorBoundary\n            fallback={<Error height=\"50vh\" size=\"compact\" />}\n            onError={sentryCaptureException}\n          >\n            <Suspense fallback={<AppLoader height=\"50vh\" />}>{element}</Suspense>\n          </ErrorBoundary>\n        </Styled.BaseModalContent>\n      </Styled.BaseModal>\n    </Styled.ModalContainer>\n  );\n});\n\nexport default Modal;\n"],"names":["Modal","memo","modal","isClosing","onClose","renderAs","element","modalWidth","isDismissable","sentryCaptureException","useCallback","error","captureException","handleStopPropagation","e","Styled.ModalContainer","Styled.BottomSheetModal","jsx","ErrorBoundary","FlexView","Error","Suspense","AppLoader","Styled.ModalLoaderWrapper","jsxs","Styled.SpotlightModal","Styled.TransparentModalContainer","Styled.BaseModal","Styled.CloseButtonContainer","Clickable","CrossIcon","Styled.BaseModalContent"],"mappings":";;;;;;;;;;AAkBM,MAAAA,IAAyBC,EAAK,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAO,SAAAC,QAAc;AAC7E,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,YAAAC,GAAY,eAAAC,MAAkBN,GAEnDO,IAAyBC,EAAY,CAACC,MAAiB;AAC3D,IAAAC,EAAiBD,CAAK;AAAA,EACxB,GAAG,CAAE,CAAA,GAECE,IAAwBH,EAAY,CAACI,MAAwB;AACjE,IAAAA,EAAE,gBAAgB;AAAA,EACpB,GAAG,CAAE,CAAA;AAEL,SAAIT,MAAa,mCAEZU,GAAA,EAAsB,YAAYZ,GAAW,SAASK,IAAgBJ,IAAU,MAAM,MACrF,4BAACY,GAAA,EAAwB,YAAYb,GAAW,SAASU,GACvD,UAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGC,GAAS,EAAA,MAAM,IACd,UAAC,gBAAAF,EAAAG,GAAA,EAAM,QAAO,OAAA,CAAO,EACvB,CAAA;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQhB,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA,EAE9D,CAAA,EACF,CAAA,IAIAD,MAAa,cAEZ,gBAAAY,EAAAF,GAAA,EAAsB,YAAYZ,GACjC,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,4BACGK,GAAA,EACC,UAAC,gBAAAN,EAAAG,GAAA,EAAM,QAAO,QAAQ,CAAA,GACxB;AAAA,MAEF,SAASX;AAAA,MAET,UAAA,gBAAAe;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,4BACGE,GAAA,EACC,UAAC,gBAAAN,EAAAK,GAAA,EAAU,QAAO,QAAQ,CAAA,GAC5B;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAL,EAACQ,GAAA,EAAsB,YAAYtB,EAAW,CAAA;AAAA,YAC7CG;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA,IAIAD,MAAa,6CAEZqB,GAAA,EAAiC,YAAYvB,GAC3C,UACHG,EAAA,CAAA,IAKD,gBAAAW,EAAAF,GAAA,EAAsB,YAAYZ,GACjC,UAAC,gBAAAqB,EAAAG,GAAA,EAAiB,YAAYxB,GAAW,QAAQI,GAC9C,UAAA;AAAA,IAAkBC,MAAA,wBAChBoB,GAAA,EAA4B,aAAarB,GACxC,4BAACsB,GAAU,EAAA,OAAM,SAAQ,SAASzB,GAChC,4BAAC0B,GAAU,EAAA,OAAO,IAAI,QAAQ,IAAI,GACpC,EACF,CAAA;AAAA,IAED,gBAAAb,EAAAc,GAAA,EAAwB,aAAaxB,GACpC,UAAA,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAW,gBAAAD,EAAAG,GAAA,EAAM,QAAO,QAAO,MAAK,WAAU;AAAA,QAC9C,SAASX;AAAA,QAET,UAAA,gBAAAQ,EAACI,KAAS,UAAU,gBAAAJ,EAACK,KAAU,QAAO,OAAO,CAAA,GAAK,UAAQhB,EAAA,CAAA;AAAA,MAAA;AAAA,IAAA,GAE9D;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { ChannelStatus } from '@cuemath/cue-message-broker';
 import { ComponentType } from 'react';
 import type { Config } from '@lottiefiles/dotlottie-web';
 import { Context } from 'react';
+import type { Data } from '@lottiefiles/dotlottie-web';
 import type { DefaultTheme } from 'styled-components';
 import { DetailedHTMLProps } from 'react';
 import type { Dispatch } from 'react';
@@ -398,7 +399,7 @@ export declare const DesmosCalculator: FC<IDesmosCalculatorProps>;
 
 export declare const DigitalMeter: FC<IDigitalMeterProps>;
 
-export declare const DotLottieAnimation: NamedExoticComponent<ILottieAnimationProps & RefAttributes<ILottieAnimationRef>>;
+export declare const DotLottieAnimation: NamedExoticComponent<IDotLottieAnimationProps & RefAttributes<IDotLottieAnimationRef>>;
 
 export declare const DownIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
@@ -1450,6 +1451,15 @@ declare interface IDigitalMeterProps {
     actAsTimer?: boolean;
 }
 
+declare type IDotLottieAnimationProps = XOR<WithSrc, WithData> & SharedProps;
+
+declare interface IDotLottieAnimationRef {
+    play: () => void;
+    pause: () => void;
+    playSegments: (segments: AnimationSegment) => void;
+    setFrame: (frame: number) => void;
+}
+
 declare interface IDrawerProps {
     isOpen: boolean;
     onClose?: () => void;
@@ -2254,23 +2264,6 @@ declare interface ILogger {
     (eventName: string, data?: Record<string, unknown>): void;
 }
 
-declare interface ILottieAnimationProps {
-    src: string;
-    width?: string | number;
-    height?: string | number;
-    settings?: Partial<LottieSettings>;
-    eventListeners?: {
-        name: EventType;
-        callback: EventListener_2<EventType>;
-    }[];
-    onRender?: () => void;
-    onError?: () => void;
-}
-
-declare interface ILottieAnimationRef {
-    playSegments: (segments: AnimationSegment, forceFlag?: boolean) => void;
-}
-
 declare interface ILPARChapterProps extends ILPARSheetCallbacks {
     userType: TUserTypes;
     chapterData: TLPARChapterData;
@@ -2607,7 +2600,7 @@ export declare interface IModal {
     /** Content to display inside the modal */
     element: ReactElement;
     /** Rendering style of the modal */
-    renderAs?: 'modal' | 'fullscreen' | 'spotlight' | 'bottom-sheet';
+    renderAs?: 'modal' | 'fullscreen' | 'spotlight' | 'bottom-sheet' | 'fullscreen-transparent';
     /** Whether the modal can be dismissed by clicking outside or ESC key (default: true) */
     isDismissable?: boolean;
     /** Whether the modal requires authentication to view (default: true) */
@@ -3449,19 +3442,35 @@ declare interface IStepperProps {
     currentStep: number;
 }
 
-declare interface IStickerData {
+export declare interface IStickerData {
     id: string;
     emoji: string;
     lottieUrl?: string;
-    name?: string;
+    name: string;
 }
 
-declare interface IStickerGridProps {
+export declare interface IStickerProps {
+    emoji: string;
+    lottieUrl?: string;
+    size?: number | string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+
+export declare interface IStickerSelectorProps {
     stickers: IStickerData[];
     columns?: number;
     gap?: number;
     stickerSize?: number | string;
     onStickerClick?: (sticker: IStickerData) => void;
+    disabled?: boolean;
+}
+
+export declare interface IStickersProps {
+    stickers: string[];
+    effect: TStickerEffects;
+    count: number;
+    duration: number;
 }
 
 declare interface IStreakIconProps extends React.HTMLProps<HTMLDivElement> {
@@ -4997,6 +5006,18 @@ export declare const SENTRY_IGNORED_ERRORS: Array<string | RegExp>;
 
 export declare const Separator: React_2.FC<ISeparatorProps>;
 
+declare type SharedProps = {
+    width?: string | number;
+    height?: string | number;
+    settings?: Partial<LottieSettings>;
+    eventListeners?: {
+        name: EventType;
+        callback: EventListener_2<EventType>;
+    }[];
+    onRender?: () => void;
+    onError?: () => void;
+};
+
 export declare const SHEET_ACTIONS: {
     readonly START: "START";
     readonly RESUME: "RESUME";
@@ -5103,22 +5124,15 @@ declare const STICKER_BADGE: {
     AWESOME: string;
 };
 
-declare type StickerEffect = 'burst_from_edges' | 'pop_expand' | 'float_up' | 'fall_down';
+export declare const stickerData: IStickerData[];
 
 export declare const StickerFilledIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const StickerIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
-export declare const Stickers: React_2.NamedExoticComponent<StickersProps>;
-
-declare interface StickersProps {
-    stickers: string[];
-    effect: StickerEffect;
-    count: number;
-    duration: number;
-}
+export declare const StickersEffects: React_2.NamedExoticComponent<IStickersProps>;
 
-export declare const StickersSelector: React_2.NamedExoticComponent<IStickerGridProps>;
+export declare const StickersSelector: React_2.NamedExoticComponent<IStickerSelectorProps>;
 
 export declare const StreakIcon: React_2.FC<IStreakIconProps>;
 
@@ -6044,7 +6058,7 @@ declare type TRenderAs_2 = 'canvas' | 'whiteboard';
 declare type TRewardHomeData = {
     user_badges: TBadgeData[] | [];
     user_rewards: TRewardsData[] | [];
-    user_stickers: TStickerData[] | [];
+    user_stickers: TStickerData_2[] | [];
 };
 
 declare type TRewardsData = {
@@ -6172,7 +6186,18 @@ export declare type TSkillStatus = 'pending' | 'completed';
 
 export declare type TSocialAuthProvider = 'google' | 'apple';
 
-declare type TStickerData = {
+export declare type TStickerData = {
+    id: string;
+    sticker: string;
+    lottie?: string;
+    x: number;
+    y: number;
+    size: number;
+    fromX?: string;
+    fromY?: string;
+};
+
+declare type TStickerData_2 = {
     actor_id: string;
     badge_id: string;
     badge_type: string;
@@ -6185,6 +6210,8 @@ declare type TStickerData = {
     user_type: string;
 };
 
+export declare type TStickerEffects = 'burst-from-edges' | 'pop-expand' | 'float-up' | 'fall-down';
+
 export declare type TStreakStatus = 'pending' | 'completed';
 
 declare type TStyleAttrubutes = NonNullable<HTMLAttributes<HTMLDivElement>['style']>;
@@ -6545,6 +6572,18 @@ export declare enum WebViewEvent {
  */
 export declare const WHITELIST_EVENTS: Record<string, PLUGIN_NAME[]>;
 
+declare type WithData = {
+    data: Data;
+};
+
+declare type Without<T, K extends keyof any> = {
+    [P in Exclude<keyof T, K>]?: never;
+};
+
+declare type WithSrc = {
+    src: string;
+};
+
 export declare const Worksheet: NamedExoticComponent<IWorksheetContainerProps & RefAttributes<IWorksheetRef>>;
 
 export declare const WORKSHEET_ACTION_BAR_HEIGHT = 56;
@@ -6557,6 +6596,8 @@ export declare const WORKSHEET_TOP_NAVIGATION_HEIGHT = 48;
 
 export declare const WORKSHEET_V3_NODE_TYPES: TNodeTypeProps[];
 
+declare type XOR<T, U> = (T & Without<U, keyof T>) | (U & Without<T, keyof U>);
+
 declare const ZINDEX: {
     readonly CHAPTER_CROWN_ICON: 4;
     readonly CHAPTER_PLUS_ICON: 2;