From ae31b37ac8ba0c33eacea289f12d6a6e286a04d7 Mon Sep 17 00:00:00 2001 From: raskolnikov-rodion <22417165+raskolnikov-rodion@users.noreply.github.com> Date: Fri, 11 Oct 2024 08:56:09 +0100 Subject: [PATCH 1/5] [Package]: mark ChipProps properties as optional --- packages/ui/src/components/Chip.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/Chip.tsx b/packages/ui/src/components/Chip.tsx index 29dc9e535..1445905d3 100644 --- a/packages/ui/src/components/Chip.tsx +++ b/packages/ui/src/components/Chip.tsx @@ -12,10 +12,10 @@ const useStyles = makeStyles({ }); type ChipProps = { - className: string; - disabled: boolean; + className?: string; + disabled?: boolean; label: string; - title: string; + title?: string; }; export default function Chip({ className, label, title, disabled }: ChipProps) { From c195682bc4893c46a3c4b05593699a59b17d9c09 Mon Sep 17 00:00:00 2001 From: raskolnikov-rodion <22417165+raskolnikov-rodion@users.noreply.github.com> Date: Fri, 11 Oct 2024 08:59:37 +0100 Subject: [PATCH 2/5] [Package]: improve typings in LongList --- packages/ui/src/components/LongList.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/LongList.tsx b/packages/ui/src/components/LongList.tsx index fc4ee4db7..4792cbad8 100644 --- a/packages/ui/src/components/LongList.tsx +++ b/packages/ui/src/components/LongList.tsx @@ -1,8 +1,8 @@ -import { useState } from "react"; -import { Typography } from "@mui/material"; +import { ReactNode, useState } from "react"; +import { Typography, Theme } from "@mui/material"; import { makeStyles } from "@mui/styles"; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme: Theme) => ({ showMore: { whiteSpace: "nowrap", }, @@ -13,12 +13,12 @@ const useStyles = makeStyles(theme => ({ })); type LongListProps = { - terms: string[]; - render: () => JSX.Element; maxTerms?: number; + render: (item?: any, index?: number) => ReactNode; + terms: any[]; }; -function LongList({ terms, render, maxTerms = 10 }: LongListProps) { +function LongList({ terms, render, maxTerms = 10 }: LongListProps): ReactNode { const [showMore, setShowMore] = useState(false); const classes = useStyles(); From 6d472fdbc318f335c31f9d75986475d304cfa1fa Mon Sep 17 00:00:00 2001 From: raskolnikov-rodion <22417165+raskolnikov-rodion@users.noreply.github.com> Date: Fri, 11 Oct 2024 09:00:38 +0100 Subject: [PATCH 3/5] [Package]: migrate ProfileChipList to TypeScript --- ...rofileChipList.jsx => ProfileChipList.tsx} | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) rename packages/ui/src/components/ProfileHeader/{ProfileChipList.jsx => ProfileChipList.tsx} (68%) diff --git a/packages/ui/src/components/ProfileHeader/ProfileChipList.jsx b/packages/ui/src/components/ProfileHeader/ProfileChipList.tsx similarity index 68% rename from packages/ui/src/components/ProfileHeader/ProfileChipList.jsx rename to packages/ui/src/components/ProfileHeader/ProfileChipList.tsx index ef47f8c04..f8ab6a538 100644 --- a/packages/ui/src/components/ProfileHeader/ProfileChipList.jsx +++ b/packages/ui/src/components/ProfileHeader/ProfileChipList.tsx @@ -1,11 +1,12 @@ -import { Box, Skeleton, Typography, Tooltip } from "@mui/material"; +import { Box, Skeleton, Typography, Tooltip, Theme } from "@mui/material"; import { makeStyles } from "@mui/styles"; +import { ReactNode } from "react"; import _ from "lodash"; import Chip from "../Chip"; import LongList from "../LongList"; -const useContainerStyles = makeStyles(theme => ({ +const useContainerStyles = makeStyles((theme: Theme) => ({ tooltip: { backgroundColor: theme.palette.background.paper, border: `1px solid ${theme.palette.grey[300]}`, @@ -13,9 +14,21 @@ const useContainerStyles = makeStyles(theme => ({ }, })); -function ChipList({ children, title, loading = false, inline }) { +type ChipListItem = { + label: string; + tooltip: string; +}; + +type ChipListProps = { + children?: ChipListItem[] | string[]; + inline?: boolean; + loading: boolean; + title: string; +}; + +function ChipList({ children, title, loading = false, inline }: ChipListProps): ReactNode { const classes = useContainerStyles(); - if (inline && loading) return ; + if (inline && loading) return ; if (!children || children.length === 0) return null; @@ -26,12 +39,12 @@ function ChipList({ children, title, loading = false, inline }) { {inline ? ": " : ""} {loading ? ( - + ) : ( { + render={(item: ChipListItem) => { if (_.isString(item)) { return ; } @@ -48,7 +61,6 @@ function ChipList({ children, title, loading = false, inline }) { ); }} - size="small" /> )} From 862559113de638e24280d3deb37e88467e64cc4f Mon Sep 17 00:00:00 2001 From: raskolnikov-rodion <22417165+raskolnikov-rodion@users.noreply.github.com> Date: Fri, 11 Oct 2024 09:09:46 +0100 Subject: [PATCH 4/5] [Package]: improve typing in Chip --- packages/ui/src/components/Chip.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/Chip.tsx b/packages/ui/src/components/Chip.tsx index 1445905d3..c273aa8bf 100644 --- a/packages/ui/src/components/Chip.tsx +++ b/packages/ui/src/components/Chip.tsx @@ -1,6 +1,7 @@ import classNames from "classnames"; import { makeStyles } from "@mui/styles"; import { Chip as MUIChip } from "@mui/material"; +import { ReactElement } from "react"; const useStyles = makeStyles({ chip: { @@ -18,7 +19,7 @@ type ChipProps = { title?: string; }; -export default function Chip({ className, label, title, disabled }: ChipProps) { +export default function Chip({ className, label, title, disabled }: ChipProps): ReactElement { const classes = useStyles(); return ( Date: Fri, 11 Oct 2024 09:12:31 +0100 Subject: [PATCH 5/5] [Package]: fix typing in ProfileChipList render function --- packages/ui/src/components/ProfileHeader/ProfileChipList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/ProfileHeader/ProfileChipList.tsx b/packages/ui/src/components/ProfileHeader/ProfileChipList.tsx index f8ab6a538..0f14423ed 100644 --- a/packages/ui/src/components/ProfileHeader/ProfileChipList.tsx +++ b/packages/ui/src/components/ProfileHeader/ProfileChipList.tsx @@ -44,7 +44,7 @@ function ChipList({ children, title, loading = false, inline }: ChipListProps): { + render={(item: ChipListItem | string) => { if (_.isString(item)) { return ; }