@nixxie-cms/core 1.0.0

package/src/fields/types/relationship/views/useApolloQuery.ts

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useState } from 'react'
+import isDeepEqual from 'fast-deep-equal'
+
+import type { ListMeta, ListSortDescriptor } from '../../../../types'
+import {
+  type TypedDocumentNode,
+  ApolloClient,
+  gql,
+  InMemoryCache,
+  useApolloClient,
+  useQuery,
+} from '../../../../admin-ui/apollo'
+import { useSearchFilter } from './useFilter'
+import type { RelationshipValue } from './types'
+
+function useDebouncedValue<T>(value: T, limitMs: number) {
+  const [debouncedValue, setDebouncedValue] = useState(() => value)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedValue(() => value)
+    }, limitMs)
+    return () => clearTimeout(timeout)
+  }, [value, limitMs])
+
+  return debouncedValue
+}
+
+export function useApolloQuery(args: {
+  labelField: string
+  list: ListMeta
+  searchFields: string[]
+  sort?: ListSortDescriptor<string> | null
+  filter?: Record<string, any> | null
+  state:
+    | { kind: 'many'; value: RelationshipValue[] }
+    | { kind: 'one'; value: RelationshipValue | null }
+}) {
+  const { labelField, list, searchFields, state } = args
+  const [search, setSearch] = useState(() => {
+    if (state.kind === 'one' && state.value?.label) return state.value?.label
+    return ''
+  })
+
+  const QUERY: TypedDocumentNode<
+    { items: { id: string; label: string | null }[]; count: number },
+    {
+      where: Record<string, any>
+      take: number
+      skip: number
+      orderBy: Record<string, any> | undefined
+    }
+  > = gql`
+    query RelationshipSelect($where: ${list.graphql.names.whereInputName}!, $take: Int!, $skip: Int!, $orderBy: [${list.graphql.names.listOrderName}!]) {
+      items: ${list.graphql.names.listQueryName}(where: $where, take: $take, skip: $skip, orderBy: $orderBy) {
+        id: id
+        label: ${labelField}
+      }
+      count: ${list.graphql.names.listQueryCountName}(where: $where)
+    }
+  `
+
+  const debouncedSearch = useDebouncedValue(search, 200)
+  const manipulatedSearch =
+    state.kind === 'one' && state.value?.label === debouncedSearch ? '' : debouncedSearch
+
+  const searchFilter = useSearchFilter(manipulatedSearch, list, searchFields)
+  const _where = {
+    OR: searchFilter,
+  }
+  const where = args.filter ? { AND: [_where, args.filter] } : _where
+
+  const orderBy = useMemo(() => {
+    return args.sort ? { [args.sort.field]: args.sort.direction.toLowerCase() } : undefined
+  }, [args.sort])
+
+  const link = useApolloClient().link
+  // we're using a local apollo client here because writing a global implementation of the typePolicies
+  // would require making assumptions about how pagination should work which won't always be right
+  const apolloClient = useMemo(
+    () =>
+      new ApolloClient({
+        link,
+        cache: new InMemoryCache({
+          typePolicies: {
+            Query: {
+              fields: {
+                [list.graphql.names.listQueryName]: {
+                  keyArgs: ['where'],
+                  merge: (existing: readonly unknown[], incoming: readonly unknown[], { args }) => {
+                    const merged = existing ? existing.slice() : []
+                    const { skip } = args!
+                    for (let i = 0; i < incoming.length; ++i) {
+                      merged[skip + i] = incoming[i]
+                    }
+                    return merged
+                  },
+                },
+              },
+            },
+          },
+        }),
+      }),
+    [link, list.graphql.names.listQueryName]
+  )
+
+  const initialItemsToLoad = Math.min(list.pageSize, 10)
+  const subsequentItemsToLoad = Math.min(list.pageSize, 50)
+  const { data, previousData, error, loading, fetchMore } = useQuery(QUERY, {
+    fetchPolicy: 'network-only',
+    variables: { where, take: initialItemsToLoad, skip: 0, orderBy },
+    client: apolloClient,
+  })
+
+  // we want to avoid fetching more again and `loading` from Apollo
+  // doesn't seem to become true when fetching more
+  const [lastFetchMore, setLastFetchMore] = useState<{
+    where: Record<string, any>
+    list: ListMeta
+    skip: number
+  } | null>(null)
+
+  const count = data?.count || 0
+  const onLoadMore = () => {
+    const skip = data?.items.length
+    if (
+      !loading &&
+      skip &&
+      data.items.length < count &&
+      (!isDeepEqual(lastFetchMore?.where, where) ||
+        lastFetchMore?.list !== list ||
+        lastFetchMore?.skip !== skip)
+    ) {
+      const QUERY: TypedDocumentNode<
+        { items: { id: string; label: string | null }[] },
+        {
+          where: Record<string, any>
+          take: number
+          skip: number
+          orderBy: Record<string, any> | undefined
+        }
+      > = gql`
+        query RelationshipSelectMore($where: ${list.graphql.names.whereInputName}!, $take: Int!, $skip: Int!, $orderBy: [${list.graphql.names.listOrderName}!]) {
+          items: ${list.graphql.names.listQueryName}(where: $where, take: $take, skip: $skip, orderBy: $orderBy) {
+            id
+            label: ${labelField}
+          }
+        }
+      `
+      setLastFetchMore({ list, skip, where })
+      fetchMore({
+        query: QUERY,
+        variables: {
+          where,
+          take: subsequentItemsToLoad,
+          skip,
+          orderBy,
+        },
+      })
+        .then(() => setLastFetchMore(null))
+        .catch(() => setLastFetchMore(null))
+    }
+  }
+
+  return {
+    data: loading ? previousData : data,
+    error,
+    loading,
+    loadingState: getLoadingState({ loading, search }),
+    search,
+    setSearch,
+    onLoadMore,
+  }
+}
+
+function getLoadingState(options: { loading: boolean; search: string }): LoadingState {
+  if (options.loading) {
+    if (options.search.length) return 'filtering'
+    return 'loading'
+  }
+
+  return 'idle'
+}
+
+type LoadingState = 'loading' | 'sorting' | 'loadingMore' | 'error' | 'idle' | 'filtering'

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

