@ludo.ninja/components 1.5.8 → 1.6.0

package/src/modules/virtuoso/VirtuosoPageBuilder.tsx

@@ -1,208 +0,0 @@
-import React, { ReactNode, UIEvent, useRef } from 'react';
-
-import { ApolloError } from '@apollo/client';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import styled from 'styled-components';
-
-import {
-  adaptiveValueCalc,
-  getAdaptiveValue,
-} from '@ludo.ninja/ui/build/utils/4k';
-
-import { useVirtuosoInitialScroll } from '@/modules/sessionScroll/useVirtuosoInitialScroll';
-import {
-  VirtuosoToTopBtn,
-  useVirtuosoToTopBtnInitialize,
-} from '@/modules/virtuoso/VirtuosoToTopBtn';
-import { useSubscribeVirtuosoScrollToHeader } from '@/modules/virtuoso/useSubscribeVirtuosoScrollToHeader';
-import { useVirtuosoData } from '@/modules/virtuoso/useVirtuosoData';
-
-import { ScreenWidth, mediaQuery } from '@/styles/ScreenWidth';
-
-import { ProfileSkeleton } from '@/components/profile/profileSkeleton';
-
-import CardsError from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsError';
-import CardsNoResults from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults';
-import { CardSkeleton } from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
-import CardsHolderLoader from '@/system/CardsHolderWithSkeleton/CardsHolderLoader';
-import { TActiveTab } from '@/system/Tabs/TabsNav/type';
-
-import { TDimensions } from '@/utils/screen';
-
-const SCardsRow = styled.div`
-  display: flex;
-  width: 1080px;
-  margin: 0 auto;
-
-  ${mediaQuery.maxWidthTablet} {
-    width: 704px;
-  }
-
-  ${mediaQuery.mobile} {
-    width: 320px;
-  }
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(1080)};
-  }
-`;
-
-export const VirtuosoPageBuilder = <TCreation,>({
-  activeTab,
-  isMobile,
-  creations,
-  windowDimensions,
-  isLoading,
-  error,
-  refetchQuery,
-  loadMore,
-  renderCreation,
-  notFoundText,
-  isNextLoading,
-  headerSlot,
-  isProfileCards,
-}: {
-  activeTab: TActiveTab;
-  isMobile: boolean;
-  creations: TCreation[];
-  windowDimensions: TDimensions | null;
-  isLoading: boolean;
-  isNextLoading: boolean;
-  error: ApolloError | undefined;
-  refetchQuery: () => Promise<void>;
-  loadMore: () => Promise<void>;
-  renderCreation: (creation: TCreation) => ReactNode;
-  notFoundText?: string | undefined;
-  headerSlot: JSX.Element;
-  isProfileCards?: boolean;
-}) => {
-  const { onScroll } = useSubscribeVirtuosoScrollToHeader();
-  const virtuoso = useRef<null | VirtuosoHandle>(null);
-  const virtuosoToTopBtnInitialize = useVirtuosoToTopBtnInitialize();
-
-  const { virtuosoData, placeholderData } = useVirtuosoData<TCreation>({
-    activeTab,
-    isMobile,
-    creations,
-    isProfileCards:
-      !!windowDimensions &&
-      windowDimensions.windowWidth < 1200 &&
-      isProfileCards,
-  });
-
-  const { updateScroll, setScrollTop } = useVirtuosoInitialScroll({
-    virtuoso,
-    virtuosoData,
-    activeTab,
-  });
-
-  const virtuosoBody = (() => {
-    const getGapCards = () => {
-      const width = windowDimensions?.windowWidth;
-      if (width && width < 768) return 12;
-      if (width && width < 1200) return 16;
-      if (width && width >= ScreenWidth.FOUR_K_MIN) {
-        return getAdaptiveValue({
-          windowWidth: width,
-          currentSize: 24,
-        });
-      }
-      return 24;
-    };
-    if (isLoading) {
-      return {
-        totalCount: placeholderData.length,
-        itemContent: (index: number) => {
-          return (
-            <SCardsRow
-              style={{
-                paddingBottom: (() => {
-                  if (index === virtuosoData.creationPacks.length - 1) {
-                    const width = windowDimensions?.windowWidth;
-                    if (width && width < 768) return 20;
-                    if (width && width < 1200) return 32;
-                  }
-                  return getGapCards();
-                })(),
-                gap: getGapCards(),
-              }}
-            >
-              {placeholderData[index].map((_, ind) =>
-                isProfileCards ? (
-                  <ProfileSkeleton key={ind} />
-                ) : (
-                  <CardSkeleton key={ind} />
-                )
-              )}
-            </SCardsRow>
-          );
-        },
-      };
-    }
-    if (error) {
-      return {
-        totalCount: 1,
-        itemContent: () => {
-          return <CardsError refetch={refetchQuery} />;
-        },
-      };
-    }
-    if (notFoundText && virtuosoData.creations.length === 0) {
-      return {
-        totalCount: 1,
-        itemContent: () => {
-          return <CardsNoResults noFoundText={notFoundText} />;
-        },
-      };
-    }
-
-    return {
-      totalCount: virtuosoData.creationPacks.length,
-      itemContent: (index: number) => {
-        const data = virtuosoData.creationPacks[index];
-        return (
-          <SCardsRow
-            style={{
-              paddingBottom: (() => {
-                if (index === virtuosoData.creationPacks.length - 1) {
-                  const width = windowDimensions?.windowWidth;
-                  if (width && width < 768) return 20;
-                  if (width && width < 1200) return 32;
-                }
-                return getGapCards();
-              })(),
-              gap: getGapCards(),
-            }}
-            onClick={() => updateScroll(index)}
-          >
-            {data.map(renderCreation)}
-          </SCardsRow>
-        );
-      },
-    };
-  })();
-
-  return (
-    <>
-      <Virtuoso
-        ref={virtuoso}
-        style={{ height: 'var(--app-height)' }}
-        onScroll={(e: UIEvent<HTMLDivElement>) => {
-          setScrollTop(e.currentTarget.scrollTop);
-          onScroll(e.currentTarget.scrollTop);
-          virtuosoToTopBtnInitialize.onScroll(e.currentTarget.scrollTop);
-        }}
-        totalCount={virtuosoBody.totalCount}
-        endReached={loadMore}
-        overscan={200}
-        itemContent={virtuosoBody.itemContent}
-        components={{
-          Header: () => headerSlot,
-          Footer: () => (isNextLoading ? <CardsHolderLoader /> : null),
-        }}
-      />
-      {virtuosoToTopBtnInitialize.isShowBtn && (
-        <VirtuosoToTopBtn virtuoso={virtuoso} />
-      )}
-    </>
-  );
-};

