Розробка кастомних Views KeystoneJS

Розробка кастомних Views KeystoneJS

KeystoneJS Admin UI побудований на React і дозволяє повністю замінювати або розширювати інтерфейс через кастомні Views. Це не просто тема — можна переопредліти компоненти для конкретних Lists, додати власні сторінки, змінити навігацію та дашборд.

Типи View-розширень

1. Custom Pages — повністю кастомні сторінки в Admin UI на произвільних шляхах.

2. Custom Navigation — заміна стандартного меню.

3. List Views — переопередління компонентів для конкретного List.

4. Field Views — компоненти для полів (розглядаються в розділі Custom Fields).

Custom Navigation

// 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="/">Дашборд</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>
  );
}

Custom Dashboard

// admin/pages/index.tsx — переопередління стандартного дашборду
import { PageContainer } from '@keystone-6/core/admin-ui/components';
import { useQuery, gql } from '@keystone-6/core/admin-ui/apollo';

const STATS_QUERY = gql`
  query AdminStats {
    postsCount(where: { status: { equals: "published" } })
    draftsCount: postsCount(where: { status: { equals: "draft" } })
    usersCount
  }
`;

export default function CustomDashboard() {
  const { data, loading } = useQuery(STATS_QUERY);

  return (
    <PageContainer header="Панель управління">
      <div className="grid grid-cols-3 gap-4 mb-8">
        <StatCard label="Опублікованих постів" value={data?.postsCount} loading={loading} />
        <StatCard label="Чернеток" value={data?.draftsCount} loading={loading} />
        <StatCard label="Користувачів" value={data?.usersCount} loading={loading} />
      </div>

      <RecentPostsTable />
    </PageContainer>
  );
}

Custom Pages з произвільними маршрутами

// admin/pages/analytics.tsx
import { PageContainer } from '@keystone-6/core/admin-ui/components';

export default function AnalyticsPage() {
  return (
    <PageContainer header="Аналітика">
      {/* Встраиваємо Recharts, Chart.js або iframe Metabase */}
      <SalesChart />
      <TopContentTable />
    </PageContainer>
  );
}

Маршрут буде доступен по /admin/analytics автоматично — Next.js файлова маршрутизація працює в Admin UI.

Терміни розробки