@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,71 @@
+import { useRouter } from 'next/router'
+
+import { Button } from '@keystar/ui/button'
+import { VStack } from '@keystar/ui/layout'
+
+import { useList } from '../../../../admin-ui'
+import { GraphQLErrorNotice } from '../../../../admin-ui/components'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
+import { Fields } from '../../../../admin-ui/utils'
+import { useCreateItem } from '../../../../admin-ui/utils/useCreateItem'
+import { BaseToolbar, ColumnLayout, ItemPageHeader } from '../ItemPage/common'
+
+export const getCreateItemPage = (props: Parameters<typeof CreateItemPage>[0]) => () => (
+  <CreateItemPage {...props} />
+)
+
+function CreateItemPage({ listKey }: { listKey: string }) {
+  const list = useList(listKey)
+  const createItem = useCreateItem(list)
+  const router = useRouter()
+
+  return (
+    <PageContainer
+      title={`Create ${list.singular}`}
+      header={
+        <ItemPageHeader
+          list={list}
+          actions={[]}
+          value={null}
+          label="Create"
+          title={`Create ${list.singular}`}
+          item={null}
+          initialValue={null}
+          onAction={null}
+        />
+      }
+    >
+      <ColumnLayout>
+        <form
+          onSubmit={async e => {
+            if (e.target !== e.currentTarget) return
+            e.preventDefault()
+
+            const item = await createItem.create()
+            if (!item) return
+
+            router.push(`/${list.path}/${item.id}`)
+          }}
+          style={{ display: 'contents' }}
+        >
+          {/*
+            Workaround for react-aria "bug" where pressing enter in a form field
+            moves focus to the submit button.
+            See: https://github.com/adobe/react-spectrum/issues/5940
+          */}
+          <button type="submit" style={{ display: 'none' }} />
+          <VStack gap="large" gridArea="main" marginTop="xlarge" minWidth={0}>
+            <GraphQLErrorNotice errors={[createItem.error]} />
+            <Fields {...createItem.props} />
+          </VStack>
+
+          <BaseToolbar>
+            <Button isPending={createItem.state === 'loading'} prominence="high" type="submit">
+              Create
+            </Button>
+          </BaseToolbar>
+        </form>
+      </ColumnLayout>
+    </PageContainer>
+  )
+}

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

