Support nextjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redlotus/ui",
-  "version": "0.1.59",
+  "version": "0.1.60",
   "description": "React UI library",
   "type": "module",
   "scripts": {
@@ -47,6 +47,7 @@
     "date-fns": "^2.29.3",
     "formik": "^2.2.9",
     "framer-motion": "^9.0.2",
+    "next": "^13.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.3.5",

src/components/elements/LotusLink.tsx

@@ -0,0 +1,26 @@
+import NextLink from "next/link";
+import { Link, NavLink } from "react-router-dom";
+
+import { useApp } from "../../context";
+
+interface Props {
+  children: any;
+  to: string;
+  navLink?: boolean;
+}
+
+export const LotusLink = ({ children, to, navLink = false }: Props) => {
+  const { framework } = useApp();
+
+  if (framework === "vite") {
+    if (navLink) {
+      return (
+        <NavLink to={to} end>
+          {children}
+        </NavLink>
+      );
+    }
+    return <Link to={to}>{children}</Link>;
+  }
+  return <NextLink href={to}>{children}</NextLink>;
+};

src/components/elements/index.ts

@@ -2,3 +2,4 @@ export * from "./buttons";
 export * from "./navbars";
 export * from "./disclosure";
 export * from "./panels";
+export * from "./LotusLink";

src/components/layouts/wrappers/logged-in/DefaultPageWrapper.tsx

@@ -1,5 +1,4 @@
 import { HiArchive, HiHome } from "react-icons/hi";
-import { Link } from "react-router-dom";
 
 import {
   ExpandedSidebarContent,
@@ -10,6 +9,7 @@ import {
   Sidebar,
   AnimationWrapper,
   animations,
+  LotusLink,
 } from "@/components";
 import { routes } from "@/routes";
 
@@ -21,16 +21,16 @@ interface Props {
 const NavbarBottomContent = () => {
   return (
     <>
-      <Link to="/">
+      <LotusLink to="/">
         <AnimationWrapper variants={animations.smallScale} key="nb-home-icon">
           <HiHome className="h-14 w-14 cursor-pointer fill-slate-700 hover:fill-slate-800" />
         </AnimationWrapper>
-      </Link>
-      <Link to="/about">
+      </LotusLink>
+      <LotusLink to="/about">
         <AnimationWrapper variants={animations.smallScale} key="nb-chart-icon">
           <HiArchive className="h-14 w-14 cursor-pointer fill-slate-700 hover:fill-slate-800" />
         </AnimationWrapper>
-      </Link>
+      </LotusLink>
     </>
   );
 };

src/components/overlay/sidebar/components/buttons/SidebarIconLink.tsx

@@ -1,9 +1,8 @@
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { HTMLProps, ReactNode } from "react";
-import { NavLink } from "react-router-dom";
 
-import { animations, AnimationWrapper, SidebarTooltip } from "@/components";
+import { animations, AnimationWrapper, LotusLink, SidebarTooltip } from "@/components";
 
 interface SidebarItemProps {
   icon: ReactNode;
@@ -52,13 +51,13 @@ export const SidebarIconLink = ({ children, to, icon, tooltip, ...props }: Props
   return (
     <div role="button" tabIndex={0} className="z-[1205]" {...props}>
       {to ? (
-        <NavLink to={to} end>
-          {({ isActive }) => (
+        <LotusLink to={to}>
+          {({ isActive }: any) => (
             <Content icon={icon} tooltip={tooltip} isActive={isActive}>
               {children}
             </Content>
           )}
-        </NavLink>
+        </LotusLink>
       ) : (
         <Content icon={icon} tooltip={tooltip}>
           {children}

src/components/overlay/sidebar/components/buttons/SidebarLink.tsx

@@ -1,9 +1,8 @@
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { HTMLProps, ReactNode } from "react";
-import { NavLink } from "react-router-dom";
 
-import { animations, AnimationWrapper } from "@/components";
+import { animations, AnimationWrapper, LotusLink } from "@/components";
 import { useSidebar } from "@/context";
 
 interface SidebarItemProps {
@@ -62,13 +61,13 @@ export const SidebarLink = ({ children, to, icon, ...props }: Props) => {
       {...props}
     >
       {to ? (
-        <NavLink to={to} end>
-          {({ isActive }) => (
+        <LotusLink to={to}>
+          {({ isActive }: any) => (
             <Content icon={icon} isActive={isActive}>
               {children}
             </Content>
           )}
-        </NavLink>
+        </LotusLink>
       ) : (
         <Content icon={icon}>{children}</Content>
       )}

src/context/app/AppContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState } from "react";
+
+type FrameworkType = "vite" | "next";
+
+type ProviderProps = {
+  children: React.ReactNode;
+  defaultFramework?: FrameworkType;
+};
+
+type InitialContextType = {
+  framework: FrameworkType;
+  setFramework: (framework: FrameworkType) => void;
+};
+
+const initContextData: InitialContextType = {
+  framework: "vite",
+  setFramework: () => {},
+};
+
+const AppContext = createContext(initContextData);
+
+export const useApp = () => useContext(AppContext);
+
+export const AppProvider = ({ children, defaultFramework = "vite" }: ProviderProps) => {
+  const [framework, setFramework] = useState<FrameworkType>(defaultFramework);
+
+  return <AppContext.Provider value={{ framework, setFramework }}>{children}</AppContext.Provider>;
+};

src/context/app/index.ts

@@ -0,0 +1 @@
+export * from "./AppContext";

src/context/index.ts

@@ -1 +1,2 @@
 export * from "./sidebar";
+export * from "./app";

src/hooks/useSidebarUtils.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
 
 import { useSidebar } from "@/context";
 import { useIsMobile } from "@/hooks";
@@ -66,14 +65,3 @@ export const useModifySidebarBasedOnDevice = () => {
   };
   return { modifyBasedOnDevice, modifyOnClick };
 };
-
-export const useRouteChanged = () => {
-  const location = useLocation();
-  const [routeChanged, setRouteChanged] = useState<boolean>(false);
-
-  useEffect(() => {
-    setRouteChanged(true);
-  }, [location]);
-
-  return { routeChanged, setRouteChanged };
-};

src/main.tsx

@@ -2,18 +2,20 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
-import { SidebarProvider } from "@/context";
+import { AppProvider, SidebarProvider } from "@/context";
 import { Router } from "@/routes";
 import "./style.css";
 
 const root = createRoot(document.getElementById("root") as HTMLElement);
 
 root.render(
   <StrictMode>
-    <SidebarProvider>
-      <BrowserRouter>
-        <Router />
-      </BrowserRouter>
-    </SidebarProvider>
+    <AppProvider>
+      <SidebarProvider>
+        <BrowserRouter>
+          <Router />
+        </BrowserRouter>
+      </SidebarProvider>
+    </AppProvider>
   </StrictMode>
 );

yarn.lock

@@ -1566,6 +1566,76 @@
     hey-listen "^1.0.8"
     tslib "^2.3.1"
 
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.1.6.tgz#c4925609f16142ded1a5cb833359ab17359b7a93"
+  integrity sha512-s+W9Fdqh5MFk6ECrbnVmmAOwxKQuhGMT7xXHrkYIBMBcTiOqNWhv5KbJIboKR5STXxNXl32hllnvKaffzFaWQg==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.6.tgz#d766dfc10e27814d947b20f052067c239913dbcc"
+  integrity sha512-F3/6Z8LH/pGlPzR1AcjPFxx35mPqjE5xZcf+IL+KgbW9tMkp7CYi1y7qKrEWU7W4AumxX/8OINnDQWLiwLasLQ==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.1.6.tgz#f37a98d5f18927d8c9970d750d516ac779465176"
+  integrity sha512-cMwQjnB8vrYkWyK/H0Rf2c2pKIH4RGjpKUDvbjVAit6SbwPDpmaijLio0LWFV3/tOnY6kvzbL62lndVA0mkYpw==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.6.tgz#ec1b90fd9bf809d8b81004c5182e254dced4ad96"
+  integrity sha512-KKRQH4DDE4kONXCvFMNBZGDb499Hs+xcFAwvj+rfSUssIDrZOlyfJNy55rH5t2Qxed1e4K80KEJgsxKQN1/fyw==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.6.tgz#e869ac75d16995eee733a7d1550322d9051c1eb4"
+  integrity sha512-/uOky5PaZDoaU99ohjtNcDTJ6ks/gZ5ykTQDvNZDjIoCxFe3+t06bxsTPY6tAO6uEAw5f6vVFX5H5KLwhrkZCA==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.6.tgz#84a7b2e423a2904afc2edca21c2f1ba6b53fa4c1"
+  integrity sha512-qaEALZeV7to6weSXk3Br80wtFQ7cFTpos/q+m9XVRFggu+8Ib895XhMWdJBzew6aaOcMvYR6KQ6JmHA2/eMzWw==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.6.tgz#980eed1f655ff8a72187d8a6ef9e73ac39d20d23"
+  integrity sha512-OybkbC58A1wJ+JrJSOjGDvZzrVEQA4sprJejGqMwiZyLqhr9Eo8FXF0y6HL+m1CPCpPhXEHz/2xKoYsl16kNqw==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.6.tgz#87a71db21cded3f7c63d1d19079845c59813c53d"
+  integrity sha512-yCH+yDr7/4FDuWv6+GiYrPI9kcTAO3y48UmaIbrKy8ZJpi7RehJe3vIBRUmLrLaNDH3rY1rwoHi471NvR5J5NQ==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.6.tgz#c5aac8619331b9fd030603bbe2b36052011e11de"
+  integrity sha512-ECagB8LGX25P9Mrmlc7Q/TQBb9rGScxHbv/kLqqIWs2fIXy6Y/EiBBiM72NTwuXUFCNrWR4sjUPSooVBJJ3ESQ==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.6.tgz#9513d36d540bbfea575576746736054c31aacdea"
+  integrity sha512-GT5w2mruk90V/I5g6ScuueE7fqj/d8Bui2qxdw6lFxmuTgMeol5rnzAv4uAoVQgClOUO/MULilzlODg9Ib3Y4Q==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.6.tgz#d61fc6884899f5957251f4ce3f522e34a2c479b7"
+  integrity sha512-keFD6KvwOPzmat4TCnlnuxJCQepPN+8j3Nw876FtULxo8005Y9Ghcl7ACcR8GoiKoddAq8gxNBrpjoxjQRHeAQ==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.6.tgz#fac2077a8ae9768e31444c9ae90807e64117cda7"
+  integrity sha512-OwertslIiGQluFvHyRDzBCIB07qJjqabAmINlXUYt7/sY7Q7QPE8xVi5beBxX/rxTGPIbtyIe3faBE6Z2KywhQ==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.6.tgz#498bc11c91b4c482a625bf4b978f98ae91111e46"
+  integrity sha512-g8zowiuP8FxUR9zslPmlju7qYbs2XBtTLVSxVikPtUDQedhcls39uKYLvOOd1JZg0ehyhopobRoH1q+MHlIN/w==
+
+"@next/[email protected]":
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.6.tgz#17ed919c723426b7d0ce1cd73d40ce3dcd342089"
+  integrity sha512-Ls2OL9hi3YlJKGNdKv8k3X/lLgc3VmLG3a/DeTkAd+lAituJp8ZHmRmm9f9SL84fT3CotlzcgbdaCDfFwFA6bA==
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1902,6 +1972,13 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@swc/[email protected]":
+  version "0.4.14"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
+  integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@testing-library/dom@^8.11.1", "@testing-library/dom@^8.5.0":
   version "8.19.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f"
@@ -2678,6 +2755,11 @@ caniuse-lite@^1.0.30001400:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001425.tgz#52917791a453eb3265143d2cd08d80629e82c735"
   integrity sha512-/pzFv0OmNG6W0ym80P3NtapU0QEiDS3VuYAZMGoLLqiC7f6FJFe1MjpQDREGApeenD9wloeytmVDj+JLXPC6qw==
 
+caniuse-lite@^1.0.30001406:
+  version "1.0.30001451"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001451.tgz#2e197c698fc1373d63e1406d6607ea4617c613f1"
+  integrity sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w==
+
 caniuse-lite@^1.0.30001426:
   version "1.0.30001429"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001429.tgz#70cdae959096756a85713b36dd9cb82e62325639"
@@ -2774,7 +2856,7 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
-client-only@^0.0.1:
+client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -4860,6 +4942,31 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next@^13.1.6:
+  version "13.1.6"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.1.6.tgz#054babe20b601f21f682f197063c9b0b32f1a27c"
+  integrity sha512-hHlbhKPj9pW+Cymvfzc15lvhaOZ54l+8sXDXJWm3OBNBzgrVj6hwGPmqqsXg40xO1Leq+kXpllzRPuncpC0Phw==
+  dependencies:
+    "@next/env" "13.1.6"
+    "@swc/helpers" "0.4.14"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.1.1"
+  optionalDependencies:
+    "@next/swc-android-arm-eabi" "13.1.6"
+    "@next/swc-android-arm64" "13.1.6"
+    "@next/swc-darwin-arm64" "13.1.6"
+    "@next/swc-darwin-x64" "13.1.6"
+    "@next/swc-freebsd-x64" "13.1.6"
+    "@next/swc-linux-arm-gnueabihf" "13.1.6"
+    "@next/swc-linux-arm64-gnu" "13.1.6"
+    "@next/swc-linux-arm64-musl" "13.1.6"
+    "@next/swc-linux-x64-gnu" "13.1.6"
+    "@next/swc-linux-x64-musl" "13.1.6"
+    "@next/swc-win32-arm64-msvc" "13.1.6"
+    "@next/swc-win32-ia32-msvc" "13.1.6"
+    "@next/swc-win32-x64-msvc" "13.1.6"
+
 node-releases@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
@@ -5225,6 +5332,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+[email protected]:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^8.0.9, postcss@^8.4.20, postcss@^8.4.21:
   version "8.4.21"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
@@ -5952,6 +6068,13 @@ strip-literal@^1.0.0:
   dependencies:
     acorn "^8.8.1"
 
+[email protected]:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
+  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
+  dependencies:
+    client-only "0.0.1"
+
 [email protected]:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"