@ludo.ninja/components 1.1.2 → 1.1.4

package/dist/components/headers/components/headerExperienceLabel/index.jsx

@@ -1,57 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledHeaderExperienceLabel = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      ['\n  margin-right: 20px;\n  ', ' {\n    margin-right: ', ';\n  }\n'],
-      ['\n  margin-right: 20px;\n  ', ' {\n    margin-right: ', ';\n  }\n']
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(20)
-);
+var StyledHeaderExperienceLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 20px;\n  ", " {\n    margin-right: ", ";\n  }\n"], ["\n  margin-right: 20px;\n  ", " {\n    margin-right: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(20));
 // Component
 var HeaderExperienceLabel = function (_a) {
-  var userId = _a.userId;
-  var _b = useUserStore(function (state) {
-      return {
+    var userId = _a.userId;
+    var _b = useUserStore(function (state) { return ({
         userExp: state.userExp,
         isLoadingExp: state.isLoadingExp,
         errorExp: state.errorExp,
-      };
-    }),
-    userExp = _b.userExp,
-    isLoadingExp = _b.isLoadingExp,
-    errorExp = _b.errorExp;
-  if (!userId) return null;
-  return (
-    <StyledHeaderExperienceLabel>
-      <ExperienceLabel
-        value={userExp.xps}
-        link={'/rewards/'.concat(userId)}
-        loading={isLoadingExp || !!errorExp}
-      />
-    </StyledHeaderExperienceLabel>
-  );
+    }); }), userExp = _b.userExp, isLoadingExp = _b.isLoadingExp, errorExp = _b.errorExp;
+    if (!userId)
+        return null;
+    return (<StyledHeaderExperienceLabel>
+      <ExperienceLabel value={userExp.xps} link={"/rewards/".concat(userId)} loading={isLoadingExp || !!errorExp}/>
+    </StyledHeaderExperienceLabel>);
 };
 // Export
 export default HeaderExperienceLabel;

package/dist/components/headers/components/headerUserPic/index.jsx

@@ -1,59 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledHeaderUserPick = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  margin-right: 24px;\n\n  ',
-        ' {\n    margin-right: 8px;\n  }\n  ',
-        ' {\n    margin-right: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  margin-right: 24px;\n\n  ',
-        ' {\n    margin-right: 8px;\n  }\n  ',
-        ' {\n    margin-right: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.mobile,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(24)
-);
+var StyledHeaderUserPick = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 24px;\n\n  ", " {\n    margin-right: 8px;\n  }\n  ", " {\n    margin-right: ", ";\n  }\n"], ["\n  margin-right: 24px;\n\n  ", " {\n    margin-right: 8px;\n  }\n  ", " {\n    margin-right: ", ";\n  }\n"])), mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(24));
 // Component
 var HeaderUserPick = function (_a) {
-  var userId = _a.userId;
-  if (!userId) return null;
-  return (
-    <StyledHeaderUserPick>
-      <UserPic
-        width={32}
-        height={32}
-        userId={userId}
-        isNeedBoxTransform={true}
-      />
-    </StyledHeaderUserPick>
-  );
+    var userId = _a.userId;
+    if (!userId)
+        return null;
+    return (<StyledHeaderUserPick>
+      <UserPic width={32} height={32} userId={userId} isNeedBoxTransform={true}/>
+    </StyledHeaderUserPick>);
 };
 // Export
 export default HeaderUserPick;

package/dist/components/headers/header/index.jsx

