@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,318 @@
+import { useListFormatter } from '@react-aria/i18n'
+import { type Key, useMemo, useState } from 'react'
+
+import { FieldLabel } from '@keystar/ui/field'
+import { VStack } from '@keystar/ui/layout'
+import { ListView } from '@keystar/ui/list-view'
+import { Item, Picker } from '@keystar/ui/picker'
+import { Radio, RadioGroup } from '@keystar/ui/radio'
+import { tokenSchema } from '@keystar/ui/style'
+import { Text } from '@keystar/ui/typography'
+
+import { NullableFieldWrapper } from '../../../../admin-ui/components'
+import { SegmentedControl } from './SegmentedControl'
+
+import { entriesTyped } from '../../../../lib/core/utils'
+import type {
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+  SimpleFieldTypeInfo,
+} from '../../../../types'
+
+export function Field(props: FieldProps<typeof controller>) {
+  const { autoFocus, field, forceValidation, onChange, value, isRequired } = props
+  const [isDirty, setDirty] = useState(false)
+  const [preNullValue, setPreNullValue] = useState(
+    value.value || (value.kind === 'update' ? value.initial : null)
+  )
+  const longestLabelLength = useMemo(() => {
+    return field.options.reduce((a, item) => Math.max(a, item.label.length), 0)
+  }, [field.options])
+
+  const selectedKey = value.value?.value || preNullValue?.value || null
+  const isNullable = !isRequired
+  const isNull = isNullable && value.value?.value == null
+  const isInvalid = !validate(value, isRequired)
+  const isReadOnly = onChange == null
+  const errorMessage =
+    isInvalid && (isDirty || forceValidation) ? `${field.label} is required.` : undefined
+
+  const onSelectionChange = (key: Key | null) => {
+    if (!onChange) return
+
+    // FIXME: the value should be primitive, not an object. i think this is an
+    // artefact from react-select’s API
+    const newValue: Value['value'] = field.options.find(opt => opt.value === key) ?? null
+
+    // allow clearing the value if the field is not required
+    // if (!field.isRequired && key === selectedKey) {
+    //   newValue = null
+    // }
+
+    onChange({ ...value, value: newValue })
+    setDirty(true)
+  }
+  // TODO: this would benefit from a similar treatment to the text field's
+  // `{ kind: 'null', prev: string }` solution
+  const onNullChange = (isChecked: boolean) => {
+    if (!onChange) return
+
+    if (isChecked) {
+      onChange({ ...value, value: null })
+      setPreNullValue(value.value)
+    } else {
+      onChange({ ...value, value: preNullValue || field.options[0] })
+    }
+    setDirty(true)
+  }
+
+  const fieldElement = (() => {
+    switch (field.displayMode) {
+      case 'segmented-control':
+        return (
+          <SegmentedControl
+            label={field.label}
+            description={field.description}
+            errorMessage={errorMessage}
+            isDisabled={isNull}
+            isReadOnly={isReadOnly}
+            isRequired={isRequired}
+            items={field.options}
+            onChange={onSelectionChange}
+            value={selectedKey}
+            textValue={field.options.find(item => item.value === selectedKey)?.label || ''}
+          >
+            {item => <Item key={item.value}>{item.label}</Item>}
+          </SegmentedControl>
+        )
+      case 'radio':
+        return (
+          <RadioGroup
+            label={field.label}
+            description={field.description}
+            errorMessage={errorMessage}
+            isDisabled={isNull}
+            isReadOnly={isReadOnly}
+            isRequired={isRequired}
+            onChange={onSelectionChange}
+            // maintain the previous value when set to null in aid of continuity
+            // for the user. it will be cleared when the item is saved
+            value={value.value?.value ?? preNullValue?.value}
+          >
+            {field.options.map(item => (
+              <Radio key={item.value} value={item.value}>
+                {item.label}
+              </Radio>
+            ))}
+          </RadioGroup>
+        )
+      default:
+        return (
+          <Picker
+            autoFocus={autoFocus}
+            label={field.label}
+            description={field.description}
+            errorMessage={errorMessage}
+            isDisabled={isNull}
+            isReadOnly={isReadOnly}
+            isRequired={isRequired}
+            items={field.options}
+            onSelectionChange={onSelectionChange}
+            selectedKey={selectedKey}
+            flex={{ mobile: true, desktop: 'initial' }}
+            UNSAFE_style={{
+              fontSize: tokenSchema.typography.text.regular.size,
+              width: `clamp(${tokenSchema.size.alias.singleLineWidth}, calc(${longestLabelLength}ex + ${tokenSchema.size.icon.regular}), 100%)`,
+            }}
+          >
+            {item => <Item key={item.value}>{item.label}</Item>}
+          </Picker>
+        )
+    }
+  })()
+
+  return (
+    <NullableFieldWrapper
+      isAllowed={!isRequired}
+      autoFocus={isNull && autoFocus}
+      label={field.label}
+      isReadOnly={isReadOnly}
+      isNull={isNull}
+      onChange={onNullChange}
+    >
+      {fieldElement}
+    </NullableFieldWrapper>
+  )
+}
+
+export const Cell: CellComponent<typeof controller> = ({ value, field }) => {
+  const label = field.options.find(x => x.value === value)?.label
+  return <Text>{label}</Text>
+}
+
+export type AdminSelectFieldMeta = {
+  options: readonly { label: string; value: string | number }[]
+  type: 'string' | 'integer' | 'enum'
+  displayMode: 'select' | 'segmented-control' | 'radio'
+  defaultValue: string | number | null
+}
+
+type Config = FieldControllerConfig<AdminSelectFieldMeta>
+type Option = { label: string; value: string }
+type Value =
+  | { value: Option | null; kind: 'create' }
+  | { value: Option | null; initial: Option | null; kind: 'update' }
+
+function validate(value: Value, isRequired: boolean) {
+  if (isRequired) {
+    // if you got null initially on the update screen, we want to allow saving
+    // since the user probably doesn't have read access control
+    if (value.kind === 'update' && value.initial === null) return true
+    return value.value !== null
+  }
+  return true
+}
+
+const FILTER_TYPES = {
+  matches: {
+    label: 'Matches',
+    initialValue: [],
+  },
+  not_matches: {
+    label: 'Does not match',
+    initialValue: [],
+  },
+}
+
+export function controller(config: Config): FieldController<
+  Value,
+  string[],
+  SimpleFieldTypeInfo<'String'>['inputs']['where']
+> & {
+  options: Option[]
+  type: 'string' | 'integer' | 'enum'
+  displayMode: 'select' | 'segmented-control' | 'radio'
+} {
+  const optionsWithStringValues = config.fieldMeta.options.map(x => ({
+    label: x.label,
+    value: x.value.toString(),
+  }))
+
+  // Transform from string value to type appropriate value
+  const t = (v: string | null) =>
+    v === null ? null : config.fieldMeta.type === 'integer' ? parseInt(v) : v
+
+  const stringifiedDefault = config.fieldMeta.defaultValue?.toString()
+
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: config.fieldKey,
+    defaultValue: {
+      kind: 'create',
+      value: optionsWithStringValues.find(x => x.value === stringifiedDefault) ?? null,
+    },
+    type: config.fieldMeta.type,
+    displayMode: config.fieldMeta.displayMode,
+    options: optionsWithStringValues,
+    deserialize: data => {
+      for (const option of config.fieldMeta.options) {
+        if (option.value === data[config.fieldKey]) {
+          const stringifiedOption = { label: option.label, value: option.value.toString() }
+          return {
+            kind: 'update',
+            initial: stringifiedOption,
+            value: stringifiedOption,
+          }
+        }
+      }
+      return { kind: 'update', initial: null, value: null }
+    },
+    serialize: value => ({ [config.fieldKey]: t(value.value?.value ?? null) }),
+    validate: (value, opts) => validate(value, opts.isRequired),
+    filter: {
+      Filter(props) {
+        const { autoFocus, context, typeLabel, onChange, value, type, ...otherProps } = props
+
+        const densityLevels = ['spacious', 'regular', 'compact'] as const
+        const density =
+          densityLevels[Math.min(Math.floor((optionsWithStringValues.length - 1) / 3), 2)]
+        const listView = (
+          <ListView
+            aria-label={typeLabel}
+            density={density}
+            items={optionsWithStringValues}
+            flex
+            minHeight={0}
+            maxHeight="100%"
+            selectionMode="multiple"
+            onSelectionChange={selection => {
+              if (selection === 'all') return // irrelevant for this case
+
+              onChange([...selection].filter(x => typeof x === 'string'))
+            }}
+            selectedKeys={value}
+            {...otherProps}
+          >
+            {item => <Item key={item.value}>{item.label}</Item>}
+          </ListView>
+        )
+
+        if (context === 'edit') {
+          return (
+            <VStack gap="medium" flex minHeight={0} maxHeight="100%">
+              {/* intentionally not linked: the `ListView` has an explicit "aria-label" to avoid awkwardness with IDs and forked render */}
+              <FieldLabel elementType="span">{typeLabel}</FieldLabel>
+              {listView}
+            </VStack>
+          )
+        }
+
+        return listView
+      },
+      graphql: ({ type, value: options }) => ({
+        [config.fieldKey]: {
+          [type === 'not_matches' ? 'notIn' : 'in']: options.map(x => t(x)),
+        },
+      }),
+      parseGraphQL(value) {
+        return entriesTyped(value).flatMap(([type, value]) => {
+          if (type === 'equals' && value != null) {
+            return { type: 'matches', value: [value] }
+          }
+          if (type === 'notIn' || type === 'in') {
+            if (!value) return []
+            return {
+              type: type === 'notIn' ? 'not_matches' : 'matches',
+              value: value.filter(x => x != null),
+            }
+          }
+          return []
+        })
+      },
+      Label({ type, value }) {
+        const listFormatter = useListFormatter({
+          style: 'short',
+          type: 'disjunction',
+        })
+
+        if (value.length === 0) {
+          return type === 'not_matches' ? `is set` : `is not set`
+        }
+        const values = new Set(value)
+        const labels = optionsWithStringValues
+          .filter(opt => values.has(opt.value))
+          .map(i => i.label)
+        const prefix = type === 'not_matches' ? `is not` : `is`
+
+        if (value.length === 1) return `${prefix} ${labels[0]}`
+        if (value.length === 2) return `${prefix} ${listFormatter.format(labels)}`
+        return `${prefix} ${listFormatter.format([labels[0], `${value.length - 1} more`])}`
+      },
+      types: FILTER_TYPES,
+    },
+  }
+}

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

