chore: Use types from the web package

packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.tsx

@@ -3,7 +3,7 @@ import Popper from '@mui/material/Popper';
 import Tab from '@mui/material/Tab';
 import * as React from 'react';
 
-import type { IFieldDropdownOption } from '@automatisch/types';
+import type { IFieldDropdownOption } from 'types';
 import Suggestions from 'components/PowerInput/Suggestions';
 import TabPanel from 'components/TabPanel';
 

packages/web/src/components/ControlledCustomAutocomplete/Options.tsx

@@ -1,4 +1,4 @@
-import type { IFieldDropdownOption } from '@automatisch/types';
+import type { IFieldDropdownOption } from 'types';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import throttle from 'lodash/throttle';
@@ -13,7 +13,7 @@ import { SearchInputWrapper } from './style';
 interface OptionsProps {
   data: readonly IFieldDropdownOption[];
   onOptionClick: (event: React.MouseEvent, option: any) => void;
-};
+}
 
 const SHORT_LIST_LENGTH = 4;
 const LIST_ITEM_HEIGHT = 64;
@@ -21,80 +21,89 @@ const LIST_ITEM_HEIGHT = 64;
 const computeListHeight = (currentLength: number) => {
   const numberOfRenderedItems = Math.min(SHORT_LIST_LENGTH, currentLength);
   return LIST_ITEM_HEIGHT * numberOfRenderedItems;
-}
-
-const renderItemFactory = ({ onOptionClick }: Pick<OptionsProps, 'onOptionClick'>) => (props: ListChildComponentProps) => {
-  const { index, style, data } = props;
-
-  const suboption = data[index];
-
-  return (
-    <ListItemButton
-      sx={{ pl: 4 }}
-      divider
-      onClick={(event) => onOptionClick(event, suboption)}
-      data-test="power-input-suggestion-item"
-      key={index}
-      style={style}
-    >
-      <ListItemText
-        primary={suboption.label}
-        primaryTypographyProps={{
-          variant: 'subtitle1',
-          title: 'Property name',
-          sx: { fontWeight: 700 },
-        }}
-        secondary={suboption.value}
-        secondaryTypographyProps={{
-          variant: 'subtitle2',
-          title: 'Sample value',
-          noWrap: true,
-        }}
-      />
-    </ListItemButton>
-  );
 };
 
+const renderItemFactory =
+  ({ onOptionClick }: Pick<OptionsProps, 'onOptionClick'>) =>
+  (props: ListChildComponentProps) => {
+    const { index, style, data } = props;
+
+    const suboption = data[index];
+
+    return (
+      <ListItemButton
+        sx={{ pl: 4 }}
+        divider
+        onClick={(event) => onOptionClick(event, suboption)}
+        data-test="power-input-suggestion-item"
+        key={index}
+        style={style}
+      >
+        <ListItemText
+          primary={suboption.label}
+          primaryTypographyProps={{
+            variant: 'subtitle1',
+            title: 'Property name',
+            sx: { fontWeight: 700 },
+          }}
+          secondary={suboption.value}
+          secondaryTypographyProps={{
+            variant: 'subtitle2',
+            title: 'Sample value',
+            noWrap: true,
+          }}
+        />
+      </ListItemButton>
+    );
+  };
+
 const Options = (props: OptionsProps) => {
   const formatMessage = useFormatMessage();
-  const {
-    data,
-    onOptionClick
-  } = props;
-  const [filteredData, setFilteredData] = React.useState<readonly IFieldDropdownOption[]>(
-    data
+  const { data, onOptionClick } = props;
+  const [filteredData, setFilteredData] =
+    React.useState<readonly IFieldDropdownOption[]>(data);
+
+  React.useEffect(
+    function syncOptions() {
+      setFilteredData((filteredData) => {
+        if (filteredData.length === 0 && filteredData.length !== data.length) {
+          return data;
+        }
+
+        return filteredData;
+      });
+    },
+    [data]
   );
 
-  React.useEffect(function syncOptions() {
-    setFilteredData((filteredData) => {
-      if (filteredData.length === 0 && filteredData.length !== data.length) {
-        return data;
-      }
-
-      return filteredData;
-    })
-  }, [data]);
-
-  const renderItem = React.useMemo(() => renderItemFactory({
-    onOptionClick
-  }), [onOptionClick]);
+  const renderItem = React.useMemo(
+    () =>
+      renderItemFactory({
+        onOptionClick,
+      }),
+    [onOptionClick]
+  );
 
   const onSearchChange = React.useMemo(
-  () =>
-    throttle((event: React.ChangeEvent) => {
-      const search = (event.target as HTMLInputElement).value.toLowerCase();
+    () =>
+      throttle((event: React.ChangeEvent) => {
+        const search = (event.target as HTMLInputElement).value.toLowerCase();
 
-      if (!search) {
-        setFilteredData(data);
-        return;
-      }
+        if (!search) {
+          setFilteredData(data);
+          return;
+        }
 
-      const newFilteredData = data.filter(option => `${option.label}\n${option.value}`.toLowerCase().includes(search.toLowerCase()));
+        const newFilteredData = data.filter((option) =>
+          `${option.label}\n${option.value}`
+            .toLowerCase()
+            .includes(search.toLowerCase())
+        );
 
-      setFilteredData(newFilteredData);
-    }, 400),
-  [data]
-);
+        setFilteredData(newFilteredData);
+      }, 400),
+    [data]
+  );
 
   return (
     <>
@@ -122,5 +131,4 @@ const Options = (props: OptionsProps) => {
   );
 };
 
-
 export default Options;

packages/web/src/components/ControlledCustomAutocomplete/index.tsx

@@ -5,7 +5,7 @@ import FormHelperText from '@mui/material/FormHelperText';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ClearIcon from '@mui/icons-material/Clear';
-import type { IFieldDropdownOption } from '@automatisch/types';
+import type { IFieldDropdownOption } from 'types';
 import { ActionButtonsWrapper } from './style';
 
 import ClickAwayListener from '@mui/base/ClickAwayListener';