feat(file-tree): implement multiline parsing with indentation support, create helper functions for position calculation taking in acount indentation

Author: gustedeveloper

src/common/components/mock-components/front-rich-components/file-tree/file-tree.business.ts

@@ -6,9 +6,11 @@ export const joinTextContent = (text: string): string[] => {
 };
 
 // Symbol -> + Folder - Subfolder * File
+// Level -> Level 0: no indentation in Folder / Level 1: 1 indentation (2 spaces) in Subfolder / Level 2: 2 (4 spaces) indentations in File
 export interface FileTreeItem {
   type: 'folder' | 'subfolder' | 'file';
   text: string;
+  level: number;
 }
 
 interface FileTreeDynamicSizeParams {
@@ -21,8 +23,11 @@ interface FileTreeDynamicSizeParams {
 
 export const parseFileTreeText = (text: string): FileTreeItem[] => {
   return text
-    .split(',')
+    .split('\n')
     .map(line => {
+      // First detect indentation
+      const indentMatch = line.match(/^(\s*)/);
+      const level = indentMatch ? Math.floor(indentMatch[1].length / 2) : 0;
       const trimmed = line.trim();
 
       if (trimmed === '') return null;
@@ -32,27 +37,31 @@ export const parseFileTreeText = (text: string): FileTreeItem[] => {
         return {
           type: 'folder',
           text: trimmed.substring(2).trim(),
+          level: level,
         };
       }
 
       if (trimmed.startsWith('- ')) {
         return {
           type: 'subfolder',
           text: trimmed.substring(2).trim(),
+          level: level,
         };
       }
 
       if (trimmed.startsWith('* ')) {
         return {
           type: 'file',
           text: trimmed.substring(2).trim(),
+          level: level,
         };
       }
 
       // No symbol: will be treated as a folder
       return {
         type: 'folder',
         text: trimmed,
+        level: level,
       };
     })
     .filter((item): item is FileTreeItem => item !== null);

src/common/components/mock-components/front-rich-components/file-tree/file-tree.tsx

@@ -8,12 +8,13 @@ import { useShapeProps } from '@/common/components/shapes/use-shape-props.hook';
 import { BASIC_SHAPE } from '../../front-components/shape.const';
 import {
   calculateFileTreeDynamicSize,
+  FileTreeItem,
   parseFileTreeText,
 } from './file-tree.business';
 
 const fileTreeShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 220,
-  minHeight: 280,
+  minHeight: 180,
   maxWidth: -1,
   maxHeight: -1,
   defaultWidth: 280,
@@ -57,8 +58,8 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
     const elementHeight = 60;
     const paddingX = 40;
     const paddingY = 30;
-    const fileX = 50 + paddingX;
     const iconTextSpacing = 10;
+    const indentationStep = 10;
 
     const restrictedSize = calculateFileTreeDynamicSize(treeItems, {
       width,
@@ -70,12 +71,6 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
 
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-    const folderTextX = iconWidth + iconTextSpacing + paddingX;
-    const fileTextX = fileX + iconWidth + iconTextSpacing;
-
-    const folderAvailableWidth = restrictedWidth - folderTextX - paddingX;
-    const fileAvailableWidth = restrictedWidth - fileTextX - paddingX;
-
     const { stroke, strokeStyle, fill, textColor, borderRadius } =
       useShapeProps(otherProps, BASIC_SHAPE);
 
@@ -86,6 +81,23 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
       ref
     );
 
+    // Helper functions for position calculations
+    const calculateIconX = (item: FileTreeItem) => {
+      return (
+        paddingX +
+        item.level * indentationStep +
+        (item.type === 'file' ? 40 : 0)
+      );
+    };
+
+    const calculateTextX = (item: FileTreeItem) => {
+      return calculateIconX(item) + iconWidth + iconTextSpacing;
+    };
+
+    const calculateAvailableWidth = (item: FileTreeItem) => {
+      return restrictedWidth - calculateTextX(item) - paddingX;
+    };
+
     useEffect(() => {
       Promise.all([
         loadSvgWithFill('/icons/folder.svg', stroke),
@@ -120,19 +132,17 @@ export const FileTreeShape = forwardRef<any, FileTreeShapeProps>(
             {icons[item.type] && (
               <Image
                 image={icons[item.type]!}
-                x={item.type === 'file' ? fileX : paddingX}
+                x={calculateIconX(item)}
                 y={paddingY + elementHeight * index}
                 width={iconWidth}
                 height={iconWidth}
               />
             )}
             <Text
-              x={item.type === 'file' ? fileTextX : folderTextX}
+              x={calculateTextX(item)}
               y={paddingY + elementHeight * index + 20}
               text={item.text}
-              width={
-                item.type === 'file' ? fileAvailableWidth : folderAvailableWidth
-              }
+              width={calculateAvailableWidth(item)}
               height={elementHeight}
               fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
               fontSize={15}