@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,190 @@
+import { TextField } from '@keystar/ui/text-field'
+import { useState } from 'react'
+
+import type { TextFieldMeta } from '..'
+import { NullableFieldWrapper } from '../../../../admin-ui/components'
+import { entriesTyped } from '../../../../lib/core/utils'
+import type {
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+  SimpleFieldTypeInfo,
+} from '../../../../types'
+
+export function Field(props: FieldProps<typeof controller>) {
+  const { autoFocus, field, forceValidation, onChange, value, isRequired } = props
+
+  const [shouldShowErrors, setShouldShowErrors] = useState(false)
+  const validationMessages = validate(value, props.isRequired, field.label)
+
+  const isReadOnly = onChange == null
+  const isNull = value.inner.kind === 'null'
+
+  return (
+    <NullableFieldWrapper
+      isAllowed={field.isNullable}
+      autoFocus={isNull && autoFocus}
+      label={field.label}
+      isReadOnly={isReadOnly}
+      isNull={isNull}
+      onChange={() => {
+        if (!onChange) return
+
+        const inner =
+          value.inner.kind === 'value'
+            ? ({ kind: 'null', prev: value.inner.value } as const)
+            : ({ kind: 'value', value: value.inner.prev } as const)
+
+        onChange({ ...value, inner })
+      }}
+    >
+      <TextField
+        autoFocus={autoFocus}
+        description={field.description}
+        label={field.label}
+        errorMessage={
+          !!validationMessages.length && (shouldShowErrors || forceValidation)
+            ? validationMessages.join('. ')
+            : undefined
+        }
+        isDisabled={isNull}
+        isReadOnly={isReadOnly}
+        isRequired={isRequired}
+        onBlur={() => {
+          setShouldShowErrors(true)
+        }}
+        onChange={textValue => {
+          if (!onChange) return
+          onChange({
+            ...value,
+            inner: {
+              kind: 'value',
+              value: textValue,
+            },
+          })
+        }}
+        // 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.inner.kind === 'value' ? value.inner.value : value.inner.prev}
+      />
+    </NullableFieldWrapper>
+  )
+}
+
+type Config = FieldControllerConfig<TextFieldMeta>
+
+function validate(value: TextValue, isRequired: boolean, fieldLabel: string): string[] {
+  // if the value is the same as the initial for an update, we don't want to block saving
+  // since we're not gonna send it anyway if it's the same
+  // and going "fix this thing that is unrelated to the thing you're doing" is bad
+  // and also bc it could be null bc of read access control
+  if (
+    value.kind === 'update' &&
+    ((value.initial.kind === 'null' && value.inner.kind === 'null') ||
+      (value.initial.kind === 'value' &&
+        value.inner.kind === 'value' &&
+        value.inner.value === value.initial.value))
+  ) {
+    return []
+  }
+
+  if (value.inner.kind === 'null') {
+    if (isRequired) return [`${fieldLabel} is required`]
+    return []
+  }
+  return []
+}
+
+type InnerTextValue = { kind: 'null'; prev: string } | { kind: 'value'; value: string }
+type TextValue =
+  | { kind: 'create'; inner: InnerTextValue }
+  | { kind: 'update'; inner: InnerTextValue; initial: InnerTextValue }
+
+function deserializeTextValue(value: string | null): InnerTextValue {
+  if (value === null) return { kind: 'null', prev: '' }
+  return { kind: 'value', value }
+}
+
+export function controller(config: Config): FieldController<
+  TextValue,
+  string,
+  SimpleFieldTypeInfo<'String'>['inputs']['where']
+> & {
+  isNullable: boolean
+} {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: { kind: 'create', inner: deserializeTextValue(config.fieldMeta.defaultValue) },
+    isNullable: config.fieldMeta.isNullable,
+    deserialize: data => {
+      const inner = deserializeTextValue(data[config.fieldKey])
+      return { kind: 'update', inner, initial: inner }
+    },
+    serialize: value => ({
+      [config.fieldKey]: value.inner.kind === 'null' ? null : value.inner.value,
+    }),
+
+    validate: (val, opts) => validate(val, opts.isRequired, config.label).length === 0,
+    graphqlSelection: config.fieldKey,
+    filter: {
+      Filter(props) {
+        const { autoFocus, context, typeLabel, onChange, type, value, ...otherProps } = props
+
+        const labelProps =
+          context === 'add' ? { label: config.label, description: typeLabel } : { label: typeLabel }
+
+        // NOTE: "type" is a valid attribute for an input element, however the
+        // prop represents a filter type in this context e.g. "contains_i", so
+        // we're filtering it out of the spread.
+        // TODO: more consideration is needed for the filter API, once
+        // requirements are better understood.
+        return (
+          <TextField
+            {...otherProps}
+            {...labelProps}
+            autoFocus={autoFocus}
+            onChange={onChange}
+            value={value}
+          />
+        )
+      },
+      Label({ label, value }) {
+        const trimmedLabel = label.toLowerCase().replace(' exactly', '')
+        return `${trimmedLabel} "${value}"`
+      },
+
+      graphql: ({ type, value }) => {
+        const isNot = type.startsWith('not_')
+        const filter = { equals: value }
+        return {
+          [config.fieldKey]: {
+            ...(isNot ? { not: filter } : filter),
+          },
+        }
+      },
+      parseGraphQL: value => {
+        return entriesTyped(value).flatMap(([type, _value]) => {
+          if (!_value) return []
+          if (type === 'equals') return { type: 'is_i', value: _value as string }
+          if (type === 'not') {
+            const notValue = _value as any
+            if (notValue?.equals) return { type: 'not_i', value: notValue.equals as string }
+          }
+          return []
+        })
+      },
+      types: {
+        is_i: {
+          label: 'Is exactly',
+          initialValue: '',
+        },
+        not_i: {
+          label: 'Is not exactly',
+          initialValue: '',
+        },
+      },
+    },
+  }
+}

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

