Field/json (#5779)

* json type init

* null values

* add initial tests + remove logs

* add json example

* fix package.json

* more fixes

* add docs

* more fixes

* update schema

* add example to directory, typo fix

* changeset

* fix example schema

* Update examples/json/README.md

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

* Update examples/json/README.md

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

* Update examples/json/README.md

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

* Update examples/json/README.md

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

* Update examples/README.md

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

* Update docs/pages/apis/fields.mdx

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

* Update .changeset/fuzzy-spiders-film.md

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>

* add error handling

* update exampel schema;

* Update packages-next/fields/src/types/json/Implementation.ts

* update grapqhl schema

* Update .changeset/fuzzy-spiders-film.md

Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>

* Update packages-next/fields/src/types/json/views/index.tsx

Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>

* remove displayMode

* JSONValue for defaultValue

* Update packages-next/fields/src/types/json/views/index.tsx

* prettier;

* Update schema.graphql

Co-authored-by: Tim Leslie <timl@thinkmill.com.au>
Co-authored-by: Mitchell Hamilton <mitchell@hamil.town>

.changeset/fuzzy-spiders-film.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/fields': minor
+---
+
+Added `json` field.

docs/pages/apis/fields.mdx

@@ -705,4 +705,31 @@ export default config({
 });
 ```
 
+### json
+
+A `json` field represents a JSON blob.
+Currently the `json` field is non-orderable and non-filterable.
+
+- `isRequired` (default: `false`): If `true` then this field can never be set to `null`.
+
+```typescript
+import { config, createSchema, list } from '@keystone-next/keystone/schema';
+import { cloudinaryImage } from '@keystone-next/cloudinary';
+
+export default config({
+  lists: createSchema({
+    ListName: list({
+      fields: {
+        fieldName: json({
+          isRequired: true,
+        }),
+        /* ... */
+      },
+    }),
+    /* ... */
+  }),
+  /* ... */
+});
+```
+
 export default ({ children }) => <Markdown>{children}</Markdown>;

examples/README.md

@@ -19,6 +19,7 @@ Each of the examples below demonstrates a particular feature of Keystone.
 You can use these projects to learn about, and experiment with specific features.
 
 - [`withAuth`](./with-auth): Adding password based authentication to your Keystone application.
+- [`JSON field`](./json): Using a JSON field in your Keystone application.
 - Data Seeding: Coming soon
 - GitHub SSO: Coming soon
 - Roles: Coming soon

examples/json/README.md

@@ -0,0 +1,33 @@
+## Base Project - JSON Field
+
+This project demonstrates the usage of the `json` field type.
+It builds on the [Task Manager](../todo) 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.
+
+🚀 Congratulations, you're now up and running with Keystone!
+
+## Features
+
+This example implements a `Packages` list. In this field we specify a `pkgjson` field which is a _required_ [`json` field type](https://next.keystonejs.com/apis/fields#json).
+This accepts any valid JSON including:
+
+- string node
+- number node
+- array node
+- object node
+
+As this is required, both inputting `null` in the Admin UI as well as leaving the input empty are not accepted. However try removing the `isRequired` config option from the field config. In doing so, you'll notice that both inputting the string `null` as well as an empty field will result in a `null` database value being stored.
+
+The JSON field type stores its value in the `jsonb` format, as specified by Prisma. However if `sqlite` is specified as the database type instead, then the value is stored as a `string`.

examples/json/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/json/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@keystone-next/example-json-field",
+  "version": "4.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "keystone-next dev",
+    "start": "keystone-next start",
+    "build": "keystone-next build"
+  },
+  "dependencies": {
+    "@keystone-next/fields": "^9.0.0",
+    "@keystone-next/keystone": "^18.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^4.2.4"
+  },
+  "engines": {
+    "node": "^12.20 || >= 14.13"
+  },
+  "repository": "https://github.com/keystonejs/keystone/tree/master/examples/json"
+}