@ludo.ninja/components 1.5.7 → 1.5.9

package/src/components/forms/types/index.ts

@@ -1,50 +0,0 @@
-import { RegisterOptions } from 'react-hook-form/dist/types/validator';
-
-export type FormSection = 'register' | 'another';
-
-export enum FormsNavigationTabs {
-  opportunity = 'opportunity',
-  contactSupport = 'contactSupport',
-  registrationRequest = 'registrationRequest',
-  report = 'report',
-  feedback = 'feedback',
-  partnership = 'partnership',
-  investor = 'investor',
-}
-
-export interface InputProps {
-  type:
-    | 'text'
-    | 'textArea'
-    | 'date'
-    | 'radio'
-    | 'email'
-    | 'password'
-    | 'select'
-    | 'checkbox';
-  name: string;
-  value: string | number | boolean;
-  placeholder?: string;
-  label?: string;
-
-  typeValue?: 'boolean' | 'number';
-  validations?: RegisterOptions;
-  options?: Opt[];
-}
-
-export interface Opt {
-  value: string | number;
-  desc: string;
-}
-
-export interface Validation {
-  type: 'required' | 'isEmail' | 'minLength' | 'isTrue' | 'oneOf';
-  value?: string | number | boolean;
-  message: string;
-  ref?: string;
-}
-
-export type CustomInputProps = Omit<
-  InputProps,
-  'validations' | 'typeValue' | 'value'
->;

package/src/components/gallery/add/addAssetToGallery/index.tsx

@@ -1,60 +0,0 @@
-import React, { useState } from 'react';
-
-import ChooseGalleryItems from '@/modules/gallery/ui/chooseGalleryItems';
-import CreateGalleryForm from '@/modules/gallery/ui/createGalleryForm';
-
-import { useUiStore } from '@/store/ui';
-
-import { useAddAssetsToGalleryV2 } from '@/api/server-galleries/mutations/useAddAssetsToGallery';
-import { useCreateGalleryV2 } from '@/api/server-galleries/mutations/useCreateGallery';
-
-// Interface
-interface Props {
-  ids: string[];
-}
-
-// Component
-
-const AddAssetToGallery: React.FC<Props> = ({ ids }) => {
-  const [isNeedAddGallery, setAddGallery] = useState<boolean>(false);
-  const { createGallery, errorCreateGallery } = useCreateGalleryV2();
-  const { addAssetsToGallery, isAdded, error } = useAddAssetsToGalleryV2();
-  const closeModalSidebarPortal = useUiStore(
-    (state) => state.closeModalSidebarPortal
-  );
-
-  const addMethod = async (galleryId: string, ids: string[]) => {
-    await addAssetsToGallery({ galleryId, assetIds: ids });
-    setTimeout(() => closeModalSidebarPortal(), 900);
-  };
-
-  return (
-    <div>
-      {isNeedAddGallery ? (
-        <CreateGalleryForm
-          setAddGallery={setAddGallery}
-          title={'Create Gallery'}
-          inputPlaceHolderText={'Gallery Name'}
-          // ids={ids}
-          createMethod={createGallery}
-          error={errorCreateGallery}
-        />
-      ) : (
-        <ChooseGalleryItems
-          setAddGallery={setAddGallery}
-          title={'Add to Gallery'}
-          titleBtn={'+ New Gallery'}
-          ids={ids}
-          addMethod={addMethod}
-          isAdded={isAdded}
-          error={error}
-          isGetMyGalleries
-        />
-      )}
-    </div>
-  );
-};
-
-// Export
-
-export default AddAssetToGallery;

package/src/components/gallery/add/addCreationToGallery/index.tsx

