@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,273 @@
+import { useState } from 'react'
+import { TextArea, TextField } from '@keystar/ui/text-field'
+
+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, field.validation, props.isRequired, field.label)
+
+  const isReadOnly = onChange == null
+  const isNull = value.inner.kind === 'null'
+  const isTextArea = field.displayMode === 'textarea'
+  const FieldComponent = isTextArea ? TextArea : TextField
+
+  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 })
+      }}
+    >
+      <FieldComponent
+        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>
+
+type Validation = {
+  match: { regex: RegExp; explanation: string | null } | null
+  length: { min: number | null; max: number | null }
+}
+
+function validate(
+  value: TextValue,
+  validation: Validation,
+  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 []
+  }
+
+  const val = value.inner.value
+  const min = Math.max(validation.length.min ?? 0, isRequired ? 1 : 0)
+  const messages: string[] = []
+  if (val.length < min) {
+    if (min === 1) {
+      messages.push(`${fieldLabel} must not be empty`)
+    } else {
+      messages.push(`${fieldLabel} must be at least ${min} characters long`)
+    }
+  }
+  if (validation.length.max !== null && val.length > validation.length.max) {
+    messages.push(`${fieldLabel} must be no longer than ${validation.length.max} characters`)
+  }
+  if (validation.match && !validation.match.regex.test(val)) {
+    messages.push(
+      validation.match.explanation || `${fieldLabel} must match ${validation.match.regex}`
+    )
+  }
+  return messages
+}
+
+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']
+> & {
+  displayMode: 'input' | 'textarea'
+  validation: Validation
+  isNullable: boolean
+} {
+  const validation: Validation = {
+    length: config.fieldMeta.validation.length,
+    match: config.fieldMeta.validation.match
+      ? {
+          regex: new RegExp(
+            config.fieldMeta.validation.match.regex.source,
+            config.fieldMeta.validation.match.regex.flags
+          ),
+          explanation: config.fieldMeta.validation.match.explanation,
+        }
+      : null,
+  }
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: { kind: 'create', inner: deserializeTextValue(config.fieldMeta.defaultValue) },
+    displayMode: config.fieldMeta.displayMode,
+    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,
+    }),
+    validation,
+    validate: (val, opts) => validate(val, validation, 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 key =
+          type === 'is_i' || type === 'not_i'
+            ? 'equals'
+            : type
+                .replace(/_i$/, '')
+                .replace('not_', '')
+                .replace(/_([a-z])/g, (_, char: string) => char.toUpperCase())
+        const filter = { [key]: value }
+        return {
+          [config.fieldKey]: {
+            ...(isNot ? { not: filter } : filter),
+            mode: config.fieldMeta.shouldUseModeInsensitive ? 'insensitive' : undefined,
+          },
+        }
+      },
+      parseGraphQL: value => {
+        return entriesTyped(value).flatMap(([type, value]) => {
+          if (!value) return []
+          if (type === 'equals') return { type: 'is_i', value }
+          if (type === 'contains') return { type: 'contains_i', value }
+          if (type === 'startsWith') return { type: 'starts_with_i', value }
+          if (type === 'endsWith') return { type: 'ends_with_i', value }
+          if (type === 'not') {
+            if (value?.equals) return { type: 'not_i', value: value.equals }
+            if (value?.contains) return { type: 'not_contains_i', value: value.contains }
+            if (value?.startsWith) return { type: 'not_starts_with_i', value: value.startsWith }
+            if (value?.endsWith) return { type: 'not_ends_with_i', value: value.endsWith }
+          }
+          return []
+        })
+      },
+      types: {
+        contains_i: {
+          label: 'Contains',
+          initialValue: '',
+        },
+        not_contains_i: {
+          label: 'Does not contain',
+          initialValue: '',
+        },
+        is_i: {
+          label: 'Is exactly',
+          initialValue: '',
+        },
+        not_i: {
+          label: 'Is not exactly',
+          initialValue: '',
+        },
+        starts_with_i: {
+          label: 'Starts with',
+          initialValue: '',
+        },
+        not_starts_with_i: {
+          label: 'Does not start with',
+          initialValue: '',
+        },
+        ends_with_i: {
+          label: 'Ends with',
+          initialValue: '',
+        },
+        not_ends_with_i: {
+          label: 'Does not end with',
+          initialValue: '',
+        },
+      },
+    },
+  }
+}

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

