back-testing-react 1.0.4 → 1.0.6

package/src/components/back-testing-stepper/back-testing-stepper.tsx

@@ -0,0 +1,322 @@
+import { BackTestingStepperProps } from "./back-testing-stepper.types"
+import "./back-testing-stepper.css"
+import { PayoutWizardStep, PayoutWizardStepType, RadioChoice, WizardStep } from "./steps/step.types";
+import mapboxgl, { GeoJSONSource } from 'mapbox-gl';
+import React, { useEffect, useRef } from "react";
+import { AnemometerRequest, CIAC_LAYER, CIACRequest, DEFAULT_MAP_COORDINATE, DEFAULT_MAP_ZOOM, generateAnemometerRequest, generateCIACRequest, generateInitialPayoutRequest, generateProxyRequest, PayoutRequest, ProxyRequest, TROPICAL_STORM_LAYER, TROPICAL_STORM_TRACK_LAYER } from "../back-testing-map/back-testing-map.types";
+import InputLocationStep from "./steps/input-location/input-location";
+import InputProxyStep from "./steps/input-proxy/input-proxy";
+import InputAnemometerStep from "./steps/input-anemometer/input-anemometer";
+import InputCIACStep from "./steps/input-ciac/input-ciac";
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import StepContent from '@mui/material/StepContent';
+import { Box, Button, Switch, Typography } from "@mui/material";
+import BackTestingPayoutInfo from "../back-testing-payout-info/back-testing-payout-info";
+
+const BackTestingStepper = (props: BackTestingStepperProps) => {
+
+    const label = { inputProps: { 'aria-label': 'Step Switch' } };
+    const [payoutRequest, setPayoutRequest] = React.useState<PayoutRequest>(props.payoutRequest);
+    const [proxy, setProxy] = React.useState<ProxyRequest>(payoutRequest.proxy);
+    const [anemometer, setAnemometer] = React.useState<AnemometerRequest>(payoutRequest.anemometer);
+    const [ciac, setCIAC] = React.useState<CIACRequest>(payoutRequest.ciac);
+
+    const handleStepToggle = (step:PayoutWizardStep,  val:boolean) => {
+        if(step.step == PayoutWizardStepType.INPUT_PROXY_DETAILS){
+            step.enabled[1](val);
+            let proxy : ProxyRequest = generateProxyRequest(
+                [payoutRequest.proxy.longitude,payoutRequest.proxy.latitude], 
+                payoutRequest.proxy.radius, 
+                payoutRequest.proxy.payouts, 
+                val
+            );
+            setProxy(proxy);
+        } else if(step.step == PayoutWizardStepType.INPUT_ANEMOMETER_DETAILS){
+            step.enabled[1](val);
+            let anemometer : AnemometerRequest = generateAnemometerRequest(
+                [payoutRequest.anemometer.longitude,payoutRequest.anemometer.latitude], 
+                payoutRequest.anemometer.code, 
+                payoutRequest.anemometer.payouts, 
+                val
+            );
+            setAnemometer(anemometer);
+        } else if(step.step == PayoutWizardStepType.INPUT_CIAC_DETAILS){
+            step.enabled[1](val);
+            let ciac : CIACRequest = generateCIACRequest(
+                [payoutRequest.longitude,payoutRequest.latitude], 
+                payoutRequest.ciac.shapes[0].radius, 
+                payoutRequest.ciac.includeNotNamedStorms,
+                payoutRequest.ciac.payouts, 
+                val
+            );
+            setCIAC(ciac);
+        }
+    }
+
+    // simplified step wizard
+    const simplifiedSteps : PayoutWizardStep[] = [
+        { 
+            step: PayoutWizardStepType.SIMPLIFIED_INPUT_LOCATION, 
+            label: 'Input Risk Details', 
+            description: `Input your risk location address, the corresponding limit of insurance, and the desired CIAC radius.`,
+            componentRef: useRef<WizardStep>(null),
+            istoggable:false,
+            enabled:React.useState(true)
+        }
+    ];
+
+    // extended step wizard
+    const extendedSteps : PayoutWizardStep[] = [
+        { 
+            step: PayoutWizardStepType.INPUT_LOCATION, 
+            label: 'Risk Location', 
+            description: `Input your risk location address and corresponding limit of insurance.`,
+            componentRef: useRef<WizardStep>(null),
+            istoggable:false,
+            enabled:React.useState(true)
+        },
+        { 
+            step: PayoutWizardStepType.INPUT_PROXY_DETAILS, 
+            label: 'Proxy Details', 
+            description: `Choose between a preconfigured payout table or upload a custom table.`,
+            componentRef: useRef<WizardStep>(null),
+            istoggable:true,
+            enabled:React.useState(payoutRequest.proxy.enabled)
+        },
+        { 
+            step: PayoutWizardStepType.INPUT_ANEMOMETER_DETAILS, 
+            label: 'Anemometer Details', 
+            description: `Input the anemometer station ID and choose between a preconfigured payout table or upload a custom table.`,
+            componentRef: useRef<WizardStep>(null),
+            istoggable:true,
+            enabled:React.useState(payoutRequest.anemometer.enabled)
+        },
+        { 
+            step: PayoutWizardStepType.INPUT_CIAC_DETAILS, 
+            label: 'CIAC Details', 
+            description: `Choose between a preconfigured payout table or upload a custom table.`,
+            componentRef: useRef<WizardStep>(null),
+            istoggable:true,
+            enabled:React.useState(payoutRequest.ciac.enabled)
+        }
+    ];
+
+    const steps = extendedSteps
+    const [activeStep, setActiveStep] = React.useState(0);
+    const [locationMarker, setLocationMarker] = React.useState<mapboxgl.Marker>(new mapboxgl.Marker());
+    const [wizardStep, setWizardStep] = React.useState<PayoutWizardStepType>(props.currentStep);
+    const [locationAddress, setLocationAddress] = React.useState<string>("");
+    const [proxyChoice, setProxyChoice] = React.useState<RadioChoice>(props.proxyChoice);
+    const [anemometerChoice, setAnemometerChoice] = React.useState<RadioChoice>(props.proxyChoice);
+    const [ciacChoice, setCIACChoice] = React.useState<RadioChoice>(props.proxyChoice);
+    const [selectedProxyPayoutOption, setProxyPayoutOption] = React.useState<number>(props.selectedProxyPayoutOptionIndex);
+    const [selectedAnemometerPayoutOption, setAnemometerPayoutOption] = React.useState<number>(props.selectedAnemometerPayoutOptionIndex);
+    const [selectedCIACPayoutOption, setCIACPayoutOption] = React.useState<number>(props.selectedCIACPayoutOptionIndex);
+
+    const handleProxyPayoutOptionChange = (e:number) => {
+        setProxyPayoutOption(e)
+        props.onProxyPayoutOptionChange(e);
+    }
+
+    const handleAnemometerPayoutOptionChange = (e:number) => {
+        setAnemometerPayoutOption(e)
+        props.onAnemometerPayoutOptionChange(e);
+    }
+
+    const handleCIACPayoutOptionChange = (e:number) => {
+        setCIACPayoutOption(e)
+        props.onCIACPayoutOptionChange(e);
+    }
+
+    useEffect(() => {
+        let request : PayoutRequest = {
+            includeZeroPayouts: payoutRequest.includeZeroPayouts,
+            limit: payoutRequest.limit,
+            latitude: payoutRequest.latitude,
+            longitude: payoutRequest.longitude,
+            proxy: proxy,
+            anemometer: anemometer,
+            ciac: ciac
+        }
+        setPayoutRequest(request);
+        props.onPayoutRequestChange(request);
+    }, [ciac,proxy,anemometer])
+
+    const handleNext = (step:{ step: PayoutWizardStepType, label: string, description: string, componentRef: React.RefObject<WizardStep>}) => {
+        step.componentRef.current?.handleNext();
+    }
+
+    const handleBack = (step:{ step: PayoutWizardStepType, label: string, description: string, componentRef: React.RefObject<WizardStep>}) => {
+        step.componentRef.current?.handleBack();
+    }
+
+    const handleReset = (step: PayoutWizardStepType) => {
+        setLocationAddress("");
+        setWizardStep(step);
+        if(props.onStormPayoutsChanged != undefined){
+            props.onStormPayoutsChanged([])
+        }
+        props.onCurrentStepChange(step);
+        props.onProxyChoiceChange(RadioChoice.DEFAULT);
+        props.onAnemometerChoiceChange(RadioChoice.DEFAULT);
+        props.onCIACChoiceChange(RadioChoice.DEFAULT);
+        props.onProxyPayoutOptionChange(0);
+        props.onAnemometerPayoutOptionChange(0);
+        props.onCIACPayoutOptionChange(0);
+        locationMarker.remove()
+        setActiveStep(0);
+        let resetPayoutRequest = generateInitialPayoutRequest();
+        setPayoutRequest(resetPayoutRequest);
+        props.onPayoutRequestChange(resetPayoutRequest);
+        const catSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(CIAC_LAYER)
+        if (catSource){
+            (catSource as GeoJSONSource).setData({type: 'FeatureCollection', features: []})
+        }
+        const circleSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_LAYER)
+        if (circleSource){
+            (circleSource as GeoJSONSource).setData({type: 'FeatureCollection', features: []})
+        }
+        const lineSource = (props.mapInstanceRef.current as mapboxgl.Map).getSource(TROPICAL_STORM_TRACK_LAYER)
+        if (lineSource){
+            (lineSource as GeoJSONSource).setData({type: 'FeatureCollection', features: []})
+        }
+        (props.mapInstanceRef.current as mapboxgl.Map).flyTo({
+            center: DEFAULT_MAP_COORDINATE,
+            essential: true,
+            zoom: DEFAULT_MAP_ZOOM})
+    };
+
+    function renderStepInputs(step:{ step: PayoutWizardStepType, label: string, description: string, componentRef: React.MutableRefObject<any>}) {
+        switch(step.step) {
+            case PayoutWizardStepType.INPUT_LOCATION:
+                return <>
+                    <InputLocationStep 
+                        ref={step.componentRef} 
+                        accessToken={props.mapAccessToken} 
+                        mapInstanceRef={props.mapInstanceRef} 
+                        marker={locationMarker} 
+                        activeStep={activeStep} 
+                        payoutRequest={payoutRequest}
+                        address={locationAddress}
+                        onActiveStepChange={setActiveStep}
+                        onStepChange={setWizardStep}
+                        onLocationAddressChange={setLocationAddress}
+                        onPayoutRequestChange={setPayoutRequest}/>
+                </>;
+            case PayoutWizardStepType.INPUT_PROXY_DETAILS:
+                return <>
+                    <InputProxyStep 
+                        ref={step.componentRef} 
+                        mapInstanceRef={props.mapInstanceRef} 
+                        activeStep={activeStep} 
+                        proxyChoice={proxyChoice}
+                        request={payoutRequest}
+                        onActiveStepChange={setActiveStep}
+                        onStepChange={setWizardStep}
+                        payoutOptions={props.proxyPayoutOptions}
+                        selectedPayoutOptionIndex={selectedProxyPayoutOption}
+                        onPayoutOptionChange={handleProxyPayoutOptionChange}
+                        onProxyChoiceChange={setProxyChoice}
+                        onProxyRequestChange={setProxy}
+                        />
+                </>;
+            case PayoutWizardStepType.INPUT_ANEMOMETER_DETAILS:
+                return <>
+                    <InputAnemometerStep 
+                        ref={step.componentRef} 
+                        mapInstanceRef={props.mapInstanceRef} 
+                        activeStep={activeStep} 
+                        request={payoutRequest}
+                        anemometerChoice={anemometerChoice}
+                        selectedPayoutOptionIndex={selectedAnemometerPayoutOption}
+                        payoutOptions={props.anemometerPayoutOptions}
+                        onActiveStepChange={setActiveStep}
+                        onStepChange={setWizardStep}
+                        onAnemometerChoiceChange={setAnemometerChoice}
+                        onPayoutOptionChange={handleAnemometerPayoutOptionChange}
+                        onAnemometerRequestChange={setAnemometer}/>
+                </>;
+            case PayoutWizardStepType.INPUT_CIAC_DETAILS:
+                return <>
+                    <InputCIACStep 
+                        ref={step.componentRef} 
+                        mapInstanceRef={props.mapInstanceRef} 
+                        activeStep={activeStep} 
+                        request={payoutRequest}
+                        ciacChoice={ciacChoice}
+                        selectedPayoutOptionIndex={selectedCIACPayoutOption}
+                        payoutOptions={props.ciacPayoutOptions}
+                        onActiveStepChange={setActiveStep}
+                        onStepChange={setWizardStep}
+                        onCIACChoiceChange={setCIACChoice}
+                        onPayoutOptionChange={handleCIACPayoutOptionChange}
+                        onCalculatePayoutEnabledChanged={props.onCalculatePayoutEnabledChanged}
+                        onCIACRequestChange={setCIAC}/>
+                </>;
+            case PayoutWizardStepType.SIMPLIFIED_INPUT_LOCATION:
+                return <></>;
+            default:
+                return <></>;
+        }
+    }
+
+    return(
+        <div className="stepper-container">
+        <Box sx={{ maxWidth: 400 }}>
+        {wizardStep !== PayoutWizardStepType.DISPLAY_PAYOUTS && <Stepper activeStep={activeStep} orientation="vertical">
+                {steps.map((step, index) => (
+                <Step key={step.label}>
+                    <StepLabel className={index === activeStep ? 'active' : ''} icon={steps.length == 1 ? <></> : undefined} sx={steps.length == 1 ? {pl:'5px'} : {}}>
+                    {step.label}
+                    {step.istoggable && <Switch checked={step.enabled[0]} onChange={(e) => {handleStepToggle(step,e.target.checked)}}  inputProps={{ 'aria-label': 'controlled' }} />}
+                    </StepLabel>
+                    <StepContent sx={steps.length == 1 ? {ml:0,pl:'15px',pr:'20px'} : {ml:'20px',pl:'20px', pr:'20px', mr:'10px' }}>
+                    <Typography>{step.description}</Typography>
+                    <Box sx={{ mb: 2 }}>
+                        <div>
+                        {renderStepInputs(step)}
+                        <Button
+                            variant="contained"
+                            onClick={() => handleNext(step)}
+                            sx={{ mt: 1, mr: 1 }}
+                        >
+                            {index === steps.length - 1 ? 'Calculate Payouts' : 'Continue'}
+                        </Button>
+                        {steps.length > 1 && <Button
+                            disabled={index === 0}
+                            className='back'
+                            onClick={() => handleBack(step)}
+                            sx={{ mt: 1, mr: 1 }}
+                        >
+                            Back
+                        </Button>}
+                        </div>
+                    </Box>
+                    </StepContent>
+                </Step>
+                ))}
+            </Stepper>}
+            {wizardStep === PayoutWizardStepType.DISPLAY_PAYOUTS && steps.length > 1 && (
+                <BackTestingPayoutInfo 
+                    mapInstanceRef={props.mapInstanceRef} 
+                    stormPayouts={props.stormPayouts}
+                    status={props.appStatus}
+                    onRestart={() => handleReset(PayoutWizardStepType.INPUT_LOCATION)} 
+                    onBack={() => {setWizardStep(PayoutWizardStepType.INPUT_CIAC_DETAILS)}}/>
+            )}
+            {wizardStep === PayoutWizardStepType.DISPLAY_PAYOUTS && steps.length == 1 &&(
+                <BackTestingPayoutInfo 
+                    mapInstanceRef={props.mapInstanceRef} 
+                    stormPayouts={props.stormPayouts}
+                    status={props.appStatus}
+                    onRestart={() => handleReset(PayoutWizardStepType.SIMPLIFIED_INPUT_LOCATION)} 
+                    onBack={() => {setWizardStep(PayoutWizardStepType.SIMPLIFIED_INPUT_LOCATION)}}/>
+            )}
+        </Box>
+        </div>
+    );
+}
+
+export default BackTestingStepper

