@ludo.ninja/components 1.5.8 → 1.6.0

package/src/system/Cards/CardContent/CardShowMore/index.tsx

@@ -1,139 +0,0 @@
-import styled from 'styled-components';
-
-import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { copyToClipboard } from '@ludo.ninja/utils';
-
-import { useUiStore } from '@/store/ui';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BackgroundColorLight, BlackColor } from '@/styles/colors';
-import { TextSmall } from '@/styles/typography';
-
-import { dmsansFontVarCss } from '@/fonts/vars';
-
-import MoreButtonIcon from '@/public/creation/card/moreBtnVertical.svg';
-
-// Styles
-
-export const StyledCardShowMore = styled.div`
-  .cardShowMore {
-    position: relative;
-    cursor: pointer;
-    z-index: 100;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 40px;
-      height: 40px;
-      z-index: -1;
-    }
-
-    @media (max-width: 1200px) {
-      display: none;
-    }
-
-    &DropDown {
-      font-family: ${dmsansFontVarCss.css};
-      display: none;
-      position: absolute;
-      background-color: white;
-      top: 20px;
-      left: -170px;
-      width: 184px;
-      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);
-      border-radius: 6px;
-      padding: 8px;;
-
-      &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: -15px;
-        height: 15px;
-        width: 100%;
-      }
-
-      &Item {
-        ${TextSmall};
-        display: block;
-        padding: 6px 0 6px 8px;
-        color: #696f91;
-
-        &:hover {
-          border-radius: 4px;
-          color: ${BlackColor};
-          background-color: ${BackgroundColorLight};
-        }
-      }
-    }
-
-    &:hover > div {
-      display: block;
-      z-index: 100000;
-    }
-    ${mediaQuery.minWidthFourK} {
-      &:before {
-        width: ${adaptiveValueCalc(40)};
-        height:  ${adaptiveValueCalc(40)};
-      }
-      &DropDown {
-        top: ${adaptiveValueCalc(20)};
-        left:${adaptiveValueCalc(-170)};
-        width: ${adaptiveValueCalc(184)};
-        box-shadow: 0px 0px ${adaptiveValueCalc(10)} ${adaptiveValueCalc(
-  5
-)} rgba(33, 21, 95, 0.1);
-        border-radius: ${adaptiveValueCalc(6)};
-        padding: ${adaptiveValueCalc(8)};
-
-        &:before {
-          top: ${adaptiveValueCalc(-15)};
-          height: ${adaptiveValueCalc(15)};
-        }
-
-        &Item {
-          padding: ${adaptiveValueCalc(6)} 0 ${adaptiveValueCalc(
-  6
-)} ${adaptiveValueCalc(8)};
-          &:hover {
-            border-radius: ${adaptiveValueCalc(4)};
-          }
-        }
-      }
-    }
-  }
-}
-`;
-// Component
-const CardShowMore = ({ itemId, href }: { itemId: string; href: string }) => {
-  const openAlert = useUiStore((state) => state.openAlert);
-  const copyAssetLinkToClipboard = (e: { preventDefault: () => void }) => {
-    e.preventDefault();
-    copyToClipboard(`${window.location.origin}${href}`);
-    openAlert({
-      type: alertVariants.copied,
-    });
-  };
-  return (
-    <StyledCardShowMore>
-      <div className="cardShowMore">
-        <MoreButtonIcon />
-        <div
-          className={`cardShowMoreDropDown`}
-          id={itemId}
-          onClick={copyAssetLinkToClipboard}
-        >
-          <span className={'cardShowMoreDropDownItem'}>Copy link</span>
-        </div>
-      </div>
-    </StyledCardShowMore>
-  );
-};
-// Export
-
-export default CardShowMore;

package/src/system/Cards/CardContent/index.tsx

