Merge pull request #648 from sungik-choi/enhance/types

src/components/Avatars/Avatar/Avatar.styled.ts

@@ -1,16 +1,16 @@
 /* Internal denpendencies */
 import { styled, css, smoothCorners } from 'Foundation'
 import { enableSmoothCorners } from 'Worklets/EnableCSSHoudini'
-import { WithInterpolation } from 'Types/InjectedInterpolation'
+import type { InterpolationProps } from 'Types/Foundation'
 import DisabledOpacity from 'Constants/DisabledOpacity'
 import { AVATAR_STATUS_GAP, AVATAR_BORDER_WIDTH, AVATAR_BORDER_RADIUS_PERCENTAGE } from 'Components/Avatars/AvatarStyle'
 import { AvatarSize } from './Avatar.types'
 
-interface AvatarWrapperProps extends WithInterpolation {
+interface AvatarWrapperProps extends InterpolationProps {
   disabled: boolean
 }
 
-interface AvatarProps extends WithInterpolation {
+interface AvatarProps extends InterpolationProps {
   size: AvatarSize
   showBorder: boolean
 }

src/components/Avatars/Avatar/Avatar.types.ts

@@ -1,6 +1,5 @@
 /* Internal dependencies */
-import { ChildrenComponentProps } from 'Types/ComponentProps'
-import InjectedInterpolation from 'Types/InjectedInterpolation'
+import type { BezierComponentProps, ChildrenProps, DisableProps, SizeProps, AdditionalStylableProps } from 'Types/ComponentProps'
 import { StatusType } from 'Components/Status'
 
 export enum AvatarSize {
@@ -14,17 +13,23 @@ export enum AvatarSize {
   Size120 = 120,
 }
 
-export default interface AvatarProps extends ChildrenComponentProps {
+type MouseEventHandler = React.MouseEventHandler<HTMLDivElement>
+
+interface AvatarOptions {
+  name: string
   avatarUrl?: string
   fallbackUrl?: string
-  name: string
-  size?: AvatarSize
-  showBorder?: boolean
   status?: StatusType
-  disabled?: boolean
-  wrapperClassName?: string
-  wrapperInterpolation?: InjectedInterpolation
-  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void
-  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void
-  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void
+  showBorder?: boolean
+  onClick?: MouseEventHandler
+  onMouseEnter?: MouseEventHandler
+  onMouseLeave?: MouseEventHandler
 }
+
+export default interface AvatarProps extends
+  BezierComponentProps,
+  ChildrenProps,
+  SizeProps<AvatarSize>,
+  DisableProps,
+  AdditionalStylableProps<'wrapper'>,
+  AvatarOptions {}

src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts

@@ -1,6 +1,6 @@
 /* Internal denpendencies */
 import { styled, smoothCorners, css } from 'Foundation'
-import { WithInterpolation } from 'Types/InjectedInterpolation'
+import { InterpolationProps } from 'Types/Foundation'
 import { AVATAR_BORDER_RADIUS_PERCENTAGE, AVATAR_GROUP_DEFAULT_SPACING } from 'Components/Avatars/AvatarStyle'
 import { Text, TextProps } from 'Components/Text'
 import { AvatarSize } from 'Components/Avatars/Avatar'
@@ -15,7 +15,7 @@ interface AvatarGroupProps {
 
 interface AvatarEllipsisCountWrapperProps extends AvatarSizeProps, AvatarGroupProps { }
 
-interface AvatarEllipsisCountProps extends AvatarSizeProps, TextProps, WithInterpolation { }
+interface AvatarEllipsisCountProps extends AvatarSizeProps, TextProps, InterpolationProps { }
 
 // TODO: 올바른 페어의 패딩 사이즈를 지정해줘야함
 function getProperEllipsisCountPaddingRight(avatarSize: AvatarSize) {
@@ -49,7 +49,7 @@ export const StyledAvatarGroup = styled.div<AvatarGroupProps>`
   }
 `
 
-export const AvatarEllipsisIconWrapper = styled.div<WithInterpolation>`
+export const AvatarEllipsisIconWrapper = styled.div<InterpolationProps>`
   position: relative;
 
   ${({ interpolation }) => interpolation}

src/components/Avatars/AvatarGroup/AvatarGroup.types.ts

@@ -1,19 +1,25 @@
 /* Internal dependencies */
-import { ChildrenComponentProps } from 'Types/ComponentProps'
-import InjectedInterpolation from 'Types/InjectedInterpolation'
+import type { BezierComponentProps, ChildrenProps, SizeProps, AdditionalStylableProps } from 'Types/ComponentProps'
 import { AvatarSize } from 'Components/Avatars/Avatar'
 
 export enum AvatarGroupEllipsisType {
   Icon = 'Icon',
   Count = 'Count',
 }
 
-export default interface AvatarGroupProps extends ChildrenComponentProps {
+type MouseEventHandler = React.MouseEventHandler<HTMLDivElement>
+
+interface AvatarGroupOptions {
   max: number
-  size?: AvatarSize
   spacing?: number
   ellipsisType?: AvatarGroupEllipsisType
-  onMouseEnterEllipsis?: (event: React.MouseEvent<HTMLDivElement>) => void
-  onMouseLeaveEllipsis?: (event: React.MouseEvent<HTMLDivElement>) => void
-  ellipsisInterpolation?: InjectedInterpolation
+  onMouseEnterEllipsis?: MouseEventHandler
+  onMouseLeaveEllipsis?: MouseEventHandler
 }
+
+export default interface AvatarGroupProps extends
+  BezierComponentProps,
+  ChildrenProps,
+  SizeProps<AvatarSize>,
+  AdditionalStylableProps<'ellipsis'>,
+  AvatarGroupOptions {}

src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts

@@ -1,13 +1,13 @@
 /* Internal denpendencies */
 import { styled, css, smoothCorners, Foundation, SemanticNames } from 'Foundation'
 import { enableSmoothCorners } from 'Worklets/EnableCSSHoudini'
-import { InjectedInterpolation, WithInterpolation } from 'Types/InjectedInterpolation'
+import type { InjectedInterpolation, InterpolationProps } from 'Types/Foundation'
 import { Icon } from 'Components/Icon'
 import { AVATAR_BORDER_RADIUS_PERCENTAGE } from 'Components/Avatars/AvatarStyle'
 import { AvatarSize } from 'Components/Avatars/Avatar'
 import { AvatarImage } from 'Components/Avatars/Avatar/Avatar.styled'
 
-interface CheckableAvatarWrapperProps extends WithInterpolation {
+interface CheckableAvatarWrapperProps extends InterpolationProps {
   isChecked: boolean
   isCheckable: boolean
 }

src/components/Avatars/CheckableAvatar/CheckableAvatar.types.ts

@@ -1,12 +1,14 @@
 /* Internal dependencies */
-import { SemanticNames } from 'Foundation'
-import InjectedInterpolation from 'Types/InjectedInterpolation'
-import { AvatarProps } from 'Components/Avatars/Avatar'
+import type { AdditionalStylableProps, AdditionalColorProps } from 'Types/ComponentProps'
+import type { AvatarProps } from 'Components/Avatars/Avatar'
 
-export default interface CheckableAvatarProps extends AvatarProps {
+interface CheckableAvatarPropsOptions {
   isChecked?: boolean
   isCheckable?: boolean
-  checkedBackgroundColor?: SemanticNames
-  checkableWrapperClassName?: string
-  checkableWrapperInterpolation?: InjectedInterpolation
 }
+
+export default interface CheckableAvatarProps extends
+  AvatarProps,
+  AdditionalStylableProps<'checkableWrapper'>,
+  AdditionalColorProps<'checkedBackground'>,
+  CheckableAvatarPropsOptions {}

src/components/Banner/Banner.const.ts

@@ -1,40 +1,40 @@
 /* Internal dependencies */
 import { css, SemanticNames } from 'Foundation'
-import type { InjectedInterpolation } from 'Types/InjectedInterpolation'
-import { BannerColorVariant } from './Banner.types'
+import type { InjectedInterpolation } from 'Types/Foundation'
+import { BannerVariant } from './Banner.types'
 
-export const BACKGROUND_COLORS: Record<BannerColorVariant, SemanticNames> = {
-  [BannerColorVariant.Default]: 'bg-black-lighter',
-  [BannerColorVariant.Blue]: 'bgtxt-blue-lightest',
-  [BannerColorVariant.Cobalt]: 'bgtxt-cobalt-lightest',
-  [BannerColorVariant.Green]: 'bgtxt-green-lightest',
-  [BannerColorVariant.Orange]: 'bgtxt-orange-lightest',
-  [BannerColorVariant.Red]: 'bgtxt-red-lightest',
-  [BannerColorVariant.Alt]: 'bg-grey-lighter',
+export const BACKGROUND_COLORS: Record<BannerVariant, SemanticNames> = {
+  [BannerVariant.Default]: 'bg-black-lighter',
+  [BannerVariant.Blue]: 'bgtxt-blue-lightest',
+  [BannerVariant.Cobalt]: 'bgtxt-cobalt-lightest',
+  [BannerVariant.Green]: 'bgtxt-green-lightest',
+  [BannerVariant.Orange]: 'bgtxt-orange-lightest',
+  [BannerVariant.Red]: 'bgtxt-red-lightest',
+  [BannerVariant.Alt]: 'bg-grey-lighter',
 }
 
-export const DEFAULT_ICON_COLORS: Record<BannerColorVariant, SemanticNames> = {
-  [BannerColorVariant.Default]: 'txt-black-darker',
-  [BannerColorVariant.Blue]: 'bgtxt-blue-normal',
-  [BannerColorVariant.Cobalt]: 'bgtxt-cobalt-normal',
-  [BannerColorVariant.Green]: 'bgtxt-green-normal',
-  [BannerColorVariant.Orange]: 'bgtxt-orange-normal',
-  [BannerColorVariant.Red]: 'bgtxt-red-normal',
-  [BannerColorVariant.Alt]: 'txt-black-darker',
+export const DEFAULT_ICON_COLORS: Record<BannerVariant, SemanticNames> = {
+  [BannerVariant.Default]: 'txt-black-darker',
+  [BannerVariant.Blue]: 'bgtxt-blue-normal',
+  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',
+  [BannerVariant.Green]: 'bgtxt-green-normal',
+  [BannerVariant.Orange]: 'bgtxt-orange-normal',
+  [BannerVariant.Red]: 'bgtxt-red-normal',
+  [BannerVariant.Alt]: 'txt-black-darker',
 }
 
-export const TEXT_COLORS: Record<BannerColorVariant, SemanticNames> = {
-  [BannerColorVariant.Default]: 'txt-black-darker',
-  [BannerColorVariant.Blue]: 'bgtxt-blue-normal',
-  [BannerColorVariant.Cobalt]: 'bgtxt-cobalt-normal',
-  [BannerColorVariant.Green]: 'bgtxt-green-normal',
-  [BannerColorVariant.Orange]: 'bgtxt-orange-normal',
-  [BannerColorVariant.Red]: 'bgtxt-red-normal',
-  [BannerColorVariant.Alt]: 'txt-black-darker',
+export const TEXT_COLORS: Record<BannerVariant, SemanticNames> = {
+  [BannerVariant.Default]: 'txt-black-darker',
+  [BannerVariant.Blue]: 'bgtxt-blue-normal',
+  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',
+  [BannerVariant.Green]: 'bgtxt-green-normal',
+  [BannerVariant.Orange]: 'bgtxt-orange-normal',
+  [BannerVariant.Red]: 'bgtxt-red-normal',
+  [BannerVariant.Alt]: 'txt-black-darker',
 }
 
-export const ELEVATIONS: { [key in BannerColorVariant]?: InjectedInterpolation } = {
-  [BannerColorVariant.Alt]: css`
+export const ELEVATIONS: { [key in BannerVariant]?: InjectedInterpolation } = {
+  [BannerVariant.Alt]: css`
     ${({ foundation }) => foundation?.elevation?.ev2()}
   `,
 }

src/components/Banner/Banner.stories.tsx

@@ -11,7 +11,7 @@ import {
 import { getTitle } from 'Utils/storyUtils'
 import Banner from './Banner'
 import {
-  BannerColorVariant,
+  BannerVariant,
   BannerProps,
 } from './Banner.types'
 
@@ -22,7 +22,7 @@ export default {
     colorVariant: {
       control: {
         type: 'radio',
-        options: values(BannerColorVariant),
+        options: values(BannerVariant),
       },
     },
     dismissible: {
@@ -52,7 +52,7 @@ const Template: Story<BannerProps> = props => <Banner {...props} />
 
 export const Primary: Story<BannerProps> = Template.bind({})
 Primary.args = {
-  colorVariant: BannerColorVariant.Default,
+  variant: BannerVariant.Default,
   icon: 'lightbulb',
   content: 'Information here.',
   dismissible: true,

src/components/Banner/Banner.styled.ts

@@ -1,17 +1,20 @@
 /* Internal dependencies */
 import { styled } from 'Foundation'
-import type { InjectedInterpolation } from 'Types/InjectedInterpolation'
+import type { InterpolationProps } from 'Types/Foundation'
+import type { VariantProps } from 'Types/ComponentProps'
 import { Icon } from 'Components/Icon'
 import { Text } from 'Components/Text'
 import { BACKGROUND_COLORS, TEXT_COLORS, ELEVATIONS } from './Banner.const'
-import type { BannerColorVariant } from './Banner.types'
+import type { BannerVariant } from './Banner.types'
+
+type BannerVariantProps = Required<VariantProps<BannerVariant>>
 
 const BannerIcon = styled(Icon)``
-const ContentWrapper = styled.div<{
-  colorVariant: BannerColorVariant
-}>`
-  color: ${({ foundation, colorVariant }) => foundation?.theme?.[TEXT_COLORS[colorVariant]]};
+
+const ContentWrapper = styled.div<BannerVariantProps>`
+  color: ${({ foundation, variant }) => foundation?.theme?.[TEXT_COLORS[variant]]};
 `
+
 const Dismiss = styled.div`
   display: flex;
   width: 20px;
@@ -29,17 +32,14 @@ const Link = styled(Text)`
   cursor: pointer;
 `
 
-const Wrapper = styled.div<{
-  colorVariant: BannerColorVariant
-  interpolation?: InjectedInterpolation
-}>`
+const Wrapper = styled.div<BannerVariantProps & InterpolationProps>`
   display: flex;
   min-width: 200px;
   padding: 12px;
-  background-color: ${({ foundation, colorVariant }) => foundation?.theme?.[BACKGROUND_COLORS[colorVariant]]};
+  background-color: ${({ foundation, variant }) => foundation?.theme?.[BACKGROUND_COLORS[variant]]};
 
   ${({ foundation }) => foundation?.rounding?.round12}
-  ${({ colorVariant }) => ELEVATIONS[colorVariant]}
+  ${({ variant }) => ELEVATIONS[variant]}
 
   ${({ interpolation }) => interpolation}
 

src/components/Banner/Banner.tsx

@@ -10,7 +10,7 @@ import { Typography } from 'Foundation'
 import { Text } from 'Components/Text'
 import { Icon, IconSize } from 'Components/Icon'
 import { DEFAULT_ICON_COLORS, TEXT_COLORS } from './Banner.const'
-import { BannerColorVariant, BannerProps, RenderLinkFunc } from './Banner.types'
+import { BannerVariant, BannerProps, RenderLinkFunc } from './Banner.types'
 import Styled from './Banner.styled'
 
 const BANNER_TEST_ID = 'bezier-react-banner'
@@ -32,7 +32,7 @@ const externalLinkRenderer: RenderLinkFunc = ({
 )
 
 function Link({
-  colorVariant = BannerColorVariant.Default,
+  variant = BannerVariant.Default,
   hasLink = false,
   linkText,
   linkTo,
@@ -44,7 +44,7 @@ function Link({
     content: (
       <Styled.Link
         typo={Typography.Size14}
-        color={TEXT_COLORS[colorVariant]}
+        color={TEXT_COLORS[variant]}
         bold
       >
         { linkText }
@@ -55,7 +55,7 @@ function Link({
 }
 
 function DismissButton({
-  colorVariant = BannerColorVariant.Default,
+  variant = BannerVariant.Default,
   dismissible,
   onDismiss,
 }: BannerProps) {
@@ -69,7 +69,7 @@ function DismissButton({
       <Icon
         name="cancel"
         size={IconSize.XS}
-        color={DEFAULT_ICON_COLORS[colorVariant]}
+        color={DEFAULT_ICON_COLORS[variant]}
         onClick={onDismiss}
       />
     </Styled.Dismiss>
@@ -83,7 +83,7 @@ function Banner(
   const {
     className,
     interpolation,
-    colorVariant = BannerColorVariant.Default,
+    variant = BannerVariant.Default,
     icon,
     iconColor,
     content,
@@ -95,22 +95,22 @@ function Banner(
       ref={forwardedRef}
       data-testid={testId}
       className={className}
-      colorVariant={colorVariant}
+      variant={variant}
       interpolation={interpolation}
     >
       { !isNil(icon) && (
         <Styled.BannerIcon
           name={icon}
-          color={iconColor ?? DEFAULT_ICON_COLORS[colorVariant]}
+          color={iconColor ?? DEFAULT_ICON_COLORS[variant]}
           size={IconSize.S}
         />
       ) }
 
-      <Styled.ContentWrapper colorVariant={colorVariant}>
+      <Styled.ContentWrapper variant={variant}>
         { isString(content) ? (
           <Text
             typo={Typography.Size14}
-            color={TEXT_COLORS[colorVariant]}
+            color={TEXT_COLORS[variant]}
           >
             { content }
             <Link {...props} />