cloudmr-ux 0.0.3 → 0.1.0

package/src/common/components/Cmr-components/double-slider/InvertibleDualSlider.tsx

@@ -1,224 +0,0 @@
-import {Box} from "@mui/material";
-import {useEffect, useRef, useState} from "react";
-
-/**
- * This dual slider (lil-gui styled) allows users to control the max and min of an interval simultaneously.
- * The rendered interval (and number control) can be masked by a transformation - inverse pair.
- * @param name
- * @param min
- * @param max
- * @param setMin
- * @param setMax
- * @param reverse
- * @param transform transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
- * @param inverse transform and inverse are a pair that masks the rendered values and rendered inputs by a transformation
- * @constructor
- */
-export const InvertibleDualSlider = ({name,min,max,setMin,setMax, reverse=false,
-                               transform=x=>x,inverse=x=>x,onFinalize}:
-                               {name:string,min:number,max:number, setMin?:(min:number)=>void,
-                                   setMax?:(max:number)=>void,reverse?:boolean,transform?:(x:number)=>number,
-                                   inverse?:(x:number)=>number,onFinalize?: ()=>void} )=>{
-    const [leftSliderPosition, setLeftSliderPosition] = useState(0); // Initial percentage for the left slider
-    const [rightSliderPosition, setRightSliderPosition] = useState(100); // Initial percentage for the right slider
-    useEffect(() => {//Initialize parent min/max values upon initialization
-        setMin&&setMin(min);
-        setMax&&setMax(max);
-        setLeftSliderPosition(0);
-        setRightSliderPosition(100);
-    }, [min,max]);
-    const [isHovering, setIsHovering] = useState(false);
-    const [leftEditing, setLeftEditing] = useState(false);
-
-    const [minOverride, setMinOverride] = useState<any>(undefined);
-    const [maxOverride, setMaxOverride] = useState<any>(undefined);
-
-    if(minOverride)
-        min = minOverride;
-    if(maxOverride)
-        max = maxOverride;
-
-    const a = transform((max-min)*leftSliderPosition/100+min);
-    const b = transform((max-min)*rightSliderPosition/100+min);
-    const left = Math.min(a,b);
-    const right = Math.max(a,b);
-
-    const sliderRef = useRef(null); // Ref for the parent box
-
-    const handleDragStart = (e:any, slider:string) => {
-        // Prevent default behavior
-        e.preventDefault();
-        setLeftEditing(false);
-        setLeftIsNaN(false)
-        leftRef.current.blur();
-
-        setRightEditing(false);
-        setRightIsNaN(false);
-        rightRef.current.blur();
-
-        // 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) + (slider === 'left' ? leftSliderPosition : rightSliderPosition);
-
-
-            // Prevent the slider from going outside the parent box
-            const clampedPosition = Math.min(100, Math.max(0, newPosition));
-            // Update the position of the slider
-            if (slider === 'left') {
-                setLeftSliderPosition(clampedPosition);
-                const a = (max-min)*clampedPosition/100+min;
-                const b = (max-min)*rightSliderPosition/100+min;
-                setMin&&setMin(Math.min(a,b));
-                setMax&&setMax(Math.max(a,b));
-
-            } else if (slider === 'right') {
-                setRightSliderPosition(clampedPosition);
-                const a = (max-min)*leftSliderPosition/100+min;
-                const b = (max-min)*clampedPosition/100+min;
-                setMin&&setMin(Math.min(a,b));
-                setMax&&setMax(Math.max(a,b));
-            }
-
-        };
-
-        const handleMouseUp = () => {
-            // Remove event listeners once dragging is complete
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-            onFinalize&&onFinalize();
-        };
-
-        // Add mouse move and mouse up listeners to document to handle drag
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-    };
-
-    const leftText = Math.abs(left)<0.01&&left!=0?Number(left).toExponential(3).toUpperCase():Number(left).toFixed(3);
-    const [leftEditedText,setLeftEditedText] = useState('');
-    const [leftIsNaN, setLeftIsNaN] = useState(false);
-    const leftRef = useRef<any>(null);
-
-    const [rightEditing, setRightEditing] = useState(false);
-    const [rightEditedText, setRightEditedText] = useState('');
-    const [rightIsNaN, setRightIsNaN] = useState(false);
-    const rightRef = useRef<any>(null);
-
-    // Logic to handle right value box editing...
-    const rightText = Math.abs(right) < 0.01 && right != 0 ? Number(right).toExponential(3).toUpperCase() : Number(right).toFixed(3);
-
-    return <Box sx={{display:'flex',flexDirection:'row', paddingLeft:'4px',paddingRight:'4px'}} height={27}>
-        {name!=''&&<Box fontSize={16} marginRight={'5pt'} color={'white'} 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}>
-            <input ref={leftRef} style={{backgroundColor:'#ffffff',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:leftIsNaN?'red':'black'}} value={
-                (leftEditing)?leftEditedText:leftText
-            } onKeyDown={(e) => {
-                if (e.key === 'Enter'&&!leftIsNaN) {
-                    //@ts-ignore
-                    e.target.blur(); // This will cause the input to lose focus
-                }
-            }} onFocus={(e)=>{
-                setLeftEditedText(e.target.value);
-                setLeftEditing(true);
-            }} onChange={(event)=>{
-                setLeftIsNaN(isNaN(Number(event.target.value)));
-                setLeftEditedText(event.target.value);
-            }} onBlur={(e)=>{
-                    let val = inverse(Number(leftEditedText));
-                    if(isNaN(val)) {
-                        return e.preventDefault();
-                    }
-                    setLeftEditing(false);
-                    setMin&&setMin(val);
-                    let newMin = min;
-                    if(val<min) {
-                        setMinOverride(val);
-                        newMin = val;
-                    }
-                    let leftPosition = (val-newMin)/(max-newMin)*100;
-                    setLeftSliderPosition(leftPosition);
-                    onFinalize&&onFinalize();
-            }}/>
-
-            <Box sx={{ backgroundColor: '#ffffff', flex: 1, marginLeft: '4px', marginRight: '4px', borderRadius: '2px', position: 'relative',
-                overflow:'hidden'
-            }} ref={sliderRef}
-                 onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
-                {/* Central gray block with two vertical black components */}
-
-
-                {!reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
-                    height:'100%',position:'absolute',
-                    left:`calc(${Math.min(leftSliderPosition,rightSliderPosition+3)*0.97}%)`,
-                    right:`calc(${(100 - Math.max(leftSliderPosition-3,rightSliderPosition))*0.97}%)`,
-                    zIndex:1}}/>}
-                {reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
-                    height:'100%',position:'absolute',
-                    left:`calc(${Math.max(leftSliderPosition,rightSliderPosition+3)*0.97}%)`,
-                    right:`0`,
-                    zIndex:1}}/>}
-                {reverse&&<Box sx={{backgroundColor:isHovering?'#b9deff':'#8ec7ff',
-                    height:'100%',position:'absolute',
-                    left:`0`,
-                    right:`calc(${(100 - Math.min(leftSliderPosition-3,rightSliderPosition))*0.97}%)`,
-                    zIndex:1}}/>}
-                <Box sx={{ position: 'absolute', left: `calc(${leftSliderPosition*0.97}% - 10px)`, width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }}
-                     onMouseDown={(e) => handleDragStart(e, 'left')}>
-                    {/* Visual representation of the slider */}
-                    <Box sx={{ position: 'absolute', left: '10px', width: '2px', height: '100%', backgroundColor: '#2e9eff' }} />
-                </Box>
-
-                {/* Transparent hitbox for the right slider */}
-                <Box sx={{ position: 'absolute', right: `calc(${(100 - rightSliderPosition)*0.97}% - 10px)`, width: '20px', height: '100%', cursor: 'ew-resize', zIndex: 1 }}
-                     onMouseDown={(e) => handleDragStart(e, 'right')}>
-                    {/* Visual representation of the slider */}
-                    <Box sx={{ position: 'absolute', right: '10px', width: '2px', height: '100%', backgroundColor: '#2e9eff' }} />
-                </Box>
-            </Box>
-
-            <input style={{backgroundColor: '#ffffff', 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: rightIsNaN ? 'red' : 'black'}}
-                 value={(rightEditing) ? rightEditedText : rightText}
-                 ref={rightRef}
-                 onKeyDown={(e) => {
-                     if (e.key === 'Enter' && !rightIsNaN) {
-                         //@ts-ignore
-                         e.target.blur(); // This will cause the input to lose focus
-                     }
-                 }}
-                 onFocus={(e) => {
-                     setRightEditedText(e.target.value);
-                     setRightEditing(true);
-                 }}
-                 onChange={(event) => {
-                     setRightIsNaN(isNaN(Number(event.target.value)));
-                     setRightEditedText(event.target.value);
-                 }}
-                 onBlur={(e) => {
-                     let val = inverse(Number(rightEditedText));
-                     if (isNaN(val)) {
-                         return e.preventDefault();
-                     }
-                     setRightEditing(false);
-                     setMax && setMax(val);
-                     let newMax = max;
-                     if (val > max) {
-                         setMaxOverride(val);
-                         newMax = val;
-                     }
-                     let rightPosition = (val - min) / (newMax - min) * 100;
-                     setRightSliderPosition(rightPosition);
-                     onFinalize&&onFinalize();
-                 }}
-            />
-        </Box>
-    </Box>
-}

