@ludo.ninja/components 1.5.8 → 1.6.0

package/src/system/Tabs/TabsNav/index.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-import TabsNavLink from '@/system/Tabs/TabNavLink';
-import { TActiveTab, TabsNavType } from '@/system/Tabs/TabsNav/type';
-
-// Styles
-
-export const StyledTabsNav = styled.div`
-  position: relative;
-  display: flex;
-
-  @media (max-width: 767px) {
-    width: 310px;
-    overflow: hidden;
-    margin: 0 auto;
-  }
-`;
-
-// Interface
-interface Props {
-  tabsData: TabsNavType[];
-  activeTab: TActiveTab;
-  setActiveTab?: (tab: TabsNavType) => void;
-}
-
-// Component
-
-const TabsNav: React.FC<Props> = ({ tabsData, activeTab, setActiveTab }) => {
-  const renderSortItems = () => {
-    return tabsData.map((data: TabsNavType) => {
-      return (
-        <TabsNavLink
-          key={data.id}
-          activeNavLink={activeTab?.id === data.id}
-          tabNavLink={data}
-          setActiveTab={setActiveTab}
-        />
-      );
-    });
-  };
-  return <StyledTabsNav>{renderSortItems()}</StyledTabsNav>;
-};
-// Export
-
-export default TabsNav;

package/src/system/Tabs/TabsNav/type.ts

@@ -1,7 +0,0 @@
-export type TabsNavType = {
-  id: number;
-  label: string;
-  value?: string;
-};
-
-export type TActiveTab = TabsNavType | null;

package/src/system/Tabs/TabsPanel/TabsPanel.test.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import '@testing-library/jest-dom/extend-expect';
-import { render, screen } from '@testing-library/react';
-import 'jest-styled-components';
-
-import TabPanel from '../TabsPanel';
-
-describe('TabPanel Component', () => {
-  test('renders children when isActive is true', () => {
-    render(
-      <TabPanel isActive={true}>
-        <div>Content</div>
-      </TabPanel>
-    );
-
-    const content = screen.getByText('Content');
-    expect(content).toBeInTheDocument();
-  });
-
-  test('does not render children when isActive is false', () => {
-    render(
-      <TabPanel isActive={false}>
-        <div>Content</div>
-      </TabPanel>
-    );
-
-    const content = screen.queryByText('Content');
-    expect(content).not.toBeInTheDocument();
-  });
-
-  test('applies correct styles based on isActive prop', () => {
-    const { rerender } = render(
-      <TabPanel isActive={true}>
-        <div>Content</div>
-      </TabPanel>
-    );
-
-    const activePanel = screen.getByText('Content').parentElement;
-    expect(activePanel).toHaveStyleRule('display', 'block');
-
-    rerender(
-      <TabPanel isActive={false}>
-        <div>Content</div>
-      </TabPanel>
-    );
-
-    const inactivePanel = screen.queryByText('Content')?.parentElement;
-    if (inactivePanel) {
-      expect(inactivePanel).toHaveStyleRule('display', 'none');
-    }
-  });
-});

package/src/system/Tabs/TabsPanel/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-// Styles
-
-const StyledTabPanel = styled.div<{ isActive: boolean }>`
-  display: ${(props) => (props.isActive ? 'block' : 'none')};
-`;
-
-interface Props {
-  isActive: boolean;
-  children: React.ReactNode;
-}
-
-// Component
-
-const TabPanel: React.FC<Props> = ({ isActive, children }) => {
-  return (
-    <StyledTabPanel isActive={isActive}>{isActive && children}</StyledTabPanel>
-  );
-};
-// Export
-
-export default TabPanel;

package/src/system/index.ts

@@ -1,22 +0,0 @@
-export * from '@ludo.ninja/ui/build/system/Box';
-export * from '@ludo.ninja/ui/build/system/Flex';
-export * from '@ludo.ninja/ui/build/system/Grid';
-export * from './Img';
-export * from './theme';
-export * from './Tabs';
-export * from './Buttons';
-export * from './Cards';
-export * from './Forms';
-export * from './Palete';
-export * from './Filters';
-export { default as CardsHolder } from './CardsHolderWithSkeleton/CardsHolder';
-export { default as Palete } from './Palete';
-export { default as CardsError } from './CardsHolderWithSkeleton/CardsHolder/CardsError';
-export { default as CardsNoResults } from './CardsHolderWithSkeleton/CardsHolder/CardsNoResults';
-export { default as CardsSkeleton } from './CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
-export { CardSkeleton } from './CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
-export { default as CardsHolderLoader } from './CardsHolderWithSkeleton/CardsHolderLoader';
-export { default as CardsHolderWithSkeleton } from './CardsHolderWithSkeleton';
-
-
-

