@nixxie-cms/core 1.0.0

package/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/index.tsx

@@ -0,0 +1,24 @@
+import { Icon } from '@keystar/ui/icon'
+import { shieldAlertIcon } from '@keystar/ui/icon/icons/shieldAlertIcon'
+import { Heading, Text } from '@keystar/ui/typography'
+
+import { ErrorContainer } from '../../../../admin-ui/components/Errors'
+
+type NoAccessPage = { sessionsEnabled: boolean }
+
+export const getNoAccessPage = (props: NoAccessPage) => () => <NoAccessPage {...props} />
+
+export function NoAccessPage(_: NoAccessPage) {
+  return (
+    <ErrorContainer>
+      <Icon color="neutral" src={shieldAlertIcon} size="large" />
+      <Heading elementType="h1" margin={0}>
+        No access
+      </Heading>
+      <Text>
+        Unable to access to this page. You may need to request access from your system
+        administrator, or sign in with a different account.
+      </Text>
+    </ErrorContainer>
+  )
+}

package/src/___internal-do-not-use-will-break-in-patch/artifacts.ts

@@ -0,0 +1,5 @@
+export { buildArtifacts, generateArtifacts } from '../artifacts'
+export { createExpressServer } from '../lib/express'
+export { withMigrate } from '../lib/migrations'
+export { createSystem } from '../lib/system'
+export { ExitError } from '../scripts/utils'

package/src/access.ts

@@ -0,0 +1,25 @@
+import type { MaybePromise } from './types/utils'
+import type { BaseListTypeInfo } from './types'
+
+export function allowAll() {
+  return true
+}
+
+export function denyAll() {
+  return false
+}
+
+export function unfiltered<ListTypeInfo extends BaseListTypeInfo>(): MaybePromise<
+  boolean | ListTypeInfo['inputs']['where']
+> {
+  return true
+}
+
+export function allOperations<F>(f: F) {
+  return {
+    query: f,
+    create: f,
+    update: f,
+    delete: f,
+  }
+}

package/src/admin-ui/admin-meta-graphql.ts

@@ -0,0 +1,168 @@
+import type { GraphQLNames, JSONValue } from '../types/utils'
+import type { ListMeta, FieldMeta, FieldGroupMeta } from '../types'
+import { gql } from './apollo'
+
+export const adminMetaQuery = gql`
+  query KsFetchAdminMeta {
+    nixxie {
+      adminMeta {
+        lists {
+          key
+
+          label
+          singular
+          plural
+          path
+
+          labelField
+          fields {
+            key
+
+            label
+            description
+
+            fieldMeta
+            isOrderable
+            isFilterable
+            viewsIndex
+            customViewsIndex
+
+            search
+            isNonNull
+            createView {
+              fieldMode
+              isRequired
+            }
+            itemView {
+              fieldMode
+              fieldPosition
+              isRequired
+            }
+            listView {
+              fieldMode
+            }
+          }
+
+          groups {
+            label
+            description
+            fields {
+              key
+            }
+          }
+
+          actions {
+            key
+
+            label
+            icon
+            messages {
+              promptTitle
+              promptTitleMany
+              prompt
+              promptMany
+              promptConfirmLabel
+              promptConfirmLabelMany
+              fail
+              failMany
+              success
+              successMany
+            }
+            graphql {
+              arguments {
+                name
+                type
+                source
+              }
+              names {
+                one
+                many
+              }
+            }
+            itemView {
+              actionMode
+              navigation
+              hidePrompt
+              hideToast
+            }
+            listView {
+              actionMode
+            }
+          }
+
+          graphql {
+            names {
+              outputTypeName
+              whereInputName
+              whereUniqueInputName
+
+              createInputName
+              createMutationName
+              createManyMutationName
+              relateToOneForCreateInputName
+              relateToManyForCreateInputName
+
+              itemQueryName
+              listQueryName
+              listQueryCountName
+              listOrderName
+
+              updateInputName
+              updateMutationName
+              updateManyInputName
+              updateManyMutationName
+              relateToOneForUpdateInputName
+              relateToManyForUpdateInputName
+
+              deleteMutationName
+              deleteManyMutationName
+            }
+          }
+
+          pageSize
+          initialColumns
+          initialSearchFields
+          initialSort {
+            field
+            direction
+          }
+          initialFilter
+          isSingleton
+
+          hideNavigation
+          hideCreate
+          hideDelete
+        }
+      }
+    }
+  }
+`
+
+// TODO: duplicate, reference core/src/lib/admin-meta.ts
+export type AdminMetaQuery = {
+  nixxie: {
+    adminMeta: {
+      lists: (ListMeta & {
+        fields: ListMeta['fields'][string][]
+        actions: ListMeta['actions']
+        groups: (FieldGroupMeta & {
+          fields: FieldMeta[]
+        })[]
+        graphql: {
+          names: GraphQLNames
+        }
+
+        pageSize: number
+        initialColumns: string[]
+        initialSearchFields: string[]
+        initialSort: ListMeta['initialSort'] | null
+        initialFilter: JSONValue
+        isSingleton: boolean
+
+        hideNavigation: boolean
+        hideCreate: boolean
+        hideDelete: boolean
+      })[]
+    }
+  }
+}