package/src/modules/virtuoso/VirtuosoToTopBtn.tsx

@@ -1,44 +0,0 @@
-import { RefObject, useRef, useState } from 'react';
-
-import { VirtuosoHandle } from 'react-virtuoso';
-
-import { ToTopBtnWithCustomHandler } from '@/components/toTopBtn';
-
-export const useVirtuosoToTopBtnInitialize = () => {
-  const [isShowBtn, setIsShowBtn] = useState<boolean>(false);
-
-  const oldScrollY = useRef(0);
-  const offsetPixels = 600;
-
-  return {
-    isShowBtn,
-    onScroll(scrollY: number) {
-      if (scrollY > offsetPixels) {
-        if (oldScrollY.current > scrollY) {
-          setIsShowBtn(true);
-        }
-        oldScrollY.current = scrollY;
-      } else {
-        setIsShowBtn(false);
-        oldScrollY.current = offsetPixels;
-      }
-    },
-  };
-};
-
-export const VirtuosoToTopBtn = ({
-  virtuoso,
-}: {
-  virtuoso: RefObject<null | VirtuosoHandle>;
-}) => {
-  const handleClickFunction = () => {
-    virtuoso.current?.scrollToIndex({
-      index: 0,
-      behavior: 'smooth',
-      align: 'end',
-    });
-  };
-  return (
-    <ToTopBtnWithCustomHandler handleClickFunction={handleClickFunction} />
-  );
-};

package/src/modules/virtuoso/types.ts

@@ -1,9 +0,0 @@
-import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
-import CreationEntity from '@/dto/CreationEntity';
-
-export type TCreationAndCollection = CreationEntity | CollectionCreationEntity;
-
-export type TVirtuosoData<TData> = {
-  creationPacks: TData[][];
-  creations: TData[];
-};

