feat: explicitly exports fields for reuse #35 (#39)

packages/plugin-form-builder/README.md

@@ -65,8 +65,6 @@ export default config;
   }
   ```
 
-  You can also provide your own custom field definitions by passing a new [Payload Block](https://payloadcms.com/docs/fields/blocks#block-configs) object into `fields`.
-
 - `redirectRelationships`
 
   An array of collection slugs that, when enabled, are populated as options in form redirect fields.
@@ -115,6 +113,10 @@ export default config;
   ```ts
   formOverrides: {
     slug: "contact-forms",
+    access: {
+      read: () => true,
+      update: () => false,
+    },
     fields: [
       {
         name: "custom-field",
@@ -132,66 +134,68 @@ export default config;
 
   ```js
   formSubmissionOverrides: {
-    slug: "leads";
+    slug: "leads",
   }
   ```
 
 ## Fields
 
-Each field represents a form input. To override default settings pass either a boolean value or a partial [Payload Block](https://payloadcms.com/docs/fields/blocks) keyed to the block's slug.
+Each field represents a form input. To override default settings pass either a boolean value or a partial [Payload Block](https://payloadcms.com/docs/fields/blocks) _keyed to the block's slug_. See [Field Overrides](#field-overrides) for more details on how to do this.
 
-- Text
+> NOTE: "fields" here are in reference to the _fields to build forms with_, not to be confused with the _fields of a collection_ which are set via `formOverrides.fields`.
+
+- `text`
   - `name`: string
   - `label`: string
   - `defaultValue`: string
   - `width`: string
   - `required`: checkbox
-- Textarea
+- `textarea`
   - `name`: string
   - `label`: string
   - `defaultValue`: string
   - `width`: string
   - `required`: checkbox
-- Select
+- `select`
   - `name`: string
   - `label`: string
   - `defaultValue`: string
   - `width`: string
   - `options`: array
   - `required`: checkbox
-- Email
+- `email`
   - `name`: string
   - `label`: string
   - `defaultValue`: string
   - `width`: string
   - `required`: checkbox
-- State
+- `state`
   - `name`: string
   - `label`: string
   - `defaultValue`: string
   - `width`: string
   - `required`: checkbox
-- Country
+- `country`
   - `name`: string
   - `label`: string
   - `defaultValue`: string
   - `width`: string
   - `required`: checkbox
-- Checkbox
+- `checkbox`
   - `name`: string
   - `label`: string
   - `defaultValue`: checkbox
   - `width`: string
   - `required`: checkbox
-- Number
+- `number`
   - `name`: string
   - `label`: string
   - `defaultValue`: number
   - `width`: string
   - `required`: checkbox
-- Message
+- `message`
   - `message`: richText
-- Payment
+- `payment`
   - `name`: string
   - `label`: string
   - `defaultValue`: number
@@ -205,6 +209,28 @@ Each field represents a form input. To override default settings pass either a b
     - `valueType`: string - `static`, `valueOfField`
     - `value`: string - only if `valueType` is `static`
 
+  ### Field Overrides
+
+  You can also provide your own custom field definitions by passing a new [Payload Block](https://payloadcms.com/docs/fields/blocks#block-configs) object into `fields`. You can override or extend any existing fields by first importing the `fields` from the plugin:
+
+  ```ts
+  import { fields } from "@payloadcms/plugin-form-builder";
+  ```
+
+  Then merging it into your own custom field:
+
+  ```ts
+  fields: {
+    text: {
+      ...fields.text,
+      labels: {
+        singular: "Custom Text Field",
+        plural: "Custom Text Fields",
+      }
+    }
+  }
+  ```
+
 ## Email
 
 This plugin relies on the [email configuration](https://payloadcms.com/docs/email/overview) defined in your `payload.init()`. It will read from your config and attempt to send your emails using the credentials provided.

packages/plugin-form-builder/demo/package.json

@@ -16,7 +16,7 @@
     "deepmerge": "^4.2.2",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
-    "payload": "^1.3.0"
+    "payload": "^1.8.2"
   },
   "devDependencies": {
     "@types/express": "^4.17.9",

packages/plugin-form-builder/demo/src/payload.config.ts

@@ -4,7 +4,7 @@ import type { Block } from 'payload/types'
 
 // import formBuilderPlugin from '../../dist';
 // eslint-disable-next-line import/no-relative-packages
-import formBuilderPlugin from '../../src'
+import formBuilderPlugin, { fields } from '../../src'
 import { Pages } from './collections/Pages'
 import { Users } from './collections/Users'
 
@@ -68,6 +68,13 @@ export default buildConfig({
       fields: {
         payment: true,
         colorField,
+        text: {
+          ...fields.text,
+          labels: {
+            singular: 'Custom Text Field',
+            plural: 'Custom Text Fields',
+          },
+        },
         // payment: {
         //     paymentProcessor: {
         //       options: [

packages/plugin-form-builder/demo/src/server.ts

@@ -14,7 +14,7 @@ app.get('/', (_, res) => {
 
 // Initialize Payload
 const start = async (): Promise<any> => {
-  await payload.initAsync({
+  await payload.init({
     secret: process.env.PAYLOAD_SECRET,
     mongoURL: process.env.MONGODB_URI,
     express: app,

packages/plugin-form-builder/src/collections/Forms/fields.ts

@@ -572,7 +572,7 @@ const Message: Block = {
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-export default {
+export const fields = {
   select: Select,
   checkbox: Checkbox,
   text: Text,
@@ -586,3 +586,5 @@ export default {
 } as {
   [key: string]: Block | ((fieldConfig?: boolean | FieldConfig) => Block)
 }
+
+export default fields

packages/plugin-form-builder/src/collections/Forms/index.ts

@@ -2,7 +2,7 @@ import merge from 'deepmerge'
 import type { Block, CollectionConfig, Field } from 'payload/types'
 
 import type { FieldConfig, PluginConfig } from '../../types'
-import fields from './fields'
+import { fields } from './fields'
 
 // all settings can be overridden by the config
 export const generateFormCollection = (formConfig: PluginConfig): CollectionConfig => {

packages/plugin-form-builder/src/index.ts

@@ -3,8 +3,8 @@ import type { Config } from 'payload/config'
 import { generateFormCollection } from './collections/Forms'
 import { generateSubmissionCollection } from './collections/FormSubmissions'
 import type { PluginConfig } from './types'
-// import path from 'path';
 
+export { fields } from './collections/Forms/fields'
 export { getPaymentTotal } from './utilities/getPaymentTotal'
 
 const FormBuilder =