@nixxie-cms/core 1.0.0

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

@@ -0,0 +1,151 @@
+import { useState } from 'react'
+import { useFilter, useListFormatter } from '@react-aria/i18n'
+
+import { Checkbox, CheckboxGroup } from '@keystar/ui/checkbox'
+import { Combobox, Item } from '@keystar/ui/combobox'
+import { VStack } from '@keystar/ui/layout'
+import { TagGroup } from '@keystar/ui/tag'
+import { Text } from '@keystar/ui/typography'
+
+import type {
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+} from '../../../../types'
+
+export function Field(props: FieldProps<typeof controller>) {
+  if (props.field.displayMode === 'checkboxes') return <CheckboxesModeField {...props} />
+  return <SelectModeField {...props} />
+}
+
+function SelectModeField(props: FieldProps<typeof controller>) {
+  const { field, onChange, value } = props
+  const [filterText, setFilterText] = useState('')
+  const { contains } = useFilter({ sensitivity: 'base' })
+  const items = field.options.filter(option => !value.some(x => x.value === option.value))
+  const filteredItems = filterText ? items.filter(item => contains(item.label, filterText)) : items
+
+  return (
+    <VStack gap="regular">
+      <Combobox
+        label={field.label}
+        description={field.description}
+        isReadOnly={onChange === undefined}
+        items={filteredItems}
+        loadingState="idle"
+        onInputChange={setFilterText}
+        inputValue={filterText}
+        // selectedKey={null}
+        onSelectionChange={key => {
+          if (key == null) return
+          onChange?.([...value, field.valuesToOptionsWithStringValues[key]])
+        }}
+        width="auto"
+      >
+        {item => <Item key={item.value}>{item.label}</Item>}
+      </Combobox>
+
+      <TagGroup
+        aria-label={`${field.label} selected items`}
+        items={value}
+        maxRows={2}
+        onRemove={keys => {
+          const key = keys.values().next().value
+          onChange?.(value.filter(x => x.value !== key))
+        }}
+        renderEmptyState={() => (
+          <Text color="neutralSecondary" size="small">
+            No items…
+          </Text>
+        )}
+      >
+        {item => <Item key={item.value}>{item.label}</Item>}
+      </TagGroup>
+    </VStack>
+  )
+}
+
+function CheckboxesModeField(props: FieldProps<typeof controller>) {
+  const { field, onChange, value } = props
+  return (
+    <CheckboxGroup
+      label={field.label}
+      description={field.description}
+      isReadOnly={onChange === undefined}
+      value={value.map(x => x.value)}
+      onChange={keys => {
+        onChange?.(keys.map(key => field.valuesToOptionsWithStringValues[key]))
+      }}
+    >
+      {field.options.map(option => (
+        <Checkbox key={option.value} value={option.value}>
+          {option.label}
+        </Checkbox>
+      ))}
+    </CheckboxGroup>
+  )
+}
+
+export const Cell: CellComponent<typeof controller> = ({ value = [], field }) => {
+  const listFormatter = useListFormatter({ style: 'short', type: 'conjunction' })
+  const labels = (value as string[]).map(x => field.valuesToOptionsWithStringValues[x].label)
+
+  let cellContent = null
+  if (value.length > 3) {
+    cellContent = listFormatter.format([labels[0], `${value.length - 1} more`])
+  } else {
+    cellContent = listFormatter.format(labels)
+  }
+
+  return <Text>{cellContent}</Text>
+}
+
+export type AdminMultiSelectFieldMeta = {
+  options: readonly { label: string; value: string | number }[]
+  type: 'string' | 'integer' | 'enum'
+  displayMode: 'checkboxes' | 'select'
+  defaultValue: string[] | number[]
+}
+
+type Config = FieldControllerConfig<AdminMultiSelectFieldMeta>
+type Option = { label: string; value: string }
+type Value = readonly Option[]
+
+export function controller(config: Config): FieldController<Value, Option[]> & {
+  displayMode: 'checkboxes' | 'select'
+  options: Option[]
+  type: 'string' | 'integer' | 'enum'
+  valuesToOptionsWithStringValues: Record<string, Option>
+} {
+  const optionsWithStringValues = config.fieldMeta.options.map(x => ({
+    label: x.label,
+    value: x.value.toString(),
+  }))
+
+  const valuesToOptionsWithStringValues = Object.fromEntries(
+    optionsWithStringValues.map(option => [option.value, option])
+  )
+  const parseValue = (value: string) =>
+    config.fieldMeta.type === 'integer' ? parseInt(value) : value
+
+  return {
+    fieldKey: config.fieldKey,
+    label: config.label,
+    description: config.description,
+    displayMode: config.fieldMeta.displayMode,
+    type: config.fieldMeta.type,
+    options: optionsWithStringValues,
+    valuesToOptionsWithStringValues,
+    defaultValue: config.fieldMeta.defaultValue.map(x => valuesToOptionsWithStringValues[x]),
+    deserialize: data => {
+      // if we get null from the GraphQL API (which will only happen if field read access control failed)
+      // we'll just show it as nothing being selected for now.
+      const values: readonly string[] | readonly number[] = data[config.fieldKey] ?? []
+      const selectedOptions = values.map(x => valuesToOptionsWithStringValues[x])
+      return selectedOptions
+    },
+    serialize: value => ({ [config.fieldKey]: value.map(x => parseValue(x.value)) }),
+    graphqlSelection: config.fieldKey,
+  }
+}

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