package/src/modules/virtuoso/useSubscribeVirtuosoScrollToHeader.ts

@@ -1,26 +0,0 @@
-import { useRef } from 'react';
-
-export const useSubscribeVirtuosoScrollToHeader = () => {
-  const lastScrollY = useRef(0);
-  const scrollDirection = useRef('up');
-  return {
-    onScroll(scrollY: number) {
-      const direction = scrollY > lastScrollY.current ? 'down' : 'up';
-      if (
-        direction !== scrollDirection.current &&
-        (scrollY - lastScrollY.current > 5 ||
-          scrollY - lastScrollY.current < -5)
-      ) {
-        scrollDirection.current = direction;
-        const header = document.body.querySelector('header');
-        if (header) {
-          if (!header.classList.contains(direction)) {
-            header.classList.remove(direction === 'up' ? 'down' : 'up');
-            header.classList.add(direction);
-          }
-        }
-      }
-      lastScrollY.current = scrollY > 0 ? scrollY : 0;
-    },
-  };
-};

package/src/modules/virtuoso/useVirtuosoData.ts

@@ -1,66 +0,0 @@
-import { useMemo } from 'react';
-
-import { TVirtuosoData } from '@/modules/virtuoso/types';
-
-import { TActiveTab } from '@/system/Tabs/TabsNav/type';
-
-import { getPageSize } from '@/utils/getPageSizeAssets';
-
-export const useVirtuosoData = <TData>({
-  activeTab,
-  creations,
-  isMobile,
-  isThreeColumn,
-  isProfileCards,
-}: {
-  activeTab: TActiveTab;
-  isMobile: boolean;
-  creations: TData[];
-  isThreeColumn?: boolean;
-  isProfileCards?: boolean;
-}) => {
-  const virtuosoData: TVirtuosoData<TData> = useMemo(() => {
-    let columnCount = isMobile ? 2 : isThreeColumn ? 3 : 4;
-    if (isProfileCards) {
-      columnCount = isMobile ? 1 : 2;
-    }
-    const creationPacks: TData[][] = [];
-    let indexPack = 0;
-    creations.forEach((creation) => {
-      if (!creationPacks[indexPack]) {
-        creationPacks[indexPack] = [];
-      }
-      creationPacks[indexPack].push(creation);
-      if (creationPacks[indexPack].length >= columnCount) {
-        indexPack++;
-      }
-    });
-    return { creationPacks, creations };
-  }, [isMobile, creations, isProfileCards]);
-
-  const placeholderData = useMemo(() => {
-    const columnCount = isMobile ? 2 : isThreeColumn ? 3 : 4;
-
-    const creationPacks: number[][] = [[]];
-    let indexPack = 0;
-    Array.from({
-      length: getPageSize({
-        scrollTab: activeTab?.value,
-      }),
-    }).forEach((_, index) => {
-      if (!creationPacks[indexPack]) {
-        creationPacks[indexPack] = [];
-      }
-      creationPacks[indexPack].push(index);
-      if (creationPacks[indexPack].length >= columnCount) {
-        indexPack++;
-      }
-    });
-    return creationPacks;
-  }, [isMobile]);
-
-  return {
-    virtuosoData,
-    placeholderData,
-  };
-};

package/src/pages/index.tsx

@@ -1,15 +0,0 @@
-import Head from 'next/head';
-
-export default function Home() {
-  return (
-    <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <div>Hello</div>
-    </>
-  );
-}

package/src/store/index.ts

@@ -1,19 +0,0 @@
-import { createProvider } from 'next-zustand';
-
-export * from './ui';
-export * from './media';
-
-interface ISSRStore {
-  isMobile: boolean;
-  // setIsMobile: (isMobile: boolean) => void;
-}
-
-const creators = createProvider<ISSRStore>()((/*setState*/) => ({
-  isMobile: false,
-  // setIsMobile: (isMobile) => {
-  //   setState({ isMobile });
-  // },
-}));
-
-export const useSSRStore = creators.getUseStore();
-export const SSRProvider = creators.Provider;

package/src/store/media/index.ts

