back-testing-react 1.0.4 → 1.0.6

package/src/components/back-testing-stepper/inputs/number-input/number-input.css

@@ -0,0 +1,48 @@
+.number-input-container{
+    padding: 0;
+    font-family: system-ui, sans-serif;
+}
+
+.number-input-container .label{
+    font-weight: 700;
+    padding-bottom: 5px;
+}
+
+.number-input-container .flex-container{
+    border: 0.5px solid lightgray;
+    display:flex;
+}
+
+.number-input-container .flex-container .prefix{
+    background-color: lightgray;
+    padding: 8px 15px;
+}
+
+.number-input-container .flex-container.error{
+    border: 0.5px solid rgb(211,47,47);
+}
+
+.number-input-container .flex-container.error:focus-within{
+    border: 0.5px solid rgb(211,47,47) !important;
+    box-shadow: inset 1px 1px rgb(211,47,47), inset -1px -1px rgb(211,47,47);
+}
+
+.number-input-container .flex-container.error:focus-within .prefix{
+    box-shadow: inset 1px 1px rgb(211,47,47), inset 0px -1px rgb(211,47,47);
+}
+
+.number-input-container .flex-container:hover:not(.error:focus-within){
+    border: 0.5px solid black;
+}
+
+.number-input-container input{
+    width: 100%;
+    padding: 8px 10px;
+    font-size: 1rem;
+    border: 0;
+    background-color: rgba(255,255,255,0);
+}
+
+.number-input-container input:focus-visible{
+    outline: 0;
+}

package/src/components/back-testing-stepper/inputs/number-input/number-input.stories.tsx

@@ -0,0 +1,20 @@
+import { StoryFn, Meta } from "@storybook/react";
+import NumberInput from "./number-input";
+
+export default {
+  title: "ReactComponentLibrary/Inputs",
+  component: NumberInput,
+} as Meta<typeof NumberInput>;
+
+const Template: StoryFn<typeof NumberInput> = (args) => <NumberInput {...args} />;
+
+export const NumberInputTest = Template.bind({});
+NumberInputTest.args = {
+    label:"Limit of Insurance:",
+    value:145000,
+    error:false,
+    errorMessage:"Invalid input",
+    prefix:"$",
+    step:1,
+    min:0
+};

package/src/components/back-testing-stepper/inputs/number-input/number-input.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import React from "react";
+import "./number-input.css";
+import { NumberInputProps } from "./number-input.types";
+
+function NumberInput(props: NumberInputProps){
+
+    const [inputValue, setInputValue] = React.useState(props.value);
+
+    function handleChange(e: number){
+        if(Number.isNaN(e)){
+            setInputValue("")
+            if(props.onChange){
+                props.onChange(0)
+            }
+        }else{
+            setInputValue(e)
+            if(props.onChange){
+                props.onChange(e)
+            }
+        }
+    }
+
+    return(
+        <div className="number-input-container">
+            { props.label != undefined && <div className="label"><label>{props.label}</label></div>}
+            <div className={"flex-container" + (props.error ? " error" : "")}>
+                { props.prefix != undefined && <label className="prefix">{props.prefix}</label>}
+                <input 
+                    type='number' 
+                    value={inputValue} 
+                    min={props.min}
+                    max={props.max}
+                    onChange={(e) => handleChange(e.target.valueAsNumber)}
+                    step={props.step}/>
+                { props.postfix != undefined && <label className="prefix">{props.postfix}</label>}
+            </div>
+            { props.error && <span style={{ 
+                color: "rgb(211,47,47)", 
+                fontSize:'0.75rem',
+                margin:'0 14px',
+                marginTop:'3px',
+                display:'inline-block',
+                width:'calc(100%-28px)',
+                lineHeight: 1.66,
+                letterSpacing: '0.03333em',
+                fontFamily:'"Roboto","Helvetica","Arial",sans-serif' }}>
+                    {props.errorMessage}
+                </span>}
+        </div>
+    );
+}
+
+export default NumberInput

package/src/components/back-testing-stepper/inputs/number-input/number-input.types.ts

@@ -0,0 +1,12 @@
+export interface NumberInputProps{
+    error?: boolean,
+    errorMessage?: string,
+    label?: string,
+    prefix?: string,
+    postfix?: string,
+    min?: number,
+    max?: number,
+    step?: number,
+    value?: number | string,
+    onChange?: (e: number) => void
+}

package/src/components/back-testing-stepper/inputs/select-input/select-input.css

