@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,215 @@
+import { useState } from 'react'
+
+import { TextField } from '@keystar/ui/text-field'
+
+import type {
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+  SimpleFieldTypeInfo,
+} from '../../../../types'
+import { entriesTyped } from '../../../../lib/core/utils'
+
+const TYPE_OPERATOR_MAP = {
+  equals: '=',
+  not: '≠',
+  gt: '>',
+  lt: '<',
+  gte: '≥',
+  lte: '≤',
+} as const
+
+type Value =
+  | { kind: 'create'; value: string | null }
+  | { kind: 'update'; initial: string | null; value: string | null }
+
+type Validation = {
+  min: number | null
+  max: number | null
+}
+
+function validate_(
+  value: Value,
+  validation: Validation,
+  isRequired: boolean,
+  label: string
+): string | undefined {
+  const { value: input, kind } = value
+  if (kind === 'update' && value.initial === null && input === null) return
+  if (isRequired && input === null) return `${label} is required`
+  if (typeof input !== 'string') return
+  const v = parseFloat(input)
+  if (Number.isNaN(v)) return `${label} is not a valid float`
+  if (validation.min != null && v < validation.min)
+    return `${label} must be greater than or equal to ${validation.min}`
+  if (validation.max != null && v > validation.max)
+    return `${label} must be less than or equal to ${validation.max}`
+}
+
+export function controller(
+  config: FieldControllerConfig<{
+    validation: Validation
+    defaultValue: string | null
+  }>
+): FieldController<Value, string | null, SimpleFieldTypeInfo<'Float'>['inputs']['where']> & {
+  validation: Validation
+} {
+  const validate = (value: Value, opts: { isRequired: boolean }) => {
+    return validate_(value, config.fieldMeta.validation, opts.isRequired, config.label)
+  }
+
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: config.fieldKey,
+    validation: config.fieldMeta.validation,
+    defaultValue: { kind: 'create', value: config.fieldMeta.defaultValue },
+    deserialize: data => ({
+      kind: 'update',
+      value: data[config.fieldKey],
+      initial: data[config.fieldKey],
+    }),
+    serialize: value => {
+      const v = value.value !== null ? parseFloat(value.value) : null
+      return { [config.fieldKey]: Number.isFinite(v) ? v : null }
+    },
+    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 (
+          <TextField
+            {...otherProps}
+            {...labelProps}
+            autoFocus={autoFocus}
+            errorMessage={
+              (forceValidation || isDirty) &&
+              !validate({ kind: 'update', initial: null, value }, { isRequired: true })
+                ? 'Required'
+                : null
+            }
+            inputMode="numeric"
+            width="auto"
+            onBlur={() => setDirty(true)}
+            onChange={x => onChange?.(x === '' ? null : x)}
+            value={value ?? ''}
+          />
+        )
+      },
+
+      graphql: ({ type, value }) => {
+        if (type === 'empty') return { [config.fieldKey]: { equals: null } }
+        if (type === 'not_empty') return { [config.fieldKey]: { not: { equals: null } } }
+        const val = value === null ? null : parseFloat(value)
+        if (type === 'not') return { [config.fieldKey]: { not: { equals: val } } }
+        return { [config.fieldKey]: { [type]: val } }
+      },
+      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.toString() }
+          if (type === 'not') {
+            if (value.equals === null) return { type: 'not_empty', value: null }
+            if (value.equals === undefined) return []
+            return { type: 'not', value: value.equals.toString() }
+          }
+          if (type === 'gt' || type === 'gte' || type === 'lt' || type === 'lte') {
+            return { type, value: value.toString() }
+          }
+          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,
+        },
+      },
+    },
+
+    validate: (value, opts) => validate(value, opts) === undefined,
+  }
+}
+
+export function Field({
+  field,
+  value,
+  onChange,
+  autoFocus,
+  forceValidation,
+  isRequired,
+}: FieldProps<typeof controller>) {
+  const [isDirty, setDirty] = useState(false)
+  const isReadOnly = !onChange
+
+  const validate = (value: Value) => {
+    return validate_(value, field.validation, isRequired, field.label)
+  }
+
+  return (
+    <TextField
+      autoFocus={autoFocus}
+      description={field.description}
+      label={field.label}
+      errorMessage={(forceValidation || isDirty) && validate(value)}
+      isReadOnly={isReadOnly}
+      isRequired={isRequired}
+      inputMode="numeric"
+      width="alias.singleLineWidth"
+      onBlur={() => setDirty(true)}
+      onChange={x => onChange?.({ ...value, value: x === '' ? null : x })}
+      value={value.value ?? ''}
+    />
+  )
+}

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

