@ludo.ninja/components 2.0.0 → 2.0.2

package/build/utils/screen/index.d.ts

@@ -0,0 +1,18 @@
+export type TDimensions = {
+    windowWidth: number;
+    windowHeight: number;
+};
+export declare function getWindowDimensions(): {
+    windowWidth: number;
+    windowHeight: number;
+};
+export declare function useWindowDimensions(isMobileInitial?: boolean): {
+    windowDimensions: TDimensions;
+    deviceType: "isMobile" | "isDesktop" | "isTablet";
+    isMobile: boolean | undefined;
+};
+export declare function useWindowDimensionsWithServerInitial(): {
+    isMobile: boolean;
+    windowDimensions: TDimensions | null;
+};
+export declare function InitializeAppHeight(): null;

package/build/utils/screen/index.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitializeAppHeight = exports.useWindowDimensionsWithServerInitial = exports.useWindowDimensions = exports.getWindowDimensions = void 0;
+const react_1 = require("react");
+const react_device_detect_1 = require("react-device-detect");
+const utils_1 = require("@ludo.ninja/utils");
+const store_1 = require("@/store");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+function getWindowDimensions() {
+    if (!utils_1.isServer) {
+        const { innerWidth, innerHeight } = window;
+        return { windowWidth: innerWidth, windowHeight: innerHeight };
+    }
+    else {
+        return { windowWidth: 1920, windowHeight: 1080 };
+    }
+}
+exports.getWindowDimensions = getWindowDimensions;
+function useWindowDimensions(isMobileInitial) {
+    let dimensions;
+    if (utils_1.isServer)
+        dimensions = { windowWidth: 1920, windowHeight: 1080 };
+    else
+        dimensions = getWindowDimensions();
+    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(dimensions);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(isMobileInitial);
+    (0, react_1.useEffect)(() => {
+        function handleResize() {
+            const dimensions = getWindowDimensions();
+            setWindowDimensions(dimensions);
+            setIsMobile(dimensions.windowWidth <= ScreenWidth_1.ScreenWidth.MOBILE);
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, []);
+    const deviceType = (windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.MOBILE
+        ? 'isMobile'
+        : windowDimensions.windowWidth >= ScreenWidth_1.ScreenWidth.DESKTOP
+            ? 'isDesktop'
+            : 'isTablet');
+    return { windowDimensions, deviceType, isMobile };
+}
+exports.useWindowDimensions = useWindowDimensions;
+function useWindowDimensionsWithServerInitial() {
+    const isMobileInitial = (0, store_1.useSSRStore)((state) => state.isMobile);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(isMobileInitial);
+    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(utils_1.isServer ? null : getWindowDimensions());
+    (0, react_1.useEffect)(() => {
+        function handleResize() {
+            const dimensions = getWindowDimensions();
+            setWindowDimensions(dimensions);
+            setIsMobile(dimensions.windowWidth <= ScreenWidth_1.ScreenWidth.MOBILE);
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, []);
+    return { isMobile, windowDimensions };
+}
+exports.useWindowDimensionsWithServerInitial = useWindowDimensionsWithServerInitial;
+function InitializeAppHeight() {
+    (0, react_1.useEffect)(() => {
+        function handleResize() {
+            document.documentElement.style.setProperty('--app-height', react_device_detect_1.isAndroid
+                ? `${Math.min(window.innerHeight, window.outerHeight, window.innerHeight * window.devicePixelRatio)}px`
+                : `${window.innerHeight}px`);
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, []);
+    return null;
+}
+exports.InitializeAppHeight = InitializeAppHeight;

package/build/utils/seacrhTabs.d.ts

@@ -0,0 +1,4 @@
+export declare const searchTabs: {
+    link: string;
+    text: string;
+}[];

package/build/utils/seacrhTabs.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchTabs = void 0;
+exports.searchTabs = [
+    {
+        link: '/nfts',
+        text: 'NFTs',
+    },
+    {
+        link: '/collections',
+        text: 'Collections',
+    },
+    {
+        link: '/profiles',
+        text: 'Profiles',
+    },
+];

package/build/utils/ssrFunctions/index.d.ts

@@ -0,0 +1,17 @@
+import { GetServerSidePropsContext } from 'next';
+import { IUser } from '@/entities/user/type';
+export declare const getIsMobile: (context: GetServerSidePropsContext) => {
+    isMobile: boolean;
+};
+export declare const getUserDataFromCookie: (context: GetServerSidePropsContext) => {
+    userData: IUser;
+} | {
+    userData: null;
+};
+export declare const getGlobalPageProps: (ctx: GetServerSidePropsContext) => {
+    userData: IUser;
+    isMobile: boolean;
+} | {
+    userData: null;
+    isMobile: boolean;
+};

package/build/utils/ssrFunctions/index.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGlobalPageProps = exports.getUserDataFromCookie = exports.getIsMobile = void 0;
+const api_1 = require("@ludo.ninja/api");
+const utils_1 = require("@ludo.ninja/utils");
+const getIsMobile = (context) => {
+    const UA = context.req.headers['user-agent'];
+    const { isMobile } = (0, utils_1.mobileDetection)({ UA });
+    return { isMobile };
+};
+exports.getIsMobile = getIsMobile;
+const getUserDataFromCookie = (context) => {
+    const { authToken, refreshToken, wallets, userId, newUser, inviteCode } = api_1.authCookies.getCookies(context);
+    if (authToken && refreshToken && userId && wallets && newUser && inviteCode) {
+        return {
+            userData: {
+                userId,
+                wallets,
+                authToken,
+                refreshToken,
+                newUser: newUser === 'true',
+                inviteCode,
+            },
+        };
+    }
+    return { userData: null };
+};
+exports.getUserDataFromCookie = getUserDataFromCookie;
+const getGlobalPageProps = (ctx) => ({
+    ...(0, exports.getIsMobile)(ctx),
+    ...(0, exports.getUserDataFromCookie)(ctx),
+});
+exports.getGlobalPageProps = getGlobalPageProps;

package/build/utils/ui/index.d.ts

@@ -0,0 +1,8 @@
+export declare const upBtnDistance: (document: {
+    body: {
+        scrollTop: number;
+    };
+    documentElement: {
+        scrollTop: number;
+    };
+}, pixels: number) => boolean;

package/build/utils/ui/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.upBtnDistance = void 0;
+const upBtnDistance = (document, pixels) => document.body.scrollTop > pixels ||
+    document.documentElement.scrollTop > pixels;
+exports.upBtnDistance = upBtnDistance;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "files": [
-    "dist"
+    "build"
   ],
   "scripts": {
     "dev": "next dev -p 4000",