Add ProgressBarSize, ProgressBarVariant string literal type and d…

…eprecate enum (#1595)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English**.
- [x] I added an appropriate **label** to the PR.
- [x] I wrote a commit message in **English**.
- [x] I wrote a commit message according to [**the Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] [I added the appropriate
**changeset**](https://github.com/channel-io/bezier-react/blob/main/CONTRIBUTING.md#add-a-changeset)
for the changes.
- [ ] [Component] I wrote **a unit test** about the implementation.
- [ ] [Component] I wrote **a storybook document** about the
implementation.
- [ ] [Component] I tested the implementation in **various browsers**.
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox
- [ ] [*New* Component] I added my username to the correct directory in
the `CODEOWNERS` file.

## Related Issue

- #1568

## Summary
<!-- Please add a summary of the modification. -->

- `ProgressBar` 컴포넌트의 SizeProps인 `ProgressBarSize`, VariantProps인
`ProgressBarVariant`에 enum 대신 string literal type이 들어갈 수 있도록 변경하고, enum을
deprecated 처리합니다.

## Details
<!-- Please add a detailed description of the modification. (such as
AS-IS/TO-DO)-->

## Breaking change or not (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

- No
- 향후 `ProgressBarSize`, `ProgressBarVariant` enum 사용처에서 이를 string
literal로 변경해주어야 합니다.

## References
<!-- External documents based on workarounds or reviewers should refer
to -->

.changeset/lucky-hairs-nail.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Add `ProgressBarSize`, `ProgressBarVariant` string literal type and deprecate enum

packages/bezier-react/.storybook/main.js

@@ -28,6 +28,7 @@ module.exports = {
      */
     reactDocgen: process.env.NODE_ENV === 'production' && 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
+      shouldRemoveUndefinedFromOptional: true,
       shouldExtractLiteralValuesFromEnum: true,
       propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
     },

packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx

@@ -41,15 +41,15 @@ import { ProgressBar } from '~/src/components/ProgressBar'
 
 S, M 2개의 size가 있으며, 기본값은 M입니다.
 
-`size` prop을 통해 ProgressBar의 높이를 선택할 수 있으며, `ProgressBarSize` enum을 사용할 수 있습니다.
+`size` prop을 통해 ProgressBar의 높이를 선택할 수 있습니다.
 
 <Story id="components-progressbar--size-variant" />
 
 ### Color
 
 Green, Monochrome, GreenAlt 3개의 color가 있으며, 기본값은 Green입니다.
 
-`variant` prop을 통해 ProgressBar의 색상을 선택할 수 있으며, `ProgressBarVariant` enum을 사용할 수 있습니다.
+`variant` prop을 통해 ProgressBar의 색상을 선택할 수 있습니다.
 
 <Story id="components-progressbar--variant" />
 

packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -6,10 +6,7 @@ import type {
 } from '@storybook/react'
 import base from 'paths.macro'
 
-import {
-  getObjectFromEnum,
-  getTitle,
-} from '~/src/utils/storyUtils'
+import { getTitle } from '~/src/utils/storyUtils'
 
 import { Button } from '~/src/components/Button'
 import {
@@ -23,10 +20,6 @@ import { Text } from '~/src/components/Text'
 import { ProgressBar } from './ProgressBar'
 import mdx from './ProgressBar.mdx'
 import type ProgressBarProps from './ProgressBar.types'
-import {
-  ProgressBarSize,
-  ProgressBarVariant,
-} from './ProgressBar.types'
 
 export default {
   title: getTitle(base),
@@ -40,13 +33,11 @@ export default {
     size: {
       control: {
         type: 'radio',
-        options: getObjectFromEnum(ProgressBarSize),
       },
     },
     variant: {
       control: {
         type: 'radio',
-        options: getObjectFromEnum(ProgressBarVariant),
       },
     },
     width: {
@@ -67,8 +58,8 @@ export default {
 
 export const Playground: Story<ProgressBarProps> = (props) => <ProgressBar {...props} />
 Playground.args = {
-  size: ProgressBarSize.M,
-  variant: ProgressBarVariant.Green,
+  size: 'm',
+  variant: 'green',
   width: '36',
   value: 0.5,
 }
@@ -86,32 +77,32 @@ export const Overview: Story<{}> = () => {
         <VStack spacing={6} align="stretch">
           <StackItem>
             <ProgressBar
-              size={ProgressBarSize.M}
-              variant={ProgressBarVariant.Green}
+              size="m"
+              variant="green"
               width={200}
               value={values[0]}
             />
           </StackItem>
           <StackItem>
             <ProgressBar
-              size={ProgressBarSize.M}
-              variant={ProgressBarVariant.Monochrome}
+              size="m"
+              variant="monochrome"
               width={200}
               value={values[1]}
             />
           </StackItem>
           <StackItem>
             <ProgressBar
-              size={ProgressBarSize.S}
-              variant={ProgressBarVariant.Green}
+              size="s"
+              variant="green"
               width={200}
               value={values[2]}
             />
           </StackItem>
           <StackItem>
             <ProgressBar
-              size={ProgressBarSize.S}
-              variant={ProgressBarVariant.Monochrome}
+              size="s"
+              variant="monochrome"
               width={200}
               value={values[3]}
             />
@@ -280,8 +271,8 @@ export const SizeVariant: Story<{}> = () => (
         <Spacer />
         <StackItem>
           <ProgressBar
-            size={ProgressBarSize.M}
-            variant={ProgressBarVariant.Green}
+            size="m"
+            variant="green"
             width={200}
             value={0.5}
           />
@@ -296,8 +287,8 @@ export const SizeVariant: Story<{}> = () => (
         <Spacer />
         <StackItem>
           <ProgressBar
-            size={ProgressBarSize.S}
-            variant={ProgressBarVariant.Green}
+            size="s"
+            variant="green"
             width={200}
             value={0.5}
           />
@@ -319,8 +310,8 @@ export const Variant: Story<{}> = () => (
         <Spacer />
         <StackItem>
           <ProgressBar
-            size={ProgressBarSize.M}
-            variant={ProgressBarVariant.Green}
+            size="m"
+            variant="green"
             width={200}
             value={0.5}
           />
@@ -335,8 +326,8 @@ export const Variant: Story<{}> = () => (
         <Spacer />
         <StackItem>
           <ProgressBar
-            size={ProgressBarSize.M}
-            variant={ProgressBarVariant.Monochrome}
+            size="m"
+            variant="monochrome"
             width={200}
             value={0.5}
           />
@@ -351,8 +342,8 @@ export const Variant: Story<{}> = () => (
         <Spacer />
         <StackItem>
           <ProgressBar
-            size={ProgressBarSize.M}
-            variant={ProgressBarVariant.GreenAlt}
+            size="m"
+            variant="green-alt"
             width={200}
             value={0.5}
           />

packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts

@@ -7,28 +7,24 @@ import {
 import { toLength } from '~/src/utils/styleUtils'
 
 import type ProgressBarProps from './ProgressBar.types'
-import {
-  ProgressBarSize,
-  ProgressBarVariant,
-} from './ProgressBar.types'
 
-const PROGRESS_BAR_HEIGHT: Record<ProgressBarSize, number> = {
-  [ProgressBarSize.S]: 4,
-  [ProgressBarSize.M]: 6,
+const PROGRESS_BAR_HEIGHT: Record<NonNullable<ProgressBarProps['size']>, number> = {
+  s: 4,
+  m: 6,
 }
 
 interface GetProgressBarStyleProps {
   foundation?: Foundation
-  variant: ProgressBarVariant
+  variant: NonNullable<ProgressBarProps['variant']>
 }
 
 const getProgressBarActiveGradient = ({
   foundation,
   variant,
 }: GetProgressBarStyleProps) => {
   switch (variant) {
-    case ProgressBarVariant.Green:
-    case ProgressBarVariant.GreenAlt: {
+    case 'green':
+    case 'green-alt': {
       return css`
         background: linear-gradient(
           90deg,
@@ -37,7 +33,7 @@ const getProgressBarActiveGradient = ({
         );
       `
     }
-    case ProgressBarVariant.Monochrome:
+    case 'monochrome':
     default: {
       return css`
         background: linear-gradient(
@@ -55,13 +51,13 @@ const getProgressBarBackgroundColor = ({
   variant,
 }: GetProgressBarStyleProps) => {
   switch (variant) {
-    case ProgressBarVariant.GreenAlt: {
+    case 'green-alt': {
       return css`
         background-color: ${foundation?.theme?.['bgtxt-absolute-white-normal']};
       `
     }
-    case ProgressBarVariant.Green:
-    case ProgressBarVariant.Monochrome:
+    case 'green':
+    case 'monochrome':
     default: {
       return css`
         background-color: ${foundation?.theme?.['bg-black-light']};

packages/bezier-react/src/components/ProgressBar/ProgressBar.test.tsx

@@ -9,10 +9,6 @@ import {
   ProgressBar,
 } from './ProgressBar'
 import type ProgressBarProps from './ProgressBar.types'
-import {
-  ProgressBarSize,
-  ProgressBarVariant,
-} from './ProgressBar.types'
 
 describe('ProgressBar', () => {
   const renderComponent = (props?: Partial<ProgressBarProps>) => render(
@@ -43,7 +39,7 @@ describe('ProgressBar', () => {
   describe('specify size props', () => {
     it('should render ProgressBar with size M', () => {
       const { getByRole, getByTestId } = renderComponent({
-        size: ProgressBarSize.M,
+        size: 'm',
       })
       const progressBar = getByRole('progressbar')
       const progressBarActive = getByTestId(PROGRESS_BAR_ACTIVE_TEST_ID)
@@ -54,7 +50,7 @@ describe('ProgressBar', () => {
 
     it('should render ProgressBar with size S', () => {
       const { getByRole, getByTestId } = renderComponent({
-        size: ProgressBarSize.S,
+        size: 's',
       })
       const progressBar = getByRole('progressbar')
       const progressBarActive = getByTestId(PROGRESS_BAR_ACTIVE_TEST_ID)
@@ -67,7 +63,7 @@ describe('ProgressBar', () => {
   describe('specify variant props', () => {
     it('should render ProgressBar with variant Green', () => {
       const { getByRole, getByTestId } = renderComponent({
-        variant: ProgressBarVariant.Green,
+        variant: 'green',
       })
       const progressBar = getByRole('progressbar')
       const progressBarActive = getByTestId(PROGRESS_BAR_ACTIVE_TEST_ID)
@@ -82,7 +78,7 @@ describe('ProgressBar', () => {
 
     it('should render ProgressBar with variant Monochrome', () => {
       const { getByRole, getByTestId } = renderComponent({
-        variant: ProgressBarVariant.Monochrome,
+        variant: 'monochrome',
       })
       const progressBar = getByRole('progressbar')
       const progressBarActive = getByTestId(PROGRESS_BAR_ACTIVE_TEST_ID)
@@ -96,7 +92,7 @@ describe('ProgressBar', () => {
     })
     it('should render ProgressBar with variant GreenAlt', () => {
       const { getByRole, getByTestId } = renderComponent({
-        variant: ProgressBarVariant.GreenAlt,
+        variant: 'green-alt',
       })
       const progressBar = getByRole('progressbar')
       const progressBarActive = getByTestId(PROGRESS_BAR_ACTIVE_TEST_ID)

packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx

@@ -7,10 +7,6 @@ import React, {
 import { clamp } from '~/src/utils/numberUtils'
 
 import type ProgressBarProps from './ProgressBar.types'
-import {
-  ProgressBarSize,
-  ProgressBarVariant,
-} from './ProgressBar.types'
 
 import {
   StyledProgressBarActive,
@@ -21,8 +17,8 @@ export const PROGRESS_BAR_ACTIVE_TEST_ID = 'bezier-react-progress-bar-active'
 
 export const ProgressBar = memo(forwardRef(function ProgressBar(
   {
-    size = ProgressBarSize.M,
-    variant = ProgressBarVariant.Green,
+    size = 'm',
+    variant = 'green',
     width = 36,
     value = 0,
     activeClassName,

packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts

@@ -6,17 +6,39 @@ import type {
   VariantProps,
 } from '~/src/types/ComponentProps'
 
+/**
+ * @deprecated Use string literal instread of enum.
+ *
+ * @example
+ *
+ * ```tsx
+ * <ProgressBar size="m" />
+ * ```
+ */
 export enum ProgressBarSize {
   M = 'm',
   S = 's',
 }
 
+/**
+ * @deprecated Use string literal instread of enum.
+ *
+ * @example
+ *
+ * ```tsx
+ * <ProgressBar variant="green" />
+ * ```
+ */
 export enum ProgressBarVariant {
   Green = 'green',
   GreenAlt = 'green-alt',
   Monochrome = 'monochrome',
 }
 
+type ProgressBarSizeType = 'm' | 's'
+
+type ProgressBarVariantType = 'green' | 'green-alt' | 'monochrome'
+
 interface ProgressBarOptions {
   /**
    * CSS Width of total progress bar.
@@ -37,8 +59,8 @@ interface ProgressBarOptions {
 
 export default interface ProgressBarProps extends
   BezierComponentProps,
-  SizeProps<ProgressBarSize>,
-  VariantProps<ProgressBarVariant>,
+  SizeProps<ProgressBarSize | ProgressBarSizeType>,
+  VariantProps<ProgressBarVariant | ProgressBarVariantType>,
   AdditionalStylableProps<'active'>,
   AdditionalTestIdProps<'active'>,
   ProgressBarOptions {}