Merge branch 'master' of github.com:dxc-technology/halstack-react into Mil4n0r/code_quality_monorepo

Author: Enrique Moreno

apps/website/.eslintrc.json

@@ -11,7 +11,6 @@
         "argsIgnorePattern": "^_"
       }
     ],
-    "curly": ["warn", "all"],
     // TODO: Remove rules
     "react/no-unescaped-entities": "off",
     "import/no-anonymous-default-export": "off",

packages/eslint-config/library.js

@@ -65,7 +65,6 @@ module.exports = {
     },
   ],
   rules: {
-    curly: ["warn", "all"],
     "no-use-before-define": [
       "error",
       {

packages/lib/src/BackgroundColorContext.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import DxcIcon from "../icon/Icon";
 import { HalstackLanguageContext } from "../HalstackContext";
 import ListOption from "./ListOption";
-import { groupsHaveOptions } from "./selectUtils";
+import { groupsHaveOptions } from "./utils";
 import { ListboxProps, ListOptionGroupType, ListOptionType } from "./types";
 
 const Listbox = ({
@@ -24,12 +24,9 @@ const Listbox = ({
 
   let globalIndex = optional && !multiple ? 0 : -1;
 
-  const isListOptionGroupType = (option: ListOptionType | ListOptionGroupType): option is ListOptionGroupType =>
-    "options" in option && Array.isArray(option.options);
-
   const mapOptionFunc = (option: ListOptionType | ListOptionGroupType, mapIndex: number) => {
     const groupId = `${id}-group-${mapIndex}`;
-    if (isListOptionGroupType(option)) {
+    if ("options" in option) {
       return (
         option.options.length > 0 && (
           <li key={groupId}>

packages/lib/src/select/Listbox.tsx

@@ -29,7 +29,7 @@ import {
   groupsHaveOptions,
   isArrayOfOptionGroups,
   notOptionalCheck,
-} from "./selectUtils";
+} from "./utils";
 import SelectPropsType, { ListOptionType, RefType } from "./types";
 
 const DxcSelect = forwardRef<RefType, SelectPropsType>(
@@ -94,28 +94,34 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>(
       }
     };
 
-    const handleSelectChangeValue = (newOption: ListOptionType | undefined) => {
-      if (newOption) {
-        const currentValue = value ?? innerValue;
-        // TODO: Fix types
-        const newValue = multiple
-          ? (currentValue as string[]).includes(newOption.value)
-            ? (currentValue as string[]).filter((optionVal: string) => optionVal !== newOption.value)
-            : [...(currentValue as string[]), newOption.value]
-          : newOption.value;
-
-        if (value == null) {
-          setInnerValue(newValue);
+    const handleSelectChangeValue = useCallback(
+      (newOption: ListOptionType | undefined) => {
+        if (newOption) {
+          let newValue: string | string[];
+
+          if (multiple) {
+            const currentValue = (value ?? innerValue) as string[];
+            newValue = currentValue.includes(newOption.value)
+              ? currentValue.filter((optionVal) => optionVal !== newOption.value)
+              : [...currentValue, newOption.value];
+          } else {
+            newValue = newOption.value;
+          }
+
+          if (value == null) {
+            setInnerValue(newValue);
+          }
+          onChange?.({
+            value: newValue as string & string[],
+            error: notOptionalCheck(newValue, multiple, optional)
+              ? translatedLabels.formFields.requiredValueErrorMessage
+              : undefined,
+          });
         }
-        // TODO: Fix types
-        onChange?.({
-          value: newValue as string & string[],
-          ...(notOptionalCheck(newValue, multiple, optional) && {
-            error: translatedLabels.formFields.requiredValueErrorMessage,
-          }),
-        });
-      }
-    };
+      },
+      [multiple, value, innerValue, onChange, optional, translatedLabels]
+    );
+
     const handleSelectOnClick = () => {
       if (searchable) {
         selectSearchInputRef?.current?.focus();

packages/lib/src/select/Select.tsx

@@ -36,7 +36,7 @@ const DxcSwitch = forwardRef<RefType, SwitchPropsType>(
         case "Enter":
         case " ":
           event.preventDefault();
-          refTrack?.current?.focus();
+          refTrack.current?.focus();
           setInnerChecked(!(checked ?? innerChecked));
           onChange?.(!(checked ?? innerChecked));
           break;

packages/lib/src/select/selectUtils.ts packages/lib/src/select/utils.tspackages/lib/src/select/selectUtils.ts renamed to packages/lib/src/select/utils.ts

@@ -42,16 +42,16 @@ const DxcTab = forwardRef(
 
     useEffect(() => {
       if (activeLabel === label) {
-        setActiveIndicatorWidth?.(tabRef?.current?.offsetWidth ?? 0);
-        setActiveIndicatorLeft?.(tabRef?.current?.offsetLeft ?? 0);
+        setActiveIndicatorWidth?.(tabRef.current?.offsetWidth ?? 0);
+        setActiveIndicatorLeft?.(tabRef.current?.offsetLeft ?? 0);
       }
-    }, [activeLabel, label]);
+    }, [activeLabel, label, setActiveIndicatorWidth, setActiveIndicatorLeft]);
 
     useEffect(() => {
       if (active) {
         setActiveLabel?.(label);
       }
-    }, [active, label]);
+    }, [active, label, setActiveLabel]);
 
     const handleOnKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
       switch (event.key) {

packages/lib/src/switch/Switch.tsx

@@ -134,7 +134,7 @@ const DxcTabs = ({
   }, [iconPosition, tabIndex, innerFocusIndex, activeTabLabel, childrenArray, hasLabelAndIcon]);
 
   const scrollLeft = () => {
-    const scrollWidth = (refTabList?.current?.offsetHeight || 0) * 0.75;
+    const scrollWidth = (refTabList?.current?.offsetHeight ?? 0) * 0.75;
     let moveX = 0;
     if (countClick <= scrollWidth) {
       moveX = 0;
@@ -150,10 +150,11 @@ const DxcTabs = ({
   };
 
   const scrollRight = () => {
-    const scrollWidth = (refTabList?.current?.offsetHeight || 0) * 0.75;
+    const offsetHeight = refTabList?.current?.offsetHeight ?? 0;
+    const scrollWidth = offsetHeight * 0.75;
     let moveX = 0;
-    if (countClick + scrollWidth + (refTabList?.current?.offsetHeight || 0) >= totalTabsWidth) {
-      moveX = totalTabsWidth - (refTabList?.current?.offsetHeight || 0);
+    if (countClick + scrollWidth + offsetHeight >= totalTabsWidth) {
+      moveX = totalTabsWidth - offsetHeight;
       setScrollRightEnabled(false);
       setScrollLeftEnabled(true);
     } else {
@@ -257,8 +258,6 @@ const DxcTabs = ({
   );
 };
 
-DxcTabs.Tab = DxcTab;
-
 const Underline = styled.div`
   position: absolute;
   left: 0;
@@ -383,4 +382,5 @@ const TabsContentScroll = styled.div<{
   transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 `;
 
+DxcTabs.Tab = DxcTab;
 export default DxcTabs;

packages/lib/src/tabs/Tab.tsx

@@ -10,7 +10,7 @@ const useResize = (refTabList: MutableRefObject<HTMLDivElement | null>) => {
   const [viewWidth, setViewWidth] = useState(0);
 
   const handleWindowSizeChange = useCallback(() => {
-    setViewWidth(refTabList?.current?.offsetWidth ?? 0);
+    setViewWidth(refTabList.current?.offsetWidth ?? 0);
   }, [refTabList]);
 
   useEffect(() => {
@@ -60,21 +60,21 @@ const DxcTabs = ({
 
   useEffect(() => {
     if (activeTabIndex != null || innerActiveTabIndex != null) {
-      const sumWidth = refTabs?.current?.reduce((count, obj) => count + obj.offsetWidth, 0);
+      const sumWidth = refTabs.current?.reduce((count, obj) => count + obj.offsetWidth, 0);
       setTotalTabsWidth(sumWidth);
-      setActiveIndicatorWidth(refTabs?.current[activeTabIndex ?? innerActiveTabIndex!]?.offsetWidth ?? 0);
-      setActiveIndicatorLeft(refTabs?.current[activeTabIndex ?? innerActiveTabIndex!]?.offsetLeft ?? 0);
+      setActiveIndicatorWidth(refTabs.current[activeTabIndex ?? innerActiveTabIndex!]?.offsetWidth ?? 0);
+      setActiveIndicatorLeft(refTabs.current[activeTabIndex ?? innerActiveTabIndex!]?.offsetLeft ?? 0);
     }
-  }, [refTabs]);
+  }, [activeTabIndex, innerActiveTabIndex]);
 
   useEffect(() => {
-    setMinHeightTabs((refTabList?.current?.offsetHeight || 0) + 1);
-  }, [refTabList]);
+    setMinHeightTabs((refTabList.current?.offsetHeight ?? 0) + 1);
+  }, []);
 
   useEffect(() => {
     if (activeTabIndex && activeTabIndex >= 0) {
-      setActiveIndicatorWidth(refTabs?.current[activeTabIndex]?.offsetWidth ?? 0);
-      setActiveIndicatorLeft(refTabs?.current[activeTabIndex]?.offsetLeft ?? 0);
+      setActiveIndicatorWidth(refTabs.current[activeTabIndex]?.offsetWidth ?? 0);
+      setActiveIndicatorLeft(refTabs.current[activeTabIndex]?.offsetLeft ?? 0);
     }
   }, [activeTabIndex]);
 
@@ -84,13 +84,13 @@ const DxcTabs = ({
     }
     onTabClick?.(newValue);
     if (activeTabIndex === undefined) {
-      setActiveIndicatorWidth(refTabs?.current[newValue]?.offsetWidth ?? 0);
-      setActiveIndicatorLeft(refTabs?.current[newValue]?.offsetLeft ?? 0);
+      setActiveIndicatorWidth(refTabs.current[newValue]?.offsetWidth ?? 0);
+      setActiveIndicatorLeft(refTabs.current[newValue]?.offsetLeft ?? 0);
     }
   };
 
   const scrollLeft = () => {
-    const scrollWidth = (refTabList?.current?.offsetHeight || 0) * 0.75;
+    const scrollWidth = (refTabList?.current?.offsetHeight ?? 0) * 0.75;
     let moveX = 0;
     if (countClick <= scrollWidth) {
       moveX = 0;
@@ -106,10 +106,11 @@ const DxcTabs = ({
   };
 
   const scrollRight = () => {
-    const scrollWidth = (refTabList?.current?.offsetHeight || 0) * 0.75;
+    const offsetHeight = refTabList?.current?.offsetHeight ?? 0;
+    const scrollWidth = offsetHeight * 0.75;
     let moveX = 0;
-    if (countClick + scrollWidth + (refTabList?.current?.offsetHeight || 0) >= totalTabsWidth) {
-      moveX = totalTabsWidth - (refTabList?.current?.offsetHeight || 0);
+    if (countClick + scrollWidth + offsetHeight >= totalTabsWidth) {
+      moveX = totalTabsWidth - offsetHeight;
       setScrollRightEnabled(false);
       setScrollLeftEnabled(true);
     } else {
@@ -129,7 +130,7 @@ const DxcTabs = ({
           while (tabs[index]?.isDisabled) {
             index = index === 0 ? tabs.length - 1 : index - 1;
           }
-          refTabs?.current[index]?.focus({ preventScroll: true });
+          refTabs.current[index]?.focus({ preventScroll: true });
           setScrollFocus(index);
           return index;
         }
@@ -146,7 +147,7 @@ const DxcTabs = ({
           while (tabs[index]?.isDisabled) {
             index = index === tabs.length - 1 ? 0 : index + 1;
           }
-          refTabs?.current[index]?.focus({ preventScroll: true });
+          refTabs.current[index]?.focus({ preventScroll: true });
           setScrollFocus(index);
           return index;
         }
@@ -158,7 +159,7 @@ const DxcTabs = ({
   const setScrollFocus = (actualIndex: number) => {
     if (tabs) {
       let sumPrev = 0;
-      refTabs?.current?.forEach((item, index) => {
+      refTabs.current?.forEach((item, index) => {
         if (index <= actualIndex) {
           sumPrev += item.offsetWidth;
         }
@@ -207,7 +208,7 @@ const DxcTabs = ({
           if (temporalFocusIndex !== currentFocusIndex) {
             event.preventDefault();
             setTemporalFocusIndex(currentFocusIndex);
-            refTabs?.current[currentFocusIndex]?.focus();
+            refTabs.current[currentFocusIndex]?.focus();
           }
           handleSelected(currentFocusIndex);
         }