@sbcrmweb/sbcrmweb-tma-core 0.0.59

package/dist/components/TMAActionBar/TMAActionBar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SwipeableDrawerProps } from '@mui/material/SwipeableDrawer';
+export interface TMAActionBarProps extends Omit<SwipeableDrawerProps, 'onOpen'> {
+    onOpen?: () => void;
+    isSwipeable?: boolean;
+    isOpen?: boolean;
+    children: React.ReactNode;
+}
+export declare const TMAActionBar: ({ children, sx, isSwipeable, isOpen, onClose, onOpen, ...props }: TMAActionBarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMAActionBar.d.ts.map

package/dist/components/TMAActionBar/TMAActionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMAActionBar.d.ts","sourceRoot":"","sources":["../../../src/components/TMAActionBar/TMAActionBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAwB,EACtB,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AAEvC,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,qEAQtB,iBAAiB,4CA+CnB,CAAC"}

package/dist/components/TMAActionBar/TMAActionBar.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Stack from '@mui/material/Stack';
+import { useEffect, useRef } from 'react';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+export const TMAActionBar = ({ children, sx, isSwipeable = false, isOpen = true, onClose, onOpen = () => { }, ...props }) => {
+    const contentRef = useRef(null);
+    useEffect(() => {
+        if (!isSwipeable && contentRef.current) {
+            const height = contentRef.current.getBoundingClientRect().height;
+            document.body.style.paddingBottom = `${height}px`;
+        }
+    }, [isSwipeable, children]);
+    useEffect(() => {
+        if (!isSwipeable && contentRef.current) {
+            return () => {
+                document.body.style.paddingBottom = '0px';
+            };
+        }
+    }, []);
+    return (_jsx(SwipeableDrawer, { variant: isSwipeable ? 'temporary' : 'permanent', hideBackdrop: !isSwipeable, open: isSwipeable ? isOpen : true, onClose: onClose, onOpen: onOpen, anchor: "bottom", slotProps: {
+            root: {
+                keepMounted: isSwipeable,
+            },
+        }, children: _jsx(Stack, { ref: contentRef, sx: {
+                px: 2,
+                pt: 2,
+                bgcolor: 'bg_color.main',
+                borderTopLeftRadius: 12,
+                borderTopRightRadius: 12,
+                ...sx,
+            }, ...props, children: children }) }));
+};

package/dist/components/TMABannersFeed/StoryDrawer.d.ts

@@ -0,0 +1,12 @@
+import { SxProps } from '@mui/material/styles';
+import { TMAStory } from './TMABannerFeed';
+interface StoryDrawerProps {
+    sx?: SxProps;
+    onClose: () => void;
+    story: TMAStory | null;
+    onFinished?: () => void;
+    onPrev?: () => void;
+}
+export declare const StoryDrawer: ({ story, onClose, onFinished, onPrev, }: StoryDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StoryDrawer.d.ts.map

package/dist/components/TMABannersFeed/StoryDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/TMABannersFeed/StoryDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAU,MAAM,sBAAsB,CAAC;AASvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAM3C,UAAU,gBAAgB;IACxB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,WAAW,4CAKrB,gBAAgB,4CA8KlB,CAAC"}

package/dist/components/TMABannersFeed/StoryDrawer.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import CloseOutlined from '@mui/icons-material/CloseOutlined';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+import { StoryProgress } from './StoryProgress';
+import useTMALongPress from '../../hooks/useTMALongPress';
+import { useTMABannerFeedPropsContext } from './propsContext';
+import { BASE_SPACING } from '../../theme';
+const StyledSwiper = styled(Swiper)(({ theme }) => ({
+    height: '100vh',
+    width: '100%',
+    background: 'linear-gradient(0deg, #0078EE, #5FC1FF)',
+    '& .story-item-slide': {
+        maxHeight: 'calc(100% - 90px)',
+    }
+}));
+export const StoryDrawer = ({ story, onClose, onFinished, onPrev, }) => {
+    const { storyItemsSwiperProps = {}, storyItemTitleVariant = 'title3Semibold', storyItemSubtitleVariant = 'textRegular', } = useTMABannerFeedPropsContext();
+    const [activeStoryItemIndex, setActiveStoryItemIndex] = useState(0);
+    const swiperRef = useRef(null);
+    const timerRef = useRef(null);
+    const goToSlide = (index = 0) => {
+        setActiveStoryItemIndex(index);
+        setTimeout(() => swiperRef.current?.slideTo(index), 0);
+    };
+    const goToSlidePrev = () => {
+        setTimeout(() => swiperRef.current?.slidePrev(), 0);
+    };
+    const handleNextStep = () => {
+        if (!story) {
+            return;
+        }
+        if (activeStoryItemIndex !== story.items.length - 1) {
+            goToSlide(activeStoryItemIndex + 1);
+        }
+        else if (onFinished) {
+            setActiveStoryItemIndex(0);
+            goToSlide();
+            onFinished();
+        }
+        else {
+            onClose();
+        }
+    };
+    const handlePreviousStep = () => {
+        if (!story) {
+            return;
+        }
+        if (activeStoryItemIndex) {
+            goToSlidePrev();
+        }
+        else if (onPrev) {
+            setActiveStoryItemIndex(0);
+            goToSlide();
+            onPrev();
+        }
+        else {
+            timerRef.current.resetTimer();
+        }
+    };
+    const handleLongPressHandleStart = () => {
+        timerRef.current.pause();
+    };
+    const handleLongPressHandleEnd = () => {
+        timerRef.current.resume();
+    };
+    const handleClick = (event) => {
+        const isNext = event.touches.startX > event.width / 2;
+        if (isNext) {
+            handleNextStep();
+            return;
+        }
+        handlePreviousStep();
+    };
+    const longPressEvents = useTMALongPress(handleLongPressHandleStart, handleLongPressHandleEnd, handleClick);
+    const swiperMemoized = useMemo(() => {
+        return (_jsx(StyledSwiper, { className: "story-item-swiper", onBeforeInit: (swiper) => {
+                swiperRef.current = swiper;
+            }, onSlideChange: (sw) => setActiveStoryItemIndex(sw.activeIndex), modules: [Navigation], slidesPerView: 1, speed: 400, ...longPressEvents, ...storyItemsSwiperProps, children: story?.items.map(({ image, subtitle, title, component }) => {
+                const haveComponent = Boolean(component);
+                return (_jsxs(SwiperSlide, { className: "story-item-slide", children: [haveComponent && component, !haveComponent && (_jsxs(Stack, { className: "story-item-wrapper", p: 2, rowGap: 6, pt: 90 / BASE_SPACING, sx: { height: '100%' }, children: [_jsx(Box, { sx: {
+                                        marginX: 'auto',
+                                        height: '70%',
+                                    }, component: "img", src: image }), _jsxs(Stack, { sx: { minHeight: 300 }, rowGap: 12 / BASE_SPACING, children: [_jsx(Typography, { className: "story-item-title", variant: storyItemTitleVariant, sx: { fontWeight: 590 }, children: title }), _jsx(Typography, { className: "story-item-subtitle", sx: { whiteSpace: 'pre-wrap', lineHeight: '22px' }, variant: storyItemSubtitleVariant, children: subtitle })] })] }))] }, subtitle));
+            }) }));
+    }, [story, longPressEvents, storyItemsSwiperProps]);
+    return (_jsxs(Drawer, { className: "story-drawer", anchor: "bottom", onTouchStart: timerRef.current?.pause, onTouchEnd: timerRef.current?.resume, open: Boolean(story), ModalProps: { onBackdropClick: onClose }, sx: {
+            '& .MuiDrawer-paperAnchorBottom.MuiPaper-root': {
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+                pb: 0,
+            },
+        }, children: [_jsx(StoryProgress, { activeStoryItemIndex: activeStoryItemIndex, onExpirationTimer: handleNextStep, onItemClick: (index) => swiperRef.current?.slideTo(index), story: story, timerRef: timerRef }), _jsx(Stack, { className: "story-drawer-closer", justifyContent: "center", alignItems: "center", onClick: (event) => {
+                    event.preventDefault();
+                    onClose();
+                }, sx: {
+                    height: 40,
+                    width: 40,
+                    position: 'absolute',
+                    zIndex: 1000,
+                    top: 42,
+                    right: 16,
+                    borderRadius: '10px',
+                    cursor: 'pointer',
+                    background: '#2990FF26',
+                }, children: _jsx(CloseOutlined, {}) }), swiperMemoized] }));
+};

package/dist/components/TMABannersFeed/StoryProgress.d.ts

@@ -0,0 +1,11 @@
+import { TMAStory } from './TMABannerFeed';
+interface StoryProgressProps {
+    story: TMAStory | null;
+    activeStoryItemIndex: number;
+    onExpirationTimer: () => void;
+    onItemClick: (index: number) => void;
+    timerRef?: any;
+}
+export declare const StoryProgress: ({ story, activeStoryItemIndex, onExpirationTimer, onItemClick, timerRef, }: StoryProgressProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StoryProgress.d.ts.map

package/dist/components/TMABannersFeed/StoryProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoryProgress.d.ts","sourceRoot":"","sources":["../../../src/components/TMABannersFeed/StoryProgress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAK3C,UAAU,kBAAkB;IAC1B,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAID,eAAO,MAAM,aAAa,+EAMvB,kBAAkB,4CA4GpB,CAAC"}

package/dist/components/TMABannersFeed/StoryProgress.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { Box, LinearProgress, Stack } from '@mui/material';
+import { useTimer } from 'react-timer-hook';
+import { BASE_SPACING } from '../../theme';
+import { useTMABannerFeedPropsContext } from './TMABannerFeedPropsContext';
+const MAX_TIME_OF_STORY = 10;
+export const StoryProgress = ({ story, activeStoryItemIndex, onExpirationTimer, onItemClick, timerRef, }) => {
+    const { maxStoryTimeSeconds = MAX_TIME_OF_STORY } = useTMABannerFeedPropsContext();
+    const maxStoryTimeMilliseconds = maxStoryTimeSeconds * 1000;
+    const getTimerOffset = useCallback(() => {
+        const newOffsetDate = new Date();
+        newOffsetDate.setMilliseconds(newOffsetDate.getMilliseconds() + maxStoryTimeMilliseconds);
+        return newOffsetDate;
+    }, [maxStoryTimeMilliseconds]);
+    const resetTimer = () => {
+        restart(getTimerOffset(), true);
+    };
+    const handleExpirationTimer = () => {
+        if (!story) {
+            return;
+        }
+        if (activeStoryItemIndex !== story.items.length - 1) {
+            resetTimer();
+        }
+        onExpirationTimer();
+    };
+    const timer = useTimer({
+        autoStart: true,
+        interval: maxStoryTimeSeconds,
+        expiryTimestamp: getTimerOffset(),
+        onExpire: handleExpirationTimer,
+    });
+    if (timerRef) {
+        timerRef.current = {
+            ...timer,
+            resetTimer,
+        };
+    }
+    const { totalMilliseconds: time, pause, restart } = timer;
+    const stopTimer = () => {
+        pause();
+    };
+    useEffect(() => {
+        if (story) {
+            resetTimer();
+            return;
+        }
+        stopTimer();
+    }, [story, activeStoryItemIndex]);
+    const getProgressBarValue = (currentIndex) => {
+        if (currentIndex === activeStoryItemIndex) {
+            return (1 - time / maxStoryTimeMilliseconds) * 100;
+        }
+        return currentIndex > activeStoryItemIndex ? 0 : 100;
+    };
+    return (_jsx(Stack, { className: "story-progress", onClick: (event) => event.stopPropagation(), gap: 4 / BASE_SPACING, sx: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1000,
+            mt: 2,
+            mx: 2,
+        }, direction: "row", children: story?.items.map((storyItem, index) => (_jsx(Box, { className: "story-progress-item-wrapper", onClick: () => onItemClick(index), flex: 1, height: 25, display: "flex", justifyItems: "center", children: _jsx(LinearProgress, { className: "story-progress-item", variant: "determinate", sx: {
+                    width: '100%',
+                    borderRadius: 1,
+                    '& .MuiLinearProgress-bar': {
+                        transition: 'none',
+                        background: 'white',
+                    },
+                    '&.MuiLinearProgress-root': {
+                        background: '#FFFFFF1A',
+                    },
+                }, value: getProgressBarValue(index) }) }, storyItem.subtitle))) }));
+};

package/dist/components/TMABannersFeed/TMABannerFeed.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { TypographyProps } from '@mui/material/Typography';
+import { SwiperProps } from 'swiper/react';
+export type TMAStoryItem = {
+    title?: string;
+    subtitle?: string;
+    image?: string;
+    component?: ReactNode;
+};
+export interface TMAStory {
+    title: string;
+    image?: React.ReactElement;
+    items: TMAStoryItem[];
+    isGray?: boolean;
+}
+export interface TMABannersFeedProps {
+    stories?: TMAStory[];
+    sx?: SxProps<Theme>;
+    maxStoryTimeSeconds?: number;
+    storiesSwiperProps?: SwiperProps;
+    storyTitleVariant?: TypographyProps['variant'];
+    storyItemsSwiperProps?: SwiperProps;
+    storyItemTitleVariant?: TypographyProps['variant'];
+    storyItemSubtitleVariant?: TypographyProps['variant'];
+}
+export declare const TMABannersFeed: (props: TMABannersFeedProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMABannerFeed.d.ts.map

package/dist/components/TMABannersFeed/TMABannerFeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMABannerFeed.d.ts","sourceRoot":"","sources":["../../../src/components/TMABannersFeed/TMABannerFeed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AACnD,OAAO,EAAU,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG9D,OAAmB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAEL,WAAW,EAGZ,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,iBAAiB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC/C,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,qBAAqB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACnD,wBAAwB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACvD;AA2DD,eAAO,MAAM,cAAc,UAAW,mBAAmB,4CA+ExD,CAAC"}

package/dist/components/TMABannersFeed/TMABannerFeed.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Swiper, SwiperSlide, } from 'swiper/react';
+import { TMAStoryDrawer } from './TMAStoryDrawer';
+import { BASE_SPACING } from '../../theme';
+import { TMABannerFeedPropsContext } from './TMABannerFeedPropsContext';
+const StyledBannerWrapper = styled(Stack)(({ theme }) => theme.unstable_sx({
+    borderRadius: '12px',
+    width: 103,
+    height: 103,
+    borderColor: theme.palette?.accent_text_color.main,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    position: 'relative',
+    marginRight: 12 / BASE_SPACING,
+}));
+const StyledBanner = styled(Stack, {
+    shouldForwardProp: (prop) => ['isGray'].every((key) => key !== prop),
+})(({ theme, isGray }) => theme.unstable_sx({
+    background: isGray
+        ? 'linear-gradient(180deg, #E6FFEE, #A3A9A7)'
+        : 'linear-gradient(180deg, #5FC1FF 0%, #0078EE 100%)',
+    borderRadius: '12px',
+    borderColor: theme.palette?.bg_color.main,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    width: 99,
+    height: 99,
+    p: 6 / BASE_SPACING,
+    position: 'relative',
+    alignItems: 'center',
+    '&:after': {
+        content: "''",
+        zIndex: 1,
+        position: 'absolute',
+        height: 40,
+        width: 95,
+        borderRadius: '12px',
+        background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
+        bottom: -1,
+    },
+}));
+const StyledSwiper = styled(Swiper)(({ theme }) => ({
+    '& .swiper-wrapper': {
+        width: 'fit-content',
+        maxWidth: 'fit-content',
+    },
+}));
+const StyledSwiperSlide = styled(SwiperSlide)(({ theme }) => ({
+    width: 'fit-content',
+    flex: 1,
+}));
+export const TMABannersFeed = (props) => {
+    const { stories, sx = {}, storiesSwiperProps = {}, storyTitleVariant = 'caption3Semibold', } = props;
+    const [activeStoryIndex, setActiveStoryIndex] = useState(null);
+    const handleFinishedStory = () => {
+        setActiveStoryIndex(Number(activeStoryIndex) + 1);
+    };
+    const handlePrevStory = () => {
+        setActiveStoryIndex(Number(activeStoryIndex) - 1);
+    };
+    const haveStories = Boolean(stories?.length);
+    return (_jsx(Box, { sx: sx, children: _jsxs(TMABannerFeedPropsContext.Provider, { value: props, children: [_jsx(StyledSwiper, { className: "story-swiper", allowTouchMove: true, slidesPerView: "auto", speed: 400, ...storiesSwiperProps, children: stories?.map((story, index) => (_jsx(StyledSwiperSlide, { className: "story-slide", children: _jsx(StyledBannerWrapper, { alignItems: "center", justifyContent: "center", className: "story-banner-wrapper", children: _jsxs(StyledBanner, { isGray: story.isGray, onClick: () => setActiveStoryIndex(index), className: "story-banner", children: [story.image, _jsx(Typography, { className: "story-banner-title", variant: storyTitleVariant, sx: {
+                                            width: '85%',
+                                            position: 'absolute',
+                                            bottom: 6,
+                                            left: 6,
+                                            fontSize: 10,
+                                            fontWeight: 600,
+                                            lineHeight: '107%',
+                                            zIndex: 2,
+                                        }, children: story.title })] }) }) }, story.title))) }), activeStoryIndex !== null && haveStories && (_jsx(TMAStoryDrawer, { onFinished: activeStoryIndex !== stories.length - 1
+                        ? handleFinishedStory
+                        : undefined, onPrev: activeStoryIndex ? handlePrevStory : undefined, onClose: () => setActiveStoryIndex(null), story: stories[activeStoryIndex] }))] }) }));
+};

package/dist/components/TMABannersFeed/TMABannerFeedPropsContext.d.ts

@@ -0,0 +1,5 @@
+import { TMABannersFeedProps } from './TMABannerFeed';
+export type TMABannerFeedPropsContextType = TMABannersFeedProps;
+export declare const TMABannerFeedPropsContext: import("react").Context<TMABannersFeedProps>;
+export declare const useTMABannerFeedPropsContext: () => TMABannersFeedProps;
+//# sourceMappingURL=TMABannerFeedPropsContext.d.ts.map

package/dist/components/TMABannersFeed/TMABannerFeedPropsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMABannerFeedPropsContext.d.ts","sourceRoot":"","sources":["../../../src/components/TMABannersFeed/TMABannerFeedPropsContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,6BAA6B,GAAG,mBAAmB,CAAC;AAEhE,eAAO,MAAM,yBAAyB,8CACe,CAAC;AAEtD,eAAO,MAAM,4BAA4B,2BAKxC,CAAC"}

package/dist/components/TMABannersFeed/TMABannerFeedPropsContext.js

@@ -0,0 +1,7 @@
+'use client';
+import { createContext, useContext, useMemo } from 'react';
+export const TMABannerFeedPropsContext = createContext(null);
+export const useTMABannerFeedPropsContext = () => {
+    const value = useContext(TMABannerFeedPropsContext);
+    return useMemo(() => value, [value]);
+};

package/dist/components/TMABannersFeed/TMAStoryDrawer.d.ts

@@ -0,0 +1,11 @@
+import { SxProps } from '@mui/material/styles';
+import { TMAStory } from './TMABannerFeed';
+export interface TMAStoryDrawerProps {
+    sx?: SxProps;
+    onClose: () => void;
+    story: TMAStory | null;
+    onFinished?: () => void;
+    onPrev?: () => void;
+}
+export declare const TMAStoryDrawer: ({ story, onClose, onFinished, onPrev, }: TMAStoryDrawerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMAStoryDrawer.d.ts.map

package/dist/components/TMABannersFeed/TMAStoryDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMAStoryDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/TMABannersFeed/TMAStoryDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAU,MAAM,sBAAsB,CAAC;AAUvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAM3C,MAAM,WAAW,mBAAmB;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,cAAc,4CAKxB,mBAAmB,4CAkMrB,CAAC"}

package/dist/components/TMABannersFeed/TMAStoryDrawer.js

@@ -0,0 +1,119 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Image from 'next/image';
+import Drawer from '@mui/material/Drawer';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import CloseOutlined from '@mui/icons-material/CloseOutlined';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+import { StoryProgress } from './StoryProgress';
+import useTMALongPress from '../../hooks/useTMALongPress';
+import { useTMABannerFeedPropsContext } from './TMABannerFeedPropsContext';
+import { BASE_SPACING } from '../../theme';
+const StyledSwiper = styled(Swiper)(({ theme }) => ({
+    height: '100vh',
+    width: '100%',
+    background: 'linear-gradient(0deg, #0078EE, #5FC1FF)',
+    '& .story-item-slide': {
+        maxHeight: 'calc(100% - 90px)',
+    },
+}));
+export const TMAStoryDrawer = ({ story, onClose, onFinished, onPrev, }) => {
+    const { storyItemsSwiperProps = {}, storyItemTitleVariant = 'title3Semibold', storyItemSubtitleVariant = 'textRegular', } = useTMABannerFeedPropsContext();
+    const [activeStoryItemIndex, setActiveStoryItemIndex] = useState(0);
+    const swiperRef = useRef(null);
+    const timerRef = useRef(null);
+    const goToSlide = (index = 0) => {
+        setActiveStoryItemIndex(index);
+        setTimeout(() => swiperRef.current?.slideTo(index), 0);
+    };
+    const goToSlidePrev = () => {
+        setTimeout(() => swiperRef.current?.slidePrev(), 0);
+    };
+    const handleNextStep = () => {
+        if (!story) {
+            return;
+        }
+        if (activeStoryItemIndex !== story.items.length - 1) {
+            goToSlide(activeStoryItemIndex + 1);
+        }
+        else if (onFinished) {
+            setActiveStoryItemIndex(0);
+            setTimeout(() => swiperRef.current?.slideTo(0, 0), 0);
+            onFinished();
+        }
+        else {
+            onClose();
+        }
+    };
+    const handlePreviousStep = () => {
+        if (!story) {
+            return;
+        }
+        if (activeStoryItemIndex) {
+            goToSlidePrev();
+        }
+        else if (onPrev) {
+            setActiveStoryItemIndex(0);
+            goToSlide();
+            onPrev();
+        }
+        else {
+            timerRef.current.resetTimer();
+        }
+    };
+    const handleLongPressHandleStart = () => {
+        timerRef.current.pause();
+    };
+    const handleLongPressHandleEnd = () => {
+        timerRef.current.resume();
+    };
+    const handleClick = (event) => {
+        const isNext = event.touches.startX > event.width / 2;
+        if (isNext) {
+            handleNextStep();
+            return;
+        }
+        handlePreviousStep();
+    };
+    const longPressEvents = useTMALongPress(handleLongPressHandleStart, handleLongPressHandleEnd, handleClick);
+    const swiperMemoized = useMemo(() => {
+        return (_jsx(StyledSwiper, { className: "story-item-swiper", onBeforeInit: (swiper) => {
+                swiperRef.current = swiper;
+            }, onSlideChange: (sw) => setActiveStoryItemIndex(sw.activeIndex), modules: [Navigation], slidesPerView: 1, speed: 400, ...longPressEvents, ...storyItemsSwiperProps, children: story?.items.map(({ image, subtitle, title, component }) => {
+                const haveComponent = Boolean(component);
+                return (_jsxs(SwiperSlide, { className: "story-item-slide", children: [haveComponent && component, !haveComponent && (_jsxs(Stack, { className: "story-item-wrapper", p: 2, rowGap: 6, pt: 90 / BASE_SPACING, sx: { height: '100%' }, children: [_jsx(Box, { sx: {
+                                        marginX: 'auto',
+                                        height: '70%',
+                                        minHeight: '70%',
+                                        maxHeight: '70%',
+                                        width: '100%',
+                                        position: 'relative',
+                                    }, children: image && (_jsx(Image, { src: image, alt: title ?? '', fill: true, sizes: "100vw", style: { objectFit: 'contain' }, priority: true })) }), _jsxs(Stack, { sx: { minHeight: 300 }, rowGap: 12 / BASE_SPACING, children: [_jsx(Typography, { className: "story-item-title", variant: storyItemTitleVariant, sx: { fontWeight: 590 }, children: title }), _jsx(Typography, { className: "story-item-subtitle", sx: { whiteSpace: 'pre-wrap', lineHeight: '22px' }, variant: storyItemSubtitleVariant, children: subtitle })] })] }))] }, subtitle));
+            }) }));
+    }, [story, longPressEvents, storyItemsSwiperProps]);
+    return (_jsxs(Drawer, { className: "story-drawer", anchor: "bottom", onTouchStart: timerRef.current?.pause, onTouchEnd: timerRef.current?.resume, open: Boolean(story), ModalProps: { onBackdropClick: onClose }, sx: {
+            '& .MuiDrawer-paperAnchorBottom.MuiPaper-root': {
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+                pb: 0,
+            },
+        }, children: [_jsx(StoryProgress, { activeStoryItemIndex: activeStoryItemIndex, onExpirationTimer: handleNextStep, onItemClick: (index) => swiperRef.current?.slideTo(index), story: story, timerRef: timerRef }), _jsx(Stack, { className: "story-drawer-closer", justifyContent: "center", alignItems: "center", onClick: (event) => {
+                    event.preventDefault();
+                    onClose();
+                }, sx: {
+                    height: 40,
+                    width: 40,
+                    position: 'absolute',
+                    zIndex: 1000,
+                    top: 42,
+                    right: 16,
+                    borderRadius: '10px',
+                    cursor: 'pointer',
+                    background: '#2990FF26',
+                }, children: _jsx(CloseOutlined, {}) }), swiperMemoized] }));
+};

package/dist/components/TMABannersFeed/propsContext.d.ts

@@ -0,0 +1,5 @@
+import { TMABannersFeedProps } from './TMABannerFeed';
+export type TMABannerFeedPropsContextType = TMABannersFeedProps;
+export declare const tmaBannerFeedPropsContext: import("react").Context<TMABannersFeedProps>;
+export declare const useTMABannerFeedPropsContext: () => TMABannersFeedProps;
+//# sourceMappingURL=propsContext.d.ts.map

package/dist/components/TMABannersFeed/propsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"propsContext.d.ts","sourceRoot":"","sources":["../../../src/components/TMABannersFeed/propsContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,6BAA6B,GAAG,mBAAmB,CAAC;AAEhE,eAAO,MAAM,yBAAyB,8CAAsD,CAAC;AAE7F,eAAO,MAAM,4BAA4B,2BAGxC,CAAC"}

package/dist/components/TMABannersFeed/propsContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext, useMemo } from 'react';
+export const tmaBannerFeedPropsContext = createContext(null);
+export const useTMABannerFeedPropsContext = () => {
+    const value = useContext(tmaBannerFeedPropsContext);
+    return useMemo(() => value, [value]);
+};

package/dist/components/TMABarChart/ItemTooltip.d.ts

@@ -0,0 +1,12 @@
+export interface ItemTooltipProps {
+    value: number | string;
+    position: {
+        x: number;
+        y: number;
+    };
+    id?: number;
+    isFirst?: boolean;
+    isLast?: boolean;
+}
+export declare function ItemTooltip(props: ItemTooltipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ItemTooltip.d.ts.map

package/dist/components/TMABarChart/ItemTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/TMABarChart/ItemTooltip.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAmDlD"}

package/dist/components/TMABarChart/ItemTooltip.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { NoSsr, Paper } from '@mui/material';
+import Popper from '@mui/material/Popper';
+import { BASE_SPACING, commonColors } from '../../theme';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+export function ItemTooltip(props) {
+    const { position, isFirst, isLast, value } = props;
+    const tooltipPosition = useMemo(() => ({
+        x: position.x,
+        y: position.y,
+    }), [position]);
+    return (_jsx(NoSsr, { children: _jsx(Popper, { sx: {
+                pointerEvents: 'none',
+                zIndex: (theme) => theme.zIndex.modal,
+            }, open: true, placement: isFirst ? 'top-start' : isLast ? 'top-end' : 'top', anchorEl: {
+                getBoundingClientRect: () => ({
+                    x: tooltipPosition.x,
+                    y: tooltipPosition.y,
+                    width: 0,
+                    height: 0,
+                    top: tooltipPosition.y,
+                    right: tooltipPosition.x,
+                    bottom: tooltipPosition.y,
+                    left: tooltipPosition.x,
+                }),
+            }, children: _jsx(Paper, { elevation: 0, sx: {
+                    p: 10 / BASE_SPACING,
+                    backgroundColor: commonColors.card_bg_color.dark,
+                    borderRadius: (12 / BASE_SPACING) * 2,
+                }, children: _jsx(Stack, { direction: "row", alignItems: "center", children: _jsx(Typography, { variant: "caption1Regular", color: "white", children: value }) }) }) }) }));
+}

package/dist/components/TMABarChart/TMABarChart.d.ts

@@ -0,0 +1,10 @@
+export interface TMABarChartProps {
+    xTickLabels: any[];
+    data: number[];
+    tooltipSuffix?: string;
+    width?: number | string;
+    height?: number;
+    fullWidth?: boolean;
+}
+export declare const TMABarChart: (props: TMABarChartProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMABarChart.d.ts.map

package/dist/components/TMABarChart/TMABarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMABarChart.d.ts","sourceRoot":"","sources":["../../../src/components/TMABarChart/TMABarChart.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AASD,eAAO,MAAM,WAAW,UAAW,gBAAgB,4CA+HlD,CAAC"}