cloudmr-ux 0.0.3 → 1.0.0

package/src/common/components/Cmr-components/gui-slider/ControlledSlider.tsx

@@ -1,139 +0,0 @@
-import { Box } from "@mui/material";
-import { useRef, useState } from "react";
-
-export const ControlledSlider = ({
-                                     name,
-                                     min,
-                                     max,
-                                     setValue,
-                                     transform = x => x,
-                                     inverse = x => x,
-                                     value
-                                 }: {
-    name: string,
-    min: number,
-    max: number,
-    setValue?: (value: number) => void,
-    transform?: (x: number) => number,
-    inverse?: (x: number) => number,
-    value: number
-}) => {
-    const sliderPosition = (value - min) / (max - min) * 100;
-    const sliderRef = useRef(null);
-    const [isEditing, setIsEditing] = useState(false);
-    const [editedValue, setEditedValue] = useState('');
-    const [textIsNaN, setIsNaN] = useState(false);
-
-    const handleDragStart = (e: any) => {
-        e.preventDefault();
-
-        const startX = e.clientX;
-        //@ts-ignore
-        const sliderWidth = sliderRef.current.offsetWidth;
-
-        const handleMouseMove = (e: any) => {
-            const moveX = e.clientX - startX;
-            const newPosition = ((moveX / sliderWidth) * 100) + sliderPosition;
-            const clampedPosition = Math.min(100, Math.max(0, newPosition));
-            const newValue = (max - min) * clampedPosition / 100 + min;
-            setValue && setValue(newValue);
-        };
-
-        const handleMouseUp = () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    };
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setIsNaN(isNaN(Number(e.target.value)));
-        setEditedValue(e.target.value);
-    };
-
-    const handleInputBlur = (e:any) => {
-        let val = inverse(Number(editedValue));
-        if (isNaN(val)) {
-            return e.preventDefault();
-        }
-        setIsEditing(false);
-        setValue&&setValue(val)
-    };
-
-    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter'&&!textIsNaN) {
-            e.currentTarget.blur();
-        }
-    };
-
-    const formatText=(value:number)=>{
-        return  Math.abs(value)<0.01&&value!=0?
-                    Number(value).toExponential(3).toUpperCase():
-                    Number(value).toFixed(3);
-    }
-
-    const displayValue = isEditing ? editedValue : formatText(value);
-
-    return (
-        <Box sx={{ display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px' }} height={20}>
-            <Box flex={0.77} fontSize={16} color={'#3D3D3D'} alignItems={'center'} display={'flex'} marginBottom={'1pt'}
-                 fontFamily={'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif'}>
-                {name}
-            </Box>
-            <Box sx={{ display: 'flex', flexDirection: 'row' }} flex={1}>
-                <Box
-                    sx={{
-                        backgroundColor: '#f0f0f0',
-                        flex: 1,
-                        marginLeft: '4px',
-                        marginRight: '4px',
-                        borderRadius: '2px',
-                        position: 'relative',
-                        overflow: 'hidden'
-                    }}
-                    ref={sliderRef}
-                    onMouseDown={handleDragStart}
-                >
-                    <Box
-                        sx={{
-                            position: 'absolute',
-                            left: `calc(${sliderPosition * 0.98}% - 10px)`,
-                            width: '20px',
-                            height: '100%',
-                            cursor: 'ew-resize',
-                            zIndex: 1
-                        }}
-                    >
-                        <Box sx={{ position: 'absolute', left: '10px', width: '2px', height: '100%', backgroundColor: 'black' }} />
-                    </Box>
-                </Box>
-                <input
-                    style={{
-                        backgroundColor: '#f0f0f0',
-                        width: '45px',
-                        borderRadius: '2px',
-                        outline: "none",
-                        borderStyle: 'none',
-                        paddingLeft: '3px',
-                        paddingRight: '3px',
-                        lineHeight: '20px',
-                        whiteSpace: 'nowrap',
-                        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
-                        fontSize: '11px',
-                        color: textIsNaN?'red':'black'
-                    }}
-                    value={displayValue}
-                    onChange={handleInputChange}
-                    onBlur={handleInputBlur}
-                    onKeyDown={handleInputKeyDown}
-                    onFocus={(e) => {
-                        setEditedValue(e.target.value);
-                        setIsEditing(true)
-                    }}
-                />
-            </Box>
-        </Box>
-    );
-};

package/src/common/components/Cmr-components/gui-slider/Slider.tsx

@@ -1,170 +0,0 @@
-import { Box } from "@mui/material";
-import {useEffect, useRef, useState} from "react";
-
-/**
- * This slider allows users to control a single value within a given range.
- * The rendered value can be masked by a transformation.
- * @param name
- * @param min
- * @param max
- * @param setValue
- * @param transform transform is used to mask the rendered value by a transformation
- * @param inverse transform is used to unmask the value to its original form
- * @constructor
- */
-export const Slider = ({
-                           name,
-                           min,
-                           max,
-                           setValue,
-                           transform = x => x,
-                           inverse = x => x,
-                            value
-                       }: {
-    name: string,
-    min: number,
-    max: number,
-    setValue?: (value: number) => void,
-    transform?: (x: number) => number,
-    inverse?: (x: number) => number,
-    value?:number
-}) => {
-    useEffect(() => {
-        if(value!=undefined){
-            setSliderPosition((value-min)/(max-min)*100);
-        }
-    }, [value]);
-    const [sliderPosition, setSliderPosition] = useState(50); // Initial percentage for the slider
-
-    const sliderRef = useRef(null); // Ref for the parent box
-
-    const handleDragStart = (e: any) => {
-        // Prevent default behavior
-        e.preventDefault();
-
-        // Calculate initial positions
-        const startX = e.clientX;
-        // @ts-ignore
-        const sliderWidth = sliderRef.current.offsetWidth;
-
-        const handleMouseMove = (e: any) => {
-            const moveX = e.clientX - startX;
-            const newPosition = ((moveX / sliderWidth) * 100)+sliderPosition;
-
-            // Prevent the slider from going outside the parent box
-            const clampedPosition = Math.min(100, Math.max(0, newPosition));
-
-            // Update the position of the slider
-            setSliderPosition(clampedPosition);
-            const value = transform((max - min) * clampedPosition / 100 + min);
-            setValue && setValue(value);
-        };
-
-        const handleMouseUp = () => {
-            // Remove event listeners once dragging is complete
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-        };
-
-        // Add mouse move and mouse up listeners to document to handle drag
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    };
-
-
-    const [isEditing, setIsEditing] = useState(false);
-    const [editedValue, setEditedValue] = useState('');
-    const [textIsNaN, setIsNaN] = useState(false);
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setIsNaN(isNaN(Number(e.target.value)));
-        setEditedValue(e.target.value);
-    };
-
-    const handleInputBlur = (e:any) => {
-        let val = inverse(Number(editedValue));
-        if (isNaN(val)) {
-            return e.preventDefault();
-        }
-        setIsEditing(false);
-        setValue&&setValue(val)
-    };
-
-    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter'&&!textIsNaN) {
-            e.currentTarget.blur();
-        }
-    };
-
-    const formatText=(value:number)=>{
-        return  Math.abs(value)<0.01&&value!=0?
-            Number(value).toExponential(3).toUpperCase():
-            Number(value).toFixed(3);
-    }
-
-    const val = transform((max - min) * sliderPosition / 100 + min);
-    const displayValue = isEditing ? editedValue : formatText(val);
-
-    return <Box sx={{display: 'flex', flexDirection: 'row', paddingLeft: '4px', paddingRight: '4px',marginBottom:'4px'
-    }} height={20}>
-        <Box flex={0.77} fontSize={16} color={'#3D3D3D'} alignItems={'center'} display={'flex'} marginBottom={'1pt'}
-             fontFamily={'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif'}>
-            {name}
-        </Box>
-        <Box sx={{display: 'flex', flexDirection: 'row'}} flex={1}>
-            <Box sx={{
-                backgroundColor: '#f0f0f0',
-                flex: 1,
-                marginLeft: '4px',
-                marginRight: '4px',
-                borderRadius: '2px',
-                position: 'relative',
-                overflow: 'hidden'
-            }} ref={sliderRef}
-                 onMouseDown={handleDragStart}>
-                {/* Visual representation of the slider */}
-                <Box sx={{
-                    position: 'absolute',
-                    left: `calc(${sliderPosition*0.98}% - 10px)`,
-                    width: '20px',
-                    height: '100%',
-                    cursor: 'ew-resize',
-                    zIndex: 1
-                }}>
-                    <Box sx={{
-                        position: 'absolute',
-                        left: '10px',
-                        width: '2px',
-                        height: '100%',
-                        backgroundColor: 'black'
-                    }}/>
-                </Box>
-            </Box>
-
-            <input
-                style={{
-                    backgroundColor: '#f0f0f0',
-                    width: '45px',
-                    borderRadius: '2px',
-                    outline: "none",
-                    borderStyle: 'none',
-                    paddingLeft: '3px',
-                    paddingRight: '3px',
-                    lineHeight: '20px',
-                    whiteSpace: 'nowrap',
-                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
-                    fontSize: '11px',
-                    color: textIsNaN?'red':'black'
-                }}
-                value={displayValue}
-                onChange={handleInputChange}
-                onBlur={handleInputBlur}
-                onKeyDown={handleInputKeyDown}
-                onFocus={(e) => {
-                    setEditedValue(e.target.value);
-                    setIsEditing(true)
-                }}
-            />
-        </Box>
-    </Box>;
-}

