chore(common): convert useControlledOrUncontrolled to TypeScript

Author: WesSouza

src/ColorInput/ColorInput.tsx

@@ -8,12 +8,15 @@ import { Divider } from '../Divider/Divider';
 import { CommonStyledProps } from '../types';
 
 type ColorInputProps = {
-  value?: string;
   defaultValue?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
   disabled?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  value?: string;
   variant?: 'default' | 'flat';
-} & React.InputHTMLAttributes<HTMLInputElement> &
+} & Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'defaultValue' | 'disabled' | 'onChange' | 'value'
+> &
   CommonStyledProps;
 
 const Trigger = styled(StyledButton)`
@@ -143,14 +146,14 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
           onChange={handleChange}
           readOnly={disabled}
           disabled={disabled}
-          value={valueDerived || '#008080'}
+          value={valueDerived ?? '#008080'}
           type='color'
           ref={ref}
           {...otherProps}
         />
         <ColorPreview
           $disabled={disabled}
-          color={valueDerived}
+          color={valueDerived ?? '#008080'}
           role='presentation'
         />
         {variant === 'default' && <StyledDivider orientation='vertical' />}

src/Select/Select.tsx

@@ -58,7 +58,8 @@ type SelectNativeProps = {
 type SelectProps = {
   'aria-label'?: string;
   className?: string;
-  defaultValue?: unknown;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultValue?: any;
   disabled?: boolean;
   formatDisplay?: SelectFormatDisplayCallback;
   inputRef?: React.RefObject<SelectRef>;
@@ -77,10 +78,12 @@ type SelectProps = {
   open?: boolean;
   options?: (SelectOption | null)[];
   readOnly?: boolean;
-  SelectDisplayProps?: Record<string, unknown>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  SelectDisplayProps?: Record<string, any>;
   shadow?: boolean;
   style?: React.CSSProperties;
-  value?: unknown;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: any;
   variant?: SelectVariants;
   width?: string | number;
 } & (SelectCustomProps | SelectNativeProps) &
@@ -120,7 +123,8 @@ const getDisplayLabel = (
   return selectedOption.label;
 };
 
-const getDefaultValue = (defaultValue: unknown, options: SelectOption[]) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getDefaultValue = (defaultValue: any, options: SelectOption[]) => {
   if (defaultValue) {
     return defaultValue;
   }

src/Slider/Slider.tsx

@@ -48,7 +48,10 @@ type SliderProps = {
   step?: number | null;
   value?: number;
   variant?: 'default' | 'flat';
-} & React.HTMLAttributes<HTMLDivElement> &
+} & Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'defaultValue' | 'onChange' | 'onMouseDown'
+> &
   CommonStyledProps;
 
 function percentToValue(percent: number, min: number, max: number) {
@@ -311,7 +314,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
   const vertical = orientation === 'vertical';
   const [valueDerived, setValueState] = useControlledOrUncontrolled({
     value,
-    defaultValue
+    defaultValue: defaultValue ?? 0
   });
 
   const {
@@ -363,7 +366,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
       const tenPercents = (max - min) / 10;
       const marksValues = marks.map(mark => mark.value);
       const marksIndex = marksValues.indexOf(valueDerived);
-      let newValue;
+      let newValue = 0;
 
       switch (event.key) {
         case 'Home':
@@ -587,7 +590,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
         disabled={disabled}
         name={name}
         type='hidden'
-        value={valueDerived || 0}
+        value={valueDerived ?? 0}
       />
       {marks &&
         marks.map(m => (

src/common/hooks/useControlledOrUncontrolled.ts

@@ -1,12 +1,21 @@
 import { useState, useCallback } from 'react';
 
-export default ({ value, defaultValue }) => {
+export default function useControlledOrUncontrolled<T>({
+  value,
+  defaultValue
+}: {
+  value: T | undefined;
+  defaultValue: T;
+}): [T, (newValue: React.SetStateAction<T>) => void] {
   const isControlled = value !== undefined;
   const [controlledValue, setControlledValue] = useState(defaultValue);
-  const handleChangeIfUncontrolled = useCallback(newValue => {
-    if (!isControlled) {
-      setControlledValue(newValue);
-    }
-  }, []);
+  const handleChangeIfUncontrolled = useCallback(
+    (newValue: React.SetStateAction<T>) => {
+      if (!isControlled) {
+        setControlledValue(newValue);
+      }
+    },
+    [isControlled]
+  );
   return [isControlled ? value : controlledValue, handleChangeIfUncontrolled];
-};
+}