refactor folder structure

src/containers/Editor/index.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import dynamic from "next/dynamic";
-import styled from "styled-components";
-import { Allotment } from "allotment";
-import "allotment/dist/style.css";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
-import { FullscreenDropzone } from "./components/FullscreenDropzone";
-
-export const StyledEditor = styled(Allotment)`
-  position: relative !important;
-  display: flex;
-  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  height: calc(100vh - 67px);
-
-  @media only screen and (max-width: 320px) {
-    height: 100vh;
-  }
-`;
-
-const TextEditor = dynamic(() => import("src/containers/Editor/components/TextEditor"), {
-  ssr: false,
-});
-
-const LiveEditor = dynamic(() => import("src/containers/Editor/components/LiveEditor"), {
-  ssr: false,
-});
-
-export const Editor = () => {
-  const fullscreen = useGraph(state => state.fullscreen);
-
-  return (
-    <>
-      <StyledEditor proportionalLayout={false}>
-        <Allotment.Pane
-          preferredSize={450}
-          minSize={fullscreen ? 0 : 300}
-          maxSize={800}
-          visible={!fullscreen}
-        >
-          <TextEditor />
-        </Allotment.Pane>
-        <Allotment.Pane minSize={0}>
-          <LiveEditor />
-        </Allotment.Pane>
-      </StyledEditor>
-      <FullscreenDropzone />
-    </>
-  );
-};

src/features/editor/BottomBar.tsx

@@ -12,7 +12,7 @@ import {
   VscSync,
   VscSyncIgnored,
 } from "react-icons/vsc";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
 

src/features/editor/LiveEditor.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import { GraphView } from "src/containers/Editor/components/views/GraphView";
-import { TreeView } from "src/containers/Editor/components/views/TreeView";
 import { ViewMode } from "src/enums/viewMode.enum";
