@nixxie-cms/core 1.0.0

package/src/fields/types/image/views/Field.tsx

@@ -0,0 +1,295 @@
+import {
+  type PropsWithChildren,
+  type SyntheticEvent,
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { ActionButton } from '@keystar/ui/button'
+import { Field as KeystarField } from '@keystar/ui/field'
+import { HStack, VStack } from '@keystar/ui/layout'
+import { css, tokenSchema, transition } from '@keystar/ui/style'
+import { Text } from '@keystar/ui/typography'
+
+import { type controller, validateImage } from '.'
+import type { FieldProps } from '../../../../types'
+import { formatBytes, useTrimStartStyles } from '../../file/views/Field'
+import type { ImageValue } from './index'
+
+export function Field(props: FieldProps<typeof controller>) {
+  const { autoFocus, field, onChange, value } = props
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const errorMessage = validateImage(field.extensions, value)
+
+  const onUploadChange = ({
+    currentTarget: { validity, files },
+  }: SyntheticEvent<HTMLInputElement>) => {
+    const file = files?.[0]
+    if (!file) return // bail if the user cancels from the file browser
+    onChange?.({
+      kind: 'upload',
+      data: { file, validity },
+      previous: value,
+    })
+  }
+  const onFileTrigger = () => {
+    inputRef.current?.click()
+  }
+
+  // Generate a random input key when the value changes, to ensure the file input is unmounted and
+  // remounted (this is the only way to reset its value and ensure onChange will fire again if
+  // the user selects the same file again)
+  const inputKey = useMemo(() => Math.random(), [value])
+  const accept = useMemo(
+    () => field.extensions.map(ext => [`.${ext}`, `image/${ext}`].join(', ')).join(', '),
+    []
+  )
+
+  return (
+    <KeystarField label={field.label} description={field.description} errorMessage={errorMessage}>
+      {inputProps => (
+        <Fragment>
+          <ImageView
+            isInvalid={Boolean(errorMessage)}
+            onFileTrigger={onFileTrigger}
+            onChange={onChange}
+            value={value}
+          />
+          <input
+            {...inputProps}
+            accept={accept}
+            autoComplete="off"
+            autoFocus={autoFocus}
+            disabled={onChange === undefined}
+            hidden
+            key={inputKey}
+            name={field.fieldKey}
+            onChange={onUploadChange}
+            ref={inputRef}
+            type="file"
+          />
+        </Fragment>
+      )}
+    </KeystarField>
+  )
+}
+
+function ImageView(props: {
+  onFileTrigger: () => void
+  isInvalid?: boolean
+  onChange?: (value: ImageValue) => void
+  value: ImageValue
+}) {
+  const { isInvalid, onFileTrigger, onChange, value } = props
+  const imageData = useImageData(value)
+
+  return (
+    <VStack gap="regular">
+      {isInvalid || !imageData ? null : (
+        <ImageDetails {...imageData}>
+          {onChange && (
+            <HStack gap="regular" alignItems="center" marginTop="auto">
+              <ActionButton onPress={onFileTrigger}>Change</ActionButton>
+              {value.kind === 'from-server' && (
+                <ActionButton
+                  prominence="low"
+                  onPress={() => {
+                    onChange({ kind: 'remove', previous: value })
+                  }}
+                >
+                  Remove
+                </ActionButton>
+              )}
+              {value.kind === 'upload' && (
+                <ActionButton
+                  prominence="low"
+                  onPress={() => {
+                    onChange(value.previous)
+                  }}
+                >
+                  Cancel
+                </ActionButton>
+              )}
+            </HStack>
+          )}
+        </ImageDetails>
+      )}
+
+      {!imageData && (
+        <HStack gap="regular" alignItems="center">
+          <ActionButton isDisabled={onChange === undefined} onPress={onFileTrigger}>
+            Upload
+          </ActionButton>
+          {value.kind === 'remove' && value.previous && (
+            <ActionButton
+              prominence="low"
+              onPress={() => {
+                if (value.previous !== undefined) {
+                  onChange?.(value?.previous)
+                }
+              }}
+            >
+              Undo removal
+            </ActionButton>
+          )}
+        </HStack>
+      )}
+    </VStack>
+  )
+}
+
+function useObjectURL(fileData: File | undefined) {
+  const [objectURL, setObjectURL] = useState<string | undefined>(undefined)
+  useEffect(() => {
+    if (!fileData) return
+    const url = URL.createObjectURL(fileData)
+    setObjectURL(url)
+    return () => URL.revokeObjectURL(url)
+  }, [fileData])
+  return objectURL
+}
+
+// ==============================
+// Styled Components
+// ==============================
+
+const SMALL_CONTAINER_MAX = `@container (max-width: 419px)`
+const SMALL_CONTAINER_MIN = `@container (min-width: 420px)`
+
+function ImageDetails(props: PropsWithChildren<ImageData>) {
+  const trimStartStyles = useTrimStartStyles()
+
+  // hide content until the uploaded image until it's available; use dimensions
+  // as an indicator since they're set on load.
+  const loadedStyles = {
+    opacity: props.height && props.width ? 1 : 0,
+    transition: transition('opacity'),
+  }
+
+  return (
+    <div
+      className={css({
+        backgroundColor: tokenSchema.color.background.canvas,
+        border: `1px solid ${tokenSchema.color.border.neutral}`,
+        borderRadius: tokenSchema.size.radius.regular,
+        minHeight: tokenSchema.size.scale['1600'],
+        contain: 'paint', // crop img to border radius
+        display: 'flex',
+
+        [SMALL_CONTAINER_MAX]: {
+          flexDirection: 'column',
+        },
+      })}
+    >
+      <img
+        onLoad={props.onLoad}
+        className={css({
+          maxHeight: tokenSchema.size.scale[6000], // constrain tall/narrow images
+          maxWidth: '100%', // constrain to container width
+          minWidth: 0, // allow the image to shrink properly
+          objectFit: 'cover', // fill available space w/o distorting
+
+          [SMALL_CONTAINER_MIN]: {
+            height: tokenSchema.size.scale['1600'],
+          },
+        })}
+        style={loadedStyles}
+        alt="preview of the upload"
+        src={props.url}
+      />
+      <VStack
+        gap="medium"
+        padding="large"
+        flex
+        UNSAFE_className={css({
+          // ensure the metadata doesn't shrink too much, 40% allows more
+          // breathing room where available with a hard limit pixel value
+          minWidth: `max(${tokenSchema.size.alias.singleLineWidth}, 40%)`,
+        })}
+        UNSAFE_style={loadedStyles}
+      >
+        {props.name ? (
+          <Text>
+            <span className={css(trimStartStyles)} title={props.name}>
+              {props.name}
+            </span>
+          </Text>
+        ) : null}
+        {props.filesize ? (
+          <Text size="small" color="neutralSecondary" overflow="unset">
+            {formatBytes(props.filesize)} &middot; {props.width}
+            &#8239;&times;&#8239;
+            {props.height}
+          </Text>
+        ) : null}
+
+        {/* field controls dependant on value type */}
+        {props.children}
+      </VStack>
+    </div>
+  )
+}
+
+type ImageData = {
+  name?: string
+  url: string
+  filesize?: number
+  width?: number
+  height?: number
+  onLoad: (event: SyntheticEvent<HTMLImageElement>) => void
+}
+
+function useImageData(value: ImageValue): ImageData | null {
+  // only relevant for uploaded images, but we must observe the rules of hooks
+  // so these can't be called conditionally.
+  const imagePathFromUpload = useObjectURL(value.kind === 'upload' ? value.data.file : undefined)
+  const [dimensions, setDimensions] = useState({ height: 0, width: 0 })
+  const onLoad = useCallback(
+    (event: SyntheticEvent<HTMLImageElement>) => {
+      if (value.kind === 'upload') {
+        setDimensions({
+          height: event.currentTarget.naturalHeight,
+          width: event.currentTarget.naturalWidth,
+        })
+      }
+    },
+    [value.kind]
+  )
+
+  // reset dimensions when the user cancels the upload. we use the dimensions as
+  // a signal that the image has loaded.
+  useEffect(() => {
+    if (value.kind !== 'upload') {
+      setDimensions({ height: 0, width: 0 })
+    }
+  }, [value.kind])
+
+  switch (value.kind) {
+    case 'from-server':
+      return {
+        url: value.data.url,
+        name: `${value.data.id}.${value.data.extension}`,
+        filesize: value.data.filesize,
+        width: value.data.width,
+        height: value.data.height,
+        onLoad,
+      } as const
+
+    case 'upload':
+      return {
+        // always string for simpler types, should be unreachable if the file selection fails validation.
+        url: imagePathFromUpload || '',
+        name: value.data.file.name,
+        filesize: value.data.file.size,
+        width: dimensions.width,
+        height: dimensions.height,
+        onLoad,
+      } as const
+  }
+
+  return null
+}

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

@@ -0,0 +1,92 @@
+import type { CellComponent, FieldControllerConfig } from '../../../../types'
+import { SUPPORTED_IMAGE_EXTENSIONS } from '../utils'
+
+export { Field } from './Field'
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  if (!value) return null
+  return (
+    <div
+      style={{
+        alignItems: 'center',
+        display: 'flex',
+        height: 24,
+        lineHeight: 0,
+        width: 24,
+      }}
+    >
+      <img style={{ maxHeight: '100%', maxWidth: '100%' }} src={value.url} />
+    </div>
+  )
+}
+
+export type ImageValue =
+  | { kind: 'empty' }
+  | {
+      kind: 'from-server'
+      data: {
+        id: string
+        url: string
+        extension: string
+        filesize: number
+        width: number
+        height: number
+      }
+    }
+  | {
+      kind: 'upload'
+      data: {
+        file: File
+        validity: ValidityState
+      }
+      previous: ImageValue
+    }
+  | { kind: 'remove'; previous?: Exclude<ImageValue, { kind: 'remove' }> }
+
+export function validateImage(extensions: readonly string[], v: ImageValue) {
+  if (v.kind !== 'upload') return
+  if (!v.data.validity.valid) return 'Something went wrong, please reload and try again.'
+
+  // check if the file is actually an image
+  if (!v.data.file.type.includes('image')) {
+    return `Sorry, that file type isn't accepted. Please try ${extensions.join(', ')}`
+  }
+}
+
+export function controller(config: FieldControllerConfig) {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: { kind: 'empty' },
+    extensions: SUPPORTED_IMAGE_EXTENSIONS,
+    deserialize(item: any): ImageValue {
+      const value = item[config.fieldKey]
+      if (!value) return { kind: 'empty' }
+      return {
+        kind: 'from-server',
+        data: value,
+      }
+    },
+    serialize(value: ImageValue) {
+      if (value.kind === 'upload') {
+        return { [config.fieldKey]: { upload: value.data.file } }
+      }
+      if (value.kind === 'remove') {
+        return { [config.fieldKey]: null }
+      }
+      return {}
+    },
+    validate(value: ImageValue): boolean {
+      return validateImage(SUPPORTED_IMAGE_EXTENSIONS, value) === undefined
+    },
+    graphqlSelection: `${config.fieldKey} {
+      id
+      url
+      extension
+      filesize
+      width
+      height
+    }`,
+  }
+}

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