package/src/common/components/Cmr-components/header/Header.scss

@@ -1,20 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Nunito);
-
-:root {
-  --bs-dark-rgb: 0, 0, 0; /* change these values to your preferred RGB color */
-}
-
-.small-margin{
-  margin-left: 25pt;
-  margin-right: 25pt;
-}
-
-.navbar-nav > .active > a {
-  color: white;
-  font-weight: 500;
-}
-
-.navbar-brand {
-  font-family: 'Nunito', sans-serif;
-
-}

package/src/common/components/Cmr-components/header/Header.tsx

@@ -1,101 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import './Header.scss';
-import { Link, useNavigate } from 'react-router-dom';
-
-interface MenuItem{
-    path: string
-    title: string
-}
-
-const Header = ({siteTitle, authentication,handleLogout,menuList}:{
-    siteTitle:string,
-    authentication: {email:string, accessToken: string}
-    menuList: MenuItem[],
-    handleLogout: ()=>void
-}) => {
-    const navigate = useNavigate();
-    const currPath = navigate.name;
-    const [menuSelect, setMenuSelect] = useState(siteTitle);
-    const { email, accessToken } = authentication;
-    console.log(authentication);
-
-    useEffect(() => {
-        for (let item of menuList) {
-            console.log(item.path);
-            console.log(currPath);
-            if (item.path === currPath) setMenuSelect(item.title);
-        }
-    }, [currPath]);
-
-    const handleMenuChange = (info: MenuItem,navigate:any) => {
-        if (currPath === info.path) return;
-        navigate(info.path);
-        for (let item of menuList) {
-            if (item.path === info.path){
-                setMenuSelect(item.title);
-            }
-        }
-        return false;
-    };
-
-    return (
-        <nav className="navbar navbar-expand-md navbar-dark bg-dark shadow-sm" style={{background: '#000000'}}>
-            {/*add small-margin to className to align header content to the ends*/}
-            <div className="container-xl">
-                <Link to="/" className="navbar-brand">
-                    {siteTitle}
-                </Link>
-                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
-                        aria-expanded="false" aria-label="Toggle navigation">
-                    <span className="navbar-toggler-icon"></span>
-                </button>
-
-                <div className="collapse navbar-collapse" id="navbarToggleExternalContent">
-                    {/* Left Side Of Navbar */}
-                    <ul className="navbar-nav">
-                        {menuList.map((menuItem)=>{
-                            return <li className={`nav-item${(menuItem.title==menuSelect)?' active':''}`} key={menuItem.path}>
-                                <a className='nav-link' style={{cursor:'pointer'}} onClick={(event)=>{
-                                    switch(menuItem.title) {
-                                        case 'Bug Report':
-                                            window.open('https://github.com/cloudmrhub-com/mroptimum/issues')
-                                            // window.location.href='https://github.com/cloudmrhub-com/mroptimum/issues';
-                                            return;
-                                    }
-                                    event.preventDefault();
-                                    handleMenuChange(menuItem, navigate)
-                                }} >
-                                    {menuItem.title}
-                                </a>
-                            </li>;
-                        })}
-                    </ul>
-
-                    {/**Right Side Of Navbar **/}
-                    {authentication.accessToken!='' &&(
-                        <ul className="navbar-nav ms-auto">
-                            {/** Authentication Links **/}
-                            <li className="nav-item dropdown">
-                                <button className="nav-link  dropdown-toggle" type="button"
-                                        id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-                                    {email} <span className="caret"></span>
-                                </button>
-                                <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                                    <li><button className="dropdown-item"
-                                                onClick={(event)=>{event.preventDefault();
-                                                    handleLogout();}}>
-                                        Logout
-                                    </button></li>
-                                </ul>
-                            </li>
-                        </ul>)}
-                </div>
-            </div>
-        </nav>
-    );
-};
-
-export default Header;
-export type { MenuItem };
-