+import { GraphView } from "src/features/editor/views/GraphView";
+import { TreeView } from "src/features/editor/views/TreeView";
 import useConfig from "src/store/useConfig";
 
 const StyledLiveEditor = styled.div`

src/features/editor/ModalController.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import * as Modals from "src/containers/Modals";
-import type { Modal } from "src/containers/Modals";
+import * as Modals from "src/features/modals";
+import type { Modal } from "src/features/modals";
 import useModal from "src/store/useModal";
 
 type ModalComponent = { key: Modal; component: React.FC<ModalProps> };

src/features/editor/Toolbar/ViewMenu.tsx

@@ -7,8 +7,8 @@ import toast from "react-hot-toast";
 import { CgChevronDown } from "react-icons/cg";
 import { TiFlowMerge } from "react-icons/ti";
 import { VscExpandAll, VscCollapseAll, VscTarget } from "react-icons/vsc";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
 import { ViewMode } from "src/enums/viewMode.enum";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useToggleHide from "src/hooks/useToggleHide";
 import useConfig from "src/store/useConfig";
 import type { LayoutDirection } from "src/types/graph";

src/features/editor/Toolbar/ZoomMenu.tsx

@@ -3,7 +3,7 @@ import { Menu, Flex, Input, Text } from "@mantine/core";
 import { getHotkeyHandler, useHotkeys } from "@mantine/hooks";
 import { event as gaEvent } from "nextjs-google-analytics";
 import { CgChevronDown } from "react-icons/cg";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import { StyledToolElement } from "./styles";
 
 export const ZoomMenu = () => {

src/features/editor/Toolbar/index.tsx

@@ -5,8 +5,8 @@ import toast from "react-hot-toast";
 import { AiOutlineFullscreen } from "react-icons/ai";
 import { FiDownload } from "react-icons/fi";
 import { LuCrown } from "react-icons/lu";
-import { SearchInput } from "src/containers/Toolbar/SearchInput";
 import { type FileFormat, formats } from "src/enums/file.enum";
+import { SearchInput } from "src/features/editor/Toolbar/SearchInput";
 import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
 import useFile from "src/store/useFile";
 import useModal from "src/store/useModal";

src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CustomNodeProps } from "src/containers/Editor/components/views/GraphView/CustomNode";
+import type { CustomNodeProps } from "src/features/editor/views/GraphView/CustomNode";
 import { TextRenderer } from "./TextRenderer";
 import * as Styled from "./styles";
 

src/features/editor/views/GraphView/CustomNode/TextNode.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 import { MdLink, MdLinkOff } from "react-icons/md";
-import type { CustomNodeProps } from "src/containers/Editor/components/views/GraphView/CustomNode";
-import { isContentImage } from "src/containers/Editor/components/views/GraphView/lib/utils/calculateNodeSize";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
+import type { CustomNodeProps } from "src/features/editor/views/GraphView/CustomNode";
+import { isContentImage } from "src/features/editor/views/GraphView/lib/utils/calculateNodeSize";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useToggleHide from "src/hooks/useToggleHide";
 import useConfig from "src/store/useConfig";
 import { TextRenderer } from "./TextRenderer";

src/features/editor/views/GraphView/CustomNode/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { NodeProps } from "reaflow";
 import { Node } from "reaflow";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useModal from "src/store/useModal";
 import type { NodeData } from "src/types/graph";
 import { ObjectNode } from "./ObjectNode";

src/features/editor/views/GraphView/index.tsx

@@ -6,8 +6,8 @@ import { Space } from "react-zoomable-ui";
 import { Canvas } from "reaflow";
 import type { ElkRoot } from "reaflow/dist/layout/useLayout";
 import { useLongPress } from "use-long-press";
-import { CustomNode } from "src/containers/Editor/components/views/GraphView/CustomNode";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
+import { CustomNode } from "src/features/editor/views/GraphView/CustomNode";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useToggleHide from "src/hooks/useToggleHide";
 import useConfig from "src/store/useConfig";
 import { CustomEdge } from "./CustomEdge";

src/features/editor/views/GraphView/lib/utils/addNodeToGraph.ts

@@ -1,6 +1,6 @@
 import type { NodeType } from "jsonc-parser";
-import type { Graph } from "src/containers/Editor/components/views/GraphView/lib/jsonParser";
-import { calculateNodeSize } from "src/containers/Editor/components/views/GraphView/lib/utils/calculateNodeSize";
+import type { Graph } from "src/features/editor/views/GraphView/lib/jsonParser";
+import { calculateNodeSize } from "src/features/editor/views/GraphView/lib/utils/calculateNodeSize";
 
 type Props = {
   graph: Graph;

src/features/editor/views/GraphView/lib/utils/traverse.ts

@@ -1,9 +1,6 @@
 import type { Node, NodeType } from "jsonc-parser";
-import type {
-  Graph,
-  States,
-} from "src/containers/Editor/components/views/GraphView/lib/jsonParser";
-import { calculateNodeSize } from "src/containers/Editor/components/views/GraphView/lib/utils/calculateNodeSize";
+import type { Graph, States } from "src/features/editor/views/GraphView/lib/jsonParser";
+import { calculateNodeSize } from "src/features/editor/views/GraphView/lib/utils/calculateNodeSize";
 import { addEdgeToGraph } from "./addEdgeToGraph";
 import { addNodeToGraph } from "./addNodeToGraph";
 

src/features/editor/views/GraphView/stores/useGraph.ts

@@ -1,11 +1,11 @@
 import type { ViewPort } from "react-zoomable-ui/dist/ViewPort";
 import type { CanvasDirection } from "reaflow/dist/layout/elkLayout";
 import { create } from "zustand";
-import { parser } from "src/containers/Editor/components/views/GraphView/lib/jsonParser";
-import { getChildrenEdges } from "src/containers/Editor/components/views/GraphView/lib/utils/getChildrenEdges";
-import { getOutgoers } from "src/containers/Editor/components/views/GraphView/lib/utils/getOutgoers";
+import { parser } from "src/features/editor/views/GraphView/lib/jsonParser";
+import { getChildrenEdges } from "src/features/editor/views/GraphView/lib/utils/getChildrenEdges";
+import { getOutgoers } from "src/features/editor/views/GraphView/lib/utils/getOutgoers";
+import useJson from "src/store/useJson";
 import type { NodeData, EdgeData } from "src/types/graph";
-import useJson from "../../../../../../store/useJson";
 
 export interface Graph {
   viewPort: ViewPort | null;

src/features/editor/views/TreeView/Value.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { DefaultTheme } from "styled-components";
 import { useTheme } from "styled-components";
-import { TextRenderer } from "src/containers/Editor/components/views/GraphView/CustomNode/TextRenderer";
+import { TextRenderer } from "src/features/editor/views/GraphView/CustomNode/TextRenderer";
 
 type TextColorFn = {
   theme: DefaultTheme;

src/features/modals/NodeModal/index.tsx

@@ -4,7 +4,7 @@ import { Modal, Stack, Text, ScrollArea, Button } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 import { event as gaEvent } from "nextjs-google-analytics";
 import { VscLock } from "react-icons/vsc";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useModal from "src/store/useModal";
 
 const dataToString = (data: any) => {

src/hooks/useFocusNode.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { useDebouncedValue } from "@mantine/hooks";
 import { event as gaEvent } from "nextjs-google-analytics";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import { searchQuery, cleanupHighlight, highlightMatchedNodes } from "src/lib/utils/search";
 
 export const useFocusNode = () => {

src/hooks/useToggleHide.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 
 const useToggleHide = () => {
   const getCollapsedNodeIds = useGraph(state => state.getCollapsedNodeIds);

src/layout/ConverterLayout/ToolPage.tsx

@@ -4,10 +4,10 @@ import { Editor } from "@monaco-editor/react";
 import { NextSeo } from "next-seo";
 import { LuCheck, LuXCircle } from "react-icons/lu";
 import { SEO } from "src/constants/seo";
-import { PageLinks } from "src/containers/ConverterLayout/PageLinks";
-import { editorOptions } from "src/containers/ConverterLayout/options";
 import { type FileFormat, formats } from "src/enums/file.enum";
-import Layout from "src/layout/Layout";
+import { PageLinks } from "src/layout/ConverterLayout/PageLinks";
+import { editorOptions } from "src/layout/ConverterLayout/options";
+import Layout from "src/layout/PageLayout";
 import { contentToJson, jsonToContent } from "src/lib/utils/jsonAdapter";
 
 interface ToolPageProps {

src/layout/PageLayout/Footer.tsx

@@ -4,7 +4,7 @@ import { Anchor, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@manti
 import dayjs from "dayjs";
 import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
-import { JSONCrackLogo } from "./JsonCrackLogo";
+import { JSONCrackLogo } from "../JsonCrackLogo";
 
 export const Footer = () => {
   return (

src/layout/PageLayout/Navbar.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { Button, Menu, type MenuItemProps, Text, Stack } from "@mantine/core";
 import styled from "styled-components";
 import { LuChevronDown } from "react-icons/lu";
-import { JSONCrackLogo } from "./JsonCrackLogo";
+import { JSONCrackLogo } from "../JsonCrackLogo";
 
 const StyledNavbarWrapper = styled.div`
   z-index: 3;