@@ -0,0 +1,156 @@
+import { g } from '../../..'
+import type { SimpleFieldTypeInfo } from '../../../types'
+import {
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  type FieldTypeFunc,
+  fieldType,
+  orderDirectionEnum,
+} from '../../../types'
+import { filters } from '../../filters'
+import { defaultIsRequired, makeValidateHook } from '../../non-null-graphql'
+import type { controller } from './views'
+
+export type IntegerFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  SimpleFieldTypeInfo<'Int'>
+> & {
+  isIndexed?: boolean | 'unique'
+  defaultValue?: number | null | { kind: 'autoincrement' }
+  validation?: {
+    isRequired?: boolean
+    min?: number
+    max?: number
+  }
+  db?: {
+    isNullable?: boolean
+    map?: string
+    extendPrismaSchema?: (field: string) => string
+  }
+}
+
+// for a signed 32-bit integer
+const MAX_INT = 0x7fffffff
+const MIN_INT = -0x80000000
+
+export function integer<ListTypeInfo extends BaseListTypeInfo>(
+  config: IntegerFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  const { defaultValue: defaultValue_, isIndexed, validation = {} } = config
+
+  const { isRequired = false, min, max } = validation
+  const defaultValue =
+    typeof defaultValue_ === 'number' ? defaultValue_ : (defaultValue_?.kind ?? null)
+
+  return meta => {
+    if (typeof defaultValue === 'number' && !Number.isInteger(defaultValue)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies a default value of: ${defaultValue} but it must be a valid finite number`
+      )
+    }
+    if (min !== undefined && !Number.isInteger(min)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.min: ${min} but it must be an integer`
+      )
+    }
+    if (max !== undefined && !Number.isInteger(max)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.max: ${max} but it must be an integer`
+      )
+    }
+    if (min !== undefined && (min > MAX_INT || min < MIN_INT)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.min: ${min} which is outside of the range of a 32-bit signed integer`
+      )
+    }
+    if (max !== undefined && (max > MAX_INT || max < MIN_INT)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.max: ${max} which is outside of the range of a 32-bit signed integer`
+      )
+    }
+    if (min !== undefined && max !== undefined && min > max) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies a validation.max that is less than the validation.min, and therefore has no valid options`
+      )
+    }
+
+    const hasAdditionalValidation = min !== undefined || max !== undefined
+    const { mode, validate } = makeValidateHook(
+      meta,
+      config,
+      hasAdditionalValidation
+        ? ({ resolvedData, operation, addValidationError }) => {
+            if (operation === 'delete') return
+
+            const value = resolvedData[meta.fieldKey]
+            if (typeof value === 'number') {
+              if (min !== undefined && value < min) {
+                addValidationError(`value must be greater than or equal to ${min}`)
+              }
+
+              if (max !== undefined && value > max) {
+                addValidationError(`value must be less than or equal to ${max}`)
+              }
+            }
+          }
+        : undefined,
+      defaultValue !== null
+    )
+
+    return fieldType({
+      kind: 'scalar',
+      mode,
+      scalar: 'Int',
+      index: isIndexed === true ? 'index' : isIndexed || undefined,
+      default:
+        typeof defaultValue === 'number'
+          ? { kind: 'literal', value: defaultValue }
+          : defaultValue === 'autoincrement'
+            ? { kind: 'autoincrement' }
+            : undefined,
+      map: config.db?.map,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+    })({
+      ...config,
+      ...defaultIsRequired(config, isRequired),
+      hooks: {
+        ...config.hooks,
+        validate,
+      },
+      input: {
+        uniqueWhere: isIndexed === 'unique' ? { arg: g.arg({ type: g.Int }) } : undefined,
+        where: {
+          arg: g.arg({ type: filters[meta.provider].Int[mode] }),
+          resolve: mode === 'optional' ? filters.resolveCommon : undefined,
+        },
+        create: {
+          arg: g.arg({
+            type: g.Int,
+            defaultValue: typeof defaultValue === 'number' ? defaultValue : undefined,
+          }),
+          resolve(value) {
+            if (value === undefined) {
+              if (defaultValue === 'autoincrement') return undefined
+              return defaultValue
+            }
+            return value
+          },
+        },
+        update: { arg: g.arg({ type: g.Int }) },
+        orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+      },
+      output: g.field({ type: g.Int }),
+      __ksTelemetryFieldTypeName: '@nixxie-cms/integer',
+      views: '@nixxie-cms/core/fields/types/integer/views',
+      getAdminMeta(): Parameters<typeof controller>[0]['fieldMeta'] {
+        return {
+          validation: {
+            min: min ?? MIN_INT,
+            max: max ?? MAX_INT,
+          },
+          defaultValue,
+        }
+      },
+    })
+  }
+}