chore: noImplicitAny TS rule enabled and errors fixed (#4235)

.storybook/addons/theme-selector/utils.ts

@@ -1,3 +1,5 @@
+import { HvThemeStructure, themes } from "../../../packages/styles/src";
+
 const STORAGE_KEY = "sb-uikit-theme";
 const DEFAULT_THEME = "ds5";
 
@@ -32,7 +34,7 @@ const toPascalCase = (str: string) =>
     (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(),
   );
 
-export const getThemesList = (themes) => {
+export const getThemesList = (themes: Record<string, HvThemeStructure>) => {
   const themesList: Theme[] = [];
 
   Object.keys(themes).forEach((themeName) => {

.storybook/blocks/DocsContainer.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentType, useEffect, useMemo, useState } from "react";
 import { MDXProvider } from "@mdx-js/react";
-import { DocsContainer } from "@storybook/addon-docs";
+import { DocsContainer, DocsContainerProps } from "@storybook/addon-docs";
 import { addons } from "@storybook/preview-api";
 import { Global } from "@storybook/theming";
 import {
@@ -41,7 +41,13 @@ const components: Record<string, ComponentType> = {
   h6: (props) => <HvTypography component="h6" variant="title4" {...props} />,
 };
 
-export default ({ context, children }) => {
+export default ({
+  context,
+  children,
+}: {
+  children: React.ReactNode;
+  context: DocsContainerProps["context"];
+}) => {
   const initialMode = getInitialMode();
   const [mode, setMode] = useState(initialMode);
 

.storybook/decorators/ThemeDecorator.tsx

@@ -33,7 +33,9 @@ export const ThemeDecorator: Decorator = (Story) => {
 
   const containerRef = useDarkClass(mode);
 
-  const storyStyles = getStoryStyles(base.colors.modes[mode].atmo2);
+  const storyStyles = getStoryStyles(
+    base.colors.modes[mode as "wicked" | "dawn"].atmo2,
+  );
 
   const switchTheme = ({ name }: Theme) => {
     setSelectedTheme(name);

apps/docs/theme.config.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTheme } from "nextra-theme-docs";
 import { HvProvider } from "@hitachivantara/uikit-react-core";
 
@@ -33,7 +34,9 @@ export default {
     text: null,
     component: null,
   },
-  main: ({ children }) => <MainContainer>{children}</MainContainer>,
+  main: ({ children }: { children: React.ReactNode }) => (
+    <MainContainer>{children}</MainContainer>
+  ),
   primaryHue: 212,
   primarySaturation: 70,
 };

docs/foundation/Icons/Library.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { ComponentType, useMemo, useState } from "react";
 import { css } from "@emotion/css";
 import {
   HvInput,
@@ -8,8 +8,10 @@ import {
   HvTypography,
 } from "@hitachivantara/uikit-react-core";
 import {
+  IconBaseProps,
   icons as iconComponentList,
   IconSize,
+  IconType,
   pictograms as pictogramComponentList,
 } from "@hitachivantara/uikit-react-icons";
 
@@ -39,7 +41,15 @@ const classes = {
   }),
 };
 
-const Icon = ({ name, Component, iconSize }) => (
+const Icon = ({
+  name,
+  Component,
+  iconSize,
+}: {
+  name: string;
+  Component: ComponentType<IconBaseProps>;
+  iconSize: IconSize;
+}) => (
   <div className={classes.iconContainer} title={name}>
     <Component iconSize={iconSize} />
     <HvTypography variant="caption1" className={classes.text}>
@@ -48,7 +58,13 @@ const Icon = ({ name, Component, iconSize }) => (
   </div>
 );
 
-const Group = ({ iconSize, iconsLibrary }) => {
+const Group = ({
+  iconSize,
+  iconsLibrary,
+}: {
+  iconsLibrary: Record<string, IconType>;
+  iconSize: IconSize;
+}) => {
   const keys = Array.from(new Set([...Object.keys(iconsLibrary)])).sort();
   return (
     <div className={classes.group}>
@@ -73,13 +89,10 @@ const Library = () => {
 
     return Object.keys(iconList)
       .filter((key) => key.toLowerCase().includes(search.toLowerCase()))
-      .reduce(
-        (obj, key) => {
-          obj[key] = iconList[key];
-          return obj;
-        },
-        {} as typeof iconList,
-      );
+      .reduce<Record<string, IconType>>((obj, key) => {
+        obj[key] = iconList[key as keyof typeof iconList];
+        return obj;
+      }, {});
   }, [search]);
 
   return (

docs/foundation/colors/Colors.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import { css } from "@emotion/css";
 import { Meta } from "@storybook/react";
 import {
   HvTypography,
@@ -7,26 +8,44 @@ import {
 } from "@hitachivantara/uikit-react-core";
 import { HvThemeColorModeStructure } from "@hitachivantara/uikit-styles";
 
-import {
-  StyledColorContainer,
-  StyledColorName,
-  StyledColors,
-  StyledColorSquare,
-  StyledGroup,
-  StyledGroupName,
-} from "./Colors.styles";
 import { themeColors } from "./themeColors";
 
 function groupColors(colorsJson?: HvThemeColorModeStructure) {
   const colorsMap = new Map<string, string>();
   for (const key in colorsJson) {
     if (Object.hasOwn(colorsJson, key)) {
-      colorsMap.set(key, colorsJson[key]);
+      colorsMap.set(key, colorsJson[key as keyof typeof colorsJson]);
     }
   }
   return colorsMap;
 }
 
+const classes = {
+  group: css({ paddingBottom: theme.space.sm }),
+  groupName: css({ marginTop: theme.space.md, marginBottom: theme.space.sm }),
+  colors: css({
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    flexDirection: "row",
+  }),
+  colorContainer: css({
+    marginRight: theme.space.md,
+    marginBottom: theme.space.md,
+  }),
+  colorName: css({
+    display: "flex",
+    alignItems: "baseline",
+    flexDirection: "column",
+  }),
+  colorSquare: css({
+    width: 130,
+    height: 130,
+    border: `1px solid ${theme.colors.atmo4}`,
+    marginBottom: theme.space.xs,
+  }),
+};
+
 const ColorsGroup = ({
   selectedTheme = "ds5",
   colors,
@@ -43,10 +62,12 @@ const ColorsGroup = ({
     >
       {Object.keys(themeColors[selectedTheme]).map((group) => (
         <div key={group}>
-          <StyledGroup>
+          <div className={classes.group}>
             <div>
-              <StyledGroupName variant="title2">{group}</StyledGroupName>
-              <StyledColors>
+              <HvTypography className={classes.groupName} variant="title2">
+                {group}
+              </HvTypography>
+              <div className={classes.colors}>
                 {Object.values(themeColors[selectedTheme][group]).map(
                   (color, idx) => (
                     <React.Fragment key={color as string}>
@@ -62,46 +83,50 @@ const ColorsGroup = ({
                               : "",
                         }}
                       />
-                      <StyledColorContainer>
-                        <StyledColorSquare
+                      <div className={classes.colorContainer}>
+                        <div
+                          className={classes.colorSquare}
                           style={{
                             backgroundColor: colors.get(color as string),
                           }}
                         />
-                        <StyledColorName>
+                        <span className={classes.colorName}>
                           <HvTypography variant="label">
                             {color as string}
                           </HvTypography>
                           <HvTypography variant="caption1">
                             {colors.get(color as string)}
                           </HvTypography>
-                        </StyledColorName>
-                      </StyledColorContainer>
+                        </span>
+                      </div>
                     </React.Fragment>
                   ),
                 )}
-              </StyledColors>
+              </div>
             </div>
-          </StyledGroup>
+          </div>
         </div>
       ))}
-      <StyledGroup>
-        <StyledGroupName variant="title2">Shadow</StyledGroupName>
-        <StyledColorContainer>
-          <StyledColorSquare
+      <div className={classes.group}>
+        <HvTypography className={classes.groupName} variant="title2">
+          Shadow
+        </HvTypography>
+        <div className={classes.colorContainer}>
+          <div
+            className={classes.colorSquare}
             style={{
               backgroundColor: theme.colors.atmo1,
               boxShadow: theme.colors.shadow,
             }}
           />
-          <StyledColorName>
+          <span className={classes.colorName}>
             <HvTypography variant="label">Shadow</HvTypography>
             <HvTypography variant="caption1">
               {colors.get("shadow")}
             </HvTypography>
-          </StyledColorName>
-        </StyledColorContainer>
-      </StyledGroup>
+          </span>
+        </div>
+      </div>
     </div>
   );
 };

docs/foundation/colors/themeColors.ts

@@ -1,4 +1,4 @@
-export const themeColors = {
+export const themeColors: Record<string, Record<string, string[]>> = {
   ds3: {
     Base: ["base_light", "base_dark"],
     Accent: ["secondary", "primary", "primary_80", "secondary_60", "brand"],

docs/guides/dnd/Vanilla/Vanilla.tsx

@@ -3,6 +3,7 @@ import { cx } from "@emotion/css";
 import {
   HvListContainer,
   HvListItem,
+  HvListItemProps,
   HvTypography,
 } from "@hitachivantara/uikit-react-core";
 import { Drag } from "@hitachivantara/uikit-react-icons";
@@ -15,23 +16,25 @@ export const Vanilla = () => {
   const [items, setItems] = useState<Item[]>(sampleItems.filter((i) => i.id));
   const [draggedItem, setDraggedItem] = useState<Item>();
   const [dragging, setDragging] = useState(false);
-  const [draggedOverIndex, setDraggedOverIndex] = useState(null);
+  const [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(null);
 
-  const onDragStart = (event) => {
-    const draggedIndex = items?.findIndex((i) => i.id === event.target.id);
+  const onDragStart: HvListItemProps["onDragStart"] = (event) => {
+    const draggedIndex = items?.findIndex(
+      (i) => i.id === (event.target as any).id,
+    );
     if (draggedIndex === -1) return;
     setDragging(true);
     setDraggedItem(items[draggedIndex]);
   };
 
-  const onDragEnd = (event) => {
+  const onDragEnd: HvListItemProps["onDragEnd"] = (event) => {
     event.preventDefault();
     setDraggedItem(undefined);
     setDragging(false);
     setDraggedOverIndex(null);
   };
 
-  const onDragOver = (event, index) => {
+  const onDragOver = (event: React.DragEvent<HTMLLIElement>, index: number) => {
     event.preventDefault();
     setDraggedOverIndex(index);
   };
@@ -40,7 +43,7 @@ export const Vanilla = () => {
     setDraggedOverIndex(null);
   };
 
-  const onDrop = (event) => {
+  const onDrop: HvListItemProps["onDrop"] = (event) => {
     event.preventDefault();
 
     setDraggedOverIndex(null);

docs/guides/forms/Formik.tsx

@@ -34,12 +34,12 @@ export default () => (
         setFieldTouched,
       } = props;
 
-      const parseStatus = (name) => {
+      const parseStatus = (name: keyof typeof values) => {
         return errors[name] && touched[name] ? "invalid" : "valid";
       };
 
-      const parseStatusMessage = (name) => {
-        return errors[name] && touched[name] ? errors[name] : "";
+      const parseStatusMessage = (name: keyof typeof values) => {
+        return errors[name] && touched[name] ? (errors[name] as string) : "";
       };
 
       const dropdownValues = useMemo(

docs/guides/layout/utils.ts

@@ -4,12 +4,14 @@ export const getBreakpoints = () => {
   const gutters = { xs: 16, sm: 16, md: 32, lg: 32, xl: 32 };
   const columns = { xs: 4, sm: 8, md: 12, lg: 12, xl: 12 };
 
-  return Object.entries(ds5.breakpoints.values).reduce((acc, curr) => {
+  return Object.entries(ds5.breakpoints.values).reduce<
+    Record<string, { value: number; gutter: number; column: number }>
+  >((acc, curr) => {
     const [key, value] = curr;
     acc[key] = {
       value,
-      gutter: gutters[key],
-      column: columns[key],
+      gutter: gutters[key as keyof typeof gutters],
+      column: columns[key as keyof typeof columns],
     };
     return acc;
   }, {});