@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,255 @@
+import { useState } from 'react'
+
+import { ContextualHelp } from '@keystar/ui/contextual-help'
+import { Content } from '@keystar/ui/slots'
+import { NumberField } from '@keystar/ui/number-field'
+
+import { Heading, Text } from '@keystar/ui/typography'
+
+import type {
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+  SimpleFieldTypeInfo,
+} from '../../../../types'
+import { entriesTyped } from '../../../../lib/core/utils'
+
+// TODO: extract
+const TYPE_OPERATOR_MAP = {
+  equals: '=',
+  not: '≠',
+  gt: '>',
+  lt: '<',
+  gte: '≥',
+  lte: '≤',
+} as const
+
+type Value =
+  | { kind: 'create'; value: number | null }
+  | { kind: 'update'; initial: number | null; value: number | null }
+
+type Validation = {
+  min: number
+  max: number
+}
+
+function validate_(
+  value: Value,
+  validation: Validation,
+  isRequired: boolean,
+  label: string,
+  hasAutoIncrementDefault: boolean
+): string | undefined {
+  const { value: input, kind } = value
+  if (kind === 'create' && hasAutoIncrementDefault && input === null) return
+  if (kind === 'update' && value.initial === null && input === null) return
+  if (isRequired && input === null) return `${label} is required`
+  if (typeof input !== 'number') return
+  const v = input
+  if (!Number.isInteger(v)) return `${label} is not a valid integer`
+  if (validation.min !== undefined && v < validation.min)
+    return `${label} must be greater than or equal to ${validation.min}`
+  if (validation.max !== undefined && v > validation.max)
+    return `${label} must be less than or equal to ${validation.max}`
+}
+
+export function controller(
+  config: FieldControllerConfig<{
+    validation: Validation
+    defaultValue: number | null | 'autoincrement'
+  }>
+): FieldController<Value, number | null, SimpleFieldTypeInfo<'Int'>['inputs']['where']> & {
+  validation: Validation
+  hasAutoIncrementDefault: boolean
+} {
+  const validate = (value: Value, opts: { isRequired: boolean }) => {
+    return validate_(
+      value,
+      config.fieldMeta.validation,
+      opts.isRequired,
+      config.label,
+      config.fieldMeta.defaultValue === 'autoincrement'
+    )
+  }
+
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: config.fieldKey,
+    validation: config.fieldMeta.validation,
+    defaultValue: {
+      kind: 'create',
+      value:
+        config.fieldMeta.defaultValue === 'autoincrement' ? null : config.fieldMeta.defaultValue,
+    },
+    deserialize: data => ({
+      kind: 'update',
+      value: data[config.fieldKey],
+      initial: data[config.fieldKey],
+    }),
+    serialize: value => ({ [config.fieldKey]: value.value }),
+    hasAutoIncrementDefault: config.fieldMeta.defaultValue === 'autoincrement',
+    validate: (value, opts) => validate(value, opts) === undefined,
+    filter: {
+      Filter(props) {
+        const {
+          autoFocus,
+          context,
+          forceValidation,
+          typeLabel,
+          onChange,
+          type,
+          value,
+          ...otherProps
+        } = props
+        const [isDirty, setDirty] = useState(false)
+        if (type === 'empty' || type === 'not_empty') return null
+
+        const labelProps =
+          context === 'add' ? { label: config.label, description: typeLabel } : { label: typeLabel }
+
+        return (
+          <NumberField
+            {...otherProps}
+            {...labelProps}
+            autoFocus={autoFocus}
+            errorMessage={
+              (forceValidation || isDirty) &&
+              !validate({ kind: 'update', initial: null, value }, { isRequired: true })
+                ? 'Required'
+                : null
+            }
+            step={1}
+            width="auto"
+            onBlur={() => setDirty(true)}
+            onChange={x => onChange?.(!Number.isFinite(x) ? null : x)}
+            value={value ?? NaN}
+          />
+        )
+      },
+
+      graphql: ({ type, value }) => {
+        if (type === 'empty') return { [config.fieldKey]: { equals: null } }
+        if (type === 'not_empty') return { [config.fieldKey]: { not: { equals: null } } }
+        if (type === 'not') return { [config.fieldKey]: { not: { equals: value } } }
+        return { [config.fieldKey]: { [type]: value } }
+      },
+      parseGraphQL: value => {
+        return entriesTyped(value).flatMap(([type, value]) => {
+          if (type === 'equals' && value === null) {
+            return [{ type: 'empty', value: null }]
+          }
+          if (!value) return []
+          if (type === 'equals') return { type: 'equals', value }
+          if (type === 'not') {
+            if (value?.equals === null) return { type: 'not_empty', value: null }
+            if (value?.equals === undefined) return []
+            return { type: 'not', value: value.equals }
+          }
+          if (type === 'gt' || type === 'gte' || type === 'lt' || type === 'lte') {
+            return { type, value }
+          }
+          return []
+        })
+      },
+      Label({ label, type, value }) {
+        if (type === 'empty' || type === 'not_empty') return label.toLocaleLowerCase()
+        const operator = TYPE_OPERATOR_MAP[type as keyof typeof TYPE_OPERATOR_MAP]
+        return `${operator} ${value}`
+      },
+      types: {
+        equals: {
+          label: 'Is exactly',
+          initialValue: null,
+        },
+        not: {
+          label: 'Is not exactly',
+          initialValue: null,
+        },
+        gt: {
+          label: 'Is greater than',
+          initialValue: null,
+        },
+        lt: {
+          label: 'Is less than',
+          initialValue: null,
+        },
+        gte: {
+          label: 'Is greater than or equal to',
+          initialValue: null,
+        },
+        lte: {
+          label: 'Is less than or equal to',
+          initialValue: null,
+        },
+        empty: {
+          label: 'Is empty',
+          initialValue: null,
+        },
+        not_empty: {
+          label: 'Is not empty',
+          initialValue: null,
+        },
+      },
+    },
+  }
+}
+
+export function Field({
+  field,
+  value,
+  onChange,
+  autoFocus,
+  forceValidation,
+  isRequired,
+}: FieldProps<typeof controller>) {
+  const [isDirty, setDirty] = useState(false)
+  const isReadOnly = !onChange || field.hasAutoIncrementDefault
+
+  if (field.hasAutoIncrementDefault && value.kind === 'create') {
+    return (
+      <NumberField
+        autoFocus={autoFocus}
+        description={field.description}
+        label={field.label}
+        isReadOnly
+        contextualHelp={
+          <ContextualHelp>
+            <Heading>Auto increment</Heading>
+            <Content>
+              <Text>
+                This field is set to auto increment. It will default to the next available number.
+              </Text>
+            </Content>
+          </ContextualHelp>
+        }
+      />
+    )
+  }
+
+  const validate = (value: Value) => {
+    return validate_(
+      value,
+      field.validation,
+      isRequired,
+      field.label,
+      field.hasAutoIncrementDefault
+    )
+  }
+
+  return (
+    <NumberField
+      autoFocus={autoFocus}
+      description={field.description}
+      label={field.label}
+      errorMessage={(forceValidation || isDirty) && validate(value)}
+      isReadOnly={isReadOnly}
+      isRequired={isRequired}
+      width="alias.singleLineWidth"
+      onBlur={() => setDirty(true)}
+      onChange={x => onChange?.({ ...value, value: !Number.isFinite(x) ? null : x })}
+      value={value.value ?? NaN}
+    />
+  )
+}

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

