@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,300 @@
+import { useLocale } from '@react-aria/i18n'
+import bytes, { type BytesOptions } from 'bytes'
+import { extname } from 'path'
+import {
+  type PropsWithChildren,
+  type ReactElement,
+  type SyntheticEvent,
+  Fragment,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { ActionButton } from '@keystar/ui/button'
+import { Field as KeystarField } from '@keystar/ui/field'
+import { Icon } from '@keystar/ui/icon'
+import { fileAudioIcon } from '@keystar/ui/icon/icons/fileAudioIcon'
+import { fileCodeIcon } from '@keystar/ui/icon/icons/fileCodeIcon'
+import { fileDigitIcon } from '@keystar/ui/icon/icons/fileDigitIcon'
+import { fileIcon } from '@keystar/ui/icon/icons/fileIcon'
+import { fileImageIcon } from '@keystar/ui/icon/icons/fileImageIcon'
+import { fileJsonIcon } from '@keystar/ui/icon/icons/fileJsonIcon'
+import { fileSpreadsheetIcon } from '@keystar/ui/icon/icons/fileSpreadsheetIcon'
+import { fileTextIcon } from '@keystar/ui/icon/icons/fileTextIcon'
+import { fileUpIcon } from '@keystar/ui/icon/icons/fileUpIcon'
+import { fileVideoIcon } from '@keystar/ui/icon/icons/fileVideoIcon'
+import { HStack, VStack } from '@keystar/ui/layout'
+import { css } from '@keystar/ui/style'
+import { Text } from '@keystar/ui/typography'
+
+import type { controller } from '.'
+import type { FieldProps } from '../../../../types'
+import type { FileValue } from './index'
+
+export function Field(props: FieldProps<typeof controller>) {
+  const { autoFocus, field, onChange, value } = props
+
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const errorMessage = createErrorMessage(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])
+
+  return (
+    <KeystarField label={field.label} description={field.description} errorMessage={errorMessage}>
+      {inputProps => (
+        <Fragment>
+          <FileView
+            isInvalid={Boolean(errorMessage)}
+            onFileTrigger={onFileTrigger}
+            onChange={onChange}
+            value={value}
+          />
+          <input
+            {...inputProps}
+            // TODO: add support for configurable file types
+            // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+            autoComplete="off"
+            autoFocus={autoFocus}
+            disabled={onChange === undefined}
+            hidden
+            key={inputKey}
+            name={field.fieldKey}
+            onChange={onUploadChange}
+            ref={inputRef}
+            type="file"
+          />
+        </Fragment>
+      )}
+    </KeystarField>
+  )
+}
+
+function FileView(props: {
+  onFileTrigger: () => void
+  isInvalid?: boolean
+  onChange?: (value: FileValue) => void
+  value: FileValue
+}) {
+  const { isInvalid, onFileTrigger, onChange, value } = props
+  const fileData = useFileData(value)
+
+  return (
+    <VStack gap="medium">
+      {isInvalid || !fileData ? null : (
+        <FileDetails {...fileData}>
+          {onChange && (
+            <HStack gap="regular" 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>
+          )}
+        </FileDetails>
+      )}
+
+      {!fileData && (
+        <HStack gap="regular">
+          <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 FileDetails(props: PropsWithChildren<FileData>) {
+  const trimStartStyles = useTrimStartStyles()
+
+  return (
+    <HStack
+      backgroundColor="canvas"
+      border="neutral"
+      borderRadius="regular"
+      gap="medium"
+      padding="medium"
+    >
+      <a href={props.href} download={props.name}>
+        <HStack
+          alignItems="center"
+          backgroundColor="surfaceTertiary"
+          borderRadius="small"
+          justifyContent="center"
+          height="100%"
+          UNSAFE_className={css({ aspectRatio: '1 / 1' })}
+        >
+          <Icon src={props.icon} size="medium" color="neutral" />
+        </HStack>
+      </a>
+      <VStack gap="medium" minWidth="alias.singleLineWidth" flex>
+        <Text>
+          <span className={css(trimStartStyles)} title={props.name}>
+            {props.name}
+          </span>
+        </Text>
+        <Text size="small" color="neutralSecondary">
+          {formatBytes(props.size)}
+        </Text>
+
+        {/* field controls dependant on value type */}
+        {props.children}
+      </VStack>
+    </HStack>
+  )
+}
+
+export function formatBytes(size: number, options = defaultBytesOptions(size)) {
+  return bytes(size, options)
+}
+
+function defaultBytesOptions(size: number): BytesOptions {
+  // increase precision for larger files
+  const GB = 1_000_000_000
+  const MB = 1_000_000
+  const decimalPlaces = size >= GB ? 2 : size >= MB ? 1 : 0
+
+  return { decimalPlaces }
+}
+
+type FileData = {
+  icon: ReactElement
+  name: string
+  size: number
+  href: string
+}
+
+function useFileData(value: FileValue): FileData | null {
+  const [objectUrl, setObjectUrl] = useState<string>('')
+  useEffect(() => {
+    if (value.kind === 'upload') {
+      const objectUrl = URL.createObjectURL(value.data.file)
+      setObjectUrl(objectUrl)
+      return () => {
+        URL.revokeObjectURL(objectUrl)
+      }
+    }
+  }, [value])
+  switch (value.kind) {
+    case 'from-server':
+      return {
+        icon: getFileIcon(value.data.filename),
+        name: value.data.filename,
+        size: value.data.filesize,
+        href: value.data.src,
+      }
+    case 'upload':
+      return {
+        icon: fileUpIcon,
+        name: value.data.file.name,
+        size: value.data.file.size,
+        href: objectUrl,
+      }
+    default:
+      return null
+  }
+}
+
+// prettier-ignore
+const FILE_TYPES = {
+  audio: new Set(['aac', 'aiff', 'alac', 'flac', 'm4a', 'mp3', 'ogg', 'wav', 'wma']),
+  binary: new Set(['bin', 'dat', 'exe', 'iso', 'pkg', 'rar', 'tar', 'zip']),
+  code: new Set(['c', 'cpp', 'cs', 'css', 'go', 'html', 'java', 'js', 'jsx', 'less', 'php', 'py', 'rb', 'rs', 'scss', 'ts', 'tsx', 'xml']),
+  image: new Set(['avif', 'bmp', 'gif', 'heic', 'ico', 'jpeg', 'jpg', 'png', 'svg', 'tiff', 'webp']),
+  json: new Set(['geojson', 'json', 'json5', 'jsonld']),
+  spreadsheet: new Set(['csv', 'ods', 'tsv', 'xls', 'xlsx']),
+  text: new Set(['doc', 'docx', 'eml', 'log', 'md', 'msg', 'odt', 'pdf', 'rtf', 'tex', 'txt']),
+  video: new Set(['avi', 'flv', 'm4v', 'mkv', 'mov', 'mp4', 'ogg', 'webm', 'wmv']),
+}
+
+function getFileIcon(filename: string) {
+  const extension = getExtension(filename)
+
+  if (FILE_TYPES.audio.has(extension)) return fileAudioIcon
+  if (FILE_TYPES.binary.has(extension)) return fileDigitIcon
+  if (FILE_TYPES.code.has(extension)) return fileCodeIcon
+  if (FILE_TYPES.image.has(extension)) return fileImageIcon
+  if (FILE_TYPES.json.has(extension)) return fileJsonIcon
+  if (FILE_TYPES.spreadsheet.has(extension)) return fileSpreadsheetIcon
+  if (FILE_TYPES.text.has(extension)) return fileTextIcon
+  if (FILE_TYPES.video.has(extension)) return fileVideoIcon
+
+  return fileIcon
+}
+function getExtension(filename: string) {
+  // `extname` returns e.g. ".mov", remove leading dot to match "mov"
+  return extname(filename).slice(1).toLowerCase()
+}
+
+export function useTrimStartStyles() {
+  const { direction } = useLocale()
+  return {
+    direction: direction === 'rtl' ? 'ltr' : 'rtl',
+    display: 'block',
+    overflow: 'hidden',
+    textAlign: direction === 'rtl' ? 'right' : 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  } as const
+}
+
+function createErrorMessage(value: FileValue) {
+  if (value.kind === 'upload') {
+    return validateFile(value.data)
+  }
+}
+
+export function validateFile({ validity }: { validity: ValidityState }) {
+  if (!validity.valid) {
+    return 'Something went wrong, please reload and try again.'
+  }
+}

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

@@ -0,0 +1,74 @@
+import type { CellComponent, FieldController, FieldControllerConfig } from '../../../../types'
+
+import { validateFile } from './Field'
+
+export { Field } from './Field'
+
+export const Cell: CellComponent<typeof controller> = ({ value }) => {
+  if (!value) return null
+  return value.filename
+}
+
+type FileData = {
+  src: string
+  filesize: number
+  filename: string
+}
+
+export type FileValue =
+  | { kind: 'empty' }
+  | {
+      kind: 'from-server'
+      data: FileData
+    }
+  | {
+      kind: 'upload'
+      data: {
+        file: File
+        validity: ValidityState
+      }
+      previous: FileValue
+    }
+  | { kind: 'remove'; previous?: Exclude<FileValue, { kind: 'remove' }> }
+
+type FileController = FieldController<FileValue>
+
+export function controller(config: FieldControllerConfig): FileController {
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    defaultValue: { kind: 'empty' },
+    deserialize(item) {
+      const value = item[config.fieldKey]
+      if (!value) return { kind: 'empty' }
+      return {
+        kind: 'from-server',
+        data: {
+          src: value.url,
+          filename: value.filename,
+          ref: value.ref,
+          filesize: value.filesize,
+          storage: value.storage,
+        },
+      }
+    },
+    serialize(value) {
+      if (value.kind === 'upload') {
+        return { [config.fieldKey]: { upload: value.data.file } }
+      }
+      if (value.kind === 'remove') {
+        return { [config.fieldKey]: null }
+      }
+      return {}
+    },
+    validate(value): boolean {
+      return value.kind !== 'upload' || validateFile(value.data) === undefined
+    },
+    graphqlSelection: `${config.fieldKey} {
+        url
+        filename
+        filesize
+      }`,
+  }
+}

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

@@ -0,0 +1,133 @@
+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 { controller } from './views'
+
+export type FloatFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  SimpleFieldTypeInfo<'Float'>
+> & {
+  isIndexed?: boolean | 'unique'
+  defaultValue?: number | null
+  validation?: {
+    isRequired?: boolean
+    min?: number
+    max?: number
+  }
+  db?: {
+    isNullable?: boolean
+    map?: string
+    extendPrismaSchema?: (field: string) => string
+  }
+}
+
+export function float<ListTypeInfo extends BaseListTypeInfo>(
+  config: FloatFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  const { defaultValue: defaultValue_, isIndexed, validation = {} } = config
+
+  const { isRequired = false, min, max } = validation
+  const defaultValue = defaultValue_ ?? null
+
+  return meta => {
+    if (defaultValue !== null && !Number.isFinite(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.isFinite(min)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.min: ${min} but it must be a valid finite number`
+      )
+    }
+    if (max !== undefined && !Number.isFinite(max)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.max: ${max} but it must be a valid finite number`
+      )
+    }
+    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
+    )
+
+    return fieldType({
+      kind: 'scalar',
+      mode,
+      scalar: 'Float',
+      index: isIndexed === true ? 'index' : isIndexed || undefined,
+      default:
+        typeof defaultValue === 'number' ? { kind: 'literal', value: defaultValue } : 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.Float }) } : undefined,
+        where: {
+          arg: g.arg({ type: filters[meta.provider].Float[mode] }),
+          resolve: mode === 'optional' ? filters.resolveCommon : undefined,
+        },
+        create: {
+          arg: g.arg({
+            type: g.Float,
+            defaultValue: typeof defaultValue === 'number' ? defaultValue : undefined,
+          }),
+          resolve(value) {
+            if (value === undefined) return defaultValue
+            return value
+          },
+        },
+        update: { arg: g.arg({ type: g.Float }) },
+        orderBy: { arg: g.arg({ type: orderDirectionEnum }) },
+      },
+      output: g.field({ type: g.Float }),
+      __ksTelemetryFieldTypeName: '@nixxie-cms/float',
+      views: '@nixxie-cms/core/fields/types/float/views',
+      getAdminMeta(): Parameters<typeof controller>[0]['fieldMeta'] {
+        return {
+          validation: {
+            min: min ?? null,
+            max: max ?? null,
+          },
+          defaultValue: defaultValue === null ? null : defaultValue.toString(),
+        }
+      },
+    })
+  }
+}