feat(refactor): move away from atomic design pattern

src/api/storage.ts

@@ -1,7 +1,7 @@
 import { default as axios } from "axios";
 import { WorkflowFile } from "maxun-core";
-import { RunSettings } from "../components/molecules/RunSettings";
-import { ScheduleSettings } from "../components/molecules/ScheduleSettings";
+import { RunSettings } from "../components/run/RunSettings";
+import { ScheduleSettings } from "../components/robot/ScheduleSettings";
 import { CreateRunResponse, ScheduleRunResponse } from "../pages/MainPage";
 import { apiUrl } from "../apiConfig";
 

src/components/molecules/action-settings/scrape.tsx → src/components/action/action-settings/scrape.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
 import { Stack, TextField } from "@mui/material";
-import { WarningText } from '../../atoms/texts';
+import { WarningText } from '../../ui/texts';
 import InfoIcon from "@mui/icons-material/Info";
 
 export const ScrapeSettings = forwardRef((props, ref) => {

src/components/molecules/action-settings/scrapeSchema.tsx → src/components/action/action-settings/scrapeSchema.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import { WarningText } from "../../atoms/texts";
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { WarningText } from "../../ui/texts";
 import InfoIcon from "@mui/icons-material/Info";
-import { KeyValueForm } from "../KeyValueForm";
+import { KeyValueForm } from "../../recorder/KeyValueForm";
 
 export const ScrapeSchemaSettings = forwardRef((props, ref) => {
   const keyValueFormRef = useRef<{ getObject: () => object }>(null);

src/components/molecules/action-settings/screenshot.tsx → src/components/action/action-settings/screenshot.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
-import { InputLabel, MenuItem, TextField, Select, FormControl } from "@mui/material";
+import { MenuItem, TextField } from "@mui/material";
 import { ScreenshotSettings as Settings } from "../../../shared/types";
 import styled from "styled-components";
 import { SelectChangeEvent } from "@mui/material/Select/Select";
-import { Dropdown } from "../../atoms/DropdownMui";
+import { Dropdown } from "../../ui/DropdownMui";
 
 export const ScreenshotSettings = forwardRef((props, ref) => {
   const [settings, setSettings] = React.useState<Settings>({});

src/components/organisms/BrowserContent.tsx → src/components/browser/BrowserContent.tsx

@@ -1,17 +1,13 @@
 import React, { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
-import BrowserNavBar from "../molecules/BrowserNavBar";
+import BrowserNavBar from "./BrowserNavBar";
 import { BrowserWindow } from "./BrowserWindow";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";
-import { BrowserTabs } from "../molecules/BrowserTabs";
+import { BrowserTabs } from "./BrowserTabs";
 import { useSocketStore } from "../../context/socket";
 import {
   getCurrentTabs,
-  getCurrentUrl,
-  interpretCurrentRecording,
 } from "../../api/recording";
-import { Box } from "@mui/material";
-import { InterpretationLog } from "../molecules/InterpretationLog";
 
 // TODO: Tab !show currentUrl after recordingUrl global state
 export const BrowserContent = () => {
@@ -152,9 +148,9 @@ export const BrowserContent = () => {
         // todo: use width from browser dimension once fixed
         browserWidth={900}
         handleUrlChanged={handleUrlChanged}
-       
+
       />
-      <BrowserWindow  />
+      <BrowserWindow />
     </div>
   );
 };

src/components/molecules/BrowserNavBar.tsx → src/components/browser/BrowserNavBar.tsx

@@ -1,11 +1,9 @@
 import type { FC } from 'react';
 import styled from 'styled-components';
-
 import ReplayIcon from '@mui/icons-material/Replay';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-
-import { NavBarButton } from '../atoms/buttons/buttons';
+import { NavBarButton } from '../ui/buttons/buttons';
 import { UrlForm } from './UrlForm';
 import { useCallback, useEffect, useState } from "react";
 import { useSocketStore } from "../../context/socket";
@@ -21,7 +19,7 @@ const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
     border-radius: 0px 5px 0px 0px;
 `;
 
-const IconButton = styled(NavBarButton)<{ mode: string }>`
+const IconButton = styled(NavBarButton) <{ mode: string }>`
   background-color: ${({ mode }) => (mode === 'dark' ? '#2C2F33' : '#f6f6f6')};
   transition: background-color 0.3s ease, transform 0.1s ease;
   color: ${({ mode }) => (mode === 'dark' ? '#FFFFFF' : '#333')};

src/components/molecules/BrowserRecordingSave.tsx → src/components/browser/BrowserRecordingSave.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { Grid, Button, Box, Typography } from '@mui/material';
-import { SaveRecording } from "./SaveRecording";
+import { SaveRecording } from "../recorder/SaveRecording";
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { stopRecording } from "../../api/recording";
 import { useNavigate } from 'react-router-dom';
-import { GenericModal } from "../atoms/GenericModal";
+import { GenericModal } from "../ui/GenericModal";
 import { useTranslation } from 'react-i18next';
 
 const BrowserRecordingSave = () => {
@@ -37,18 +37,18 @@ const BrowserRecordingSave = () => {
           overflow: 'hidden',
           display: 'flex',
           justifyContent: 'space-between',
-          height:"48px"
+          height: "48px"
         }}>
-          <Button 
-            onClick={() => setOpenModal(true)} 
-            variant="outlined" 
-            color="error"  
-            sx={{ 
+          <Button
+            onClick={() => setOpenModal(true)}
+            variant="outlined"
+            color="error"
+            sx={{
               marginLeft: '25px',
               color: 'red !important',
               borderColor: 'red !important',
               backgroundColor: 'whitesmoke !important',
-            }} 
+            }}
             size="small"
           >
             {t('right_panel.buttons.discard')}
@@ -60,10 +60,10 @@ const BrowserRecordingSave = () => {
                 <Button onClick={goToMainMenu} variant="contained" color="error">
                   {t('right_panel.buttons.discard')}
                 </Button>
-                <Button 
-                  onClick={() => setOpenModal(false)} 
+                <Button
+                  onClick={() => setOpenModal(false)}
                   variant="outlined"
-                  sx={{ 
+                  sx={{
                     color: '#ff00c3 !important',
                     borderColor: '#ff00c3 !important',
                     backgroundColor: 'whitesmoke !important',

src/components/molecules/BrowserTabs.tsx → src/components/browser/BrowserTabs.tsx

@@ -49,9 +49,9 @@ export const BrowserTabs = (
                 id={`tab-${index}`}
                 sx={{
                   background: 'white',
-                  borderRadius: '5px 5px 0px 0px',                  
+                  borderRadius: '5px 5px 0px 0px',
                   '&.Mui-selected': {
-                    backgroundColor:` ${isDarkMode?"#2a2a2a":"#f5f5f5"}`, // Synced selected tab color
+                    backgroundColor: ` ${isDarkMode ? "#2a2a2a" : "#f5f5f5"}`, // Synced selected tab color
                     color: '#ff00c3', // Slightly lighter text when selected
                   },
                 }}

src/components/organisms/BrowserWindow.tsx → src/components/browser/BrowserWindow.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSocketStore } from '../../context/socket';
 import { Button } from '@mui/material';
-import Canvas from "../atoms/canvas";
-import { Highlighter } from "../atoms/Highlighter";
-import { GenericModal } from '../atoms/GenericModal';
+import Canvas from "../recorder/canvas";
+import { Highlighter } from "../recorder/Highlighter";
+import { GenericModal } from '../ui/GenericModal';
 import { useActionContext } from '../../context/browserActions';
 import { useBrowserSteps, TextStep } from '../../context/browserSteps';
 import { useGlobalInfoStore } from '../../context/globalInfo';
@@ -141,9 +141,9 @@ export const BrowserWindow = () => {
                 } else if (data.elementInfo?.isIframeContent && data.childSelectors) {
                     // Handle pure iframe elements - similar to previous shadow DOM logic but using iframe syntax
                     // Check if the selector matches any iframe child selectors
-                    const isIframeChild = data.childSelectors.some(childSelector => 
+                    const isIframeChild = data.childSelectors.some(childSelector =>
                         data.selector.includes(':>>') && // Iframe uses :>> for traversal
-                        childSelector.split(':>>').some(part => 
+                        childSelector.split(':>>').some(part =>
                             data.selector.includes(part.trim())
                         )
                     );
@@ -152,46 +152,46 @@ export const BrowserWindow = () => {
                     // Handle mixed DOM cases with iframes
                     // Split the selector into parts and check each against child selectors
                     const selectorParts = data.selector.split(':>>').map(part => part.trim());
-                    const isValidMixedSelector = selectorParts.some(part => 
+                    const isValidMixedSelector = selectorParts.some(part =>
                         // We know data.childSelectors is defined due to hasValidChildSelectors check
-                        data.childSelectors!.some(childSelector => 
+                        data.childSelectors!.some(childSelector =>
                             childSelector.includes(part)
                         )
                     );
                     setHighlighterData(isValidMixedSelector ? data : null);
                 } else if (data.elementInfo?.isShadowRoot && data.childSelectors) {
                     // New case: Handle pure Shadow DOM elements
                     // Check if the selector matches any shadow root child selectors
-                    const isShadowChild = data.childSelectors.some(childSelector => 
+                    const isShadowChild = data.childSelectors.some(childSelector =>
                         data.selector.includes('>>') && // Shadow DOM uses >> for piercing
-                        childSelector.split('>>').some(part => 
+                        childSelector.split('>>').some(part =>
                             data.selector.includes(part.trim())
                         )
                     );
                     setHighlighterData(isShadowChild ? data : null);
-                 } else if (data.selector.includes('>>') && hasValidChildSelectors) {
+                } else if (data.selector.includes('>>') && hasValidChildSelectors) {
                     // New case: Handle mixed DOM cases
                     // Split the selector into parts and check each against child selectors
                     const selectorParts = data.selector.split('>>').map(part => part.trim());
-                    const isValidMixedSelector = selectorParts.some(part => 
+                    const isValidMixedSelector = selectorParts.some(part =>
                         // Now we know data.childSelectors is defined
-                        data.childSelectors!.some(childSelector => 
+                        data.childSelectors!.some(childSelector =>
                             childSelector.includes(part)
                         )
                     );
                     setHighlighterData(isValidMixedSelector ? data : null);
-                  } else {
+                } else {
                     // if !valid child in normal mode, clear the highlighter
                     setHighlighterData(null);
-                  }
-              } else {
+                }
+            } else {
                 // Set highlighterData for the initial listSelector selection
                 setHighlighterData(data);
-              }
-          } else {
+            }
+        } else {
             // For non-list steps
             setHighlighterData(data);
-          }
+        }
     }, [highlighterData, getList, socket, listSelector, paginationMode, paginationType, captureStage]);
 
 
@@ -403,11 +403,11 @@ export const BrowserWindow = () => {
                                             overflow: 'hidden',
                                             padding: '5px 10px',
                                         }}
-                                        sx={{ 
+                                        sx={{
                                             color: '#ff00c3 !important',
                                             borderColor: '#ff00c3 !important',
                                             backgroundColor: 'whitesmoke !important',
-                                          }} 
+                                        }}
                                     >
                                         <span style={{
                                             display: 'block',

src/components/molecules/UrlForm.tsx → src/components/browser/UrlForm.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import type { SyntheticEvent } from 'react';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import { NavBarForm, NavBarInput } from "../atoms/form";
-import { UrlFormButton } from "../atoms/buttons/buttons";
+import { NavBarForm, NavBarInput } from "../ui/form";
+import { UrlFormButton } from "../ui/buttons/buttons";
 import { useSocketStore } from '../../context/socket';
 import { Socket } from "socket.io-client";
 

src/components/organisms/MainMenu.tsx → src/components/dashboard/MainMenu.tsx

@@ -2,25 +2,20 @@ import React from 'react';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
-
 import { Paper, Button, useTheme } from "@mui/material";
-import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, CloudQueue,Code, } from "@mui/icons-material";
-
-
+import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, CloudQueue, Code, } from "@mui/icons-material";
 import { apiUrl } from "../../apiConfig";
 import { useTranslation } from 'react-i18next';
 import i18n from '../../i18n';
 
-
-
 interface MainMenuProps {
   value: string;
   handleChangeContent: (newValue: string) => void;
 }
 
 export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenuProps) => {
   const theme = useTheme();
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   const handleChange = (event: React.SyntheticEvent, newValue: string) => {
     handleChangeContent(newValue);
@@ -41,7 +36,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
     textTransform: 'none',
     color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit',
   };
-  
+
 
   return (
     <Paper

src/components/molecules/NavBar.tsx → src/components/dashboard/NavBar.tsx

@@ -8,8 +8,8 @@ import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab,
 import { AccountCircle, Logout, Clear, YouTube, X, Update, Close, Language, Brightness7, Brightness4, Description } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
-import { SaveRecording } from '../molecules/SaveRecording';
-import DiscordIcon from '../atoms/DiscordIcon';
+import { SaveRecording } from '../recorder/SaveRecording';
+import DiscordIcon from '../icons/DiscordIcon';
 import { apiUrl } from '../../apiConfig';
 import MaxunLogo from "../../assets/maxunlogo.png";
 import { useThemeMode } from '../../context/theme-provider';

src/components/molecules/IntegrationSettings.tsx → src/components/integration/IntegrationSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { GenericModal } from "../atoms/GenericModal";
+import { GenericModal } from "../ui/GenericModal";
 import {
   MenuItem,
   Typography,
@@ -187,11 +187,11 @@ export const IntegrationSettingsModal = ({
   return (
     <GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
       <div style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          marginLeft: "65px",
-        }}>
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        marginLeft: "65px",
+      }}>
         <Typography variant="h6">
           {t('integration_settings.title')}
         </Typography>
@@ -235,8 +235,8 @@ export const IntegrationSettingsModal = ({
               <>
                 {recording.google_sheet_email && (
                   <Typography sx={{ margin: "20px 0px 30px 0px" }}>
-                    {t('integration_settings.descriptions.authenticated_as', { 
-                      email: recording.google_sheet_email 
+                    {t('integration_settings.descriptions.authenticated_as', {
+                      email: recording.google_sheet_email
                     })}
                   </Typography>
                 )}