@gnar-engine/cli 1.0.4 → 1.0.5

package/bootstrap/services/portal/src/elements/CustomSelect/CustomSelect.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+
+
+const CustomSelect = ({label, placeholder, name, options, labelKey, icon = null, setSelectedOption, selectedOption}) => {
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+
+    // Close dropdown 
+    const closeDropdown = () => {
+        setIsClosing(true);
+        setIsOpen(false);  
+        setTimeout(() => {
+            setIsClosing(false); 
+        }, 300); 
+    };
+
+    // Open dropdown
+    const openDropdown = () => {
+        setIsOpen(true);
+        setIsClosing(false);
+    };
+
+    // Handle click for opening and closing
+    const handleClick = () => {
+        if (!isOpen) {
+            openDropdown();
+        } else {
+            closeDropdown();
+        }
+    };
+
+    return (
+        <div className="custom-select-cont">
+            <label>{label}</label>
+            {placeholder && name && options && labelKey && setSelectedOption &&
+                <div className={`custom-select ${isOpen && "open"} ${isClosing ? "closing" : ""}`}>
+                    <div className="custom-select-input" id={name} name={name} onClick={handleClick}>
+                        {icon && <img src={icon} alt="icon" />}
+                        {selectedOption && selectedOption[labelKey] ? (
+                            <span>{selectedOption[labelKey]}</span>
+                        ) : (
+                            <span>{placeholder}</span>
+                        )}
+                    </div>
+                    {isOpen && (
+                        <div className="custom-select-options" onMouseLeave={closeDropdown} >
+                            <div className="custom-select-options-inner">
+                                {options.map((option, index) => {
+                                    return (
+                                        <div key={index} className="custom-select-option" onClick={() => {setSelectedOption(option); setIsOpen(false)}}>
+                                            {option[labelKey]}
+                                        </div>
+                                    )
+                                })}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            }
+        </div>
+    )
+}
+
+export default CustomSelect;

package/bootstrap/services/portal/src/elements/CustomSelect/CustomSelect.less

@@ -0,0 +1,102 @@
+@select-box-options-height: 200px;
+
+.custom-select-cont {
+    display: inline-block;
+
+    label {
+        width: 100%;
+    }
+}
+
+.custom-select {
+    max-width: 215px;
+    min-width: 215px;
+    position: relative;
+
+    .custom-select-input {
+        position: relative;
+        width: 100%;
+        padding: 6px 10px;
+        margin: 10px 0;
+        border: 1px solid @dark-grey;
+        background: @dark-3;
+        border-radius: 25px;
+        box-sizing: border-box;
+        font-size: 15px;
+        color: @dark-1;
+        z-index: 3;
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        &:after {
+            content: url('../assets/chevron.svg');
+            transition-duration: 0.1s;
+            position: absolute;
+            right: 8px;
+            top: 5px;
+            transform-origin: center;
+            height: 20px;
+        }
+    }
+
+    .custom-select-options {
+        position: absolute;
+        width: 100%;
+        top: 10px;
+        left: 0px;
+        max-height: @select-box-options-height;
+        height: 0px !important;
+        overflow: hidden;
+        background: @dark-3;
+        border: 1px solid @dark-grey;
+        box-sizing: border-box;
+        border-radius: 15px;
+        z-index: 2;
+        transition-duration: 0.3s;
+
+        .custom-select-options-inner {
+            min-height: @select-box-options-height;
+            max-height: @select-box-options-height;
+            overflow-y: auto;
+        }
+
+        .custom-select-option:first-child {
+            margin-top: 30px;
+        }
+        
+        .custom-select-option {
+            padding: 10px;
+            opacity: 0.8;
+            transition-duration: 0.1s;
+            color: @light-grey;
+            font-size: 15px;
+
+            &:hover {
+                opacity: 1;
+                cursor: pointer;
+                color: @green-main;
+            }
+        }
+    }
+
+    &.open {
+        z-index: 5;
+        
+        .custom-select-options {
+            height: 400px !important;
+        }
+        .custom-select-input {
+            border: 1px solid @green-main;
+
+            &:after {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    &.closing {
+        z-index: 5;
+    }
+}

package/bootstrap/services/portal/src/elements/ImageInput/ImageInput.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { fileToBase64 } from '../../utils/utils.js';
+
+function ImageInput({ key, label, value: uploadedImages, onChange: setUploadedImages, maxFileSizeMb = 5 }) {
+
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [imagePreviews, setImagePreviews] = useState([]);
+
+    const handleFileSelection = (files) => {
+        const validFiles = Array.from(files).filter(
+            (file) =>
+                [
+                    'image/jpeg',
+                    'image/png',
+                    'image/jpg',
+                    'image/gif',
+                    'image/svg+xml'
+                ].includes(file.type) &&
+                file.size <= maxFileSizeMb * 1024 * 1024 
+        );
+
+        const filePreviews = validFiles.map((file) => URL.createObjectURL(file));
+
+        setSelectedFiles(validFiles);
+        setImagePreviews(filePreviews);
+        
+        (async () => {
+            const file = validFiles[0];
+            const mimeType = file.type;
+            const fileName = file.name;
+            const base64File = await fileToBase64(file);
+            setUploadedImages(base64File, mimeType, fileName);
+        })();
+    }
+
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (files) {
+            handleFileSelection(files);
+        }
+    }
+
+    const handleDrop = (event) => {
+        event.preventDefault();
+        const files = event.dataTransfer.files;
+        if (files) {
+            handleFileSelection(files);
+        }
+    }
+
+    const handleRemoveFile = (index) => {
+        setSelectedFiles((prev) => {
+            const updatedFiles = prev.filter((_, i) => i !== index);
+            setUploadedImages(updatedFiles);
+            return updatedFiles;
+        });
+        setImagePreviews((prev) => prev.filter((_, i) => i !== index));
+    }
+
+    useEffect(() => {
+        if (uploadedImages?.url) {
+            setImagePreviews([uploadedImages.url]);
+        }
+    }, [uploadedImages])
+
+    useEffect(() => {
+        return () => {
+            imagePreviews.forEach((preview) => URL.revokeObjectURL(preview));
+        };
+    }, [imagePreviews])
+
+    return (
+        <div className="image-input">
+            {label && <label>{label}</label>}
+            <div className="flex-row">
+                <div
+                    className="upload-area"
+                    onDrop={handleDrop}
+                    onDragOver={(e) => e.preventDefault()}
+                    style={{
+                        border: '2px dashed #ccc',
+                        padding: '20px',
+                        textAlign: 'center',
+                        marginBottom: '20px',
+                    }}
+                >
+                    <input
+                        type="file"
+                        multiple
+                        accept="image/*"
+                        onChange={handleFileChange}
+                        style={{ display: 'none' }}
+                        id="file-input"
+                    />
+                    <label htmlFor="file-input" style={{ cursor: 'pointer' }}>
+                        <p className="upload-text">Click or drag and drop here to upload</p>
+                        <p className="upload-text">(JPEG, PNG, JPG, GIF, SVG)</p>
+                        <p className="upload-text">Maximum file size: {maxFileSizeMb} MB.</p>
+                    </label>
+                </div>
+
+                <div className="preview-area">
+                    {imagePreviews.map((preview, index) => (
+                        <div key={index} style={{ position: 'relative' }} className="image-preview">
+                            <img src={preview} alt="preview" />
+                            <span onClick={() => handleRemoveFile(index)} className="icon-delete"></span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ImageInput;

package/bootstrap/services/portal/src/elements/ImageInput/ImageInput.less

@@ -0,0 +1,43 @@
+.image-input {
+    position: relative;
+    
+    & > .flex-row {
+        margin-top: 10px;
+        flex-direction: row-reverse;
+        gap: 0px;
+    }
+    .upload-area {
+        border-color: @dark-grey !important;
+        min-width: 190px;
+        margin-bottom: auto;
+        flex-grow: 2;
+    }
+    .preview-area {
+        .image-preview {
+            margin-right: 35px;
+
+            img {
+                max-width: 100%;
+                object-fit: contain;
+            }
+        }
+    }
+
+
+    .icon-delete {
+        min-width: 20px;
+        min-height: 20px;
+        display: inline-block;   
+        background-size: contain;
+        background-repeat: no-repeat;
+        position: absolute;
+        right: -25px;
+        top: -3px;
+        opacity: 0.7;
+    
+        &:hover {
+            cursor: pointer;
+            opacity: 1;
+        }
+    }
+}

package/bootstrap/services/portal/src/elements/ImageMultiInput/ImageMultiInput.jsx

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+
+function ImageMultiInput({ key, label, value: uploadedImages, onChange: setUploadedImages }) {
+
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [imagePreviews, setImagePreviews] = useState([]);
+
+    const handleFileSelection = (files) => {
+        const validFiles = Array.from(files).filter(
+            (file) =>
+                [
+                    'image/jpeg',
+                    'image/png',
+                    'image/jpg',
+                    'image/gif',
+                    'image/svg+xml'
+                ].includes(file.type) &&
+                file.size <= 5 * 1024 * 1024 
+        );
+
+        const filePreviews = validFiles.map((file) => URL.createObjectURL(file));
+
+        setSelectedFiles((prev) => {
+            const updatedFiles = [...prev, ...validFiles];
+            setUploadedImages(updatedFiles); 
+            return updatedFiles;
+        });
+        setImagePreviews((prev) => [...prev, ...filePreviews]);
+    };
+
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (files) {
+            handleFileSelection(files);
+        }
+    };
+
+    const handleDrop = (event) => {
+        event.preventDefault();
+        const files = event.dataTransfer.files;
+        if (files) {
+            handleFileSelection(files);
+        }
+    };
+
+    const handleRemoveFile = (index) => {
+        setSelectedFiles((prev) => {
+            const updatedFiles = prev.filter((_, i) => i !== index);
+            setUploadedImages(updatedFiles);
+            return updatedFiles;
+        });
+        setImagePreviews((prev) => prev.filter((_, i) => i !== index));
+    };
+
+    useEffect(() => {
+        return () => {
+            imagePreviews.forEach((preview) => URL.revokeObjectURL(preview));
+        };
+    }, [imagePreviews]);
+
+    return (
+        <div className="image-input">
+            {label && <label>{label}</label>}
+
+                        <div
+                onDrop={handleDrop}
+                onDragOver={(e) => e.preventDefault()}
+                style={{
+                    border: '2px dashed #ccc',
+                    padding: '20px',
+                    textAlign: 'center',
+                    marginBottom: '20px',
+                }}
+            >
+                <input
+                    type="file"
+                    multiple
+                    accept="image/*"
+                    onChange={handleFileChange}
+                    style={{ display: 'none' }}
+                    id="file-input"
+                />
+                <label htmlFor="file-input" style={{ cursor: 'pointer' }}>
+                    <p className="plus-symbol">+</p>
+                    <p className="upload-text">Click or drag and drop here to upload</p>
+                    <p className="upload-text">(JPEG, PNG, JPG, GIF, SVG)</p>
+                    <p className="upload-text">Maximum file size: 5 MB.</p>
+                </label>
+            </div>
+
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+                {imagePreviews.map((preview, index) => (
+                    <div key={index} style={{ position: 'relative' }}>
+                        <img
+                            src={preview}
+                            alt="preview"
+                            style={{ width: '100px', height: '100px', objectFit: 'cover' }}
+                        />
+                        <button
+                            onClick={() => handleRemoveFile(index)}
+                            style={{
+                                position: 'absolute',
+                                width: '20px',
+                                height: '20px',
+                                top: '0px',
+                                right: '5px',
+                                background: 'red',
+                                color: '#fff',
+                                border: 'none',
+                                borderRadius: '50%',
+                                cursor: 'pointer',
+                                padding: '5px',
+                            }}
+                        >
+                            ×
+                        </button>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default ImageMultiInput;

package/bootstrap/services/portal/src/elements/Repeater/Repeater.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+/**
+ * Repeater component allows users to add, update, and remove items from a list
+ *
+ * Use setItems to manage state setting here, or use setItem override to manage state setting higher up
+ */
+const Repeater = ({ items = [], setItems, setItem, defaultItem, renderRow, buttonText }) => {
+
+    const addItem = () => {
+        if (setItem) {
+            setItem(defaultItem);
+        } else if (setItems) {
+            setItems([...items, defaultItem]);
+        }
+    }
+
+    const updateItem = (index, newItem) => {
+        if (setItem) {
+            setItem(newItem, index);
+        } else if (setItems) {
+            const newItems = [...items];
+            newItems[index] = newItem;
+            setItems(newItems);
+        }
+    }
+
+    const removeItem = (item, index) => {
+        if (setItem) {
+            const remove = true;
+            setItem(item, index, remove);
+        } else {
+            setItems(items.filter((_, i) => i !== index));
+        }
+    }
+
+    return (
+        <div className="repeater">
+            {items.length > 0 && items.map((item, index) => 
+                <div className="repeater-row" key={index}>
+                    {renderRow(item, index, (newItem) => updateItem(index, newItem))}
+                    <span onClick={() => removeItem(item, index)} className="icon-delete remove-repeater-row"></span>
+                </div>
+            )}
+            <div className="button-cont">
+                <button className="add-repeater-row" onClick={addItem}>{buttonText}</button>
+            </div>
+        </div>
+    );
+};
+
+export default Repeater;

package/bootstrap/services/portal/src/elements/Repeater/Repeater.less

@@ -0,0 +1,70 @@
+.repeater-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    position: relative;
+    align-items: center;
+    gap: 20px;
+}
+
+.remove-repeater-row {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    margin-bottom: 10px;
+    opacity: 0.6;
+    
+    &:hover {
+        cursor: pointer;
+        opacity: 1;
+    }
+}
+
+.repeater-row {
+    position: relative;
+    flex-wrap: wrap;
+
+    .nested-block .nested-block {
+        width: 100%;
+        margin-bottom: 0px;
+        position: relative;
+
+        .repeater {
+            box-sizing: border-box;
+            margin-bottom: 60px;
+            border-left: 1px solid @dark-grey;
+            padding-left: 35px;
+        }
+        .repeater-row {
+            justify-content: flex-start;
+        }
+
+        .add-repeater-row {
+            position: absolute;
+            left: 0px;
+            bottom: 10px;
+
+        }
+
+        input[type="text"],
+        input[type="password"],
+        input[type="email"],
+        textarea,
+        .custom-select .custom-select-input {
+            margin-bottom: 0px;
+        }
+    }
+
+    .nested-block {
+        .remove-repeater-row {
+            top: 25px;
+        }
+    }
+    .remove-repeater-row {
+        position: absolute;
+        right: -35px;
+    }
+}
+

package/bootstrap/services/portal/src/elements/RichTextInput/RichTextInput.jsx

@@ -0,0 +1,18 @@
+import ReactQuill from 'react-quill-new';
+import 'react-quill-new/dist/quill.snow.css';
+
+function RichTextInput({ key, label, value, onChange, errorMessage, isValid }) {
+
+    return (
+        <div className="rich-text-input">
+            {label && <label>{label}</label>}
+            <ReactQuill
+                theme="snow"
+                value={value}
+                onChange={onChange}
+            />
+        </div>
+    )
+}
+
+export default RichTextInput;

package/bootstrap/services/portal/src/elements/RichTextInput/RichTextInput.less

@@ -0,0 +1,37 @@
+.quill {
+    margin-top: 10px;
+    .ql-toolbar {
+        border-color: @dark-grey !important;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+    
+        button {
+            svg * {
+                stroke: @light-grey !important;
+            }
+        }
+    }
+    .ql-container {
+        border-color: @dark-grey !important;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+    }
+
+    .ql-editor {
+        min-height: 150px;
+    }
+    
+    button {
+        min-width: unset;
+    }
+    .ql-picker .ql-picker-label {
+        border: none !important;
+    }
+    .ql-picker-options {
+        background: @dark-3 !important;
+        border-color: @dark-grey !important;
+    }
+}
+.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+    color: @green-main !important;
+}

package/bootstrap/services/portal/src/elements/SaveButton/SaveButton.jsx

@@ -0,0 +1,45 @@
+
+
+
+import React, { useState, useEffect } from 'react';
+
+
+function SaveButton({onClick, itemName, loading, error, isNew}) {
+
+    const [text, setText] = useState('Save');
+    const [disabled, setDisabled] = useState(false);
+
+    useEffect(() => {
+        if (loading) {
+            setDisabled(true);
+
+            if (isNew) {
+                setText(`Creating new ${itemName}...`);
+            } else {
+                setText(`Updating ${itemName}...`);
+            }
+        } else if (error) {
+            setText(`Error saving ${itemName}`);
+
+            setTimeout(() => {
+                setDisabled(false);
+                setText(`Save`);
+            }, 2000);
+        } else {
+            setDisabled(false);
+            setText('Save');
+        }
+    }, [loading, error]);
+
+    return (
+        <button 
+            disabled={disabled}
+            onClick={onClick}
+            className={`save-button ${loading ? 'loading' : ''} ${error ? 'error' : ''}`}
+        >
+            {text}
+        </button>
+    )
+}
+
+export default SaveButton;