@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,310 @@
+import NextHead from 'next/head'
+import { type HTMLAttributes, type ReactNode, useEffect, useState } from 'react'
+
+import { css } from '@keystar/ui/style'
+
+import { Logo } from './Logo'
+import { Navigation } from './Navigation'
+import { CommandPalette } from './CommandPalette'
+
+const SIDEBAR_WIDTH = 256
+const TOPBAR_HEIGHT = 52
+
+export function PageWrapper(props: HTMLAttributes<HTMLElement>) {
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        height: '100vh',
+        overflow: 'hidden',
+        backgroundColor: '#fafafa',
+        fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      })}
+      {...props}
+    />
+  )
+}
+
+// ---- Mobile overlay ----
+function Backdrop({ isVisible, onClick }: { isVisible: boolean; onClick: () => void }) {
+  return (
+    <div
+      onClick={onClick}
+      aria-hidden={!isVisible}
+      className={css({
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(10,10,10,0.35)',
+        zIndex: 40,
+        transition: 'opacity 200ms',
+        opacity: isVisible ? 1 : 0,
+        pointerEvents: isVisible ? 'auto' : 'none',
+        backdropFilter: 'blur(2px)',
+        '@media (min-width: 768px)': { display: 'none' },
+      })}
+    />
+  )
+}
+
+// ---- Sidebar — pure white, precise ----
+function Sidebar({
+  isOpen,
+  onClose,
+  onCmdK,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onCmdK: () => void
+}) {
+  return (
+    <>
+      <Backdrop isVisible={isOpen} onClick={onClose} />
+      <aside
+        className={css({
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: SIDEBAR_WIDTH,
+          zIndex: 50,
+          display: 'flex',
+          flexDirection: 'column',
+          backgroundColor: '#ffffff',
+          borderRight: '1px solid #ebebeb',
+          transform: isOpen ? 'translateX(0)' : `translateX(-${SIDEBAR_WIDTH}px)`,
+          transition: 'transform 220ms cubic-bezier(0.4,0,0.2,1)',
+
+          '@media (min-width: 768px)': {
+            position: 'relative',
+            transform: 'translateX(0)',
+            flexShrink: 0,
+          },
+        })}
+      >
+        {/* Logo bar */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            height: TOPBAR_HEIGHT,
+            paddingInline: '16px',
+            borderBottom: '1px solid #f2f2f2',
+            flexShrink: 0,
+          })}
+        >
+          <Logo />
+        </div>
+
+        {/* Nav scrollable area */}
+        <div
+          className={css({
+            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            WebkitOverflowScrolling: 'touch',
+            '&::-webkit-scrollbar': { width: 3 },
+            '&::-webkit-scrollbar-thumb': { background: '#ebebeb', borderRadius: 3 },
+          })}
+        >
+          <Navigation onNavItemClick={onClose} onCmdK={onCmdK} />
+        </div>
+      </aside>
+    </>
+  )
+}
+
+// ---- Top bar ----
+function TopBar({
+  header,
+  onMenuClick,
+  isSidebarOpen,
+}: {
+  header: ReactNode
+  onMenuClick: () => void
+  isSidebarOpen: boolean
+}) {
+  return (
+    <header
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        height: TOPBAR_HEIGHT,
+        paddingInline: '24px',
+        gap: '14px',
+        backgroundColor: '#ffffff',
+        borderBottom: '1px solid #ebebeb',
+        flexShrink: 0,
+        zIndex: 30,
+      })}
+    >
+      {/* Mobile menu button */}
+      <button
+        onClick={onMenuClick}
+        aria-label={isSidebarOpen ? 'Close menu' : 'Open menu'}
+        aria-expanded={isSidebarOpen}
+        className={css({
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 32,
+          height: 32,
+          borderRadius: 6,
+          border: '1px solid #ebebeb',
+          background: 'transparent',
+          cursor: 'pointer',
+          flexShrink: 0,
+          color: '#a3a3a3',
+          transition: 'color 130ms, background 130ms',
+          '&:hover': { background: '#f5f5f5', color: '#0a0a0a' },
+          '@media (min-width: 768px)': { display: 'none' },
+        })}
+      >
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
+          {isSidebarOpen ? (
+            <path
+              d="M3 3L12 12M12 3L3 12"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+            />
+          ) : (
+            <>
+              <line
+                x1="2"
+                y1="4.5"
+                x2="13"
+                y2="4.5"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+              <line
+                x1="2"
+                y1="7.5"
+                x2="13"
+                y2="7.5"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+              <line
+                x1="2"
+                y1="10.5"
+                x2="13"
+                y2="10.5"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+            </>
+          )}
+        </svg>
+      </button>
+
+      {/* Header content (breadcrumbs / title / actions) */}
+      <div
+        className={css({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flex: 1,
+          minWidth: 0,
+          gap: '12px',
+        })}
+      >
+        {header}
+      </div>
+    </header>
+  )
+}
+
+// ---- Main content area ----
+function MainContent(props: HTMLAttributes<HTMLElement>) {
+  return (
+    <main
+      className={css({
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        minWidth: 0,
+        minHeight: 0,
+      })}
+      {...props}
+    />
+  )
+}
+
+function ContentScroller(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-nixxie-content=""
+      className={css({
+        flex: 1,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        WebkitOverflowScrolling: 'touch',
+        '&::-webkit-scrollbar': { width: 5 },
+        '&::-webkit-scrollbar-thumb': { background: '#e8e8e8', borderRadius: 4 },
+        '&::-webkit-scrollbar-thumb:hover': { background: '#d4d4d4' },
+      })}
+      {...props}
+    />
+  )
+}
+
+// ---- Public API ----
+type PageContainerProps = {
+  children: ReactNode
+  header: ReactNode
+  title?: string
+}
+
+export function PageContainer({ children, header, title }: PageContainerProps) {
+  const [isSidebarOpen, setSidebarOpen] = useState(false)
+  const [cmdOpen, setCmdOpen] = useState(false)
+
+  useEffect(() => {
+    function onResize() {
+      if (window.innerWidth >= 768) setSidebarOpen(false)
+    }
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setCmdOpen(v => !v)
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  return (
+    <PageWrapper>
+      <NextHead>
+        <title key="title">{title ? `Nixxie – ${title}` : 'Nixxie'}</title>
+      </NextHead>
+
+      <Sidebar
+        isOpen={isSidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+        onCmdK={() => setCmdOpen(v => !v)}
+      />
+
+      <MainContent>
+        <TopBar
+          header={header}
+          onMenuClick={() => setSidebarOpen(v => !v)}
+          isSidebarOpen={isSidebarOpen}
+        />
+        <ContentScroller>{children}</ContentScroller>
+      </MainContent>
+
+      <CommandPalette isOpen={cmdOpen} onClose={() => setCmdOpen(false)} />
+    </PageWrapper>
+  )
+}

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

@@ -0,0 +1,119 @@
+import { useId } from '@react-aria/utils'
+import { useState } from 'react'
+
+import { Button, ButtonGroup } from '@keystar/ui/button'
+import { Checkbox, CheckboxGroup } from '@keystar/ui/checkbox'
+import { Dialog, useDialogContainer } from '@keystar/ui/dialog'
+import { VStack } from '@keystar/ui/layout'
+import { TextLink } from '@keystar/ui/link'
+import { Content } from '@keystar/ui/slots'
+import { TextField } from '@keystar/ui/text-field'
+import { Emoji, Heading, Text } from '@keystar/ui/typography'
+
+const newsletterUrl = 'https://endpoints.nixxie.com.au/newsletter'
+const emailValidationMessage = 'Please enter a valid email address.'
+
+function validateEmail(value: string) {
+  return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(
+    value
+  )
+}
+
+export function WelcomeDialog() {
+  const [subscribe, setSubscribe] = useState(['nixxie'])
+  const [email, setEmail] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const formId = useId()
+  const dialog = useDialogContainer()
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setError(null)
+
+    // Check if user wants to subscribe and a valid email address
+    if (subscribe.length) {
+      setLoading(true)
+
+      if (!validateEmail(email)) {
+        setError(emailValidationMessage)
+        return
+      }
+
+      const tags = ['source:@nixxie-cms/auth']
+      subscribe.forEach(list => tags.push(`list:${list}`))
+
+      const res = await fetch(newsletterUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, tags }),
+      })
+
+      try {
+        if (res.status !== 200) {
+          const { error } = await res.json()
+          setError(error)
+          return
+        }
+      } catch (e: any) {
+        // network errors or failed parse
+        setError(e.message.toString())
+        return
+      }
+
+      setLoading(false)
+    }
+
+    dialog.dismiss()
+  }
+
+  return (
+    <Dialog size="small">
+      <Heading>
+        Welcome <Emoji symbol="👋" />
+      </Heading>
+
+      <Content>
+        <VStack gap="xlarge">
+          <Text elementType="p">
+            Thanks for installing Nixxie, checkout the{' '}
+            <TextLink href="https://nixxiecms.com">documentation</TextLink> for help getting
+            started. To stay connected{' '}
+            <TextLink href="https://twitter.com/nixxiecms" target="_blank">
+              follow us on twitter
+            </TextLink>
+            , and to hear about the latest news sign up to our newsletters:
+          </Text>
+
+          <form id={formId} onSubmit={onSubmit}>
+            <VStack gap="medium">
+              <TextField
+                label="Email"
+                name="email"
+                isRequired
+                value={email}
+                onChange={setEmail}
+                onBlur={() => setError(validateEmail(email) ? null : emailValidationMessage)}
+                placeholder="example@gmail.com"
+                errorMessage={error}
+              />
+              <CheckboxGroup onChange={setSubscribe} value={subscribe}>
+                <Checkbox value="nixxie">Nixxie news</Checkbox>
+                <Checkbox value="nixxie">Nixxie news</Checkbox>
+              </CheckboxGroup>
+            </VStack>
+          </form>
+        </VStack>
+      </Content>
+
+      <ButtonGroup>
+        <Button onPress={dialog.dismiss}>Cancel</Button>
+        <Button form={formId} prominence="high" type="submit" isPending={loading}>
+          Subscribe
+        </Button>
+      </ButtonGroup>
+    </Dialog>
+  )
+}

package/src/admin-ui/components/index.ts

@@ -0,0 +1,23 @@
+export { CellContainer } from './CellContainer'
+export { InlineCode } from './InlineCode'
+export { NullableFieldWrapper } from './NullableFieldWrapper'
+
+export { ErrorBoundary, ErrorContainer } from './Errors'
+
+export { Logo } from './Logo'
+export {
+  getHrefFromList,
+  DeveloperResourcesMenu,
+  NavContainer,
+  NavFooter,
+  NavItem,
+  NavList,
+} from './Navigation'
+
+// co-locating the type with the admin-ui/component for a more a salient mental model.
+// importing this type from @nixxie-cms/core/admin-ui/components is probably intuitive for a user
+export type { NavigationProps } from '../../types'
+
+export { PageContainer, PageWrapper } from './PageContainer'
+export { BuildItemDialog } from './CreateItemDialog'
+export { GraphQLErrorNotice } from './GraphQLErrorNotice'