@gnar-engine/cli 1.0.0 → 1.0.1

package/bootstrap/services/portal/src/styles/inputs.less

@@ -0,0 +1,157 @@
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"] {
+    width: 100%;
+    padding: 6px 10px;
+    margin: 10px 0;
+    border: 1px solid @grey-mid-1;
+    background: @white;
+    border-radius: 25px;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: @dark-1;
+}
+input:focus {
+    outline: none;
+    border: 1px solid @green-1;
+}
+textarea {
+    font-family: 'Roboto', sans-serif;
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid @grey-mid-1;
+    background: @white;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: @dark-1;
+}
+
+button,
+.mainButton {
+    padding: 6px 10px;
+    margin: 10px 0;
+    border: none;
+    background: @green-1;
+    color: @white;
+    border-radius: 25px;
+    font-size: 14px;
+    cursor: pointer;
+    transition-duration: 0.4s;
+    width: 150px;
+    border: 1px solid @green-1;
+    text-decoration: none;
+    max-height: 40px;
+
+    &.wide {
+        width: 215px
+    }
+}
+button:hover,
+.mainButton:hover {
+    opacity: 0.9;
+    cursor: pointer;
+}
+.secondaryButton {
+    padding: 6px 10px;
+    margin: 10px 0;
+    border: none;
+    background: @dark-grey-1;
+    color: @white;
+    border-radius: 25px;
+    font-size: 14px;
+    cursor: pointer;
+    transition-duration: 0.4s;
+    width: 150px;
+    border: 1px solid @dark-grey-1;
+    text-decoration: none;
+    max-height: 40px;
+
+    &.wide {
+        width: 215px
+    }
+}
+.secondaryButton:hover {
+    opacity: 0.9;
+    cursor: pointer;
+}
+.button-cont {
+    width: 100%;
+    display: inline-block;
+
+    &.right {
+        text-align: right;
+    }
+}
+.arrowButton {
+    width: 30px;
+    height: 30px;
+    background: @green-1;
+    color: @white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+}
+button.bin-icon {
+    background: none;
+    border: none;
+    width: 30px;
+    height: 30px;
+    
+    &.white {
+        padding-right: 50px;
+    }
+}
+.pdfButton {
+    display: inline-block;
+    text-align: center;
+    line-height: 1.2em;
+    box-sizing: border-box;
+}
+
+button.success::after {
+    content: '✔'; 
+    color: @dark-1;
+    margin-left: 8px;
+    font-size: 14px;
+}
+
+button.error::after {
+    content: '✘'; 
+    color: @red-1;
+    margin-left: 8px; 
+    font-size: 16px;
+}
+
+button.grey-btn {
+    color: @green-1;
+    border: 1px solid @grey-mid-1;
+    background: @grey-light-1;
+}
+
+.date-selector-cont {
+    width: 100%;
+    display: inline-block;
+}
+.react-datepicker-wrapper {
+    width: 300px;
+    margin-bottom: 10px;
+
+    .react-datepicker__input-container {
+        width: 100%;
+    }
+}
+.text-button {
+    background: none;
+    border: none;
+    color: @green-1;
+    padding: 0px;
+    width: auto !important;
+
+    &:hover {
+        cursor: pointer;
+        opacity: 0.8;
+    }
+}

package/bootstrap/services/portal/src/styles/main.less

@@ -0,0 +1,26 @@
+
+// GLOBAL
+@import "global.less";
+@import "inputs.less";
+
+// LAYOUTS
+@import "../layouts/loginLayout.less";
+@import "../layouts/portalLayout.less";
+
+// PAGES
+@import "../pages/login/login.less";
+@import "../pages/users/users.less";
+
+// FEATURES
+@import "../features/loginForm/loginForm.less";
+@import "../features/sidebar/sidebar.less";
+@import "../features/user/user.less";
+@import "../features/crud/crudList.less";
+@import "../features/crud/crudEdit.less";
+@import "../features/crud/crudPage.less";
+@import "../features/priceFormRow/priceFormRow.less";
+
+// COMPONENTS
+@import "../ui/collapsible/collapsible.less";
+@import "../ui/customCheckbox/customCheckbox.less";
+@import "../ui/customSelect/customSelect.less";