@@ -0,0 +1,194 @@
+import type {
+  GArg,
+  GInputObjectType,
+  GList,
+  GNonNull,
+  InferValueFromInputType,
+} from '@graphql-ts/schema'
+
+import { g } from '../../..'
+import {
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  type FieldTypeFunc,
+  type SimpleFieldTypeInfo,
+  fieldType,
+  orderDirectionEnum,
+} from '../../../types'
+import { filters } from '../../filters'
+import { defaultIsRequired, makeValidateHook } from '../../non-null-graphql'
+import type { CalendarDayFieldMeta } from './views'
+
+export type CalendarDayFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  SimpleFieldTypeInfo<'String' | 'DateTime'>
+> & {
+  isIndexed?: boolean | 'unique'
+  validation?: {
+    isRequired?: boolean
+  }
+  defaultValue?: string
+  db?: {
+    isNullable?: boolean
+    extendPrismaSchema?: (field: string) => string
+    map?: string
+  }
+}
+
+export function calendarDay<ListTypeInfo extends BaseListTypeInfo>(
+  config: CalendarDayFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  const { isIndexed, validation, defaultValue } = config
+  return meta => {
+    if (typeof defaultValue === 'string') {
+      try {
+        g.CalendarDay.parseValue(defaultValue)
+      } catch (err) {
+        throw new Error(
+          `The calendarDay field at ${meta.listKey}.${meta.fieldKey} specifies defaultValue: ${defaultValue} but values must be provided as a full-date ISO8601 string such as 1970-01-01`
+        )
+      }
+    }
+
+    const usesNativeDateType = meta.provider === 'postgresql' || meta.provider === 'mysql'
+
+    function resolveInput(value: string | null | undefined) {
+      if (meta.provider === 'sqlite' || value == null) {
+        return value
+      }
+      return dateStringToDateObjectInUTC(value)
+    }
+
+    const { mode, validate } = makeValidateHook(meta, config)
+    const commonResolveFilter = mode === 'optional' ? filters.resolveCommon : <T>(x: T) => x
+
+    return fieldType({
+      kind: 'scalar',
+      mode,
+      scalar: usesNativeDateType ? 'DateTime' : 'String',
+      index: isIndexed === true ? 'index' : isIndexed || undefined,
+      default:
+        typeof defaultValue === 'string'
+          ? {
+              kind: 'literal',
+              value: defaultValue,
+            }
+          : undefined,
+      map: config.db?.map,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+      nativeType: usesNativeDateType ? 'Date' : undefined,
+    })({
+      ...config,
+      ...defaultIsRequired(config, validation?.isRequired ?? false),
+      hooks: {
+        ...config.hooks,
+        validate,
+      },
+      input: {
+        uniqueWhere:
+          isIndexed === 'unique'
+            ? {
+                arg: g.arg({ type: g.CalendarDay }),
+                resolve: usesNativeDateType ? dateStringToDateObjectInUTC : undefined,
+              }
+            : undefined,
+        where: {
+          arg: g.arg({
+            type: mode === 'optional' ? CalendarDayNullableFilter : CalendarDayFilter,
+          }),
+          resolve: usesNativeDateType
+            ? value => commonResolveFilter(transformFilterDateStringsToDateObjects(value))
+            : commonResolveFilter,
+        },
+        create: {
+          arg: g.arg({
+            type: g.CalendarDay,
+            defaultValue,
+          }),
+          resolve(val: string | null | undefined) {
+            if (val === undefined) {
+              val = defaultValue ?? null
+            }
+            return resolveInput(val)
+          },
+        },
+        update: { arg: g.arg({ type: g.CalendarDay }), resolve: resolveInput },
+        orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+      },
+      output: g.field({
+        type: g.CalendarDay,
+        resolve({ value }) {
+          if (value instanceof Date) {
+            return value.toISOString().slice(0, 10)
+          }
+          return value
+        },
+      }),
+      __ksTelemetryFieldTypeName: '@nixxie-cms/calendarDay',
+      views: '@nixxie-cms/core/fields/types/calendarDay/views',
+      getAdminMeta(): CalendarDayFieldMeta {
+        return {
+          defaultValue: defaultValue ?? null,
+        }
+      },
+    })
+  }
+}
+
+function dateStringToDateObjectInUTC(value: string) {
+  return new Date(`${value}T00:00Z`)
+}
+
+type CalendarDayFilterType = GInputObjectType<{
+  equals: GArg<typeof g.CalendarDay>
+  in: GArg<GList<GNonNull<typeof g.CalendarDay>>>
+  notIn: GArg<GList<GNonNull<typeof g.CalendarDay>>>
+  lt: GArg<typeof g.CalendarDay>
+  lte: GArg<typeof g.CalendarDay>
+  gt: GArg<typeof g.CalendarDay>
+  gte: GArg<typeof g.CalendarDay>
+  not: GArg<CalendarDayFilterType>
+}>
+
+function transformFilterDateStringsToDateObjects(
+  filter: InferValueFromInputType<CalendarDayFilterType>
+): Parameters<typeof filters.resolveCommon>[0] {
+  if (filter === null) {
+    return filter
+  }
+  return Object.fromEntries(
+    Object.entries(filter).map(([key, value]) => {
+      if (value == null) {
+        return [key, value]
+      }
+      if (Array.isArray(value)) {
+        return [key, value.map(dateStringToDateObjectInUTC)]
+      }
+      if (typeof value === 'object') {
+        return [key, transformFilterDateStringsToDateObjects(value)]
+      }
+      return [key, dateStringToDateObjectInUTC(value)]
+    })
+  )
+}
+
+const filterFields = (nestedType: CalendarDayFilterType) => ({
+  equals: g.arg({ type: g.CalendarDay }),
+  in: g.arg({ type: g.list(g.nonNull(g.CalendarDay)) }),
+  notIn: g.arg({ type: g.list(g.nonNull(g.CalendarDay)) }),
+  lt: g.arg({ type: g.CalendarDay }),
+  lte: g.arg({ type: g.CalendarDay }),
+  gt: g.arg({ type: g.CalendarDay }),
+  gte: g.arg({ type: g.CalendarDay }),
+  not: g.arg({ type: nestedType }),
+})
+
+const CalendarDayNullableFilter: CalendarDayFilterType = g.inputObject({
+  name: 'CalendarDayNullableFilter',
+  fields: () => filterFields(CalendarDayNullableFilter),
+})
+
+const CalendarDayFilter: CalendarDayFilterType = g.inputObject({
+  name: 'CalendarDayFilter',
+  fields: () => filterFields(CalendarDayFilter),
+})

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

