📝 Чек-лист

1. Ознакомьтесь с материалом лекций недели
2. Ознакомьтесь с материалами воркшопа
3. Ознакомьтесь с заданием
4. Создайте ветку feature/… и выполните задание в ней
5. Подготовьте PR из ветки feature/… в ветку main
6. Найдите в таблице прогресса своего тьютора
7. Отправьте личным сообщением своему тьютору ссылку на созданный PR

---

Задание: Дерево файлов

Дано

Дан JSON с файловой структурой в следующем формате:

type File = {
    type: 'file',
    name: string,
};

type Link = {
    type: 'link',
    name: string,
    target: string,
};

type Directory = {
    type: 'directory',
    name: string,
    contents: Item[],
};

type Item = Directory | File | Link;

JSON хранится в public/static/node_modules.json.

Задание

Сделать компонент для рендеринга дерева файлов. Использовать его для отрисовки предложенных данных.

Детали и требования:

• Дерево должно быть с индентацией (отступами слева, в зависимости от глубины). Опционально можно ограничить кол-во отступов сверху.
• Все 3 типа элементов (папки, файлы, ссылки) должны визуально отличаться друг от друга.
• Должна быть возможность сворачивания/разворачивания папки по клику на папку.
• Выделение файла/ссылки - по клику на элемент файла.
• Дизайн - произвольный.
• Изначально дерево отображается в свернутом виде.
• Опционально можно добавить клавиатурную навигацию.
• Опционально можно выводить на странице полный путь к выделенному файлу/папке.

Требования помеченные опциональными незначительно влияют на оценку. Пожалуйста, приступайте к ним только после завершения основного задания.

Замечания к решению

• Отрисовка папки
• Отрисовка файла/ссылки
• Отрисовка поддерева

Выглядят отдельными задачами, и скорее всего, будут имплементированы в виде отдельных компонентов.

Решение получится рекурсивным: компонент папки должен будет (прямо или косвенно) рендерить сам себя.

Кроме того:

• Рендеринг поддерева не обязан быть отдельным компонентом и может быть включен в компонент папки.
• Файл и ссылка могут быть похожи в плане рендеринга. Поэтому допустимо (но не обязательно) использовать для них один компонент.

Эти решения вы принимаете сами.