package/src/system/theme.ts

@@ -1,5 +0,0 @@
-export {
-  mainTheme,
-  lightTheme,
-  darkTheme,
-} from '@ludo.ninja/ui/build/system/theme';

package/src/types/global.d.ts

@@ -1,20 +0,0 @@
-export {};
-
-declare global {
-  interface Window {
-    markerConfig: { destination: string; source: string };
-    elrondWallet: { extensionId: string };
-  }
-
-  namespace NodeJS {
-    interface ProcessEnv {
-      NODE_ENV: 'development' | 'production' | 'test';
-      NEXT_PUBLIC_ENV_VALUE: 'stage' | 'prod' | 'development';
-      NEXT_PUBLIC_ENV_DOMAIN: 'ludo.com' | 'ludo.ninja' | 'localhost';
-      NEXT_PUBLIC_STATIC_DOMAIN: 'ludo.com' | 'ludo.ninja';
-      NEXT_PUBLIC_AUTH_HOST: string;
-      NEXT_PUBLIC_WELCOME_HOST: string;
-      NEXT_PUBLIC_SITE_URL: string;
-    }
-  }
-}

package/src/types/module/declare-module.d.ts

@@ -1,13 +0,0 @@
-declare module 'react-hyphen' {
-  import { ReactNode } from 'react';
-
-  export interface ReactHyphenProps {
-    children: ReactNode;
-    lang?: string;
-    className?: string;
-    minWordLength?: number;
-    showLastWord?: boolean;
-  }
-
-  export default function ReactHyphen(props: ReactHyphenProps): JSX.Element;
-}

package/src/types/styled.d.ts

@@ -1,9 +0,0 @@
-import 'styled-components';
-
-import { ITheme, ThemeEnum } from '@/dto/theme/interface';
-
-declare module 'styled-components' {
-  export interface DefaultTheme extends ITheme {
-    type: ThemeEnum;
-  }
-}

package/src/types/svg/index.d.ts

@@ -1,4 +0,0 @@
-declare module '*.svg' {
-  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  export default content;
-}

package/src/utils/3d.ts

@@ -1,54 +0,0 @@
-import { mediaType } from '@ludo.ninja/core/build/media/type';
-
-enum objectExtensionsStarts {
-  OBJECT = 'object',
-  MODEL = 'model',
-}
-
-enum objectExtensionsEnds {
-  OBJ = 'obj',
-  GLB = 'glb',
-}
-
-// const isObject = ({
-//   media,
-//   mimeType,
-//   originalMimeType,
-// }: mediaType): boolean => {
-//   if (!originalMimeType) {
-// const isObjectExtension =
-//   media &&
-//   (media.endsWith(objectExtensionsEnds.OBJ) ||
-//     media.endsWith(objectExtensionsEnds.GLB));
-//     return (
-//       (mimeType &&
-//         (mimeType.startsWith(objectExtensionsStarts.OBJECT) ||
-//           mimeType.startsWith(objectExtensionsStarts.MODEL))) ||
-//       isObjectExtension ||
-//       false
-//     );
-//   } else return false;
-// };
-
-//todo:after add originalMimeType and preview 2d - refactor to top version and add to ludo.ninja/core
-
-export const isObject3D = ({
-  media,
-  mimeType,
-}: {
-  media: mediaType['media'];
-  mimeType: mediaType['mimeType'];
-}): boolean => {
-  const isObjectExtension =
-    media &&
-    (media.endsWith(objectExtensionsEnds.OBJ) ||
-      media.endsWith(objectExtensionsEnds.GLB));
-
-  return (
-    (mimeType &&
-      (mimeType.startsWith(objectExtensionsStarts.OBJECT) ||
-        mimeType.startsWith(objectExtensionsStarts.MODEL))) ||
-    isObjectExtension ||
-    false
-  );
-};

package/src/utils/adaptive/check4k.ts

