@webbycrown/advanced-fields 1.0.1 → 1.0.2

package/README.md

@@ -6,6 +6,8 @@
 
 Professional custom fields for Strapi CMS that provide advanced functionality with comprehensive validation, dynamic options, and user-friendly interfaces.
 
+📦 **NPM Package**: [@webbycrown/advanced-fields](https://www.npmjs.com/package/@webbycrown/advanced-fields)
+
 ## ✨ Features
 
 ### 🔤 Advanced Input
@@ -14,6 +16,7 @@ Professional custom fields for Strapi CMS that provide advanced functionality wi
 - **Custom Error Messages**: User-friendly validation feedback
 - **Default Values**: Pre-filled content for new entries
 - **Placeholder Support**: Helpful hints for content creators
+- **Field Notes**: Display helpful notes below the field
 - **Private Fields**: Hide sensitive data from API responses
 
 ### ☑️ Advanced Checkbox
@@ -22,6 +25,7 @@ Professional custom fields for Strapi CMS that provide advanced functionality wi
 - **Min/Max Validation**: Control minimum and maximum selections
 - **Layout Options**: Vertical, horizontal, or grid layouts
 - **Default Selections**: Pre-select options for new entries
+- **Field Notes**: Display helpful notes below the field
 
 ### 🔘 Advanced Radio
 - **Single & Multiple Selection**: Choose between single or multiple radio selections
@@ -29,6 +33,7 @@ Professional custom fields for Strapi CMS that provide advanced functionality wi
 - **Selection Limits**: Control minimum and maximum choices
 - **Layout Flexibility**: Multiple visual layouts
 - **Custom Validation**: Tailored error messages
+- **Field Notes**: Display helpful notes below the field
 
 ## 🛠️ Installation
 
@@ -57,7 +62,7 @@ yarn add @webbycrown/advanced-fields
 ### Advanced Input Configuration
 
 ```javascript
-// Example: Text validation with custom error message
+// Example: Text validation with custom error message and field note
 {
   "required": true,
   "maxLength": 255,
@@ -66,7 +71,8 @@ yarn add @webbycrown/advanced-fields
   "options": {
     "customErrorMessage": "Please enter valid text",
     "placeholder": "Enter your text here",
-    "defaultValue": "Default text"
+    "defaultValue": "Default text",
+    "fieldNote": "This field accepts alphanumeric characters and spaces only"
   }
 }
 ```
@@ -74,7 +80,7 @@ yarn add @webbycrown/advanced-fields
 ### Advanced Checkbox Configuration
 
 ```javascript
-// Example: Multiple checkbox with validation
+// Example: Multiple checkbox with validation and field note
 {
   "required": true,
   "options": {
@@ -83,7 +89,8 @@ yarn add @webbycrown/advanced-fields
     "minChoices": 1,
     "maxChoices": 2,
     "layout": "vertical",
-    "defaultSelected": "1\n2"
+    "defaultSelected": "1\n2",
+    "fieldNote": "Please select at least 1 and at most 2 options"
   }
 }
 ```
@@ -91,14 +98,15 @@ yarn add @webbycrown/advanced-fields
 ### Advanced Radio Configuration
 
 ```javascript
-// Example: Single radio with dynamic options
+// Example: Single radio with dynamic options and field note
 {
   "required": true,
   "options": {
     "selectionType": "single",
     "radioOptions": "small|Small\nmedium|Medium\nlarge|Large",
     "layout": "horizontal",
-    "defaultSelected": "medium"
+    "defaultSelected": "medium",
+    "fieldNote": "Choose the size that best fits your needs"
   }
 }
 ```
@@ -117,6 +125,7 @@ yarn add @webbycrown/advanced-fields
 | `options.defaultValue` | string | Pre-filled value | `""` |
 | `options.placeholder` | string | Placeholder text | `""` |
 | `options.customErrorMessage` | string | Custom error message | `""` |
+| `options.fieldNote` | string | Helpful note displayed below field | `""` |
 | `private` | boolean | Hide from API | `false` |
 
 ### Advanced Checkbox Options
@@ -131,6 +140,7 @@ yarn add @webbycrown/advanced-fields
 | `options.maxChoices` | number | Maximum selections | `0` |
 | `options.layout` | string | `vertical`, `horizontal`, or `grid` | `vertical` |
 | `options.customErrorMessage` | string | Custom error message | `""` |
+| `options.fieldNote` | string | Helpful note displayed below field | `""` |
 | `private` | boolean | Hide from API | `false` |
 
 ### Advanced Radio Options
@@ -145,6 +155,7 @@ yarn add @webbycrown/advanced-fields
 | `options.maxChoices` | number | Maximum selections | `0` |
 | `options.layout` | string | `vertical`, `horizontal`, or `grid` | `vertical` |
 | `options.customErrorMessage` | string | Custom error message | `""` |
+| `options.fieldNote` | string | Helpful note displayed below field | `""` |
 | `private` | boolean | Hide from API | `false` |
 
 ## 🔧 API Usage
@@ -259,8 +270,10 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - 🔘 Advanced Radio (single/multiple)
 - 🎨 Multiple layout options
 - ✅ Comprehensive validation system
+- 📝 Field notes support for all field types
 - 📱 Responsive design
 - 🌐 Internationalization support
+- 🚀 Published to NPM: [@webbycrown/advanced-fields](https://www.npmjs.com/package/@webbycrown/advanced-fields)
 
 ---
 

package/admin/src/components/AdvancedCheckbox/index.jsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
 import { Field, Box, Flex, Typography } from "@strapi/design-system";
 import { useState, useEffect } from "react";
 
-const CheckboxInput = ({
+const AdvancedCheckbox = ({
   attribute = {},
   description = { id: "", defaultMessage: "" },
   disabled,
@@ -26,16 +26,12 @@ const CheckboxInput = ({
     defaultSelected = "",
     checkboxOptions = "",
     customErrorMessage = "",
+    fieldNote = "",
   } = attribute.options || attribute;
 
-  // Debug logging for checkboxType detection
-  // console.log('AdvancedCheckbox options detection:', {
-  //   attribute,
-  //   attributeOptions: attribute.options,
-  //   checkboxType,
-  //   checkboxOptions,
-  //   allOptions: attribute.options || attribute
-  // });
+  // Also check attribute.options for fieldNote
+  const fieldNoteFromAttribute = attribute.options?.fieldNote || '';
+
 
   // Initialize with default values if available
   const getInitialValues = () => {
@@ -82,13 +78,6 @@ const CheckboxInput = ({
   useEffect(() => {
     const initialValues = getInitialValues();
     
-    console.log('AdvancedCheckbox initialization:', {
-      value,
-      defaultSelected,
-      initialValues,
-      required,
-      error
-    });
     
     setFieldValue(initialValues);
     
@@ -182,19 +171,9 @@ const CheckboxInput = ({
     const error = validateSelection(newValue);
     setValidationError(error);
     
-    console.log('AdvancedCheckbox handleCheckboxChange:', {
-      optionValue,
-      isChecked,
-      newValue,
-      error,
-      hasInteracted: true,
-      checkboxType,
-      isInitialized
-    });
     
     // Always trigger onChange for user interactions
     if (onChange) {
-      console.log(onChange)
       onChange({ 
         target: { 
           value: newValue,
@@ -207,17 +186,7 @@ const CheckboxInput = ({
 
   // Show validation error - prioritize Strapi's error, then our validation only after user interaction
   const displayError = error || (hasInteracted && validationError);
-  console.log('displayError', displayError);
   const renderCheckboxes = () => {
-    // Debug logging
-    // console.log('AdvancedCheckbox renderCheckboxes:', {
-    //   checkboxType,
-    //   checkboxOptions,
-    //   options,
-    //   attribute,
-    //   attributeOptions: attribute.options,
-    //   fieldValue
-    // });
 
     const checkboxStyle = {
       display: "flex",
@@ -389,9 +358,20 @@ const CheckboxInput = ({
             {description.id ? formatMessage(description) : description.defaultMessage}
           </Field.Hint>
         )}
+        {(fieldNote || fieldNoteFromAttribute) && (
+          <span style={{ 
+            fontStyle: 'italic', 
+            color: '#666', 
+            fontSize: '12px',
+            display: 'block',
+            marginTop: '4px'
+          }}>
+            {fieldNote || fieldNoteFromAttribute}
+          </span>
+        )}
       </Field.Root>
     </Box>
   );
 };
 
-export default CheckboxInput;
+export default AdvancedCheckbox;

package/admin/src/components/AdvancedInput/index.jsx

@@ -5,7 +5,7 @@ import { Field, Box } from "@strapi/design-system";
 import { Cross } from "@strapi/icons";
 import { useState, useEffect } from "react";
 
-const TextInput = ({
+const AdvancedInput = ({
   attribute = {},
   description = { id: "", defaultMessage: "" },
   disabled,
@@ -38,8 +38,13 @@ const TextInput = ({
     defaultValue = '',
     customErrorMessage = '',
     regex = '',
+    fieldNote = '',
   } = options;
 
+  // Also check attribute.options for fieldNote
+  const fieldNoteFromAttribute = attribute.options?.fieldNote || '';
+
+
   // Initialize input value
   useEffect(() => {
     const initialValue = value === undefined ? defaultValue : value;
@@ -155,9 +160,20 @@ const TextInput = ({
             {description.id ? formatMessage(description) : description.defaultMessage}
           </Field.Hint>
         )}
+        {(fieldNote || fieldNoteFromAttribute) && (
+          <span style={{ 
+            fontStyle: 'italic', 
+            color: '#666', 
+            fontSize: '12px',
+            display: 'block',
+            marginTop: '4px'
+          }}>
+          {fieldNote || fieldNoteFromAttribute}
+          </span>
+        )}
       </Field.Root>
     </Box>
   );
 };
 
-export default TextInput;
+export default AdvancedInput;

package/admin/src/components/AdvancedRadio/index.jsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
 import { Field, Box, Flex, Typography } from "@strapi/design-system";
 import { useState, useEffect } from "react";
 
-const RadioInput = ({
+const AdvancedRadio = ({
   attribute = {},
   description = { id: "", defaultMessage: "" },
   disabled,
@@ -30,8 +30,12 @@ const RadioInput = ({
     defaultSelected = "",
     radioOptions = "",
     customErrorMessage = "",
+    fieldNote = "",
   } = attribute.options || attribute;
 
+  // Also check attribute.options for fieldNote
+  const fieldNoteFromAttribute = attribute.options?.fieldNote || '';
+
   // Parse radio options
   const options = radioOptions
     .split("\n")
@@ -128,13 +132,6 @@ const RadioInput = ({
     const error = validateSelection(newValues);
     setValidationError(error);
     
-    // console.log('AdvancedRadio handleRadioChange:', {
-    //   optionValue,
-    //   isChecked,
-    //   newValues,
-    //   error,
-    //   hasInteracted: true
-    // });
     
     if (onChange) {
       // Create a proper event object with name and id attributes
@@ -153,14 +150,6 @@ const RadioInput = ({
   const displayError = error || (hasInteracted && validationError);
 
   const renderRadios = () => {
-    // Debug logging
-    // console.log('AdvancedRadio renderRadios:', {
-    //   radioOptions,
-    //   options,
-    //   attribute,
-    //   attributeOptions: attribute.options,
-    //   selectedValues
-    // });
 
     const radioStyle = {
       display: "flex",
@@ -336,9 +325,20 @@ const RadioInput = ({
             {description.id ? formatMessage(description) : description.defaultMessage}
           </Field.Hint>
         )}
+        {(fieldNote || fieldNoteFromAttribute) && (
+          <span style={{ 
+            fontStyle: 'italic', 
+            color: '#666', 
+            fontSize: '12px',
+            display: 'block',
+            marginTop: '4px'
+          }}>
+            {fieldNote || fieldNoteFromAttribute}
+          </span>
+        )}
       </Field.Root>
     </Box>
   );
 };
 
-export default RadioInput;
+export default AdvancedRadio;

package/admin/src/components/PluginIcon.jsx

@@ -1,12 +1,11 @@
-import { PuzzlePiece } from '@strapi/icons';
 import { Box } from '@strapi/design-system';
 
 const PluginIcon = (props) => {
-  return <PuzzlePiece {...props} />;
+  return <AdvancedRadioIcon {...props} />;
 };
 
 // Advanced Input Icon - Clean text input with validation indicator
-const TextFieldIcon = () => (
+const AdvancedInputIcon = () => (
   <Box
     style={{
       width: '28px',
@@ -20,27 +19,25 @@ const TextFieldIcon = () => (
     }}
   >
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
       width="18"
       height="18"
+      viewBox="0 0 32 32"
       fill="none"
-      stroke="#495057"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="3" y="4" width="18" height="16" rx="2" ry="2"/>
-      <line x1="7" y1="8" x2="17" y2="8"/>
-      <line x1="7" y1="12" x2="13" y2="12"/>
-      <circle cx="18" cy="6" r="2" fill="#28a745"/>
-      <path d="m16 5 2 2-2 2" stroke="#fff" strokeWidth="1.5"/>
+      <rect width="32" height="32" rx="6" fill="#4945FF" fillOpacity="0.1"/>
+      <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#4945FF" strokeOpacity="0.15"/>
+      <path d="M27 11.6364V20.3636C27 20.7494 26.8455 21.1194 26.5704 21.3922C26.2954 21.6649 25.9223 21.8182 25.5333 21.8182H17.1C17.0028 21.8182 16.9095 21.7799 16.8407 21.7117C16.772 21.6435 16.7333 21.551 16.7333 21.4545V10.5455C16.7333 10.449 16.772 10.3565 16.8407 10.2883C16.9095 10.2201 17.0028 10.1818 17.1 10.1818H25.5333C25.9223 10.1818 26.2954 10.3351 26.5704 10.6078C26.8455 10.8806 27 11.2506 27 11.6364ZM15.2667 8.72727V23.2727C15.2667 23.4656 15.1894 23.6506 15.0519 23.787C14.9144 23.9234 14.7278 24 14.5333 24C14.3388 24 14.1523 23.9234 14.0148 23.787C13.8773 23.6506 13.8 23.4656 13.8 23.2727V21.8182H6.46667C6.07768 21.8182 5.70463 21.6649 5.42958 21.3922C5.15452 21.1194 5 20.7494 5 20.3636V11.6364C5 11.2506 5.15452 10.8806 5.42958 10.6078C5.70463 10.3351 6.07768 10.1818 6.46667 10.1818H13.8V8.72727C13.8 8.53439 13.8773 8.3494 14.0148 8.21301C14.1523 8.07662 14.3388 8 14.5333 8C14.7278 8 14.9144 8.07662 15.0519 8.21301C15.1894 8.3494 15.2667 8.53439 15.2667 8.72727ZM12.3333 14.5455C12.3333 14.3526 12.2561 14.1676 12.1185 14.0312C11.981 13.8948 11.7945 13.8182 11.6 13.8182H8.66667C8.47217 13.8182 8.28565 13.8948 8.14812 14.0312C8.0106 14.1676 7.93333 14.3526 7.93333 14.5455C7.93333 14.7383 8.0106 14.9233 8.14812 15.0597C8.28565 15.1961 8.47217 15.2727 8.66667 15.2727H9.4V17.4545C9.4 17.6474 9.47726 17.8324 9.61479 17.9688C9.75232 18.1052 9.93884 18.1818 10.1333 18.1818C10.3278 18.1818 10.5144 18.1052 10.6519 17.9688C10.7894 17.8324 10.8667 17.6474 10.8667 17.4545V15.2727H11.6C11.7945 15.2727 11.981 15.1961 12.1185 15.0597C12.2561 14.9233 12.3333 14.7383 12.3333 14.5455Z" fill="#4945FF"/>
+      <mask id="path-4-inside-1_649_85" fill="white">
+        <path d="M0 6C0 2.68629 2.68629 0 6 0H10V10H0V6Z"/>
+      </mask>
+      <path d="M-2 6C-2 1.58172 1.58172 -2 6 -2H10V2H6C3.79086 2 2 3.79086 2 6H-2ZM10 10H0H10ZM-2 10V6C-2 1.58172 1.58172 -2 6 -2V2C3.79086 2 2 3.79086 2 6V10H-2ZM10 0V10V0Z" fill="#4945FF" mask="url(#path-4-inside-1_649_85)"/>
     </svg>
   </Box>
 );
 
 // Advanced Checkbox Icon - Modern checkbox with multiple states
-const CheckIcon = () => (
+const AdvancedCheckboxIcon = () => (
   <Box
     style={{
       width: '28px',
@@ -54,26 +51,25 @@ const CheckIcon = () => (
     }}
   >
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
       width="18"
       height="18"
+      viewBox="0 0 32 32"
       fill="none"
-      stroke="#495057"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-      <polyline points="9,12 12,15 22,5" stroke="#28a745" strokeWidth="2.5"/>
-      <rect x="3" y="8" width="12" height="2" rx="1" fill="#6c757d" opacity="0.3"/>
-      <rect x="3" y="12" width="8" height="2" rx="1" fill="#6c757d" opacity="0.3"/>
+      <rect width="32" height="32" rx="6" fill="#4945FF" fillOpacity="0.1"/>
+      <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#4945FF" strokeOpacity="0.15"/>
+      <mask id="path-3-inside-1_649_76" fill="white">
+        <path d="M0 6C0 2.68629 2.68629 0 6 0H10V10H0V6Z"/>
+      </mask>
+      <path d="M-2 6C-2 1.58172 1.58172 -2 6 -2H10V2H6C3.79086 2 2 3.79086 2 6H-2ZM10 10H0H10ZM-2 10V6C-2 1.58172 1.58172 -2 6 -2V2C3.79086 2 2 3.79086 2 6V10H-2ZM10 0V10V0Z" fill="#4945FF" mask="url(#path-3-inside-1_649_76)"/>
+      <path d="M14.67 17.71L12.6275 15.6675C12.4533 15.4933 12.2317 15.4062 11.9625 15.4062C11.6933 15.4062 11.4717 15.4933 11.2975 15.6675C11.1233 15.8417 11.0362 16.0633 11.0362 16.3325C11.0362 16.6017 11.1233 16.8233 11.2975 16.9975L14.005 19.705C14.195 19.895 14.4167 19.99 14.67 19.99C14.9233 19.99 15.145 19.895 15.335 19.705L20.7025 14.3375C20.8767 14.1633 20.9637 13.9417 20.9637 13.6725C20.9637 13.4033 20.8767 13.1817 20.7025 13.0075C20.5283 12.8333 20.3067 12.7462 20.0375 12.7462C19.7683 12.7462 19.5467 12.8333 19.3725 13.0075L14.67 17.71ZM16 25.5C14.6858 25.5 13.4508 25.2505 12.295 24.7514C11.1392 24.2523 10.1337 23.5756 9.27875 22.7212C8.42375 21.8669 7.74703 20.8615 7.2486 19.705C6.75017 18.5485 6.50063 17.3135 6.5 16C6.49937 14.6865 6.7489 13.4515 7.2486 12.295C7.7483 11.1385 8.42502 10.1331 9.27875 9.27875C10.1325 8.42438 11.1379 7.74767 12.295 7.2486C13.4521 6.74953 14.6871 6.5 16 6.5C17.3129 6.5 18.5479 6.74953 19.705 7.2486C20.8621 7.74767 21.8675 8.42438 22.7212 9.27875C23.575 10.1331 24.252 11.1385 24.7523 12.295C25.2527 13.4515 25.5019 14.6865 25.5 16C25.4981 17.3135 25.2486 18.5485 24.7514 19.705C24.2542 20.8615 23.5775 21.8669 22.7212 22.7212C21.865 23.5756 20.8596 24.2526 19.705 24.7523C18.5504 25.252 17.3154 25.5013 16 25.5Z" fill="#4945FF"/>
     </svg>
   </Box>
 );
 
 // Advanced Radio Icon - Clean radio button with selection states
-const MultipleChoiceIcon1 = () => (
+const AdvancedRadioIcon = () => (
   <Box
     style={{
       width: '28px',
@@ -87,29 +83,26 @@ const MultipleChoiceIcon1 = () => (
     }}
   >
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
       width="18"
       height="18"
+      viewBox="0 0 32 32"
       fill="none"
-      stroke="#495057"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="12" cy="12" r="10"/>
-      <circle cx="12" cy="12" r="3" fill="#007bff"/>
-      <circle cx="12" cy="5" r="2" fill="#6c757d" opacity="0.3"/>
-      <circle cx="12" cy="19" r="2" fill="#6c757d" opacity="0.3"/>
-      <circle cx="5" cy="12" r="2" fill="#6c757d" opacity="0.3"/>
-      <circle cx="19" cy="12" r="2" fill="#6c757d" opacity="0.3"/>
+      <rect width="32" height="32" rx="6" fill="#4945FF" fillOpacity="0.1"/>
+      <rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#4945FF" strokeOpacity="0.15"/>
+      <path d="M16 6.5C10.775 6.5 6.5 10.775 6.5 16C6.5 21.225 10.775 25.5 16 25.5C21.225 25.5 25.5 21.225 25.5 16C25.5 10.775 21.225 6.5 16 6.5ZM23.6 16H19.8C19.8 14.575 19.04 13.34 17.9 12.77L19.8 9.445C22.08 10.775 23.6 13.15 23.6 16ZM16 14.1C17.045 14.1 17.9 14.955 17.9 16C17.9 17.045 17.045 17.9 16 17.9C14.955 17.9 14.1 17.045 14.1 16C14.1 14.955 14.955 14.1 16 14.1ZM12.2 9.445C12.77 10.395 13.435 11.63 14.1 12.77C12.96 13.435 12.2 14.67 12.2 16H8.4C8.4 13.15 9.92 10.775 12.2 9.445ZM12.2 22.555C12.77 21.605 13.435 20.37 14.1 19.23C14.67 19.515 15.335 19.8 16 19.8C16.665 19.8 17.33 19.61 17.9 19.23L19.8 22.555C18.66 23.22 17.425 23.6 16 23.6C14.575 23.6 13.34 23.22 12.2 22.555Z" fill="#4945FF"/>
+      <mask id="path-4-inside-1_649_89" fill="white">
+        <path d="M0 6C0 2.68629 2.68629 0 6 0H10V10H0V6Z"/>
+      </mask>
+      <path d="M-2 6C-2 1.58172 1.58172 -2 6 -2H10V2H6C3.79086 2 2 3.79086 2 6H-2ZM10 10H0H10ZM-2 10V6C-2 1.58172 1.58172 -2 6 -2V2C3.79086 2 2 3.79086 2 6V10H-2ZM10 0V10V0Z" fill="#4945FF" mask="url(#path-4-inside-1_649_89)"/>
     </svg>
   </Box>
 );
 
 export {
   PluginIcon,
-  CheckIcon,
-  TextFieldIcon,
-  MultipleChoiceIcon1
+  AdvancedCheckboxIcon,
+  AdvancedInputIcon,
+  AdvancedRadioIcon
 };

package/admin/src/index.js

@@ -1,13 +1,13 @@
 import { PLUGIN_ID } from './pluginId';
 import { Initializer } from './components/Initializer';
-import { CheckIcon, TextFieldIcon, MultipleChoiceIcon1 } from './components/PluginIcon';
+import { AdvancedCheckboxIcon, AdvancedInputIcon, AdvancedRadioIcon } from './components/PluginIcon';
 
 // Dynamic field configuration with comprehensive options
 const customFields = [
   {
     name: "input",
     type: "string",
-    icon: TextFieldIcon,
+    icon: AdvancedInputIcon,
     pluginId: PLUGIN_ID,
     component: () => import("./components/AdvancedInput"),
     intlLabel: {
@@ -147,6 +147,22 @@ const customFields = [
                 defaultMessage: 'Enter custom error message',
               },
             },
+            {
+              name: 'options.fieldNote',
+              type: 'text',
+              intlLabel: {
+                id: `${PLUGIN_ID}.input.options.fieldNote.label`,
+                defaultMessage: 'Field Note',
+              },
+              description: {
+                id: `${PLUGIN_ID}.input.options.fieldNote.description`,
+                defaultMessage: 'Add a helpful note that will appear below the field',
+              },
+              placeholder: {
+                id: `${PLUGIN_ID}.input.options.fieldNote.placeholder`,
+                defaultMessage: 'Enter a note for this field',
+              },
+            },
             {
               name: 'private',
               type: 'checkbox',
@@ -167,7 +183,7 @@ const customFields = [
   {
     name: "checkbox",
     type: "json",
-    icon: CheckIcon,
+    icon: AdvancedCheckboxIcon,
     pluginId: PLUGIN_ID,
     component: () => import("./components/AdvancedCheckbox"),
     intlLabel: {
@@ -404,6 +420,22 @@ const customFields = [
                 defaultMessage: 'Enter custom error message',
               },
             },
+            {
+              name: 'options.fieldNote',
+              type: 'text',
+              intlLabel: {
+                id: `${PLUGIN_ID}.checkbox.options.fieldNote.label`,
+                defaultMessage: 'Field Note',
+              },
+              description: {
+                id: `${PLUGIN_ID}.checkbox.options.fieldNote.description`,
+                defaultMessage: 'Add a helpful note that will appear below the field',
+              },
+              placeholder: {
+                id: `${PLUGIN_ID}.checkbox.options.fieldNote.placeholder`,
+                defaultMessage: 'Enter a note for this field',
+              },
+            },
             {
               name: 'private',
               type: 'checkbox',
@@ -424,7 +456,7 @@ const customFields = [
   {
     name: "radio",
     type: "json",
-    icon: MultipleChoiceIcon1,
+    icon: AdvancedRadioIcon,
     pluginId: PLUGIN_ID,
     component: () => import("./components/AdvancedRadio"),
     intlLabel: {
@@ -636,6 +668,22 @@ const customFields = [
                 defaultMessage: 'Enter custom error message',
               },
             },
+            {
+              name: 'options.fieldNote',
+              type: 'text',
+              intlLabel: {
+                id: `${PLUGIN_ID}.radio.options.fieldNote.label`,
+                defaultMessage: 'Field Note',
+              },
+              description: {
+                id: `${PLUGIN_ID}.radio.options.fieldNote.description`,
+                defaultMessage: 'Add a helpful note that will appear below the field',
+              },
+              placeholder: {
+                id: `${PLUGIN_ID}.radio.options.fieldNote.placeholder`,
+                defaultMessage: 'Enter a note for this field',
+              },
+            },
           ],
         },
       ],

package/index.js

@@ -28,7 +28,7 @@ const customFields = [
             return options.customErrorMessage || 'Value does not match required format';
           }
         } catch (e) {
-          console.warn('Invalid regex pattern:', options.regex);
+          // Invalid regex pattern - silently ignore
         }
       }
       
@@ -63,15 +63,6 @@ const customFields = [
     name: 'checkbox',
     type: 'json',
     validate: (value, { required, options = {} }) => {
-      console.log('[advanced-fields] Checkbox validation:', {
-        value,
-        required,
-        options,
-        valueType: typeof value,
-        isArray: Array.isArray(value),
-        valueLength: Array.isArray(value) ? value.length : 'N/A',
-        checkboxType: options.checkboxType
-      });
       
       // Basic required validation
       if (required) {
@@ -80,14 +71,12 @@ const customFields = [
             (typeof value === 'string' && value.trim() === '') ||
             value === null ||
             value === undefined) {
-          console.log('[advanced-fields] Checkbox validation failed: required field is empty');
           return options.customErrorMessage || 'This field is required';
         }
       }
       
       // If no value and not required, no additional validation needed
       if (!required && (!value || (Array.isArray(value) && value.length === 0))) {
-        console.log('[advanced-fields] Checkbox validation passed (no value, not required)');
         return null;
       }
       
@@ -101,7 +90,6 @@ const customFields = [
         }
       }
       
-      console.log('[advanced-fields] Checkbox validation passed');
       return null;
     }
   },
@@ -137,18 +125,14 @@ const customFields = [
 
 module.exports = {
   register({ strapi }) {
-    console.log(`[${PLUGIN_ID}] Registering custom fields...`);
-    
     // Ensure custom fields registry is available
     if (!strapi.customFields) {
-      console.error(`[${PLUGIN_ID}] Custom fields registry not available`);
       return;
     }
     
     // Register custom fields with proper error handling
     customFields.forEach((field) => {
       try {
-        console.log(`[${PLUGIN_ID}] Registering field: ${field.name} (type: ${field.type})`);
         
         const fieldConfig = {
           name: field.name,
@@ -159,44 +143,16 @@ module.exports = {
         // Add validation function if it exists
         if (field.validate) {
           fieldConfig.validate = field.validate;
-          console.log(`[${PLUGIN_ID}] Added validation function for field: ${field.name}`);
         }
         
         strapi.customFields.register(fieldConfig);
-        console.log(`[${PLUGIN_ID}] Successfully registered field: ${field.name}`);
       } catch (error) {
-        console.error(`[${PLUGIN_ID}] Failed to register field ${field.name}:`, error.message);
-        console.error(`[${PLUGIN_ID}] Error details:`, error);
+        // Field registration failed - silently continue
       }
     });
-    
-    console.log(`[${PLUGIN_ID}] All custom fields registration completed`);
   },
 
   bootstrap({ strapi }) {
-    console.log(`[${PLUGIN_ID}] Bootstrap starting...`);
-    
-    // Wait a bit for registration to complete
-    setTimeout(() => {
-      // Verify all fields are registered only if customFields.get is available
-      if (strapi.customFields && typeof strapi.customFields.get === 'function') {
-        customFields.forEach((field) => {
-          try {
-            const registeredField = strapi.customFields.get(`${PLUGIN_ID}.${field.name}`);
-            if (registeredField) {
-              console.log(`[${PLUGIN_ID}] ✅ Field verified: ${field.name}`);
-            } else {
-              console.error(`[${PLUGIN_ID}] ❌ Field not found in registry: ${field.name}`);
-            }
-          } catch (error) {
-            console.error(`[${PLUGIN_ID}] Error verifying field ${field.name}:`, error.message);
-          }
-        });
-      } else {
-        console.log(`[${PLUGIN_ID}] Skipping field verification (customFields.get not available)`);
-      }
-    }, 100);
-    
-    console.log(`[${PLUGIN_ID}] Bootstrap completed`);
+    // Bootstrap completed
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webbycrown/advanced-fields",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "keywords": [
     "strapi",
     "plugin",
@@ -25,7 +25,6 @@
     "./strapi-server": "./strapi-server.js"
   },
   "files": [
-    "dist",
     "admin",
     "strapi-server.js",
     "strapi-server.mjs",
@@ -68,7 +67,7 @@
     "displayName": "Advanced Fields",
     "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"
   },
-  "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.",
+  "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",
   "license": "MIT",
   "author": {
     "name": "WebbyCrown",