package/src/admin-ui/apollo.tsx

@@ -0,0 +1,35 @@
+/**
+ * This file is exposed by the /apollo entrypoint, and helps ensure that other
+ * packages import the same instance of apollo.
+ */
+
+export * from '@apollo/client'
+export {
+  ApolloProvider,
+  createQueryPreloader,
+  getApolloContext,
+  reactCompilerVersion,
+  skipToken,
+  useApolloClient,
+  useBackgroundQuery,
+  useFragment,
+  useLazyQuery,
+  useMutation,
+  useQuery,
+  useReactiveVar,
+  useSubscription,
+  useLoadableQuery,
+  useQueryRefHandlers,
+  useReadQuery,
+  useSuspenseFragment,
+  useSuspenseQuery,
+} from '@apollo/client/react'
+export type {
+  ApolloContextValue,
+  PreloadQueryFetchPolicy,
+  PreloadQueryFunction,
+  PreloadQueryOptions,
+  PreloadedQueryRef,
+  QueryRef,
+  SkipToken,
+} from '@apollo/client/react'

package/src/admin-ui/components/CellContainer.tsx

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react'
+import { Cell } from '@keystar/ui/table'
+
+export function CellContainer({ children, ...props }: { children: ReactNode }) {
+  return <Cell {...props}>{children}</Cell>
+}

package/src/admin-ui/components/CommandPalette.tsx