@@ -1,25 +0,0 @@
-import { getAdaptiveValue } from '@ludo.ninja/ui/build/utils/4k';
-
-import { ScreenWidth } from '@/styles/ScreenWidth';
-
-import { TDimensions } from '@/utils/screen';
-
-export const getAdaptiveValueWithCheck4k = ({
-  windowDimensions,
-  currentSize,
-}: {
-  currentSize: number;
-  windowDimensions: TDimensions | null;
-}) => {
-  if (
-    windowDimensions &&
-    windowDimensions.windowWidth >= ScreenWidth.FOUR_K_MIN
-  ) {
-    return getAdaptiveValue({
-      windowWidth: windowDimensions.windowWidth,
-      currentSize,
-    });
-  }
-
-  return currentSize;
-};

package/src/utils/adaptive/scale.ts

@@ -1,27 +0,0 @@
-import { getAdaptiveValue } from '@ludo.ninja/ui/build/utils/4k';
-
-import { ScreenWidth } from '@/styles/ScreenWidth';
-
-import { TDimensions } from '@/utils/screen';
-
-export const getAdaptiveScale = ({
-  windowDimensions,
-  currentSize,
-}: {
-  currentSize: number;
-  windowDimensions: TDimensions | null;
-}) => {
-  if (
-    windowDimensions &&
-    windowDimensions.windowWidth >= ScreenWidth.FOUR_K_MIN
-  ) {
-    return {
-      transform: `scale(${getAdaptiveValue({
-        windowWidth: windowDimensions.windowWidth,
-        currentSize,
-      })})`,
-    };
-  }
-
-  return {};
-};

package/src/utils/auth/index.ts

@@ -1,9 +0,0 @@
-import process from 'process';
-
-export const redirectToLoginWindow = () =>
-  window.open(
-    `${
-      process.env.NEXT_PUBLIC_AUTH_HOST
-    }/login/?fallback_url=${window.location.href.replace(/\s/g, '')}`,
-    '_self'
-  );

package/src/utils/copyBtn/index.tsx

@@ -1,74 +0,0 @@
-import React, { CSSProperties, PropsWithChildren, useState } from 'react';
-
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { copyToClipboard } from '@ludo.ninja/utils';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor } from '@/styles/colors';
-
-import { Flex, H5 } from '@system';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import CopiedIcon from '@/public/copied.svg';
-import CopyIcon from '@/public/copy-icon-new.svg';
-
-const SWrapperIcon = styled.div`
-  cursor: pointer;
-  margin-left: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${mediaQuery.minWidthFourK} {
-    margin-left: ${adaptiveValueCalc(5)};
-    width: ${adaptiveValueCalc(20)};
-    height: ${adaptiveValueCalc(20)};
-  }
-`;
-
-export const CopyButton = ({
-  value,
-  style,
-  children,
-}: PropsWithChildren<{
-  value?: string | null;
-  style?: CSSProperties | undefined;
-}>) => {
-  const [isCopied, setIsCopied] = useState<boolean>(false);
-
-  const handleCopy = async () => {
-    await copyToClipboard(value as string);
-    setIsCopied(true);
-    setTimeout(() => {
-      setIsCopied(false);
-    }, 200);
-  };
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  if (!value) return <H5 color={BlackColor}>Unknown</H5>;
-
-  return (
-    <Flex alignItems="center" onClick={handleCopy} style={style}>
-      {children}
-      <SWrapperIcon>
-        {!isCopied ? (
-          <CopyIcon
-            width={20}
-            height={20}
-            style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-          />
-        ) : (
-          <CopiedIcon
-            width={20}
-            height={20}
-            style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-          />
-        )}
-      </SWrapperIcon>
-    </Flex>
-  );
-};

package/src/utils/env/index.ts

@@ -1,30 +0,0 @@
-import process from 'process';
-
-import {
-  getAudioDomain,
-  getMediaDomain,
-  getStaticDomain,
-  getVideoDomain,
-} from '@ludo.ninja/core';
-
-export const getVideoENVDomain = () =>
-  `${getVideoDomain({
-    ENV: process.env.NEXT_PUBLIC_STATIC_DOMAIN,
-  })}`;
-
-export const getAudioENVDomain = () =>
-  `${getAudioDomain({
-    ENV: process.env.NEXT_PUBLIC_STATIC_DOMAIN,
-  })}`;
-
-export const getStaticENVDomain = () =>
-  `${getStaticDomain({
-    ENV: process.env.NEXT_PUBLIC_STATIC_DOMAIN,
-  })}`;
-
-export const getMediaENVDomain = () =>
-  `${getMediaDomain({
-    ENV: process.env.NEXT_PUBLIC_STATIC_DOMAIN,
-  })}`;
-
-export { isProd } from './isProd';

