@webbycrown/advanced-fields 1.0.0
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.
- package/LICENSE +21 -0
- package/README.md +269 -0
- package/package.json +86 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 WebbyCrown
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
# 🚀 Advanced Fields for Strapi
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/%40webbycrown%2Fadvanced-fields)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://strapi.io/)
|
|
6
|
+
|
|
7
|
+
Professional custom fields for Strapi CMS that provide advanced functionality with comprehensive validation, dynamic options, and user-friendly interfaces.
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
### 🔤 Advanced Input
|
|
12
|
+
- **Text Input Field**: Simple, clean text input with advanced validation
|
|
13
|
+
- **Comprehensive Validation**: Min/max length, regex patterns, required fields
|
|
14
|
+
- **Custom Error Messages**: User-friendly validation feedback
|
|
15
|
+
- **Default Values**: Pre-filled content for new entries
|
|
16
|
+
- **Placeholder Support**: Helpful hints for content creators
|
|
17
|
+
- **Private Fields**: Hide sensitive data from API responses
|
|
18
|
+
|
|
19
|
+
### ☑️ Advanced Checkbox
|
|
20
|
+
- **Single & Multiple Modes**: Toggle between single checkbox or multiple selections
|
|
21
|
+
- **Dynamic Options**: Define options with value|label format
|
|
22
|
+
- **Min/Max Validation**: Control minimum and maximum selections
|
|
23
|
+
- **Layout Options**: Vertical, horizontal, or grid layouts
|
|
24
|
+
- **Default Selections**: Pre-select options for new entries
|
|
25
|
+
|
|
26
|
+
### 🔘 Advanced Radio
|
|
27
|
+
- **Single & Multiple Selection**: Choose between single or multiple radio selections
|
|
28
|
+
- **Dynamic Options**: Flexible option configuration
|
|
29
|
+
- **Selection Limits**: Control minimum and maximum choices
|
|
30
|
+
- **Layout Flexibility**: Multiple visual layouts
|
|
31
|
+
- **Custom Validation**: Tailored error messages
|
|
32
|
+
|
|
33
|
+
## 🛠️ Installation
|
|
34
|
+
|
|
35
|
+
### Via npm
|
|
36
|
+
```bash
|
|
37
|
+
npm install @webbycrown/advanced-fields
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Via yarn
|
|
41
|
+
```bash
|
|
42
|
+
yarn add @webbycrown/advanced-fields
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## ⚙️ Configuration
|
|
46
|
+
|
|
47
|
+
1. **Install the plugin** in your Strapi project
|
|
48
|
+
2. **Restart your Strapi server**
|
|
49
|
+
3. **Navigate to Content-Type Builder**
|
|
50
|
+
4. **Add a new field** and select one of the Advanced Fields:
|
|
51
|
+
- Advanced Input
|
|
52
|
+
- Advanced Checkbox
|
|
53
|
+
- Advanced Radio
|
|
54
|
+
|
|
55
|
+
## 📖 Usage Examples
|
|
56
|
+
|
|
57
|
+
### Advanced Input Configuration
|
|
58
|
+
|
|
59
|
+
```javascript
|
|
60
|
+
// Example: Text validation with custom error message
|
|
61
|
+
{
|
|
62
|
+
"required": true,
|
|
63
|
+
"maxLength": 255,
|
|
64
|
+
"minLength": 3,
|
|
65
|
+
"regex": "^[a-zA-Z0-9\\s]+$",
|
|
66
|
+
"options": {
|
|
67
|
+
"customErrorMessage": "Please enter valid text",
|
|
68
|
+
"placeholder": "Enter your text here",
|
|
69
|
+
"defaultValue": "Default text"
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Advanced Checkbox Configuration
|
|
75
|
+
|
|
76
|
+
```javascript
|
|
77
|
+
// Example: Multiple checkbox with validation
|
|
78
|
+
{
|
|
79
|
+
"required": true,
|
|
80
|
+
"options": {
|
|
81
|
+
"checkboxType": "multiple",
|
|
82
|
+
"checkboxOptions": "1|Option 1\n2|Option 2\n3|Option 3",
|
|
83
|
+
"minChoices": 1,
|
|
84
|
+
"maxChoices": 2,
|
|
85
|
+
"layout": "vertical",
|
|
86
|
+
"defaultSelected": "1\n2"
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Advanced Radio Configuration
|
|
92
|
+
|
|
93
|
+
```javascript
|
|
94
|
+
// Example: Single radio with dynamic options
|
|
95
|
+
{
|
|
96
|
+
"required": true,
|
|
97
|
+
"options": {
|
|
98
|
+
"selectionType": "single",
|
|
99
|
+
"radioOptions": "small|Small\nmedium|Medium\nlarge|Large",
|
|
100
|
+
"layout": "horizontal",
|
|
101
|
+
"defaultSelected": "medium"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## 🎯 Field Options Reference
|
|
107
|
+
|
|
108
|
+
### Advanced Input Options
|
|
109
|
+
|
|
110
|
+
| Option | Type | Description | Default |
|
|
111
|
+
|--------|------|-------------|---------|
|
|
112
|
+
| `required` | boolean | Field is required | `false` |
|
|
113
|
+
| `unique` | boolean | Values must be unique | `false` |
|
|
114
|
+
| `maxLength` | number | Maximum character length | `0` (unlimited) |
|
|
115
|
+
| `minLength` | number | Minimum character length | `0` |
|
|
116
|
+
| `regex` | string | Validation pattern | `""` |
|
|
117
|
+
| `options.defaultValue` | string | Pre-filled value | `""` |
|
|
118
|
+
| `options.placeholder` | string | Placeholder text | `""` |
|
|
119
|
+
| `options.customErrorMessage` | string | Custom error message | `""` |
|
|
120
|
+
| `private` | boolean | Hide from API | `false` |
|
|
121
|
+
|
|
122
|
+
### Advanced Checkbox Options
|
|
123
|
+
|
|
124
|
+
| Option | Type | Description | Default |
|
|
125
|
+
|--------|------|-------------|---------|
|
|
126
|
+
| `required` | boolean | Field is required | `false` |
|
|
127
|
+
| `options.checkboxType` | string | `single` or `multiple` | `single` |
|
|
128
|
+
| `options.checkboxOptions` | string | Options in `value\|label` format | `""` |
|
|
129
|
+
| `options.defaultSelected` | string | Pre-selected options | `""` |
|
|
130
|
+
| `options.minChoices` | number | Minimum selections | `0` |
|
|
131
|
+
| `options.maxChoices` | number | Maximum selections | `0` |
|
|
132
|
+
| `options.layout` | string | `vertical`, `horizontal`, or `grid` | `vertical` |
|
|
133
|
+
| `options.customErrorMessage` | string | Custom error message | `""` |
|
|
134
|
+
| `private` | boolean | Hide from API | `false` |
|
|
135
|
+
|
|
136
|
+
### Advanced Radio Options
|
|
137
|
+
|
|
138
|
+
| Option | Type | Description | Default |
|
|
139
|
+
|--------|------|-------------|---------|
|
|
140
|
+
| `required` | boolean | Field is required | `false` |
|
|
141
|
+
| `options.selectionType` | string | `single` or `multiple` | `single` |
|
|
142
|
+
| `options.radioOptions` | string | Options in `value\|label` format | `""` |
|
|
143
|
+
| `options.defaultSelected` | string | Pre-selected options | `""` |
|
|
144
|
+
| `options.minChoices` | number | Minimum selections | `0` |
|
|
145
|
+
| `options.maxChoices` | number | Maximum selections | `0` |
|
|
146
|
+
| `options.layout` | string | `vertical`, `horizontal`, or `grid` | `vertical` |
|
|
147
|
+
| `options.customErrorMessage` | string | Custom error message | `""` |
|
|
148
|
+
| `private` | boolean | Hide from API | `false` |
|
|
149
|
+
|
|
150
|
+
## 🔧 API Usage
|
|
151
|
+
|
|
152
|
+
### Retrieving Data
|
|
153
|
+
|
|
154
|
+
```javascript
|
|
155
|
+
// GET /api/articles
|
|
156
|
+
{
|
|
157
|
+
"data": [
|
|
158
|
+
{
|
|
159
|
+
"id": 1,
|
|
160
|
+
"attributes": {
|
|
161
|
+
"title": "Sample Article",
|
|
162
|
+
"advancedInput": "user@example.com",
|
|
163
|
+
"advancedCheckbox": ["1", "2"],
|
|
164
|
+
"advancedRadio": ["medium"]
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Creating/Updating Data
|
|
172
|
+
|
|
173
|
+
```javascript
|
|
174
|
+
// POST /api/articles
|
|
175
|
+
{
|
|
176
|
+
"data": {
|
|
177
|
+
"title": "New Article",
|
|
178
|
+
"advancedInput": "new@example.com",
|
|
179
|
+
"advancedCheckbox": ["1", "3"],
|
|
180
|
+
"advancedRadio": ["large"]
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
## 🎨 Layout Options
|
|
186
|
+
|
|
187
|
+
### Vertical Layout
|
|
188
|
+
Options are stacked vertically for easy scanning.
|
|
189
|
+
|
|
190
|
+
### Horizontal Layout
|
|
191
|
+
Options are arranged in a horizontal row for compact forms.
|
|
192
|
+
|
|
193
|
+
### Grid Layout
|
|
194
|
+
Options are displayed in a responsive grid for better space utilization.
|
|
195
|
+
|
|
196
|
+
## ✅ Validation Features
|
|
197
|
+
|
|
198
|
+
- **Real-time Validation**: Immediate feedback during content creation
|
|
199
|
+
- **Custom Error Messages**: Tailored validation messages for better UX
|
|
200
|
+
- **Required Field Validation**: Prevents saving without required data
|
|
201
|
+
- **Pattern Validation**: Regex support for complex validation rules
|
|
202
|
+
- **Selection Limits**: Control minimum and maximum choices
|
|
203
|
+
- **Unique Value Validation**: Ensure data uniqueness across entries
|
|
204
|
+
|
|
205
|
+
## 🚀 Performance
|
|
206
|
+
|
|
207
|
+
- **Optimized Rendering**: Efficient React components
|
|
208
|
+
- **Lazy Loading**: Components loaded only when needed
|
|
209
|
+
- **Minimal Bundle Size**: Lightweight implementation
|
|
210
|
+
- **Memory Efficient**: Optimized for large datasets
|
|
211
|
+
|
|
212
|
+
## 🔒 Security
|
|
213
|
+
|
|
214
|
+
- **Input Sanitization**: Automatic data sanitization
|
|
215
|
+
- **XSS Protection**: Built-in security measures
|
|
216
|
+
- **Private Fields**: Hide sensitive data from API responses
|
|
217
|
+
- **Validation**: Server-side validation for data integrity
|
|
218
|
+
|
|
219
|
+
## 🤝 Contributing
|
|
220
|
+
|
|
221
|
+
We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for details.
|
|
222
|
+
|
|
223
|
+
### Development Setup
|
|
224
|
+
|
|
225
|
+
```bash
|
|
226
|
+
# Clone the repository
|
|
227
|
+
git clone https://github.com/webbycrown/strapi-advanced-fields.git
|
|
228
|
+
|
|
229
|
+
# Install dependencies
|
|
230
|
+
npm install
|
|
231
|
+
|
|
232
|
+
# Start development
|
|
233
|
+
npm run develop
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
## 📝 License
|
|
237
|
+
|
|
238
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
239
|
+
|
|
240
|
+
## 🆘 Support
|
|
241
|
+
|
|
242
|
+
- **Documentation**: [GitHub Wiki](https://github.com/webbycrown/strapi-advanced-fields/wiki)
|
|
243
|
+
- **Issues**: [GitHub Issues](https://github.com/webbycrown/strapi-advanced-fields/issues)
|
|
244
|
+
- **Discussions**: [GitHub Discussions](https://github.com/webbycrown/strapi-advanced-fields/discussions)
|
|
245
|
+
- **Email**: info@webbycrown.com
|
|
246
|
+
|
|
247
|
+
## 🙏 Acknowledgments
|
|
248
|
+
|
|
249
|
+
- Built for the amazing [Strapi](https://strapi.io/) community
|
|
250
|
+
- Inspired by modern form design principles
|
|
251
|
+
- Thanks to all contributors and users
|
|
252
|
+
|
|
253
|
+
## 📊 Changelog
|
|
254
|
+
|
|
255
|
+
### v1.0.0
|
|
256
|
+
- ✨ Initial release
|
|
257
|
+
- 🔤 Advanced Input field with validation
|
|
258
|
+
- ☑️ Advanced Checkbox (single/multiple)
|
|
259
|
+
- 🔘 Advanced Radio (single/multiple)
|
|
260
|
+
- 🎨 Multiple layout options
|
|
261
|
+
- ✅ Comprehensive validation system
|
|
262
|
+
- 📱 Responsive design
|
|
263
|
+
- 🌐 Internationalization support
|
|
264
|
+
|
|
265
|
+
---
|
|
266
|
+
|
|
267
|
+
<div align="center">
|
|
268
|
+
<strong>Made with ❤️ by <a href="https://webbycrown.com">WebbyCrown</a></strong>
|
|
269
|
+
</div>
|
package/package.json
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@webbycrown/advanced-fields",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"strapi",
|
|
6
|
+
"plugin",
|
|
7
|
+
"custom-fields",
|
|
8
|
+
"advanced-input",
|
|
9
|
+
"advanced-checkbox",
|
|
10
|
+
"advanced-radio",
|
|
11
|
+
"validation",
|
|
12
|
+
"form-fields",
|
|
13
|
+
"dynamic-options",
|
|
14
|
+
"user-friendly"
|
|
15
|
+
],
|
|
16
|
+
"type": "commonjs",
|
|
17
|
+
"exports": {
|
|
18
|
+
"./package.json": "./package.json",
|
|
19
|
+
"./strapi-admin": {
|
|
20
|
+
"source": "./admin/src/index.js",
|
|
21
|
+
"import": "./dist/admin/index.mjs",
|
|
22
|
+
"require": "./dist/admin/index.js",
|
|
23
|
+
"default": "./dist/admin/index.js"
|
|
24
|
+
},
|
|
25
|
+
"./strapi-server": "./strapi-server.js"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"README.md",
|
|
30
|
+
"LICENSE"
|
|
31
|
+
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"build": "npm run build:admin",
|
|
34
|
+
"build:admin": "strapi-plugin build",
|
|
35
|
+
"watch": "strapi-plugin watch",
|
|
36
|
+
"watch:link": "strapi-plugin watch:link",
|
|
37
|
+
"verify": "strapi-plugin verify"
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"@strapi/design-system": "^2.0.0-rc.21",
|
|
41
|
+
"@strapi/icons": "^2.0.0-rc.23",
|
|
42
|
+
"react-color": "^2.19.3",
|
|
43
|
+
"react-intl": "^7.1.11",
|
|
44
|
+
"react-router-dom": "^6.30.0"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@strapi/sdk-plugin": "^5.3.2",
|
|
48
|
+
"@strapi/strapi": "^5.12.5",
|
|
49
|
+
"prettier": "^3.5.3",
|
|
50
|
+
"react": "^18.3.1",
|
|
51
|
+
"react-dom": "^18.3.1",
|
|
52
|
+
"styled-components": "^6.1.17"
|
|
53
|
+
},
|
|
54
|
+
"peerDependencies": {
|
|
55
|
+
"@strapi/sdk-plugin": "^5.3.2",
|
|
56
|
+
"@strapi/strapi": "^5.12.5",
|
|
57
|
+
"react": "^18.3.1",
|
|
58
|
+
"react-dom": "^18.3.1",
|
|
59
|
+
"styled-components": "^6.1.17"
|
|
60
|
+
},
|
|
61
|
+
"strapi": {
|
|
62
|
+
"kind": "plugin",
|
|
63
|
+
"name": "advanced-fields",
|
|
64
|
+
"displayName": "Advanced Fields",
|
|
65
|
+
"description": "Professional custom fields for Strapi: Advanced Input with validation, Advanced Checkbox (single/multiple), and Advanced Radio (single/multiple) with dynamic options and comprehensive configuration"
|
|
66
|
+
},
|
|
67
|
+
"description": "🚀 Professional custom fields for Strapi CMS. Includes Advanced Input with comprehensive validation, Advanced Checkbox supporting both single and multiple selections, and Advanced Radio with dynamic options. Perfect for building user-friendly content management interfaces.",
|
|
68
|
+
"license": "MIT",
|
|
69
|
+
"author": {
|
|
70
|
+
"name": "WebbyCrown",
|
|
71
|
+
"email": "info@webbycrown.com",
|
|
72
|
+
"url": "https://webbycrown.com"
|
|
73
|
+
},
|
|
74
|
+
"homepage": "https://github.com/webbycrown/strapi-advanced-fields",
|
|
75
|
+
"repository": {
|
|
76
|
+
"type": "git",
|
|
77
|
+
"url": "https://github.com/webbycrown/strapi-advanced-fields.git"
|
|
78
|
+
},
|
|
79
|
+
"bugs": {
|
|
80
|
+
"url": "https://github.com/webbycrown/strapi-advanced-fields/issues"
|
|
81
|
+
},
|
|
82
|
+
"engines": {
|
|
83
|
+
"node": ">=18.0.0",
|
|
84
|
+
"npm": ">=8.0.0"
|
|
85
|
+
}
|
|
86
|
+
}
|