@@ -0,0 +1,77 @@
+import { g } from '../../..'
+import {
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  fieldType,
+  type FieldTypeFunc,
+  type JSONValue,
+} from '../../../types'
+
+type FieldTypeInfo = {
+  item: JSONValue | null
+  inputs: {
+    where: never
+    create: JSONValue | undefined
+    update: JSONValue | undefined
+    uniqueWhere: never
+    orderBy: never
+  }
+  prisma: {
+    create: JSONValue | undefined
+    update: JSONValue | undefined
+  }
+}
+
+export type JsonFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  FieldTypeInfo
+> & {
+  defaultValue?: JSONValue
+  db?: { map?: string; extendPrismaSchema?: (field: string) => string }
+}
+
+export function json<ListTypeInfo extends BaseListTypeInfo>({
+  defaultValue = null,
+  ...config
+}: JsonFieldConfig<ListTypeInfo> = {}): FieldTypeFunc<ListTypeInfo> {
+  return meta => {
+    if ((config as any).isIndexed === 'unique') {
+      throw Error("isIndexed: 'unique' is not a supported option for field type json")
+    }
+
+    return fieldType({
+      kind: 'scalar',
+      mode: 'optional',
+      scalar: 'Json',
+      default:
+        defaultValue === null
+          ? undefined
+          : meta.provider === 'sqlite'
+            ? undefined
+            : {
+                kind: 'literal',
+                // TODO: waiting on https://github.com/prisma/prisma/issues/26571
+                //   input.create manages defaultValues anyway
+                value: JSON.stringify(defaultValue ?? null),
+              },
+      map: config.db?.map,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+    })({
+      ...config,
+      __ksTelemetryFieldTypeName: '@nixxie-cms/json',
+      input: {
+        create: {
+          arg: g.arg({ type: g.JSON }),
+          resolve(val) {
+            // TODO: redundant when https://github.com/prisma/prisma/issues/26571 is resolved
+            return val === undefined ? defaultValue : val
+          },
+        },
+        update: { arg: g.arg({ type: g.JSON }) },
+      },
+      output: g.field({ type: g.JSON }),
+      views: '@nixxie-cms/core/fields/types/json/views',
+      getAdminMeta: () => ({ defaultValue }),
+    })
+  }
+}

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

