Разработка кастомных Views KeystoneJS: Navigation, Dashboard, Pages

KeystoneJS Admin UI построен на React и позволяет полностью заменять или расширять интерфейс через кастомные Views. Это не просто тема — можно переопределить компоненты для конкретных List, добавить собственные страницы, изменить навигацию и дашборд. В нашей практике нередки кейсы, когда стандартная админка не закрывает бизнес-требований: нужны уникальные дашборды со сложной аналитикой, нестандартные формы массового редактирования или интеграция внешних сервисов. Именно для таких ситуаций мы разрабатываем кастомные View-компоненты. Опыт нашей команды — 10+ лет в веб-разработке, более 100 завершённых проектов на KeystoneJS. Мы гарантируем, что кастомные Views будут работать стабильно и не сломаются при обновлении Keystone.

Почему кастомные Views?

Стандартная настройка через конфиг Keystone не покрывает всех сценариев. Кастомные Views дают в 2-3 раза больше гибкости: вы можете реализовать любую бизнес-логику прямо в админке, не прибегая к костылям. Например, мы столкнулись с задачей: нужно было вывести дашборд с реальным временем отклика сервера и графиками запросов. С помощью Custom Dashboard и библиотеки Recharts мы встроили живые виджеты за пару дней.

Какие проблемы решают кастомные Views?

• Сложная навигация — когда списков много и требуется группировка по отделам, кастомные Navigation позволяют сделать иерархическое меню с разделителями и кастомными ссылками.
• Нестандартная аналитика — если нужно показывать агрегированные данные из разных моделей, Custom Dashboard с Apollo Client и GraphQL-запросами без труда выводит любые метрики.
• Массовые операции — например, опубликовать все черновики одной кнопкой. Это реализуется через extendGraphqlSchema и кастомный UI-компонент на списке.

На одном проекте мы интегрировали кастомный дашборд, который сократил время формирования отчётов с 3 часов до 15 минут — разница в 12 раз.

Как мы реализуем кастомные Views?

Стек: React 18, TypeScript, Keystone-6/core, Apollo Client. Для стилей используем Tailwind CSS — быстро и без конфликтов с UI-компонентами Keystone. Дашборды строим на Recharts или Chart.js, при необходимости встраиваем iframe Metabase. Все компоненты оборачиваем в PageContainer или NavigationContainer для единого стиля.

Пример создания кастомной навигации:

// keystone.ts
ui: {
  getAdditionalFiles: async () => [
    {
      mode: 'write',
      src: `
        export { default } from '../admin/navigation';
      `,
      outputPath: 'admin/config.js',
    },
  ],
},

// admin/navigation.tsx
import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
import type { NavigationProps } from '@keystone-6/core/admin-ui/components';

export default function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
  return (
    <NavigationContainer authenticatedItem={authenticatedItem}>
      <NavItem href="/">Dashboard</NavItem>
      <div className="mt-4 mb-1 px-3 text-xs font-semibold text-gray-400 uppercase">
        Контент
      </div>
      <ListNavItems lists={lists} include={['Post', 'Category', 'Tag']} />
      <div className="mt-4 mb-1 px-3 text-xs font-semibold text-gray-400 uppercase">
        Пользователи
      </div>
      <ListNavItems lists={lists} include={['User', 'Role']} />
      <NavItem href="/admin/analytics">Аналитика</NavItem>
    </NavigationContainer>
  );
}

Процесс работы

1. Аналитика — изучаем требования к интерфейсу, выявляем узкие места стандартной админки.
2. Проектирование — разрабатываем структуру кастомных Views, согласовываем макеты.
3. Реализация — пишем React-компоненты с использованием Keystone SDK, тестируем на тестовых данных.
4. Тестирование — проверяем совместимость с вашими списками и полями, нагрузочное тестирование дашбордов.
5. Деплой — разворачиваем на продакшен, настраиваем CI/CD.

Что входит в работу

• Исходный код всех кастомных компонентов с комментариями.
• Документация по архитектуре и точкам расширения.
• Инструкция по обновлению Keystone без потери кастомизаций.
• Гарантия на код (3 месяца) и поддержка при необходимости.
• Доступ к репозиторию с историей изменений.

Сроки разработки

Свяжитесь с нами для точной оценки вашего проекта — мы рассчитаем сроки и стоимость индивидуально.

Результаты кастомизации на реальных проектах

Переопределение Item View

Иногда требуется заменить стандартную страницу редактирования элемента. Для этого используйте кастомную страницу с маршрутом /admin/{list}/{id}. Это сложнее, но позволяет реализовать уникальные формы. Добавление кастомных экшенов (например, кнопки "Опубликовать всё") делается через extendGraphqlSchema и кастомный UI-компонент на странице списка. Все кастомные Views легко интегрируются с существующим проектом. Закажите консультацию, и мы подберём оптимальное решение.

Согласно официальной документации KeystoneJS KeystoneJS Custom Admin UI, кастомные Views позволяют полностью переопределить интерфейс админки, не теряя совместимости с будущими обновлениями.