@@ -1,62 +1,27 @@
 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
 var Header = function () {
-  var isSignedIn = useUserStore(function (state) {
-    return state.isSignedIn;
-  });
-  var getUser = useUserStore(function (state) {
-    return state.user;
-  });
-  var openSidebar = useUiStore(function (state) {
-    return state.openSidebar;
-  });
-  return (
-    <HeaderUi
-      isAuthorized={isSignedIn}
-      handle={{
-        login: redirectToLoginWindow,
-        openSidebar: openSidebar,
-      }}
-      slots={{
-        headerExpLabel: (
-          <HeaderExperienceLabel
-            userId={
-              (getUser === null || getUser === void 0
-                ? void 0
-                : getUser.userId) || ''
-            }
-          />
-        ),
-        headerUserPick: (
-          <HeaderUserPick
-            userId={
-              (getUser === null || getUser === void 0
-                ? void 0
-                : getUser.userId) || ''
-            }
-          />
-        ),
-        logoLinkComponent: function (_a) {
-          var children = _a.children;
-          return <Link href={'/'}>{children}</Link>;
-        },
-      }}
-    />
-  );
+    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var getUser = useUserStore(function (state) { return state.user; });
+    var openSidebar = useUiStore(function (state) { return state.openSidebar; });
+    return (<HeaderUi isAuthorized={isSignedIn} handle={{
+            login: redirectToLoginWindow,
+            openSidebar: openSidebar,
+        }} slots={{
+            headerExpLabel: (<HeaderExperienceLabel userId={(getUser === null || getUser === void 0 ? void 0 : getUser.userId) || ''}/>),
+            headerUserPick: <HeaderUserPick userId={(getUser === null || getUser === void 0 ? void 0 : getUser.userId) || ''}/>,
+            logoLinkComponent: function (_a) {
+                var children = _a.children;
+                return <Link href={'/'}>{children}</Link>;
+            },
+        }}/>);
 };
 // Export
 export default Header;

package/dist/components/headers/headerSearch/index.jsx

@@ -1,73 +1,34 @@
 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
 var HeaderSearch = function () {
-  var openSidebar = useUiStore(function (state) {
-    return state.openSidebar;
-  });
-  var isSignedIn = useUserStore(function (state) {
-    return state.isSignedIn;
-  });
-  var getUser = useUserStore(function (state) {
-    return state.user;
-  });
-  return (
-    <HeaderUi
-      isAuthorized={isSignedIn}
-      handle={{
-        login: redirectToLoginWindow,
-        openSidebar: openSidebar,
-      }}
-      slots={{
-        headerExpLabel: (
-          <HeaderExperienceLabel
-            userId={
-              (getUser === null || getUser === void 0
-                ? void 0
-                : getUser.userId) || ''
-            }
-          />
-        ),
-        headerUserPick: (
-          <HeaderUserPick
-            userId={
-              (getUser === null || getUser === void 0
-                ? void 0
-                : getUser.userId) || ''
-            }
-          />
-        ),
-        logoLinkComponent: function (_a) {
-          var children = _a.children;
-          return <Link href={'/'}>{children}</Link>;
-        },
-        searchInput: function (_a) {
-          var setInputFocused = _a.setInputFocused;
-          // Todo seacrh pages, hide search input from header
-          return isProd() ? undefined : (
-            <SearchSimpleInput onFocusHandler={setInputFocused} />
-          );
-        },
-      }}
-      isSearchStyles
-      isActivatedTheme
-    />
-  );
+    var openSidebar = useUiStore(function (state) { return state.openSidebar; });
+    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var getUser = useUserStore(function (state) { return state.user; });
+    return (<HeaderUi isAuthorized={isSignedIn} handle={{
+            login: redirectToLoginWindow,
+            openSidebar: openSidebar,
+        }} slots={{
+            headerExpLabel: (<HeaderExperienceLabel userId={(getUser === null || getUser === void 0 ? void 0 : getUser.userId) || ''}/>),
+            headerUserPick: <HeaderUserPick userId={(getUser === null || getUser === void 0 ? void 0 : getUser.userId) || ''}/>,
+            logoLinkComponent: function (_a) {
+                var children = _a.children;
+                return <Link href={'/'}>{children}</Link>;
+            },
+            searchInput: function (_a) {
+                var setInputFocused = _a.setInputFocused;
+                // Todo seacrh pages, hide search input from header
+                return isProd() ? undefined : (<SearchSimpleInput onFocusHandler={setInputFocused}/>);
+            },
+        }} isSearchStyles isActivatedTheme/>);
 };
 // Export
 export default HeaderSearch;

package/dist/components/headers/headerSimple/index.jsx

