Tree Navigation

The Tree / Folder Navigation with Checkboxes is a React component that displays a hierarchical folder structure with checkboxes for each folder and file. Users can expand/collapse folders and toggle checkboxes to select/deselect items. Selecting a folder automatically selects/deselects all its children, and child selections affect parent checkbox states (e.g., a parent is checked if all children are checked).

Things To Do

1. Hierarchical Display:

   • Render a tree of folders and files, with folders expandable/collapsible.

2. Title Rendering:

   • Display a title "Folder Navigation".

3. Data as Prop:

   • Tree data is passed as a prop from App.js and must not be modified, as tests rely on the structure.

4. Checkboxes:

   • Each folder and file has a checkbox for selection.

5. Parent-Child Sync:

   • Checking a folder selects/deselects all its children and child selections update parent state.

6. Interactivity:

   • Support toggling folder expansion and checkbox states.

7. Testability:

• Include data-testid attributes for:
  • tree-container: The root container.
  • node-${id}: Each folder/file node.
  • checkbox-${id}: Each checkbox.
  • toggle-${id}: Folder toggle buttons.

Reference UI