package/src/common/components/Cmr-components/input/Input.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import './Input.scss';
-import { Input } from 'antd';
-import { SizeType } from 'antd/lib/config-provider/SizeContext';
-import { LiteralUnion } from 'antd/lib/_util/type';
-
-interface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
-    defaultValue?: string;
-    id?: string;
-    maxLength?: number;
-    size?: SizeType;
-    value?: string;
-    type?: any;
-    prefix?: React.ReactNode;
-    bordered?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-}
-
-export const CmrInput = (props: CmrInputProps) => {
-    const { defaultValue, id, maxLength, size, value, type, prefix, bordered, onChange, onPressEnter, ...rest } = props;
-
-    return (
-        <Input
-            defaultValue={defaultValue}
-            id={id}
-            maxLength={maxLength}
-            size={size}
-            value={value}
-            type={type}
-            prefix={prefix}
-            bordered={bordered}
-            onChange={onChange}
-            onPressEnter={onPressEnter}
-            {...rest}
-        />
-    );
-};
-

package/src/common/components/Cmr-components/input-number/InputNumber.tsx

@@ -1,29 +0,0 @@
-import React, {CSSProperties} from 'react';
-import './InputNumber.scss';
-import { InputNumber } from 'antd';
-import { SizeType } from 'antd/lib/config-provider/SizeContext';
-
-interface CmrInputNumberProps {
-    defaultValue?: number;
-    disabled?: boolean;
-    keyboard?: boolean;
-    max?: number;
-    min?: number;
-    size?: SizeType;
-    value?: number;
-    onChange?: (value: number|null) => void;
-    children?: React.ReactNode;
-    style?: CSSProperties;
-}
-
-const CmrInputNumber = (props: CmrInputNumberProps) => {
-    const { defaultValue, style, max, min, value, onChange, children, ...rest } = props;
-
-    return (
-        <InputNumber defaultValue={defaultValue} max={max} style={style} min={min} value={value} onChange={onChange} {...rest}>
-            {children}
-        </InputNumber>
-    );
-};
-
-export default CmrInputNumber;