src/layout/PageLayout/index.tsx

@@ -11,12 +11,10 @@ const inter = Inter({
 
 const StyledLayoutWrapper = styled.div`
   background: #fff;
-  /* background-image: radial-gradient(#ededed 2px, #ffffff 2px); */
-  /* background-size: 40px 40px; */
   font-family: ${inter.style.fontFamily};
 `;
 
-const Layout = ({ children }: React.PropsWithChildren) => {
+const PageLayout = ({ children }: React.PropsWithChildren) => {
   return (
     <ThemeProvider theme={lightTheme}>
       <StyledLayoutWrapper>
@@ -28,4 +26,4 @@ const Layout = ({ children }: React.PropsWithChildren) => {
   );
 };
 
-export default Layout;
+export default PageLayout;

src/layout/TypeLayout/TypegenWrapper.tsx

@@ -4,9 +4,9 @@ import { Editor } from "@monaco-editor/react";
 import { NextSeo } from "next-seo";
 import { LuCheck, LuXCircle } from "react-icons/lu";
 import { SEO } from "src/constants/seo";
-import { editorOptions } from "src/containers/ConverterLayout/options";
 import { type FileFormat, formats, type TypeLanguage, typeOptions } from "src/enums/file.enum";
-import Layout from "src/layout/Layout";
+import { editorOptions } from "src/layout/ConverterLayout/options";
+import Layout from "src/layout/PageLayout";
 import { generateType } from "src/lib/utils/generateType";
 import { PageLinks } from "./PageLinks";
 

src/pages/404.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { Button, Stack, Text, Title } from "@mantine/core";
 import { NextSeo } from "next-seo";
 import { SEO } from "src/constants/seo";
-import Layout from "src/layout/Layout";
+import Layout from "src/layout/PageLayout";
 
 const NotFound = () => {
   return (

src/pages/_error.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { Button, Stack, Text, Title } from "@mantine/core";
 import { NextSeo } from "next-seo";
 import { SEO } from "src/constants/seo";
-import Layout from "src/layout/Layout";
+import Layout from "src/layout/PageLayout";
 
 const Custom500 = () => {
   const router = useRouter();

src/pages/converter/csv-to-json.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.CSV} to={FileFormat.JSON} />;

src/pages/converter/csv-to-xml.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.CSV} to={FileFormat.XML} />;

src/pages/converter/csv-to-yaml.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.CSV} to={FileFormat.YAML} />;

src/pages/converter/json-to-csv.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.JSON} to={FileFormat.CSV} />;

src/pages/converter/json-to-xml.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.JSON} to={FileFormat.XML} />;

src/pages/converter/json-to-yaml.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.JSON} to={FileFormat.YAML} />;

src/pages/converter/xml-to-csv.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.XML} to={FileFormat.CSV} />;

