[Package]: migrate ProfileChipList to TypeScript

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: {
@@ -12,13 +13,13 @@ 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) {
+export default function Chip({ className, label, title, disabled }: ChipProps): ReactElement {
   const classes = useStyles();
   return (
     <MUIChip

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();
 

packages/ui/src/components/ProfileHeader/ProfileChipList.jsx → packages/ui/src/components/ProfileHeader/ProfileChipList.tsx

@@ -1,21 +1,34 @@
-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]}`,
     color: theme.palette.text.primary,
   },
 }));
 
-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 <Skeleton count={1} />;
+  if (inline && loading) return <Skeleton />;
 
   if (!children || children.length === 0) return null;
 
@@ -26,12 +39,12 @@ function ChipList({ children, title, loading = false, inline }) {
         {inline ? ": " : ""}
       </Typography>
       {loading ? (
-        <Skeleton count={1} />
+        <Skeleton />
       ) : (
         <LongList
           terms={children}
           maxTerms={10}
-          render={item => {
+          render={(item: ChipListItem | string) => {
             if (_.isString(item)) {
               return <Chip key={item} label={item} title={item} />;
             }
@@ -48,7 +61,6 @@ function ChipList({ children, title, loading = false, inline }) {
               </Tooltip>
             );
           }}
-          size="small"
         />
       )}
     </Box>