@@ -0,0 +1,244 @@
+import type {
+  BaseListTypeInfo,
+  FieldTypeFunc,
+  CommonFieldConfig,
+  NixxieContext,
+  BaseNixxieTypeInfo,
+  MaybePromise,
+  FieldHooks,
+  StorageStrategy,
+} from '../../../types'
+import { fieldType } from '../../../types'
+import { g } from '../../..'
+import { SUPPORTED_IMAGE_EXTENSIONS } from './utils'
+import { merge } from '../../resolve-hooks'
+import type { InferValueFromArg, InferValueFromInputType } from '@graphql-ts/schema'
+import { randomBytes } from 'node:crypto'
+import type { ImageExtension } from './internal-utils'
+import { getBytesFromStream, getImageMetadata, teeStream } from './internal-utils'
+
+export type FieldTypeInfo = {
+  item: undefined
+  inputs: {
+    create: InferValueFromInputType<typeof ImageFieldInput> | null | undefined
+    update: InferValueFromInputType<typeof ImageFieldInput> | null | undefined
+    where: undefined
+    uniqueWhere: undefined
+    orderBy: undefined
+  }
+  prisma: {
+    create: undefined
+    update: undefined
+  }
+}
+
+export type ImageFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  FieldTypeInfo
+> & {
+  storage: StorageStrategy<ListTypeInfo['all']>
+  transformName?: (originalFilename: string, extension: string) => MaybePromise<string>
+  db?: {
+    extendPrismaSchema?: (field: string) => string
+  }
+}
+
+// TODO: dynamic
+const ImageExtensionEnum = g.enum({
+  name: 'ImageExtension',
+  values: g.enumValues(SUPPORTED_IMAGE_EXTENSIONS),
+})
+
+const ImageFieldInput = g.inputObject({
+  name: 'ImageFieldInput',
+  fields: {
+    upload: g.arg({ type: g.nonNull(g.Upload) }),
+  },
+})
+
+const inputArg = g.arg({ type: ImageFieldInput })
+
+type ImageData = {
+  id: string
+  extension: ImageExtension
+  filesize: number
+  width: number
+  height: number
+  url: (_args: {}, context: NixxieContext) => Promise<string>
+}
+
+const ImageFieldOutput = g.object<ImageData>()({
+  name: 'ImageFieldOutput',
+  fields: {
+    id: g.field({ type: g.nonNull(g.ID) }),
+    url: g.field({ type: g.nonNull(g.String) }),
+    extension: g.field({ type: g.nonNull(ImageExtensionEnum) }),
+    filesize: g.field({ type: g.nonNull(g.Int) }),
+    width: g.field({ type: g.nonNull(g.Int) }),
+    height: g.field({ type: g.nonNull(g.Int) }),
+  },
+})
+
+// this is a conservative estimate of the number of bytes
+// that we need to determine the image metadata
+// since 1Kib in memory will be fine
+const bytesToDetermineImageMetadata = 1024
+
+async function inputResolver(
+  storage: StorageStrategy<BaseNixxieTypeInfo>,
+  transformName: (originalFilename: string, extension: string) => MaybePromise<string>,
+  context: NixxieContext,
+  data: InferValueFromArg<typeof inputArg>
+): Promise<{
+  id: string | null | undefined
+  extension: ImageExtension | null | undefined
+  filesize: number | null | undefined
+  width: number | null | undefined
+  height: number | null | undefined
+}> {
+  if (data === null || data === undefined) {
+    return {
+      id: data,
+      extension: data,
+      filesize: data,
+      width: data,
+      height: data,
+    }
+  }
+
+  const upload = await data.upload
+  let filesize = 0
+  const _readable = upload.createReadStream()
+  const [readableForFilesize, _readable2] = teeStream(_readable)
+  const [readableForMetadata, readableForUpload] = teeStream(_readable2)
+  readableForFilesize.on('data', data => {
+    filesize += data.length
+  })
+
+  const buffer = await getBytesFromStream(readableForMetadata, bytesToDetermineImageMetadata)
+  const metadata = getImageMetadata(buffer)
+  if (!metadata) {
+    throw new Error('File type not found')
+  }
+  const id = await transformName(upload.filename, metadata.extension)
+  await storage.put(
+    `${id}.${metadata.extension}`,
+    readableForUpload,
+    {
+      contentType: {
+        png: 'image/png',
+        webp: 'image/webp',
+        gif: 'image/gif',
+        jpg: 'image/jpeg',
+      }[metadata.extension],
+    },
+    context
+  )
+  return {
+    filesize,
+    id,
+    extension: metadata.extension,
+    height: metadata.height,
+    width: metadata.width,
+  }
+}
+
+const extensionsSet = new Set<string>(SUPPORTED_IMAGE_EXTENSIONS)
+
+function isValidImageExtension(extension: string): extension is ImageExtension {
+  return extensionsSet.has(extension)
+}
+
+export function image<ListTypeInfo extends BaseListTypeInfo>(
+  config: ImageFieldConfig<ListTypeInfo>
+): FieldTypeFunc<ListTypeInfo> {
+  const { transformName = defaultTransformName } = config
+  return meta => {
+    const { fieldKey } = meta
+
+    if ('isIndexed' in config) {
+      throw Error("isIndexed: 'unique' is not a supported option for field type image")
+    }
+
+    const afterOperationResolver: Extract<
+      FieldHooks<BaseListTypeInfo, FieldTypeInfo>['afterOperation'],
+      (args: any) => any
+    > = async function afterOperationResolver(args) {
+      if (args.operation === 'update' || args.operation === 'delete') {
+        const idKey = `${fieldKey}_id`
+        const oldId = args.originalItem?.[idKey] as string | null | undefined
+        const newId = args.item?.[idKey] as string | null | undefined
+        const extensionKey = `${fieldKey}_extension`
+        const oldExtension = args.originalItem?.[extensionKey] as string | null | undefined
+        const newExtension = args.item?.[extensionKey] as string | null | undefined
+        // this will occur on an update where an image already existed but has been
+        // changed, or on a delete, where there is no longer an item
+        if (
+          typeof oldId === 'string' &&
+          typeof oldExtension === 'string' &&
+          isValidImageExtension(oldExtension) &&
+          (oldId !== newId || oldExtension !== newExtension)
+        ) {
+          await config.storage.delete(`${oldId}.${oldExtension}`, args.context)
+        }
+      }
+    }
+
+    return fieldType({
+      kind: 'multi',
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+      fields: {
+        id: { kind: 'scalar', scalar: 'String', mode: 'optional' },
+        extension: { kind: 'scalar', scalar: 'String', mode: 'optional' },
+        filesize: { kind: 'scalar', scalar: 'Int', mode: 'optional' },
+        width: { kind: 'scalar', scalar: 'Int', mode: 'optional' },
+        height: { kind: 'scalar', scalar: 'Int', mode: 'optional' },
+      },
+    })({
+      ...config,
+      hooks: {
+        ...config.hooks,
+        afterOperation: merge(config.hooks?.afterOperation, {
+          update: afterOperationResolver,
+          delete: afterOperationResolver,
+        }),
+      },
+      input: {
+        create: {
+          arg: inputArg,
+          resolve: (data, context) => inputResolver(config.storage, transformName, context, data),
+        },
+        update: {
+          arg: inputArg,
+          resolve: (data, context) => inputResolver(config.storage, transformName, context, data),
+        },
+      },
+      output: g.field({
+        type: ImageFieldOutput,
+        resolve({ value: { id, extension, filesize, width, height } }): ImageData | null {
+          if (id === null) return null
+          if (extension === null) return null
+          if (filesize === null) return null
+          if (width === null) return null
+          if (height === null) return null
+          if (!isValidImageExtension(extension)) return null // TODO: dynamic
+
+          return {
+            id,
+            filesize,
+            width,
+            height,
+            extension,
+            url: async (_, context) => config.storage.url(`${id}.${extension}`, context),
+          }
+        },
+      }),
+      __ksTelemetryFieldTypeName: '@nixxie-cms/image',
+      views: '@nixxie-cms/core/fields/types/image/views',
+    })
+  }
+}
+
+function defaultTransformName(_: string) {
+  return randomBytes(16).toString('base64url')
+}