@@ -1,167 +0,0 @@
-import React from 'react';
-
-import { useRouter } from 'next/router';
-
-import styled from 'styled-components';
-
-import { IWallet } from '@ludo.ninja/api/build/graphql_tools/__generated__/galleriesHost/schema';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { isContainChinese, shortenedText } from '@ludo.ninja/utils';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-import { FH5, TextSmall } from '@/styles/typography';
-
-import CardShowMore from '@/system/Cards/CardContent/CardShowMore';
-
-import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
-
-// Styles
-
-const StyledCardContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 12px 16px;
-  min-height: 94px;
-  flex-grow: 1;
-  justify-content: end;
-
-  .cardContent {
-    display: flex;
-    justify-content: space-between;
-
-    .cardContentWrapper {
-      .mainName {
-        font-family: ${dmsansFontVarCss.css};
-        ${TextSmall};
-        color: ${TextGrayColor};
-        font-size: 13px;
-        margin-bottom: 0;
-      }
-
-      .secondName {
-        font-family: ${poppinsFontVarCss.css};
-        ${FH5};
-        color: ${BlackColor};
-        font-size: 15px;
-      }
-    }
-  }
-
-  .creatorName {
-    ${TextSmall};
-    color: ${TextGrayColor};
-    line-height: 1.39em;
-  }
-
-  @media (max-width: 1040px) {
-    height: auto;
-    padding: 12px;
-  }
-  @media (max-width: 767px) {
-    min-height: 84px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    padding: ${adaptiveValueCalc(12)} ${adaptiveValueCalc(16)};
-    min-height: ${adaptiveValueCalc(94)};
-
-    .cardContent {
-      .cardContentWrapper {
-        .mainName {
-          font-size: ${adaptiveValueCalc(13)};
-        }
-
-        .secondName {
-          font-size: ${adaptiveValueCalc(15)};
-        }
-      }
-    }
-  }
-`;
-
-// Component
-
-const CardContent = ({
-  firstName,
-  creationName,
-  cuttedSecondName: cuttedShowcaseName,
-  children,
-  isNeedShowMoreButton,
-  itemId,
-  wallets,
-  creatorName,
-  href,
-}: {
-  href?: string;
-  creationName?: string | undefined;
-  firstName?: string | null;
-  secondName?: string | null;
-  cuttedSecondName?: string | null;
-  children: React.ReactNode;
-  userCreationAddresses?: string;
-  wallets?: IWallet[];
-  isNeedShowMoreButton: boolean;
-  actionIsNeedRenderCheckbox?: (isNeedToShow: boolean, itemId?: string) => void;
-  itemId: string;
-  creatorName?: string;
-}) => {
-  const router = useRouter();
-  const isGalleryAndFavPage =
-    router.pathname.includes('galleries') ||
-    router.pathname.includes('favorite-lists');
-  const wallet = wallets && wallets[0]?.address;
-
-  return (
-    <StyledCardContent>
-      <div className="cardContent">
-        <div className="cardContentWrapper">
-          {isGalleryAndFavPage ? (
-            <>
-              {firstName && (
-                <p className={`secondName`}>
-                  {firstName.length > 20 ? shortenedText(firstName) : firstName}
-                </p>
-              )}
-              <h3 className={`mainName`}>
-                {cuttedShowcaseName
-                  ? cuttedShowcaseName.length > 20
-                    ? shortenedText(cuttedShowcaseName)
-                    : cuttedShowcaseName
-                  : shortenedText(wallet as string)}
-              </h3>
-            </>
-          ) : (
-            <>
-              {creatorName ? (
-                <p className="creatorName">{creatorName}</p>
-              ) : (
-                firstName && (
-                  <p className={`mainName`}>
-                    {creationName
-                      ? creationName
-                      : firstName.length > 20
-                      ? shortenedText(firstName)
-                      : firstName}
-                  </p>
-                )
-              )}
-              <h3 className={`secondName`}>
-                {cuttedShowcaseName && isContainChinese(cuttedShowcaseName)
-                  ? cuttedShowcaseName.substring(0, 9)
-                  : cuttedShowcaseName}
-              </h3>
-            </>
-          )}
-        </div>
-        {isNeedShowMoreButton && (
-          <CardShowMore href={href as string} itemId={itemId} />
-        )}
-      </div>
-      {children}
-    </StyledCardContent>
-  );
-};
-// Export
-
-export default CardContent;

package/src/system/Cards/CardHeadIcons/index.tsx

@@ -1,159 +0,0 @@
-import React from 'react';
-
-import { useRouter } from 'next/router';
-
-import { useUserStore } from '@/modules/user/store';
-
-import { useUiStore } from '@/store/ui';
-
-import { ScreenWidth } from '@/styles/ScreenWidth';
-
-import AddCreationToFavoriteList from '@/components/favoriteList/add/addCreationToFavoriteList';
-
-import CardRank from '@/system/Cards/CardRank';
-import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
-
-import { redirectToLoginWindow } from '@/utils/auth';
-import { isProd } from '@/utils/env';
-import { getWindowDimensions } from '@/utils/screen';
-
-import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
-import CreationEntity from '@/dto/CreationEntity';
-import { LabelKeys } from '@/dto/common/ItemType';
-
-import AddToFavListIcon from '@/public/cards/addToFavListIcon.svg';
-import AddToGalleryIcon from '@/public/cards/addToGalleryIcon.svg';
-import AddToLikesIcon from '@/public/cards/heart.svg';
-
-// Component
-
-const CardHeadIcons = ({
-  creation,
-  isRegularCard,
-  isIconLiked,
-  addLikeToCard,
-  deleteLikeFromCard,
-  actionIsNeedRenderCheckbox,
-  itemId,
-  isUserProfile,
-  isDisabled,
-  isProdENV,
-}: {
-  creation: CreationEntity | CollectionCreationEntity;
-  isRegularCard: boolean;
-  isIconLiked: boolean;
-  addLikeToCard: (id: string) => void;
-  deleteLikeFromCard: (id: string) => void;
-  actionIsNeedRenderCheckbox?: (isNeedToShow: boolean, itemId?: string) => void;
-  itemId: string;
-  isUserProfile: boolean;
-  isDisabled?: boolean;
-  isProdENV: string;
-}) => {
-  const openModalSidebarPortal = useUiStore(
-    (state) => state.openModalSidebarPortal
-  );
-  const isSignedIn = useUserStore((state) => state.isSignedIn);
-
-  const isLicked = isIconLiked && isSignedIn;
-  const { windowWidth } = getWindowDimensions();
-  const isMobile =
-    windowWidth <= ScreenWidth.TABLET || windowWidth <= ScreenWidth.DESKTOP;
-  const router = useRouter();
-  const isGallery = router.pathname.includes('gallery');
-  const handleClick = async (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
-    type: string
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (!isSignedIn) {
-      redirectToLoginWindow();
-    } else if (type === 'fav-list') {
-      openModalSidebarPortal(
-        <AddCreationToFavoriteList
-          ids={[
-            creation instanceof CollectionCreationEntity
-              ? `${creation.getItemType() + '.' + creation.getCreationId()}`
-              : creation.getCreationId(),
-          ]}
-        />
-      );
-    } else if (type === 'likes') {
-      if (!isLicked) {
-        await addLikeToCard(
-          creation instanceof CollectionCreationEntity &&
-            creation.getItemType() !== LabelKeys.collection
-            ? creation.getCollectionCreationId()
-            : creation.getItemId()
-        );
-      } else {
-        await deleteLikeFromCard(
-          creation instanceof CollectionCreationEntity &&
-            creation.getItemType() !== LabelKeys.collection
-            ? creation.getCollectionCreationId()
-            : creation.getItemId()
-        );
-      }
-    } else if (type === 'gallery') {
-      actionIsNeedRenderCheckbox && actionIsNeedRenderCheckbox(true, itemId);
-    }
-  };
-
-  const renderLikeButton = () => {
-    if (creation.getItemType() === LabelKeys.asset || LabelKeys.collection) {
-      return (
-        <div
-          className={`icon like ${isLicked ? 'liked' : ''}`}
-          onClick={(e) => handleClick(e, 'likes')}
-        >
-          <AddToLikesIcon />
-        </div>
-      );
-    }
-  };
-
-  return (
-    <StyledHeadIcons
-      isMobile={isMobile}
-      style={
-        isDisabled
-          ? {
-              pointerEvents: 'none',
-            }
-          : {}
-      }
-    >
-      <div className={'rank'}>
-        <CardRank rank={creation.getRank()} />
-      </div>
-      {/* // Todo cardHeadIcons */}
-      {!isProd({ ENV: isProdENV }) && (
-        <div className="icons">
-          <div
-            className="icon"
-            onClick={(e) =>
-              handleClick(
-                e,
-                isRegularCard || !isUserProfile || isGallery
-                  ? 'fav-list'
-                  : 'gallery'
-              )
-            }
-          >
-            {isRegularCard || !isUserProfile || isGallery ? (
-              <AddToFavListIcon />
-            ) : (
-              <AddToGalleryIcon />
-            )}
-          </div>
-          {renderLikeButton()}
-        </div>
-      )}
-    </StyledHeadIcons>
-  );
-};
-// Export
-
-export default CardHeadIcons;

package/src/system/Cards/CardMedia/CardAudio/index.tsx

@@ -1,118 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import Skeleton from 'react-loading-skeleton';
-
-import { useMediaStore } from '@/store/media';
-
-import StyledImg from '@/system/Cards/Styles/Image';
-
-import { getWindowDimensions } from '@/utils/screen';
-
-import PauseIcon from '@/public/video/pause.svg';
-import PlayIcon from '@/public/video/play.svg';
-
-// Component
-
-const CardAudio = ({
-  audioSrc,
-  imgSrc,
-  errorImg,
-  alt,
-}: {
-  audioSrc: string;
-  imgSrc: string;
-  errorImg: string;
-  alt: string;
-}) => {
-  const [lImgSrc, setLImgSrc] = useState<string>('');
-  const { windowWidth } = getWindowDimensions();
-  const isMobile = windowWidth <= 768;
-  const imageDimensions = isMobile ? '?d=164x164' : '?d=252x252';
-  const [isPauseIcon, setPauseIcon] = useState<boolean>(false);
-  const [lAudioSrc, setLAudioSrc] = useState<string | null>(null);
-  const { playAudioTrack, pauseAudioTrack, tracks } = useMediaStore(
-    (state) => ({
-      playAudioTrack: state.playAudioTrack,
-      pauseAudioTrack: state.pauseAudioTrack,
-      tracks: state.audioTracks,
-    })
-  );
-
-  useEffect(() => {
-    const audioElement = new Audio(audioSrc);
-
-    audioElement.addEventListener('canplay', () => {
-      setLAudioSrc(audioSrc);
-    });
-
-    const image = new Image();
-    image.src = imgSrc as string;
-    image.onload = () => setLImgSrc(`${image.src}${imageDimensions}`);
-    image.onerror = () => setLImgSrc(`${errorImg}${imageDimensions}`);
-
-    return () =>
-      audioElement.removeEventListener('canplay', () => {
-        setLAudioSrc(null);
-      });
-  }, []);
-
-  useEffect(() => {
-    const isNeedSetPlayBtn = tracks.some((track) => {
-      return track.audioSrc === lAudioSrc && !track.playing;
-    });
-
-    if (isNeedSetPlayBtn) {
-      setPauseIcon(false);
-    }
-  }, [tracks]);
-
-  const handlePause = (e: {
-    preventDefault: () => void;
-    stopPropagation: () => void;
-  }) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setPauseIcon(false);
-    pauseAudioTrack(lAudioSrc as string);
-  };
-
-  const handlePlay = (e: {
-    preventDefault: () => void;
-    stopPropagation: () => void;
-  }) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setPauseIcon(true);
-    playAudioTrack(lAudioSrc as string);
-  };
-
-  const renderPlayPauseIcon = () => {
-    return isPauseIcon ? (
-      <PauseIcon
-        className={'pauseIcon'}
-        onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => handlePause(e)}
-      />
-    ) : (
-      <PlayIcon
-        className={'playIcon'}
-        onClick={(e: React.MouseEvent<HTMLOrSVGElement>) => handlePlay(e)}
-      />
-    );
-  };
-
-  return lImgSrc.length ? (
-    <>
-      <StyledImg
-        src={imgSrc}
-        alt={alt}
-        isLoading={lAudioSrc as unknown as boolean}
-      />
-      {lAudioSrc?.length && renderPlayPauseIcon()}
-    </>
-  ) : (
-    <Skeleton height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }} />
-  );
-};
-// Export
-
-export default CardAudio;

package/src/system/Cards/CardMedia/CardImage/index.tsx

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-
-import Skeleton from 'react-loading-skeleton';
-
-import StyledImg from '@/system/Cards/Styles/Image';
-
-// Component
-
-const CardImage = ({
-  imgSrc,
-  errorImg,
-  alt,
-}: {
-  imgSrc: string;
-  errorImg: string;
-  alt: string;
-}) => {
-  const [loading, setLoading] = useState<boolean>(true);
-
-  return (
-    <>
-      {loading && (
-        <Skeleton
-          height={'100%'}
-          width={'100%'}
-          style={{
-            lineHeight: 'normal',
-            visibility: `${loading ? 'hidden' : 'visible'}`,
-          }}
-        />
-      )}
-      <StyledImg
-        isLoading={loading}
-        src={imgSrc}
-        alt={alt}
-        onError={(e) => ((e.target as HTMLImageElement).src = errorImg)}
-        onLoad={() => setLoading(false)}
-      />
-    </>
-  );
-};
-// Export
-
-export default CardImage;