From 5834fe7bb0a037abd0a79cb0c6e46b5600de3e94 Mon Sep 17 00:00:00 2001 From: Hyunseung Jeon Date: Tue, 5 Sep 2023 11:35:16 +0900 Subject: [PATCH 1/8] refactor(progress-bar): change size, variant from enum to type --- .../ProgressBar/ProgressBar.styled.ts | 20 +++++++++---------- .../ProgressBar/ProgressBar.test.tsx | 14 +++++-------- .../components/ProgressBar/ProgressBar.tsx | 8 ++------ .../ProgressBar/ProgressBar.types.ts | 11 ++-------- .../src/components/ProgressBar/index.ts | 8 ++++---- 5 files changed, 23 insertions(+), 38 deletions(-) diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts b/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts index f433e58846..1f6151f7da 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts +++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts @@ -8,13 +8,13 @@ import { toLength } from '~/src/utils/styleUtils' import type ProgressBarProps from './ProgressBar.types' import { - ProgressBarSize, - ProgressBarVariant, + type ProgressBarSize, + type ProgressBarVariant, } from './ProgressBar.types' const PROGRESS_BAR_HEIGHT: Record = { - [ProgressBarSize.S]: 4, - [ProgressBarSize.M]: 6, + s: 4, + m: 6, } interface GetProgressBarStyleProps { @@ -27,8 +27,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 +37,7 @@ const getProgressBarActiveGradient = ({ ); ` } - case ProgressBarVariant.Monochrome: + case 'monochrome': default: { return css` background: linear-gradient( @@ -55,13 +55,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..356a4168a4 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts +++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts @@ -6,16 +6,9 @@ import type { VariantProps, } from '~/src/types/ComponentProps' -export enum ProgressBarSize { - M = 'm', - S = 's', -} +export type ProgressBarSize = 'm' | 's' -export enum ProgressBarVariant { - Green = 'green', - GreenAlt = 'green-alt', - Monochrome = 'monochrome', -} +export type ProgressBarVariant = 'green' | 'green-alt' | 'monochrome' interface ProgressBarOptions { /** diff --git a/packages/bezier-react/src/components/ProgressBar/index.ts b/packages/bezier-react/src/components/ProgressBar/index.ts index e19d4945d8..d9b8d110b4 100644 --- a/packages/bezier-react/src/components/ProgressBar/index.ts +++ b/packages/bezier-react/src/components/ProgressBar/index.ts @@ -1,13 +1,13 @@ import { ProgressBar } from './ProgressBar' import type ProgressBarProps from './ProgressBar.types' import { - ProgressBarSize, - ProgressBarVariant, + type ProgressBarSize, + type ProgressBarVariant, } from './ProgressBar.types' export { ProgressBar, type ProgressBarProps, - ProgressBarSize, - ProgressBarVariant, + type ProgressBarSize, + type ProgressBarVariant, } From b1021fe5e79468c6c138b02cfb3fe45aeb7aaac3 Mon Sep 17 00:00:00 2001 From: Hyunseung Jeon Date: Tue, 5 Sep 2023 14:07:33 +0900 Subject: [PATCH 2/8] fix(progress-bar.stories): change size, variant to type, remove argTypes options --- .../ProgressBar/ProgressBar.stories.tsx | 51 ++++++++----------- 1 file changed, 21 insertions(+), 30 deletions(-) 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<{}> = () => ( From 5e3b1331ad313c717687a0441ddb5925614905cb Mon Sep 17 00:00:00 2001 From: Hyunseung Jeon Date: Wed, 6 Sep 2023 19:26:19 +0900 Subject: [PATCH 3/8] test(storybook): remove undefined from options (@yangwooseong) --- packages/bezier-react/.storybook/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bezier-react/.storybook/main.js b/packages/bezier-react/.storybook/main.js index 22359f76a4..2395e89751 100644 --- a/packages/bezier-react/.storybook/main.js +++ b/packages/bezier-react/.storybook/main.js @@ -56,6 +56,7 @@ module.exports = { * when HMR is enabled, so we enable it only in production. */ config.plugins.push(new ReactDocgenTypescriptPlugin({ + shouldRemoveUndefinedFromOptional: true, shouldExtractLiteralValuesFromEnum: true, propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), })) From d624c8c554fc8ac7c161f3986c3746155a37388e Mon Sep 17 00:00:00 2001 From: Hyunseung Jeon Date: Thu, 7 Sep 2023 13:10:10 +0900 Subject: [PATCH 4/8] refactor(progress-bar): revive enum and deprecate it --- .../ProgressBar/ProgressBar.types.ts | 37 +++++++++++++++++-- .../src/components/ProgressBar/index.ts | 8 ++-- 2 files changed, 37 insertions(+), 8 deletions(-) diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts b/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts index 356a4168a4..40970b6109 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts +++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts @@ -6,9 +6,38 @@ import type { VariantProps, } from '~/src/types/ComponentProps' -export type ProgressBarSize = 'm' | 's' +/** + * @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', +} + +export type ProgressBarSizeType = 'm' | 's' -export type ProgressBarVariant = 'green' | 'green-alt' | 'monochrome' +export type ProgressBarVariantType = 'green' | 'green-alt' | 'monochrome' interface ProgressBarOptions { /** @@ -30,8 +59,8 @@ interface ProgressBarOptions { export default interface ProgressBarProps extends BezierComponentProps, - SizeProps, - VariantProps, + SizeProps, + VariantProps, AdditionalStylableProps<'active'>, AdditionalTestIdProps<'active'>, ProgressBarOptions {} diff --git a/packages/bezier-react/src/components/ProgressBar/index.ts b/packages/bezier-react/src/components/ProgressBar/index.ts index d9b8d110b4..e19d4945d8 100644 --- a/packages/bezier-react/src/components/ProgressBar/index.ts +++ b/packages/bezier-react/src/components/ProgressBar/index.ts @@ -1,13 +1,13 @@ import { ProgressBar } from './ProgressBar' import type ProgressBarProps from './ProgressBar.types' import { - type ProgressBarSize, - type ProgressBarVariant, + ProgressBarSize, + ProgressBarVariant, } from './ProgressBar.types' export { ProgressBar, type ProgressBarProps, - type ProgressBarSize, - type ProgressBarVariant, + ProgressBarSize, + ProgressBarVariant, } From 8927be00af62ecc052d44d521ff8abb3eecca2d2 Mon Sep 17 00:00:00 2001 From: Hyunseung Jeon Date: Thu, 7 Sep 2023 13:12:58 +0900 Subject: [PATCH 5/8] docs(progress-bar): update mdx docs --- .../bezier-react/src/components/ProgressBar/ProgressBar.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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의 색상을 선택할 수 있습니다. From 7dec9a0cda8363f2cf063068d485ec5b280cd9ec Mon Sep 17 00:00:00 2001 From: Hyunseung Jeon Date: Thu, 7 Sep 2023 13:26:59 +0900 Subject: [PATCH 6/8] fix(progress-bar.styled): resolve type error --- .../src/components/ProgressBar/ProgressBar.styled.ts | 8 ++------ .../src/components/ProgressBar/ProgressBar.types.ts | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts b/packages/bezier-react/src/components/ProgressBar/ProgressBar.styled.ts index 1f6151f7da..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 { - type ProgressBarSize, - type ProgressBarVariant, -} from './ProgressBar.types' -const PROGRESS_BAR_HEIGHT: Record = { +const PROGRESS_BAR_HEIGHT: Record, number> = { s: 4, m: 6, } interface GetProgressBarStyleProps { foundation?: Foundation - variant: ProgressBarVariant + variant: NonNullable } const getProgressBarActiveGradient = ({ diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts b/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts index 40970b6109..0abfb7dcee 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts +++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts @@ -35,9 +35,9 @@ export enum ProgressBarVariant { Monochrome = 'monochrome', } -export type ProgressBarSizeType = 'm' | 's' +type ProgressBarSizeType = 'm' | 's' -export type ProgressBarVariantType = 'green' | 'green-alt' | 'monochrome' +type ProgressBarVariantType = 'green' | 'green-alt' | 'monochrome' interface ProgressBarOptions { /** From afea92ca660d8ee6bda03031bf1557fe8be25989 Mon Sep 17 00:00:00 2001 From: Hyunseung Jeon Date: Wed, 13 Sep 2023 19:50:41 +0900 Subject: [PATCH 7/8] chore: add changeset --- .changeset/lucky-hairs-nail.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lucky-hairs-nail.md diff --git a/.changeset/lucky-hairs-nail.md b/.changeset/lucky-hairs-nail.md new file mode 100644 index 0000000000..ce572dc565 --- /dev/null +++ b/.changeset/lucky-hairs-nail.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": patch +--- + +Change ProgressBarSize, ProgressBarVariant from enum to string literal From b6ac62630255071849f3664c35f021d746049837 Mon Sep 17 00:00:00 2001 From: Hyunseung Jeon Date: Thu, 14 Sep 2023 19:46:44 +0900 Subject: [PATCH 8/8] chore: update changeset --- .changeset/lucky-hairs-nail.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lucky-hairs-nail.md b/.changeset/lucky-hairs-nail.md index ce572dc565..97afe769b2 100644 --- a/.changeset/lucky-hairs-nail.md +++ b/.changeset/lucky-hairs-nail.md @@ -2,4 +2,4 @@ "@channel.io/bezier-react": patch --- -Change ProgressBarSize, ProgressBarVariant from enum to string literal +Add `ProgressBarSize`, `ProgressBarVariant` string literal type and deprecate enum