refactor(web/input): move field components into fields folder

web/src/features/dialog/components/fields/checkbox.tsx

@@ -0,0 +1,31 @@
+import { Box, Checkbox, HStack, Text } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { ICheckbox } from '../../../../interfaces/dialog';
+import Label from '../Label';
+
+interface Props {
+  row: ICheckbox;
+  index: number;
+  handleChange: (value: boolean, index: number) => void;
+}
+
+const CheckboxField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if (props.row.checked) props.handleChange(props.row.checked, props.index);
+  }, []);
+
+  return (
+    <>
+      <Box mb={3} key={`checkbox-${props.index}`}>
+        <Checkbox
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
+          defaultChecked={props.row.checked}
+        >
+          <Label label={props.row.label} description={props.row.description} />
+        </Checkbox>
+      </Box>
+    </>
+  );
+};
+
+export default CheckboxField;

web/src/features/dialog/components/fields/input.tsx

@@ -0,0 +1,55 @@
+import { Box, InputGroup, InputLeftElement, InputRightElement, Input } from '@chakra-ui/react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect } from 'react';
+import { IInput } from '../../../../interfaces/dialog';
+import Label from '../Label';
+
+interface Props {
+  row: IInput;
+  index: number;
+  handleChange: (value: string, index: number) => void;
+  passwordStates: boolean[];
+  handlePasswordStates: (index: number) => void;
+}
+
+const InputField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if (props.row.default) props.handleChange(props.row.default, props.index);
+  }, []);
+
+  return (
+    <>
+      <Box mb={3} textAlign="left">
+        <Label label={props.row.label} description={props.row.description} />
+        <InputGroup>
+          {props.row.icon && (
+            <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
+          )}
+          <Input
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.value, props.index)}
+            placeholder={props.row.placeholder}
+            defaultValue={props.row.default}
+            type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
+            isDisabled={props.row.disabled}
+          />
+          {props.row.password && (
+            <InputRightElement
+              cursor="pointer"
+              onClick={() => props.handlePasswordStates(props.index)}
+              children={
+                <FontAwesomeIcon
+                  fixedWidth
+                  icon={props.passwordStates[props.index] ? 'eye' : 'eye-slash'}
+                  fontSize="1em"
+                  style={{ paddingRight: 8 }}
+                />
+              }
+            />
+          )}
+        </InputGroup>
+      </Box>
+    </>
+  );
+};
+
+export default InputField;

web/src/features/dialog/components/fields/number.tsx

@@ -0,0 +1,49 @@
+import {
+  Box,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  InputLeftElement,
+} from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { INumber } from '../../../../interfaces/dialog';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Label from '../Label';
+
+interface Props {
+  row: INumber;
+  index: number;
+  handleChange: (value: number, index: number) => void;
+}
+
+const NumberField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if (props.row.default) props.handleChange(props.row.default, props.index);
+  }, []);
+
+  return (
+    <Box mb={3}>
+      <Label label={props.row.label} description={props.row.description} />
+      <NumberInput
+        onChange={(val: string) => props.handleChange(+val, props.index)}
+        defaultValue={props.row.default}
+        min={props.row.min}
+        max={props.row.max}
+        isDisabled={props.row.disabled}
+      >
+        {props.row.icon && (
+          <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
+        )}
+        <NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
+    </Box>
+  );
+};
+
+export default NumberField;

web/src/features/dialog/components/fields/select.tsx

@@ -0,0 +1,47 @@
+import { Box, Select } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { ISelect } from '../../../../interfaces/dialog';
+
+interface Props {
+  row: ISelect;
+  index: number;
+  handleChange: (value: string, index: number) => void;
+}
+
+const SelectField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if (props.row.default) {
+      props.row.options?.map((option) => {
+        if (props.row.default === option.value) {
+          props.handleChange(option.value, props.index);
+        }
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <Box mb={3} key={`select-${props.index}`}>
+        <Select
+          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)}
+          defaultValue={props.row.default || ''}
+          isDisabled={props.row.disabled}
+        >
+          {/* Hacky workaround for selectable placeholder issue */}
+          {!props.row.default && (
+            <option value="" hidden disabled>
+              {props.row.label}
+            </option>
+          )}
+          {props.row.options?.map((option, index) => (
+            <option key={`option-${index}`} value={option.value}>
+              {option.label || option.value}
+            </option>
+          ))}
+        </Select>
+      </Box>
+    </>
+  );
+};
+
+export default SelectField;

web/src/features/dialog/components/fields/slider.tsx

@@ -0,0 +1,48 @@
+import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { ISlider } from '../../../../interfaces/dialog';
+import Label from '../Label';
+
+interface Props {
+  row: ISlider;
+  index: number;
+  handleChange: (value: number, index: number) => void;
+}
+
+const SliderField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if (props.row.default || props.row.min) props.handleChange(props.row.default || props.row.min!, props.index);
+  }, []);
+
+  const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
+
+  return (
+    <>
+      <Box mb={3} key={`slider-${props.index}`}>
+        <Label label={props.row.label} description={props.row.description} />
+        <Slider
+          onChangeEnd={(val: number) => props.handleChange(val, props.index)}
+          onChange={(val: number) => setSliderValue(val)}
+          defaultValue={props.row.default || props.row.min || 0}
+          min={props.row.min}
+          max={props.row.max}
+          step={props.row.step}
+          isDisabled={props.row.disabled}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <Tooltip hasArrow label={sliderValue} placement="bottom" gutter={10}>
+            <SliderThumb />
+          </Tooltip>
+        </Slider>
+        <HStack justifyContent="space-between">
+          <Text fontSize="sm">{props.row.min || 0}</Text>
+          <Text fontSize="sm">{props.row.max || 100}</Text>
+        </HStack>
+      </Box>
+    </>
+  );
+};
+
+export default SliderField;