@ludo.ninja/components 0.6.0 → 1.0.0

package/src/utils/screen/index.ts

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react';
+
+import { isAndroid } from 'react-device-detect';
+
+import { isServer } from '@ludo.ninja/utils';
+
+import { useSSRStore } from '@/store';
+
+import { ScreenWidth } from '@/styles/ScreenWidth';
+
+export type TDimensions = {
+  windowWidth: number;
+  windowHeight: number;
+};
+
+export function getWindowDimensions() {
+  if (!isServer) {
+    const { innerWidth, innerHeight } = window;
+    return { windowWidth: innerWidth, windowHeight: innerHeight };
+  } else {
+    return { windowWidth: 1920, windowHeight: 1080 };
+  }
+}
+
+export function useWindowDimensions(isMobileInitial?: boolean) {
+  let dimensions;
+  if (isServer) dimensions = { windowWidth: 1920, windowHeight: 1080 };
+  else dimensions = getWindowDimensions();
+
+  const [windowDimensions, setWindowDimensions] =
+    useState<TDimensions>(dimensions);
+
+  const [isMobile, setIsMobile] = useState(isMobileInitial);
+  useEffect(() => {
+    function handleResize() {
+      const dimensions = getWindowDimensions();
+      setWindowDimensions(dimensions);
+      setIsMobile(dimensions.windowWidth <= 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.MOBILE
+      ? 'isMobile'
+      : windowDimensions.windowWidth >= ScreenWidth.DESKTOP
+      ? 'isDesktop'
+      : 'isTablet'
+  ) as 'isMobile' | 'isDesktop' | 'isTablet';
+  return { windowDimensions, deviceType, isMobile };
+}
+
+export function useWindowDimensionsWithServerInitial() {
+  const isMobileInitial = useSSRStore((state) => state.isMobile);
+  const [isMobile, setIsMobile] = useState<boolean>(isMobileInitial);
+  const [windowDimensions, setWindowDimensions] = useState<TDimensions | null>(
+    isServer ? null : getWindowDimensions()
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      const dimensions = getWindowDimensions();
+      setWindowDimensions(dimensions);
+      setIsMobile(dimensions.windowWidth <= ScreenWidth.MOBILE);
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('orientationchange', handleResize);
+    };
+  }, []);
+
+  return { isMobile, windowDimensions };
+}
+
+export function InitializeAppHeight() {
+  useEffect(() => {
+    function handleResize() {
+      document.documentElement.style.setProperty(
+        '--app-height',
+        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;
+}

package/src/utils/ssrFunctions/index.ts

@@ -3,7 +3,7 @@ import { GetServerSidePropsContext } from 'next';
 import { authCookies } from '@ludo.ninja/api';
 import { mobileDetection } from '@ludo.ninja/utils';
 
-import { IUser } from '@ludo.ninja/core';
+import { IUser } from '@/entities/user/type';
 
 export const getIsMobile = (context: GetServerSidePropsContext) => {
   const UA = context.req.headers['user-agent'];

package/src/utils/ui/index.tsx

@@ -0,0 +1,9 @@
+export const upBtnDistance = (
+  document: {
+    body: { scrollTop: number };
+    documentElement: { scrollTop: number };
+  },
+  pixels: number
+) =>
+  document.body.scrollTop > pixels ||
+  document.documentElement.scrollTop > pixels;

package/tests/__mocks__/next/router.js

@@ -0,0 +1,23 @@
+const useRouter = jest.fn();
+
+useRouter.mockImplementation(() => ({
+  route: '/',
+  pathname: '',
+  query: {},
+  asPath: '',
+  push: jest.fn(),
+  replace: jest.fn(),
+  reload: jest.fn(),
+  back: jest.fn(),
+  prefetch: jest.fn().mockResolvedValue(undefined),
+  beforePopState: jest.fn(),
+  events: {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+  },
+}));
+
+module.exports = {
+  useRouter,
+};

package/tests/svgrTransform/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  process() {
+    return { code: 'module.exports = {};' };
+  },
+  getCacheKey() {
+    return 'svgTransform';
+  },
+};

package/tsconfig.jest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "module": "esnext"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
+  "exclude": ["node_modules"]
+}

package/tsconfig.json

@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": false,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "declaration": true,
     "declarationDir": "./dist/types",
     "outDir": "./dist",
@@ -41,7 +41,8 @@
       "@/store/*": ["src/store/*"],
       "@/store": ["src/store/index.ts"],
       "@system": ["src/system/index.ts"]
-    }
+    },
+    "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "dist"]

package/tslint.json

@@ -0,0 +1,86 @@
+{
+  "extends": ["tslint-react"],
+  "linterOptions": {
+    "exclude": ["src/proto/*"]
+  },
+  "rules": {
+    "align": [true, "parameters", "arguments", "statements"],
+    "ban": false,
+    "class-name": true,
+    "comment-format": [true, "check-space"],
+    "curly": true,
+    "eofline": false,
+    "forin": true,
+    "indent": [true, "spaces"],
+    "interface-name": [true, "never-prefix"],
+    "jsdoc-format": true,
+    "jsx-no-lambda": false,
+    "jsx-no-multiline-js": false,
+    "label-position": true,
+    "max-line-length": [true, 120],
+    "member-ordering": [
+      true,
+      "public-before-private",
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-any": true,
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-consecutive-blank-lines": true,
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": false,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "one-line": [
+      true,
+      "check-catch",
+      "check-else",
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "quotemark": [true, "single", "jsx-double"],
+    "radix": true,
+    "semicolon": [true, "always"],
+    "switch-default": true,
+
+    "trailing-comma": [false],
+
+    "triple-equals": [true, "allow-null-check"],
+    "typedef": [true, "parameter", "property-declaration"],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": [
+      true,
+      "ban-keywords",
+      "check-format",
+      "allow-leading-underscore",
+      "allow-pascal-case"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-module",
+      "check-operator",
+      "check-separator",
+      "check-type",
+      "check-typecast"
+    ]
+  }
+}

package/dist/pages/_app.js

@@ -1,16 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function App(_a) {
-    var Component = _a.Component, pageProps = _a.pageProps;
-    return _jsx(Component, __assign({}, pageProps));
-}

package/dist/pages/_document.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Html, Head, Main, NextScript } from "next/document";
-export default function Document() {
-    return (_jsxs(Html, { lang: "en", children: [_jsx(Head, {}), _jsxs("body", { children: [_jsx(Main, {}), _jsx(NextScript, {})] })] }));
-}

package/dist/pages/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Head from "next/head";
-export default function Home() {
-    return (_jsx(_Fragment, { children: _jsxs(Head, { children: [_jsx("title", { children: "Create Next App" }), _jsx("meta", { name: "description", content: "Generated by create next app" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("link", { rel: "icon", href: "/favicon.ico" })] }) }));
-}

package/dist/types/pages/_app.d.ts

@@ -1,2 +0,0 @@
-import type { AppProps } from "next/app";
-export default function App({ Component, pageProps }: AppProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/pages/_document.d.ts

@@ -1 +0,0 @@
-export default function Document(): import("react/jsx-runtime").JSX.Element;

package/next.config.mjs

@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-};
-
-export default nextConfig;

package/public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

package/src/pages/_app.tsx

@@ -1,5 +0,0 @@
-import type { AppProps } from "next/app";
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}

package/src/pages/_document.tsx

@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from "next/document";
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}