@@ -0,0 +1,116 @@
+import type { SimpleFieldTypeInfo } from '../../../types'
+import {
+  type BaseListTypeInfo,
+  type FieldTypeFunc,
+  type CommonFieldConfig,
+  fieldType,
+  orderDirectionEnum,
+} from '../../../types'
+import { g } from '../../..'
+import { filters } from '../../filters'
+import { makeValidateHook, defaultIsRequired } from '../../non-null-graphql'
+import { type TimestampFieldMeta } from './views'
+
+export type TimestampFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  SimpleFieldTypeInfo<'DateTime' | 'String'> // TODO: make more exact
+> & {
+  isIndexed?: boolean | 'unique'
+  validation?: {
+    isRequired?: boolean
+  }
+  defaultValue?: string | { kind: 'now' }
+  db?: {
+    // this is @updatedAt in Prisma
+    updatedAt?: boolean
+    isNullable?: boolean
+    map?: string
+    extendPrismaSchema?: (field: string) => string
+  }
+}
+
+export function timestamp<ListTypeInfo extends BaseListTypeInfo>(
+  config: TimestampFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  const { isIndexed, defaultValue, validation } = config
+
+  return meta => {
+    if (typeof defaultValue === 'string') {
+      try {
+        g.DateTime.parseValue(defaultValue)
+      } catch (err) {
+        throw new Error(
+          `${meta.listKey}.${meta.fieldKey}.defaultValue is required to be an ISO8601 date-time string such as ${new Date().toISOString()}`
+        )
+      }
+    }
+
+    const parsedDefaultValue =
+      typeof defaultValue === 'string'
+        ? (g.DateTime.parseValue(defaultValue) as Date)
+        : defaultValue
+    const { mode, validate } = makeValidateHook(meta, config)
+
+    return fieldType({
+      kind: 'scalar',
+      mode,
+      scalar: 'DateTime',
+      index: isIndexed === true ? 'index' : isIndexed || undefined,
+      default:
+        typeof defaultValue === 'string'
+          ? {
+              kind: 'literal',
+              value: defaultValue,
+            }
+          : defaultValue === undefined
+            ? undefined
+            : { kind: 'now' },
+      updatedAt: config.db?.updatedAt,
+      map: config.db?.map,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+    })({
+      ...config,
+      ...defaultIsRequired(config, validation?.isRequired ?? false),
+      hooks: {
+        ...config.hooks,
+        validate,
+      },
+      input: {
+        uniqueWhere: isIndexed === 'unique' ? { arg: g.arg({ type: g.DateTime }) } : undefined,
+        where: {
+          arg: g.arg({ type: filters[meta.provider].DateTime[mode] }),
+          resolve: mode === 'optional' ? filters.resolveCommon : undefined,
+        },
+        create: {
+          arg: g.arg({
+            type: g.DateTime,
+            // TODO: add support for defaultValue of { kind: 'now' } in the GraphQL API
+            defaultValue: parsedDefaultValue instanceof Date ? parsedDefaultValue : undefined,
+          }),
+          resolve(val) {
+            if (val === undefined) {
+              if (parsedDefaultValue === undefined && config.db?.updatedAt) return undefined
+              if (parsedDefaultValue instanceof Date || parsedDefaultValue === undefined) {
+                return parsedDefaultValue ?? null
+              }
+
+              return new Date()
+            }
+            return val
+          },
+        },
+        update: { arg: g.arg({ type: g.DateTime }) },
+        orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+      },
+      output: g.field({ type: g.DateTime }),
+      __ksTelemetryFieldTypeName: '@nixxie-cms/timestamp',
+      views: '@nixxie-cms/core/fields/types/timestamp/views',
+      getAdminMeta(): TimestampFieldMeta {
+        return {
+          defaultValue: defaultValue ?? null,
+          updatedAt: config.db?.updatedAt ?? false,
+        }
+      },
+    })
+  }
+}

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

@@ -0,0 +1,68 @@
+import { controller } from '../index'
+
+const STUBCONFIG = {
+  listKey: 'timestamp',
+  fieldKey: 'timestamp',
+  label: 'foo',
+  description: '',
+  customViews: {},
+} as const
+
+describe('controller', () => {
+  describe('validate', () => {
+    it('null is OK if not required', () => {
+      const { validate } = controller({
+        ...STUBCONFIG,
+        fieldMeta: {
+          defaultValue: null,
+          updatedAt: false,
+        },
+      })
+      expect(
+        validate!(
+          {
+            kind: 'create',
+            value: null,
+          },
+          { isRequired: false }
+        )
+      ).toBe(true)
+    })
+    it('isRequired enforces required (null)', () => {
+      const { validate } = controller({
+        ...STUBCONFIG,
+        fieldMeta: {
+          defaultValue: null,
+          updatedAt: false,
+        },
+      })
+      expect(
+        validate!(
+          {
+            kind: 'create',
+            value: null,
+          },
+          { isRequired: true }
+        )
+      ).toBe('foo is required')
+    })
+    it('isRequired enforces required (value)', () => {
+      const { validate } = controller({
+        ...STUBCONFIG,
+        fieldMeta: {
+          defaultValue: null,
+          updatedAt: false,
+        },
+      })
+      expect(
+        validate!(
+          {
+            kind: 'create',
+            value: new Date().toJSON(),
+          },
+          { isRequired: true }
+        )
+      ).toBe(true)
+    })
+  })
+})

package/src/fields/types/timestamp/views/__tests__/utils.tsx

@@ -0,0 +1,16 @@
+import { parseISO } from 'date-fns'
+import { constructTimestamp } from '../utils'
+
+const STUBVALIDDATE = '2020-10-31'
+const STUBVALIDTIME = '10:00'
+
+describe('constructTimestamp()', () => {
+  it('should throw on empty values', () => {
+    expect(() => constructTimestamp({ dateValue: '', timeValue: '' })).toThrow()
+    expect(() => constructTimestamp({ dateValue: '', timeValue: '09:30' })).toThrow()
+  })
+  it('should take two valid timestamp values and construct them into a valid ISO string', () => {
+    const result = constructTimestamp({ dateValue: STUBVALIDDATE, timeValue: STUBVALIDTIME })
+    expect(Boolean(parseISO(result).toISOString())).toBe(true)
+  })
+})