package/src/common/components/Cmr-components/label/Label.scss

@@ -1,13 +0,0 @@
-.cmr-label {
-    display: flex;
-    align-items: center;
-    font-style: normal;
-    font-weight: 500;
-    color: #707683;
-    padding-right: 10px;
-}
-
-.asterik {
-    color: red !important;
-    margin-left: 4px;
-}

package/src/common/components/Cmr-components/label/Label.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import './Label.scss';
-
-interface CmrLabelProps  extends React.HTMLAttributes<HTMLDivElement>{
-    required?: boolean;
-    children?: any;
-}
-
-const CmrLabel = (props: CmrLabelProps) => {
-    const { children, required = false } = props;
-
-    return (
-        <label className="cmr-label" style={{fontSize:'16px', ...props.style}}>
-            {children}
-            {required && <span className="asterik">*</span>}
-        </label>
-    );
-};
-
-export default CmrLabel;

package/src/common/components/Cmr-components/option/Option.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Select } from 'antd';
-import './Option.scss';
-
-const { Option } = Select;
-
-interface CmrOptionProps {
-    title?: string;
-    value: string | number;
-    disabled?: boolean;
-    children?: any;
-}
-
-const CmrOption = (props: CmrOptionProps) => {
-    const { title, value, disabled, children, ...rest } = props;
-
-    return (
-        <Option title={title} value={value} disabled={disabled} {...rest}>
-            {children}
-        </Option>
-    );
-};
-
-export default CmrOption;

