@nixxie-cms/core 2.0.0 → 2.2.0

package/src/fields/types/decimal/views/index.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
 
 import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
 
 import {
+  type CellComponent,
   type FieldController,
   type FieldControllerConfig,
   type FieldProps,
@@ -205,7 +207,7 @@ export function Field({
       errorMessage={(forceValidation || isDirty) && validate(value)}
       isReadOnly={isReadOnly}
       isRequired={isRequired}
-      inputMode="numeric"
+      inputMode="decimal"
       width="alias.singleLineWidth"
       onBlur={() => setDirty(true)}
       onChange={x => onChange?.({ ...value, value: x === '' ? null : x })}
@@ -213,3 +215,7 @@ export function Field({
     />
   )
 }
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value != null && value !== '' ? <Text>{value}</Text> : null
+}

package/src/fields/types/file/views/Field.tsx

@@ -164,7 +164,7 @@ function FileDetails(props: PropsWithChildren<FileData>) {
       gap="medium"
       padding="medium"
     >
-      <a href={props.href} download={props.name}>
+      <a href={props.href} download={props.name} aria-label={`Download ${props.name}`}>
         <HStack
           alignItems="center"
           backgroundColor="surfaceTertiary"

package/src/fields/types/float/views/index.tsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
 
 import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
 
 import type {
+  CellComponent,
   FieldController,
   FieldControllerConfig,
   FieldProps,
@@ -205,7 +207,7 @@ export function Field({
       errorMessage={(forceValidation || isDirty) && validate(value)}
       isReadOnly={isReadOnly}
       isRequired={isRequired}
-      inputMode="numeric"
+      inputMode="decimal"
       width="alias.singleLineWidth"
       onBlur={() => setDirty(true)}
       onChange={x => onChange?.({ ...value, value: x === '' ? null : x })}
@@ -213,3 +215,7 @@ export function Field({
     />
   )
 }
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value != null && value !== '' ? <Text>{value}</Text> : null
+}

package/src/fields/types/image/views/index.tsx

@@ -15,7 +15,7 @@ export const Cell: CellComponent<typeof controller> = ({ value }) => {
         width: 24,
       }}
     >
-      <img style={{ maxHeight: '100%', maxWidth: '100%' }} src={value.url} />
+      <img alt="" style={{ maxHeight: '100%', maxWidth: '100%' }} src={value.url} />
     </div>
   )
 }

package/src/fields/types/integer/views/index.tsx

@@ -7,6 +7,7 @@ import { NumberField } from '@keystar/ui/number-field'
 import { Heading, Text } from '@keystar/ui/typography'
 
 import type {
+  CellComponent,
   FieldController,
   FieldControllerConfig,
   FieldProps,
@@ -253,3 +254,7 @@ export function Field({
     />
   )
 }
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return typeof value === 'number' && Number.isFinite(value) ? <Text>{value}</Text> : null
+}

package/src/fields/types/json/views/index.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import { css, tokenSchema } from '@keystar/ui/style'
 import { TextArea } from '@keystar/ui/text-field'
 import { Text } from '@keystar/ui/typography'
@@ -12,7 +14,9 @@ import type {
 
 export const Field = (props: FieldProps<typeof controller>) => {
   const { autoFocus, field, forceValidation, onChange, value } = props
-  const errorMessage = forceValidation ? 'Invalid JSON' : undefined
+  const [isDirty, setDirty] = useState(false)
+  const errorMessage =
+    (isDirty || forceValidation) && !isValidJSON(value) ? 'Invalid JSON' : undefined
 
   return (
     <TextArea
@@ -22,6 +26,7 @@ export const Field = (props: FieldProps<typeof controller>) => {
       isReadOnly={onChange === undefined}
       label={field.label}
       onChange={onChange}
+      onBlur={() => setDirty(true)}
       value={value}
       UNSAFE_className={css({
         textarea: {
@@ -33,8 +38,21 @@ export const Field = (props: FieldProps<typeof controller>) => {
   )
 }
 
+function isValidJSON(value: string) {
+  if (!value) return true
+  try {
+    JSON.parse(value)
+    return true
+  } catch {
+    return false
+  }
+}
+
 export const Cell: CellComponent<typeof controller> = ({ value }) => {
-  return value ? <Text>{JSON.stringify(value)}</Text> : null
+  if (value == null) return null
+  const stringified = JSON.stringify(value)
+  const truncated = stringified.length > 100 ? `${stringified.slice(0, 100)}…` : stringified
+  return <Text>{truncated}</Text>
 }
 
 type Config = FieldControllerConfig<{ defaultValue: JSONValue }>

package/src/fields/types/multiselect/views/index.tsx

@@ -89,7 +89,7 @@ function CheckboxesModeField(props: FieldProps<typeof controller>) {
 
 export const Cell: CellComponent<typeof controller> = ({ value = [], field }) => {
   const listFormatter = useListFormatter({ style: 'short', type: 'conjunction' })
-  const labels = (value as string[]).map(x => field.valuesToOptionsWithStringValues[x].label)
+  const labels = (value as string[]).map(x => field.valuesToOptionsWithStringValues[x]?.label ?? x)
 
   const cellContent =
     value.length > 3
@@ -135,12 +135,16 @@ export function controller(config: Config): FieldController<Value, Option[]> & {
     type: config.fieldMeta.type,
     options: optionsWithStringValues,
     valuesToOptionsWithStringValues,
-    defaultValue: config.fieldMeta.defaultValue.map(x => valuesToOptionsWithStringValues[x]),
+    defaultValue: config.fieldMeta.defaultValue.map(
+      x => valuesToOptionsWithStringValues[x] ?? { label: x.toString(), value: x.toString() }
+    ),
     deserialize: data => {
       // if we get null from the GraphQL API (which will only happen if field read access control failed)
       // we'll just show it as nothing being selected for now.
       const values: readonly string[] | readonly number[] = data[config.fieldKey] ?? []
-      const selectedOptions = values.map(x => valuesToOptionsWithStringValues[x])
+      const selectedOptions = values.map(
+        x => valuesToOptionsWithStringValues[x] ?? { label: x.toString(), value: x.toString() }
+      )
       return selectedOptions
     },
     serialize: value => ({ [config.fieldKey]: value.map(x => parseValue(x.value)) }),

package/src/fields/types/password/views/index.tsx

@@ -181,7 +181,7 @@ export function Field(props: FieldProps<typeof controller>) {
 
           <Flex gap="regular">
             <ToggleButton
-              aria-label="show"
+              aria-label={secureTextEntry ? 'Show password' : 'Hide password'}
               isSelected={!secureTextEntry}
               onPress={() => setSecureTextEntry(bool => !bool)}
             >

package/src/fields/types/relationship/views/index.tsx

@@ -58,6 +58,7 @@ export function Field(props: FieldProps<typeof controller>) {
       <HStack gap="small" alignItems="end">
         {textField}
         <ActionButton
+          aria-label={`Go to ${field.label}`}
           href={`/${foreignList.path}?${buildQueryForRelationshipFieldWithForeignField(foreignList, field.refFieldKey, value.id)}`}
         >
           <Icon src={arrowUpRightIcon} />

package/src/fields/types/select/views/index.tsx

@@ -148,8 +148,9 @@ export function Field(props: FieldProps<typeof controller>) {
 }
 
 export const Cell: CellComponent<typeof controller> = ({ value, field }) => {
+  if (value == null) return null
   const label = field.options.find(x => x.value === value)?.label
-  return <Text>{label}</Text>
+  return <Text>{label ?? String(value)}</Text>
 }
 
 export type AdminSelectFieldMeta = {

package/src/fields/types/text/views/index.tsx

@@ -1,10 +1,12 @@
 import { useState } from 'react'
 import { TextArea, TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
 
 import type { TextFieldMeta } from '..'
 import { NullableFieldWrapper } from '../../../../admin-ui/components'
 import { entriesTyped } from '../../../../lib/core/utils'
 import type {
+  CellComponent,
   FieldController,
   FieldControllerConfig,
   FieldProps,
@@ -46,7 +48,14 @@ export function Field(props: FieldProps<typeof controller>) {
         label={field.label}
         errorMessage={
           !!validationMessages.length && (shouldShowErrors || forceValidation)
-            ? validationMessages.join('. ')
+            ? validationMessages.length === 1
+              ? validationMessages[0]
+              : validationMessages.map((message, i) => (
+                  <Text key={i}>
+                    {i > 0 && <br />}
+                    {message}
+                  </Text>
+                ))
             : undefined
         }
         isDisabled={isNull}
@@ -73,6 +82,10 @@ export function Field(props: FieldProps<typeof controller>) {
   )
 }
 
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value ? <Text truncate>{value}</Text> : null
+}
+
 type Config = FieldControllerConfig<TextFieldMeta>
 
 type Validation = {

package/src/fields/types/timestamp/views/__tests__/index.tsx

@@ -1,68 +1,68 @@
-import { controller } from '../index'
-
-const STUBCONFIG = {
-  listKey: 'timestamp',
-  fieldKey: 'timestamp',
-  label: 'foo',
-  description: '',
-  customViews: {},
-} as const
-
-describe('controller', () => {
-  describe('validate', () => {
-    it('null is OK if not required', () => {
-      const { validate } = controller({
-        ...STUBCONFIG,
-        fieldMeta: {
-          defaultValue: null,
-          updatedAt: false,
-        },
-      })
-      expect(
-        validate!(
-          {
-            kind: 'create',
-            value: null,
-          },
-          { isRequired: false }
-        )
-      ).toBe(true)
-    })
-    it('isRequired enforces required (null)', () => {
-      const { validate } = controller({
-        ...STUBCONFIG,
-        fieldMeta: {
-          defaultValue: null,
-          updatedAt: false,
-        },
-      })
-      expect(
-        validate!(
-          {
-            kind: 'create',
-            value: null,
-          },
-          { isRequired: true }
-        )
-      ).toBe('foo is required')
-    })
-    it('isRequired enforces required (value)', () => {
-      const { validate } = controller({
-        ...STUBCONFIG,
-        fieldMeta: {
-          defaultValue: null,
-          updatedAt: false,
-        },
-      })
-      expect(
-        validate!(
-          {
-            kind: 'create',
-            value: new Date().toJSON(),
-          },
-          { isRequired: true }
-        )
-      ).toBe(true)
-    })
-  })
-})
+import { controller } from '../index'
+
+const STUBCONFIG = {
+  listKey: 'timestamp',
+  fieldKey: 'timestamp',
+  label: 'foo',
+  description: '',
+  customViews: {},
+} as const
+
+describe('controller', () => {
+  describe('validate', () => {
+    it('null is OK if not required', () => {
+      const { validate } = controller({
+        ...STUBCONFIG,
+        fieldMeta: {
+          defaultValue: null,
+          updatedAt: false,
+        },
+      })
+      expect(
+        validate!(
+          {
+            kind: 'create',
+            value: null,
+          },
+          { isRequired: false }
+        )
+      ).toBe(true)
+    })
+    it('isRequired enforces required (null)', () => {
+      const { validate } = controller({
+        ...STUBCONFIG,
+        fieldMeta: {
+          defaultValue: null,
+          updatedAt: false,
+        },
+      })
+      expect(
+        validate!(
+          {
+            kind: 'create',
+            value: null,
+          },
+          { isRequired: true }
+        )
+      ).toBe(false)
+    })
+    it('isRequired enforces required (value)', () => {
+      const { validate } = controller({
+        ...STUBCONFIG,
+        fieldMeta: {
+          defaultValue: null,
+          updatedAt: false,
+        },
+      })
+      expect(
+        validate!(
+          {
+            kind: 'create',
+            value: new Date().toJSON(),
+          },
+          { isRequired: true }
+        )
+      ).toBe(true)
+    })
+  })
+})

package/src/fields/types/timestamp/views/index.tsx

@@ -44,12 +44,13 @@ export function Field(props: FieldProps<typeof controller>) {
           description={field.description}
           isDisabled={!parsedValue}
           isReadOnly
+          placeholder="yyyy-mm-dd --:--:--"
           value={
             parsedValue
               ? isReadonlyUTC
                 ? parsedValue.toAbsoluteString()
                 : dateFormatter.format(parsedValue.toDate())
-              : 'yyyy-mm-dd --:--:--'
+              : ''
           }
         />
         {!!parsedValue && (

package/src/fields/types/virtual/views/index.tsx

@@ -1,4 +1,4 @@
-import { TextField } from '@keystar/ui/text-field'
+import { TextArea, TextField } from '@keystar/ui/text-field'
 import { Text } from '@keystar/ui/typography'
 import type {
   CellComponent,
@@ -21,13 +21,28 @@ export function Field(props: FieldProps<typeof controller>) {
   const { autoFocus, field, value } = props
   if (value === createViewValue) return null
 
+  const stringified = stringify(value)
+  // multi-line values (e.g. pretty-printed JSON) get clipped in a single-line
+  // TextField, so render them in a read-only TextArea instead
+  if (stringified.includes('\n')) {
+    return (
+      <TextArea
+        autoFocus={autoFocus}
+        description={field.description}
+        label={field.label}
+        isReadOnly={true}
+        value={stringified}
+      />
+    )
+  }
+
   return (
     <TextField
       autoFocus={autoFocus}
       description={field.description}
       label={field.label}
       isReadOnly={true}
-      value={stringify(value)}
+      value={stringified}
     />
   )
 }

package/src/internal-unstable/admin-ui/pages/HomePage/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 
-import { css } from '@keystar/ui/style'
+import { css, tokenSchema } from '@keystar/ui/style'
 import { Heading } from '@keystar/ui/typography'
 
 import { gql, type TypedDocumentNode, useQuery } from '../../../../admin-ui/apollo'
@@ -24,14 +24,14 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
     <div
       className={css({
         position: 'relative',
-        backgroundColor: '#ffffff',
-        border: '1px solid #ebebeb',
+        backgroundColor: tokenSchema.color.background.canvas,
+        border: `1px solid ${tokenSchema.color.border.muted}`,
         borderRadius: 8,
         overflow: 'hidden',
         transition: 'box-shadow 180ms, border-color 180ms',
         '&:hover': {
-          boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
-          borderColor: '#d8d8d8',
+          boxShadow: `0 2px 12px ${tokenSchema.color.shadow.muted}`,
+          borderColor: tokenSchema.color.border.emphasis,
         },
       })}
     >
@@ -44,7 +44,7 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
             fontWeight: 600,
             letterSpacing: '0.09em',
             textTransform: 'uppercase',
-            color: '#a3a3a3',
+            color: tokenSchema.color.foreground.neutralSecondary,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
@@ -69,11 +69,11 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                width: 22,
-                height: 22,
+                width: 28,
+                height: 28,
                 borderRadius: 5,
-                border: '1px solid #ebebeb',
-                color: '#a3a3a3',
+                border: `1px solid ${tokenSchema.color.border.muted}`,
+                color: tokenSchema.color.foreground.neutralSecondary,
                 textDecoration: 'none',
                 fontSize: 14,
                 lineHeight: 1,
@@ -81,9 +81,9 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
                 marginLeft: 6,
                 transition: 'border-color 130ms, color 130ms, background 130ms',
                 '&:hover': {
-                  borderColor: '#000000',
-                  color: '#000000',
-                  background: '#f5f5f5',
+                  borderColor: tokenSchema.color.scale.black,
+                  color: tokenSchema.color.foreground.neutralEmphasis,
+                  background: tokenSchema.color.background.surfaceSecondary,
                 },
               })}
             >
@@ -111,7 +111,10 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
               fontSize: 34,
               fontWeight: 700,
               letterSpacing: '-0.05em',
-              color: count === null ? '#e8e8e8' : '#000000',
+              color:
+                count === null
+                  ? tokenSchema.color.border.muted
+                  : tokenSchema.color.foreground.neutralEmphasis,
               lineHeight: 1,
               fontVariantNumeric: 'tabular-nums',
             })}
@@ -123,12 +126,12 @@ function CollectionCard({ listKey, count, href, createHref }: CardProps) {
             className={css({
               margin: 0,
               fontSize: 12,
-              color: '#c8c8c8',
+              color: tokenSchema.color.foreground.neutralSecondary,
               display: 'flex',
               alignItems: 'center',
               gap: 4,
               transition: 'color 130ms',
-              'a:hover &': { color: '#636363' },
+              'a:hover &': { color: tokenSchema.color.foreground.neutralEmphasis },
             })}
           >
             {list.isSingleton ? 'Open' : 'View all'}
@@ -167,7 +170,7 @@ function QuickCreate() {
           fontWeight: 600,
           letterSpacing: '0.10em',
           textTransform: 'uppercase',
-          color: '#b8b8b8',
+          color: tokenSchema.color.foreground.neutralSecondary,
         })}
       >
         Quick Create
@@ -184,18 +187,18 @@ function QuickCreate() {
               paddingInline: '12px',
               paddingBlock: '6px',
               borderRadius: 6,
-              border: '1px solid #e8e8e8',
-              backgroundColor: '#ffffff',
+              border: `1px solid ${tokenSchema.color.border.muted}`,
+              backgroundColor: tokenSchema.color.background.canvas,
               fontSize: 12.5,
               fontWeight: 500,
-              color: '#525252',
+              color: tokenSchema.color.foreground.neutral,
               textDecoration: 'none',
               transition: 'border-color 130ms, color 130ms, background 130ms',
 
               '&:hover': {
-                borderColor: '#000000',
-                color: '#000000',
-                background: '#fafafa',
+                borderColor: tokenSchema.color.scale.black,
+                color: tokenSchema.color.foreground.neutralEmphasis,
+                background: tokenSchema.color.background.surface,
               },
             })}
           >
@@ -260,18 +263,24 @@ export function HomePage() {
 
         {/* Page title */}
         <div className={css({ marginBottom: 28 })}>
-          <h1
+          <h2
             className={css({
               margin: '0 0 4px',
               fontSize: 20,
               fontWeight: 700,
               letterSpacing: '-0.03em',
-              color: '#0a0a0a',
+              color: tokenSchema.color.foreground.neutralEmphasis,
             })}
           >
             Overview
-          </h1>
-          <p className={css({ margin: 0, fontSize: 13, color: '#a3a3a3' })}>
+          </h2>
+          <p
+            className={css({
+              margin: 0,
+              fontSize: 13,
+              color: tokenSchema.color.foreground.neutralSecondary,
+            })}
+          >
             {visibleLists.length} collection{visibleLists.length !== 1 ? 's' : ''}
           </p>
         </div>
@@ -305,7 +314,7 @@ export function HomePage() {
           className={css({
             marginTop: 48,
             fontSize: 11.5,
-            color: '#d4d4d4',
+            color: tokenSchema.color.foreground.neutralSecondary,
             display: 'flex',
             alignItems: 'center',
             gap: 6,
@@ -315,12 +324,12 @@ export function HomePage() {
             className={css({
               display: 'inline-flex',
               padding: '1px 6px',
-              background: '#ffffff',
-              border: '1px solid #ebebeb',
+              background: tokenSchema.color.background.canvas,
+              border: `1px solid ${tokenSchema.color.border.muted}`,
               borderRadius: 4,
               fontSize: 10.5,
               fontFamily: 'inherit',
-              color: '#a3a3a3',
+              color: tokenSchema.color.foreground.neutralSecondary,
             })}
           >
             ⌘K