♻️ Refactor files to follow eslint guidelines

src/App.js

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import './App.scss';
+import { Instructions } from './components/Instructions/Instructions';
+import { TreeInput } from './components/TreeInput/TreeInput';
+import { TreeOutput } from './components/TreeOutput/TreeOutput';
 import { TreeProvider } from './TreeContext';
-import TreeInput from './components/TreeInput/TreeInput';
-import TreeOutput from './components/TreeOutput/TreeOutput';
-import Instructions from './components/Instructions/Instructions';
 
 function App() {
   return (
@@ -18,4 +19,4 @@ function App() {
   );
 }
 
-export default App;
+export { App };

src/App.test.js

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import App from './App';
 
 test('renders learn react link', () => {

src/TreeContext.js

@@ -5,9 +5,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { SAMPLE_TREE_DATA } from './utils/sampleTreeData';
+
+
 import { v4 as uuidv4 } from 'uuid';
-import HistoryManager from './components/HistoryManager/HistoryManager';
+
+import { HistoryManager } from './components/HistoryManager/HistoryManager';
+import { SAMPLE_TREE_DATA } from './utils/sampleTreeData';
 
 const TreeContext = createContext();
 
@@ -174,7 +177,7 @@ export const TreeProvider = ({ children }) => {
       if (line.trim() === '') return; // Skip empty lines
 
       // Determine the depth based on indentation ('    ' or '│   ')
-      const depth = (line.match(/(    |│   )/g) || []).length;
+      const depth = (line.match(/( {4}|│ {3})/g) || []).length;
 
       // Correctly extract the node name
       const nameMatch = line.match(/(├── |└── )(.*)/);
@@ -199,7 +202,7 @@ export const TreeProvider = ({ children }) => {
       // Determine if this node will be a parent
       if (index + 1 < lines.length) {
         const nextLine = lines[index + 1];
-        const nextDepth = (nextLine.match(/(    |│   )/g) || []).length;
+        const nextDepth = (nextLine.match(/( {4}|│ {3})/g) || []).length;
         if (nextDepth > depth) {
           parentStack.push({ id: newNode.id, depth: depth });
         }

src/components/CopyButton/CopyButton.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Button } from '@mui/material';
+import React from 'react';
 
 const CopyButton = ({ textToCopy, onCopy }) => {
   const handleCopy = async () => {
@@ -23,4 +23,4 @@ const CopyButton = ({ textToCopy, onCopy }) => {
   );
 };
 
-export default CopyButton;
+export { CopyButton };

src/components/HistoryManager/HistoryManager.js

@@ -1,4 +1,4 @@
-export default class HistoryManager {
+class HistoryManager {
   constructor() {
     this.undoStack = [];
     this.redoStack = [];
@@ -35,3 +35,5 @@ export default class HistoryManager {
     return this.redoStack.length > 0;
   }
 }
+
+export { HistoryManager };

src/components/Instructions/Instructions.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import AccordionDetails from '@mui/material/AccordionDetails';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import React from 'react';
 import './Instructions.scss';
 
 export const InstructionsAccordion = () => (
@@ -80,4 +80,4 @@ const Instructions = () => (
   </>
 );
 
-export default Instructions;
+export { Instructions };

src/components/TreeInput/TreeInput.js

@@ -1,13 +1,12 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useTree } from '../../TreeContext';
-import FolderIcon from '@mui/icons-material/Folder';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
 import { Button } from '@mui/material';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
+import React, { useState, useEffect, useRef } from 'react';
+
+import { useTree } from '../../TreeContext';
 import './TreeInput.scss';
 
 const TreeInput = () => {
@@ -372,4 +371,4 @@ const TreeInput = () => {
   );
 };
 
-export default TreeInput;
+export { TreeInput };

src/components/TreeOutput/TreeOutput.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
+
 import { useTree } from '../../TreeContext';
-import CopyButton from '../CopyButton/CopyButton';
+import { CopyButton } from '../CopyButton/CopyButton';
 import './TreeOutput.scss';
 
 const TreeOutput = () => {
@@ -45,4 +46,4 @@ const TreeOutput = () => {
   );
 };
 
-export default TreeOutput;
+export { TreeOutput };

src/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+
 import './index.css';
-import App from './App';
+import { App } from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(