@@ -1,95 +0,0 @@
-import React, { useState } from 'react';
-
-import styled from 'styled-components';
-
-import { useToGalleryStore } from '@/hooks/useToGalleryAsset';
-
-import ChooseGalleryItems from '@/modules/gallery/ui/chooseGalleryItems';
-import CreateGalleryForm from '@/modules/gallery/ui/createGalleryForm';
-import ItemsPreview from '@/modules/gallery/ui/itemsPreview';
-
-import { useUiStore } from '@/store/ui';
-
-import { useAddCreationsToGalleryV2 } from '@/api/server-galleries/mutations/useAddCreationsToGallery';
-import { useCreateGalleryV2 } from '@/api/server-galleries/mutations/useCreateGallery';
-
-// Styles
-
-const StyledAddGallery = styled.div`
-  display: flex;
-
-  @media (max-width: 767px) {
-    flex-direction: column;
-  }
-`;
-
-// Component
-
-const AddCreationToGallery = () => {
-  const {
-    removeCreationFromGalleryWithCallback,
-    creationsToGallery,
-    resetCreationsInGallery: actionResetCheckboxes,
-  } = useToGalleryStore((state) => ({
-    resetCreationsInGallery: state.resetCreationsInGallery,
-    creationsToGallery: state.creationsToGallery,
-    removeCreationFromGalleryWithCallback:
-      state.removeCreationFromGalleryWithCallback,
-  }));
-
-  const { createGallery, errorCreateGallery } = useCreateGalleryV2();
-  const closeModalSidebarPortal = useUiStore(
-    (state) => state.closeModalSidebarPortal
-  );
-  const [isNeedAddGallery, setAddGallery] = useState<boolean>(false);
-  const { addCreationsToGallery, isAdded, error } =
-    useAddCreationsToGalleryV2();
-
-  const addMethod = async (galleryId: string, ids: string[]) => {
-    await addCreationsToGallery({ galleryId, creationIds: ids });
-    actionResetCheckboxes();
-    closeModalSidebarPortal();
-  };
-
-  const ids = creationsToGallery.map((creations) => creations.getCreationId());
-
-  return (
-    <StyledAddGallery>
-      <ItemsPreview
-        creations={creationsToGallery}
-        title={'Add to Gallery'}
-        deleteMethod={(itemId) => {
-          removeCreationFromGalleryWithCallback(
-            itemId,
-            closeModalSidebarPortal
-          );
-        }}
-      />
-      {isNeedAddGallery ? (
-        <CreateGalleryForm
-          setAddGallery={setAddGallery}
-          // ids={ids as string[]}
-          title={'Create Gallery'}
-          createMethod={createGallery}
-          inputPlaceHolderText={'Gallery Name'}
-          error={errorCreateGallery}
-        />
-      ) : (
-        <ChooseGalleryItems
-          setAddGallery={setAddGallery}
-          title={'Choose Gallery'}
-          titleBtn={'+ New Gallery'}
-          ids={ids as string[]}
-          addMethod={addMethod}
-          isAdded={isAdded}
-          error={error}
-          isGetMyGalleries
-        />
-      )}
-    </StyledAddGallery>
-  );
-};
-
-// Export
-
-export default AddCreationToGallery;

package/src/components/gradientLabel/index.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-import BoxShadow from '@/styles/mixins/boxShadow';
-import BoxTransform from '@/styles/mixins/boxTransform';
-
-import { H3 } from '@system';
-
-import { poppinsFontVarCss } from '@/fonts/vars';
-
-// Styles
-
-const StyledGradientLabel = styled(H3)`
-  font-family: ${poppinsFontVarCss.css};
-  user-select: none;
-  border-radius: 24px;
-  ${BoxShadow};
-  ${BoxTransform};
-  display: inline-block;
-  padding: 5px 16px;
-  background: linear-gradient(
-    89deg,
-    rgba(190, 249, 209, 0.6) 6.88%,
-    rgba(98, 218, 255, 0.6) 53.34%,
-    rgba(171, 228, 251, 0.6) 93.43%
-  );
-  color: #5748bc;
-`;
-
-// Component
-
-const GradientLabel = () => {
-  return <StyledGradientLabel>5 invites</StyledGradientLabel>;
-};
-// Export
-export default GradientLabel;

package/src/components/headers/components/headerExperienceLabel/index.tsx

@@ -1,40 +0,0 @@
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { useUserStore } from '@/modules/user/store';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import ExperienceLabel from '@/system/Labels/ExperienceLabel';
-
-// Styles
-const StyledHeaderExperienceLabel = styled.div`
-  margin-right: 20px;
-  ${mediaQuery.minWidthFourK} {
-    margin-right: ${adaptiveValueCalc(20)};
-  }
-`;
-// Component
-const HeaderExperienceLabel = ({ userId }: { userId?: string }) => {
-  const { userExp, isLoadingExp, errorExp } = useUserStore((state) => ({
-    userExp: state.userExp,
-    isLoadingExp: state.isLoadingExp,
-    errorExp: state.errorExp,
-  }));
-  if (!userId) return null;
-
-  return (
-    <StyledHeaderExperienceLabel>
-      <ExperienceLabel
-        value={userExp.xps}
-        link={`/rewards/${userId}`}
-        loading={isLoadingExp || (!!errorExp as unknown as boolean)}
-      />
-    </StyledHeaderExperienceLabel>
-  );
-};
-
-// Export
-
-export default HeaderExperienceLabel;

package/src/components/headers/components/headerUserPic/index.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import UserPic from '@/system/Img/Userpic';
-
-// Styles
-const StyledHeaderUserPick = styled.div`
-  margin-right: 24px;
-
-  ${mediaQuery.mobile} {
-    margin-right: 8px;
-  }
-  ${mediaQuery.minWidthFourK} {
-    margin-right: ${adaptiveValueCalc(24)};
-  }
-`;
-
-// Component
-const HeaderUserPick = ({ userId }: { userId?: string }) => {
-  if (!userId) return null;
-
-  return (
-    <StyledHeaderUserPick>
-      <UserPic
-        width={32}
-        height={32}
-        userId={userId}
-        isNeedBoxTransform={true}
-      />
-    </StyledHeaderUserPick>
-  );
-};
-
-// Export
-
-export default HeaderUserPick;