package/src/utils/env/isProd/index.ts

@@ -1,3 +0,0 @@
-import { envProdTypes } from '@/utils/env/type';
-
-export const isProd = ({ ENV }: { ENV: string }) => ENV === envProdTypes.PROD;

package/src/utils/env/type.ts

@@ -1,5 +0,0 @@
-export enum envProdTypes {
-  STAGE = 'stage',
-  PROD = 'prod',
-  DEVELOPMENT = 'development',
-}

package/src/utils/extractItemIds/index.tsx

@@ -1,11 +0,0 @@
-import { TCreationAndCollection } from '@/modules/virtuoso';
-
-import { CollectionCreationEntity } from '@/dto/index';
-
-export function extractItemIds(creations: TCreationAndCollection[]) {
-  return creations.map((creation) =>
-    creation instanceof CollectionCreationEntity
-      ? creation.getCreationId()
-      : creation.getItemId()
-  );
-}

package/src/utils/getDimensionsImage.ts

@@ -1,43 +0,0 @@
-export const getDimensionsImage = async (
-  value: File
-): Promise<{
-  height: number;
-  width: number;
-} | null> => {
-  function loadReader(file: File): Promise<string> {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.addEventListener('load', () => {
-        resolve(reader.result as string);
-      });
-      reader.readAsDataURL(file);
-    });
-  }
-
-  function loadImage(url: string): Promise<{
-    height: number;
-    width: number;
-  }> {
-    return new Promise((resolve, reject) => {
-      const image = new Image();
-      image.addEventListener('error', (error) => {
-        reject(error);
-      });
-      image.addEventListener('load', function inc() {
-        // console.log("this",this)
-        resolve({
-          width: this.width,
-          height: this.height,
-        });
-      });
-      image.src = url;
-    });
-  }
-
-  const url = await loadReader(value);
-  try {
-    return await loadImage(url);
-  } catch (e) {
-    return null;
-  }
-};

package/src/utils/getPageSizeAssets.ts

@@ -1,21 +0,0 @@
-import { getScrollKeys } from '@/modules/sessionScroll';
-
-export const limitCount = 40;
-
-export const getPageSize = ({
-  limit = limitCount,
-  scrollTab,
-}: {
-  limit?: number;
-  scrollTab?: string;
-}) => {
-  if (scrollTab) {
-    const scrollKeys = getScrollKeys();
-    if (scrollKeys) {
-      const itemsCount = scrollKeys[scrollTab]?.itemsCountKey;
-      const itemIndexKey = scrollKeys[scrollTab]?.itemIndexKey;
-      return itemsCount && itemIndexKey ? Number(itemsCount) : limit;
-    }
-  }
-  return limit;
-};

package/src/utils/healzHandler/index.ts

@@ -1,17 +0,0 @@
-// lib/createHandler.ts
-import type { NextApiRequest, NextApiResponse } from 'next';
-
-type ResponseData = {
-  message: string;
-};
-
-type HandlerProps = {
-  appName: string;
-};
-
-export const createHandler = ({ appName }: HandlerProps) => (
-  req: NextApiRequest,
-  res: NextApiResponse<ResponseData>
-) => {
-  res.status(200).json({ message: `Hello from ${appName}!` });
-};

package/src/utils/imageProportionsSize/index.tsx

@@ -1,27 +0,0 @@
-import { MutableRefObject } from 'react';
-
-export const defineImgProportion = (
-  ref: MutableRefObject<HTMLImageElement | null>,
-  whenDisableAddProportion: number
-) => {
-  let height = 0;
-  let width = 0;
-  let x;
-  if (ref.current) {
-    height = ref?.current && (ref?.current?.naturalHeight as number);
-    width = ref?.current && (ref?.current?.naturalWidth as number);
-
-    const biggestSize = height > width ? height : width;
-    const lowerSize = height > width ? width : height;
-
-    x = ((lowerSize * 100) / biggestSize).toFixed(2);
-
-    if (+x > whenDisableAddProportion || +x > 100) {
-      x = 100;
-    }
-  }
-  return {
-    width: width > height ? '100%' : x + '%',
-    height: width > height ? x + '%' : '100%',
-  };
-};

package/src/utils/index.ts

@@ -1,8 +0,0 @@
-export * from './ssrFunctions';
-export * from './env/isProd';
-export * from './screen';
-export * from './healzHandler';
-export * from './adaptive';
-export * from './copyBtn';
-
-