@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,262 @@
+import { getLocalTimeZone, now, parseAbsoluteToLocal } from '@internationalized/date'
+import { useDateFormatter } from '@react-aria/i18n'
+import { 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 { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { Text } from '@keystar/ui/typography'
+
+import type {
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+  SimpleFieldTypeInfo,
+} from '../../../../types'
+import { entriesTyped } from '../../../../lib/core/utils'
+import type { Value } from './utils'
+
+export function Field(props: FieldProps<typeof controller>) {
+  const { field, value, forceValidation, onChange, isRequired } = props
+  const parsedValue = value.value ? parseAbsoluteToLocal(value.value) : null
+
+  const [isDirty, setDirty] = useState(false)
+  const [isReadonlyUTC, toggleReadonlyUTC] = useReducer(prev => !prev, false)
+  const dateFormatter = useDateFormatter({ dateStyle: 'long', timeStyle: 'long' })
+
+  // 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.toAbsoluteString()
+                : dateFormatter.format(parsedValue.toDate())
+              : '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, field.fieldMeta, isRequired, field.label)
+    : undefined
+
+  return (
+    <DatePicker
+      label={field.label}
+      description={field.description}
+      errorMessage={showValidation ? validationMessage : undefined}
+      granularity="second"
+      // 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 `ZonedDateTime` so we can avoid
+      // unnecessary guards or transformations.
+      placeholderValue={now(getLocalTimeZone())}
+      onBlur={() => setDirty(true)}
+      onChange={datetime => {
+        onChange({ ...value, value: datetime?.toAbsoluteString() ?? null })
+      }}
+      value={parsedValue}
+    />
+  )
+}
+
+function validate(
+  value: Value,
+  fieldMeta: TimestampFieldMeta,
+  isRequired: boolean,
+  label: string
+): string | undefined {
+  const isEmpty = !value.value
+
+  // 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 && isEmpty) return
+
+  if (
+    value.kind === 'create' &&
+    isEmpty &&
+    ((typeof fieldMeta.defaultValue === 'object' && fieldMeta.defaultValue?.kind === 'now') ||
+      fieldMeta.updatedAt)
+  )
+    return
+
+  if (isRequired && isEmpty) return `${label} is required`
+
+  // TODO: update field in "@keystar/ui" to use new validation APIs, for more
+  // granular validation messages
+  return
+}
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  const dateFormatter = useDateFormatter({ dateStyle: 'medium', timeStyle: 'short' })
+  return value ? <Text>{dateFormatter.format(new Date(value))}</Text> : null
+}
+
+export type TimestampFieldMeta = {
+  defaultValue: string | { kind: 'now' } | null
+  updatedAt: boolean
+}
+
+export function controller(config: FieldControllerConfig<TimestampFieldMeta>): FieldController<
+  Value,
+  string | null,
+  SimpleFieldTypeInfo<'DateTime'>['inputs']['where']
+> & {
+  fieldMeta: TimestampFieldMeta
+} {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: config.fieldKey,
+    fieldMeta: config.fieldMeta,
+    defaultValue: {
+      kind: 'create',
+      value:
+        typeof config.fieldMeta.defaultValue === 'string' ? config.fieldMeta.defaultValue : null,
+    },
+    deserialize: data => {
+      const value = data[config.fieldKey]
+      return {
+        kind: 'update',
+        initial: data[config.fieldKey],
+        value: value ?? null,
+      }
+    },
+    serialize: ({ value }) => {
+      if (value) return { [config.fieldKey]: value }
+      return { [config.fieldKey]: null }
+    },
+    validate: (value, opts) =>
+      validate(value, config.fieldMeta, opts.isRequired, config.label) === undefined,
+    filter: {
+      Filter(props) {
+        const {
+          autoFocus,
+          context,
+          forceValidation,
+          typeLabel,
+          onChange,
+          value,
+          type,
+          ...otherProps
+        } = props
+        const [isDirty, setDirty] = useState(false)
+
+        if (type === 'empty' || type === 'not_empty') return null
+        const parsedValue = value ? parseAbsoluteToLocal(value) : null
+
+        return (
+          <DatePicker
+            label={typeLabel}
+            granularity="second"
+            placeholderValue={now(getLocalTimeZone())}
+            errorMessage={(forceValidation || isDirty) && !value ? 'Required' : null}
+            isRequired
+            hideTimeZone
+            onBlur={() => setDirty(true)}
+            onChange={datetime => {
+              onChange(datetime?.toAbsoluteString() ?? null)
+            }}
+            value={parsedValue}
+            {...otherProps}
+          />
+        )
+      },
+      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: value as unknown as string }
+          if (type === 'not') {
+            if (value?.equals === null) return { type: 'not_empty', value: null }
+            return { type: 'not', value: value.equals as unknown as string }
+          }
+          if (type === 'gt' || type === 'lt') {
+            return { type, value: value as unknown as string }
+          }
+          return []
+        })
+      },
+      Label({ label, type, value }) {
+        const dateFormatter = useDateFormatter({ dateStyle: 'short', timeStyle: 'short' })
+        if (type === 'empty' || type === 'not_empty' || value == null) {
+          return label.toLocaleLowerCase()
+        }
+
+        return `${label.toLocaleLowerCase()} ${dateFormatter.format(new Date(value))}`
+      },
+      types: {
+        equals: {
+          label: 'Is exactly',
+          initialValue: null,
+        },
+        not: {
+          label: 'Is not exactly',
+          initialValue: null,
+        },
+        lt: {
+          label: 'Is before',
+          initialValue: null,
+        },
+        gt: {
+          label: 'Is after',
+          initialValue: null,
+        },
+        empty: {
+          label: 'Is empty',
+          initialValue: null,
+        },
+        not_empty: {
+          label: 'Is not empty',
+          initialValue: null,
+        },
+      },
+    },
+  }
+}

