Merge pull request #138 from lunit-io/ds-83-component-prop

[DS-83] Chip component prop 적용 및 Button component prop 개선
lunit-io · Oct 30, 2023 · dacc00f · dacc00f
2 parents c65ad00 + f208851
commit dacc00f
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 26 deletions.
diff --git a/packages/design-system/src/components/Button/Button.styled.ts b/packages/design-system/src/components/Button/Button.styled.ts
@@ -11,11 +11,11 @@ import type { ButtonProps } from "./Button.types";
 import type { ToggleButtonProps } from "../ToggleButton/ToggleButton.types";
 import type { Typography } from "@mui/material/styles/createTypography";
 
-type KindStyleParams = Pick<ButtonProps<"button">, "kind" | "color"> & {
+type KindStyleParams = Pick<ButtonProps, "kind" | "color"> & {
   lunit_token: ColorToken;
 };
 
-type CustomButtonProps = ButtonProps<"button"> & { hasIconOnly: boolean };
+type CustomButtonProps = ButtonProps & { hasIconOnly: boolean };
 
 type sizeStyleParams = Pick<
   CustomButtonProps,

diff --git a/packages/design-system/src/components/Button/Button.tsx b/packages/design-system/src/components/Button/Button.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 import { CustomButton } from "./Button.styled";
 
-import type { ButtonProps } from "./Button.types";
+import type { ButtonType, ButtonProps } from "./Button.types";
 
-const Button = <C extends React.ElementType>(props: ButtonProps<C>) => {
+const Button: ButtonType = (props: ButtonProps) => {
   const {
     size = "small",
     color = "primary",

diff --git a/packages/design-system/src/components/Button/Button.types.ts b/packages/design-system/src/components/Button/Button.types.ts
@@ -1,30 +1,43 @@
-import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import type {
+  ButtonProps as MuiButtonProps,
+  ButtonTypeMap as MuiButtonTypeMap,
+} from "@mui/material";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
 /**
  * TODO: Omit 을 사용할 경우 component prop 타입 추론이 안되는 이슈 발생
  * https://github.com/lunit-io/design-system/pull/133#discussion_r1354277785
  * */
-type BaseButtonProps<C extends React.ElementType> = Omit<
-  MuiButtonProps<C, { component?: C }>,
-  "variant"
-> & { icon?: React.ReactNode };
+interface BaseButtonProps extends Omit<MuiButtonProps, "variant"> {
+  icon?: React.ReactNode;
+}
 
-type ContainedButtonProps<C extends React.ElementType> = BaseButtonProps<C> & {
+interface ContainedButtonProps extends BaseButtonProps {
   kind?: "contained";
   color?: "primary" | "secondary" | "error";
-};
+}
 
-type GhostButtonProps<C extends React.ElementType> = BaseButtonProps<C> & {
+interface GhostButtonProps extends BaseButtonProps {
   kind?: "ghost";
   color?: "primary" | "secondary" | "error";
-};
+}
 
-type OutlinedButtonProps<C extends React.ElementType> = BaseButtonProps<C> & {
+interface OutlinedButtonProps extends BaseButtonProps {
   kind?: "outlined";
   color?: "primary" | "secondary";
+}
+
+export type ButtonProps =
+  | ContainedButtonProps
+  | GhostButtonProps
+  | OutlinedButtonProps;
+
+export type ButtonTypeMap<
+  P = {},
+  D extends React.ElementType = MuiButtonTypeMap["defaultComponent"]
+> = {
+  props: P & ButtonProps;
+  defaultComponent: D;
 };
 
-export type ButtonProps<C extends React.ElementType> =
-  | ContainedButtonProps<C>
-  | GhostButtonProps<C>
-  | OutlinedButtonProps<C>;
+export type ButtonType = OverridableComponent<ButtonTypeMap>;
diff --git a/packages/design-system/src/components/Button/utils/getButtonPaddingBySizeAndKind.ts b/packages/design-system/src/components/Button/utils/getButtonPaddingBySizeAndKind.ts
@@ -3,10 +3,7 @@ import { OUTLINED_BORDER_WIDTH } from "../const";
 import type { ButtonProps } from "../Button.types";
 import { ToggleButtonProps } from "@/components/ToggleButton/ToggleButton.types";
 
-type GetButtonPaddingBySizeAndKindParams = Pick<
-  ButtonProps<"button">,
-  "kind" | "size"
-> &
+type GetButtonPaddingBySizeAndKindParams = Pick<ButtonProps, "kind" | "size"> &
   Pick<ToggleButtonProps, "selected">;
 
 /**

diff --git a/packages/design-system/src/components/Button/utils/getIconButtonPaddingBySizeAndKind.ts b/packages/design-system/src/components/Button/utils/getIconButtonPaddingBySizeAndKind.ts
@@ -4,7 +4,7 @@ import type { ButtonProps } from "../Button.types";
 import { ToggleButtonProps } from "@/components/ToggleButton/ToggleButton.types";
 
 type GetIconButtonPaddingBySizeAndKindProps = Pick<
-  ButtonProps<"button">,
+  ButtonProps,
   "kind" | "size"
 > &
   Pick<ToggleButtonProps, "selected">;

diff --git a/packages/design-system/src/components/Chip/Chip.tsx b/packages/design-system/src/components/Chip/Chip.tsx
@@ -14,10 +14,11 @@ import type {
   EnableContainedChipProps,
   DeletableContainedChipProps,
   ChipProps,
+  ChipType,
   ChipThumbnail,
 } from "./Chip.types";
 
-const Chip = (props: ChipProps) => {
+const Chip: ChipType = (props: ChipProps) => {
   const { kind, onDelete, onClick, ...restProps } = props;
   if (kind === "outlined") return <OutlinedChip {...props} />;
   else if (onClick) return <EnableContainedChip {...props} />;
@@ -82,7 +83,14 @@ const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
 };
 
 const EnableContainedChip = (props: EnableContainedChipProps) => {
-  const { color = "primary", thumbnail, onClick, sx, ...restProps } = props;
+  const {
+    color = "primary",
+    thumbnail,
+    onDelete,
+    onClick,
+    sx,
+    ...restProps
+  } = props;
 
   return (
     <StyledContainedChipEnable

diff --git a/packages/design-system/src/components/Chip/Chip.types.ts b/packages/design-system/src/components/Chip/Chip.types.ts
@@ -1,6 +1,10 @@
 import { CHIP_COLORS } from "./consts";
 
-import type { ChipProps as MuiChipProps } from "@mui/material";
+import type {
+  ChipProps as MuiChipProps,
+  ChipTypeMap as MuiChipTypeMap,
+} from "@mui/material";
+import type { OverridableComponent } from "@mui/material/OverridableComponent";
 
 type ColorKeys = keyof typeof CHIP_COLORS;
 export type ChipColor = (typeof CHIP_COLORS)[ColorKeys];
@@ -54,3 +58,13 @@ export type ContainedChipProps =
   | DeletableContainedChipProps;
 
 export type ChipProps = OutlinedChipProps | ContainedChipProps;
+
+export type ChipTypeMap<
+  P = {},
+  D extends React.ElementType = MuiChipTypeMap["defaultComponent"]
+> = {
+  props: P & ChipProps;
+  defaultComponent: D;
+};
+
+export type ChipType = OverridableComponent<ChipTypeMap>;