@webbycrown/advanced-fields 1.0.2 → 1.0.4

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

@@ -1,344 +0,0 @@
-"use client";
-
-import { useIntl } from "react-intl";
-import { Field, Box, Flex, Typography } from "@strapi/design-system";
-import { useState, useEffect } from "react";
-
-const AdvancedRadio = ({
-  attribute = {},
-  description = { id: "", defaultMessage: "" },
-  disabled,
-  error,
-  intlLabel = { id: "", defaultMessage: "" },
-  labelAction,
-  name,
-  onChange,
-  required,
-  value,
-}) => {
-  const { formatMessage } = useIntl();
-  const [selectedValues, setSelectedValues] = useState([]);
-  const [validationError, setValidationError] = useState(null);
-  const [hasInteracted, setHasInteracted] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  const {
-    selectionType = "single",
-    layout = "vertical",
-    minChoices = 0,
-    maxChoices = 0,
-    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")
-    .filter((opt) => opt.trim())
-    .map((opt) => {
-      const [value, label] = opt.split("|");
-      return { value: value?.trim() || "", label: label?.trim() || value?.trim() || "" };
-    });
-
-  // Initialize selected values
-  useEffect(() => {
-    let initialValues = [];
-    
-    if (value && Array.isArray(value)) {
-      initialValues = value;
-    } else if (value && typeof value === "string") {
-      initialValues = value.split(",").map(v => v.trim()).filter(v => v);
-    } else if (defaultSelected) {
-      initialValues = defaultSelected.split(",").map(v => v.trim()).filter(v => v);
-    }
-    
-    setSelectedValues(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);
-    }
-  }, [value, defaultSelected, onChange, error]);
-
-  // Validation function - this should match server-side validation
-  const validateSelection = (values) => {
-    const valArray = Array.isArray(values) ? values : [];
-    
-    // Check required validation first
-    if (required && valArray.length === 0) {
-      return customErrorMessage || 'This field is required';
-    }
-    
-    // If field is empty and not required, no validation error
-    if (valArray.length === 0) {
-      return null;
-    }
-    
-    // Check min/max choices validation (only for multiple mode)
-    if (selectionType === "multiple") {
-      if (minChoices > 0 && valArray.length < minChoices) {
-        return customErrorMessage || `Please select at least ${minChoices} option${minChoices > 1 ? 's' : ''}`;
-      }
-      if (maxChoices > 0 && valArray.length > maxChoices) {
-        return customErrorMessage || `Please select at most ${maxChoices} option${maxChoices > 1 ? 's' : ''}`;
-      }
-    }
-    
-    return null;
-  };
-
-  const handleRadioChange = (optionValue, isChecked) => {
-    let newValues;
-    
-    if (selectionType === "single") {
-      // Single selection: replace current selection
-      newValues = isChecked ? [optionValue] : [];
-    } else {
-      // Multiple selection: add/remove from array
-      if (isChecked) {
-        newValues = [...selectedValues, optionValue];
-      } else {
-        newValues = selectedValues.filter(val => val !== optionValue);
-      }
-    }
-    
-    setSelectedValues(newValues);
-    setHasInteracted(true);
-    
-    // Validate selection only after user interaction
-    const error = validateSelection(newValues);
-    setValidationError(error);
-    
-    
-    if (onChange) {
-      // Create a proper event object with name and id attributes
-      const event = {
-        target: {
-          name: name,
-          id: name,
-          value: newValues
-        }
-      };
-      onChange(event);
-    }
-  };
-
-  // Show validation error - prioritize Strapi's error, then our validation only after user interaction
-  const displayError = error || (hasInteracted && validationError);
-
-  const renderRadios = () => {
-
-    const radioStyle = {
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      padding: "4px 0",
-    };
-
-    const radioInputStyle = {
-      width: "16px",
-      height: "16px",
-      accentColor: "#4945ff",
-      margin: "0",
-      padding: "0",
-      opacity: "1",
-      visibility: "visible",
-      display: "block",
-      position: "relative",
-      zIndex: "1",
-      cursor: "pointer",
-      border: "2px solid #dcdce4",
-      borderRadius: "50%",
-      backgroundColor: "white",
-      transition: "all 0.2s ease",
-    };
-
-    // Custom radio button style for multiple selection
-    const customRadioStyle = {
-      width: "16px",
-      height: "16px",
-      borderRadius: "50%",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      backgroundColor: "#ffffff",
-      cursor: "pointer",
-      transition: "all 0.2s ease",
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-    };
-
-    const customRadioCheckedStyle = {
-      ...customRadioStyle,
-      backgroundColor: "#ffffff",
-      borderColor: "#4945ff",
-    };
-
-    const customRadioDotStyle = {
-      width: "10px",
-      height: "10px",
-      borderRadius: "50%",
-      backgroundColor: "#4945ff",
-    };
-
-    const radioLabelStyle = {
-      fontSize: "14px",
-      fontFamily: "inherit",
-      cursor: "pointer",
-      userSelect: "none",
-      color: "#32324d",
-      fontWeight: "400",
-      lineHeight: "1.5",
-      marginLeft: "4px",
-    };
-
-    // 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.radio.no-options',
-              defaultMessage: 'No options defined. Please configure this field in the content type settings.'
-            })}
-          </div>
-        );
-    }
-
-    if (layout === "horizontal") {
-      return (
-        <Flex wrap="wrap" gap={2}>
-          {options.map((option) => (
-            <div key={option.value} style={radioStyle}>
-              {selectionType === "multiple" ? (
-                // Custom radio button appearance for multiple selection
-                <div
-                  style={selectedValues.includes(option.value) ? customRadioCheckedStyle : customRadioStyle}
-                  onClick={() => handleRadioChange(option.value, !selectedValues.includes(option.value))}
-                >
-                  {selectedValues.includes(option.value) && (
-                    <div style={customRadioDotStyle} />
-                  )}
-                </div>
-              ) : (
-                // Regular radio button for single selection
-                <input
-                  type="radio"
-                  id={`${name}-${option.value}`}
-                  name={name}
-                  checked={selectedValues.includes(option.value)}
-                  onChange={(e) => handleRadioChange(option.value, e.target.checked)}
-                  disabled={disabled}
-                  style={radioInputStyle}
-                />
-              )}
-              <label
-                htmlFor={selectionType === "single" ? `${name}-${option.value}` : undefined}
-                style={radioLabelStyle}
-                onClick={selectionType === "multiple" ? () => handleRadioChange(option.value, !selectedValues.includes(option.value)) : undefined}
-              >
-                {option.label}
-              </label>
-            </div>
-          ))}
-        </Flex>
-      );
-    }
-
-    return (
-      <div>
-        {options.map((option) => (
-          <div key={option.value} style={radioStyle}>
-            {selectionType === "multiple" ? (
-              // Custom radio button appearance for multiple selection
-              <div
-                style={selectedValues.includes(option.value) ? customRadioCheckedStyle : customRadioStyle}
-                onClick={() => handleRadioChange(option.value, !selectedValues.includes(option.value))}
-              >
-                {selectedValues.includes(option.value) && (
-                  <div style={customRadioDotStyle} />
-                )}
-              </div>
-            ) : (
-              // Regular radio button for single selection
-              <input
-                type="radio"
-                id={`${name}-${option.value}`}
-                name={name}
-                checked={selectedValues.includes(option.value)}
-                onChange={(e) => handleRadioChange(option.value, e.target.checked)}
-                disabled={disabled}
-                style={radioInputStyle}
-              />
-            )}
-            <label
-              htmlFor={selectionType === "single" ? `${name}-${option.value}` : undefined}
-              style={radioLabelStyle}
-              onClick={selectionType === "multiple" ? () => handleRadioChange(option.value, !selectedValues.includes(option.value)) : undefined}
-            >
-              {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>
-        {renderRadios()}
-        {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 AdvancedRadio;

package/admin/src/components/Initializer.jsx

@@ -1,18 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-import { PLUGIN_ID } from '../pluginId';
-
-/**
- * @type {import('react').FC<{ setPlugin: (id: string) => void }>}
- */
-const Initializer = ({ setPlugin }) => {
-  const ref = useRef(setPlugin);
-
-  useEffect(() => {
-    ref.current(PLUGIN_ID);
-  }, []);
-
-  return null;
-};
-
-export { Initializer };

package/admin/src/components/PluginIcon.jsx

@@ -1,108 +0,0 @@
-import { Box } from '@strapi/design-system';
-
-const PluginIcon = (props) => {
-  return <AdvancedRadioIcon {...props} />;
-};
-
-// Advanced Input Icon - Clean text input with validation indicator
-const AdvancedInputIcon = () => (
-  <Box
-    style={{
-      width: '28px',
-      height: '28px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: '#f8f9fa',
-      borderRadius: '6px',
-      border: '1px solid #e9ecef',
-    }}
-  >
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <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 AdvancedCheckboxIcon = () => (
-  <Box
-    style={{
-      width: '28px',
-      height: '28px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: '#f8f9fa',
-      borderRadius: '6px',
-      border: '1px solid #e9ecef',
-    }}
-  >
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <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 AdvancedRadioIcon = () => (
-  <Box
-    style={{
-      width: '28px',
-      height: '28px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: '#f8f9fa',
-      borderRadius: '6px',
-      border: '1px solid #e9ecef',
-    }}
-  >
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <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,
-  AdvancedCheckboxIcon,
-  AdvancedInputIcon,
-  AdvancedRadioIcon
-};