package/src/components/back-testing-stepper/back-testing-stepper.types.ts

@@ -0,0 +1,41 @@
+import { StormPayout } from "../back-testing-map/back-testing-map.service";
+import { Payout, PayoutRequest } from "../back-testing-map/back-testing-map.types"
+import { PayoutWizardStepType, RadioChoice, WizardStep } from "./steps/step.types"
+
+export interface BackTestingStepperProps {
+    apiKey : string,
+    mapAccessToken : string,
+    mapInstanceRef : React.MutableRefObject<any>,
+    currentStep: PayoutWizardStepType,
+    onCurrentStepChange: (e: PayoutWizardStepType) => void,
+    payoutRequest: PayoutRequest,
+    onPayoutRequestChange: (e:PayoutRequest) => void,
+    proxyChoice: RadioChoice,
+    onProxyChoiceChange: (e:RadioChoice) => void;
+    anemometerChoice: RadioChoice,
+    onAnemometerChoiceChange: (e:RadioChoice) => void;
+    ciacChoice: RadioChoice,
+    onCIACChoiceChange: (e:RadioChoice) => void;
+    onProxyPayoutOptionChange: (e: number) => void;
+    selectedProxyPayoutOptionIndex:number;
+    proxyPayoutOptions: {key:string,value: Payout[]}[],
+    onAnemometerPayoutOptionChange: (e: number) => void;
+    selectedAnemometerPayoutOptionIndex:number;
+    anemometerPayoutOptions: {key:string,value: Payout[]}[],
+    onCIACPayoutOptionChange: (e: number) => void;
+    selectedCIACPayoutOptionIndex:number;
+    ciacPayoutOptions: {key:string,value: Payout[]}[],
+    stormPayouts: StormPayout[],
+    onStormPayoutsChanged?: (e:StormPayout[]) => void,
+    onCalculatePayoutEnabledChanged: (e:boolean) => void,
+    appStatus: 'loading'|'idle'
+}
+
+export type PayoutWizardStep = {
+    step: PayoutWizardStepType
+    label: string
+    description: string
+    componentRef: React.RefObject<WizardStep>
+    istoggable:boolean,
+    enabled: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+}

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