package/src/fields/types/timestamp/views/utils.ts

@@ -0,0 +1,22 @@
+export function constructTimestamp({
+  dateValue,
+  timeValue,
+}: {
+  dateValue: string
+  timeValue: string
+}) {
+  return new Date(`${dateValue}T${timeValue}`).toISOString()
+}
+
+export type InnerValue = string | null
+
+export type Value =
+  | {
+      kind: 'create'
+      value: string | null
+    }
+  | {
+      kind: 'update'
+      value: string | null
+      initial: string | null
+    }

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

@@ -0,0 +1,108 @@
+import { getNamedType, isLeafType } from 'graphql'
+import {
+  type BaseItem,
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  type FieldTypeFunc,
+  type NixxieContext,
+  type ListGraphQLTypes,
+  fieldType,
+} from '../../../types'
+import { g } from '../../..'
+import type { GArg, GField, GInputType, GObjectType, GOutputType } from '@graphql-ts/schema'
+import { GNonNull } from '@graphql-ts/schema'
+import type { controller } from './views'
+
+type VirtualFieldGraphQLField<Item extends BaseItem, Context extends NixxieContext> = GField<
+  Item,
+  any,
+  GOutputType<Context>,
+  unknown,
+  Context
+>
+
+type FieldTypeInfo = {
+  item: undefined
+  inputs: {
+    where: undefined
+    create: undefined
+    update: undefined
+    uniqueWhere: undefined
+    orderBy: undefined
+  }
+  prisma: {
+    create: undefined
+    update: undefined
+  }
+}
+
+export type VirtualFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  FieldTypeInfo
+> & {
+  field:
+    | VirtualFieldGraphQLField<ListTypeInfo['item'], NixxieContext<ListTypeInfo['all']>>
+    | ((lists: {
+        [Key in keyof ListTypeInfo['all']['lists']]: ListGraphQLTypes<
+          ListTypeInfo['all']['lists'][Key]
+        >
+      }) => VirtualFieldGraphQLField<ListTypeInfo['item'], NixxieContext<ListTypeInfo['all']>>)
+  unreferencedConcreteInterfaceImplementations?: readonly GObjectType<
+    any,
+    NixxieContext<ListTypeInfo['all']>
+  >[]
+  ui?: {
+    /**
+     * This can be used by the AdminUI to fetch the relevant sub-fields
+     *   or arguments on a non-scalar field GraphQL type
+     * ```graphql
+     * query {
+     *   ${list}(where: { id: "..." }) {
+     *     ${field}${ui.query}
+     *   }
+     * }
+     * ```
+     */
+    query?: string
+  }
+}
+
+export function virtual<ListTypeInfo extends BaseListTypeInfo>({
+  field,
+  ...config
+}: VirtualFieldConfig<ListTypeInfo>): FieldTypeFunc<ListTypeInfo> {
+  return meta => {
+    const usableField = typeof field === 'function' ? field(meta.lists) : field
+    const namedType = getNamedType(usableField.type)
+    const hasRequiredArgs =
+      usableField.args &&
+      Object.values(usableField.args as Record<string, GArg<GInputType, boolean>>).some(
+        x => x.type instanceof GNonNull && x.defaultValue === undefined
+      )
+
+    if (
+      (!isLeafType(namedType) || hasRequiredArgs) &&
+      !config.ui?.query &&
+      (config.ui?.itemView?.fieldMode !== 'hidden' || config.ui?.listView?.fieldMode !== 'hidden')
+    ) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} requires ui.query, or ui.listView.fieldMode and ui.itemView.fieldMode to be set to 'hidden'`
+      )
+    }
+
+    return fieldType({ kind: 'none' })({
+      ...config,
+      output: g.field({
+        ...(usableField as any),
+        resolve({ item }, ...args) {
+          return usableField.resolve!(item, ...args)
+        },
+      }),
+      __ksTelemetryFieldTypeName: '@nixxie-cms/virtual',
+      views: '@nixxie-cms/core/fields/types/virtual/views',
+      getAdminMeta: (): Parameters<typeof controller>[0]['fieldMeta'] => ({
+        query: config.ui?.query ?? '',
+      }),
+    })
+  }
+}

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

@@ -0,0 +1,53 @@
+import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
+import type {
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+} from '../../../../types'
+
+function stringify(value: unknown) {
+  if (typeof value === 'string') return value
+  if (value === undefined || value === null) return ''
+  if (typeof value !== 'object') return JSON.stringify(value)
+
+  const omitTypename = (key: string, value: any) => (key === '__typename' ? undefined : value)
+  const dataWithoutTypename = JSON.parse(JSON.stringify(value), omitTypename)
+  return JSON.stringify(dataWithoutTypename, null, 2)
+}
+
+export function Field(props: FieldProps<typeof controller>) {
+  const { autoFocus, field, value } = props
+  if (value === createViewValue) return null
+
+  return (
+    <TextField
+      autoFocus={autoFocus}
+      description={field.description}
+      label={field.label}
+      isReadOnly={true}
+      value={stringify(value)}
+    />
+  )
+}
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  return value != null ? <Text>{stringify(value)}</Text> : null
+}
+
+const createViewValue = Symbol('create view virtual field value')
+
+export function controller(
+  config: FieldControllerConfig<{ query: string }>
+): FieldController<unknown> {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: `${config.fieldKey}${config.fieldMeta.query}`,
+    defaultValue: createViewValue,
+    deserialize: data => data[config.fieldKey],
+    serialize: () => ({}),
+  }
+}

package/src/graphql-ts.ts

@@ -0,0 +1,32 @@
+// this is all from `@graphql-ts/schema` and `@graphql-ts/extend`
+// excluding `gWithContext` since people should use nixxie's `gWithContext` instead
+export {
+  GEnumType,
+  GInputObjectType,
+  GInterfaceType,
+  GList,
+  GObjectType,
+  GUnionType,
+  GNonNull,
+  GScalarType,
+} from '@graphql-ts/schema'
+export type {
+  GArg,
+  GField,
+  GFieldResolver,
+  GInputType,
+  GInterfaceField,
+  GNullableInputType,
+  GNullableOutputType,
+  GNullableType,
+  GOutputType,
+  GType,
+  GWithContext,
+  InferValueFromArg,
+  InferValueFromArgs,
+  InferValueFromInputType,
+  InferValueFromOutputType,
+} from '@graphql-ts/schema'
+
+export type { Extension, BaseSchemaMeta } from '@graphql-ts/extend'
+export { extend } from '@graphql-ts/extend'