@webbycrown/advanced-fields 1.0.0 → 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/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "jsx": "react",
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src/**/*.js", "./src/**/*.jsx"]
+}

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

@@ -0,0 +1,377 @@
+"use client";
+
+import { useIntl } from "react-intl";
+import { Field, Box, Flex, Typography } from "@strapi/design-system";
+import { useState, useEffect } from "react";
+
+const AdvancedCheckbox = ({
+  attribute = {},
+  description = { id: "", defaultMessage: "" },
+  disabled,
+  error,
+  intlLabel = { id: "", defaultMessage: "" },
+  labelAction,
+  name,
+  onChange,
+  required,
+  value,
+}) => {
+  const { formatMessage } = useIntl();
+  
+  const {
+    checkboxType = "multiple",
+    layout = "vertical",
+    minChoices = 0,
+    maxChoices = 0,
+    defaultSelected = "",
+    checkboxOptions = "",
+    customErrorMessage = "",
+    fieldNote = "",
+  } = attribute.options || attribute;
+
+  // Also check attribute.options for fieldNote
+  const fieldNoteFromAttribute = attribute.options?.fieldNote || '';
+
+
+  // Initialize with default values if available
+  const getInitialValues = () => {
+    if (checkboxType === "single") {
+      // For single checkbox mode, return array with one value (like radio button)
+      if (value && Array.isArray(value) && value.length > 0) {
+        return value;
+      } else if (value && typeof value === "string" && value.trim()) {
+        return [value.trim()];
+      } else if (defaultSelected && typeof defaultSelected === "string" && defaultSelected.trim()) {
+        return [defaultSelected.trim()];
+      } else if (defaultSelected && Array.isArray(defaultSelected) && defaultSelected.length > 0) {
+        return defaultSelected;
+      }
+      return [];
+    } else {
+      // For multiple checkboxes, return array of selected values
+      if (value && Array.isArray(value)) {
+        return value;
+      } else if (value && typeof value === "string") {
+        return value.split(",").map(v => v.trim()).filter(v => v);
+      } else if (defaultSelected) {
+        return defaultSelected.split(",").map(v => v.trim()).filter(v => v);
+      }
+      return [];
+    }
+  };
+
+  const [fieldValue, setFieldValue] = useState(getInitialValues);
+  const [validationError, setValidationError] = useState(null);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  // Parse checkbox options
+  const options = checkboxOptions
+    .split("\n")
+    .filter((opt) => opt.trim())
+    .map((opt) => {
+      const [value, label] = opt.split("|");
+      return { value: value?.trim() || "", label: label?.trim() || value?.trim() || "" };
+    });
+
+  // Initialize selected values - only run once on mount
+  useEffect(() => {
+    const initialValues = getInitialValues();
+    
+    
+    setFieldValue(initialValues);
+    
+    // Validate the initial values
+    const validationResult = validateSelection(initialValues);
+    setValidationError(validationResult);
+    
+    // Only trigger onChange if we have initial values and it's different from current value
+    // AND only if the value prop is not already set (to avoid overriding during publish)
+    // AND only if this is the first initialization
+    if (onChange && initialValues.length > 0 && (!value || (Array.isArray(value) && value.length === 0)) && !isInitialized) {
+      // Use setTimeout to ensure this happens after the component is fully mounted
+      setTimeout(() => {
+        onChange({ 
+          target: { 
+            value: initialValues,
+            name: name,
+            id: name
+          } 
+        });
+        setIsInitialized(true);
+      }, 0);
+    } else if (!isInitialized) {
+      setIsInitialized(true);
+    }
+  }, []); // Remove dependencies to only run once on mount
+
+  // Handle external value changes (like when loading existing data)
+  useEffect(() => {
+    // Only update if the value prop has changed and it's not empty
+    // This handles cases like loading existing content
+    if (value && Array.isArray(value) && value.length > 0) {
+      setFieldValue(value);
+      const validationResult = validateSelection(value);
+      setValidationError(validationResult);
+    }
+  }, [value]);
+
+  // Validation function - this should match server-side validation
+  const validateSelection = (val) => {
+    const values = Array.isArray(val) ? val : [];
+    
+    // Check required validation first
+    if (required && values.length === 0) {
+      return customErrorMessage || 'This field is required';
+    }
+    
+    // If field is empty and not required, no validation error
+    if (values.length === 0) {
+      return null;
+    }
+    
+    // Check min/max choices validation (only for multiple mode)
+    if (checkboxType === "multiple") {
+      if (minChoices > 0 && values.length < minChoices) {
+        return customErrorMessage || `Please select at least ${minChoices} option${minChoices > 1 ? 's' : ''}`;
+      }
+      if (maxChoices > 0 && values.length > maxChoices) {
+        return customErrorMessage || `Please select at most ${maxChoices} option${maxChoices > 1 ? 's' : ''}`;
+      }
+    }
+    
+    return null;
+  };
+
+  const handleCheckboxChange = (optionValue, isChecked) => {
+    let newValue;
+    
+    if (checkboxType === "single") {
+      // For single checkbox mode, work like radio button - only one option can be selected
+      if (isChecked) {
+        // If checking an option, set it as the only selected value
+        newValue = [optionValue];
+      } else {
+        // If unchecking, clear the selection
+        newValue = [];
+      }
+    } else {
+      // For multiple checkboxes, handle array of values
+      if (isChecked) {
+        newValue = [...fieldValue, optionValue];
+      } else {
+        newValue = fieldValue.filter(val => val !== optionValue);
+      }
+    }
+    
+    setFieldValue(newValue);
+    setHasInteracted(true);
+    
+    // Validate selection only after user interaction
+    const error = validateSelection(newValue);
+    setValidationError(error);
+    
+    
+    // Always trigger onChange for user interactions
+    if (onChange) {
+      onChange({ 
+        target: { 
+          value: newValue,
+          name: name,
+          id: name
+        } 
+      });
+    }
+  };
+
+  // Show validation error - prioritize Strapi's error, then our validation only after user interaction
+  const displayError = error || (hasInteracted && validationError);
+  const renderCheckboxes = () => {
+
+    const checkboxStyle = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      marginBottom: "8px",
+    };
+
+    const checkboxInputStyle = {
+      width: "16px",
+      height: "16px",
+      accentColor: "#4945ff",
+      margin: "0",
+      padding: "0",
+      opacity: "1",
+      visibility: "visible",
+      display: "block",
+      position: "relative",
+      zIndex: "1",
+    };
+
+    const checkboxLabelStyle = {
+      fontSize: "14px",
+      fontFamily: "inherit",
+      cursor: "pointer",
+      userSelect: "none",
+    };
+
+    // Single checkbox mode - show multiple options but only one selectable (like radio buttons)
+    if (checkboxType === "single") {
+      // If no options are defined for single mode, show a message
+      if (!options || options.length === 0) {
+        return (
+          <div style={{ padding: "8px", color: "#666", fontStyle: "italic" }}>
+            {formatMessage({
+              id: 'advanced-fields.checkbox.options.checkboxOptions.description',
+              defaultMessage: 'Define available options for multiple checkboxes (one per line: value|label)'
+            })}
+          </div>
+        );
+      }
+
+      if (layout === "horizontal") {
+        return (
+          <Flex wrap="wrap" gap={2}>
+            {options.map((option) => (
+              <div key={option.value} style={checkboxStyle}>
+                <input
+                  type="checkbox"
+                  id={`${name}-${option.value}`}
+                  checked={fieldValue.includes(option.value)}
+                  onChange={(e) => handleCheckboxChange(option.value, e.target.checked)}
+                  disabled={disabled}
+                  style={checkboxInputStyle}
+                />
+                <label
+                  htmlFor={`${name}-${option.value}`}
+                  style={checkboxLabelStyle}
+                >
+                  {option.label}
+                </label>
+              </div>
+            ))}
+          </Flex>
+        );
+      }
+
+      return (
+        <div>
+          {options.map((option) => (
+            <div key={option.value} style={checkboxStyle}>
+              <input
+                type="checkbox"
+                id={`${name}-${option.value}`}
+                checked={fieldValue.includes(option.value)}
+                onChange={(e) => handleCheckboxChange(option.value, e.target.checked)}
+                disabled={disabled}
+                style={checkboxInputStyle}
+              />
+              <label
+                htmlFor={`${name}-${option.value}`}
+                style={checkboxLabelStyle}
+              >
+                {option.label}
+              </label>
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    // Multiple checkbox mode
+    // If no options are defined, show a message
+    if (!options || options.length === 0) {
+        return (
+          <div style={{ padding: "8px", color: "#666", fontStyle: "italic" }}>
+            {formatMessage({
+              id: 'advanced-fields.checkbox.options.checkboxOptions.description',
+              defaultMessage: 'Define available options for multiple checkboxes (one per line: value|label)'
+            })}
+          </div>
+        );
+    }
+
+    if (layout === "horizontal") {
+      return (
+        <Flex wrap="wrap" gap={2}>
+          {options.map((option) => (
+            <div key={option.value} style={checkboxStyle}>
+              <input
+                type="checkbox"
+                id={`${name}-${option.value}`}
+                checked={fieldValue.includes(option.value)}
+                onChange={(e) => handleCheckboxChange(option.value, e.target.checked)}
+                disabled={disabled}
+                style={checkboxInputStyle}
+              />
+              <label
+                htmlFor={`${name}-${option.value}`}
+                style={checkboxLabelStyle}
+              >
+                {option.label}
+              </label>
+            </div>
+          ))}
+        </Flex>
+      );
+    }
+
+    return (
+      <div>
+        {options.map((option) => (
+          <div key={option.value} style={checkboxStyle}>
+            <input
+              type="checkbox"
+              id={`${name}-${option.value}`}
+              checked={fieldValue.includes(option.value)}
+              onChange={(e) => handleCheckboxChange(option.value, e.target.checked)}
+              disabled={disabled}
+              style={checkboxInputStyle}
+            />
+            <label
+              htmlFor={`${name}-${option.value}`}
+              style={checkboxLabelStyle}
+            >
+              {option.label}
+            </label>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Box col={6}>
+      <Field.Root name={name} error={displayError}>
+        <Field.Label>
+          {intlLabel.id ? formatMessage(intlLabel) : intlLabel.defaultMessage || name}
+          {required && <span style={{ color: "#d02b20", marginLeft: "4px" }}>*</span>}
+        </Field.Label>
+        {renderCheckboxes()}
+        {displayError && (
+          <Field.Error>
+            {displayError}
+          </Field.Error>
+        )}
+        {description && (description.id || description.defaultMessage) && (
+          <Field.Hint>
+            {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 AdvancedCheckbox;

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

@@ -0,0 +1,179 @@
+"use client";
+
+import { useIntl } from "react-intl";
+import { Field, Box } from "@strapi/design-system";
+import { Cross } from "@strapi/icons";
+import { useState, useEffect } from "react";
+
+const AdvancedInput = ({
+  attribute = {},
+  description = { id: "", defaultMessage: "" },
+  disabled,
+  error,
+  intlLabel = { id: "", defaultMessage: "" },
+  labelAction,
+  name,
+  onChange,
+  required,
+  value,
+}) => {
+  const { formatMessage } = useIntl();
+  const [inputValue, setInputValue] = useState(value || "");
+  const [validationError, setValidationError] = useState(null);
+  const [hasInteracted, setHasInteracted] = useState(false);
+
+  const {
+    minLength = 0,
+    maxLength = 0,
+    min = 0,
+    max = 0,
+    step = 1,
+    rows = 4,
+    options = {},
+  } = attribute;
+
+  // Extract options with defaults
+  const {
+    placeholder = '',
+    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;
+    setInputValue(initialValue);
+    
+    // Don't validate on initial load unless there's an error from Strapi
+    if (error) {
+      setValidationError(error);
+    }
+    
+    if (onChange) {
+      onChange({ target: { value: initialValue } });
+    }
+  }, [value, defaultValue, onChange, error]);
+
+  // Validation function - this should match server-side validation
+  const validateInput = (val) => {
+    // Check required validation first
+    if (required && (!val || val.toString().trim().length === 0)) {
+      return customErrorMessage || "This field is required";
+    }
+    
+    // If no value, no additional validation needed
+    if (!val || val.toString().trim().length === 0) {
+      return null;
+    }
+    
+    const stringValue = val.toString().trim();
+    
+    // Check min/max length validation
+    if (minLength > 0 && stringValue.length < minLength) {
+      return customErrorMessage || `Minimum length is ${minLength} characters`;
+    }
+    if (maxLength > 0 && stringValue.length > maxLength) {
+      return customErrorMessage || `Maximum length is ${maxLength} characters`;
+    }
+    
+    // Check regex validation if provided
+    if (regex && stringValue) {
+      try {
+        const regexPattern = new RegExp(regex);
+        if (!regexPattern.test(stringValue)) {
+          return customErrorMessage || "Invalid format";
+        }
+      } catch (e) {
+        // Invalid regex pattern, skip validation
+      }
+    }
+    
+    return null;
+  };
+
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setHasInteracted(true);
+    
+    // Validate input only after user interaction
+    const error = validateInput(newValue);
+    setValidationError(error);
+    
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  // Show validation error - prioritize Strapi's error, then our validation only after user interaction
+  const displayError = error || (hasInteracted && validationError);
+
+  const renderInput = () => {
+    const commonProps = {
+      name,
+      value: inputValue,
+      onChange: handleChange,
+      disabled,
+      placeholder: placeholder || (intlLabel.id ? formatMessage(intlLabel) : intlLabel.defaultMessage || ""),
+    };
+
+    const inputStyle = {
+      width: "100%",
+      padding: "8px 12px",
+      border: `1px solid ${displayError ? "#d02b20" : "#dcdce4"}`,
+      borderRadius: "4px",
+      fontSize: "14px",
+      fontFamily: "inherit",
+      backgroundColor: disabled ? "#f6f6f9" : "#ffffff",
+    };
+
+    return (
+      <input
+        {...commonProps}
+        type="text"
+        style={inputStyle}
+      />
+    );
+  };
+
+  return (
+    <Box col={6}>
+      <Field.Root name={name} error={displayError}>
+        <Field.Label>
+          {intlLabel.id ? formatMessage(intlLabel) : intlLabel.defaultMessage || name}
+          {required && <span style={{ color: "#d02b20", marginLeft: "4px" }}>*</span>}
+        </Field.Label>
+        {renderInput()}
+        {displayError && (
+          <Field.Error>
+            {displayError}
+          </Field.Error>
+        )}
+        {description && (description.id || description.defaultMessage) && (
+          <Field.Hint>
+            {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 AdvancedInput;