Overview

Build an interactive React File Explorer UI for managing a virtual file system, featuring dynamic add, rename, and delete operations within a hierarchical tree view. This problem challenges your understanding of recursive components, complex state management, and accessible UI patterns, simulating a common interaction paradigm found in many desktop and web applications.

What you need to do / Task

Your primary task is to develop a robust and intuitive File Explorer component in React that can:

1. Display Hierarchical Structure: Render a nested list of files and folders based on a provided initial data structure.
2. Toggle Folder Expansion: Allow users to expand and collapse folders to reveal or hide their contents.
3. Add New Items: Enable adding new files or folders within an existing folder. This interaction should involve an in-place input field for naming the new item.
4. Rename Items: Allow users to rename existing files or folders. This should also utilize an in-place input field.
5. Delete Items: Implement the functionality to delete files or folders. Deleting a folder should recursively delete all its contents. A confirmation step is required.
6. Input Validation: Enforce basic validation rules for new and renamed items:
   • Names cannot be empty.
   • Names must be unique within the same parent folder (case-insensitive).

UI/UX expectations

• Visual Hierarchy: Clearly distinguish between files and folders (e.g., using icons or different styling). Indent children of folders to visually represent the hierarchy.
• Interaction Cues: Provide clear visual feedback for interactive elements (e.g., hover states for clickable items, visual indicators for expanded/collapsed folders).
• Contextual Actions: Action buttons (Add, Rename, Delete) should appear appropriately (e.g., 'Add' next to folders, 'Rename'/'Delete' next to both files and folders).
• In-place Editing: When adding or renaming, an input field should appear directly within the tree structure at the relevant position, allowing the user to type the new name.
• Confirmation: Deletion should trigger a simple confirmation dialog (e.g., browser's confirm() or a basic modal).
• Accessibility: Implement keyboard navigation for traversing the tree and activating actions. Ensure appropriate ARIA roles and attributes are used for screen reader compatibility (e.g., role="tree", aria-expanded, aria-level).

Acceptance criteria

• The initial file structure is rendered correctly with proper indentation.
• Clicking on a folder's toggle icon expands and collapses its children.
• Clicking 'Add File' or 'Add Folder' next to a folder reveals an input field and 'Save'/'Cancel' buttons within that folder.
• New files/folders are added to the correct parent folder upon 'Save' and appear in the tree.
• Clicking 'Rename' on an item replaces its name with an input field and 'Save'/'Cancel' buttons.
• Renamed items update their names in the tree upon 'Save'.
• Clicking 'Delete' prompts a confirmation, and upon confirmation, the item (and its children for folders) is removed from the tree.
• Attempting to add or rename an item with an empty name displays an error message or prevents saving.
• Attempting to add or rename an item with a name that already exists within the same parent folder displays an error or prevents saving.
• Users can navigate the tree using arrow keys (up/down to move between siblings, left/right to collapse/expand folders).
• Users can activate actions (e.g., 'Add', 'Rename', 'Delete') using the Enter key when the respective button is focused.
• The component includes relevant ARIA attributes to describe its structure and interactive elements.

Clarifications

• Styling: Basic styling is expected to make the UI functional and readable; pixel-perfect design is not the primary focus.
• Backend: No backend integration is required. All file system state should be managed purely in React's component state.
• Sorting: You do not need to implement dynamic sorting of files or folders; they can maintain their insertion order.
• Drag and Drop: Drag and drop functionality for moving files/folders is out of scope.