@@ -0,0 +1,13 @@
+.select-input-container{
+    padding: 0;
+    font-family: system-ui, sans-serif;
+}
+
+.select-input-container .label{
+    font-weight: 700;
+    padding-bottom: 5px;
+}
+
+.select-input-container #select-combobox{
+    padding:10px 8px;
+}

package/src/components/back-testing-stepper/inputs/select-input/select-input.stories.tsx

@@ -0,0 +1,27 @@
+import { StoryFn, Meta } from "@storybook/react";
+import SelectInput from "./select-input";
+
+export default {
+  title: "ReactComponentLibrary/Inputs",
+  component: SelectInput,
+} as Meta<typeof SelectInput>;
+
+enum PayoutOption {
+    STANDARD_74_119 = 234875,
+    RESIDENTIAL_65_110 = 481734,
+    RESIDENTIAL_65_130 = 598652,
+    CIAC_10_25_50_75_100 = 861543,
+    CIAC_30_60_100_100_100 = 329134,
+}
+
+const Template: StoryFn<typeof SelectInput> = (args) => <SelectInput {...args} />;
+let payoutOption = PayoutOption.CIAC_10_25_50_75_100;
+
+export const SelectInputTest = Template.bind({});
+SelectInputTest.args = {
+    disabled:false, 
+    onLoad:((e:PayoutOption) => payoutOption = e),
+    onChange:((e:PayoutOption) => payoutOption = e),
+    defaultValue:payoutOption,
+    items:[{key:"CIAC 10/25/50/75/100",value:PayoutOption.CIAC_10_25_50_75_100},{key:"CIAC 30/60/100/100/100",value:PayoutOption.CIAC_30_60_100_100_100}]
+};

package/src/components/back-testing-stepper/inputs/select-input/select-input.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { FormControl, InputLabel, MenuItem, OutlinedInput, Select, SelectChangeEvent } from "@mui/material";
+import "./select-input.css"
+import React, { useEffect } from "react";
+import { SelectInputProps } from "./select-input.types";
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+function SelectInput(props:SelectInputProps){
+
+    const [val, setVal] = React.useState<number>(props.defaultValue);
+
+    const handleChange = (event: SelectChangeEvent<number>) => {
+      setVal(event.target.value as number);
+      if( props.onChange != undefined){
+        props.onChange(event.target.value as number);
+      }
+    };
+
+    useEffect(() => {
+      if( props.onLoad != undefined){
+        props.onLoad(props.defaultValue)
+      }
+    },[props.defaultValue,props.onLoad])
+
+
+    return (
+        <div className="select-input-container">
+            { props.label != undefined && <div className="label"><label>{props.label}</label></div>}
+            <FormControl sx={{ m: 0, width: '100%' }}>
+            <Select
+            id="select-combobox"
+            disabled={props.disabled}
+            sx={{borderRadius: 0, p: 0}}
+            value={val}
+            onChange={handleChange}
+            input={<OutlinedInput sx={{p:0}}/>}
+            MenuProps={MenuProps}
+            >
+            {props.items.map((item) => (
+                <MenuItem
+                key={item.key}
+                value={item.value}>
+                {item.key}
+                </MenuItem>
+            ))}
+            </Select>
+        </FormControl>
+        </div>
+    );
+}
+
+export default SelectInput

package/src/components/back-testing-stepper/inputs/select-input/select-input.types.ts

@@ -0,0 +1,8 @@
+export interface SelectInputProps {
+    defaultValue: number,
+    disabled?: boolean,
+    items: { key: string, value:number}[],
+    label?: string,
+    onChange?: (e:number) => void,
+    onLoad?:(e:number) => void
+}

package/src/components/back-testing-stepper/inputs/text-input/text-input.css

@@ -0,0 +1,35 @@
+.text-input-container{
+    padding: 0;
+    font-family: system-ui, sans-serif;
+}
+
+.text-input-container .label{
+    font-weight: 700;
+    padding-bottom: 5px;
+}
+
+.text-input-container .flex-container{
+    border: 0.5px solid lightgray;
+    display:flex;
+}
+
+.text-input-container .flex-container .prefix{
+    background-color: lightgray;
+    padding: 8px 15px;
+}
+
+.text-input-container .flex-container:hover{
+    border: 0.5px solid black;
+}
+
+.text-input-container input{
+    width: 100%;
+    padding: 8px 10px;
+    font-size: 1rem;
+    border: 0;
+    background-color: rgba(255,255,255,0);
+}
+
+.text-input-container input:focus-visible{
+    outline: 0;  
+}