@@ -1,62 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import { IMediaStore, sourceType } from '@/store/media/types';
-
-export const useMediaStore = createWithEqualityFn<IMediaStore>()(
-  (setState) => ({
-    audioTracks: [],
-    setAudioTracks: (audioTracks) => {
-      setState({ audioTracks });
-    },
-    playAudioTrack: (audioSrc) => {
-      setState((prevStore) => {
-        const tracks = prevStore.audioTracks;
-        const ifExist = tracks.some((track) => {
-          return track.audioSrc === audioSrc;
-        });
-
-        if (!ifExist) {
-          const newTracks = [...tracks].map((track) => {
-            track.playing = false;
-            track.audio.currentTime = 0;
-            return track;
-          });
-          return {
-            ...prevStore,
-            audioTracks: [
-              ...newTracks,
-              {
-                audioSrc,
-                audio: new Audio(audioSrc),
-                playing: true,
-              } as sourceType,
-            ],
-          };
-        } else {
-          return {
-            ...prevStore,
-            audioTracks: [...tracks].map((track) => {
-              track.playing = track.audioSrc === audioSrc;
-              track.audio.currentTime = 0;
-              return track;
-            }),
-          };
-        }
-      });
-    },
-    pauseAudioTrack: (audioSrc) => {
-      setState((prevStore) => ({
-        ...prevStore,
-        audioTracks: [...prevStore.audioTracks].map((track) => {
-          if (track.audioSrc === audioSrc) {
-            track.playing = false;
-            track.audio.currentTime = 0;
-          }
-          return track;
-        }),
-      }));
-    },
-  }),
-  shallow
-);

package/src/store/media/types.ts

@@ -1,12 +0,0 @@
-export type sourceType = {
-  audioSrc: string;
-  audio: HTMLAudioElement;
-  playing: boolean;
-};
-
-export interface IMediaStore {
-  audioTracks: sourceType[];
-  setAudioTracks: (audioTracks: sourceType[]) => void;
-  playAudioTrack: (audioSrc: string) => void;
-  pauseAudioTrack: (audioSrc: string) => void;
-}

package/src/store/ui/index.ts

