From 1a6e6d0481785800ea8d8d5a1103060b8dd67eb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rcia=20Esteves?= <43220251+MEsteves22@users.noreply.github.com> Date: Mon, 22 Jul 2024 20:49:08 +0100 Subject: [PATCH] chore: noImplicitAny TS rule enabled and errors fixed (#4235) --- .storybook/addons/theme-selector/utils.ts | 4 +- .storybook/blocks/DocsContainer.tsx | 10 +- .storybook/decorators/ThemeDecorator.tsx | 4 +- apps/docs/theme.config.tsx | 5 +- docs/foundation/Icons/Library.tsx | 33 +++++-- docs/foundation/colors/Colors.stories.tsx | 79 ++++++++++----- docs/foundation/colors/Colors.styles.tsx | 36 ------- docs/foundation/colors/themeColors.ts | 2 +- docs/guides/dnd/Vanilla/Vanilla.tsx | 15 +-- docs/guides/forms/Formik.tsx | 6 +- docs/guides/layout/utils.ts | 8 +- docs/guides/styling/Styling.stories.tsx | 3 +- docs/guides/theming/ThemeStructure.tsx | 36 +++++-- docs/guides/theming/WhiteLabeling.tsx | 6 +- docs/templates/TemplateItem.tsx | 10 +- package-lock.json | 20 ++++ .../src/templates/AssetInventory/CardView.tsx | 11 ++- .../cli/src/templates/AssetInventory/data.tsx | 23 +++-- .../AssetInventory/usePaginationData.ts | 41 ++++---- .../cli/src/templates/Canvas/ListView.tsx | 4 +- packages/cli/src/templates/Canvas/Node.tsx | 4 +- packages/cli/src/templates/Canvas/index.tsx | 5 +- .../src/templates/DetailsView/Properties.tsx | 5 +- .../DetailsView/usePaginationData.ts | 46 +++++---- packages/cli/src/templates/ListView/data.tsx | 5 +- .../templates/ListView/usePaginationData.ts | 41 ++++---- packages/core/package.json | 1 + packages/core/src/AvatarGroup/AvatarGroup.tsx | 12 ++- packages/core/src/Button/Button.styles.ts | 23 ++++- packages/core/src/Button/Button.tsx | 4 +- packages/core/src/Card/Card.tsx | 9 +- packages/core/src/Dialog/Dialog.tsx | 11 ++- .../core/src/DropDownMenu/DropDownMenu.tsx | 26 +++-- packages/core/src/Focus/Focus.tsx | 63 ++++++++---- .../FormElement/context/FormElementContext.ts | 9 +- .../context/FormElementDescriptorsContext.ts | 8 +- .../src/Forms/FormElement/utils/FormUtils.ts | 55 +++++++---- packages/core/src/Grid/Grid.tsx | 11 ++- packages/core/src/List/List.tsx | 31 ++++-- .../ListContainer/ListContainer.stories.tsx | 16 +-- .../src/ListContainer/ListItem/ListItem.tsx | 12 ++- packages/core/src/Loading/Loading.tsx | 2 +- .../src/LoadingContainer/LoadingContainer.tsx | 7 +- packages/core/src/MultiButton/MultiButton.tsx | 4 +- .../Rule/Value/NumericValue/NumericValue.tsx | 11 ++- .../QueryBuilder/stories/CustomRenderers.tsx | 12 ++- .../src/QueryBuilder/stories/queryToMongo.tsx | 35 ++++--- .../core/src/QueryBuilder/stories/utils.tsx | 53 +++++++--- .../core/src/QueryBuilder/utils/index.tsx | 4 +- .../core/src/QueryBuilder/utils/reducer.tsx | 5 +- .../Horizontal/ScrollToHorizontal.tsx | 1 + .../ScrollTo/Vertical/ScrollToVertical.tsx | 1 + .../core/src/SimpleGrid/SimpleGrid.styles.tsx | 4 +- packages/core/src/Slider/Slider.stories.tsx | 2 +- packages/core/src/Snackbar/Snackbar.tsx | 4 +- packages/core/src/Stack/Stack.tsx | 2 +- .../core/src/Table/TableCell/TableCell.tsx | 9 +- .../src/Table/TableHeader/TableHeader.tsx | 14 ++- packages/core/src/Table/TableRow/TableRow.tsx | 2 +- .../core/src/Table/hooks/useBulkActions.ts | 4 +- .../core/src/Table/hooks/useHeaderGroups.ts | 20 ++-- .../core/src/Table/hooks/usePagination.ts | 4 +- .../core/src/Table/hooks/useResizeColumns.ts | 6 +- .../core/src/Table/hooks/useRowExpand.tsx | 12 ++- .../core/src/Table/hooks/useRowSelection.tsx | 86 +++++++++------- packages/core/src/Table/hooks/useSortBy.ts | 8 +- packages/core/src/Table/hooks/useSticky.ts | 31 +++--- .../core/src/Table/hooks/useTableStyles.ts | 8 +- .../stories/TableComplete/TableComplete.tsx | 2 +- .../TableComplete/TableCompleteSample.tsx | 7 +- .../stories/TableHooks/AlternativeLayout.tsx | 15 ++- .../stories/TableHooks/UseHvBulkActions.tsx | 3 +- .../TableHooks/UseHvRowSelectionLocked.tsx | 3 +- .../Table/stories/TableHooks/UseHvSortBy.tsx | 3 +- .../stories/TableSamples/ResponsiveTable.tsx | 4 +- .../TableSection/CompleteTableSection.tsx | 3 +- .../stories/TableSection/TableEditable.tsx | 24 ++--- .../stories/TableSection/TableSettings.tsx | 30 ++++-- .../core/src/Table/stories/storiesUtils.tsx | 9 +- packages/core/src/TagsInput/TagsInput.tsx | 98 +++++++++++-------- packages/core/src/TimePicker/Placeholder.tsx | 12 ++- packages/core/src/TimePicker/TimePicker.tsx | 4 +- .../Navigation/Navigation.tsx | 18 ++-- .../utils/NavigationSlider.utils.tsx | 18 ++-- .../VerticalNavigation/TreeView/TreeView.tsx | 55 ++++++----- .../TreeView/TreeViewContext.tsx | 14 +-- .../TreeView/TreeViewItem.tsx | 14 +-- .../utils/NodeTreeExpand.utils.test.tsx | 2 +- .../TreeView/utils/NodeTreeExpandUtils.tsx | 17 ++-- .../TreeView/utils/NodeTreeMap.utils.test.tsx | 2 +- .../TreeView/utils/NodeTreeMapUtils.tsx | 13 ++- .../utils/NodeTreeNavigation.utils.test.tsx | 16 +-- .../utils/NodeTreeNavigationUtils.tsx | 26 +++-- .../VerticalNavigation.stories.tsx | 13 ++- .../VerticalNavigation/VerticalNavigation.tsx | 2 +- .../VerticalNavigationContext.tsx | 8 +- packages/core/src/hocs/withTooltip.tsx | 2 +- packages/core/src/hooks/useComputation.ts | 2 +- packages/core/src/hooks/useForkRef.ts | 6 +- packages/core/src/utils/classes.ts | 6 +- packages/core/src/utils/deepMerge.ts | 5 +- packages/core/src/utils/helpers.ts | 5 +- packages/core/src/utils/theme.ts | 1 + packages/icons/lib/IconBase.tsx | 3 +- packages/icons/package.json | 1 + packages/icons/scripts/generateComponent.ts | 4 +- packages/icons/scripts/svgToReact.ts | 10 +- packages/lab/src/Flow/Flow.test.tsx | 10 +- .../lab/src/Flow/stories/CustomDrop/data.ts | 2 +- .../src/Flow/stories/DynamicHandles/Asset.tsx | 9 +- .../src/Flow/stories/DynamicHandles/index.tsx | 2 +- .../Flow/stories/Visualizations/Filter.tsx | 7 +- .../DefaultNavigation/DefaultNavigation.tsx | 8 +- .../DefaultNavigation/Step/Step.tsx | 45 +++++---- .../SimpleNavigation/SimpleNavigation.tsx | 8 +- .../lab/src/StepNavigation/StepNavigation.tsx | 29 +++--- packages/lab/src/Wizard/Wizard.stories.tsx | 21 ++-- packages/lab/src/Wizard/Wizard.tsx | 11 ++- .../Wizard/WizardActions/WizardActions.tsx | 5 +- .../WizardContainer/WizardContainer.tsx | 5 +- .../Wizard/WizardContent/WizardContent.tsx | 59 ++++++----- .../Wizard/WizardContext/WizardContext.tsx | 2 +- .../src/Wizard/WizardTitle/WizardTitle.tsx | 18 ++-- .../src/BarChart/stories/BarChart.stories.tsx | 9 +- .../viz/src/Boxplot/stories/CustomTooltip.tsx | 3 +- packages/viz/src/Boxplot/useBoxplot.tsx | 5 +- packages/viz/src/Boxplot/useBoxplotData.tsx | 6 +- packages/viz/src/ConfusionMatrix/utils.ts | 17 +++- packages/viz/src/Heatmap/Heatmap.tsx | 2 +- .../viz/src/Heatmap/stories/CustomTooltip.tsx | 2 +- .../viz/src/LineChart/LineChart.stories.tsx | 12 +-- packages/viz/src/hooks/tooltip/useTooltip.tsx | 4 +- packages/viz/src/hooks/useData.tsx | 23 +++-- packages/viz/src/hooks/useDataset.tsx | 2 +- packages/viz/src/hooks/useXAxis.tsx | 4 +- packages/viz/src/hooks/useYAxis.tsx | 4 +- .../getHvArqueroCombinedFilters.test.tsx | 2 +- packages/viz/src/utils/index.ts | 7 +- tsconfig.build.json | 2 +- 139 files changed, 1196 insertions(+), 733 deletions(-) delete mode 100644 docs/foundation/colors/Colors.styles.tsx diff --git a/.storybook/addons/theme-selector/utils.ts b/.storybook/addons/theme-selector/utils.ts index b87916a9ec..7501b36d9b 100644 --- a/.storybook/addons/theme-selector/utils.ts +++ b/.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) => { const themesList: Theme[] = []; Object.keys(themes).forEach((themeName) => { diff --git a/.storybook/blocks/DocsContainer.tsx b/.storybook/blocks/DocsContainer.tsx index 5fc50a5d6a..74b33e6017 100644 --- a/.storybook/blocks/DocsContainer.tsx +++ b/.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 = { h6: (props) => , }; -export default ({ context, children }) => { +export default ({ + context, + children, +}: { + children: React.ReactNode; + context: DocsContainerProps["context"]; +}) => { const initialMode = getInitialMode(); const [mode, setMode] = useState(initialMode); diff --git a/.storybook/decorators/ThemeDecorator.tsx b/.storybook/decorators/ThemeDecorator.tsx index 61775dbac2..30d32cb19f 100644 --- a/.storybook/decorators/ThemeDecorator.tsx +++ b/.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); diff --git a/apps/docs/theme.config.tsx b/apps/docs/theme.config.tsx index 80b9cfd240..ede80011af 100644 --- a/apps/docs/theme.config.tsx +++ b/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 }) => {children}, + main: ({ children }: { children: React.ReactNode }) => ( + {children} + ), primaryHue: 212, primarySaturation: 70, }; diff --git a/docs/foundation/Icons/Library.tsx b/docs/foundation/Icons/Library.tsx index 8f64486c2f..320540cd18 100644 --- a/docs/foundation/Icons/Library.tsx +++ b/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; + iconSize: IconSize; +}) => (
@@ -48,7 +58,13 @@ const Icon = ({ name, Component, iconSize }) => (
); -const Group = ({ iconSize, iconsLibrary }) => { +const Group = ({ + iconSize, + iconsLibrary, +}: { + iconsLibrary: Record; + iconSize: IconSize; +}) => { const keys = Array.from(new Set([...Object.keys(iconsLibrary)])).sort(); return (
@@ -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>((obj, key) => { + obj[key] = iconList[key as keyof typeof iconList]; + return obj; + }, {}); }, [search]); return ( diff --git a/docs/foundation/colors/Colors.stories.tsx b/docs/foundation/colors/Colors.stories.tsx index 2f0e4f17af..9d4665a81e 100644 --- a/docs/foundation/colors/Colors.stories.tsx +++ b/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(); 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) => (
- +
- {group} - + + {group} + +
{Object.values(themeColors[selectedTheme][group]).map( (color, idx) => ( @@ -62,46 +83,50 @@ const ColorsGroup = ({ : "", }} /> - - +
- + {color as string} {colors.get(color as string)} - - + +
), )} - +
- +
))} - - Shadow - - + + Shadow + +
+
- + Shadow {colors.get("shadow")} - - - + +
+
); }; diff --git a/docs/foundation/colors/Colors.styles.tsx b/docs/foundation/colors/Colors.styles.tsx deleted file mode 100644 index 00626d944c..0000000000 --- a/docs/foundation/colors/Colors.styles.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import styled from "@emotion/styled"; -import { HvTypography, theme } from "@hitachivantara/uikit-react-core"; - -export const StyledGroup = styled("div")({ - paddingBottom: theme.space.sm, -}); - -export const StyledGroupName = styled(HvTypography)({ - marginTop: theme.space.md, - marginBottom: theme.space.sm, -}); - -export const StyledColors = styled("div")({ - display: "flex", - flexWrap: "wrap", - alignItems: "flex-start", - flexDirection: "row", -}); - -export const StyledColorContainer = styled("div")({ - marginRight: theme.space.md, - marginBottom: theme.space.md, -}); - -export const StyledColorSquare = styled("div")({ - width: 130, - height: 130, - border: `1px solid ${theme.colors.atmo4}`, - marginBottom: theme.space.xs, -}); - -export const StyledColorName = styled("span")({ - display: "flex", - alignItems: "baseline", - flexDirection: "column", -}); diff --git a/docs/foundation/colors/themeColors.ts b/docs/foundation/colors/themeColors.ts index def7cb7d32..1e03da0030 100644 --- a/docs/foundation/colors/themeColors.ts +++ b/docs/foundation/colors/themeColors.ts @@ -1,4 +1,4 @@ -export const themeColors = { +export const themeColors: Record> = { ds3: { Base: ["base_light", "base_dark"], Accent: ["secondary", "primary", "primary_80", "secondary_60", "brand"], diff --git a/docs/guides/dnd/Vanilla/Vanilla.tsx b/docs/guides/dnd/Vanilla/Vanilla.tsx index 9bd4d7fce6..3f41de78ea 100644 --- a/docs/guides/dnd/Vanilla/Vanilla.tsx +++ b/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(sampleItems.filter((i) => i.id)); const [draggedItem, setDraggedItem] = useState(); const [dragging, setDragging] = useState(false); - const [draggedOverIndex, setDraggedOverIndex] = useState(null); + const [draggedOverIndex, setDraggedOverIndex] = useState(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, 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); diff --git a/docs/guides/forms/Formik.tsx b/docs/guides/forms/Formik.tsx index e422492f74..6dd4228f48 100644 --- a/docs/guides/forms/Formik.tsx +++ b/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( diff --git a/docs/guides/layout/utils.ts b/docs/guides/layout/utils.ts index 23c3dd07f6..4ca1899b93 100644 --- a/docs/guides/layout/utils.ts +++ b/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 + >((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; }, {}); diff --git a/docs/guides/styling/Styling.stories.tsx b/docs/guides/styling/Styling.stories.tsx index e2c1dc073e..f53cf2d316 100644 --- a/docs/guides/styling/Styling.stories.tsx +++ b/docs/guides/styling/Styling.stories.tsx @@ -13,6 +13,7 @@ import { HvSwitch, HvTab, HvTabs, + HvTabsProps, HvTypography, tabsClasses, theme, @@ -78,7 +79,7 @@ export const NestedClasses: StoryObj = { render: () => { const [value, setValue] = useState(0); - const handleChange = (_, newValue) => { + const handleChange: HvTabsProps["onChange"] = (_, newValue) => { setValue(newValue); }; diff --git a/docs/guides/theming/ThemeStructure.tsx b/docs/guides/theming/ThemeStructure.tsx index bcf96ec6aa..04f2636684 100644 --- a/docs/guides/theming/ThemeStructure.tsx +++ b/docs/guides/theming/ThemeStructure.tsx @@ -31,8 +31,14 @@ const extractName = (name: string): string => { return name.replace("ds", "Design System "); }; -const defaultThemes = [...Object.keys(themes)].map((name) => ({ - id: name, +type ThemeName = keyof typeof themes; + +const defaultThemes: { + id: ThemeName; + label: string; + selected: boolean; +}[] = [...Object.keys(themes)].map((name) => ({ + id: name as ThemeName, label: extractName(name), selected: name === "ds5" || false, })); @@ -109,7 +115,7 @@ const ThemeValue = ({ ); export const ThemeStructure = () => { - const [selectedTheme, setSelectedTheme] = useState( + const [selectedTheme, setSelectedTheme] = useState( defaultThemes.find((t) => t.selected)?.id, ); const [showComponents, setShowComponents] = useState(false); @@ -146,7 +152,7 @@ export const ThemeStructure = () => { }; const renderLevel = ( - value: object | string | number, + value: object | string | number | undefined, label: string, level: number, ): ReactElement => { @@ -168,9 +174,17 @@ export const ThemeStructure = () => { > {Object.keys(value).map((key) => { if (key === "classes") { - return renderClasses(value[key], key, level); + return renderClasses( + value[key as keyof typeof value], + key, + level, + ); } - return renderLevel(value[key], key, level + 1); + return renderLevel( + value[key as keyof typeof value], + key, + level + 1, + ); })} ); @@ -221,7 +235,7 @@ export const ThemeStructure = () => { classes={{ root: styles.dropdown }} onChange={(selected) => { const value = Array.isArray(selected) ? selected[0] : selected; - setSelectedTheme(value?.id?.toString()); + setSelectedTheme(value?.id?.toString() as ThemeName); }} values={defaultThemes} /> @@ -244,7 +258,13 @@ export const ThemeStructure = () => { .filter( (p) => (showComponents || tokens.includes(p)) && p !== "name", ) - .map((key) => renderLevel(themes[selectedTheme][key], key, 1))} + .map((key) => + renderLevel( + themes[selectedTheme][key as keyof typeof themes.ds3], + key, + 1, + ), + )} )} diff --git a/docs/guides/theming/WhiteLabeling.tsx b/docs/guides/theming/WhiteLabeling.tsx index 0d376b2c29..730e72ba15 100644 --- a/docs/guides/theming/WhiteLabeling.tsx +++ b/docs/guides/theming/WhiteLabeling.tsx @@ -8,6 +8,7 @@ import { HvHeader, HvHeaderBrand, HvHeaderNavigation, + HvHeaderNavigationProps, HvProvider, HvTypography, theme, @@ -123,7 +124,10 @@ export const WhiteLabeling = () => { const [selected, setSelected] = useState("1"); - const handleChange = (_, selectedItem) => { + const handleChange: HvHeaderNavigationProps["onClick"] = ( + _, + selectedItem, + ) => { setSelected(selectedItem.id); }; diff --git a/docs/templates/TemplateItem.tsx b/docs/templates/TemplateItem.tsx index d4b0896456..072f1245e4 100644 --- a/docs/templates/TemplateItem.tsx +++ b/docs/templates/TemplateItem.tsx @@ -11,7 +11,15 @@ const getSourceUrl = (id: string) => { return `https://github.com/lumada-design/hv-uikit-react/tree/master/packages/cli/src/templates/${key}`; }; -const TemplateItem = ({ storyId, image, href }) => { +const TemplateItem = ({ + storyId, + image, + href, +}: { + storyId: string; + image: string; + href: string; +}) => { return ( { const items = loading ? Array.from({ length: 6 }).map((_, i) => ({ - id: i, + id: String(i), name: "", eventType: "", severity: "", status: "", priority: "", image: "", + statusColor: "", })) : instance.page.map((p) => ({ ...p.original, id: p.id })); @@ -53,7 +54,7 @@ export const CardView = ({ id, instance, loading }: CardViewProps) => { return ( {