@@ -0,0 +1,144 @@
+import { CalendarDate, getLocalTimeZone, now, parseDate } from '@internationalized/date'
+import { useDateFormatter } from '@react-aria/i18n'
+import { useMemo, useReducer, useState } from 'react'
+
+import { ToggleButton } from '@keystar/ui/button'
+import { DatePicker } from '@keystar/ui/date-time'
+import { Icon } from '@keystar/ui/icon'
+import { calendarClockIcon } from '@keystar/ui/icon/icons/calendarClockIcon'
+import { Grid } from '@keystar/ui/layout'
+import { TextField } from '@keystar/ui/text-field'
+import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'
+import { Text } from '@keystar/ui/typography'
+
+import type {
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+} from '../../../../types'
+
+export type Value =
+  | { kind: 'create'; value: string | null }
+  | { kind: 'update'; value: string | null; initial: string | null }
+
+export function Field(props: FieldProps<typeof controller>) {
+  const { field, value, forceValidation, onChange, isRequired } = props
+  const parsedValue = value.value ? parseDate(value.value) : null
+
+  const [isDirty, setDirty] = useState(false)
+  const [isReadonlyUTC, toggleReadonlyUTC] = useReducer(prev => !prev, false)
+  const dateFormatter = useDateFormatter({ dateStyle: 'long' })
+  const placeholderValue = useMemo(() => {
+    const today = now(getLocalTimeZone())
+    return new CalendarDate(today.year, today.month, today.day)
+  }, [])
+
+  // the read-only date field is deceptively interactive, better to render a
+  // text field to avoid confusion. when there's no value the field is disabled,
+  // placeholder text is shown, and the toggle button is hidden
+  if (!onChange) {
+    return (
+      <Grid
+        columns={parsedValue ? 'minmax(0, 1fr) auto' : undefined}
+        gap="regular"
+        alignItems="end"
+      >
+        <TextField
+          label={field.label}
+          description={field.description}
+          isDisabled={!parsedValue}
+          isReadOnly
+          value={
+            parsedValue
+              ? isReadonlyUTC
+                ? parsedValue.toString()
+                : dateFormatter.format(parsedValue.toDate(getLocalTimeZone()))
+              : 'yyyy-mm-dd'
+          }
+        />
+        {!!parsedValue && (
+          <TooltipTrigger>
+            <ToggleButton
+              aria-label="utc time"
+              isSelected={isReadonlyUTC}
+              onPress={toggleReadonlyUTC}
+            >
+              <Icon src={calendarClockIcon} />
+            </ToggleButton>
+            <Tooltip>Local / UTC</Tooltip>
+          </TooltipTrigger>
+        )}
+      </Grid>
+    )
+  }
+
+  const showValidation = isDirty || forceValidation
+  const validationMessage = showValidation ? validate(value, isRequired, field.label) : undefined
+
+  return (
+    <DatePicker
+      label={field.label}
+      description={field.description}
+      errorMessage={showValidation ? validationMessage : undefined}
+      granularity="day"
+      // isReadOnly={undefined} // read-only state handled above
+      isRequired={isRequired}
+      // NOTE: in addition to providing a cue for users about the expected input
+      // format, the `placeholderValue` determines the type of value for the
+      // field. the implementation below ensures `CalendarDate` so we can avoid
+      // unnecessary guards or transformations.
+      placeholderValue={placeholderValue}
+      onBlur={() => setDirty(true)}
+      onChange={datetime => {
+        onChange({ ...value, value: datetime?.toString() ?? null })
+      }}
+      value={parsedValue}
+    />
+  )
+}
+
+function validate(value: Value, isRequired: boolean, label: string): string | undefined {
+  // if we receive null initially on the item view and the current value is null,
+  // we should always allow saving it because:
+  // - the value might be null in the database and we don't want to prevent saving the whole item because of that
+  // - we might have null because of an access control error
+  if (value.kind === 'update' && value.initial === null && value.value === null) {
+    return undefined
+  }
+
+  if (isRequired && value.value === null) {
+    return `${label} is required`
+  }
+  return undefined
+}
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  const dateFormatter = useDateFormatter({ dateStyle: 'medium' })
+  return value ? <Text>{dateFormatter.format(new Date(value))}</Text> : null
+}
+
+export type CalendarDayFieldMeta = {
+  defaultValue: string | null
+}
+
+export function controller(
+  config: FieldControllerConfig<CalendarDayFieldMeta>
+): FieldController<Value, string> & { fieldMeta: CalendarDayFieldMeta } {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: config.fieldKey,
+    fieldMeta: config.fieldMeta,
+    defaultValue: { kind: 'create', value: null },
+    deserialize: data => {
+      const value = data[config.fieldKey]
+      return { kind: 'update', initial: value, value }
+    },
+    serialize: ({ value }) => {
+      return { [config.fieldKey]: value }
+    },
+    validate: (value, opts) => validate(value, opts.isRequired, config.label) === undefined,
+  }
+}

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

