[LDS-9] remake custom chip component and story

packages/design-system/src/components/Chip/Chip.styled.ts

@@ -1,26 +1,13 @@
 import { Chip as MuiChip, styled } from "@mui/material";
-import { CHIP_COLORS } from "./consts";
+import { CHIP_COLORS, COMMON_STYLES } from "./consts";
 
-import type { StyledChipProps } from "./Chip.types";
+import type { ChipProps } from "@mui/material";
 
 export const StyledOutlinedChip = styled(MuiChip, {
   shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
-})<StyledChipProps>(({ theme, color }) => ({
-  "&.MuiChip-root": {
-    height: "22px",
-  },
-  "& .MuiChip-label": {
-    height: "16px",
-    fontStyle: "normal",
-    fontWeight: 500,
-    fontSize: "12px",
-    lineHeight: "14.32px",
-    display: "flex",
-    alignItems: "center",
-    textAlign: "center",
-    padding: 0,
-    marginInline: "8px",
-  },
+})<ChipProps>(({ theme, color }) => ({
+  ...COMMON_STYLES,
+
   color:
     color === CHIP_COLORS.PRIMARY
       ? theme.palette.token.component.chip_primary
@@ -49,27 +36,9 @@ export const StyledOutlinedChip = styled(MuiChip, {
 
 export const StyledContainedChip = styled(MuiChip, {
   shouldForwardProp: (prop) => !["color"].includes(prop.toString()),
-})<StyledChipProps>(({ theme, color, thumbnail, onDelete }) => ({
-  "&.MuiChip-root": {
-    height: "22px",
-  },
-  "& .MuiChip-label": {
-    height: "16px",
-    fontStyle: "normal",
-    fontWeight: 500,
-    fontSize: "12px",
-    lineHeight: "14.32px",
-    display: "flex",
-    alignItems: "center",
-    textAlign: "center",
-    padding: 0,
-    marginLeft: thumbnail ? "4px" : "8px",
-    marginRight: onDelete ? "4px" : "8px",
-  },
-  "& .MuiChip-deleteIcon": {
-    marginLeft: 0,
-    marginRight: "3px",
-  },
+})<ChipProps>(() => ({ theme, color }) => ({
+  ...COMMON_STYLES,
+
   color: theme.palette.token.core.text_normal,
   backgroundColor:
     color === CHIP_COLORS.PRIMARY
@@ -83,8 +52,41 @@ export const StyledContainedChip = styled(MuiChip, {
       : color === CHIP_COLORS.SUCCESS
       ? theme.palette.token.component.chip_success_bg
       : theme.palette.token.component.chip_primary_bg,
-  "&:hover": {
-    backgroundColor:
+
+  "& .MuiSvgIcon-root": {
+    marginBlock: "3px",
+    marginLeft: "3px",
+    marginRight: "4px",
+    height: "16px",
+    width: "16px",
+    color:
+      color === CHIP_COLORS.PRIMARY
+        ? theme.palette.token.component.chip_primary
+        : color === CHIP_COLORS.SECONDARY
+        ? theme.palette.token.component.chip_secondary
+        : color === CHIP_COLORS.ERROR
+        ? theme.palette.token.component.chip_error
+        : color === CHIP_COLORS.WARNING
+        ? theme.palette.token.component.chip_warning
+        : color === CHIP_COLORS.SUCCESS
+        ? theme.palette.token.component.chip_success
+        : theme.palette.token.component.chip_primary,
+  },
+  "& .MuiChip-avatar": {
+    marginBlock: "3px",
+    marginLeft: "4px",
+    marginRight: "5px",
+    height: "14px",
+    width: "14px",
+    fontSize: "11px",
+    fontWeight: 500,
+    lineHeight: "16px",
+    display: "flex",
+    textAlign: "center",
+    alignItems: "center",
+    // TODO: Currently, the color names of Figma and Design system's color component's name don't match
+    // Need to be Fixed after the color system is completed
+    color:
       color === CHIP_COLORS.PRIMARY
         ? theme.palette.token.component.chip_primary_bg
         : color === CHIP_COLORS.SECONDARY
@@ -96,13 +98,7 @@ export const StyledContainedChip = styled(MuiChip, {
         : color === CHIP_COLORS.SUCCESS
         ? theme.palette.token.component.chip_success_bg
         : theme.palette.token.component.chip_primary_bg,
-  },
-  "& .MuiSvgIcon-root": {
-    height: "16px",
-    width: "16px",
-    marginTop: 3,
-    marginBottom: 3,
-    color:
+    backgroundColor:
       color === CHIP_COLORS.PRIMARY
         ? theme.palette.token.component.chip_primary
         : color === CHIP_COLORS.SECONDARY
@@ -115,8 +111,13 @@ export const StyledContainedChip = styled(MuiChip, {
         ? theme.palette.token.component.chip_success
         : theme.palette.token.component.chip_primary,
   },
-  "& .MuiChip-icon": {
-    marginLeft: "3px",
-    marginRight: 0,
+
+  "& .MuiChip-deleteIcon": {
+    marginLeft: "4px",
+    marginRight: "3px",
+  },
+  "& .MuiChip-deleteIcon:hover": {
+    // TODO: Below is a temporary color until the hover color is completed in our Design system
+    color: theme.palette.token.core.hover,
   },
 }));

packages/design-system/src/components/Chip/Chip.tsx

@@ -1,53 +1,123 @@
 import React from "react";
-import { Close, Avatar, LunitLogo } from "@lunit/design-system-icons";
+import { Avatar } from "@mui/material";
+import { Close16 } from "@lunit/design-system-icons";
 import { StyledOutlinedChip, StyledContainedChip } from "./Chip.styled";
+import { useTheme } from "@mui/material/styles";
 
 import type {
   OutlinedChipProps,
-  ContainedChipProps,
+  ReadOnlyContainedChipProps,
+  EnableContainedChipProps,
+  DeletableContainedChipProps,
   ChipProps,
+  ChipThumbnail,
 } from "./Chip.types";
 
+const Chip = (props: ChipProps) => {
+  const { kind, onDelete, onClick, ...restProps } = props;
+  if (kind === "outlined") return <OutlinedChip {...props} />;
+  else if (onClick) return <EnableContainedChip {...props} />;
+  else if (onDelete) return <DeletableContainedChip {...props} />;
+
+  return <ReadOnlyContainedChip {...restProps} />;
+};
+
 const OutlinedChip = (props: OutlinedChipProps) => {
-  const { label, color, sx } = props;
+  const { color = "primary", ...restProps } = props;
+
   return (
     <StyledOutlinedChip
-      label={label}
+      {...restProps}
       variant="outlined"
       disabled
       color={color}
-      sx={{ ...sx }}
     />
   );
 };
 
-const ContainedChip = (props: ContainedChipProps) => {
-  const { label, onClick, onDelete, thumbnail, color, sx } = props;
+const getAvatar = (thumbnail: ChipThumbnail | undefined) => {
+  if (!thumbnail || typeof thumbnail !== "string") return;
+  if (thumbnail.length === 0) return <Avatar />;
+  return <Avatar>{thumbnail.slice(0, 1).toLocaleUpperCase()}</Avatar>;
+};
+const getIcon = (thumbnail: ChipThumbnail | undefined) => {
+  if (thumbnail && typeof thumbnail !== "string") return thumbnail;
+  return undefined;
+};
+const getLabelMargin = (
+  thumbnail: ChipThumbnail | undefined,
+  deletable?: boolean
+) => {
+  return {
+    marginLeft: thumbnail ? "0px" : "8px",
+    marginRight: deletable ? "0px" : "8px",
+  };
+};
+
+const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
+  const { color = "primary", thumbnail, sx, ...restProps } = props;
 
   return (
     <StyledContainedChip
-      label={label}
+      {...restProps}
+      disabled
+      avatar={getAvatar(thumbnail)}
+      icon={getIcon(thumbnail)}
+      color={color}
+      sx={{
+        "& .MuiChip-label": {
+          ...getLabelMargin(thumbnail),
+        },
+        ...sx,
+      }}
+    />
+  );
+};
+
+const EnableContainedChip = (props: EnableContainedChipProps) => {
+  const { color = "primary", thumbnail, onClick, sx, ...restProps } = props;
+  const theme = useTheme();
+
+  return (
+    <StyledContainedChip
+      {...restProps}
       onClick={onClick}
-      onDelete={onDelete}
-      deleteIcon={<Close />}
-      icon={
-        thumbnail === "avatar" ? (
-          <Avatar variant="filled" color={color} />
-        ) : thumbnail === "logo" ? (
-          <LunitLogo color={color} />
-        ) : thumbnail ? (
-          thumbnail
-        ) : undefined
-      }
+      avatar={getAvatar(thumbnail)}
+      icon={getIcon(thumbnail)}
       color={color}
-      sx={{ ...sx }}
+      sx={{
+        "& .MuiChip-label": {
+          ...getLabelMargin(thumbnail),
+        },
+        "&:hover": {
+          // TODO: Below is a temporary color until the hover color is completed in our Design system
+          backgroundColor: theme.palette.token.core.hover,
+        },
+        ...sx,
+      }}
     />
   );
 };
 
-const Chip = (props: ChipProps) => {
-  if (props.style === "outlined") return <OutlinedChip {...props} />;
-  return <ContainedChip {...props} />;
+const DeletableContainedChip = (props: DeletableContainedChipProps) => {
+  const { color = "primary", thumbnail, onDelete, sx, ...restProps } = props;
+
+  return (
+    <StyledContainedChip
+      {...restProps}
+      color={color}
+      onDelete={onDelete}
+      deleteIcon={<Close16 />}
+      avatar={getAvatar(thumbnail)}
+      icon={getIcon(thumbnail)}
+      sx={{
+        "& .MuiChip-label": {
+          ...getLabelMargin(thumbnail, Boolean(onDelete)),
+        },
+        ...sx,
+      }}
+    />
+  );
 };
 
 export default Chip;

packages/design-system/src/components/Chip/Chip.types.ts

@@ -4,37 +4,53 @@ import type { ChipProps as MuiChipProps, SxProps } from "@mui/material";
 
 type ColorKeys = keyof typeof CHIP_COLORS;
 type ChipColor = typeof CHIP_COLORS[ColorKeys];
-
-export type ChipThumbnail = "logo" | "avatar" | JSX.Element;
-
-export interface BaseChipProps {
-  label: string;
-  /**
-   * @default contained
-   */
-  style?: "outlined" | "contained";
-  /**
-   * @default primary
-   */
+export type ChipThumbnail = string | JSX.Element;
+
+/**
+ * Mui Chip's variant is 'kind' in our design system
+ */
+export interface BaseChipProps
+  extends Pick<
+    MuiChipProps,
+    "label" | "sx" | "style" | "classes" | "onDelete"
+  > {
+  kind?: "outlined" | "contained";
   color?: ChipColor;
-  /**
-   * Use sx props only when you need to override the default styles
-   */
-  sx?: SxProps;
 }
 
-export interface ContainedChipProps extends BaseChipProps {
-  onClick?: () => void;
-  onDelete?: () => void;
+export interface OutlinedChipProps extends BaseChipProps {
+  kind?: "outlined";
+  onClick?: never;
+  onDelete?: never;
+}
+
+export interface BaseContainedChipProps
+  extends BaseChipProps,
+    Omit<
+      MuiChipProps,
+      "color" | "size" | "variant" | "avatar" | "deleteIcon" | "icon"
+    > {
+  kind?: "contained";
   thumbnail?: ChipThumbnail;
+  onClick?: () => void;
 }
 
-export interface OutlinedChipProps extends BaseChipProps {}
+export interface ReadOnlyContainedChipProps extends BaseContainedChipProps {
+  onClick?: never;
+  onDelete?: never;
+}
+export interface EnableContainedChipProps extends BaseContainedChipProps {
+  onClick: () => void;
+  onDelete?: never;
+}
+export interface DeletableContainedChipProps extends BaseContainedChipProps {
+  onClick?: never;
+  onDelete: () => void;
+}
 
-export type ChipProps = ContainedChipProps | OutlinedChipProps;
+export type ContainedChipProps =
+  | EnableContainedChipProps
+  | ReadOnlyContainedChipProps
+  | DeletableContainedChipProps;
 
-export interface StyledChipProps extends MuiChipProps {
-  color: MuiChipProps["color"];
-  thumbnail?: ChipThumbnail;
-  onDelete?: () => void;
-}
+export type ChipProps = OutlinedChipProps | ContainedChipProps;

packages/design-system/src/components/Chip/consts.ts

@@ -5,3 +5,26 @@ export const CHIP_COLORS = {
   WARNING: "warning",
   SUCCESS: "success",
 } as const;
+
+export const COMMON_STYLES = {
+  "&.MuiChip-root": {
+    height: "22px",
+    width: "auto",
+    minWidth: "22px",
+  },
+  "&.Mui-disabled": {
+    opacity: 1,
+  },
+  "& .MuiChip-label": {
+    height: "16px",
+    fontStyle: "normal",
+    fontWeight: 500,
+    fontSize: "12px",
+    lineHeight: "16px",
+    display: "flex",
+    alignItems: "center",
+    textAlign: "center",
+    padding: 0,
+    marginInline: "8px",
+  },
+};