@art-design-digital/payload-plugin-forms-v3 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +108 -107
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,32 +1,26 @@
1
- # Payload Plugin Menus v3
1
+ # Payload Plugin Forms v3
2
2
 
3
- A flexible navigation menu plugin for [Payload CMS](https://payloadcms.com) v3.
3
+ A flexible forms plugin for [Payload CMS](https://payloadcms.com) v3. Create and manage forms with configurable fields, email settings, and feedback messages.
4
4
 
5
5
  ## Features
6
6
 
7
- - Create and manage navigation menus with nested items (up to 3 levels)
8
- - Support for internal links (references to collections), external links, and parent items with children
9
- - Optional icon picker with [react-icons](https://react-icons.github.io/react-icons/) support
7
+ - Create and manage forms with multiple field types
8
+ - Configurable field widths (1/1, 1/2, 1/4, 3/4)
9
+ - Sender/receiver email configuration
10
+ - Customizable success and error messages
11
+ - Conditional field display
12
+ - Autocomplete attribute support
10
13
  - Full i18n support (EN, DE, ES, FR, NL)
11
- - Localized menu labels and URLs
12
- - Validation for required fields
14
+ - Optional field localization
13
15
 
14
16
  ## Installation
15
17
 
16
18
  ```bash
17
- npm install payload-plugin-menus-v3
19
+ npm install @art-design-digital/payload-plugin-forms-v3
18
20
  # or
19
- pnpm add payload-plugin-menus-v3
21
+ pnpm add @art-design-digital/payload-plugin-forms-v3
20
22
  # or
21
- yarn add payload-plugin-menus-v3
22
- ```
23
-
24
- ### Optional: Icon Picker
25
-
26
- If you want to use the icon picker feature, you also need to install `react-icons`:
27
-
28
- ```bash
29
- npm install react-icons
23
+ yarn add @art-design-digital/payload-plugin-forms-v3
30
24
  ```
31
25
 
32
26
  ## Usage
@@ -35,25 +29,24 @@ Add the plugin to your Payload config:
35
29
 
36
30
  ```ts
37
31
  import { buildConfig } from 'payload'
38
- import { menusPlugin } from 'payload-plugin-menus-v3'
32
+ import { formsPlugin } from '@art-design-digital/payload-plugin-forms-v3'
39
33
 
40
34
  export default buildConfig({
41
35
  // ... your config
42
36
  plugins: [
43
- menusPlugin({
44
- // Link to these collections for internal links
45
- linkableCollections: ['pages', 'posts'],
46
- // Optional: Menu nesting depth (1-3, default: 2)
47
- levels: 2,
37
+ formsPlugin({
48
38
  // Optional: Admin group name
49
- adminGroup: 'Navigation',
50
- // Optional: Enable localization for labels and URLs
39
+ adminGroup: 'Content',
40
+ // Optional: Enable localization for form field labels
51
41
  localized: true,
52
- // Optional: Enable icon picker (default: false)
53
- allowIcons: true,
54
- // Optional: Icon pack to use (default: 'Phosphor Icons')
55
- iconPack: 'Phosphor Icons',
56
- // Optional: Disable the plugin
42
+ // Optional: Override access control
43
+ access: {
44
+ read: () => true,
45
+ create: ({ req }) => req.user?.role === 'admin',
46
+ update: ({ req }) => req.user?.role === 'admin',
47
+ delete: ({ req }) => req.user?.role === 'admin',
48
+ },
49
+ // Optional: Disable the plugin (keeps schema for migrations)
57
50
  disabled: false,
58
51
  }),
59
52
  ],
@@ -62,92 +55,91 @@ export default buildConfig({
62
55
 
63
56
  ## Configuration Options
64
57
 
65
- | Option | Type | Default | Description |
66
- |--------|------|---------|-------------|
67
- | `linkableCollections` | `string[]` | `[]` | Collection slugs that can be linked to for internal links |
68
- | `levels` | `1 \| 2 \| 3` | `2` | Maximum nesting depth for menu items |
69
- | `adminGroup` | `string` | `undefined` | Admin panel group name for the Menus collection |
70
- | `localized` | `boolean` | `false` | Enable localization for menu item labels and URLs |
71
- | `allowIcons` | `boolean` | `false` | Enable the icon picker field for menu items |
72
- | `iconPack` | `IconPackType` | `'Phosphor Icons'` | Icon pack to use (requires `react-icons`) |
73
- | `allowPreviewImages` | `boolean` | `false` | Enable preview image upload for menu items |
74
- | `previewImagesMediaCollection` | `string` | `'media'` | Media collection slug for preview images |
75
- | `access` | `CollectionConfig['access']` | `{ read: () => true }` | Override access control for the Menus collection |
76
- | `disabled` | `boolean` | `false` | Disable the plugin |
77
-
78
- ### Available Icon Packs
79
-
80
- When `allowIcons` is enabled, you can choose from these icon packs:
81
-
82
- - `'Phosphor Icons'` (default)
83
- - `'Bootstrap Icons'`
84
- - `'Feather Icons'`
85
- - `'Font Awesome 6'`
86
- - `'Heroicons 2'`
87
- - `'Lucide Icons'`
88
- - `'Material Design Icons'`
89
- - `'Remix Icons'`
90
- - `'Tabler Icons'`
91
-
92
- ## Menu Item Structure
93
-
94
- Each menu item is organized into two tabs:
95
-
96
- ### Link Settings Tab
97
-
98
- | Field | Description |
99
- |-------|-------------|
100
- | `label` | Display text for the menu item (required) |
101
- | `linkType` | Type of link: `internal`, `external`, or `children` |
102
- | `customURL` | External URL (when `linkType` is `external`, must start with `https://`) |
103
- | `reference` | Reference to a document (when `linkType` is `internal`) |
104
- | `anchor` | Optional anchor/hash for internal links (e.g., `#section`) |
105
- | `openInNewTab` | Open link in a new tab |
106
- | `children` | Nested menu items (when `linkType` is `children`) |
107
-
108
- ### Appearance Tab
109
-
110
- | Field | Description |
111
- |-------|-------------|
112
- | `highlight` | Highlight this menu item (e.g., for CTA buttons) |
113
- | `marginTop` | Add spacing above this item (child items only) |
114
- | `icon` | Selected icon name (when `allowIcons` is enabled) |
115
- | `previewImage` | Reference to a media item (when `allowPreviewImages` is enabled) |
116
-
117
- ## Using the IconPicker Field Standalone
118
-
119
- You can also use the icon picker field in your own collections:
58
+ | Option | Type | Default | Description |
59
+ | ------------ | ---------------------------- | ---------------------- | ---------------------------------------------------- |
60
+ | `adminGroup` | `string` | `undefined` | Admin panel group name for the Forms collection |
61
+ | `localized` | `boolean` | `false` | Enable localization for form field labels |
62
+ | `access` | `CollectionConfig['access']` | `{ read: () => true }` | Override access control for the Forms collection |
63
+ | `disabled` | `boolean` | `false` | Disable the plugin (schema preserved for migrations) |
120
64
 
121
- ```ts
122
- import { iconPickerField } from 'payload-plugin-menus-v3'
123
-
124
- const MyCollection = {
125
- slug: 'my-collection',
126
- fields: [
127
- iconPickerField({
128
- name: 'icon',
129
- label: 'Icon',
130
- iconPack: 'Lucide Icons',
131
- }),
132
- ],
133
- }
134
- ```
65
+ ## Form Field Types
66
+
67
+ The plugin supports these field types:
68
+
69
+ | Type | Description |
70
+ | ---------- | ------------------------------- |
71
+ | `text` | Single-line text input |
72
+ | `textarea` | Multi-line text input |
73
+ | `email` | Email input with validation |
74
+ | `number` | Numeric input with min/max/step |
75
+ | `tel` | Telephone number input |
76
+ | `url` | URL input with validation |
77
+ | `dropdown` | Select dropdown with options |
78
+ | `radio` | Radio button group |
79
+ | `checkbox` | Single checkbox |
80
+ | `date` | Date picker |
81
+ | `time` | Time picker |
82
+ | `datetime` | Date and time picker |
83
+
84
+ ## Form Field Configuration
85
+
86
+ Each form field can be configured with:
87
+
88
+ | Field | Description |
89
+ | -------------- | --------------------------------------------------------- |
90
+ | `label` | Display label for the field |
91
+ | `fieldType` | Type of field (see above) |
92
+ | `width` | Field width: `full`, `half`, `onequarter`, `threequarter` |
93
+ | `required` | Whether the field is required |
94
+ | `placeholder` | Placeholder text |
95
+ | `description` | Help text below the field |
96
+ | `default` | Default value |
97
+ | `autocomplete` | HTML autocomplete attribute |
98
+ | `condition` | Conditional display based on another field's value |
99
+
100
+ ### Type-specific options
101
+
102
+ - **text/textarea**: `minLength`, `maxLength`, `rows` (textarea only)
103
+ - **number**: `minValue`, `maxValue`, `step`
104
+ - **dropdown/radio**: `options` array with `label` and `value`
105
+ - **date/datetime**: `minDate`, `maxDate`
106
+
107
+ ## Form Structure
108
+
109
+ Each form includes:
110
+
111
+ ### Form Fields
112
+
113
+ An array of configurable form fields with the options described above.
114
+
115
+ ### Sender/Receiver Settings
116
+
117
+ - `senderName` - Name shown in email "From" field
118
+ - `senderMail` - Email address for the sender
119
+ - `receiver` - Email address(es) to receive submissions
120
+ - `subject` - Email subject line
121
+
122
+ ### Messages
123
+
124
+ - `submitLabel` - Text for the submit button
125
+ - `successMessage` - Message shown on successful submission
126
+ - `errorMessage` - Message shown on submission error
135
127
 
136
- ## Fetching Menus
128
+ ## Fetching Forms
137
129
 
138
- You can fetch menus using the Payload Local API or REST API:
130
+ You can fetch forms using the Payload Local API or REST API:
139
131
 
140
132
  ```ts
141
133
  // Local API
142
- const menu = await payload.find({
143
- collection: 'menus',
134
+ const forms = await payload.find({
135
+ collection: 'forms',
144
136
  where: {
145
- title: { equals: 'Main Navigation' },
137
+ name: { equals: 'Contact Form' },
146
138
  },
147
139
  })
148
140
 
149
141
  // REST API
150
- // GET /api/menus?where[title][equals]=Main Navigation
142
+ // GET /api/forms?where[name][equals]=Contact Form
151
143
  ```
152
144
 
153
145
  ## i18n Support
@@ -167,7 +159,16 @@ All field labels, validation messages, and UI elements are translated based on y
167
159
  The plugin exports types for use in your project:
168
160
 
169
161
  ```ts
170
- import type { MenusPluginConfig, IconPackType } from 'payload-plugin-menus-v3'
162
+ import type {
163
+ FormsPluginConfig,
164
+ Form,
165
+ FormField,
166
+ FormFieldOption,
167
+ AutocompleteValue,
168
+ FormFieldCondition,
169
+ } from '@art-design-digital/payload-plugin-forms-v3'
170
+
171
+ import { FIELD_TYPES, WIDTHS } from '@art-design-digital/payload-plugin-forms-v3'
171
172
  ```
172
173
 
173
174
  ## License
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@art-design-digital/payload-plugin-forms-v3",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A Payload plugin for forms. This plugin adds a global collection of forms to your Payload instance. You can create and manage forms in the admin interface, and then render them in your frontend application.",
5
5
  "license": "MIT",
6
6
  "type": "module",