@ludo.ninja/components 0.5.0 → 1.0.0

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,52 @@
+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 = () => {
+  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() ? undefined : (
+            <SearchSimpleInput onFocusHandler={setInputFocused} />
+          );
+        },
+      }}
+      isSearchStyles
+      isActivatedTheme
+    />
+  );
+};
+
+// Export
+
+export default HeaderSearch;

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

@@ -0,0 +1,98 @@
+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;