@@ -0,0 +1,57 @@
+.distance-input-container{
+    padding: 0;
+    font-family: system-ui, sans-serif;
+}
+
+.distance-input-container .label{
+    font-weight: 700;
+    padding-bottom: 5px;
+}
+
+.distance-input-container .flex-container{
+    border: 0.5px solid lightgray;
+    display:flex;
+}
+
+.distance-input-container .flex-container .prefix{
+    background-color: lightgray;
+    padding: 8px 15px;
+}
+
+.distance-input-container .flex-container .distance-options #distance{
+    height: 100%;
+    outline: none;
+    box-shadow: none;
+    border: 0;
+    background-color: lightgrey;
+    padding-left: 10px;
+}
+
+.distance-input-container .flex-container.error{
+    border: 0.5px solid rgb(211,47,47);
+}
+
+.distance-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);
+}
+
+.distance-input-container .flex-container.error:focus-within .prefix{
+    box-shadow: inset 1px 1px rgb(211,47,47), inset 0px -1px rgb(211,47,47);
+}
+
+.distance-input-container .flex-container:hover:not(.error:focus-within){
+    border: 0.5px solid black;
+}
+
+.distance-input-container input{
+    width: 100%;
+    padding: 8px 10px;
+    font-size: 1rem;
+    border: 0;
+    background-color: rgba(255,255,255,0);
+}
+
+.distance-input-container input:focus-visible{
+    outline: 0;
+}

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