@@ -0,0 +1,241 @@
+import bcryptjs from 'bcryptjs'
+// @ts-expect-error
+import dumbPasswords from 'dumb-passwords'
+import { userInputError } from '../../../lib/core/graphql-errors'
+import {
+  type BaseListTypeInfo,
+  type CommonFieldConfig,
+  type FieldTypeFunc,
+  fieldType,
+} from '../../../types'
+import { g } from '../../..'
+import { makeValidateHook, defaultIsRequired } from '../../non-null-graphql'
+import { isObjectType, type GraphQLSchema } from 'graphql'
+import type { InferValueFromInputType } from '@graphql-ts/schema'
+import type { controller } from './views'
+
+type FieldTypeInfo = {
+  item: string | null
+  inputs: {
+    where: InferValueFromInputType<typeof PasswordFilter> | undefined
+    create: string | null | undefined
+    update: string | null | undefined
+    uniqueWhere: never
+    orderBy: never
+  }
+  prisma: {
+    create: string | null | undefined
+    update: string | null | undefined
+  }
+}
+
+export type PasswordFieldConfig<ListTypeInfo extends BaseListTypeInfo> = CommonFieldConfig<
+  ListTypeInfo,
+  FieldTypeInfo
+> & {
+  validation?: {
+    isRequired?: boolean
+    rejectCommon?: boolean
+    match?: { regex: RegExp; explanation?: string }
+    length?: {
+      /** @default 8 */
+      min?: number
+      max?: number
+    }
+  }
+  db?: {
+    isNullable?: boolean
+    map?: string
+    extendPrismaSchema?: (field: string) => string
+  }
+  kdf?: KDF
+}
+
+type KDF = {
+  compare(preImage: string, hash: string): Promise<boolean>
+  hash(preImage: string): Promise<string>
+}
+
+const PasswordState = g.object<{ isSet: boolean }>()({
+  name: 'PasswordState',
+  fields: {
+    isSet: g.field({ type: g.nonNull(g.Boolean) }),
+  },
+})
+
+const PasswordFilter = g.inputObject({
+  name: 'PasswordFilter',
+  fields: {
+    isSet: g.arg({ type: g.nonNull(g.Boolean) }),
+  },
+})
+
+export function password<ListTypeInfo extends BaseListTypeInfo>(
+  config: PasswordFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  const {
+    kdf = {
+      hash: secret => {
+        // note this is slightly different to checking .length > 72 because
+        // bcrypt will truncate to 72 bytes after utf8 encoding
+        // not JS string length which may be different since that's the utf16 length
+        // (though using characters in the error message makes sense since users shouldn't have to think about bytes and it aligns with the validation messages below)
+        if (bcryptjs.truncates(secret))
+          throw new Error('value must be no longer than 72 characters')
+        return bcryptjs.hash(secret, 10)
+      },
+      compare: (secret, hash) => bcryptjs.compare(secret, hash),
+    },
+    validation = {},
+  } = config
+  const { isRequired = false, rejectCommon = false, match, length: { max } = {} } = validation
+  const min = isRequired ? (validation.length?.min ?? 8) : validation.length?.min
+
+  return meta => {
+    if ((config as any).isIndexed === 'unique') {
+      throw Error("isIndexed: 'unique' is not a supported option for field type password")
+    }
+    if (min !== undefined && (!Number.isInteger(min) || min < 0)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.length.min: ${min} but it must be a positive integer`
+      )
+    }
+    if (max !== undefined && (!Number.isInteger(max) || max < 0)) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.length.max: ${max} but it must be a positive integer`
+      )
+    }
+    if (isRequired && min !== undefined && min === 0) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.isRequired: true and validation.length.min: 0, this is not allowed because validation.isRequired implies at least a min length of 1`
+      )
+    }
+    if (isRequired && max !== undefined && max === 0) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies validation.isRequired: true and validation.length.max: 0, this is not allowed because validation.isRequired implies at least a max length of 1`
+      )
+    }
+    if (min !== undefined && max !== undefined && min > max) {
+      throw new Error(
+        `${meta.listKey}.${meta.fieldKey} specifies a validation.length.max that is less than the validation.length.min, and therefore has no valid options`
+      )
+    }
+
+    function inputResolver(val: string | null | undefined) {
+      if (val == null) return val
+      return kdf.hash(val)
+    }
+
+    const hasAdditionalValidation = match || rejectCommon || min !== undefined || max !== undefined
+    const { mode, validate } = makeValidateHook(
+      meta,
+      config,
+      hasAdditionalValidation
+        ? ({ inputData, operation, addValidationError }) => {
+            if (operation === 'delete') return
+
+            const value = inputData[meta.fieldKey] // we use inputData, as resolveData is hashed
+            if (value != null) {
+              if (min !== undefined && value.length < min) {
+                if (min === 1) {
+                  addValidationError(`value must not be empty`)
+                } else {
+                  addValidationError(`value must be at least ${min} characters long`)
+                }
+              }
+              if (max !== undefined && value.length > max) {
+                addValidationError(`value must be no longer than ${max} characters`)
+              }
+              if (match && !match.regex.test(value)) {
+                addValidationError(match.explanation ?? `value must match ${match.regex}`)
+              }
+              if (rejectCommon && dumbPasswords.check(value)) {
+                addValidationError(`value is too common and is not allowed`)
+              }
+            }
+          }
+        : undefined
+    )
+
+    return fieldType({
+      kind: 'scalar',
+      scalar: 'String',
+      mode,
+      map: config.db?.map,
+      extendPrismaSchema: config.db?.extendPrismaSchema,
+    })({
+      ...config,
+      ...defaultIsRequired(config, isRequired),
+      hooks: {
+        ...config.hooks,
+        validate,
+      },
+      input: {
+        where:
+          mode === 'required'
+            ? undefined
+            : {
+                arg: g.arg({ type: PasswordFilter }),
+                resolve(val) {
+                  if (val === null) throw userInputError('Password filters cannot be set to null')
+                  if (val.isSet) return { not: null }
+                  return null
+                },
+              },
+        create: {
+          arg: g.arg({ type: g.String }),
+          resolve(val) {
+            if (val === undefined) return null
+            return inputResolver(val)
+          },
+        },
+        update: {
+          arg: g.arg({ type: g.String }),
+          resolve: inputResolver,
+        },
+      },
+      __ksTelemetryFieldTypeName: '@nixxie-cms/password',
+      views: '@nixxie-cms/core/fields/types/password/views',
+      getAdminMeta: (): Parameters<typeof controller>[0]['fieldMeta'] => ({
+        isNullable: mode === 'optional',
+        validation: {
+          rejectCommon,
+          match: match
+            ? {
+                regex: {
+                  source: match.regex.source,
+                  flags: match.regex.flags,
+                },
+                explanation: match.explanation ?? `value must match ${match.regex}`,
+              }
+            : null,
+          length: {
+            max: max ?? null,
+            min: min ?? 8,
+          },
+        },
+      }),
+      output: g.field({
+        type: PasswordState,
+        resolve(val) {
+          return { isSet: val.value !== null }
+        },
+        extensions: {
+          nixxieKDF: kdf,
+        },
+      }),
+    })
+  }
+}
+
+export function getPasswordFieldKDF(
+  schema: GraphQLSchema,
+  listKey: string,
+  fieldKey: string
+): KDF | null {
+  const gqlOutputType = schema.getType(listKey)
+  if (!isObjectType(gqlOutputType)) return null
+  const passwordField = gqlOutputType.getFields()[fieldKey]
+  if (!passwordField?.extensions.nixxieKDF) return null
+  return passwordField.extensions.nixxieKDF as KDF
+}