package/src/common/components/Cmr-components/panel/Panel.tsx

@@ -1,54 +0,0 @@
-import React, {ReactNode, useState} from 'react';
-import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-
-interface CmrPanelProps extends React.HTMLAttributes<HTMLDivElement>{
-    activeKey?: string|string[];
-    header: string|undefined;
-    children: ReactNode;
-    panelKey?: number;
-    onToggle?: (key: number|undefined) => void;
-    expanded?: boolean;
-    cardProps?: React.HTMLAttributes<HTMLDivElement>;
-}
-const CmrPanel = function(props:CmrPanelProps){
-    let {expanded, onToggle} = props;
-    const toggle = ()=>{
-        if(onToggle)
-            onToggle(props.panelKey);
-    };
-    return <div className={`card ${props.className}`}>
-        <div className="card-header" style={{background: "white", display:props.header==undefined?'none':undefined}}>
-            <div className="row align-items-center">
-                <div className="col">{props.header}
-                </div>
-                {onToggle&&<div className="col text-end">
-                    <span className="react-collapse float-end btn"
-                          onClick={(e) => {
-                              toggle();
-                          }}>
-                        {(!expanded)?
-                            <ArrowDropDownIcon/>:
-                            <ArrowDropUpIcon/>
-                        }
-                    </span>
-                </div>}
-            </div>
-        </div>
-        {
-            (!expanded)?
-                <div className={`card-body m-0 ${props.cardProps?.className}`} style={
-                    {maxHeight:'0',padding:'0', opacity:'0',overflow:'hidden',
-                        visibility:'collapse',transition:'all 0.5s'}}>
-                    {props.children}
-                </div>
-                :
-                <div className={`card-body m-5 ${props.cardProps?.className}`} style={
-                    {maxHeight:undefined,padding:undefined, opacity:'1',
-                        visibility:'visible',transition:'all 0.5s'}}>
-                    {props.children}
-                </div>}
-    </div>;
-}
-
-export default CmrPanel;

package/src/common/components/Cmr-components/progress/Progress.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import './Progress.scss';
-import { Progress } from 'antd';
-import { ProgressGradient, ProgressType, SuccessProps } from 'antd/lib/progress/progress';
-
-declare const ProgressStatuses: ['normal', 'exception', 'active', 'success'];
-
-interface CmrProgressProps {
-    percent?: number;
-    showInfo?: boolean;
-    status?: typeof ProgressStatuses[number];
-    strokeColor?: string | ProgressGradient;
-    strokeLinecap?: 'butt' | 'square' | 'round';
-    success?: SuccessProps;
-    trailColor?: string;
-    type?: ProgressType;
-}
-
-const CmrProgress = (props: CmrProgressProps) => {
-    const { percent, showInfo, status, strokeColor, strokeLinecap, success, trailColor, type, ...rest } = props;
-
-    return (
-        <Progress
-            percent={percent}
-            showInfo={showInfo}
-            status={status}
-            strokeColor={strokeColor}
-            strokeLinecap={strokeLinecap}
-            success={success}
-            trailColor={trailColor}
-            type={type}
-            style={{marginBottom: '5pt'}}
-            {...rest}
-        />
-    );
-};
-
-export default CmrProgress;