@@ -0,0 +1,20 @@
+import { StoryFn, Meta } from "@storybook/react";
+import DistanceInput from "./distance-input";
+
+export default {
+  title: "ReactComponentLibrary/Inputs",
+  component: DistanceInput,
+} as Meta<typeof DistanceInput>;
+
+const Template: StoryFn<typeof DistanceInput> = (args) => <DistanceInput {...args} />;
+
+export const DistanceInputTest = Template.bind({});
+DistanceInputTest.args = {
+    label:"Circle radius:",
+    value:15,
+    distanceOptions:[{name:'mi',symbol:'mi'},{name:'km',symbol:'km'}],
+    error:false,
+    errorMessage:"Circle radius must be a number greater than zero",
+    step:0.1,
+    min:0
+};

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

@@ -0,0 +1,93 @@
+"use client"
+
+import React from "react";
+import "./distance-input.css";
+import { DistanceInputProps, DistanceUnit, kilometersToMiles, metersToMiles, milesToKilometers, milesToMeters } from "./distance-input.types";
+
+function DistanceInput(props: DistanceInputProps){
+
+    const [milesValue, setMilesValue] = React.useState(props.value); 
+    const [inputValue, setInputValue] = React.useState(props.value);
+    const [currentDistanceUnit, setCurrentDistanceUnit] = React.useState(props.unit?.symbol || props.distanceOptions[0].symbol);
+
+    const handleCurrencyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const selectedDistanceUnit = props.distanceOptions.find(option => option.name === e.target.value);
+        if (selectedDistanceUnit) {
+            if(inputValue != undefined && !Number.isNaN(inputValue as number)){
+                const convertedDistance = convertDistance(inputValue as number,currentDistanceUnit,selectedDistanceUnit.symbol)
+                setInputValue(convertedDistance);
+            }
+            setCurrentDistanceUnit(selectedDistanceUnit.symbol);
+        }
+    }
+
+    function convertDistance(dist:number,previousUnit:string,newUnit:string){
+        if(previousUnit == DistanceUnit.KILOMETER && newUnit == DistanceUnit.MILE){
+            return kilometersToMiles(dist);
+        } else if (previousUnit == DistanceUnit.MILE && newUnit == DistanceUnit.KILOMETER){
+            return milesToKilometers(dist);
+        } else if (previousUnit == DistanceUnit.KILOMETER && newUnit == DistanceUnit.METER){
+            return dist * 1000;
+        } else if (previousUnit == DistanceUnit.METER && newUnit == DistanceUnit.KILOMETER){
+            return dist / 1000;
+        } else if (previousUnit == DistanceUnit.METER && newUnit == DistanceUnit.MILE){
+            return metersToMiles(dist);
+        } else if (previousUnit == DistanceUnit.MILE && newUnit == DistanceUnit.METER){
+            return milesToMeters(dist);
+        } else {
+            return dist;
+        }
+    }
+
+    function handleChange(e: number){
+        if(Number.isNaN(e)){
+            setInputValue("")
+            if(props.onChange){
+                props.onChange(0)
+            }
+        }else{
+            setInputValue(e)
+            const convertedDistance = convertDistance(e,currentDistanceUnit,DistanceUnit.MILE)
+            if(props.onChange){
+                props.onChange(convertedDistance)
+            }
+        }
+    }
+
+    return(
+        <div className="distance-input-container">
+            { props.label != undefined && <div className="label"><label>{props.label}</label></div>}
+            <div className={"flex-container" + (props.error ? " error" : "")}>
+                <input 
+                    type='number' 
+                    value={inputValue} 
+                    min={props.min}
+                    max={props.max}
+                    onChange={(e) => handleChange(e.target.valueAsNumber)}
+                    step={props.step}/>
+                <div className='distance-options'>
+                    <select
+                        id='distance'
+                        name='distance'
+                        onChange={handleCurrencyChange}>
+                        {props.distanceOptions.map(el => <option style={{borderRadius:0}} key={el.name}>{el.name}</option>)}
+                    </select>
+                </div>
+            </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 DistanceInput

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

@@ -0,0 +1,41 @@
+export const MILES_TO_METERS_FACTOR = 1609.344;
+
+export function milesToMeters(mi:number){
+  return mi * MILES_TO_METERS_FACTOR;
+}
+
+export function metersToMiles(m:number){
+  return m / MILES_TO_METERS_FACTOR;
+}
+
+export function milesToKilometers(mi:number){
+  return milesToMeters(mi) / 1000;
+}
+
+export function kilometersToMiles(km:number){
+  return 1000 * metersToMiles(km);
+}
+
+export enum DistanceUnit{
+  METER = 'm',
+  MILE = 'mi',
+  KILOMETER = 'km'
+}
+
+export interface DistanceOption {
+    name: string;
+    symbol: string;
+}
+
+export interface DistanceInputProps{
+    error?: boolean,
+    errorMessage?: string,
+    label?: string,
+    min?: number,
+    max?: number,
+    step?: number,
+    value?: number | string,
+    unit?: DistanceOption,
+    distanceOptions: DistanceOption[];
+    onChange?: (e: number) => void
+}

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

@@ -0,0 +1,26 @@
+.file-input-container{
+    padding:0;
+    font-family: system-ui, sans-serif;
+}
+
+.file-input-container .label{
+    font-weight: 700;
+    padding-bottom: 5px;
+}
+
+.file-input-container .file-input{
+    width:90px
+}
+
+.file-input-container .file-upload {
+    display: inline-flex;
+    position: relative;
+    left: 10px;
+    background-color: #f4f6f8;
+    font-size: 0.9em;
+    line-height: 1.6em;
+}
+
+.file-input-container .file-upload.selected{
+    color: green;
+}

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

@@ -0,0 +1,20 @@
+import { StoryFn, Meta } from "@storybook/react";
+import FileInput from "./file-input";
+
+export default {
+  title: "ReactComponentLibrary/Inputs",
+  component: FileInput,
+} as Meta<typeof FileInput>;
+
+const Template: StoryFn<typeof FileInput> = (args) => <FileInput {...args} />;
+let fileChosen = false;
+
+export const FileInputTest = Template.bind({});
+FileInputTest.args = {
+    error:false,
+    errorMessage:"Must upload a valid payout CSV or JSON",
+    value:undefined, 
+    onChange:(() => fileChosen = true),
+    isFileSelected:fileChosen,
+    accept:".csv,.json"
+};

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

@@ -0,0 +1,43 @@
+"use client"
+
+import React, { ChangeEvent } from "react";
+import "./file-input.css"
+import { FileInputProps } from "./file-input.types";
+
+function InputFile(props: FileInputProps){
+
+    const [file, setFile] = React.useState(props.value)
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+        if(event.target.files != null){
+            setFile(event.target.files[0])
+            if(props.onChange != undefined){
+                props.onChange(event.target.files[0])
+            }
+        }
+      }
+
+    return(
+        <div className={"file-input-container" + (props.error ? " error" : "")}>
+            { props.label != undefined && <div className="label"><label>{props.label}</label></div>}
+            <label>
+                <input className="file-input" disabled={props.disabled} type="file" onChange={handleChange} accept={props.accept}></input>
+                <span className={"file-upload" + (props.isFileSelected ? " selected" : "")}>{props.isFileSelected ? 'File uploaded!' : 'No file chosen'}</span>
+            </label>
+            { 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 InputFile

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

@@ -0,0 +1,10 @@
+export interface FileInputProps {
+    error?: boolean,
+    errorMessage?: string,
+    label?: string,
+    disabled?: boolean,
+    value?: File,
+    onChange?: (e: File) => void
+    accept?: string,
+    isFileSelected?: boolean
+}