Changed location of react components to .../assets/js/react/components

assets/js/backend-script.js

@@ -1,116 +0,0 @@
-// JavaScript code (lcp-svg-repeater.js) to handle adding/removing rows dynamically
-document.addEventListener('DOMContentLoaded', function () {
-    // Add row
-    document.getElementById('add-svg-row').addEventListener('click', function () {
-        const container = document.getElementById('svg-repeater-container');
-        const newRow = document.createElement('div');
-        newRow.classList.add('repeater-row');
-        newRow.innerHTML = `
-            <input type="text" name="lcp_custom_svgs[][name]" placeholder="SVG Name" />
-            <textarea name="lcp_custom_svgs[][path]" placeholder="SVG Path"></textarea>
-            <button type="button" class="remove-row">Remove</button>
-        `;
-        container.appendChild(newRow);
-    });
-
-    // Remove row
-    document.getElementById('svg-repeater-container').addEventListener('click', function (event) {
-        if (event.target.classList.contains('remove-row')) {
-            event.target.closest('.repeater-row').remove();
-        }
-    });
-});
-
-
-// REPEATERS
-document.addEventListener('DOMContentLoaded', function() {
-    // Function to add a new row to the repeater
-    function addRepeaterRow(repeaterElement) {
-        const newRow = repeaterElement.querySelector('.lcp-repeater-row').cloneNode(true); // Clone the first row
-        repeaterElement.appendChild(newRow);
-
-        // Add remove functionality to the new row's remove button
-        const removeButton = newRow.querySelector('.remove-row');
-        removeButton.addEventListener('click', function() {
-            newRow.remove(); // Remove the row when the button is clicked
-        });
-    }
-
-    // Find all .lcp-repeater elements in the DOM
-    const repeaters = document.querySelectorAll('.lcp-repeater');
-
-    repeaters.forEach(function(repeaterElement) {
-        // Add event listener for the "Add Row" button
-        const addButton = repeaterElement.querySelector('.add-row');
-        addButton.addEventListener('click', function() {
-            addRepeaterRow(repeaterElement); // Add a new row when clicked
-        });
-
-        // Initially, make sure each row has a remove button functionality
-        const rows = repeaterElement.querySelectorAll('.lcp-repeater-row');
-        rows.forEach(function(row) {
-            const removeButton = row.querySelector('.remove-row');
-            removeButton.addEventListener('click', function() {
-                row.remove(); // Remove the row when the remove button is clicked
-            });
-        });
-    });
-});
-
-
-
-
-
-
-
-// REPEATERS
-    // Example html:
-    //  <div class="my-repeater-container">
-    // <div class="my-repeater-row">
-    // <input type="text" name="field_1[]">
-    // <input type="text" name="field_2[]">
-    // <input type="text" name="field_3[]">
-    //<button class="delete-repeater-row">Delete Row</button>
-    //</div>
-    //<button class="new-repeater-row">Click to add a new row</button>
-    //</div>
-
-document.addEventListener('DOMContentLoaded', function () {
-    // Get all repeater containers
-    const repeaterContainers = document.querySelectorAll('.my-repeater-container');
-    
-    // Loop through each repeater container and initialize the functionality
-    repeaterContainers.forEach(function (container) {
-        const newRowButton = container.querySelector('.new-repeater-row');
-        const rowTemplate = container.querySelector('.my-repeater-row');
-
-        // Hide the row template (we will clone it)
-        rowTemplate.style.display = 'none';
-
-        // Add event listener for the 'Add New Row' button
-        newRowButton.addEventListener('click', function () {
-            // Clone the row template
-            const newRow = rowTemplate.cloneNode(true);
-
-            // Make sure the new row is visible
-            newRow.style.display = 'flex';  // or 'block' based on your layout
-
-            // Reset input values in the new row
-            const inputs = newRow.querySelectorAll('input');
-            inputs.forEach(input => input.value = '');
-
-            // Add the new row to the repeater container
-            container.insertBefore(newRow, newRowButton);
-        });
-
-        // Handle deleting rows
-        container.addEventListener('click', function (e) {
-            if (e.target && e.target.classList.contains('delete-repeater-row')) {
-                const rowToDelete = e.target.closest('.my-repeater-row');
-                if (rowToDelete) {
-                    rowToDelete.remove();
-                }
-            }
-        });
-    });
-});

assets/js/react/components/DimensionValueControl.js

