@nixxie-cms/core 1.0.3 → 1.1.0

package/src/fields/types/relationship/index.ts

@@ -1,11 +1,11 @@
 import { g } from '../../..'
 import { type ListMetaSource, getAdminMetaForRelationshipField } from '../../../lib/admin-meta'
 import {
-  type BaseListTypeInfo,
+  type BaseCollectionTypeInfo,
   type CommonFieldConfig,
   type FieldTypeFunc,
   type JSONValue,
-  type ListSortDescriptor,
+  type CollectionSortDescriptor,
   fieldType,
 } from '../../../types'
 import type { controller } from './views'
@@ -13,7 +13,7 @@ import type { controller } from './views'
 type ListKeyFromRef<Ref extends string> = Ref extends `${infer ListKey}.${string}` ? ListKey : Ref
 
 // This is the default display mode for Relationships
-type SelectDisplayConfig<ListTypeInfo extends BaseListTypeInfo, Ref extends string> = {
+type SelectDisplayConfig<CollectionTypeInfo extends BaseCollectionTypeInfo, Ref extends string> = {
   ui?: {
     // Sets the relationship to display as a Select field
     displayMode?: 'select'
@@ -31,12 +31,12 @@ type SelectDisplayConfig<ListTypeInfo extends BaseListTypeInfo, Ref extends stri
      * The filter to apply when shown in the select.
      * Defaults to the initialSort (if set) on the related list.
      */
-    filter?: ListTypeInfo['all']['lists'][ListKeyFromRef<Ref>]['inputs']['where']
+    filter?: CollectionTypeInfo['all']['lists'][ListKeyFromRef<Ref>]['inputs']['where']
     /**
      * The sort to apply when shown in the select.
      * Defaults to the initialSort (if set) on the related list.
      */
-    sort?: ListSortDescriptor<string>
+    sort?: CollectionSortDescriptor<string>
   }
 }
 
@@ -56,7 +56,7 @@ type TableDisplayConfig = {
   many: true
   ui?: {
     displayMode: 'table'
-    initialSort?: ListSortDescriptor<string>
+    initialSort?: CollectionSortDescriptor<string>
     columns?: string[]
 
     itemView: {
@@ -146,21 +146,21 @@ type FieldTypeInfo = {
 }
 
 export type RelationshipFieldConfig<
-  ListTypeInfo extends BaseListTypeInfo,
-  Ref extends `${keyof ListTypeInfo['all']['lists'] & string}${'' | `.${string}`}`,
-> = CommonFieldConfig<ListTypeInfo, FieldTypeInfo> & {
+  CollectionTypeInfo extends BaseCollectionTypeInfo,
+  Ref extends `${keyof CollectionTypeInfo['all']['lists'] & string}${'' | `.${string}`}`,
+> = CommonFieldConfig<CollectionTypeInfo, FieldTypeInfo> & {
   many?: boolean
   ref: Ref
   ui?: {
     hideCreate?: boolean
   }
 } & (OneDbConfig | ManyDbConfig) &
-  (SelectDisplayConfig<ListTypeInfo, Ref> | CountDisplayConfig | TableDisplayConfig)
+  (SelectDisplayConfig<CollectionTypeInfo, Ref> | CountDisplayConfig | TableDisplayConfig)
 
 export function relationship<
-  ListTypeInfo extends BaseListTypeInfo,
-  Ref extends `${keyof ListTypeInfo['all']['lists'] & string}${'' | `.${string}`}`,
->({ ref, ...config }: RelationshipFieldConfig<ListTypeInfo, Ref>): FieldTypeFunc<ListTypeInfo> {
+  CollectionTypeInfo extends BaseCollectionTypeInfo,
+  Ref extends `${keyof CollectionTypeInfo['all']['lists'] & string}${'' | `.${string}`}`,
+>({ ref, ...config }: RelationshipFieldConfig<CollectionTypeInfo, Ref>): FieldTypeFunc<CollectionTypeInfo> {
   const { many = false } = config
   const [foreignListKey, foreignFieldKey] = ref.split('.') as [string, string | undefined]
 

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

@@ -1,110 +1,110 @@
-import { ComboboxMulti, Item } from '@keystar/ui/combobox'
-import { css } from '@keystar/ui/style'
-
-import type { ListMeta, ListSortDescriptor } from '../../../../types'
-import type { RelationshipValue } from './types'
-import { useApolloQuery } from './useApolloQuery'
-import { useState } from 'react'
-
-export function ComboboxMany({
-  extraSelection = '',
-  forceValidation,
-  isDisabled,
-  isLoading,
-  isReadOnly,
-  isRequired,
-  labelField,
-  list,
-  searchFields,
-  state,
-  filter,
-  sort,
-  ...props
-}: {
-  autoFocus?: boolean
-  description?: string
-  forceValidation?: boolean
-  isDisabled?: boolean
-  isLoading?: boolean
-  isReadOnly?: boolean
-  isRequired?: boolean
-  label?: string
-  'aria-label'?: string
-  labelField: string
-  searchFields: string[]
-  list: ListMeta
-  placeholder?: string
-  filter?: Record<string, any> | null
-  sort?: ListSortDescriptor<string> | null
-  state: {
-    kind: 'many'
-    value: RelationshipValue[]
-    onChange(value: RelationshipValue[]): void
-  }
-  extraSelection?: string
-}) {
-  const { data, loadingState, error, onLoadMore, search, setSearch } = useApolloQuery({
-    labelField,
-    list,
-    searchFields,
-    state,
-    filter,
-    sort,
-  })
-  const [shouldShowErrors, setShouldShowErrors] = useState(false)
-  const validationMessages =
-    isRequired && state.value.length === 0 ? [`At least one ${list.singular} is required`] : []
-
-  // TODO: better error UI
-  // TODO: Handle permission errors
-  // (ie; user has permission to read this relationship field, but
-  // not the related list, or some items on the list)
-  if (error) return <span>Error</span>
-
-  const items: RelationshipValue[] = data?.items?.map(x => ({ ...x, built: false })) ?? []
-  const fetchedIds = new Set(items.map(item => item.id))
-
-  for (const item of state.value) {
-    if (!fetchedIds.has(item.id)) {
-      items.push(item)
-    }
-  }
-
-  return (
-    <ComboboxMulti
-      {...props}
-      isDisabled={isDisabled || isReadOnly}
-      isRequired={isRequired}
-      items={items}
-      loadingState={loadingState}
-      errorMessage={
-        !!validationMessages.length && (shouldShowErrors || forceValidation)
-          ? validationMessages.join('. ')
-          : undefined
-      }
-      onBlur={() => {
-        setShouldShowErrors(true)
-      }}
-      onInputChange={setSearch}
-      inputValue={search}
-      onLoadMore={onLoadMore}
-      selectedKeys={state.value?.map(item => item.id.toString())}
-      onSelectionChange={selection => {
-        // TODO
-        if (selection === 'all') return
-
-        const selectedItems = items.filter(item => selection.has(item.id.toString()))
-        state.onChange(selectedItems)
-      }}
-      minWidth="alias.singleLineWidth"
-      width="auto"
-      UNSAFE_className={css({
-        // This should probably be addressed in @keystar/ui/combobox
-        // - the mobile variant should respect the `width` prop
-        '[role="button"]': { width: 'auto' },
-      })}
-    >
-      {item => <Item>{item.label || item.id}</Item>}
-    </ComboboxMulti>
-  )
-}
+import { ComboboxMulti, Item } from '@keystar/ui/combobox'
+import { css } from '@keystar/ui/style'
+
+import type { CollectionMeta, CollectionSortDescriptor } from '../../../../types'
+import type { RelationshipValue } from './types'
+import { useApolloQuery } from './useApolloQuery'
+import { useState } from 'react'
+
+export function ComboboxMany({
+  extraSelection = '',
+  forceValidation,
+  isDisabled,
+  isLoading,
+  isReadOnly,
+  isRequired,
+  labelField,
+  list,
+  searchFields,
+  state,
+  filter,
+  sort,
+  ...props
+}: {
+  autoFocus?: boolean
+  description?: string
+  forceValidation?: boolean
+  isDisabled?: boolean
+  isLoading?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: string
+  'aria-label'?: string
+  labelField: string
+  searchFields: string[]
+  list: CollectionMeta
+  placeholder?: string
+  filter?: Record<string, any> | null
+  sort?: CollectionSortDescriptor<string> | null
+  state: {
+    kind: 'many'
+    value: RelationshipValue[]
+    onChange(value: RelationshipValue[]): void
+  }
+  extraSelection?: string
+}) {
+  const { data, loadingState, error, onLoadMore, search, setSearch } = useApolloQuery({
+    labelField,
+    list,
+    searchFields,
+    state,
+    filter,
+    sort,
+  })
+  const [shouldShowErrors, setShouldShowErrors] = useState(false)
+  const validationMessages =
+    isRequired && state.value.length === 0 ? [`At least one ${list.singular} is required`] : []
+
+  // TODO: better error UI
+  // TODO: Handle permission errors
+  // (ie; user has permission to read this relationship field, but
+  // not the related list, or some items on the list)
+  if (error) return <span>Error</span>
+
+  const items: RelationshipValue[] = data?.items?.map(x => ({ ...x, built: false })) ?? []
+  const fetchedIds = new Set(items.map(item => item.id))
+
+  for (const item of state.value) {
+    if (!fetchedIds.has(item.id)) {
+      items.push(item)
+    }
+  }
+
+  return (
+    <ComboboxMulti
+      {...props}
+      isDisabled={isDisabled || isReadOnly}
+      isRequired={isRequired}
+      items={items}
+      loadingState={loadingState}
+      errorMessage={
+        !!validationMessages.length && (shouldShowErrors || forceValidation)
+          ? validationMessages.join('. ')
+          : undefined
+      }
+      onBlur={() => {
+        setShouldShowErrors(true)
+      }}
+      onInputChange={setSearch}
+      inputValue={search}
+      onLoadMore={onLoadMore}
+      selectedKeys={state.value?.map(item => item.id.toString())}
+      onSelectionChange={selection => {
+        // TODO
+        if (selection === 'all') return
+
+        const selectedItems = items.filter(item => selection.has(item.id.toString()))
+        state.onChange(selectedItems)
+      }}
+      minWidth="alias.singleLineWidth"
+      width="auto"
+      UNSAFE_className={css({
+        // This should probably be addressed in @keystar/ui/combobox
+        // - the mobile variant should respect the `width` prop
+        '[role="button"]': { width: 'auto' },
+      })}
+    >
+      {item => <Item>{item.label || item.id}</Item>}
+    </ComboboxMulti>
+  )
+}

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

@@ -1,115 +1,115 @@
-import { useState } from 'react'
-
-import { Combobox, Item } from '@keystar/ui/combobox'
-import { css } from '@keystar/ui/style'
-
-import type { ListMeta, ListSortDescriptor } from '../../../../types'
-import type { RelationshipValue } from './types'
-import { useApolloQuery } from './useApolloQuery'
-
-export function ComboboxSingle({
-  forceValidation,
-  isLoading,
-  isRequired,
-  labelField,
-  list,
-  searchFields,
-  state,
-  filter,
-  sort,
-  ...props
-}: {
-  autoFocus?: boolean
-  description?: string
-  forceValidation?: boolean
-  isDisabled?: boolean
-  isLoading?: boolean
-  isReadOnly?: boolean
-  isRequired?: boolean
-  label?: string
-  labelField: string
-  searchFields: string[]
-  list: ListMeta
-  placeholder?: string
-  filter?: Record<string, any> | null
-  sort?: ListSortDescriptor<string> | null
-  state: {
-    kind: 'one'
-    value: RelationshipValue | null
-    onChange(value: RelationshipValue | null): void
-  }
-}) {
-  const { data, loading, error, onLoadMore, search, setSearch } = useApolloQuery({
-    labelField,
-    list,
-    searchFields,
-    state,
-    filter,
-    sort,
-  })
-
-  const [shouldShowErrors, setShouldShowErrors] = useState(false)
-  const validationMessages =
-    isRequired && state.value === null ? [`A ${list.singular} is required`] : []
-  const [lastSeenStateValue, setLastSeenStateValue] = useState(state.value)
-
-  if (state.value !== lastSeenStateValue) {
-    setLastSeenStateValue(state.value)
-    setSearch(state.value?.label ?? '')
-  }
-
-  // TODO: better error UI
-  // TODO: Handle permission errors
-  // (ie; user has permission to read this relationship field, but
-  // not the related list, or some items on the list)
-  if (error) return <span>Error</span>
-
-  const items: RelationshipValue[] = data?.items?.map(x => ({ ...x, built: false })) ?? []
-
-  if (
-    state.value !== null &&
-    (state.value.built || !items.some(item => item.id === state.value?.id))
-  ) {
-    items.push(state.value)
-  }
-
-  return (
-    <Combobox
-      {...props}
-      isRequired={isRequired}
-      items={items}
-      loadingState={loading || isLoading ? 'loading' : 'idle'}
-      errorMessage={
-        !!validationMessages.length && (shouldShowErrors || forceValidation)
-          ? validationMessages.join('. ')
-          : undefined
-      }
-      onBlur={() => {
-        setShouldShowErrors(true)
-      }}
-      onInputChange={input => {
-        setSearch(input)
-
-        // unset the selected value when the user clears the input
-        if (input === '') state.onChange(null)
-      }}
-      inputValue={search}
-      onLoadMore={onLoadMore}
-      selectedKey={state.value ? state.value.id.toString() : null}
-      onSelectionChange={key => {
-        const selectedItem = items.find(item => item.id.toString() === key) ?? null
-        state.onChange(selectedItem)
-        setSearch(selectedItem?.label ?? '')
-      }}
-      minWidth="alias.singleLineWidth"
-      width="auto"
-      UNSAFE_className={css({
-        // This should probably be addressed in @keystar/ui/combobox
-        // - the mobile variant should respect the `width` prop
-        '[role="button"]': { width: 'auto' },
-      })}
-    >
-      {item => <Item>{item.label || item.id}</Item>}
-    </Combobox>
-  )
-}
+import { useState } from 'react'
+
+import { Combobox, Item } from '@keystar/ui/combobox'
+import { css } from '@keystar/ui/style'
+
+import type { CollectionMeta, CollectionSortDescriptor } from '../../../../types'
+import type { RelationshipValue } from './types'
+import { useApolloQuery } from './useApolloQuery'
+
+export function ComboboxSingle({
+  forceValidation,
+  isLoading,
+  isRequired,
+  labelField,
+  list,
+  searchFields,
+  state,
+  filter,
+  sort,
+  ...props
+}: {
+  autoFocus?: boolean
+  description?: string
+  forceValidation?: boolean
+  isDisabled?: boolean
+  isLoading?: boolean
+  isReadOnly?: boolean
+  isRequired?: boolean
+  label?: string
+  labelField: string
+  searchFields: string[]
+  list: CollectionMeta
+  placeholder?: string
+  filter?: Record<string, any> | null
+  sort?: CollectionSortDescriptor<string> | null
+  state: {
+    kind: 'one'
+    value: RelationshipValue | null
+    onChange(value: RelationshipValue | null): void
+  }
+}) {
+  const { data, loading, error, onLoadMore, search, setSearch } = useApolloQuery({
+    labelField,
+    list,
+    searchFields,
+    state,
+    filter,
+    sort,
+  })
+
+  const [shouldShowErrors, setShouldShowErrors] = useState(false)
+  const validationMessages =
+    isRequired && state.value === null ? [`A ${list.singular} is required`] : []
+  const [lastSeenStateValue, setLastSeenStateValue] = useState(state.value)
+
+  if (state.value !== lastSeenStateValue) {
+    setLastSeenStateValue(state.value)
+    setSearch(state.value?.label ?? '')
+  }
+
+  // TODO: better error UI
+  // TODO: Handle permission errors
+  // (ie; user has permission to read this relationship field, but
+  // not the related list, or some items on the list)
+  if (error) return <span>Error</span>
+
+  const items: RelationshipValue[] = data?.items?.map(x => ({ ...x, built: false })) ?? []
+
+  if (
+    state.value !== null &&
+    (state.value.built || !items.some(item => item.id === state.value?.id))
+  ) {
+    items.push(state.value)
+  }
+
+  return (
+    <Combobox
+      {...props}
+      isRequired={isRequired}
+      items={items}
+      loadingState={loading || isLoading ? 'loading' : 'idle'}
+      errorMessage={
+        !!validationMessages.length && (shouldShowErrors || forceValidation)
+          ? validationMessages.join('. ')
+          : undefined
+      }
+      onBlur={() => {
+        setShouldShowErrors(true)
+      }}
+      onInputChange={input => {
+        setSearch(input)
+
+        // unset the selected value when the user clears the input
+        if (input === '') state.onChange(null)
+      }}
+      inputValue={search}
+      onLoadMore={onLoadMore}
+      selectedKey={state.value ? state.value.id.toString() : null}
+      onSelectionChange={key => {
+        const selectedItem = items.find(item => item.id.toString() === key) ?? null
+        state.onChange(selectedItem)
+        setSearch(selectedItem?.label ?? '')
+      }}
+      minWidth="alias.singleLineWidth"
+      width="auto"
+      UNSAFE_className={css({
+        // This should probably be addressed in @keystar/ui/combobox
+        // - the mobile variant should respect the `width` prop
+        '[role="button"]': { width: 'auto' },
+      })}
+    >
+      {item => <Item>{item.label || item.id}</Item>}
+    </Combobox>
+  )
+}