@@ -0,0 +1,431 @@
+import { useRouter } from 'next/router'
+import {
+  type KeyboardEvent,
+  type ChangeEvent,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+} from 'react'
+
+import { css } from '@keystar/ui/style'
+
+import { useNixxie } from '../context'
+import { getHrefFromList } from './Navigation'
+
+type Command = {
+  id: string
+  label: string
+  description?: string
+  href?: string
+  action?: () => void
+  icon: string
+  category: string
+}
+
+function useCommands(): Command[] {
+  const { lists } = useNixxie()
+
+  return useMemo(() => {
+    const cmds: Command[] = [
+      {
+        id: 'nav-dashboard',
+        label: 'Go to Dashboard',
+        category: 'Navigate',
+        icon: '◼',
+        href: '/',
+      },
+    ]
+
+    for (const list of Object.values(lists)) {
+      if (list.hideNavigation) continue
+
+      cmds.push({
+        id: `nav-${list.key}`,
+        label: list.label,
+        description: `Open ${list.label} list`,
+        category: 'Navigate',
+        icon: '≡',
+        href: getHrefFromList(list),
+      })
+
+      if (!list.hideCreate && !list.isSingleton) {
+        cmds.push({
+          id: `create-${list.key}`,
+          label: `New ${list.singular}`,
+          description: `Create a new ${list.singular.toLowerCase()}`,
+          category: 'Create',
+          icon: '+',
+          href: `/${list.path}/create`,
+        })
+      }
+    }
+
+    return cmds
+  }, [lists])
+}
+
+type CommandPaletteProps = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
+  const router = useRouter()
+  const [query, setQuery] = useState('')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLUListElement>(null)
+  const commands = useCommands()
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return commands
+    const q = query.toLowerCase()
+    return commands.filter(
+      c =>
+        c.label.toLowerCase().includes(q) ||
+        c.description?.toLowerCase().includes(q) ||
+        c.category.toLowerCase().includes(q)
+    )
+  }, [commands, query])
+
+  // Group by category
+  const grouped = useMemo(() => {
+    const map = new Map<string, Command[]>()
+    for (const cmd of filtered) {
+      if (!map.has(cmd.category)) map.set(cmd.category, [])
+      map.get(cmd.category)!.push(cmd)
+    }
+    return map
+  }, [filtered])
+
+  // Flat list for keyboard navigation
+  const flatList = useMemo(() => filtered, [filtered])
+
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('')
+      setActiveIndex(0)
+      setTimeout(() => inputRef.current?.focus(), 10)
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    setActiveIndex(0)
+  }, [query])
+
+  // Scroll active item into view
+  useEffect(() => {
+    const el = listRef.current?.querySelector(`[data-active="true"]`) as HTMLElement | null
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [activeIndex])
+
+  function runCommand(cmd: Command) {
+    onClose()
+    if (cmd.href) {
+      router.push(cmd.href)
+    } else if (cmd.action) {
+      cmd.action()
+    }
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIndex(i => Math.min(i + 1, flatList.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex(i => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const cmd = flatList[activeIndex]
+      if (cmd) runCommand(cmd)
+    } else if (e.key === 'Escape') {
+      onClose()
+    }
+  }
+
+  // Pre-compute flat index for each command ID
+  const cmdFlatIndex = useMemo(() => {
+    const map = new Map<string, number>()
+    filtered.forEach((cmd, i) => map.set(cmd.id, i))
+    return map
+  }, [filtered])
+
+  if (!isOpen) return null
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        className={css({
+          position: 'fixed',
+          inset: 0,
+          backgroundColor: 'rgba(0,0,0,0.45)',
+          zIndex: 200,
+          backdropFilter: 'blur(3px)',
+        })}
+      />
+
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        className={css({
+          position: 'fixed',
+          top: '14vh',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: '90vw',
+          maxWidth: 560,
+          maxHeight: '62vh',
+          display: 'flex',
+          flexDirection: 'column',
+          backgroundColor: '#ffffff',
+          borderRadius: 10,
+          boxShadow: '0 24px 64px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07)',
+          zIndex: 201,
+          overflow: 'hidden',
+        })}
+      >
+        {/* Search input */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+            padding: '12px 16px',
+            borderBottom: '1px solid #f0f0f0',
+          })}
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            style={{ flexShrink: 0, color: '#a3a3a3' }}
+          >
+            <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.4" />
+            <line
+              x1="9.9"
+              y1="9.9"
+              x2="13.2"
+              y2="13.2"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+            />
+          </svg>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder="Search commands, lists, actions…"
+            className={css({
+              flex: 1,
+              border: 'none',
+              outline: 'none',
+              fontSize: 14.5,
+              color: '#0a0a0a',
+              background: 'transparent',
+              fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+              '&::placeholder': { color: '#b8b8b8' },
+            })}
+          />
+          <kbd
+            className={css({
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 2,
+              padding: '2px 7px',
+              backgroundColor: '#f5f5f5',
+              border: '1px solid #e8e8e8',
+              borderRadius: 5,
+              fontSize: 11,
+              color: '#a3a3a3',
+              fontFamily: 'inherit',
+              flexShrink: 0,
+            })}
+          >
+            Esc
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <ul
+          ref={listRef}
+          role="listbox"
+          className={css({
+            flex: 1,
+            overflowY: 'auto',
+            padding: '6px 0',
+            margin: 0,
+            listStyle: 'none',
+            '&::-webkit-scrollbar': { width: 4 },
+            '&::-webkit-scrollbar-thumb': { background: '#e8e8e8', borderRadius: 4 },
+          })}
+        >
+          {grouped.size === 0 ? (
+            <li
+              className={css({
+                padding: '28px 16px',
+                textAlign: 'center',
+                color: '#a3a3a3',
+                fontSize: 13.5,
+              })}
+            >
+              No results for &ldquo;{query}&rdquo;
+            </li>
+          ) : (
+            Array.from(grouped.entries()).map(([category, items]) => (
+              <li key={category} role="none">
+                <p
+                  className={css({
+                    margin: 0,
+                    padding: '8px 16px 3px',
+                    fontSize: 10,
+                    fontWeight: 600,
+                    letterSpacing: '0.10em',
+                    textTransform: 'uppercase',
+                    color: '#b8b8b8',
+                  })}
+                >
+                  {category}
+                </p>
+                <ul role="group" className={css({ listStyle: 'none', margin: 0, padding: 0 })}>
+                  {items.map(cmd => {
+                    const idx = cmdFlatIndex.get(cmd.id) ?? 0
+                    const isActive = idx === activeIndex
+                    return (
+                      <li
+                        key={cmd.id}
+                        role="option"
+                        aria-selected={isActive}
+                        data-active={isActive}
+                        onClick={() => runCommand(cmd)}
+                        onMouseEnter={() => setActiveIndex(idx)}
+                        className={css({
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 10,
+                          padding: '7px 16px',
+                          cursor: 'pointer',
+                          backgroundColor: isActive ? '#0a0a0a' : 'transparent',
+                          transition: 'background 100ms',
+                          '&:hover': {
+                            backgroundColor: isActive ? '#0a0a0a' : '#f5f5f5',
+                          },
+                        })}
+                      >
+                        {/* Icon badge */}
+                        <span
+                          className={css({
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: 28,
+                            height: 28,
+                            borderRadius: 6,
+                            backgroundColor: isActive ? '#2a2a2a' : '#f0f0f0',
+                            fontSize: 12,
+                            fontWeight: 500,
+                            color: isActive ? '#ffffff' : '#636363',
+                            flexShrink: 0,
+                            transition: 'background 100ms, color 100ms',
+                            fontFamily: 'monospace',
+                          })}
+                        >
+                          {cmd.icon}
+                        </span>
+
+                        {/* Text */}
+                        <span className={css({ flex: 1, minWidth: 0 })}>
+                          <span
+                            className={css({
+                              display: 'block',
+                              fontSize: 13.5,
+                              fontWeight: 500,
+                              color: isActive ? '#ffffff' : '#0a0a0a',
+                              whiteSpace: 'nowrap',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              transition: 'color 100ms',
+                            })}
+                          >
+                            {cmd.label}
+                          </span>
+                          {cmd.description && (
+                            <span
+                              className={css({
+                                display: 'block',
+                                fontSize: 12,
+                                color: isActive ? 'rgba(255,255,255,0.5)' : '#a3a3a3',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                transition: 'color 100ms',
+                              })}
+                            >
+                              {cmd.description}
+                            </span>
+                          )}
+                        </span>
+
+                        {/* Enter hint */}
+                        {isActive && (
+                          <kbd
+                            className={css({
+                              fontSize: 11,
+                              color: 'rgba(255,255,255,0.6)',
+                              background: '#2a2a2a',
+                              border: '1px solid #3a3a3a',
+                              borderRadius: 4,
+                              padding: '2px 6px',
+                              fontFamily: 'inherit',
+                              flexShrink: 0,
+                            })}
+                          >
+                            ↵
+                          </kbd>
+                        )}
+                      </li>
+                    )
+                  })}
+                </ul>
+              </li>
+            ))
+          )}
+        </ul>
+
+        {/* Footer shortcuts */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 14,
+            padding: '8px 16px',
+            borderTop: '1px solid #f0f0f0',
+            fontSize: 11,
+            color: '#b8b8b8',
+          })}
+        >
+          <span>
+            <kbd className={css({ fontFamily: 'inherit' })}>↑↓</kbd> navigate
+          </span>
+          <span>
+            <kbd className={css({ fontFamily: 'inherit' })}>↵</kbd> open
+          </span>
+          <span>
+            <kbd className={css({ fontFamily: 'inherit' })}>Esc</kbd> close
+          </span>
+          <span style={{ marginInlineStart: 'auto' }}>
+            <kbd className={css({ fontFamily: 'inherit' })}>⌘K</kbd> toggle
+          </span>
+        </div>
+      </div>
+    </>
+  )
+}