@@ -0,0 +1,207 @@
+import type { SimpleFieldTypeInfo } from '../../../types'
+import {
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  type FieldTypeFunc,
+  fieldType,
+  orderDirectionEnum,
+} from '../../../types'
+import { g } from '../../..'
+import { makeValidateHook, defaultIsRequired } from '../../non-null-graphql'
+import { filters } from '../../filters'
+
+export type TextFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  SimpleFieldTypeInfo<'String'>
+> & {
+  isIndexed?: boolean | 'unique'
+  ui?: {
+    displayMode?: 'input' | 'textarea'
+  }
+  validation?: {
+    /**
+     * Makes the field disallow null values and require a string at least 1 character long
+     */
+    isRequired?: boolean
+    match?: { regex: RegExp; explanation?: string }
+    length?: { min?: number; max?: number }
+  }
+  defaultValue?: string | null
+  db?: {
+    isNullable?: boolean
+    map?: string
+    extendPrismaSchema?: (field: string) => string
+    /**
+     * The underlying database type.
+     * Only some of the types are supported on PostgreSQL and MySQL.
+     * The native type is not customisable on SQLite.
+     * See Prisma's documentation for more information about the supported types.
+     *
+     * https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string
+     */
+    nativeType?:
+      | 'Text' // PostgreSQL and MySQL
+      | `VarChar(${number})`
+      | `Char(${number})`
+      | `Bit(${number})` // PostgreSQL
+      | 'VarBit'
+      | 'Uuid'
+      | 'Xml'
+      | 'Inet'
+      | 'Citext'
+      | 'TinyText' // MySQL
+      | 'MediumText'
+      | 'LargeText'
+  }
+}
+
+export type TextFieldMeta = {
+  displayMode: 'input' | 'textarea'
+  shouldUseModeInsensitive: boolean
+  isNullable: boolean
+  validation: {
+    match: { regex: { source: string; flags: string }; explanation: string | null } | null
+    length: { min: number | null; max: number | null }
+  }
+  defaultValue: string | null
+}
+
+export function text<ListTypeInfo extends BaseListTypeInfo>(
+  config: TextFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  const { defaultValue: defaultValue_, isIndexed, validation = {} } = config
+
+  config.db ??= {}
+  config.db.isNullable ??= false // TODO: sigh, remove in breaking change?
+
+  const isRequired = validation.isRequired ?? false
+  const match = validation.match
+  const min = validation.isRequired ? (validation.length?.min ?? 1) : validation.length?.min
+  const max = validation.length?.max
+
+  return meta => {
+    if (min !== undefined && (!Number.isInteger(min) || min < 0)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.length.min: ${min} but it must be a positive integer`
+      )
+    }
+    if (max !== undefined && (!Number.isInteger(max) || max < 0)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.length.max: ${max} but it must be a positive integer`
+      )
+    }
+    if (isRequired && min !== undefined && min === 0) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.isRequired: true and validation.length.min: 0, this is not allowed because validation.isRequired implies at least a min length of 1`
+      )
+    }
+    if (isRequired && max !== undefined && max === 0) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.isRequired: true and validation.length.max: 0, this is not allowed because validation.isRequired implies at least a max length of 1`
+      )
+    }
+    if (min !== undefined && max !== undefined && min > max) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies a validation.length.max that is less than the validation.length.min, and therefore has no valid options`
+      )
+    }
+
+    // defaulted to false as a zero length string is preferred to null
+    const isNullable = config.db?.isNullable ?? false
+    const defaultValue = isNullable ? (defaultValue_ ?? null) : (defaultValue_ ?? '')
+    const hasAdditionalValidation = match || min !== undefined || max !== undefined
+    const { mode, validate } = makeValidateHook(
+      meta,
+      config,
+      hasAdditionalValidation
+        ? ({ resolvedData, operation, addValidationError }) => {
+            if (operation === 'delete') return
+
+            const value = resolvedData[meta.fieldKey]
+            if (value != null) {
+              if (min !== undefined && value.length < min) {
+                if (min === 1) {
+                  addValidationError(`value must not be empty`)
+                } else {
+                  addValidationError(`value must be at least ${min} characters long`)
+                }
+              }
+              if (max !== undefined && value.length > max) {
+                addValidationError(`value must be no longer than ${max} characters`)
+              }
+              if (match && !match.regex.test(value)) {
+                addValidationError(match.explanation ?? `value must match ${match.regex}`)
+              }
+            }
+          }
+        : undefined
+    )
+
+    return fieldType({
+      kind: 'scalar',
+      mode,
+      scalar: 'String',
+      default: defaultValue === null ? undefined : { kind: 'literal', value: defaultValue },
+      index: isIndexed === true ? 'index' : isIndexed || undefined,
+      map: config.db?.map,
+      nativeType: config.db?.nativeType,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+    })({
+      ...config,
+      ...defaultIsRequired(config, isRequired),
+      hooks: {
+        ...config.hooks,
+        validate,
+      },
+      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(val) {
+            if (val !== undefined) return val
+            return defaultValue ?? null
+          },
+        },
+        update: { arg: g.arg({ type: g.String }) },
+        orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+      },
+      output: g.field({
+        type: g.String,
+      }),
+      __ksTelemetryFieldTypeName: '@nixxie-cms/text',
+      views: '@nixxie-cms/core/fields/types/text/views',
+      getAdminMeta(): TextFieldMeta {
+        return {
+          displayMode: config.ui?.displayMode ?? 'input',
+          shouldUseModeInsensitive: meta.provider === 'postgresql',
+          validation: {
+            match: match
+              ? {
+                  regex: {
+                    source: match.regex.source,
+                    flags: match.regex.flags,
+                  },
+                  explanation: match.explanation ?? `value must match ${match.regex}`,
+                }
+              : null,
+            length: {
+              max: max ?? null,
+              min: min ?? null,
+            },
+          },
+          defaultValue: defaultValue ?? (isNullable ? null : ''),
+          isNullable,
+        }
+      },
+    })
+  }
+}