package/src/components/back-testing-stepper/inputs/text-input/text-input.stories.tsx

@@ -0,0 +1,18 @@
+import { StoryFn, Meta } from "@storybook/react";
+import TextInput from "./text-input";
+
+export default {
+  title: "ReactComponentLibrary/Inputs",
+  component: TextInput,
+} as Meta<typeof TextInput>;
+
+
+const Template: StoryFn<typeof TextInput> = (args) => <TextInput {...args} />;
+let value = "";
+
+export const TextInputTest = Template.bind({});
+TextInputTest.args = {
+    label:"Anemometer Code:", 
+    value:value,
+    onChange:((e:string) => value = e),
+};

package/src/components/back-testing-stepper/inputs/text-input/text-input.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import React from "react";
+import "./text-input.css"
+import { TextInputProps } from "./text-input.types";
+
+function TextInput(props: TextInputProps){
+
+    const [inputValue, setInputValue] = React.useState(props.value);
+
+    function handleChange(e: string){
+        setInputValue(e)
+        if(props.onChange != undefined){
+            props.onChange(e)
+        }
+    }
+
+    return(
+        <div className="text-input-container">
+            { props.label != undefined && <div className="label"><label>{props.label}</label></div>}
+            <div className="flex-container">
+                { props.prefix != undefined && <label className="prefix">{props.prefix}</label>}
+                <input 
+                    type='text' 
+                    value={inputValue} 
+                    onChange={(e) => handleChange(e.target.value)}/>
+            </div>
+        </div>
+    )
+}
+
+export default TextInput

package/src/components/back-testing-stepper/inputs/text-input/text-input.types.ts

@@ -0,0 +1,6 @@
+export interface TextInputProps {
+    label?: string,
+    prefix?: string,
+    value: string,
+    onChange?: (e: string) => void
+}

package/src/components/back-testing-stepper/inputs/worldmap-search/worldmap-search.css

@@ -0,0 +1,16 @@
+.search {
+    font-family: system-ui, sans-serif;
+}
+
+.search .label{
+    font-weight: 700;
+    padding-bottom: 5px;
+}
+
+.search .MuiInputBase-root.MuiOutlinedInput-root{
+    border-radius: 0;
+}
+
+.search .MuiInputBase-root.MuiOutlinedInput-root input{
+    padding: 8px 10px;
+}

package/src/components/back-testing-stepper/inputs/worldmap-search/worldmap-search.stories.tsx

@@ -0,0 +1,20 @@
+import { StoryFn, Meta } from "@storybook/react";
+import WorldMapSearch from "./worldmap-search";
+
+export default {
+  title: "ReactComponentLibrary/Inputs",
+  component: WorldMapSearch,
+} as Meta<typeof WorldMapSearch>;
+
+
+const Template: StoryFn<typeof WorldMapSearch> = (args) => <WorldMapSearch {...args} />;
+let value = "";
+
+export const WorldMapSearchTest = Template.bind({});
+WorldMapSearchTest.args = {
+    label:"Risk Location Address:",
+    error:false,
+    errorMessage:"",
+    value:value,
+    onChange:((e:string) => value = e)
+};                    

package/src/components/back-testing-stepper/inputs/worldmap-search/worldmap-search.tsx

