Query Builder Field Type

examples/field-query-builder/README.md

@@ -0,0 +1,36 @@
+## Feature Example - Query Builder
+
+This project demonstrates how to configure a `queryBuilder` field in your Keystone system. It uses the `@react-awesome-query-builder` library to provide a user-friendly interface for building complex queries. This tool allows users, typically non-programmers, to construct and manipulate queries without needing to write SQL or other query languages directly. It's particularly useful for applications involving data analysis or any scenario where users need to filter or retrieve specific data sets from a larger database.
+
+## Instructions
+
+To run this project, clone the Keystone repository locally, run `pnpm install` at the root of the repository then navigate to this directory and run:
+
+```shell
+pnpm 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.
+
+In a separate terminal, start the frontend dev server:
+
+```
+pnpm dev:site
+```
+
+This will start the frontend at [localhost:3001](http://localhost:3001).
+
+## Configuring
+
+The project contains one `queryBuilder` field which shows how to use the field configuration options to customise the document editor in the Admin UI.
+
+### `Report.query`
+
+This field shows an example of using statically defined (config.fields)[https://github.com/ukrbublik/react-awesome-query-builder/blob/master/CONFIG.adoc#configfields].
+
+## Try it out in CodeSandbox 🧪
+
+You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL <https://githubbox.com/keystonejs/keystone/tree/main/examples/field-query-builder>. You can also fork this sandbox to make your own changes.

examples/field-query-builder/common.ts

@@ -0,0 +1,217 @@
+const common = {
+  cardinalDirections: [
+    { value: 'SE', title: 'South East' },
+    { value: 'S', title: 'South' },
+    { value: 'SW', title: 'South West' },
+    { value: 'W', title: 'West' },
+    { value: 'NW', title: 'North West' },
+    { value: 'N', title: 'North' },
+    { value: 'NE', title: 'North East' },
+    { value: 'E', title: 'East' },
+  ],
+  streetSuffixes: [
+    { value: 'ALY', title: 'Alley' },
+    { value: 'ANX', title: 'Annex' },
+    { value: 'ARC', title: 'Arcade' },
+    { value: 'AVE', title: 'Avenue' },
+    { value: 'AVDA', title: 'Avenida' },
+    { value: 'BLF', title: 'Bluff' },
+    { value: 'BLVD', title: 'Boulevard' },
+    { value: 'BR', title: 'Branch' },
+    { value: 'BRG', title: 'Bridge' },
+    { value: 'BRK', title: 'Brook' },
+    { value: 'BTM', title: 'Bottom' },
+    { value: 'BYU', title: 'Bayou' },
+    { value: 'CALLE', title: 'Calle' },
+    { value: 'CAMINO', title: 'Camino' },
+    { value: 'CIR', title: 'Circle' },
+    { value: 'CLF', title: 'Cliff' },
+    { value: 'CLFS', title: 'Cliffs' },
+    { value: 'CMN', title: 'Common' },
+    { value: 'CMNO', title: 'Camino' },
+    { value: 'CORS', title: 'Corner' },
+    { value: 'COURT', title: 'Court' },
+    { value: 'CP', title: 'Camp' },
+    { value: 'CPE', title: 'Cape' },
+    { value: 'CRK', title: 'Creek' },
+    { value: 'CROSSING', title: 'Crossing' },
+    { value: 'CSWY', title: 'Causeway' },
+    { value: 'CT', title: 'Court' },
+    { value: 'CTS', title: 'Courts' },
+    { value: 'CV', title: 'Cove' },
+    { value: 'CYN', title: 'Canyon' },
+    { value: 'DL', title: 'Dale' },
+    { value: 'DM', title: 'Dam' },
+    { value: 'DR', title: 'Drive' },
+    { value: 'DRS', title: 'Drives' },
+    { value: 'ENT', title: 'Entrance' },
+    { value: 'EST', title: 'Estate' },
+    { value: 'ESTS', title: 'Estates' },
+    { value: 'EXPY', title: 'Expressway' },
+    { value: 'EXT', title: 'Extension' },
+    { value: 'EXTS', title: 'Extensions' },
+    { value: 'FLD', title: 'Field' },
+    { value: 'FLDS', title: 'Fields' },
+    { value: 'FLS', title: 'Falls' },
+    { value: 'FLT', title: 'Flat' },
+    { value: 'FM', title: 'Farm' },
+    { value: 'FRD', title: 'Ford' },
+    { value: 'FRG', title: 'Forge' },
+    { value: 'FRK', title: 'Fork' },
+    { value: 'FRKS', title: 'Forks' },
+    { value: 'FRST', title: 'Forest' },
+    { value: 'FRY', title: 'Ferry' },
+    { value: 'FWY', title: 'Freeway' },
+    { value: 'GDNS', title: 'Gardens' },
+    { value: 'GLN', title: 'Glen' },
+    { value: 'GRN', title: 'Green' },
+    { value: 'GRNS', title: 'Greens' },
+    { value: 'GRVS', title: 'Grove' },
+    { value: 'GTWY', title: 'Gateway' },
+    { value: 'HBR', title: 'Harbor' },
+    { value: 'HVN', title: 'Haven' },
+    { value: 'HWY', title: 'Highway' },
+    { value: 'INLT', title: 'Inlet' },
+    { value: 'IS', title: 'Island' },
+    { value: 'ISLE', title: 'Isle' },
+    { value: 'JCT', title: 'Junction' },
+    { value: 'KNL', title: 'Knoll' },
+    { value: 'KNLS', title: 'Knolls' },
+    { value: 'KY', title: 'Key' },
+    { value: 'KYS', title: 'Keys' },
+    { value: 'LCK', title: 'Lock' },
+    { value: 'LCKS', title: 'Locks' },
+    { value: 'LDG', title: 'Lodge' },
+    { value: 'LF', title: 'Loaf' },
+    { value: 'LGT', title: 'Light' },
+    { value: 'LGTS', title: 'Lights' },
+    { value: 'LNDG', title: 'Landing' },
+    { value: 'LN', title: 'Lane' },
+    { value: 'LKS', title: 'Lakes' },
+    { value: 'MNR', title: 'Manor' },
+    { value: 'MDW', title: 'Meadow' },
+    { value: 'MDWS', title: 'Meadows' },
+    { value: 'MEWS', title: 'Mews' },
+    { value: 'MLS', title: 'Mills' },
+    { value: 'MSN', title: 'Mission' },
+    { value: 'MT', title: 'Mount' },
+    { value: 'MTN', title: 'Mountain' },
+    { value: 'MTNS', title: 'Mountains' },
+    { value: 'MTWY', title: 'Motorway' },
+    { value: 'NCK', title: 'Neck' },
+    { value: 'ORCH', title: 'Orchard' },
+    { value: 'PARK', title: 'Park' },
+    { value: 'PARKWAY', title: 'Parkway' },
+    { value: 'PASAJE', title: 'Pasaje' },
+    { value: 'PASEO', title: 'Paseo' },
+    { value: 'PATH', title: 'Path' },
+    { value: 'PH', title: 'Path' },
+    { value: 'PIKE', title: 'Pike' },
+    { value: 'PL', title: 'Place' },
+    { value: 'PLN', title: 'Plain' },
+    { value: 'PLNS', title: 'Plains' },
+    { value: 'PLZ', title: 'Plaza' },
+    { value: 'PNES', title: 'Pines' },
+    { value: 'PRT', title: 'Port' },
+    { value: 'PTS', title: 'Points' },
+    { value: 'RADL', title: 'Radial' },
+    { value: 'RAMP', title: 'Ramp' },
+    { value: 'RD', title: 'Road' },
+    { value: 'RDG', title: 'Ridge' },
+    { value: 'RDGS', title: 'Ridges' },
+    { value: 'RIV', title: 'River' },
+    { value: 'RNCH', title: 'Ranch' },
+    { value: 'RPD', title: 'Rapid' },
+    { value: 'RPDS', title: 'Rapids' },
+    { value: 'RST', title: 'Rest' },
+    { value: 'ROUTE', title: 'Route' },
+    { value: 'ROW', title: 'Row' },
+    { value: 'RUE', title: 'Rue' },
+    { value: 'RUN', title: 'Run' },
+    { value: 'SHL', title: 'Shoal' },
+    { value: 'SHLS', title: 'Shoals' },
+    { value: 'SHR', title: 'Shore' },
+    { value: 'SHRS', title: 'Shores' },
+    { value: 'SKWY', title: 'Skyway' },
+    { value: 'SPG', title: 'Spring' },
+    { value: 'SPGS', title: 'Springs' },
+    { value: 'SPUR', title: 'Spur' },
+    { value: 'SQ', title: 'Square' },
+    { value: 'SQS', title: 'Squares' },
+    { value: 'STA', title: 'Station' },
+    { value: 'STRA', title: 'Stravenue' },
+    { value: 'STRM', title: 'Stream' },
+    { value: 'ST', title: 'Street' },
+    { value: 'STS', title: 'Streets' },
+    { value: 'TER', title: 'Terrace' },
+    { value: 'TPKE', title: 'Turnpike' },
+    { value: 'TRCE', title: 'Trace' },
+    { value: 'TRAK', title: 'Track' },
+    { value: 'TRL', title: 'Trail' },
+    { value: 'TRWY', title: 'Throughway' },
+    { value: 'TUNL', title: 'Tunnel' },
+    { value: 'US', title: 'United States' },
+    { value: 'UN', title: 'Union' },
+    { value: 'VALLEY', title: 'Valley' },
+    { value: 'VIADUCT', title: 'Viaduct' },
+    { value: 'VL', title: 'Ville' },
+    { value: 'VW', title: 'View' },
+    { value: 'VWS', title: 'Views' },
+    { value: 'VLG', title: 'Village' },
+  ],
+  states: [
+    { value: 'AK', title: 'Alaska' },
+    { value: 'AL', title: 'Alabama' },
+    { value: 'AR', title: 'Arkansas' },
+    { value: 'AZ', title: 'Arizona' },
+    { value: 'CA', title: 'California' },
+    { value: 'CO', title: 'Colorado' },
+    { value: 'CT', title: 'Connecticut' },
+    { value: 'DC', title: 'District of Columbia' },
+    { value: 'DE', title: 'Delaware' },
+    { value: 'FL', title: 'Florida' },
+    { value: 'GA', title: 'Georgia' },
+    { value: 'HI', title: 'Hawaii' },
+    { value: 'IA', title: 'Iowa' },
+    { value: 'ID', title: 'Idaho' },
+    { value: 'IL', title: 'Illinois' },
+    { value: 'IN', title: 'Indiana' },
+    { value: 'KS', title: 'Kansas' },
+    { value: 'KY', title: 'Kentucky' },
+    { value: 'LA', title: 'Louisiana' },
+    { value: 'MA', title: 'Massachusetts' },
+    { value: 'MD', title: 'Maryland' },
+    { value: 'ME', title: 'Maine' },
+    { value: 'MI', title: 'Michigan' },
+    { value: 'MN', title: 'Minnesota' },
+    { value: 'MO', title: 'Missouri' },
+    { value: 'MS', title: 'Mississippi' },
+    { value: 'MT', title: 'Montana' },
+    { value: 'NC', title: 'North Carolina' },
+    { value: 'ND', title: 'North Dakota' },
+    { value: 'NE', title: 'Nebraska' },
+    { value: 'NH', title: 'New Hampshire' },
+    { value: 'NJ', title: 'New Jersey' },
+    { value: 'NM', title: 'New Mexico' },
+    { value: 'NV', title: 'Nevada' },
+    { value: 'NY', title: 'New York' },
+    { value: 'OH', title: 'Ohio' },
+    { value: 'OK', title: 'Oklahoma' },
+    { value: 'OR', title: 'Oregon' },
+    { value: 'PA', title: 'Pennsylvania' },
+    { value: 'RI', title: 'Rhode Island' },
+    { value: 'SC', title: 'South Carolina' },
+    { value: 'SD', title: 'South Dakota' },
+    { value: 'TN', title: 'Tennessee' },
+    { value: 'TX', title: 'Texas' },
+    { value: 'UT', title: 'Utah' },
+    { value: 'VA', title: 'Virginia' },
+    { value: 'VT', title: 'Vermont' },
+    { value: 'WA', title: 'Washington' },
+    { value: 'WI', title: 'Wisconsin' },
+    { value: 'WV', title: 'West Virginia' },
+    { value: 'WY', title: 'Wyoming' },
+  ],
+};
+
+export default common

examples/field-query-builder/keystone.ts

@@ -0,0 +1,14 @@
+import { config } from '@keystone-6/core'
+import { fixPrismaPath } from '../example-utils'
+import { lists } from './schema'
+
+export default config({
+  db: {
+    provider: 'sqlite',
+    url: process.env.DATABASE_URL || 'file:./keystone-example.db',
+
+    // WARNING: this is only needed for our monorepo examples, dont do this
+    ...fixPrismaPath,
+  },
+  lists,
+})

examples/field-query-builder/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/field-query-builder/next.config.js

@@ -0,0 +1,5 @@
+// you don't need this if you're building something outside of the Keystone repo
+
+const withPreconstruct = require('@preconstruct/next')
+
+module.exports = withPreconstruct()

examples/field-query-builder/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@keystone-6/example-document-field",
+  "version": "0.1.3",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "keystone dev",
+    "dev:site": "next dev -p 3001",
+    "start": "keystone start",
+    "build": "keystone build",
+    "postinstall": "keystone postinstall"
+  },
+  "dependencies": {
+    "@keystone-6/core": "^6.0.0",
+    "@keystone-6/document-renderer": "^1.1.0",
+    "@keystone-6/fields-query-builder": "workspace:^",
+    "@preconstruct/next": "^4.0.0",
+    "@prisma/client": "^5.0.0",
+    "next": "^13.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "prisma": "^5.0.0",
+    "typescript": "~5.0.0"
+  }
+}

examples/field-query-builder/sandbox.config.json

@@ -0,0 +1,7 @@
+{
+  "template": "node",
+  "container": {
+    "startScript": "keystone dev",
+    "node": "20"
+  }
+}