package/src/common/components/Cmr-components/dropdown/Dropdown.scss

@@ -1,36 +0,0 @@
-.select-box {
-  position: relative;
-  outline: none;
-}
-
-.select-box .ant-select {
-  color: #888080;
-  width: 205px;
-  background: #ffffff;
-  box-sizing: border-box;
-  border-radius: 4px;
-  -webkit-appearance: none;
-  appearance: none;
-  -webkit-outline: none;
-  outline: none;
-}
-
-.select-box > .ant-select > .ant-select-selector {
-  border: 1px solid #e5e5e5;
-}
-
-.select-box
-> .ant-select
-> .ant-select-selector
-> .ant-select-selection-placeholder,
-.ant-select-selection-item {
-  font-size: 12px;
-  line-height: 30px;
-  color: #999999;
-  font-weight: normal;
-  letter-spacing: 0.1px;
-}
-
-.select-box > .ant-select > .ant-select-arrow {
-  top: 65%;
-}

package/src/common/components/Cmr-components/dropdown/Dropdown.tsx

@@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-import { Select } from 'antd';
-import './DropDown.scss';
-
-const { Option } = Select;
-
-const CmrDropDown = (props: any) => {
-    const [DropdownCaret, setDropdownCaret] = useState(false);
-    const onCaretChange = () => {
-        setDropdownCaret(!DropdownCaret);
-    };
-
-    return (
-        <div className="select-box">
-            <Select
-                onFocus={onCaretChange}
-                onBlur={onCaretChange}
-                suffixIcon={
-                    <>
-                        <svg
-                            style={{ display: DropdownCaret ? 'none' : 'block' }}
-                            width="6"
-                            height="3"
-                            viewBox="0 0 6 3"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M5.79875 0H0.20125C0.0333594 0 -0.0603867 0.147179 0.0435863 0.247656L2.84234 2.94215C2.92245 3.01928 3.0767 3.01928 3.15766 2.94215L5.95641 0.247656C6.06039 0.147179 5.96664 0 5.79875 0Z"
-                                fill="#999999"
-                            />
-                        </svg>
-                        <svg
-                            style={{ display: DropdownCaret ? 'block' : 'none' }}
-                            width="6"
-                            height="3"
-                            viewBox="0 0 6 3"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                d="M5.79875 3H0.20125C0.0333594 3 -0.0603867 2.85282 0.0435863 2.75234L2.84234 0.0578451C2.92245 -0.0192819 3.0767 -0.0192819 3.15766 0.0578451L5.95641 2.75234C6.06039 2.85282 5.96664 3 5.79875 3Z"
-                                fill="#999999"
-                            />
-                        </svg>
-                    </>
-                }
-                id=""
-                disabled={props.disabled}
-                className={props.className}
-                placeholder={props.placeholder}
-                value={props.value}
-                onChange={props.onChange}
-                dropdownClassName={props.dropdownClassName}
-                dropdownStyle={props.dropdownStyle}
-                defaultValue={props.defaultValue}
-                onSelect={props.onSelect}
-                showSearch={props.showSearch}
-                onSearch={props.onSearch}
-                dropdownAlign={{
-                    offset: [0, 0],
-                    overflow: {
-                        adjustY: 0,
-                    },
-                }}
-            >
-                {props.isOptionsObj
-                    ? props.options.map((obj: any, i: any) => (
-                          <Option key={i} value={obj.value}>
-                              {obj.label}
-                          </Option>
-                      ))
-                    : props.options.map((opt: any, ind: any) => (
-                          <Option key={ind} value={props.options[ind]}>
-                              {props.options[ind]}
-                          </Option>
-                      ))}
-            </Select>
-        </div>
-    );
-};
-
-export default CmrDropDown;

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;
-
-}