@@ -0,0 +1,151 @@
+import { useSearchBoxCore } from "@mapbox/search-js-react";
+import "mapbox-gl/dist/mapbox-gl.css";
+import React, { ChangeEvent, useEffect } from "react";
+import { v4 as uuidv4 } from 'uuid';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import ClearIcon from '@mui/icons-material/Clear';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Typography from '@mui/material/Typography';
+import PlaceIcon from '@mui/icons-material/Place';
+import "./worldmap-search.css";
+import { TextField } from "@mui/material";
+import { WorldMapSearchProps } from "./worldmap-search.types";
+
+function useOutsideAlerter(ref:any,closeMenuFunction:any) {
+    useEffect(() => {
+        function handleClickOutside(event: any) {
+            if (ref.current && !ref.current.contains(event.target)) {
+                closeMenuFunction(false);
+            }
+        }
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            // Unbind the event listener on clean up
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [ref]);
+}
+
+function WorldMapSearch(props: WorldMapSearchProps){
+
+    const wrapperRef = React.useRef(null);
+    const [inputValue, setInputValue] = React.useState(props.value);
+    const [openMenu, toggleMenu] = React.useState(false);
+    const [searchSuggestions, setSearchSuggestions] = React.useState<any[]>([]);
+    const searchBoxCore = useSearchBoxCore({ accessToken: props.accessToken });
+    const sessionToken = uuidv4();
+
+    useOutsideAlerter(wrapperRef,toggleMenuView);
+
+    async function handleChange(e: ChangeEvent<HTMLInputElement>){
+        var value = e.target.value;
+        setInputValue(e.target.value)
+        if(props.onChange != undefined){
+            props.onChange(e.target.value)
+        }
+        if(value.length > 0){
+            const response = await searchBoxCore.suggest(value, {
+                sessionToken: sessionToken
+            });
+            setSearchSuggestions(response.suggestions)
+        }else{
+            setSearchSuggestions([])
+        }
+    }
+
+    function handleClearLocationInput(e:any){
+        setInputValue("")
+        setSearchSuggestions([])
+    }
+
+    function isLocationMenuDisplayed(){
+        return openMenu && searchSuggestions && searchSuggestions.length  > 0 && inputValue && inputValue.length > 0
+    }
+
+    function createLocationContext(context: any){
+        let retVal: string = '';
+        const country: string = context["country"]?.name;
+        const region: string = context["region"]?.name;
+        const place: string = context["place"]?.name;
+        retVal = place ? retVal + place + ", ": retVal;
+        retVal = region ? retVal + region + ", ": retVal;
+        retVal = country ? retVal + country: retVal;
+        retVal = retVal.trim()
+        if(retVal.endsWith(',')){
+            retVal = retVal.substring(0, retVal.length - 1)
+        }
+        return retVal.trim();
+    }
+
+    async function retrieveSuggestion(suggestion: any){
+        const response = await searchBoxCore.retrieve(suggestion, {
+            sessionToken: sessionToken
+        })
+        setInputValue(response.features[0].properties.name);
+        if(props.onChange != undefined){
+            props.onChange(response.features[0].properties.name)
+        }
+        if (props.onLocationRetrieved != undefined){
+            props.onLocationRetrieved(response)
+        }
+        toggleMenuView(false)
+    }
+
+    function toggleMenuView(val: boolean){
+        toggleMenu(val);
+    }
+
+    return(
+        <div ref={wrapperRef} className="search">
+            { props.label != undefined && <div className="label"><label>{props.label}</label></div>}
+            <TextField
+                variant="outlined"
+                error={props.error}
+                helperText={props.errorMessage}
+                onChange={handleChange}
+                onFocus={(e) => toggleMenuView(true)}
+                id="risk-location"
+                sx={{ m: 0, width: '100%', borderRadius: '0'}}
+                value={inputValue}
+                slotProps={{
+                    input: {
+                        endAdornment: <InputAdornment position="end">
+                        <IconButton
+                          aria-label="clear risk-location"
+                          onClick={handleClearLocationInput}
+                          edge="end"
+                        >
+                          <ClearIcon/>
+                        </IconButton>
+                      </InputAdornment>,
+                    },
+                }}
+                />
+            {isLocationMenuDisplayed() && <Paper sx={{ width: '100%', maxWidth: '100%', marginTop: '10px' }}>
+                <MenuList>
+                {searchSuggestions.map((option: any) => (
+                    <MenuItem  key={option.mapbox_id} onClick={ () => retrieveSuggestion(option)}>
+                        <ListItemIcon>
+                            <PlaceIcon fontSize="small" />
+                        </ListItemIcon>
+                        <Box sx={{ overflow: "hidden" }}>
+                            <Typography variant="body2" title={option.name} component="div" sx={{ fontWeight: 700, textOverflow: "ellipsis", overflow: "hidden" }}>
+                                {option.name}
+                            </Typography>
+                            <Typography component="div" title={createLocationContext(option.context)} sx={{ color: 'text.secondary',  fontSize: 13, textOverflow: "ellipsis", overflow: "hidden" }}>{createLocationContext(option.context)}</Typography>
+                        </Box>
+                    </MenuItem>
+                ))}
+                </MenuList>
+            </Paper>}
+        </div>
+    )
+}
+
+export default WorldMapSearch

package/src/components/back-testing-stepper/inputs/worldmap-search/worldmap-search.types.ts

@@ -0,0 +1,11 @@
+import { SearchBoxRetrieveResponse } from "@mapbox/search-js-core"
+
+export interface WorldMapSearchProps {
+    error?: boolean,
+    errorMessage?: string,
+    value?: string,
+    onChange?: (e:string) => void,
+    accessToken : string,
+    label?: string
+    onLocationRetrieved?: (e: SearchBoxRetrieveResponse) => void
+}