@@ -0,0 +1,109 @@
+import { useMemo } from 'react'
+import { useNixxie } from '../../../../admin-ui/context'
+
+import type { ListMeta } from '../../../../types'
+
+function isInt(x: string) {
+  return Number.isInteger(Number(x))
+}
+
+function isBigInt(x: string) {
+  try {
+    BigInt(x)
+    return true
+  } catch {
+    return true
+  }
+}
+
+// TODO: this is unfortunate, remove in breaking change?
+function isUuid(x: unknown) {
+  if (typeof x !== 'string') return
+  if (x.length !== 36) return
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(x)
+}
+
+export function useSearchFilter(value: string, list: ListMeta, searchFields: string[]) {
+  const { lists } = useNixxie()
+  return useMemo(() => {
+    const trimmedSearch = value.trim()
+    if (!trimmedSearch.length) return []
+
+    const conditions: Record<string, any>[] = []
+    const idField = list.fields.id.fieldMeta as { type: string; kind: string }
+
+    if (idField.type === 'String') {
+      // TODO: remove in breaking change?
+      if (idField.kind === 'uuid') {
+        if (isUuid(value)) {
+          conditions.push({ id: { equals: trimmedSearch } })
+        }
+      } else {
+        conditions.push({ id: { equals: trimmedSearch } })
+      }
+    } else if (idField.type === 'Int' && isInt(trimmedSearch)) {
+      conditions.push({ id: { equals: Number(trimmedSearch) } })
+    } else if (idField.type === 'BigInt' && isBigInt(trimmedSearch)) {
+      conditions.push({ id: { equals: trimmedSearch } })
+    }
+
+    for (const fieldKey of searchFields) {
+      const field = list.fields[fieldKey]
+
+      // @ts-expect-error TODO: fix fieldMeta type for relationship fields
+      if (field.fieldMeta?.refSearchFields) {
+        const {
+          // @ts-expect-error TODO: fix fieldMeta type for relationship fields
+          refListKey,
+          // @ts-expect-error TODO: fix fieldMeta type for relationship fields
+          refSearchFields,
+          // @ts-expect-error TODO: fix fieldMeta type for relationship fields
+          many = false,
+        } = field.fieldMeta
+        const refList = lists[refListKey]
+
+        for (const refFieldKey of refSearchFields) {
+          const refField = refList.fields[refFieldKey]
+          if (!refField.search) continue // WARNING: we dont support depth > 2
+          // @ts-expect-error TODO: fix fieldMeta type for relationship fields
+          if (refField.fieldMeta?.refSearchFields) continue // WARNING: we dont support depth > 2
+
+          if (many) {
+            conditions.push({
+              [fieldKey]: {
+                some: {
+                  [refFieldKey]: {
+                    contains: trimmedSearch,
+                    mode: refField.search === 'insensitive' ? 'insensitive' : undefined,
+                  },
+                },
+              },
+            })
+
+            continue
+          }
+
+          conditions.push({
+            [fieldKey]: {
+              [refFieldKey]: {
+                contains: trimmedSearch,
+                mode: refField.search === 'insensitive' ? 'insensitive' : undefined,
+              },
+            },
+          })
+        }
+
+        continue
+      }
+
+      conditions.push({
+        [field.key]: {
+          contains: trimmedSearch,
+          mode: field.search === 'insensitive' ? 'insensitive' : undefined,
+        },
+      })
+    }
+
+    return conditions
+  }, [value, list, searchFields])
+}

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

