Custom field example (keystonejs#6051)

.github/workflows/tests.yml

@@ -259,6 +259,7 @@ jobs:
             'task-manager.test.ts',
             'testing.test.ts',
             'with-auth.test.ts',
+            'custom-field.test.ts',
           ]
       fail-fast: false
     steps:

examples/README.md

@@ -24,6 +24,7 @@ Each project below demonstrates a Keystone feature you can learn about and exper
 - [Virtual field](./virtual-field): Adds virtual fields to the Blog base.
 - [Document field](./document-field): Adds document fields to the Blog base.
 - [Testing](./testing): Adds tests with `@keystone-next/testing` to the `withAuth()` example.
+- [Custom field](./custom-field): Adds a custom `stars` field to the Blog base.
 
 ## Running examples
 

examples/custom-field/README.md

@@ -0,0 +1,21 @@
+## Feature Example - Custom Field
+
+This project demonstrates how to create a custom field that allows users to select a number of stars.
+It builds on the [Blog](../blog) starter project.
+
+## Instructions
+
+To run this project, clone the Keystone repository locally then navigate to this directory and run:
+
+```shell
+yarn dev
+```
+
+This will start the Admin UI at [localhost:3000](http://localhost:3000).
+You can use the Admin UI to create items in your database.
+
+You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.
+
+## Stars field
+
+The `stars` fields in the `stars-field` directory shows a custom field that validates that the value is between 0 and some maximum number of stars and shows a radio input to select the number of stars in the Admin UI. The backend for the field type is in `stars-field/index.ts` and the frontend is in `stars-field/views.tsx`.

examples/custom-field/keystone.ts

@@ -0,0 +1,10 @@
+import { config } from '@keystone-next/keystone/schema';
+import { lists } from './schema';
+
+export default config({
+  db: {
+    provider: 'sqlite',
+    url: process.env.DATABASE_URL || 'file:./keystone-example.db',
+  },
+  lists,
+});

examples/custom-field/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@keystone-next/example-custom-field",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "keystone-next dev",
+    "start": "keystone-next start",
+    "build": "keystone-next build"
+  },
+  "dependencies": {
+    "@keystone-next/fields": "^11.0.0",
+    "@keystone-next/keystone": "^21.0.2",
+    "@keystone-next/types": "^21.0.1",
+    "@keystone-ui/fields": "^4.1.2",
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "typescript": "^4.3.4"
+  },
+  "engines": {
+    "node": "^12.20 || >= 14.13"
+  },
+  "repository": "https://github.com/keystonejs/keystone/tree/master/examples/custom-field"
+}