@@ -0,0 +1,76 @@
+import { css, tokenSchema } from '@keystar/ui/style'
+import { TextArea } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
+
+import type {
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+  JSONValue,
+} from '../../../../types'
+
+export const Field = (props: FieldProps<typeof controller>) => {
+  const { autoFocus, field, forceValidation, onChange, value } = props
+  const errorMessage = forceValidation ? 'Invalid JSON' : undefined
+
+  return (
+    <TextArea
+      autoFocus={autoFocus}
+      description={field.description}
+      errorMessage={errorMessage}
+      isReadOnly={onChange === undefined}
+      label={field.label}
+      onChange={onChange}
+      value={value}
+      UNSAFE_className={css({
+        textarea: {
+          fontSize: tokenSchema.typography.text.small.size,
+          fontFamily: tokenSchema.typography.fontFamily.code,
+        },
+      })}
+    />
+  )
+}
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value ? <Text>{JSON.stringify(value)}</Text> : null
+}
+
+type Config = FieldControllerConfig<{ defaultValue: JSONValue }>
+
+export function controller(config: Config): FieldController<string, string> {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue:
+      config.fieldMeta.defaultValue === null
+        ? ''
+        : JSON.stringify(config.fieldMeta.defaultValue, null, 2),
+    deserialize: data => {
+      const value = data[config.fieldKey]
+      // null is equivalent to Prisma.DbNull, and we show that as an empty input
+      if (value === null) return ''
+      return JSON.stringify(value, null, 2)
+    },
+    serialize: value => {
+      if (!value) return { [config.fieldKey]: null }
+      try {
+        return { [config.fieldKey]: JSON.parse(value) }
+      } catch (e) {
+        return { [config.fieldKey]: undefined }
+      }
+    },
+    validate: value => {
+      if (!value) return true
+      try {
+        JSON.parse(value)
+        return true
+      } catch (e) {
+        return false
+      }
+    },
+    graphqlSelection: config.fieldKey,
+  }
+}

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