package/src/components/headers/header/index.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import Link from 'next/link';
-
-import { Header as HeaderUi } from '@ludo.ninja/ui/build/components/header';
-
-import { useUserStore } from '@/modules/user/store';
-
-import { useUiStore } from '@/store/ui';
-
-import HeaderExperienceLabel from '@/components/headers/components/headerExperienceLabel';
-import HeaderUserPick from '@/components/headers/components/headerUserPic';
-
-import { redirectToLoginWindow } from '@/utils/auth';
-
-// Component
-const Header = () => {
-  const isSignedIn = useUserStore((state) => state.isSignedIn);
-  const getUser = useUserStore((state) => state.user);
-
-  const openSidebar = useUiStore((state) => state.openSidebar);
-
-  return (
-    <HeaderUi
-      isAuthorized={isSignedIn}
-      handle={{
-        login: redirectToLoginWindow,
-        openSidebar,
-      }}
-      slots={{
-        headerExpLabel: (
-          <HeaderExperienceLabel userId={getUser?.userId || ''} />
-        ),
-        headerUserPick: <HeaderUserPick userId={getUser?.userId || ''} />,
-        logoLinkComponent: ({ children }) => <Link href={'/'}>{children}</Link>,
-      }}
-    />
-  );
-};
-
-// Export
-
-export default Header;

package/src/components/headers/headerSearch/index.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import Link from 'next/link';
-
-import { Header as HeaderUi } from '@ludo.ninja/ui/build/components/header';
-
-import { useUserStore } from '@/modules/user/store';
-
-import { useUiStore } from '@/store/ui';
-
-import HeaderExperienceLabel from '@/components/headers/components/headerExperienceLabel';
-import HeaderUserPick from '@/components/headers/components/headerUserPic';
-import SearchSimpleInput from '@/components/search/searchSimpleInput';
-
-import { redirectToLoginWindow } from '@/utils/auth';
-import { isProd } from '@/utils/env';
-
-// Component
-const HeaderSearch = ({ isProdENV }: { isProdENV: string }) => {
-  const openSidebar = useUiStore((state) => state.openSidebar);
-  const isSignedIn = useUserStore((state) => state.isSignedIn);
-  const getUser = useUserStore((state) => state.user);
-
-  return (
-    <HeaderUi
-      isAuthorized={isSignedIn}
-      handle={{
-        login: redirectToLoginWindow,
-        openSidebar,
-      }}
-      slots={{
-        headerExpLabel: (
-          <HeaderExperienceLabel userId={getUser?.userId || ''} />
-        ),
-        headerUserPick: <HeaderUserPick userId={getUser?.userId || ''} />,
-        logoLinkComponent: ({ children }) => <Link href={'/'}>{children}</Link>,
-        searchInput: ({ setInputFocused }) => {
-          // Todo seacrh pages, hide search input from header
-          return isProd({ ENV: isProdENV }) ? undefined : (
-            <SearchSimpleInput onFocusHandler={setInputFocused} />
-          );
-        },
-      }}
-      isSearchStyles
-      isActivatedTheme
-    />
-  );
-};
-
-// Export
-
-export default HeaderSearch;

package/src/components/headers/headerSimple/index.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-
-import Image from 'next/image';
-import Link from 'next/link';
-
-import styled from 'styled-components';
-
-import { useScrollDirection } from '@ludo.ninja/utils';
-
-import { BackgroundColorLight } from '@/styles/colors';
-
-import { getWindowDimensions } from '@/utils/screen';
-
-// Styles
-const StyledHeaderSimple = styled.header`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 2;
-  padding: 38px 14px 14px 14px;
-  background: ${BackgroundColorLight};
-  transition: transform 0.5s ease, top 0.5s ease;
-  width: 92.67%;
-  margin: 0 auto;
-  top: 24px;
-  left: 42px;
-  right: 42px;
-  position: fixed;
-
-  &.up {
-    top: 0;
-    transition: top 0.4s ease-out;
-
-    @media (max-width: 767px) {
-      top: 0;
-    }
-  }
-
-  &.down {
-    top: -92px;
-    transition: top 0.4s ease-out;
-  }
-
-  .logo {
-    width: 116px;
-    height: 28px;
-    a {
-      height: 100%;
-      display: block;
-    }
-  }
-
-  @media (max-width: 767px) {
-    padding: 20px;
-    margin: 0;
-    width: 100%;
-    left: 0;
-    right: 0;
-
-    .logo {
-      width: 32px;
-      height: 32px;
-    }
-  }
-`;
-
-// Component
-const HeaderSimple = () => {
-  const { windowWidth } = getWindowDimensions();
-
-  const renderDesktopLogoOrMobile = () => {
-    const isMobile = windowWidth <= 768;
-
-    return (
-      <Image
-        width={isMobile ? 31 : 116}
-        height={isMobile ? 32 : 28}
-        priority={true}
-        src={isMobile ? '/logo/mobile_logo.svg' : '/logo/main_logo.svg'}
-        alt="Ludo - a right place for NFT art"
-      />
-    );
-  };
-
-  const scrollDirection = useScrollDirection();
-
-  return (
-    <StyledHeaderSimple className={scrollDirection}>
-      <div className={'logo'}>
-        <Link href={'/'}>{renderDesktopLogoOrMobile()}</Link>
-      </div>
-    </StyledHeaderSimple>
-  );
-};
-
-// Export
-
-export default HeaderSimple;