@webbycrown/advanced-fields 1.0.1 → 1.0.3

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.3",
   "keywords": [
     "strapi",
     "plugin",
@@ -25,8 +25,7 @@
     "./strapi-server": "./strapi-server.js"
   },
   "files": [
-    "dist",
-    "admin",
+    "dist/",
     "strapi-server.js",
     "strapi-server.mjs",
     "index.js",
@@ -34,8 +33,10 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "npm run build:admin",
+    "build": "npm run build:admin && npm run copy:translations",
     "build:admin": "strapi-plugin build",
+    "copy:translations": "cp -r admin/src/translations dist/admin/",
+    "prepublishOnly": "npm run build",
     "watch": "strapi-plugin watch",
     "watch:link": "strapi-plugin watch:link",
     "verify": "strapi-plugin verify"
@@ -68,7 +69,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",

package/admin/jsconfig.json

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

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

@@ -1,397 +0,0 @@
-"use client";
-
-import { useIntl } from "react-intl";
-import { Field, Box, Flex, Typography } from "@strapi/design-system";
-import { useState, useEffect } from "react";
-
-const CheckboxInput = ({
-  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 = "",
-  } = attribute.options || attribute;
-
-  // Debug logging for checkboxType detection
-  // console.log('AdvancedCheckbox options detection:', {
-  //   attribute,
-  //   attributeOptions: attribute.options,
-  //   checkboxType,
-  //   checkboxOptions,
-  //   allOptions: attribute.options || attribute
-  // });
-
-  // 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();
-    
-    console.log('AdvancedCheckbox initialization:', {
-      value,
-      defaultSelected,
-      initialValues,
-      required,
-      error
-    });
-    
-    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);
-    
-    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,
-          name: name,
-          id: name
-        } 
-      });
-    }
-  };
-
-  // 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",
-      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>
-        )}
-      </Field.Root>
-    </Box>
-  );
-};
-
-export default CheckboxInput;