@@ -1,65 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledHeaderSimple = styled.header(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 2;\n  padding: 38px 14px 14px 14px;\n  background: ',
-        ';\n  transition: transform 0.5s ease, top 0.5s ease;\n  width: 92.67%;\n  margin: 0 auto;\n  top: 24px;\n  left: 42px;\n  right: 42px;\n  position: fixed;\n\n  &.up {\n    top: 0;\n    transition: top 0.4s ease-out;\n\n    @media (max-width: 767px) {\n      top: 0;\n    }\n  }\n\n  &.down {\n    top: -92px;\n    transition: top 0.4s ease-out;\n  }\n\n  .logo {\n    width: 116px;\n    height: 28px;\n    a {\n      height: 100%;\n      display: block;\n    }\n  }\n\n  @media (max-width: 767px) {\n    padding: 20px;\n    margin: 0;\n    width: 100%;\n    left: 0;\n    right: 0;\n\n    .logo {\n      width: 32px;\n      height: 32px;\n    }\n  }\n',
-      ],
-      [
-        '\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 2;\n  padding: 38px 14px 14px 14px;\n  background: ',
-        ';\n  transition: transform 0.5s ease, top 0.5s ease;\n  width: 92.67%;\n  margin: 0 auto;\n  top: 24px;\n  left: 42px;\n  right: 42px;\n  position: fixed;\n\n  &.up {\n    top: 0;\n    transition: top 0.4s ease-out;\n\n    @media (max-width: 767px) {\n      top: 0;\n    }\n  }\n\n  &.down {\n    top: -92px;\n    transition: top 0.4s ease-out;\n  }\n\n  .logo {\n    width: 116px;\n    height: 28px;\n    a {\n      height: 100%;\n      display: block;\n    }\n  }\n\n  @media (max-width: 767px) {\n    padding: 20px;\n    margin: 0;\n    width: 100%;\n    left: 0;\n    right: 0;\n\n    .logo {\n      width: 32px;\n      height: 32px;\n    }\n  }\n',
-      ]
-    )),
-  BackgroundColorLight
-);
+var StyledHeaderSimple = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 2;\n  padding: 38px 14px 14px 14px;\n  background: ", ";\n  transition: transform 0.5s ease, top 0.5s ease;\n  width: 92.67%;\n  margin: 0 auto;\n  top: 24px;\n  left: 42px;\n  right: 42px;\n  position: fixed;\n\n  &.up {\n    top: 0;\n    transition: top 0.4s ease-out;\n\n    @media (max-width: 767px) {\n      top: 0;\n    }\n  }\n\n  &.down {\n    top: -92px;\n    transition: top 0.4s ease-out;\n  }\n\n  .logo {\n    width: 116px;\n    height: 28px;\n    a {\n      height: 100%;\n      display: block;\n    }\n  }\n\n  @media (max-width: 767px) {\n    padding: 20px;\n    margin: 0;\n    width: 100%;\n    left: 0;\n    right: 0;\n\n    .logo {\n      width: 32px;\n      height: 32px;\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  z-index: 2;\n  padding: 38px 14px 14px 14px;\n  background: ", ";\n  transition: transform 0.5s ease, top 0.5s ease;\n  width: 92.67%;\n  margin: 0 auto;\n  top: 24px;\n  left: 42px;\n  right: 42px;\n  position: fixed;\n\n  &.up {\n    top: 0;\n    transition: top 0.4s ease-out;\n\n    @media (max-width: 767px) {\n      top: 0;\n    }\n  }\n\n  &.down {\n    top: -92px;\n    transition: top 0.4s ease-out;\n  }\n\n  .logo {\n    width: 116px;\n    height: 28px;\n    a {\n      height: 100%;\n      display: block;\n    }\n  }\n\n  @media (max-width: 767px) {\n    padding: 20px;\n    margin: 0;\n    width: 100%;\n    left: 0;\n    right: 0;\n\n    .logo {\n      width: 32px;\n      height: 32px;\n    }\n  }\n"])), BackgroundColorLight);
 // Component
 var HeaderSimple = function () {
-  var windowWidth = getWindowDimensions().windowWidth;
-  var renderDesktopLogoOrMobile = function () {
-    var 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"
-      />
-    );
-  };
-  var scrollDirection = useScrollDirection();
-  return (
-    <StyledHeaderSimple className={scrollDirection}>
+    var windowWidth = getWindowDimensions().windowWidth;
+    var renderDesktopLogoOrMobile = function () {
+        var 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"/>);
+    };
+    var scrollDirection = useScrollDirection();
+    return (<StyledHeaderSimple className={scrollDirection}>
       <div className={'logo'}>
         <Link href={'/'}>{renderDesktopLogoOrMobile()}</Link>
       </div>
-    </StyledHeaderSimple>
-  );
+    </StyledHeaderSimple>);
 };
 // Export
 export default HeaderSimple;