package/bootstrap/services/portal/src/ui/collapsible/Collapsible.jsx

@@ -0,0 +1,97 @@
+import React, {useEffect, useState, useRef} from "react";
+
+
+export default function Collapsible({children, title, open, classNames}) {
+
+    const [isOpen, setIsOpen] = useState(open);
+    const [contentHeight, setContentHeight] = useState("0px");
+    const collapsibleContentInner = useRef(null);
+
+    classNames += " collapsible";
+
+    function handleCollapsibleToggle() {
+        setIsOpen(!isOpen);
+    }
+
+    const handleSetContentHeight = () => {
+
+        if (!collapsibleContentInner.current) {
+            return;
+        }
+
+        const content = collapsibleContentInner.current;
+        const newContentHeight = content.scrollHeight + "px";
+
+        if (isOpen) {
+            setContentHeight(newContentHeight);
+        }
+        else {
+            setContentHeight("0px");
+        }
+        
+    }
+
+    const preSetContentHeight = () => {
+
+        if (!collapsibleContentInner.current) {
+            return;
+        }
+
+        const content = collapsibleContentInner.current;
+        const newContentHeight = content.scrollHeight + "px";
+
+        setContentHeight(newContentHeight);
+    }
+
+    const unsetMaxHeight = () => {
+        setContentHeight("none");
+    }
+
+    // handle toggle
+    useEffect(() => {
+
+        // closing
+        if (!isOpen) {
+            preSetContentHeight();
+        }
+
+        // opening
+        if (isOpen) {
+            handleSetContentHeight();
+            setTimeout(() => {
+                unsetMaxHeight();
+            }, (300));    
+        }
+
+    }, [isOpen]);
+
+    // handle content height change
+    useEffect(() => {
+
+        if (!isOpen) {
+            setTimeout(() => {
+                handleSetContentHeight();
+            }, (0));    
+        }
+        
+    }, [contentHeight]);
+
+    useEffect(() => {
+        handleSetContentHeight();
+    }, []);
+
+
+    return (
+        <div className={`collapsible-cont ${classNames}`}>
+            <div className={`collapsible-header ${isOpen ? "open" : ""}`} onClick={handleCollapsibleToggle}>
+                <h3>{title}</h3>
+                <span>{isOpen ? "-" : "+"}</span>
+            </div>
+            <div className={`collapsible-content ${isOpen ? "collapsible-content-open" : ""}`} style={{ maxHeight: contentHeight }}>
+                <div className="collapsible-content-inner" ref={collapsibleContentInner}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

package/bootstrap/services/portal/src/ui/collapsible/collapsible.less

@@ -0,0 +1,23 @@
+.collapsible-header {
+    display: flex;
+    justify-content: space-between;
+
+    h3 {
+        margin: 0px;
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.collapsible-content {
+    overflow: hidden;
+    transition-duration: 0.5s;
+}
+.collapsible-content-open {
+    margin-top: 30px;
+}
+.collapsible-content-inner ul {
+    margin: 0px;
+}

package/bootstrap/services/portal/src/ui/customCheckbox/CustomCheckbox.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+
+const CustomCheckbox = ({name, label, checked, setChecked}) => {
+    
+    return (
+        <div
+            className={`custom-checkbox ${checked && 'checked'}`}
+            onClick={(e) => e.stopPropagation()} 
+        >
+            <input type="checkbox" id={name} name={name} checked={checked} onChange={() => setChecked(!checked)} />
+            <label htmlFor={name}>{label}</label>
+        </div>
+    )
+}
+
+export default CustomCheckbox;

package/bootstrap/services/portal/src/ui/customCheckbox/customCheckbox.less

@@ -0,0 +1,42 @@
+.custom-checkbox {
+    position: relative;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    
+    input {
+        opacity: 0;
+        position: absolute;
+        left: 0px;
+        min-width: 18px;
+        min-height: 18px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+    label {
+        padding-left: 20px;
+        transition-duration: 0.1s;
+        box-sizing: border-box;
+        
+        &:hover {
+            cursor: pointer;
+            opacity: 0.8;
+        }
+    }
+    
+    &:before {
+        content: '';
+        min-width: 18px;
+        min-height: 18px;
+        background: #F6F8F9;
+        border: 1px solid #E4E4E4;
+        border-radius: 6px;
+        position: absolute;
+        left: 0px;
+    }
+    &.checked:before {
+        content: '';
+        background: #F6F8F9 url('../assets/check.svg') no-repeat center center;
+    }
+}

package/bootstrap/services/portal/src/ui/customMultiSelect/CustomMultiSelect.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+
+const CustomMultiSelect = ({placeholder, name, options, labelKey, icon = null, setSelectedOption, selectedOptions}) => {
+
+    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 (
+        <>
+        {placeholder && name && 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" />}
+                    {selectedOptions && selectedOptions.length >= 1 && selectedOptions[0] && selectedOptions[0][labelKey] ? (
+                        selectedOptions.map((selectedOption, index) => (
+                            <span>{selectedOption[labelKey]} {index + 1 !== selectedOptions.length && ', '}</span>
+                        ))
+                    ) : (
+                        <span>{placeholder}</span>
+                    )}
+                </div>
+                {isOpen && (
+                    <div className="custom-select-options" onMouseLeave={closeDropdown}>
+                        <div className="custom-select-options-inner">
+                            {options && options.map((option, index) => (
+                                <div key={index} className="custom-select-option" onClick={() => {setSelectedOption(option)}}> 
+                                    <span>{option[labelKey]}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+        }
+        </>
+    )
+}
+
+export default CustomMultiSelect;

package/bootstrap/services/portal/src/ui/customMultiSelect/CustomMultiSelectPeriod.jsx

@@ -0,0 +1,63 @@
+import React, {useState, useEffect, useRef} from "react";
+
+const CustomMultiSelectPeriod = ({placeholder, name, options, icon = null, setSelectedOption, selectedOptions}) => {
+
+    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 (
+        <>
+        {placeholder && name && options && setSelectedOption && selectedOptions &&
+            <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" />}
+                    {selectedOptions.length >= 1 && selectedOptions[0] && selectedOptions[0].period_name ? (
+                        selectedOptions.map((selectedPeriod, index) => (
+                            <span>{selectedPeriod.period_name} {selectedPeriod.calendar_year} {index + 1 !== selectedOptions.length && ', '}</span>
+                        ))
+                    ) : (
+                        <span>{placeholder}</span>
+                    )}
+                </div>
+                {isOpen && (
+                    <div className="custom-select-options" onMouseLeave={closeDropdown}>
+                        <div className="custom-select-options-inner">
+                            {options.map((period, index) => (
+                                <div key={index} className="custom-select-option" onClick={() => {setSelectedOption(period)}}> 
+                                    <span>{period.period_name} {period.calendar_year}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+        }
+        </>
+    )
+}
+
+export default CustomMultiSelectPeriod;

package/bootstrap/services/portal/src/ui/customSelect/CustomSelect.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+
+const CustomSelect = ({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 (
+        <>
+        {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>
+        }
+        </>
+    )
+}
+
+export default CustomSelect;

package/bootstrap/services/portal/src/ui/customSelect/customSelect.less

@@ -0,0 +1,92 @@
+@select-box-options-height: 200px;
+
+.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 @grey-mid-1;
+        background: @white;
+        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: @white;
+        border: 1px solid @grey-mid-1;
+        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: @dark-1;
+            font-size: 15px;
+
+            &:hover {
+                opacity: 1;
+                cursor: pointer;
+                color: @orange-1;
+            }
+        }
+    }
+
+    &.open {
+        z-index: 5;
+        
+        .custom-select-options {
+            height: 400px !important;
+        }
+        .custom-select-input {
+            &:after {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    &.closing {
+        z-index: 5;
+    }
+}

package/bootstrap/services/portal/src/ui/goBack/GoBack.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+
+export default function GoBack({text}) {
+
+    const navigate = useNavigate();
+
+    function handleGoBack() {
+        navigate(-1);
+    }
+
+    return (
+        <a onClick={handleGoBack}>
+            <img className="cross" src={require('../../assets/x.svg').default} alt="back" />
+            {text}
+        </a>
+    )
+}

package/bootstrap/services/portal/src/ui/loader/Loader.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Loader() {
+
+    return (
+        <div className="loader">
+            <div className="loader__spinner">Loading...</div>
+        </div>
+    );
+}
+
+export default Loader;