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 ;
}