@gnar-engine/cli 1.0.2 → 1.0.4

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

@@ -1,157 +0,0 @@
-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

@@ -1,26 +0,0 @@
-
-// 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

@@ -1,97 +0,0 @@
-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

@@ -1,23 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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

@@ -1,42 +0,0 @@
-.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

@@ -1,63 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,92 +0,0 @@
-@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

@@ -1,19 +0,0 @@
-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

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