lint fix

.prettierrc

@@ -7,8 +7,9 @@
   "importOrder": [
     "^(react/(.*)$)|^(react$)",
     "^(next/(.*)$)|^(next$)",
+    "styled",
     "<THIRD_PARTY_MODULES>",
-    "^components/(.*)$",
+    "^src/(.*)$",
     "^utils/(.*)$",
     "^assets/(.*)$",
     "^[./]"

src/components/CustomNode/TextNode.tsx

@@ -1,9 +1,9 @@
 import React from "react";
+import styled from "styled-components";
 import { MdLink, MdLinkOff } from "react-icons/md";
 import { CustomNodeProps } from "src/components/CustomNode";
 import useGraph from "src/store/useGraph";
 import useStored from "src/store/useStored";
-import styled from "styled-components";
 import * as Styled from "./styles";
 
 const StyledExpand = styled.button`

src/components/CustomNode/styles.tsx

@@ -1,6 +1,6 @@
 import { Roboto_Mono } from "next/font/google";
-import { LinkItUrl } from "react-linkify-it";
 import styled, { DefaultTheme } from "styled-components";
+import { LinkItUrl } from "react-linkify-it";
 
 const robotoMono = Roboto_Mono({
   weight: "500",

src/components/ErrorContainer/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import styled from "styled-components";
 import { MdReportGmailerrorred, MdOutlineCheckCircleOutline } from "react-icons/md";
 import useJson from "src/store/useJson";
-import styled from "styled-components";
 
 const StyledErrorWrapper = styled.div`
   z-index: 1;

src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
-import { FaDiscord, FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
 import styled from "styled-components";
+import { FaDiscord, FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
 import pkg from "../../../package.json";
 
 export const StyledFooter = styled.footer`

src/components/Graph/PremiumView.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Button } from "@mantine/core";
 import styled from "styled-components";
+import { Button } from "@mantine/core";
 
 const StyledPremiumView = styled.div`
   display: flex;

src/components/Graph/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
+import styled from "styled-components";
 import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { Canvas, Edge, EdgeProps, ElkRoot, NodeProps } from "reaflow";
 import { CustomNode } from "src/components/CustomNode";
 import useGraph from "src/store/useGraph";
 import useUser from "src/store/useUser";
-import styled from "styled-components";
 import { Loading } from "../Loading";
 import { ErrorView } from "./ErrorView";
 import { PremiumView } from "./PremiumView";

src/components/Loading/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Center, Image, Stack, Title } from "@mantine/core";
 import styled, { keyframes } from "styled-components";
+import { Center, Image, Stack, Title } from "@mantine/core";
 
 interface LoadingProps {
   loading?: boolean;

src/components/MonacoEditor/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
+import styled from "styled-components";
 import Editor, { loader, Monaco } from "@monaco-editor/react";
 import debounce from "lodash.debounce";
 import { Loading } from "src/components/Loading";
 import useJson from "src/store/useJson";
 import useStored from "src/store/useStored";
-import styled from "styled-components";
 
 loader.config({
   paths: {

src/components/SearchInput/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import styled from "styled-components";
 import { AiOutlineSearch } from "react-icons/ai";
 import { IoCloseSharp } from "react-icons/io5";
 import { useFocusNode } from "src/hooks/useFocusNode";
-import styled from "styled-components";
 
 const StyledInputWrapper = styled.div`
   display: flex;

src/components/Sidebar/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import styled from "styled-components";
 import { Tooltip } from "@mantine/core";
 import toast from "react-hot-toast";
 import { AiOutlineDelete, AiOutlineSave, AiOutlineFileAdd, AiOutlineEdit } from "react-icons/ai";
@@ -15,7 +16,6 @@ import useGraph from "src/store/useGraph";
 import useJson from "src/store/useJson";
 import useModal from "src/store/useModal";
 import { getNextDirection } from "src/utils/getNextDirection";
-import styled from "styled-components";
 
 const StyledSidebar = styled.div`
   display: flex;

src/components/Sponsors/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import styled from "styled-components";
 import { Avatar, Tooltip, UnstyledButton } from "@mantine/core";
 import useStored from "src/store/useStored";
-import styled from "styled-components";
 
 async function getSponsors() {
   try {

src/components/SupportButton/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { HiHeart } from "react-icons/hi";
 import styled from "styled-components";
+import { HiHeart } from "react-icons/hi";
 
 const StyledText = styled.span`
   white-space: nowrap;

src/containers/Editor/BottomBar.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
+import styled from "styled-components";
 import toast from "react-hot-toast";
 import {
   AiOutlineCloudSync,
@@ -15,7 +16,6 @@ import useJson from "src/store/useJson";
 import useModal from "src/store/useModal";
 import useStored from "src/store/useStored";
 import useUser from "src/store/useUser";
-import styled from "styled-components";
 
 const StyledBottomBar = styled.div`
   display: flex;

src/containers/Editor/JsonEditor/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import styled from "styled-components";
 import { ErrorContainer } from "src/components/ErrorContainer";
 import { MonacoEditor } from "src/components/MonacoEditor";
-import styled from "styled-components";
 
 const StyledEditorWrapper = styled.div`
   display: flex;

src/containers/Editor/LiveEditor/Tools.tsx

@@ -1,11 +1,11 @@
 import React from "react";
+import styled from "styled-components";
 import { AiOutlineFullscreen, AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
 import { FiDownload } from "react-icons/fi";
 import { MdCenterFocusWeak } from "react-icons/md";
 import { SearchInput } from "src/components/SearchInput";
 import useGraph from "src/store/useGraph";
 import useModal from "src/store/useModal";
-import styled from "styled-components";
 
 export const StyledTools = styled.div`
   position: relative;

src/containers/Editor/LiveEditor/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import styled from "styled-components";
 import { GraphCanvas } from "src/containers/Editor/LiveEditor/GraphCanvas";
 import { Tools } from "src/containers/Editor/LiveEditor/Tools";
-import styled from "styled-components";
 
 const StyledLiveEditor = styled.div`
   position: relative;

src/containers/Editor/Panes.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import dynamic from "next/dynamic";
+import styled from "styled-components";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
 import { JsonEditor } from "src/containers/Editor/JsonEditor";
 import useGraph from "src/store/useGraph";
-import styled from "styled-components";
 
 export const StyledEditor = styled(Allotment)`
   position: relative !important;

src/containers/ModalController/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { shallow } from "zustand/shallow";
 import { AccountModal } from "src/containers/Modals/AccountModal";
 import { ClearModal } from "src/containers/Modals/ClearModal";
 import { CloudModal } from "src/containers/Modals/CloudModal";
@@ -8,7 +9,6 @@ import { LoginModal } from "src/containers/Modals/LoginModal";
 import { SettingsModal } from "src/containers/Modals/SettingsModal";
 import { ShareModal } from "src/containers/Modals/ShareModal";
 import useModal from "src/store/useModal";
-import { shallow } from "zustand/shallow";
 import { PremiumModal } from "../Modals/PremiumModal";
 
 export const ModalController = () => {

src/containers/Modals/AccountModal/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import Link from "next/link";
+import styled from "styled-components";
 import { Modal, Group, Button, Badge, Avatar, Grid, Divider, ModalProps } from "@mantine/core";
 import { IoRocketSharp } from "react-icons/io5";
 import useUser from "src/store/useUser";
-import styled from "styled-components";
 
 const StyledTitle = styled.div`
   display: flex;

src/containers/Modals/CloudModal/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useRouter } from "next/router";
+import styled from "styled-components";
 import {
   Modal,
   Group,
@@ -23,7 +24,6 @@ import { deleteJson, getAllJson, saveJson, updateJson } from "src/services/db/js
 import useJson from "src/store/useJson";
 import useUser from "src/store/useUser";
 import { Json } from "src/typings/altogic";
-import styled from "styled-components";
 
 dayjs.extend(relativeTime);
 

src/containers/Modals/ImportModal/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
+import styled from "styled-components";
 import { Modal, Group, Button, TextInput, Stack, Divider, ModalProps } from "@mantine/core";
 import toast from "react-hot-toast";
 import { AiOutlineUpload } from "react-icons/ai";
 import useJson from "src/store/useJson";
-import styled from "styled-components";
 
 const StyledUploadWrapper = styled.label`
   display: flex;

src/containers/Modals/NodeModal/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Modal, Stack, Text, ScrollArea, ModalProps } from "@mantine/core";
 import { Prism } from "@mantine/prism";
+import { shallow } from "zustand/shallow";
 import useGraph from "src/store/useGraph";
 import { dataToString } from "src/utils/dataToString";
-import { shallow } from "zustand/shallow";
 
 const CodeBlock: React.FC<{ children: any }> = ({ children }) => {
   return (

src/containers/Modals/SettingsModal/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Modal, Group, Switch, Stack, ModalProps } from "@mantine/core";
-import useStored from "src/store/useStored";
 import { shallow } from "zustand/shallow";
+import useStored from "src/store/useStored";
 
 export const SettingsModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   const lightmode = useStored(state => state.lightmode);

src/containers/PricingCards/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Button } from "@mantine/core";
 import styled from "styled-components";
+import { Button } from "@mantine/core";
 
 const StyledSectionBody = styled.div`
   display: grid;

src/pages/404.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
-import { Button } from "@mantine/core";
 import styled from "styled-components";
+import { Button } from "@mantine/core";
 
 const StyledNotFound = styled.div`
   display: flex;

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { AppProps } from "next/app";
 import localFont from "next/font/local";
+import { ThemeProvider } from "styled-components";
 import { MantineProvider } from "@mantine/core";
 import { init } from "@sentry/nextjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -10,7 +11,6 @@ import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme, lightTheme } from "src/constants/theme";
 import { ModalController } from "src/containers/ModalController";
 import useStored from "src/store/useStored";
-import { ThemeProvider } from "styled-components";
 
 if (process.env.NODE_ENV !== "development") {
   init({

src/pages/_error.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
-import { Button } from "@mantine/core";
 import styled from "styled-components";
+import { Button } from "@mantine/core";
 
 const StyledNotFound = styled.div`
   display: flex;

src/pages/docs.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
+import styled from "styled-components";
 import { Button } from "@mantine/core";
 import materialDark from "react-syntax-highlighter/dist/cjs/styles/prism/material-dark";
 import { Footer } from "src/components/Footer";
-import styled from "styled-components";
 
 const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
   ssr: false,

src/pages/editor.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
+import styled from "styled-components";
 import { Loading } from "src/components/Loading";
 import { Sidebar } from "src/components/Sidebar";
 import { BottomBar } from "src/containers/Editor/BottomBar";
 import Panes from "src/containers/Editor/Panes";
 import useJson from "src/store/useJson";
 import useUser from "src/store/useUser";
-import styled from "styled-components";
 
 export const StyledPageWrapper = styled.div`
   display: flex;

src/pages/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import { ThemeProvider } from "styled-components";
 import { darkTheme } from "src/constants/theme";
 import Home from "src/containers/Home";
-import { ThemeProvider } from "styled-components";
 
 const HomePage = () => {
   return (

src/pages/pricing.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import styled from "styled-components";
 import { Button } from "@mantine/core";
 import { Footer } from "src/components/Footer";
 import { PricingCards } from "src/containers/PricingCards";
-import styled from "styled-components";
 
 const StyledPageWrapper = styled.div`
   padding: 5%;

src/pages/sign-in.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import styled from "styled-components";
 import { Button, Center, Container, Stack } from "@mantine/core";
 import { AiOutlineGithub, AiOutlineGoogle } from "react-icons/ai";
 import { altogic } from "src/api/altogic";
 import { Footer } from "src/components/Footer";
 import { Navbar } from "src/components/Navbar";
 import useUser from "src/store/useUser";
-import styled from "styled-components";
 
 const StyledPageWrapper = styled.div`
   padding: 5%;

src/pages/widget.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
+import styled, { ThemeProvider } from "styled-components";
 import toast from "react-hot-toast";
 import { baseURL } from "src/constants/data";
 import { darkTheme, lightTheme } from "src/constants/theme";
@@ -8,7 +9,6 @@ import { Tools } from "src/containers/Editor/LiveEditor/Tools";
 import { getPartnerStatus } from "src/services/db/widget";
 import useGraph from "src/store/useGraph";
 import useJson from "src/store/useJson";
-import styled, { ThemeProvider } from "styled-components";
 
 const GraphCanvas = dynamic(
   () => import("src/containers/Editor/LiveEditor/GraphCanvas").then(c => c.GraphCanvas),

src/store/useGraph.tsx

@@ -1,9 +1,9 @@
 import { ReactZoomPanPinchRef } from "react-zoom-pan-pinch";
 import { CanvasDirection } from "reaflow/dist/layout/elkLayout";
+import { create } from "zustand";
 import { parser } from "src/utils/core/jsonParser";
 import { getChildrenEdges } from "src/utils/getChildrenEdges";
 import { getOutgoers } from "src/utils/getOutgoers";
-import { create } from "zustand";
 import useJson from "./useJson";
 
 const initialStates = {

src/store/useJson.tsx

@@ -1,11 +1,11 @@
 import { decompressFromBase64 } from "lz-string";
 import toast from "react-hot-toast";
+import { create } from "zustand";
 import { altogic } from "src/api/altogic";
 import { defaultJson } from "src/constants/data";
 import { saveJson as saveJsonDB } from "src/services/db/json";
 import useGraph from "src/store/useGraph";
 import { Json } from "src/typings/altogic";
-import { create } from "zustand";
 
 interface JsonActions {
   setJson: (json: string) => void;

src/store/useUser.tsx

@@ -1,7 +1,7 @@
 import toast from "react-hot-toast";
+import { create } from "zustand";
 import { altogic } from "src/api/altogic";
 import { AltogicAuth, User } from "src/typings/altogic";
-import { create } from "zustand";
 import useModal from "./useModal";
 
 interface UserActions {
@@ -51,29 +51,28 @@ const useUser = create<UserStates & UserActions>()((set, get) => ({
     }
   },
   checkSession: async () => {
-    if (process.env.NODE_ENV === "development") {
-      return set({
-        user: {
-          _id: "0",
-          provider: "altogic",
-          providerUserId: "1",
-          email: "[email protected]",
-          name: "JSON Crack",
-          profilePicture: "",
-          signUpAt: "2022-12-04T11:07:32.000Z",
-          lastLoginAt: "2023-03-12T14:17:03.146Z",
-          type: 1,
-          updatedAt: "2022-12-30T10:56:29.772Z",
-        },
-        isAuthenticated: true,
-      });
-    }
+    // if (process.env.NODE_ENV === "development") {
+    //   return set({
+    //     user: {
+    //       _id: "0",
+    //       provider: "altogic",
+    //       providerUserId: "1",
+    //       email: "[email protected]",
+    //       name: "JSON Crack",
+    //       profilePicture: "",
+    //       signUpAt: "2022-12-04T11:07:32.000Z",
+    //       lastLoginAt: "2023-03-12T14:17:03.146Z",
+    //       type: 1,
+    //       updatedAt: "2022-12-30T10:56:29.772Z",
+    //     },
+    //     isAuthenticated: true,
+    //   });
+    // }
 
     const currentSession = altogic.auth.getSession();
 
     if (currentSession) {
       const dbUser = await altogic.auth.getUserFromDB();
-      console.log(dbUser);
 
       altogic.auth.setSession(currentSession);
       set({ user: dbUser.user as any, isAuthenticated: true });

src/typings/styled.d.ts

@@ -1,5 +1,5 @@
-import theme from "src/constants/theme";
 import "styled-components";
+import theme from "src/constants/theme";
 
 type CustomTheme = typeof theme;