Add additional custom-field examples, showing nesting and JSON

examples/custom-field/3-pair-field-json/index.ts

@@ -0,0 +1,112 @@
+import {
+  BaseListTypeInfo,
+  fieldType,
+  FieldTypeFunc,
+  CommonFieldConfig,
+} from '@keystone-6/core/types';
+import { graphql } from '@keystone-6/core';
+
+export type PairFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
+  CommonFieldConfig<ListTypeInfo>;
+
+type PairInput = {
+  left: string | null | undefined;
+  right: string | null | undefined;
+};
+type PairOutput = PairInput;
+
+const PairInput = graphql.inputObject({
+  name: 'PairJsonInput',
+  fields: {
+    left: graphql.arg({ type: graphql.String }),
+    right: graphql.arg({ type: graphql.String }),
+  },
+});
+
+const PairOutput = graphql.object<PairOutput>()({
+  name: 'PairJsonOutput',
+  fields: {
+    left: graphql.field({ type: graphql.String }),
+    right: graphql.field({ type: graphql.String }),
+  },
+});
+
+const PairFilter = graphql.inputObject({
+  name: 'PairJsonFilter',
+  fields: {
+    equals: graphql.arg({
+      type: PairInput,
+    }),
+  },
+});
+
+export function pair<ListTypeInfo extends BaseListTypeInfo>(
+  config: PairFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  function resolveInput(value: PairInput | null | undefined) {
+    const { left = null, right = null } = value ?? {};
+    return JSON.stringify({ left, right });
+  }
+
+  function resolveOutput(value: string | null) {
+    if (value === null) return { left: null, right: null };
+    return JSON.parse(value) as PairOutput;
+  }
+
+  function resolveWhere(value: null | { equals: PairInput | null | undefined }) {
+    if (value === null) {
+      throw new Error('PairFilter cannot be null');
+    }
+    if (value.equals === undefined) {
+      return {};
+    }
+    const json = resolveInput(value.equals);
+    return { equals: json };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  return meta =>
+    fieldType({
+      kind: 'scalar',
+      mode: 'optional',
+      // we should use 'Json', but it's complicated with sqlite
+      //   we are using String for the example
+      scalar: 'String',
+    })({
+      ...config,
+      input: {
+        where: {
+          arg: graphql.arg({ type: PairFilter }),
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          resolve(value, context) {
+            return resolveWhere(value);
+          },
+        },
+        create: {
+          arg: graphql.arg({ type: PairInput }),
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          resolve(value, context) {
+            return resolveInput(value);
+          },
+        },
+        update: {
+          arg: graphql.arg({ type: PairInput }),
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          resolve(value, context) {
+            return resolveInput(value);
+          },
+        },
+      },
+      output: graphql.field({
+        type: PairOutput,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        resolve({ value, item }, args, context, info) {
+          return resolveOutput(value);
+        },
+      }),
+      views: './3-pair-field-json/views',
+      getAdminMeta() {
+        return {};
+      },
+    });
+}

examples/custom-field/3-pair-field-json/views.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keystone-ui/fields';
+import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components';
+
+import {
+  CardValueComponent,
+  CellComponent,
+  FieldController,
+  FieldControllerConfig,
+  FieldProps,
+} from '@keystone-6/core/types';
+
+export function Field({ field, value, onChange, autoFocus }: FieldProps<typeof controller>) {
+  const disabled = onChange === undefined;
+  const { left = null, right = null } = value ?? {};
+
+  return (
+    <>
+      <FieldContainer as="fieldset">
+        <FieldLabel>{field.label} (Left)</FieldLabel>
+        <FieldDescription id={`${field.path}-description-left`}>
+          {field.description}
+        </FieldDescription>
+        <div>
+          <TextInput
+            type="text"
+            onChange={event => {
+              onChange?.({ left: event.target.value, right });
+            }}
+            disabled={disabled}
+            value={left || ''}
+            autoFocus={autoFocus}
+          />
+        </div>
+      </FieldContainer>
+      <FieldContainer as="fieldset">
+        <FieldLabel>{field.label} (Right)</FieldLabel>
+        <FieldDescription id={`${field.path}-description-right`}>
+          {field.description}
+        </FieldDescription>
+        <div>
+          <TextInput
+            type="text"
+            onChange={event => {
+              onChange?.({ left, right: event.target.value });
+            }}
+            disabled={disabled}
+            value={right || ''}
+            autoFocus={autoFocus}
+          />
+        </div>
+      </FieldContainer>
+    </>
+  );
+}
+
+export const Cell: CellComponent = ({ item, field, linkTo }) => {
+  let value = item[field.path] + '';
+  return linkTo ? <CellLink {...linkTo}>{value}</CellLink> : <CellContainer>{value}</CellContainer>;
+};
+Cell.supportsLinkTo = true;
+
+export const CardValue: CardValueComponent = ({ item, field }) => {
+  return (
+    <FieldContainer>
+      <FieldLabel>{field.label}</FieldLabel>
+      {item[field.path]}
+    </FieldContainer>
+  );
+};
+
+export const controller = (
+  config: FieldControllerConfig<{}>
+): FieldController<
+  {
+    left: string | null;
+    right: string | null;
+  } | null,
+  string
+> => {
+  return {
+    path: config.path,
+    label: config.label,
+    description: config.description,
+    graphqlSelection: `${config.path} {
+        left
+        right
+      }`,
+    defaultValue: null,
+    deserialize: data => {
+      const value = data[config.path];
+      return typeof value === 'object' ? value : null;
+    },
+    serialize: value => ({ [config.path]: value }),
+  };
+};

examples/custom-field/3-pair-field-nested/index.ts

@@ -0,0 +1,122 @@
+import {
+  BaseListTypeInfo,
+  fieldType,
+  FieldTypeFunc,
+  CommonFieldConfig,
+} from '@keystone-6/core/types';
+import { graphql } from '@keystone-6/core';
+
+export type PairFieldConfig<ListTypeInfo extends BaseListTypeInfo> =
+  CommonFieldConfig<ListTypeInfo>;
+
+type PairInput = {
+  left: string | null | undefined;
+  right: string | null | undefined;
+};
+type PairOutput = PairInput;
+
+const PairInput = graphql.inputObject({
+  name: 'PairNestedInput',
+  fields: {
+    left: graphql.arg({ type: graphql.String }),
+    right: graphql.arg({ type: graphql.String }),
+  },
+});
+
+const PairOutput = graphql.object<PairOutput>()({
+  name: 'PairNestedOutput',
+  fields: {
+    left: graphql.field({ type: graphql.String }),
+    right: graphql.field({ type: graphql.String }),
+  },
+});
+
+const PairFilter = graphql.inputObject({
+  name: 'PairNestedFilter',
+  fields: {
+    equals: graphql.arg({
+      type: PairInput,
+    }),
+  },
+});
+
+export function pair<ListTypeInfo extends BaseListTypeInfo>(
+  config: PairFieldConfig<ListTypeInfo> = {}
+): FieldTypeFunc<ListTypeInfo> {
+  function resolveInput(value: PairInput | null | undefined) {
+    const { left = null, right = null } = value ?? {};
+    return { left, right };
+  }
+
+  function resolveOutput(value: PairOutput) {
+    return value;
+  }
+
+  function resolveWhere(value: null | { equals: PairInput | null | undefined }) {
+    if (value === null) {
+      throw new Error('PairFilter cannot be null');
+    }
+    if (value.equals === undefined) {
+      return {};
+    }
+    const { left, right } = resolveInput(value.equals);
+    return {
+      left: { equals: left },
+      right: { equals: right },
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  return meta =>
+    fieldType({
+      kind: 'multi',
+      fields: {
+        left: {
+          kind: 'scalar',
+          mode: 'optional',
+          scalar: 'String',
+        },
+        right: {
+          kind: 'scalar',
+          mode: 'optional',
+          scalar: 'String',
+        },
+      },
+    })({
+      ...config,
+      input: {
+        where: {
+          arg: graphql.arg({ type: PairFilter }),
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          resolve(value, context) {
+            return resolveWhere(value);
+          },
+        },
+        create: {
+          arg: graphql.arg({ type: PairInput }),
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          resolve(value, context) {
+            return resolveInput(value);
+          },
+        },
+        update: {
+          arg: graphql.arg({ type: PairInput }),
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          resolve(value, context) {
+            return resolveInput(value);
+          },
+        },
+      },
+      output: graphql.field({
+        type: PairOutput,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        resolve({ value, item }, args, context, info) {
+          return resolveOutput(value);
+        },
+      }),
+      views: './3-pair-field-nested/views',
+      getAdminMeta() {
+        return {};
+      },
+    });
+}