@@ -1,153 +0,0 @@
-import { shallow } from 'zustand/shallow';
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import { ThemeEnum } from '@ludo.ninja/core';
-import { createNotificationWithId } from '@ludo.ninja/ui/build/modules/notifications/createNotificationWithId';
-import { eventsTypes, sendEventToExtension } from '@ludo.ninja/utils';
-import { rootAddOverflow, rootRemoveOverflow } from '@ludo.ninja/utils';
-
-import { lightTheme } from '@/system/theme';
-
-import { IUiStore } from './types';
-import { builderModal } from './utils';
-
-export const useUiStore = createWithEqualityFn<IUiStore>()(
-  (setState) => ({
-    //theme
-    theme: lightTheme,
-    toggleTheme: (theme, themeName) => {
-      setState({ theme });
-      window.localStorage.setItem('theme', themeName as string);
-      if (themeName === ThemeEnum.dark) {
-        document.body.classList.add('dark-theme');
-      } else {
-        document.body.classList.remove('dark-theme');
-      }
-    },
-
-    //notifications
-    notifications: [],
-    addNotification: async (content) => {
-      if (process.env.NODE_ENV === 'development') {
-        return;
-      }
-      let isOpenNotification: boolean;
-      try {
-        const response = (await sendEventToExtension(
-          eventsTypes.pingVersion
-        )) as {
-          version: string;
-        };
-        isOpenNotification = !response?.version;
-      } catch (e) {
-        isOpenNotification = true;
-      }
-      if (isOpenNotification) {
-        await createNotificationWithId(async (data) => {
-          setState((prev) => ({
-            ...prev,
-            notifications: [data, ...prev.notifications],
-          }));
-        })(content);
-      }
-    },
-    removeNotification: (id) => {
-      setState((prev) => ({
-        ...prev,
-        notifications: prev.notifications.filter((el) => el.id !== id),
-      }));
-    },
-
-    //overlay
-    isOverlayActive: false,
-    openOverLay: () => {
-      rootAddOverflow();
-      setState({ isOverlayActive: true });
-    },
-    closeOverlay: () => {
-      rootRemoveOverflow();
-      setState({
-        isOverlayActive: false,
-        isModalOpen: false,
-        isSidebarOpen: false,
-        isModalSidebarOpen: false,
-        isOpenModalSidebarPortal: false,
-      });
-    },
-
-    //sidebar
-    isSidebarOpen: false,
-    openSidebar: () => {
-      rootAddOverflow();
-      setState({ isOverlayActive: true, isSidebarOpen: true });
-    },
-    closeSidebar: () => {
-      rootRemoveOverflow();
-      setState({ isOverlayActive: false, isSidebarOpen: false });
-    },
-
-    //alert
-    isAlertOpen: false,
-    alertType: null,
-    openAlert: (alertType) => {
-      setState({
-        isAlertOpen: true,
-        alertType,
-      });
-    },
-    closeAlert: () => {
-      setState({
-        isAlertOpen: false,
-        alertType: null,
-      });
-    },
-
-    //modals
-    contentModals: null,
-    stylesModals: null,
-
-    addStylesModals: (styles) => {
-      setState({ stylesModals: styles });
-    },
-
-    ...builderModal<
-      Pick<IUiStore, 'isModalOpen'>,
-      Pick<IUiStore, 'openModal'>,
-      Pick<IUiStore, 'closeModal'>
-    >(
-      {
-        trigger: 'isModalOpen',
-        opener: 'openModal',
-        closer: 'closeModal',
-      },
-      setState
-    ),
-
-    ...builderModal<
-      Pick<IUiStore, 'isModalSidebarOpen'>,
-      Pick<IUiStore, 'openModalSidebar'>,
-      Pick<IUiStore, 'closeModalSidebar'>
-    >(
-      {
-        trigger: 'isModalSidebarOpen',
-        opener: 'openModalSidebar',
-        closer: 'closeModalSidebar',
-      },
-      setState
-    ),
-
-    ...builderModal<
-      Pick<IUiStore, 'isOpenModalSidebarPortal'>,
-      Pick<IUiStore, 'openModalSidebarPortal'>,
-      Pick<IUiStore, 'closeModalSidebarPortal'>
-    >(
-      {
-        trigger: 'isOpenModalSidebarPortal',
-        opener: 'openModalSidebarPortal',
-        closer: 'closeModalSidebarPortal',
-      },
-      setState
-    ),
-  }),
-  shallow
-);

package/src/store/ui/types.ts

@@ -1,54 +0,0 @@
-import { CSSProperties } from 'react';
-
-import { DefaultTheme } from 'styled-components';
-
-import { ThemeEnum } from '@ludo.ninja/core';
-
-import { TNotificationData, TNotifications } from '@/modules/notifications';
-
-import { alertTypeProps } from '@/system/Alert/type';
-
-export interface IUiStore {
-  //styled-theme
-  theme: DefaultTheme;
-  toggleTheme: (theme: DefaultTheme, themeName: keyof typeof ThemeEnum) => void;
-
-  //notifications
-  notifications: TNotifications;
-  addNotification: (content: TNotificationData['content']) => Promise<void>;
-  removeNotification: (id: number) => void;
-
-  //overlay
-  isOverlayActive: boolean;
-  openOverLay: () => void;
-  closeOverlay: () => void;
-
-  //sidebar
-  isSidebarOpen: boolean;
-  openSidebar: () => void;
-  closeSidebar: () => void;
-
-  //alert
-  isAlertOpen: boolean;
-  alertType: alertTypeProps | null;
-  openAlert: (alertType: alertTypeProps) => void;
-  closeAlert: () => void;
-
-  //modals
-  contentModals: null | JSX.Element;
-
-  stylesModals: null | CSSProperties;
-  addStylesModals: (styles: CSSProperties) => void;
-
-  isModalOpen: boolean;
-  openModal: (component: JSX.Element) => void;
-  closeModal: () => void;
-
-  isModalSidebarOpen: boolean;
-  openModalSidebar: (component: JSX.Element) => void;
-  closeModalSidebar: () => void;
-
-  isOpenModalSidebarPortal: boolean;
-  openModalSidebarPortal: (component: JSX.Element) => void;
-  closeModalSidebarPortal: () => void;
-}