@@ -0,0 +1,96 @@
+import { __ } from '@wordpress/i18n';
+import { BaseControl, __experimentalNumberControl as NumberControl, SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
+import { useState, useEffect } from 'react';
+
+/**
+ * Control component with a number input and a select dropdown for units (px, rem, em, % etc.).
+ * Accepts a default value as a string (e.g., "15px", "10rem", etc.).
+ * Includes an optional 'auto' unit if includeAuto is true, and handles autoReturnsNull behavior.
+ */
+export function DimensionValueControl({ value = '10px', onChange, includeAuto = false, autoReturnsNull = false }) {
+    // Options for select control (CSS units) including 'auto' if enabled
+    const unitOptions = [
+        { label: __('px'), value: 'px' },
+        { label: __('%'), value: '%' },
+        { label: __('em'), value: 'em' },
+        { label: __('rem'), value: 'rem' },
+        { label: __('vw'), value: 'vw' },
+        { label: __('vh'), value: 'vh' },
+        ...(includeAuto ? [{ label: __('auto'), value: 'auto' }] : []), // Add 'auto' option if includeAuto is true
+    ];
+
+    // Parse the value string into a number and unit
+    const parseValue = (value) => {
+        const regex = /([0-9]+)([a-zA-Z%]+)?/;  // Capture the number and the unit
+        const match = value.match(regex);
+        if (match) {
+            return {
+                numberValue: parseInt(match[1], 10), // Number part
+                unitValue: match[2] || 'px'          // Unit part (default to 'px' if no unit found)
+            };
+        }
+        return { numberValue: 0, unitValue: 'px' }; // Fallback if invalid format
+    };
+
+    // Use the parsed value to set initial state
+    const { numberValue: initialNumber, unitValue: initialUnit } = parseValue(value);
+    const [numberValue, setNumberValue] = useState(initialNumber);
+    const [unitValue, setUnitValue] = useState(initialUnit);
+
+    // Combine the number and unit into a string like "15px"
+    const dimensionValue = `${numberValue}${unitValue}`;
+
+    // Handle number change
+    const onNumberChange = (newValue) => {
+        setNumberValue(newValue);
+        if (onChange && unitValue !== 'auto') {
+            onChange(`${newValue}${unitValue}`);  // Pass updated value back to parent
+        }
+    };
+
+    // Handle unit change
+    const onUnitChange = (newUnit) => {
+        if (newUnit === 'auto') {
+            setNumberValue(null); // Reset the number value when 'auto' is selected
+        }
+        setUnitValue(newUnit);
+        if (onChange) {
+            const updatedValue = newUnit === 'auto' 
+                ? (autoReturnsNull ? null : 'auto') 
+                : `${numberValue}${newUnit}`; // Pass 'auto' or null or updated value back to parent
+            onChange(updatedValue);
+        }
+    };
+
+    // Effect to handle when value prop changes (useful for syncing)
+    useEffect(() => {
+        const { numberValue, unitValue } = parseValue(value);
+        setNumberValue(numberValue);
+        setUnitValue(unitValue);
+    }, [value]);
+
+    return (
+        <BaseControl className="lcp-dimension-value-control">
+            <HStack>
+                {/* Number input control, disabled when 'auto' is selected */}
+                <NumberControl
+                    className="lcp-number-control"
+                    value={numberValue || ''}
+                    onChange={onNumberChange}
+                    min={0}
+                    step={0.1}
+                    spinControls={'none'}
+                    disabled={unitValue === 'auto'} // Disable number input if 'auto' is selected
+                />
+
+                {/* Select dropdown control for units */}
+                <SelectControl
+                    className="lcp-select-control"
+                    value={unitValue}
+                    options={unitOptions}
+                    onChange={onUnitChange}
+                />
+            </HStack>
+        </BaseControl>
+    );
+}

assets/js/react/components/IconSelectControl.js

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+import { __ } from '@wordpress/i18n';
+import { SelectControl } from '@wordpress/components';
+
+export function IconSelectControl(props) {
+    const { iconSvgId, onIconChange } = props;
+
+    const [iconData, setIconData] = useState([]);
+
+    useEffect(() => {
+        const fetchIconData = async () => {
+            try {
+                const response = await fetch('/wp-json/lcp/v1/icons');
+                const data = await response.json();
+                if (Array.isArray(data) && data.length > 0) {
+                    setIconData(data);  // Set the fetched data directly
+                }
+            } catch (error) {
+                console.error('Error fetching icons:', error);
+            }
+        };
+
+        fetchIconData();
+    }, []);
+
+    const handleIconChange = (selectedIconId) => {
+        const selectedIcon = iconData.find(icon => icon.iconSvgId === selectedIconId);
+        if (selectedIcon && onIconChange) {
+            // Send both icon ID and path (SVG) to the parent component
+            onIconChange({
+                iconSvgId: selectedIcon.iconSvgId,   // Pass icon ID to parent
+                iconSvgPath: selectedIcon.iconSvgPaths,  // Pass icon paths to parent
+                viewbox: selectedIcon.selectedIconViewbox // Pass the viewbox to parent
+            });
+            console.log("Selected Icon ID:", selectedIcon.iconSvgId);  // Debugging output
+            console.log("Selected Icon Path:", selectedIcon.iconSvgPaths);  // Debugging output
+            console.log("Selected Icon Viewbox:", selectedIcon.selectedIconViewbox); // Debugging output
+        }
+    };
+
+    if (iconData.length === 0) {
+        return <p>{__('Loading icons...', 'lcp')}</p>;  // Loading state
+    }
+
+    const iconOptions = iconData.map((icon) => ({
+        value: icon.iconSvgId,  // Use icon ID as value for the SelectControl
+        label: icon.name,  // Directly use the icon's name as the label
+    }));
+    
+    
+    return (
+        <SelectControl
+            label={__('Select Icon', 'lcp')}
+            value={iconSvgId}  // Current selected icon ID
+            options={iconOptions}
+            onChange={handleIconChange}  // Handle icon change
+        />
+    );
+}

assets/js/react/components/PaddingControl.js

@@ -0,0 +1,103 @@
+import { __ } from '@wordpress/i18n';
+import { BaseControl, Button, RangeControl, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
+import { DimensionValueControl } from './DimensionValueControl';
+
+/**
+ * Padding Control component to manage padding values for different screen sizes.
+ */
+export function PaddingControl() {
+    return (
+        <BaseControl className="lcp-padding-control">
+                
+
+            {/* Padding label and Unlink button */}
+            <HStack>
+                <span>{__('Padding')}</span>
+                <Button
+                    variant="secondary"
+                    aria-label={__('Unlink sides')}
+                    onClick={() => {}}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+                        <path d="M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z"></path>
+                    </svg>
+                </Button>
+            </HStack>
+
+            {/* Extra Large Padding Controls */} 
+            {/* Will update all padding values for all screen sizes if updateAllScreenSizes is true */}
+
+            {/* Top and Bottom HStack */}
+            <HStack style={{ flex: 1 }}>
+                {/* Top and Bottom Icon */}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="spacing-sizes-control__icon" aria-hidden="true" focusable="false">
+                    <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style={{ opacity: 0.25 }}></path>
+                    <path d="m7.5 6h9v-1.5h-9z"></path>
+                    <path d="m7.5 19.5h9v-1.5h-9z"></path>
+                </svg>
+
+                {/* RangeControl wrapped in HStack with flex: 1 applied to its parent */}
+                <HStack style={{ flex: 1 }}>
+                    <DimensionValueControl/>
+                    <RangeControl
+                        withInputField={false}
+                        value={10}  // Placeholder value
+                        onChange={() => {}}
+                        min={0}
+                        max={50}
+                    />
+                </HStack>
+
+                {/* Custom Padding Button */}
+                <Button
+                    style={{padding:0,background:'none',color:'var(--wp-components-color-foreground)'} }
+                    variant="primary"
+                    onClick={() => {}}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+                        <path d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"></path>
+                        <path d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"></path>
+                    </svg>
+                </Button>
+            </HStack>
+
+            {/* Left and Right HStack */}
+            <HStack style={{ flex: 1 }}>
+                {/* Left and Right Icon */}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="spacing-sizes-control__icon" aria-hidden="true" focusable="false">
+                    <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style={{ opacity: 0.25 }}></path>
+                    <path d="m7.5 6h9v-1.5h-9z"></path>
+                    <path d="m4.5 7.5v9h1.5v-9z"></path>
+                    <path d="m18 7.5v9h1.5v-9z"></path>
+                </svg>
+
+                {/* RangeControl wrapped in HStack with flex: 1 applied to its parent */}
+                
+                    <RangeControl
+                        withInputField={false}
+                        value={10}  // Placeholder value
+                        onChange={() => {}}
+                        min={0}
+                        max={50}
+                    />
+             
+
+                {/* Custom Padding Button */}
+                <Button
+                    variant="primary"
+                    onClick={() => {}}
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+                        <path d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"></path>
+                        <path d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"></path>
+                    </svg>
+                </Button>
+            </HStack>
+
+            {/* Additional controls can be added here in a VStack */}
+            <VStack>
+                {/* Placeholder for additional components */}
+            </VStack>
+        </BaseControl>
+    );
+}