diff --git a/.changeset/lucky-hairs-nail.md b/.changeset/lucky-hairs-nail.md new file mode 100644 index 0000000000..97afe769b2 --- /dev/null +++ b/.changeset/lucky-hairs-nail.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": patch +--- + +Add `ProgressBarSize`, `ProgressBarVariant` string literal type and deprecate enum diff --git a/packages/bezier-react/.storybook/main.js b/packages/bezier-react/.storybook/main.js index 12c1d98728..9270930ba7 100644 --- a/packages/bezier-react/.storybook/main.js +++ b/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), }, diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx index 534e15ed72..0003359d59 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx +++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.mdx @@ -41,7 +41,7 @@ import { ProgressBar } from '~/src/components/ProgressBar' S, M 2개의 size가 있으며, 기본값은 M입니다. -`size` prop을 통해 ProgressBar의 높이를 선택할 수 있으며, `ProgressBarSize` enum을 사용할 수 있습니다. +`size` prop을 통해 ProgressBar의 높이를 선택할 수 있습니다. @@ -49,7 +49,7 @@ S, M 2개의 size가 있으며, 기본값은 M입니다. Green, Monochrome, GreenAlt 3개의 color가 있으며, 기본값은 Green입니다. -`variant` prop을 통해 ProgressBar의 색상을 선택할 수 있으며, `ProgressBarVariant` enum을 사용할 수 있습니다. +`variant` prop을 통해 ProgressBar의 색상을 선택할 수 있습니다. diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx index 4e910c3a43..2345bdb19a 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.stories.tsx +++ b/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 = (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<{}> = () => { @@ -280,8 +271,8 @@ export const SizeVariant: Story<{}> = () => ( @@ -296,8 +287,8 @@ export const SizeVariant: Story<{}> = () => ( @@ -319,8 +310,8 @@ export const Variant: Story<{}> = () => ( @@ -335,8 +326,8 @@ export const Variant: Story<{}> = () => ( @@ -351,8 +342,8 @@ export const Variant: Story<{}> = () => ( diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts b/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts index f433e58846..0c8a60eb82 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts +++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts @@ -7,19 +7,15 @@ 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.S]: 4, - [ProgressBarSize.M]: 6, +const PROGRESS_BAR_HEIGHT: Record, number> = { + s: 4, + m: 6, } interface GetProgressBarStyleProps { foundation?: Foundation - variant: ProgressBarVariant + variant: NonNullable } const getProgressBarActiveGradient = ({ @@ -27,8 +23,8 @@ const getProgressBarActiveGradient = ({ 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']}; diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.test.tsx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.test.tsx index 67291e62b2..76cd553aff 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.test.tsx +++ b/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) => 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) diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx b/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx index 6340e7d978..5b79ba32d5 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.tsx +++ b/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, diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts b/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts index 68c8b89df2..0abfb7dcee 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts +++ b/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 + * + * ``` + */ export enum ProgressBarSize { M = 'm', S = 's', } +/** + * @deprecated Use string literal instread of enum. + * + * @example + * + * ```tsx + * + * ``` + */ 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, - VariantProps, + SizeProps, + VariantProps, AdditionalStylableProps<'active'>, AdditionalTestIdProps<'active'>, ProgressBarOptions {}