feat: introduce propTypes

packages/web/src/components/ControlledCustomAutocomplete/Controller.jsx

@@ -1,5 +1,7 @@
+import PropTypes from 'prop-types';
 import * as React from 'react';
 import { Controller as RHFController, useFormContext } from 'react-hook-form';
+
 function Controller(props) {
   const { control } = useFormContext();
   const {
@@ -20,4 +22,13 @@ function Controller(props) {
     />
   );
 }
+
+Controller.propTypes = {
+  defaultValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  shouldUnregister: PropTypes.bool,
+  children: PropTypes.element.isRequired,
+};
+
 export default Controller;

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

@@ -1,11 +1,14 @@
+import PropTypes from 'prop-types';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import Tab from '@mui/material/Tab';
 import * as React from 'react';
 import Suggestions from 'components/PowerInput/Suggestions';
 import TabPanel from 'components/TabPanel';
+import { FieldDropdownOptionPropType } from 'propTypes/propTypes';
 import Options from './Options';
 import { Tabs } from './style';
+
 const CustomOptions = (props) => {
   const {
     open,
@@ -69,4 +72,23 @@ const CustomOptions = (props) => {
     </Popper>
   );
 };
+
+CustomOptions.propTypes = {
+  open: PropTypes.bool.isRequired,
+  anchorEl: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      output: PropTypes.arrayOf(PropTypes.object).isRequired,
+    }),
+  ).isRequired,
+  options: PropTypes.arrayOf(FieldDropdownOptionPropType).isRequired,
+  onSuggestionClick: PropTypes.func.isRequired,
+  onOptionClick: PropTypes.func.isRequired,
+  onTabChange: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  initialTabIndex: PropTypes.oneOf([0, 1]),
+};
+
 export default CustomOptions;

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import throttle from 'lodash/throttle';
@@ -7,12 +8,16 @@ import { Typography } from '@mui/material';
 import SearchInput from 'components/SearchInput';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { SearchInputWrapper } from './style';
+import { FieldDropdownOptionPropType } from 'propTypes/propTypes';
+
 const SHORT_LIST_LENGTH = 4;
 const LIST_ITEM_HEIGHT = 64;
+
 const computeListHeight = (currentLength) => {
   const numberOfRenderedItems = Math.min(SHORT_LIST_LENGTH, currentLength);
   return LIST_ITEM_HEIGHT * numberOfRenderedItems;
 };
+
 const renderItemFactory =
   ({ onOptionClick }) =>
   (props) => {
@@ -44,6 +49,7 @@ const renderItemFactory =
       </ListItemButton>
     );
   };
+
 const Options = (props) => {
   const formatMessage = useFormatMessage();
   const { data, onOptionClick } = props;
@@ -108,4 +114,10 @@ const Options = (props) => {
     </>
   );
 };
+
+Options.propTypes = {
+  data: PropTypes.arrayOf(FieldDropdownOptionPropType).isRequired,
+  onOptionClick: PropTypes.func.isRequired,
+};
+
 export default Options;

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { IconButton } from '@mui/material';
@@ -28,6 +29,7 @@ import {
 import CustomOptions from './CustomOptions';
 import { processStepWithExecutions } from 'components/PowerInput/data';
 import { StepExecutionsContext } from 'contexts/StepExecutions';
+
 function ControlledCustomAutocomplete(props) {
   const {
     defaultValue = '',
@@ -257,4 +259,23 @@ function ControlledCustomAutocomplete(props) {
     </Slate>
   );
 }
+
+ControlledCustomAutocomplete.propTypes = {
+  options: PropTypes.array,
+  loading: PropTypes.bool.isRequired,
+  showOptionValue: PropTypes.bool,
+  dependsOn: PropTypes.arrayOf(PropTypes.string),
+  defaultValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  type: PropTypes.string,
+  required: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  description: PropTypes.string,
+  docUrl: PropTypes.string,
+  clickToCopy: PropTypes.bool,
+  disabled: PropTypes.bool,
+  shouldUnregister: PropTypes.bool,
+};
+
 export default ControlledCustomAutocomplete;