package/src/fields/types/image/internal-utils.ts

@@ -0,0 +1,58 @@
+import { JPG } from 'image-size/types/jpg'
+import { PNG } from 'image-size/types/png'
+import { WEBP } from 'image-size/types/webp'
+import { GIF } from 'image-size/types/gif'
+import { PassThrough, type Readable } from 'node:stream'
+
+export function getImageMetadata(bytes: Uint8Array) {
+  for (const [type, checker] of types) {
+    if (checker.validate(bytes)) {
+      const result = checker.calculate(bytes)
+      if (result.width === undefined || result.height === undefined) {
+        return
+      }
+      return {
+        width: result.width,
+        height: result.height,
+        extension: type,
+      }
+    }
+  }
+}
+
+const types = [
+  ['jpg', JPG],
+  ['png', PNG],
+  ['webp', WEBP],
+  ['gif', GIF],
+] as const
+
+export type ImageExtension = (typeof types)[number][0]
+
+export async function getBytesFromStream(stream: Readable, maxBytes: number): Promise<Buffer> {
+  let chunks: Buffer[] = []
+  for await (const chunk of stream) {
+    maxBytes -= chunk.length
+    chunks.push(chunk)
+    if (maxBytes <= 0) {
+      break
+    }
+  }
+  stream.destroy()
+  return Buffer.concat(chunks)
+}
+
+export function teeStream(source: Readable): [Readable, Readable] {
+  const passThrough1 = new PassThrough()
+  const passThrough2 = new PassThrough()
+
+  source.pipe(passThrough1)
+  source.pipe(passThrough2)
+
+  source.on('error', err => {
+    passThrough1.destroy(err)
+    passThrough2.destroy(err)
+  })
+
+  return [passThrough1, passThrough2]
+}

package/src/fields/types/image/utils.ts

@@ -0,0 +1 @@
+export const SUPPORTED_IMAGE_EXTENSIONS = ['jpg', 'png', 'webp', 'gif'] as const