src/pages/converter/xml-to-json.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.XML} to={FileFormat.JSON} />;

src/pages/converter/xml-to-yaml.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.XML} to={FileFormat.YAML} />;

src/pages/converter/yaml-to-csv.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.YAML} to={FileFormat.CSV} />;

src/pages/converter/yaml-to-json.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.YAML} to={FileFormat.JSON} />;

src/pages/converter/yaml-to-xml.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ToolPage } from "src/containers/ConverterLayout/ToolPage";
 import { FileFormat } from "src/enums/file.enum";
+import { ToolPage } from "src/layout/ConverterLayout/ToolPage";
 
 const Page = () => {
   return <ToolPage from={FileFormat.YAML} to={FileFormat.XML} />;

src/pages/docs.tsx

@@ -4,7 +4,7 @@ import { CodeHighlight } from "@mantine/code-highlight";
 import styled from "styled-components";
 import { NextSeo } from "next-seo";
 import { SEO } from "src/constants/seo";
-import Layout from "src/layout/Layout";
+import Layout from "src/layout/PageLayout";
 
 const StyledFrame = styled.iframe`
   border: none;

src/pages/editor.tsx

@@ -5,17 +5,20 @@ import { useMantineColorScheme } from "@mantine/core";
 import "@mantine/dropzone/styles.css";
 import styled, { ThemeProvider } from "styled-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Allotment } from "allotment";
+import "allotment/dist/style.css";
 import { NextSeo } from "next-seo";
 import { SEO } from "src/constants/seo";
 import { darkTheme, lightTheme } from "src/constants/theme";
-import { Editor } from "src/containers/Editor";
-import { BottomBar } from "src/containers/Editor/components/BottomBar";
-import { Toolbar } from "src/containers/Toolbar";
+import { BottomBar } from "src/features/editor/BottomBar";
+import { FullscreenDropzone } from "src/features/editor/FullscreenDropzone";
+import { Toolbar } from "src/features/editor/Toolbar";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
 
-const ModalController = dynamic(() => import("src/layout/ModalController"));
-const ExternalMode = dynamic(() => import("src/layout/ExternalMode"));
+const ModalController = dynamic(() => import("src/features/editor/ModalController"));
+const ExternalMode = dynamic(() => import("src/features/editor/ExternalMode"));
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -41,11 +44,31 @@ export const StyledEditorWrapper = styled.div`
   overflow: hidden;
 `;
 
+export const StyledEditor = styled(Allotment)`
+  position: relative !important;
+  display: flex;
+  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
+  height: calc(100vh - 67px);
+
+  @media only screen and (max-width: 320px) {
+    height: 100vh;
+  }
+`;
+
+const TextEditor = dynamic(() => import("src/features/editor/TextEditor"), {
+  ssr: false,
+});
+
+const LiveEditor = dynamic(() => import("src/features/editor/LiveEditor"), {
+  ssr: false,
+});
+
 const EditorPage = () => {
   const { query, isReady } = useRouter();
   const { setColorScheme } = useMantineColorScheme();
   const checkEditorSession = useFile(state => state.checkEditorSession);
   const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
+  const fullscreen = useGraph(state => state.fullscreen);
 
   React.useEffect(() => {
     if (isReady) checkEditorSession(query?.json);
@@ -71,7 +94,20 @@ const EditorPage = () => {
             <StyledPageWrapper>
               <Toolbar />
               <StyledEditorWrapper>
-                <Editor />
+                <StyledEditor proportionalLayout={false}>
+                  <Allotment.Pane
+                    preferredSize={450}
+                    minSize={fullscreen ? 0 : 300}
+                    maxSize={800}
+                    visible={!fullscreen}
+                  >
+                    <TextEditor />
+                  </Allotment.Pane>
+                  <Allotment.Pane minSize={0}>
+                    <LiveEditor />
+                  </Allotment.Pane>
+                </StyledEditor>
+                <FullscreenDropzone />
               </StyledEditorWrapper>
             </StyledPageWrapper>
             <BottomBar />

src/pages/index.tsx

@@ -2,14 +2,14 @@ import React from "react";
 import type { InferGetStaticPropsType, GetStaticProps } from "next";
 import { NextSeo } from "next-seo";
 import { SEO } from "src/constants/seo";
-import { FAQ } from "src/containers/Landing/FAQ";
-import { Features } from "src/containers/Landing/Features";
-import { HeroPreview } from "src/containers/Landing/HeroPreview";
-import { HeroSection } from "src/containers/Landing/HeroSection";
-import { LovedBy } from "src/containers/Landing/LovedBy";
-import { Section1 } from "src/containers/Landing/Section1";
-import { SeePremium } from "src/containers/Landing/SeePremium";
-import Layout from "src/layout/Layout";
+import { FAQ } from "src/layout/Landing/FAQ";
+import { Features } from "src/layout/Landing/Features";
+import { HeroPreview } from "src/layout/Landing/HeroPreview";
+import { HeroSection } from "src/layout/Landing/HeroSection";
+import { LovedBy } from "src/layout/Landing/LovedBy";
+import { Section1 } from "src/layout/Landing/Section1";
+import { SeePremium } from "src/layout/Landing/SeePremium";
+import Layout from "src/layout/PageLayout";
 
 export const HomePage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (

src/pages/legal/privacy.tsx

@@ -3,7 +3,7 @@ import { Box, Container, Paper, Stack, Text, Title } from "@mantine/core";
 import { NextSeo } from "next-seo";
 import { SEO } from "src/constants/seo";
 import privacy from "src/data/privacy.json";
-import Layout from "src/layout/Layout";
+import Layout from "src/layout/PageLayout";
 
 const Privacy = () => {
   return (

src/pages/legal/terms.tsx

@@ -3,7 +3,7 @@ import { Box, Container, Paper, Stack, Text, Title } from "@mantine/core";
 import { NextSeo } from "next-seo";
 import { SEO } from "src/constants/seo";
 import terms from "src/data/terms.json";
-import Layout from "src/layout/Layout";
+import Layout from "src/layout/PageLayout";
 
 const Terms = () => {
   return (

src/pages/tools/json-schema.tsx

@@ -3,9 +3,9 @@ import { Box, Button, Container, Flex, Paper, Title, Text } from "@mantine/core"
 import { Editor, type OnMount } from "@monaco-editor/react";
 import { JSONSchemaFaker } from "json-schema-faker";
 import { LuCheck, LuXCircle } from "react-icons/lu";
-import { editorOptions } from "src/containers/ConverterLayout/options";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
-import Layout from "src/layout/Layout";
+import { editorOptions } from "src/layout/ConverterLayout/options";
+import Layout from "src/layout/PageLayout";
 import { generateType } from "src/lib/utils/generateType";
 import { jsonToContent } from "src/lib/utils/jsonAdapter";
 

src/pages/type/csv-to-go.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.CSV} to={TypeLanguage.Go} />;

src/pages/type/csv-to-kotlin.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.CSV} to={TypeLanguage.Kotlin} />;

src/pages/type/csv-to-rust.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.CSV} to={TypeLanguage.Rust} />;

src/pages/type/csv-to-typescript.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.CSV} to={TypeLanguage.TypeScript} />;

src/pages/type/json-to-go.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.JSON} to={TypeLanguage.Go} />;

src/pages/type/json-to-kotlin.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.JSON} to={TypeLanguage.Kotlin} />;

src/pages/type/json-to-rust.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.JSON} to={TypeLanguage.Rust} />;

src/pages/type/json-to-typescript.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.JSON} to={TypeLanguage.TypeScript} />;

src/pages/type/xml-to-go.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.XML} to={TypeLanguage.Go} />;

src/pages/type/xml-to-kotlin.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.XML} to={TypeLanguage.Kotlin} />;

src/pages/type/xml-to-rust.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.XML} to={TypeLanguage.Rust} />;

src/pages/type/xml-to-typescript.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.XML} to={TypeLanguage.TypeScript} />;

src/pages/type/yaml-to-go.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.YAML} to={TypeLanguage.Go} />;

src/pages/type/yaml-to-kotlin.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.YAML} to={TypeLanguage.Kotlin} />;

src/pages/type/yaml-to-rust.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.YAML} to={TypeLanguage.Rust} />;

src/pages/type/yaml-to-typescript.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { TypegenWrapper } from "src/containers/TypeLayout/TypegenWrapper";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
+import { TypegenWrapper } from "src/layout/TypeLayout/TypegenWrapper";
 
 const TypePage = () => {
   return <TypegenWrapper from={FileFormat.YAML} to={TypeLanguage.TypeScript} />;

src/pages/widget.tsx

@@ -6,8 +6,8 @@ import { ThemeProvider } from "styled-components";
 import { NextSeo } from "next-seo";
 import toast from "react-hot-toast";
 import { darkTheme, lightTheme } from "src/constants/theme";
-import useGraph from "src/containers/Editor/components/views/GraphView/stores/useGraph";
-import { Toolbar } from "src/containers/Toolbar";
+import { Toolbar } from "src/features/editor/Toolbar";
+import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useFile from "src/store/useFile";
 import type { LayoutDirection } from "src/types/graph";
 
@@ -22,7 +22,7 @@ interface EmbedMessage {
 }
 
 const GraphView = dynamic(
-  () => import("src/containers/Editor/components/views/GraphView").then(c => c.GraphView),
+  () => import("src/features/editor/views/GraphView").then(c => c.GraphView),
   {
     ssr: false,
   }