@@ -0,0 +1,333 @@
+import { useMemo } from 'react'
+
+import { css } from '@keystar/ui/style'
+import { Heading } from '@keystar/ui/typography'
+
+import { gql, type TypedDocumentNode, useQuery } from '../../../../admin-ui/apollo'
+import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
+import { useNixxie, useList } from '../../../../admin-ui/context'
+
+// ---- Collection card ----
+
+type CardProps = {
+  listKey: string
+  count: number | null
+  href: string
+  createHref: string | null
+}
+
+function CollectionCard({ listKey, count, href, createHref }: CardProps) {
+  const list = useList(listKey)
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        borderRadius: 8,
+        overflow: 'hidden',
+        transition: 'box-shadow 180ms, border-color 180ms',
+        '&:hover': {
+          boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+          borderColor: '#d8d8d8',
+        },
+      })}
+    >
+      <div className={css({ padding: '16px 18px 14px' })}>
+        {/* Label row */}
+        <p
+          className={css({
+            margin: '0 0 10px',
+            fontSize: 10.5,
+            fontWeight: 600,
+            letterSpacing: '0.09em',
+            textTransform: 'uppercase',
+            color: '#a3a3a3',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          })}
+        >
+          <span
+            className={css({
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            })}
+          >
+            {list.label}
+          </span>
+
+          {createHref && (
+            <a
+              href={createHref}
+              title={`New ${list.singular}`}
+              onClick={e => e.stopPropagation()}
+              className={css({
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 22,
+                height: 22,
+                borderRadius: 5,
+                border: '1px solid #ebebeb',
+                color: '#a3a3a3',
+                textDecoration: 'none',
+                fontSize: 14,
+                lineHeight: 1,
+                flexShrink: 0,
+                marginLeft: 6,
+                transition: 'border-color 130ms, color 130ms, background 130ms',
+                '&:hover': {
+                  borderColor: '#000000',
+                  color: '#000000',
+                  background: '#f5f5f5',
+                },
+              })}
+            >
+              +
+            </a>
+          )}
+        </p>
+
+        {/* Count — clickable full-card link via pseudo-element */}
+        <a
+          href={href}
+          className={css({
+            display: 'block',
+            textDecoration: 'none',
+            '&::after': {
+              content: '""',
+              position: 'absolute',
+              inset: 0,
+            },
+          })}
+        >
+          <p
+            className={css({
+              margin: '0 0 10px',
+              fontSize: 34,
+              fontWeight: 700,
+              letterSpacing: '-0.05em',
+              color: count === null ? '#e8e8e8' : '#000000',
+              lineHeight: 1,
+              fontVariantNumeric: 'tabular-nums',
+            })}
+          >
+            {count === null ? '—' : count.toLocaleString()}
+          </p>
+
+          <p
+            className={css({
+              margin: 0,
+              fontSize: 12,
+              color: '#c8c8c8',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+              transition: 'color 130ms',
+              'a:hover &': { color: '#636363' },
+            })}
+          >
+            {list.isSingleton ? 'Open' : 'View all'}
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+              <path
+                d="M2 5h6M5.5 2.5L8 5l-2.5 2.5"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </p>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+// ---- Quick create ----
+
+function QuickCreate() {
+  const { lists } = useNixxie()
+  const creatableLists = Object.values(lists)
+    .filter(l => !l.hideNavigation && !l.hideCreate && !l.isSingleton)
+    .slice(0, 8)
+
+  if (creatableLists.length === 0) return null
+
+  return (
+    <section className={css({ marginTop: 40 })}>
+      <p
+        className={css({
+          margin: '0 0 10px',
+          fontSize: 10,
+          fontWeight: 600,
+          letterSpacing: '0.10em',
+          textTransform: 'uppercase',
+          color: '#b8b8b8',
+        })}
+      >
+        Quick Create
+      </p>
+      <div className={css({ display: 'flex', flexWrap: 'wrap', gap: 7 })}>
+        {creatableLists.map(list => (
+          <a
+            key={list.key}
+            href={`/${list.path}/create`}
+            className={css({
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 6,
+              paddingInline: '12px',
+              paddingBlock: '6px',
+              borderRadius: 6,
+              border: '1px solid #e8e8e8',
+              backgroundColor: '#ffffff',
+              fontSize: 12.5,
+              fontWeight: 500,
+              color: '#525252',
+              textDecoration: 'none',
+              transition: 'border-color 130ms, color 130ms, background 130ms',
+
+              '&:hover': {
+                borderColor: '#000000',
+                color: '#000000',
+                background: '#fafafa',
+              },
+            })}
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+              <path
+                d="M5 1.5v7M1.5 5h7"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+            </svg>
+            {list.singular}
+          </a>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+// ---- Main HomePage ----
+
+export function HomePage() {
+  const { lists, error: metaError } = useNixxie()
+  const visibleLists = Object.values(lists).filter(list => !list.hideNavigation)
+
+  const LIST_COUNTS_QUERY = useMemo(
+    () =>
+      gql`
+    query KsFetchListCounts {
+      ${[
+        ...(function* () {
+          if (visibleLists.length === 0) yield '__typename'
+          for (const list of visibleLists) {
+            yield `${list.key}: ${list.graphql.names.listQueryCountName}`
+          }
+        })(),
+      ].join('\n')}
+    }` as TypedDocumentNode<{ [key: string]: number | null }>,
+    [visibleLists]
+  )
+
+  const { data, error: countsError } = useQuery(LIST_COUNTS_QUERY, { errorPolicy: 'all' })
+
+  return (
+    <PageContainer
+      header={
+        <Heading elementType="h1" size="small">
+          Dashboard
+        </Heading>
+      }
+    >
+      <div
+        className={css({
+          padding: '36px 36px 60px',
+          maxWidth: 1120,
+          width: '100%',
+          boxSizing: 'border-box',
+          '@media (max-width: 600px)': { padding: '24px 18px 44px' },
+        })}
+      >
+        <GraphQLErrorNotice errors={[metaError, countsError]} />
+
+        {/* Page title */}
+        <div className={css({ marginBottom: 28 })}>
+          <h1
+            className={css({
+              margin: '0 0 4px',
+              fontSize: 20,
+              fontWeight: 700,
+              letterSpacing: '-0.03em',
+              color: '#0a0a0a',
+            })}
+          >
+            Overview
+          </h1>
+          <p className={css({ margin: 0, fontSize: 13, color: '#a3a3a3' })}>
+            {visibleLists.length} collection{visibleLists.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+
+        {/* Collections grid */}
+        {visibleLists.length > 0 && (
+          <div
+            className={css({
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+              gap: 10,
+              '@media (max-width: 480px)': { gridTemplateColumns: '1fr 1fr', gap: 8 },
+            })}
+          >
+            {visibleLists.map(list => (
+              <CollectionCard
+                key={list.key}
+                listKey={list.key}
+                count={data?.[list.key] ?? null}
+                href={`/${list.path}${list.isSingleton ? '/1' : ''}`}
+                createHref={!list.hideCreate && !list.isSingleton ? `/${list.path}/create` : null}
+              />
+            ))}
+          </div>
+        )}
+
+        <QuickCreate />
+
+        {/* Keyboard hint */}
+        <p
+          className={css({
+            marginTop: 48,
+            fontSize: 11.5,
+            color: '#d4d4d4',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          })}
+        >
+          <kbd
+            className={css({
+              display: 'inline-flex',
+              padding: '1px 6px',
+              background: '#ffffff',
+              border: '1px solid #ebebeb',
+              borderRadius: 4,
+              fontSize: 10.5,
+              fontFamily: 'inherit',
+              color: '#a3a3a3',
+            })}
+          >
+            ⌘K
+          </kbd>
+          <span>to search and navigate</span>
+        </p>
+      </div>
+    </PageContainer>
+  )
+}