@@ -0,0 +1,226 @@
+import { g } from '../../..'
+import { humanize } from '../../../lib/utils'
+import type { SimpleFieldTypeInfo } from '../../../types'
+import {
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  type FieldTypeFunc,
+  fieldType,
+  orderDirectionEnum,
+} from '../../../types'
+import { filters } from '../../filters'
+import { defaultIsRequired, makeValidateHook } from '../../non-null-graphql'
+import type { controller } from './views'
+
+export type SelectFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  SimpleFieldTypeInfo<'String' | 'Int'>
+> &
+  (
+    | {
+        /**
+         * When a value is provided as just a string, it will be formatted in the same way
+         * as field labels are to create the label.
+         */
+        options: readonly ({ label: string; value: string } | string)[]
+        /**
+         * If `enum` is provided on SQLite, it will use an enum in GraphQL but a string in the database.
+         */
+        type?: 'string' | 'enum'
+        defaultValue?: string
+      }
+    | {
+        options: readonly { label: string; value: number }[]
+        type: 'integer'
+        defaultValue?: number
+      }
+  ) & {
+    ui?: {
+      displayMode?: 'select' | 'segmented-control' | 'radio'
+    }
+
+    validation?: {
+      /**
+       * @default false
+       */
+      isRequired?: boolean
+    }
+    isIndexed?: boolean | 'unique'
+    db?: {
+      isNullable?: boolean
+      map?: string
+      extendPrismaSchema?: (field: string) => string
+    }
+  }
+
+// these are the lowest and highest values for a signed 32-bit integer
+const MAX_INT = 2147483647
+const MIN_INT = -2147483648
+
+export function select<ListTypeInfo extends BaseListTypeInfo>(
+  config: SelectFieldConfig<ListTypeInfo>
+): FieldTypeFunc<ListTypeInfo> {
+  const { isIndexed, ui: { displayMode = 'select', ...ui } = {}, defaultValue, validation } = config
+
+  return meta => {
+    const options = config.options.map(option => {
+      if (typeof option === 'string') {
+        return {
+          label: humanize(option),
+          value: option,
+        }
+      }
+      return option
+    })
+
+    const accepted = new Set(options.map(x => x.value))
+    if (accepted.size !== options.length) {
+      throw new Error(`${meta.listKey}.${meta.fieldKey}: duplicate options, this is not allowed`)
+    }
+
+    const { mode, validate } = makeValidateHook(
+      meta,
+      config,
+      ({ resolvedData, operation, addValidationError }) => {
+        if (operation === 'delete') return
+
+        const value = resolvedData[meta.fieldKey]
+        if (value != null && !accepted.has(value)) {
+          addValidationError(`value is not an accepted option`)
+        }
+      }
+    )
+
+    const commonConfig = {
+      ...config,
+      mode,
+      ...defaultIsRequired({ ui }, validation?.isRequired ?? false),
+      hooks: {
+        ...config.hooks,
+        validate,
+      },
+      __ksTelemetryFieldTypeName: '@nixxie-cms/select',
+      views: '@nixxie-cms/core/fields/types/select/views',
+      getAdminMeta: (): Parameters<typeof controller>[0]['fieldMeta'] => ({
+        options,
+        type: config.type ?? 'string',
+        displayMode: displayMode,
+        defaultValue: defaultValue ?? null,
+      }),
+    }
+
+    const commonDbFieldConfig = {
+      mode,
+      index: isIndexed === true ? 'index' : isIndexed || undefined,
+      default:
+        defaultValue === undefined
+          ? undefined
+          : { kind: 'literal' as const, value: defaultValue as any },
+      map: config.db?.map,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+    } as const
+
+    const resolveCreate = <T extends string | number>(val: T | null | undefined): T | null => {
+      if (val === undefined) {
+        return (defaultValue as T | undefined) ?? null
+      }
+      return val
+    }
+
+    if (config.type === 'integer') {
+      if (
+        config.options.some(
+          ({ value }) => !Number.isInteger(value) || value > MAX_INT || value < MIN_INT
+        )
+      ) {
+        throw new Error(
+          `${meta.listKey}.${meta.fieldKey} specifies integer values that are outside the range of a 32-bit signed integer`
+        )
+      }
+      return fieldType({
+        kind: 'scalar',
+        scalar: 'Int',
+        ...commonDbFieldConfig,
+      })({
+        ...commonConfig,
+        input: {
+          uniqueWhere: isIndexed === 'unique' ? { arg: g.arg({ type: g.Int }) } : undefined,
+          where: {
+            arg: g.arg({ type: filters[meta.provider].Int[mode] }),
+            resolve: mode === 'required' ? undefined : filters.resolveCommon,
+          },
+          create: {
+            arg: g.arg({
+              type: g.Int,
+              defaultValue: typeof defaultValue === 'number' ? defaultValue : undefined,
+            }),
+            resolve: resolveCreate,
+          },
+          update: { arg: g.arg({ type: g.Int }) },
+          orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+        },
+        output: g.field({ type: g.Int }),
+      })
+    }
+
+    if (config.type === 'enum') {
+      const enumName = `${meta.listKey}${humanize(meta.fieldKey).replace(/ /g, '')}Type`
+      const enumValues = options.map(x => `${x.value}`)
+
+      const graphQLType = g.enum({
+        name: enumName,
+        values: g.enumValues(enumValues),
+      })
+      return fieldType(
+        meta.provider === 'sqlite'
+          ? { kind: 'scalar', scalar: 'String', ...commonDbFieldConfig }
+          : {
+              kind: 'enum',
+              values: enumValues,
+              name: enumName,
+              ...commonDbFieldConfig,
+            }
+      )({
+        ...commonConfig,
+        input: {
+          uniqueWhere: isIndexed === 'unique' ? { arg: g.arg({ type: graphQLType }) } : undefined,
+          where: {
+            arg: g.arg({ type: filters[meta.provider].enum(graphQLType).optional }),
+            resolve: mode === 'required' ? undefined : filters.resolveCommon,
+          },
+          create: {
+            arg: g.arg({
+              type: graphQLType,
+              defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined,
+            }),
+            resolve: resolveCreate,
+          },
+          update: { arg: g.arg({ type: graphQLType }) },
+          orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+        },
+        output: g.field({ type: graphQLType }),
+      })
+    }
+
+    return fieldType({ kind: 'scalar', scalar: 'String', ...commonDbFieldConfig })({
+      ...commonConfig,
+      input: {
+        uniqueWhere: isIndexed === 'unique' ? { arg: g.arg({ type: g.String }) } : undefined,
+        where: {
+          arg: g.arg({ type: filters[meta.provider].String[mode] }),
+          resolve: mode === 'required' ? undefined : filters.resolveString,
+        },
+        create: {
+          arg: g.arg({
+            type: g.String,
+            defaultValue: typeof defaultValue === 'string' ? defaultValue : undefined,
+          }),
+          resolve: resolveCreate,
+        },
+        update: { arg: g.arg({ type: g.String }) },
+        orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+      },
+      output: g.field({ type: g.String }),
+    })
+  }
+}

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

