@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,14 @@
+import { type PropsWithChildren } from 'react'
+import { type BoxProps, Box } from '@keystar/ui/layout'
+
+export const CONTAINER_MAX = 'container.large'
+
+export function Container(props: PropsWithChildren<BoxProps>) {
+  return (
+    <Box
+      minWidth={0} // fix flex overflow issues
+      maxWidth={CONTAINER_MAX}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,46 @@
+import { css } from '@keystar/ui/style'
+
+import type { ListMeta } from '../../types'
+
+export function CreateButtonLink(props: { children?: string; list: ListMeta }) {
+  const { list, children = `New ${list.singular}` } = props
+  return (
+    <a
+      href={`/${list.path}/create`}
+      aria-label={`New ${list.singular}`}
+      className={css({
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        paddingInline: '13px',
+        paddingBlock: '7px',
+        borderRadius: 6,
+        border: '1px solid transparent',
+        backgroundColor: '#111827',
+        color: '#ffffff',
+        fontSize: 13,
+        fontWeight: 500,
+        fontFamily: 'inherit',
+        textDecoration: 'none',
+        cursor: 'pointer',
+        whiteSpace: 'nowrap',
+        flexShrink: 0,
+        letterSpacing: '-0.01em',
+        transition: 'background 130ms',
+
+        '&:hover': { backgroundColor: '#1f2937' },
+        '&:active': { backgroundColor: '#374151' },
+
+        '&:focus-visible': {
+          outline: '2px solid #111827',
+          outlineOffset: 2,
+        },
+      })}
+    >
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden>
+        <path d="M6 1.5v9M1.5 6h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+      {children}
+    </a>
+  )
+}

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

@@ -0,0 +1,56 @@
+import { useId } from 'react'
+import { ButtonGroup, Button } from '@keystar/ui/button'
+import { Dialog, useDialogContainer } from '@keystar/ui/dialog'
+import { Box } from '@keystar/ui/layout'
+import { Content } from '@keystar/ui/slots'
+import { Heading } from '@keystar/ui/typography'
+
+import { useList } from '../context'
+
+import { Fields } from '../utils/Fields'
+import { useBuildItem } from '../utils/useCreateItem'
+
+export function BuildItemDialog({
+  listKey,
+  onChange,
+}: {
+  listKey: string
+  onChange: (subItem: Record<string, unknown>) => void
+}) {
+  const list = useList(listKey)
+  const builder = useBuildItem(list)
+  const dialogState = useDialogContainer()
+  const formId = useId()
+
+  return (
+    <Dialog>
+      <Heading>Add {list.singular}</Heading>
+
+      <Content>
+        <form
+          id={formId}
+          onSubmit={async e => {
+            if (e.target !== e.currentTarget) return
+            e.preventDefault()
+            const subItem = await builder.build()
+            if (!subItem) return
+
+            onChange(subItem)
+            dialogState.dismiss()
+          }}
+        >
+          <Box paddingY="xlarge">
+            <Fields {...builder.props} />
+          </Box>
+        </form>
+      </Content>
+
+      <ButtonGroup>
+        <Button onPress={dialogState.dismiss}>Cancel</Button>
+        <Button form={formId} prominence="high" type="submit">
+          Add
+        </Button>
+      </ButtonGroup>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,52 @@
+import { type ReactElement, type ReactNode } from 'react'
+
+import { Icon } from '@keystar/ui/icon'
+import { Flex } from '@keystar/ui/layout'
+import { SlotProvider } from '@keystar/ui/slots'
+import { Heading, Text } from '@keystar/ui/typography'
+import { isReactText } from '@keystar/ui/utils'
+
+type EmptyStateProps =
+  | { children: ReactNode }
+  | {
+      title?: ReactNode
+      icon?: ReactElement
+      message?: ReactNode
+      actions?: ReactNode
+    }
+
+const emptyStateSlots = {
+  heading: { align: 'center', margin: 0 },
+  text: { align: 'center' },
+} as const
+export function EmptyState(props: EmptyStateProps) {
+  return (
+    <Flex
+      alignItems="center"
+      direction="column"
+      gap="large"
+      justifyContent="center"
+      minHeight="scale.3000"
+      paddingX={{ mobile: 'medium', tablet: 'xlarge', desktop: 'xxlarge' }}
+      paddingY="xlarge"
+    >
+      <SlotProvider slots={emptyStateSlots}>
+        {'children' in props ? (
+          props.children
+        ) : (
+          <>
+            {props.icon && <Icon src={props.icon} size="large" color="neutral" />}
+            {props.title && <Heading size="medium">{props.title}</Heading>}
+            {props.message && isReactText(props.message) ? (
+              <Text>{props.message}</Text>
+            ) : (
+              props.message
+            )}
+
+            {props.actions}
+          </>
+        )}
+      </SlotProvider>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,130 @@
+import { Component, type ReactNode } from 'react'
+
+import { Button } from '@keystar/ui/button'
+import { Dialog } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { alertTriangleIcon } from '@keystar/ui/icon/icons/alertTriangleIcon'
+import { Box, Grid, VStack } from '@keystar/ui/layout'
+import { Notice } from '@keystar/ui/notice'
+import { Content, SlotProvider } from '@keystar/ui/slots'
+import { css, tokenSchema } from '@keystar/ui/style'
+import { Heading, Text } from '@keystar/ui/typography'
+
+type ErrorBoundaryProps = {
+  children: ReactNode
+}
+type ErrorBoundaryState = {
+  error?: any
+  hasError: boolean
+  isReloading: boolean
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, isReloading: false }
+  static getDerivedStateFromError(error: any) {
+    return { error, hasError: true }
+  }
+  reloadPage = () => {
+    this.setState({ isReloading: true })
+    window.location.reload()
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <ErrorContainer>
+          <Icon color="neutral" src={alertTriangleIcon} size="large" />
+          <Heading elementType="h1" margin={0}>
+            Unknown error
+          </Heading>
+          <Text>
+            Something went wrong, please try reloading the page. If the problem persists contact
+            your system administrator.
+          </Text>
+          <Button
+            // isPending={this.state.isReloading}
+            prominence="high"
+            onPress={this.reloadPage}
+          >
+            Reload page
+          </Button>
+        </ErrorContainer>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+type ErrorContainerProps = {
+  children: ReactNode
+}
+
+const errorContainerSlots = {
+  heading: { align: 'center', margin: 0 },
+  text: { align: 'center' },
+} as const
+
+export function ErrorContainer({ children }: ErrorContainerProps) {
+  return (
+    <Grid minHeight="100vh" minWidth="100vw" alignItems="center" justifyContent="center">
+      <VStack
+        alignItems="center"
+        backgroundColor="canvas"
+        border="neutral"
+        borderRadius="large"
+        gap="xlarge"
+        margin="xlarge"
+        minWidth="container.xsmall"
+        maxWidth="container.small"
+        padding="xxlarge"
+      >
+        <SlotProvider slots={errorContainerSlots}>{children}</SlotProvider>
+      </VStack>
+    </Grid>
+  )
+}
+
+export function ErrorDetailsDialog({ title, error }: { title: string; error: Error }) {
+  const { message, stack } = error
+  return (
+    <Dialog>
+      <Heading>Error details</Heading>
+      <Content>
+        <Notice tone="critical">
+          <Content>
+            <Text weight="medium">{message}</Text>
+            <Box
+              elementType="pre"
+              backgroundColor="critical"
+              borderRadius="regular"
+              maxHeight="100%"
+              overflow="auto"
+            >
+              <Text
+                color="critical"
+                UNSAFE_className={css({
+                  fontFamily: tokenSchema.typography.fontFamily.code,
+                })}
+              >
+                {message}
+              </Text>
+              <Text
+                color="critical"
+                marginTop="small"
+                size="small"
+                UNSAFE_className={css({
+                  fontFamily: tokenSchema.typography.fontFamily.code,
+                })}
+              >
+                {stack}
+              </Text>
+            </Box>
+          </Content>
+          <div>
+            <Heading>{title}</Heading>
+          </div>
+        </Notice>
+      </Content>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,78 @@
+import {
+  CombinedGraphQLErrors,
+  type ErrorLike,
+  type ServerError,
+  type ServerParseError,
+} from '@apollo/client'
+import type { GraphQLError, GraphQLFormattedError } from 'graphql'
+
+import { VStack } from '@keystar/ui/layout'
+import { Notice } from '@keystar/ui/notice'
+import { Content } from '@keystar/ui/slots'
+import { Heading, Text } from '@keystar/ui/typography'
+
+export function GraphQLErrorNotice({
+  errors: errors_ = [],
+}: {
+  errors?: (
+    | null
+    | undefined
+    | ServerError
+    | ServerParseError
+    | GraphQLError
+    | GraphQLFormattedError
+    | Error
+    | ErrorLike
+  )[]
+}) {
+  let errors = errors_.flatMap(x => {
+    if (!x) return []
+    if (CombinedGraphQLErrors.is(x)) {
+      return x.errors
+    }
+    return x
+  })
+  if (!errors.length) return null
+
+  return (
+    <Notice tone="critical">
+      <Heading>Errors</Heading>
+      <Content>
+        <VStack elementType="ul" gap="large">
+          {[
+            ...(function* () {
+              let i = 0
+              for (const error of errors) {
+                const lines = error.message.split('\n')
+                for (const line of lines) {
+                  yield (
+                    <Text key={i++} elementType="li">
+                      {line}
+                    </Text>
+                  )
+                }
+
+                if (
+                  'result' in error &&
+                  typeof error.result === 'object' &&
+                  error.result !== null &&
+                  'errors' in error.result &&
+                  Array.isArray(error.result.errors)
+                ) {
+                  for (const { message } of error.result.errors) {
+                    if (typeof message !== 'string') continue
+                    yield (
+                      <Text key={i++} elementType="li">
+                        {message}
+                      </Text>
+                    )
+                  }
+                }
+              }
+            })(),
+          ]}
+        </VStack>
+      </Content>
+    </Notice>
+  )
+}

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

@@ -0,0 +1,17 @@
+import { type PropsWithChildren } from 'react'
+import { css, tokenSchema } from '@keystar/ui/style'
+
+export function InlineCode(props: PropsWithChildren) {
+  return (
+    <code
+      className={css({
+        backgroundColor: tokenSchema.color.alias.backgroundHovered,
+        borderRadius: tokenSchema.size.radius.xsmall,
+        color: tokenSchema.color.foreground.neutralEmphasis,
+        fontFamily: tokenSchema.typography.fontFamily.code,
+        paddingInline: tokenSchema.size.space.xsmall,
+      })}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,70 @@
+import Link from 'next/link'
+
+import { css } from '@keystar/ui/style'
+
+import { useNixxie } from '../context'
+
+export function Logo() {
+  const { adminConfig } = useNixxie()
+  if (adminConfig?.components?.Logo) return <adminConfig.components.Logo />
+  return <DefaultLogo />
+}
+
+function DefaultLogo() {
+  return (
+    <Link
+      href="/"
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '9px',
+        textDecoration: 'none',
+        outline: 0,
+        flexShrink: 0,
+        '&:focus-visible': {
+          outline: '2px solid #000',
+          outlineOffset: 3,
+          borderRadius: 4,
+        },
+      })}
+    >
+      {/* N lettermark — geometric SVG mark */}
+      <span
+        className={css({
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 28,
+          height: 28,
+          borderRadius: 6,
+          backgroundColor: '#000000',
+          flexShrink: 0,
+        })}
+      >
+        <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
+          <path
+            d="M2.5 11V3L11.5 11V3"
+            stroke="white"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+
+      {/* Wordmark */}
+      <span
+        className={css({
+          fontSize: 14,
+          fontWeight: 600,
+          letterSpacing: '-0.03em',
+          color: '#0a0a0a',
+          lineHeight: 1,
+          fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+        })}
+      >
+        Nixxie
+      </span>
+    </Link>
+  )
+}