@@ -0,0 +1,212 @@
+import { g } from '../../..'
+import { humanize } from '../../../lib/utils'
+import type { JSONValue } from '../../../types'
+import {
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  type FieldData,
+  fieldType,
+  type FieldTypeFunc,
+} from '../../../types'
+import { makeValidateHook } from '../../non-null-graphql'
+import type { controller } from './views'
+
+type FieldTypeInfo = {
+  item: JSONValue | null
+  inputs: {
+    where: never
+    create: JSONValue | undefined
+    update: JSONValue | undefined
+    uniqueWhere: never
+    orderBy: never
+  }
+  prisma: {
+    create: JSONValue | undefined
+    update: JSONValue | undefined
+  }
+}
+
+export type MultiselectFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  FieldTypeInfo
+> &
+  (
+    | {
+        /**
+         * 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?: readonly string[] | null
+      }
+    | {
+        options: readonly { label: string; value: number }[]
+        type: 'integer'
+        defaultValue?: readonly number[] | null
+      }
+  ) & {
+    ui?: {
+      displayMode?: 'checkboxes' | 'select'
+    }
+    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 multiselect<ListTypeInfo extends BaseListTypeInfo>(
+  config: MultiselectFieldConfig<ListTypeInfo>
+): FieldTypeFunc<ListTypeInfo> {
+  const { defaultValue: defaultValue_, ui: { displayMode = 'select', ...ui } = {} } = config
+
+  config.db ??= {}
+  config.db.isNullable ??= false // TODO: deprecated, remove in breaking change
+  const defaultValue = config.db.isNullable ? defaultValue_ : (defaultValue_ ?? []) // TODO: deprecated, remove in breaking change?
+
+  return meta => {
+    if ((config as any).isIndexed === 'unique') {
+      throw TypeError("isIndexed: 'unique' is not a supported option for field type multiselect")
+    }
+
+    const resolveCreate = <T extends string | number>(val: T[] | null | undefined): T[] | null => {
+      const resolved = resolveUpdate(val)
+      if (resolved === undefined) {
+        return defaultValue as T[]
+      }
+      return resolved
+    }
+
+    const resolveUpdate = <T extends string | number>(
+      val: T[] | null | undefined
+    ): T[] | null | undefined => {
+      return val
+    }
+
+    const transformedConfig = configToOptionsAndGraphQLType(config, meta)
+
+    const type = g.list(g.nonNull(transformedConfig.graphqlType))
+
+    const accepted = new Set(transformedConfig.options.map(x => x.value))
+    if (accepted.size !== transformedConfig.options.length) {
+      throw new Error(`${meta.listKey}.${meta.fieldKey} has duplicate options, this is not allowed`)
+    }
+
+    const { mode, validate } = makeValidateHook(
+      meta,
+      config,
+      ({ inputData, operation, addValidationError }) => {
+        if (operation === 'delete') return
+
+        const values: readonly (string | number)[] | null | undefined = inputData[meta.fieldKey] // resolvedData is JSON
+        if (values != null) {
+          for (const value of values) {
+            if (!accepted.has(value)) {
+              addValidationError(`'${value}' is not an accepted option`)
+            }
+          }
+          if (new Set(values).size !== values.length) {
+            addValidationError(`non-unique set of options selected`)
+          }
+        }
+      }
+    )
+
+    return fieldType({
+      kind: 'scalar',
+      scalar: 'Json',
+      mode,
+      map: config?.db?.map,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+      default:
+        meta.provider === 'sqlite'
+          ? undefined
+          : {
+              kind: 'literal',
+              // TODO: waiting on https://github.com/prisma/prisma/issues/26571
+              //   input.create manages defaultValues anyway
+              value: JSON.stringify(defaultValue ?? null),
+            },
+    })({
+      ...config,
+      ui,
+      __ksTelemetryFieldTypeName: '@nixxie-cms/multiselect',
+      hooks: {
+        ...config.hooks,
+        validate,
+      },
+      views: '@nixxie-cms/core/fields/types/multiselect/views',
+      getAdminMeta: (): Parameters<typeof controller>[0]['fieldMeta'] => ({
+        options: transformedConfig.options,
+        type: config.type ?? 'string',
+        displayMode: displayMode,
+        defaultValue: [],
+      }),
+      input: {
+        create: { arg: g.arg({ type }), resolve: resolveCreate },
+        update: { arg: g.arg({ type }), resolve: resolveUpdate },
+      },
+      output: g.field({
+        type: type,
+        resolve({ value }) {
+          return value as any
+        },
+      }),
+    })
+  }
+}
+
+function configToOptionsAndGraphQLType(
+  config: MultiselectFieldConfig<BaseListTypeInfo>,
+  meta: FieldData
+) {
+  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 {
+      graphqlType: g.Int,
+      options: config.options,
+    }
+  }
+
+  const options = config.options.map(option => {
+    if (typeof option === 'string') {
+      return {
+        label: humanize(option),
+        value: option,
+      }
+    }
+    return option
+  })
+
+  if (config.type === 'enum') {
+    const enumName = `${meta.listKey}${humanize(meta.fieldKey).replace(/ /g, '')}Type`
+    const graphqlType = g.enum({
+      name: enumName,
+      values: g.enumValues(options.map(x => x.value)),
+    })
+    return {
+      graphqlType,
+      options,
+    }
+  }
+  return {
+    graphqlType: g.String,
+    options,
+  }
+}