@@ -0,0 +1,83 @@
+import { useField } from '@react-aria/label'
+
+import { type ActionGroupProps, ActionGroup } from '@keystar/ui/action-group'
+import { type FieldProps, FieldPrimitive } from '@keystar/ui/field'
+import { TextField } from '@keystar/ui/text-field'
+
+type Key = number | string // React.Key now includes bigint, which isn't supported by @react-aria
+
+type SegmentedControlProps<T> = FieldProps &
+  Pick<ActionGroupProps<T>, 'children' | 'items'> & {
+    value: Key | null
+    onChange: (value: Key) => void
+    /** The `textValue` is used to display the selected item label in read-only mode. */
+    textValue?: string
+  }
+
+export function SegmentedControl<T>(props: SegmentedControlProps<T>) {
+  const {
+    children,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    label,
+    description,
+    errorMessage,
+    value,
+    items,
+    onChange,
+    textValue,
+    ...otherProps
+  } = props
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField(props)
+  const selectedKeys = value ? [value] : []
+
+  // The `ActionGroup` isn’t really designed for use within forms, so we need to
+  // handle read-only mode. There's probably a better solution but this will at
+  // least be accessible.
+  if (isReadOnly) {
+    return (
+      <TextField
+        description={description}
+        errorMessage={errorMessage}
+        isReadOnly={isReadOnly}
+        isRequired={isRequired}
+        label={label}
+        value={textValue}
+      />
+    )
+  }
+
+  return (
+    <FieldPrimitive
+      description={description}
+      descriptionProps={descriptionProps}
+      errorMessage={errorMessage}
+      errorMessageProps={errorMessageProps}
+      isRequired={isRequired}
+      label={label}
+      labelElementType="span"
+      labelProps={labelProps}
+      {...otherProps}
+    >
+      <ActionGroup
+        {...fieldProps}
+        density="compact"
+        disallowEmptySelection
+        isDisabled={isDisabled}
+        overflowMode="collapse"
+        selectionMode="single"
+        items={items}
+        onSelectionChange={selection => {
+          if (selection === 'all') return // irrelevant for single-select
+          const next = selection.values().next().value
+          if (!next) return
+          onChange(next)
+        }}
+        selectedKeys={selectedKeys}
+      >
+        {children}
+      </ActionGroup>
+    </FieldPrimitive>
+  )
+}