@@ -0,0 +1,76 @@
+import { userInputError } from '../../../lib/core/graphql-errors'
+import type { SimpleFieldTypeInfo } from '../../../types'
+import {
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  type FieldTypeFunc,
+  fieldType,
+  orderDirectionEnum,
+} from '../../../types'
+import { g } from '../../..'
+import { assertReadIsNonNullAllowed } from '../../non-null-graphql'
+import { filters } from '../../filters'
+import type { controller } from './views'
+
+export type CheckboxFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  SimpleFieldTypeInfo<'Boolean'>
+> & {
+  defaultValue?: boolean
+  db?: {
+    map?: string
+    extendPrismaSchema?: (field: string) => string
+  }
+}
+
+export function checkbox<ListTypeInfo extends BaseListTypeInfo>(
+  config: CheckboxFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  const { defaultValue = false } = config
+
+  return meta => {
+    if ((config as any).isIndexed === 'unique') {
+      throw TypeError("isIndexed: 'unique' is not a supported option for field type checkbox")
+    }
+
+    assertReadIsNonNullAllowed(meta, config, false)
+
+    return fieldType({
+      kind: 'scalar',
+      mode: 'required',
+      scalar: 'Boolean',
+      default: { kind: 'literal', value: defaultValue },
+      map: config.db?.map,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+    })({
+      ...config,
+      input: {
+        where: { arg: g.arg({ type: filters[meta.provider].Boolean.required }) },
+        create: {
+          arg: g.arg({
+            type: g.Boolean,
+            defaultValue: typeof defaultValue === 'boolean' ? defaultValue : undefined,
+          }),
+          resolve(val) {
+            if (val === null) throw userInputError('Checkbox fields cannot be set to null')
+            return val ?? defaultValue
+          },
+        },
+        update: {
+          arg: g.arg({ type: g.Boolean }),
+          resolve(val) {
+            if (val === null) throw userInputError('Checkbox fields cannot be set to null')
+            return val
+          },
+        },
+        orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+      },
+      output: g.field({ type: g.Boolean }),
+      __ksTelemetryFieldTypeName: '@nixxie-cms/checkbox',
+      views: '@nixxie-cms/core/fields/types/checkbox/views',
+      getAdminMeta: (): Parameters<typeof controller>[0]['fieldMeta'] => ({
+        defaultValue,
+      }),
+    })
+  }
+}

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

@@ -0,0 +1,97 @@
+import { Checkbox } from '@keystar/ui/checkbox'
+import { Icon } from '@keystar/ui/icon'
+import { checkIcon } from '@keystar/ui/icon/icons/checkIcon'
+import { Text, VisuallyHidden } from '@keystar/ui/typography'
+
+import { entriesTyped } from '../../../../lib/core/utils'
+import type {
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+  SimpleFieldTypeInfo,
+} from '../../../../types'
+
+export function Field({ field, value, onChange, autoFocus }: FieldProps<typeof controller>) {
+  return (
+    <Checkbox
+      autoFocus={autoFocus}
+      isReadOnly={onChange == null}
+      isSelected={value}
+      onChange={onChange}
+    >
+      <Text>{field.label}</Text>
+      {field.description && <Text slot="description">{field.description}</Text>}
+    </Checkbox>
+  )
+}
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value ? <Icon src={checkIcon} aria-label="true" /> : <VisuallyHidden>false</VisuallyHidden>
+}
+
+type CheckboxController = FieldController<
+  boolean,
+  boolean,
+  SimpleFieldTypeInfo<'Boolean'>['inputs']['where']
+>
+
+export function controller(
+  config: FieldControllerConfig<{ defaultValue: boolean }>
+): CheckboxController {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: config.fieldMeta.defaultValue,
+    deserialize(item) {
+      const value = item[config.fieldKey]
+      return typeof value === 'boolean' ? value : false
+    },
+    serialize(value) {
+      return { [config.fieldKey]: value }
+    },
+    graphqlSelection: config.fieldKey,
+    filter: {
+      Filter(props) {
+        const { autoFocus, context, typeLabel, onChange, value, type, ...otherProps } = props
+        return (
+          <Checkbox autoFocus={autoFocus} onChange={onChange} isSelected={value} {...otherProps}>
+            {typeLabel} {config.label.toLocaleLowerCase()}
+          </Checkbox>
+        )
+      },
+      Label({ label, type, value }) {
+        return `${label.toLowerCase()} ${value ? 'true' : 'false'}`
+      },
+      graphql({ type, value }) {
+        return {
+          [config.fieldKey]: {
+            equals: type === 'not' ? !value : value,
+          },
+        }
+      },
+      parseGraphQL: value => {
+        return entriesTyped(value).flatMap(([type, value]) => {
+          if (value == null) return []
+          if (type === 'equals') return { type: 'is', value }
+          if (type === 'not') {
+            if (value.equals == null) return []
+            return { type: 'not', value: value.equals }
+          }
+          return []
+        })
+      },
+      types: {
+        is: {
+          label: 'Is',
+          initialValue: true,
+        },
+        not: {
+          label: 'Is not',
+          initialValue: true,
+        },
+      },
+    },
+  }
+}