From c7530b94e3f8ef04a9e3713e94102099cb4098b6 Mon Sep 17 00:00:00 2001 From: andrew Date: Wed, 7 Feb 2024 17:41:26 +0900 Subject: [PATCH 01/24] feat(codemod): comment import declaration check for internal use --- packages/bezier-codemod/src/shared/enum.ts | 7 ++++--- packages/bezier-codemod/src/utils/import.ts | 10 +++++----- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/bezier-codemod/src/shared/enum.ts b/packages/bezier-codemod/src/shared/enum.ts index d9fbff581e..3b1e350273 100644 --- a/packages/bezier-codemod/src/shared/enum.ts +++ b/packages/bezier-codemod/src/shared/enum.ts @@ -20,7 +20,7 @@ export const transformEnumToStringLiteralInBezier = (sourceFile: SourceFile, enu Object .keys(enumTransforms) .forEach((enumName) => { - if (hasNamedImportInImportDeclaration(sourceFile, enumName, '@channel.io/bezier-react')) { + // if (hasNamedImportInImportDeclaration(sourceFile, enumName, '@channel.io/bezier-react')) { sourceFile .getDescendantsOfKind(SyntaxKind.PropertyAccessExpression) .filter((node) => node.getFirstChildByKind(SyntaxKind.Identifier)?.getText() === enumName) @@ -31,11 +31,12 @@ export const transformEnumToStringLiteralInBezier = (sourceFile: SourceFile, enu transformedEnumNames.push(enumName) } }) - } + // } }) if (transformedEnumNames.length > 0) { - removeUnusedNamedImport(sourceFile, ['@channel.io/bezier-react']) + // removeUnusedNamedImport(sourceFile, ['@channel.io/bezier-react']) + removeUnusedNamedImport(sourceFile) return true } diff --git a/packages/bezier-codemod/src/utils/import.ts b/packages/bezier-codemod/src/utils/import.ts index 5baf10d103..1885c043ed 100644 --- a/packages/bezier-codemod/src/utils/import.ts +++ b/packages/bezier-codemod/src/utils/import.ts @@ -41,18 +41,18 @@ export const removeUnusedNamedImport = (sourceFile: SourceFile, importDeclaratio .filter((v) => (sourceFile.getDescendantsOfKind(SyntaxKind.Identifier).filter((_v) => _v.getText() === v.getText()).length === 1)) .forEach((v) => v.remove()) - if (importDeclarations) { + // if (importDeclarations) { sourceFile .getImportDeclarations() - .filter((v) => importDeclarations.includes( - trimQuoteAtBothEnds(v.getModuleSpecifier().getText()) ?? ''), - ) + // .filter((v) => importDeclarations.includes( + // trimQuoteAtBothEnds(v.getModuleSpecifier().getText()) ?? ''), + // ) .forEach((v) => { if (!v.getImportClause()) { v.remove() } }) - } + // } } export const renameNamedImport = (sourceFile: SourceFile, targets: string[], renameFn: (name: string) => string) => { From 6b84364696332d1dcf97b2e67c4174bcf8f5fc97 Mon Sep 17 00:00:00 2001 From: andrew Date: Thu, 8 Feb 2024 17:03:23 +0900 Subject: [PATCH 02/24] feat(modal): convert `ModalTitleSize` enum to string literal --- .../transform.ts | 4 ++++ .../src/components/Button/Button.types.ts | 2 +- .../src/components/ConfirmModal/ConfirmModal.tsx | 3 +-- .../src/components/Modal/Modal.stories.tsx | 11 +---------- .../src/components/Modal/Modal.test.tsx | 3 +-- .../bezier-react/src/components/Modal/Modal.tsx | 8 ++++---- .../src/components/Modal/Modal.types.ts | 9 ++++----- .../bezier-react/src/components/Modal/index.ts | 16 ++++++++-------- 8 files changed, 24 insertions(+), 32 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index af93684e3d..db85301a0b 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -109,6 +109,10 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { GreenAlt: 'green-alt', Monochrome: 'monochrome', }, + ModalTitleSize: { + L: 'l', + M: 'm', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/Button/Button.types.ts b/packages/bezier-react/src/components/Button/Button.types.ts index 1cc49cba99..22fbb75994 100644 --- a/packages/bezier-react/src/components/Button/Button.types.ts +++ b/packages/bezier-react/src/components/Button/Button.types.ts @@ -72,7 +72,7 @@ interface ButtonOwnProps { /** * The style variant. - * @default "primary" + * @default 'primary' */ styleVariant?: ButtonStyleVariant diff --git a/packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx b/packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx index 29d3ece0d7..d4dd22d54a 100644 --- a/packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx +++ b/packages/bezier-react/src/components/ConfirmModal/ConfirmModal.tsx @@ -7,7 +7,6 @@ import { ModalContent, ModalFooter, ModalHeader, - ModalTitleSize, ModalTrigger, } from '~/src/components/Modal' @@ -85,7 +84,7 @@ export const ConfirmModalHeader = forwardRef(function ConfirmModalHeader( ) diff --git a/packages/bezier-react/src/components/Modal/Modal.stories.tsx b/packages/bezier-react/src/components/Modal/Modal.stories.tsx index fff358b0bb..296ebc0448 100644 --- a/packages/bezier-react/src/components/Modal/Modal.stories.tsx +++ b/packages/bezier-react/src/components/Modal/Modal.stories.tsx @@ -9,8 +9,6 @@ import { type StoryObj, } from '@storybook/react' -import { getObjectFromEnum } from '~/src/utils/story' - import { Button } from '~/src/components/Button' import { ButtonGroup } from '~/src/components/ButtonGroup' import { FormControl } from '~/src/components/FormControl' @@ -31,7 +29,6 @@ import { type ModalContentProps, type ModalHeaderProps, type ModalProps, - ModalTitleSize, } from './Modal.types' type ModalCompositionProps = ModalProps & ModalContentProps & ModalHeaderProps @@ -134,12 +131,6 @@ const meta: Meta = { type: 'text', }, }, - titleSize: { - control: { - type: 'radio', - }, - options: getObjectFromEnum(ModalTitleSize), - }, }, } @@ -154,7 +145,7 @@ export const Composition: StoryObj = { subtitle: 'Profile Settings', description: "Make changes to your profile here. Click save when you're done.", - titleSize: ModalTitleSize.L, + titleSize: 'l', hidden: false, preventHideOnOutsideClick: false, }, diff --git a/packages/bezier-react/src/components/Modal/Modal.test.tsx b/packages/bezier-react/src/components/Modal/Modal.test.tsx index ec8e20fbc5..90ca4ed315 100644 --- a/packages/bezier-react/src/components/Modal/Modal.test.tsx +++ b/packages/bezier-react/src/components/Modal/Modal.test.tsx @@ -20,7 +20,6 @@ import { type ModalContentProps, type ModalHeaderProps, type ModalProps, - ModalTitleSize, } from './Modal.types' const TRIGGER_TEXT = 'Open' @@ -37,7 +36,7 @@ describe('Modal', () => { title: TITLE_TEXT, subtitle: SUBTITLE_TEXT, description: DESCRIPTION_TEXT, - titleSize: ModalTitleSize.L, + titleSize: 'l', }, }: { modalProps?: ModalProps diff --git a/packages/bezier-react/src/components/Modal/Modal.tsx b/packages/bezier-react/src/components/Modal/Modal.tsx index d643e3a82e..c20ee6cc36 100644 --- a/packages/bezier-react/src/components/Modal/Modal.tsx +++ b/packages/bezier-react/src/components/Modal/Modal.tsx @@ -35,7 +35,7 @@ import { type ModalFooterProps, type ModalHeaderProps, type ModalProps, - ModalTitleSize, + type ModalTitleSize, type ModalTriggerProps, } from './Modal.types' @@ -224,8 +224,8 @@ export const ModalContent = forwardRef(functi function getTitleTypo(size: ModalTitleSize) { return ({ - [ModalTitleSize.L]: '24', - [ModalTitleSize.M]: '16', + l: '24', + m: '16', } as const)[size] } @@ -285,7 +285,7 @@ export const ModalHeader = forwardRef(function Mo title, subtitle, description, - titleSize = ModalTitleSize.L, + titleSize = 'l', hidden = false, ...rest }, forwardedRef) { diff --git a/packages/bezier-react/src/components/Modal/Modal.types.ts b/packages/bezier-react/src/components/Modal/Modal.types.ts index d4237a847a..5109c38ac2 100644 --- a/packages/bezier-react/src/components/Modal/Modal.types.ts +++ b/packages/bezier-react/src/components/Modal/Modal.types.ts @@ -5,10 +5,9 @@ import { } from '~/src/types/props' import { type ZIndex } from '~/src/types/tokens' -export enum ModalTitleSize { - L = 'L', - M = 'M', -} +export type ModalTitleSize = +| 'l' +| 'm' type BoxSide = 'top' | 'right' | 'bottom' | 'left' @@ -99,7 +98,7 @@ interface ModalHeaderOwnProps { /** * Size of the title - * @default ModalTitleSize.L + * @default 'l' */ titleSize?: ModalTitleSize diff --git a/packages/bezier-react/src/components/Modal/index.ts b/packages/bezier-react/src/components/Modal/index.ts index 641e8965aa..12770db6ac 100644 --- a/packages/bezier-react/src/components/Modal/index.ts +++ b/packages/bezier-react/src/components/Modal/index.ts @@ -8,13 +8,13 @@ export { ModalTrigger, useModalContainerContext, } from './Modal' -export { - type ModalBodyProps, - type ModalCloseProps, - type ModalContentProps, - type ModalFooterProps, - type ModalHeaderProps, - type ModalProps, +export type { + ModalBodyProps, + ModalCloseProps, + ModalContentProps, + ModalFooterProps, + ModalHeaderProps, + ModalProps, ModalTitleSize, - type ModalTriggerProps, + ModalTriggerProps, } from './Modal.types' From 8d91d9dd186d682430d56e0930b14894e875c84b Mon Sep 17 00:00:00 2001 From: andrew Date: Thu, 8 Feb 2024 17:08:34 +0900 Subject: [PATCH 03/24] feat(toast): convert `ToastPlacement`, `ToastAppearnce`, `ToastPreset` enum to string literal --- .../transform.ts | 17 +++++++++ .../src/components/Toast/Toast.stories.tsx | 3 +- .../src/components/Toast/Toast.tsx | 35 +++++++++---------- .../src/components/Toast/Toast.types.ts | 35 +++++++++---------- .../src/components/Toast/index.ts | 14 ++++---- 5 files changed, 57 insertions(+), 47 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index db85301a0b..0affc488a2 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -113,6 +113,23 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { L: 'l', M: 'm', }, + ToastPlacement: { + BottomLeft: 'bottom-left', + BottomRight: 'bottom-right', + }, + ToastAppearance: { + Success: 'success', + Warning: 'warning', + Error: 'error', + Info: 'info', + }, + ToastPreset: { + Default: 'default', + Success: 'success', + Error: 'error', + Offline: 'offline', + Online: 'online', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/Toast/Toast.stories.tsx b/packages/bezier-react/src/components/Toast/Toast.stories.tsx index d47ed66241..1b05ae159f 100644 --- a/packages/bezier-react/src/components/Toast/Toast.stories.tsx +++ b/packages/bezier-react/src/components/Toast/Toast.stories.tsx @@ -14,7 +14,6 @@ import { } from './Toast' import { type ToastOptions, - ToastPreset, type ToastProps, type ToastProviderProps, } from './Toast.types' @@ -45,7 +44,7 @@ const Template: StoryFn = ({ export const Primary: StoryObj = { render: Template, args: { - preset: ToastPreset.Default, + preset: 'default', rightSide: false, autoDismiss: true, autoDismissTimeout: 3000, diff --git a/packages/bezier-react/src/components/Toast/Toast.tsx b/packages/bezier-react/src/components/Toast/Toast.tsx index bad56fe5a0..9033a850e9 100644 --- a/packages/bezier-react/src/components/Toast/Toast.tsx +++ b/packages/bezier-react/src/components/Toast/Toast.tsx @@ -39,40 +39,37 @@ import { import { type ToastContextValue, - ToastPlacement, + type ToastPlacement, + type ToastPreset, type ToastProps, type ToastProviderProps, type ToastType, } from './Toast.types' -import { - ToastAppearance, - ToastPreset, -} from './Toast.types' import useToastProviderValues from './useToastContextValues' import styles from './Toast.module.scss' function getToastPreset(preset: ToastPreset) { return { - [ToastPreset.Success]: { + success: { icon: CheckCircleFilledIcon, - appearance: ToastAppearance.Success, + appearance: 'success', }, - [ToastPreset.Error]: { + error: { icon: ErrorTriangleFilledIcon, - appearance: ToastAppearance.Error, + appearance: 'error', }, - [ToastPreset.Offline]: { + offline: { icon: WifiOffIcon, - appearance: ToastAppearance.Warning, + appearance: 'warning', }, - [ToastPreset.Online]: { + online: { icon: WifiIcon, - appearance: ToastAppearance.Success, + appearance: 'success', }, - [ToastPreset.Default]: { + default: { icon: InfoFilledIcon, - appearance: ToastAppearance.Info, + appearance: 'info', }, }[preset] } @@ -80,7 +77,7 @@ function getToastPreset(preset: ToastPreset) { export function Toast({ placement, appearance: appearanceProp, - preset = ToastPreset.Default, + preset = 'default', icon: iconProp, content, zIndex = 'toast', @@ -234,7 +231,7 @@ export function ToastProvider({ key={placement} style={{ bottom: px(offset?.bottom), - ...(placement === ToastPlacement.BottomRight + ...(placement === 'bottom-right' ? { right: px(offset?.right) } : { left: px(offset?.left) }), }} @@ -266,8 +263,8 @@ export function ToastProvider({ { children } { isMounted && createPortal( [ - createContainer(ToastPlacement.BottomLeft, leftToasts), - createContainer(ToastPlacement.BottomRight, rightToasts), + createContainer('bottom-left', leftToasts), + createContainer('bottom-right', rightToasts), ], container, ) } diff --git a/packages/bezier-react/src/components/Toast/Toast.types.ts b/packages/bezier-react/src/components/Toast/Toast.types.ts index 07ec9889ca..70c16fce65 100644 --- a/packages/bezier-react/src/components/Toast/Toast.types.ts +++ b/packages/bezier-react/src/components/Toast/Toast.types.ts @@ -8,25 +8,22 @@ import { } from '~/src/types/props' import { type ZIndex } from '~/src/types/tokens' -export enum ToastPlacement { - BottomLeft = 'bottom-left', - BottomRight = 'bottom-right', -} - -export enum ToastAppearance { - Success = 'success', - Warning = 'warning', - Error = 'error', - Info = 'info', -} - -export enum ToastPreset { - Default = 'Default', - Success = 'Success', - Error = 'Error', - Offline = 'Offline', - Online = 'Online', -} +export type ToastPlacement = +| 'bottom-left' +| 'bottom-right' + +export type ToastAppearance = +| 'success' +| 'warning' +| 'error' +| 'info' + +export type ToastPreset = +| 'default' +| 'success' +| 'error' +| 'offline' +| 'online' interface ToastOwnProps { placement?: ToastPlacement diff --git a/packages/bezier-react/src/components/Toast/index.ts b/packages/bezier-react/src/components/Toast/index.ts index f8e9cd4ba8..d39c1a8163 100644 --- a/packages/bezier-react/src/components/Toast/index.ts +++ b/packages/bezier-react/src/components/Toast/index.ts @@ -2,14 +2,14 @@ export { ToastProvider, useToast, } from './Toast' -export { +export type { ToastAppearance, - type ToastContent, - type ToastId, - type ToastOptions, + ToastContent, + ToastId, + ToastOptions, ToastPlacement, ToastPreset, - type ToastProps, - type ToastProviderProps, - type ToastType, + ToastProps, + ToastProviderProps, + ToastType, } from './Toast.types' From ed90814ed99c7f86e018c792899ff52bc6547ca1 Mon Sep 17 00:00:00 2001 From: andrew Date: Thu, 8 Feb 2024 17:13:24 +0900 Subject: [PATCH 04/24] feat(spinner): convert `SpinnerSize` enum to string literal --- .../transform.ts | 7 +++++++ .../src/components/Button/Button.tsx | 15 ++++++--------- .../src/components/Spinner/Spinner.stories.tsx | 17 +++++++---------- .../src/components/Spinner/Spinner.test.tsx | 3 +-- .../src/components/Spinner/Spinner.tsx | 7 ++----- .../src/components/Spinner/Spinner.types.ts | 13 ++++++------- .../src/components/Spinner/index.ts | 2 +- 7 files changed, 30 insertions(+), 34 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index 0affc488a2..843a08715d 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -130,6 +130,13 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { Offline: 'offline', Online: 'online', }, + SpinnerSize: { + XL: 'xl', + L: 'l', + M: 'm', + S: 's', + XS: 'xs', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx index 496226e8fa..d4caba4914 100644 --- a/packages/bezier-react/src/components/Button/Button.tsx +++ b/packages/bezier-react/src/components/Button/Button.tsx @@ -17,10 +17,7 @@ import { LegacyIcon, isIconName, } from '~/src/components/LegacyIcon' -import { - Spinner, - SpinnerSize, -} from '~/src/components/Spinner' +import { Spinner } from '~/src/components/Spinner' import { Text } from '~/src/components/Text' import type { @@ -55,11 +52,11 @@ function getIconSize(size: ButtonSize) { function getSpinnerSize(size: ButtonSize) { return ({ - xs: SpinnerSize.XS, - s: SpinnerSize.XS, - m: SpinnerSize.S, - l: SpinnerSize.S, - xl: SpinnerSize.S, + xs: 'xs', + s: 'xs', + m: 's', + l: 's', + xl: 's', } as const)[size] } diff --git a/packages/bezier-react/src/components/Spinner/Spinner.stories.tsx b/packages/bezier-react/src/components/Spinner/Spinner.stories.tsx index a65cc3b743..3d94d564b7 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.stories.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.stories.tsx @@ -6,10 +6,7 @@ import { } from '@storybook/react' import { Spinner } from './Spinner' -import { - type SpinnerProps, - SpinnerSize, -} from './Spinner.types' +import { type SpinnerProps } from './Spinner.types' const meta: Meta = { component: Spinner, @@ -19,11 +16,11 @@ const meta: Meta = { type: 'radio', }, options: [ - SpinnerSize.XL, - SpinnerSize.L, - SpinnerSize.M, - SpinnerSize.S, - SpinnerSize.XS, + 'xl', + 'l', + 'm', + 's', + 'xs', ], }, }, @@ -36,6 +33,6 @@ export const Primary = { render: Template, args: { - size: SpinnerSize.M, + size: 'm', }, } diff --git a/packages/bezier-react/src/components/Spinner/Spinner.test.tsx b/packages/bezier-react/src/components/Spinner/Spinner.test.tsx index 06270bf325..a44588b452 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.test.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.test.tsx @@ -6,7 +6,6 @@ import { SPINNER_TEST_ID, Spinner, } from './Spinner' -import { SpinnerSize } from './Spinner.types' describe('Spinner >', () => { const renderSpinner = (props?: React.ComponentProps) => render( @@ -51,7 +50,7 @@ describe('Spinner >', () => { }) it('should receive size', () => { - const { getByTestId } = renderSpinner({ size: SpinnerSize.M }) + const { getByTestId } = renderSpinner({ size: 'm' }) const renderedSpinner = getByTestId(SPINNER_TEST_ID) expect(renderedSpinner).toHaveClass('size-m') }) diff --git a/packages/bezier-react/src/components/Spinner/Spinner.tsx b/packages/bezier-react/src/components/Spinner/Spinner.tsx index 1b560fb5c7..bae2085680 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.tsx +++ b/packages/bezier-react/src/components/Spinner/Spinner.tsx @@ -4,10 +4,7 @@ import classNames from 'classnames' import { cssVar } from '~/src/utils/style' -import { - type SpinnerProps, - SpinnerSize, -} from './Spinner.types' +import { type SpinnerProps } from './Spinner.types' import styles from './Spinner.module.scss' @@ -16,7 +13,7 @@ export const SPINNER_TEST_ID = 'bezier-spinner' export const Spinner = forwardRef(function Spinner({ style, className, - size = SpinnerSize.M, + size = 'm', color, ...rest }, forwardedRef) { diff --git a/packages/bezier-react/src/components/Spinner/Spinner.types.ts b/packages/bezier-react/src/components/Spinner/Spinner.types.ts index c897287e97..8da74d36f7 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.types.ts +++ b/packages/bezier-react/src/components/Spinner/Spinner.types.ts @@ -4,13 +4,12 @@ import { type SizeProps, } from '~/src/types/props' -export enum SpinnerSize { - XL = 'xl', - L = 'l', - M = 'm', - S = 's', - XS = 'xs', -} +export type SpinnerSize = +| 'xl' +| 'l' +| 'm' +| 's' +| 'xs' /** @deprecated */ export enum SpinnerThickness { diff --git a/packages/bezier-react/src/components/Spinner/index.ts b/packages/bezier-react/src/components/Spinner/index.ts index 3a7e2b83bd..58b1903692 100644 --- a/packages/bezier-react/src/components/Spinner/index.ts +++ b/packages/bezier-react/src/components/Spinner/index.ts @@ -1,6 +1,6 @@ export { Spinner } from './Spinner' export { type SpinnerProps, - SpinnerSize, + type SpinnerSize, SpinnerThickness, } from './Spinner.types' From 704896df09798dce7bca505cf58d9df468960281 Mon Sep 17 00:00:00 2001 From: andrew Date: Thu, 8 Feb 2024 17:14:11 +0900 Subject: [PATCH 05/24] feat(spinner): rm deprecated `SpinnerThickness` prop --- .../bezier-react/src/components/Spinner/Spinner.types.ts | 7 ------- packages/bezier-react/src/components/Spinner/index.ts | 1 - 2 files changed, 8 deletions(-) diff --git a/packages/bezier-react/src/components/Spinner/Spinner.types.ts b/packages/bezier-react/src/components/Spinner/Spinner.types.ts index 8da74d36f7..7fffd2396e 100644 --- a/packages/bezier-react/src/components/Spinner/Spinner.types.ts +++ b/packages/bezier-react/src/components/Spinner/Spinner.types.ts @@ -11,13 +11,6 @@ export type SpinnerSize = | 's' | 'xs' -/** @deprecated */ -export enum SpinnerThickness { - Bold = 4, - Normal = 3, - Light = 2, -} - export interface SpinnerProps extends Omit, keyof ColorProps>, SizeProps, diff --git a/packages/bezier-react/src/components/Spinner/index.ts b/packages/bezier-react/src/components/Spinner/index.ts index 58b1903692..58b626b52e 100644 --- a/packages/bezier-react/src/components/Spinner/index.ts +++ b/packages/bezier-react/src/components/Spinner/index.ts @@ -2,5 +2,4 @@ export { Spinner } from './Spinner' export { type SpinnerProps, type SpinnerSize, - SpinnerThickness, } from './Spinner.types' From 21e25e41192a053a0b31dd2122372b2cb9c72bc7 Mon Sep 17 00:00:00 2001 From: andrew Date: Thu, 8 Feb 2024 17:22:25 +0900 Subject: [PATCH 06/24] feat(switch): rm deprecated `SwitchSize` prop --- .../transform.ts | 4 ++++ .../src/components/Slider/Slider.tsx | 7 ++----- .../src/components/Switch/Switch.stories.tsx | 17 +++-------------- .../src/components/Switch/Switch.tsx | 9 +++------ .../src/components/Switch/Switch.types.ts | 7 +++---- .../bezier-react/src/components/Switch/index.ts | 4 ++-- 6 files changed, 17 insertions(+), 31 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index 843a08715d..7bd9ced14f 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -137,6 +137,10 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { S: 's', XS: 'xs', }, + SwitchSize: { + M: 'm', + S: 's', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/Slider/Slider.tsx b/packages/bezier-react/src/components/Slider/Slider.tsx index cceb667ada..0001204567 100644 --- a/packages/bezier-react/src/components/Slider/Slider.tsx +++ b/packages/bezier-react/src/components/Slider/Slider.tsx @@ -9,10 +9,7 @@ import classNames from 'classnames' import { cssDimension } from '~/src/utils/style' -import { - Tooltip, - TooltipPosition, -} from '~/src/components/Tooltip' +import { Tooltip } from '~/src/components/Tooltip' import { type SliderProps } from './Slider.types' @@ -56,7 +53,7 @@ const SliderThumb = forwardRef e.preventDefault()} >
= { component: Switch, argTypes: { - size: { - control: { - type: 'radio', - }, - options: getObjectFromEnum(SwitchSize), - }, checked: { control: { type: 'boolean', @@ -47,7 +36,7 @@ export const Primary = { render: Template, args: { - size: SwitchSize.M, + size: 'm', checked: true, disabled: false, }, @@ -57,7 +46,7 @@ export const Uncontrolled = { render: Template, args: { - size: SwitchSize.M, + size: 'm', disabled: false, }, } diff --git a/packages/bezier-react/src/components/Switch/Switch.tsx b/packages/bezier-react/src/components/Switch/Switch.tsx index 51400f62bd..da064481ec 100644 --- a/packages/bezier-react/src/components/Switch/Switch.tsx +++ b/packages/bezier-react/src/components/Switch/Switch.tsx @@ -6,10 +6,7 @@ import classNames from 'classnames' import { BaseButton } from '~/src/components/BaseButton' import { useFormFieldProps } from '~/src/components/FormControl' -import { - type SwitchProps, - SwitchSize, -} from './Switch.types' +import { type SwitchProps } from './Switch.types' import styles from './Switch.module.scss' @@ -20,7 +17,7 @@ export const SWITCH_TEST_ID = 'bezier-switch' * @example * ```tsx * * ``` @@ -29,7 +26,7 @@ export const Switch = forwardRef(function Switch checked, defaultChecked = false, onCheckedChange, - size = SwitchSize.M, + size = 'm', className, ...rest }, forwardedRef) { diff --git a/packages/bezier-react/src/components/Switch/Switch.types.ts b/packages/bezier-react/src/components/Switch/Switch.types.ts index fa031b125c..0f6408e2b3 100644 --- a/packages/bezier-react/src/components/Switch/Switch.types.ts +++ b/packages/bezier-react/src/components/Switch/Switch.types.ts @@ -6,10 +6,9 @@ import type { SizeProps, } from '~/src/types/props' -export enum SwitchSize { - M = 'm', - S = 's', -} +export type SwitchSize = +| 'm' +| 's' interface SwitchOwnProps extends Omit { /** diff --git a/packages/bezier-react/src/components/Switch/index.ts b/packages/bezier-react/src/components/Switch/index.ts index a436c59b5b..f12988e4c2 100644 --- a/packages/bezier-react/src/components/Switch/index.ts +++ b/packages/bezier-react/src/components/Switch/index.ts @@ -1,5 +1,5 @@ export { Switch } from './Switch' -export { - type SwitchProps, +export type { + SwitchProps, SwitchSize, } from './Switch.types' From ab173a9830540acb2d31a5132d17f23f9c1a9c18 Mon Sep 17 00:00:00 2001 From: andrew Date: Thu, 8 Feb 2024 17:23:54 +0900 Subject: [PATCH 07/24] feat(tooltip): convert `TooltipPosition` enum to string literal --- .../transform.ts | 14 ++++++++ .../components/Tooltip/Tooltip.stories.tsx | 15 ++------- .../src/components/Tooltip/Tooltip.tsx | 28 ++++++++-------- .../src/components/Tooltip/Tooltip.types.ts | 32 ++++++++----------- .../src/components/Tooltip/index.ts | 4 +-- 5 files changed, 46 insertions(+), 47 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index 7bd9ced14f..247762b913 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -141,6 +141,20 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { M: 'm', S: 's', }, + TooltipPosition: { + TopCenter: 'top-center', + TopLeft: 'top-left', + TopRight: 'top-right', + RightCenter: 'right-center', + RightTop: 'right-top', + RightBottom: 'right-bottom', + BottomCenter: 'bottom-center', + BottomLeft: 'bottom-left', + BottomRight: 'bottom-right', + LeftCenter: 'left-center', + LeftTop: 'left-top', + LeftBottom: 'left-bottom', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.stories.tsx b/packages/bezier-react/src/components/Tooltip/Tooltip.stories.tsx index 1f749b6041..4d0fafb919 100644 --- a/packages/bezier-react/src/components/Tooltip/Tooltip.stories.tsx +++ b/packages/bezier-react/src/components/Tooltip/Tooltip.stories.tsx @@ -6,15 +6,10 @@ import { type StoryFn, } from '@storybook/react' -import { getObjectFromEnum } from '~/src/utils/story' - import { Button } from '~/src/components/Button' import { Tooltip } from './Tooltip' -import { - TooltipPosition, - type TooltipProps, -} from './Tooltip.types' +import { type TooltipProps } from './Tooltip.types' const meta: Meta = { component: Tooltip, @@ -24,12 +19,6 @@ const meta: Meta = { type: 'range', }, }, - placement: { - control: { - type: 'select', - }, - options: getObjectFromEnum(TooltipPosition), - }, }, } export default meta @@ -43,7 +32,7 @@ export const Primary = { args: { defaultShow: false, - placement: TooltipPosition.BottomCenter, + placement: 'bottom-center', offset: 4, disabled: false, keepInContainer: true, diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx index 7baca428e5..3a177899fe 100644 --- a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx +++ b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx @@ -21,7 +21,7 @@ import { InvertedThemeProvider } from '~/src/components/ThemeProvider' import { useRootElement } from '~/src/components/WindowProvider' import { - TooltipPosition, + type TooltipPosition, type TooltipProps, } from './Tooltip.types' @@ -31,62 +31,62 @@ function getSideAndAlign( placement: TooltipPosition, ): Pick { switch (placement) { - case TooltipPosition.TopCenter: + case 'top-center': return { side: 'top', align: 'center', } - case TooltipPosition.TopLeft: + case 'top-left': return { side: 'top', align: 'start', } - case TooltipPosition.TopRight: + case 'top-right': return { side: 'top', align: 'end', } - case TooltipPosition.RightCenter: + case 'right-center': return { side: 'right', align: 'center', } - case TooltipPosition.RightTop: + case 'right-top': return { side: 'right', align: 'start', } - case TooltipPosition.RightBottom: + case 'right-bottom': return { side: 'right', align: 'end', } - case TooltipPosition.BottomCenter: + case 'bottom-center': return { side: 'bottom', align: 'center', } - case TooltipPosition.BottomLeft: + case 'bottom-left': return { side: 'bottom', align: 'start', } - case TooltipPosition.BottomRight: + case 'bottom-right': return { side: 'bottom', align: 'end', } - case TooltipPosition.LeftCenter: + case 'left-center': return { side: 'left', align: 'center', } - case TooltipPosition.LeftTop: + case 'left-top': return { side: 'left', align: 'start', } - case TooltipPosition.LeftBottom: + case 'left-bottom': return { side: 'left', align: 'end', @@ -124,7 +124,7 @@ export const Tooltip = forwardRef(function Tooltip content, description, icon, - placement = TooltipPosition.BottomCenter, + placement = 'bottom-center', offset = 4, container: containerProp, keepInContainer = true, diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.types.ts b/packages/bezier-react/src/components/Tooltip/Tooltip.types.ts index d01706d86e..dfbeb84b55 100644 --- a/packages/bezier-react/src/components/Tooltip/Tooltip.types.ts +++ b/packages/bezier-react/src/components/Tooltip/Tooltip.types.ts @@ -7,23 +7,19 @@ import { type DisableProps, } from '~/src/types/props' -/** - * An enumeration that determines the position of `Tooltip`. - */ -export enum TooltipPosition { - TopCenter = 'topCenter', - TopLeft = 'topLeft', - TopRight = 'topRight', - RightCenter = 'rightCenter', - RightTop = 'rightTop', - RightBottom = 'rightBottom', - BottomCenter = 'bottomCenter', - BottomLeft = 'bottomLeft', - BottomRight = 'bottomRight', - LeftCenter = 'leftCenter', - LeftTop = 'leftTop', - LeftBottom = 'leftBottom', -} +export type TooltipPosition = +| 'top-center' +| 'top-left' +| 'top-right' +| 'right-center' +| 'right-top' +| 'right-bottom' +| 'bottom-center' +| 'bottom-left' +| 'bottom-right' +| 'left-center' +| 'left-top' +| 'left-bottom' interface TooltipOwnProps { /** @@ -44,7 +40,7 @@ interface TooltipOwnProps { icon?: BezierIcon /** * Options to determine the location from the trigger. - * @default TooltipPosition.BottomCenter + * @default 'bottom-center' */ placement?: TooltipPosition /** diff --git a/packages/bezier-react/src/components/Tooltip/index.ts b/packages/bezier-react/src/components/Tooltip/index.ts index a7c5c2bdfb..74e8063ae2 100644 --- a/packages/bezier-react/src/components/Tooltip/index.ts +++ b/packages/bezier-react/src/components/Tooltip/index.ts @@ -1,5 +1,5 @@ export { Tooltip } from './Tooltip' -export { +export type { TooltipPosition, - type TooltipProps, + TooltipProps, } from './Tooltip.types' From f417e150992c908e1537030df528fde90461a750 Mon Sep 17 00:00:00 2001 From: andrew Date: Thu, 8 Feb 2024 17:28:23 +0900 Subject: [PATCH 08/24] feat(overlay): conver `OverlayPosition` enum to string literal --- .../transform.ts | 18 +++++++ .../src/components/Button/Button.stories.tsx | 7 +-- .../components/Overlay/Overlay.stories.tsx | 35 +++++++------ .../src/components/Overlay/Overlay.test.tsx | 11 ++-- .../src/components/Overlay/Overlay.tsx | 3 +- .../src/components/Overlay/Overlay.types.ts | 35 +++++++------ .../src/components/Overlay/index.ts | 2 +- .../src/components/Overlay/utils.test.tsx | 33 ++++++------ .../src/components/Overlay/utils.ts | 50 +++++++++---------- .../src/components/Select/Select.tsx | 7 +-- 10 files changed, 104 insertions(+), 97 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index 247762b913..6f426f7a11 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -155,6 +155,24 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { LeftTop: 'left-top', LeftBottom: 'left-bottom', }, + OverlayPosition: { + TopCenter: 'top-center', + TopLeft: 'top-left', + TopRight: 'top-right', + RightCenter: 'right-center', + RightTop: 'right-top', + RightBottom: 'right-bottom', + BottomCenter: 'bottom-center', + BottomLeft: 'bottom-left', + BottomRight: 'bottom-right', + LeftCenter: 'left-center', + LeftTop: 'left-top', + LeftBottom: 'left-bottom', + InnerLeftTop: 'inner-left-top', + InnerLeftBottom: 'inner-left-bottom', + InnerRightTop: 'inner-right-top', + InnerRightBottom: 'inner-right-bottom', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/Button/Button.stories.tsx b/packages/bezier-react/src/components/Button/Button.stories.tsx index d3acef66ad..71883ad81a 100644 --- a/packages/bezier-react/src/components/Button/Button.stories.tsx +++ b/packages/bezier-react/src/components/Button/Button.stories.tsx @@ -34,10 +34,7 @@ import { LegacyVStack, } from '~/src/components/LegacyStack' import { ListItem } from '~/src/components/ListItem' -import { - Overlay, - OverlayPosition, -} from '~/src/components/Overlay' +import { Overlay } from '~/src/components/Overlay' import { SectionLabel } from '~/src/components/SectionLabel' import { Text } from '~/src/components/Text' @@ -427,7 +424,7 @@ const OpenDropdownButton = () => { onHide={() => setIsOpen(false)} target={target} container={container} - position={OverlayPosition.BottomLeft} + position="bottom-left" marginY={6} > = { component: Overlay, @@ -26,22 +25,22 @@ const meta: Meta = { type: 'radio', }, options: [ - OverlayPosition.TopCenter, - OverlayPosition.TopLeft, - OverlayPosition.TopRight, - OverlayPosition.RightCenter, - OverlayPosition.RightTop, - OverlayPosition.RightBottom, - OverlayPosition.BottomCenter, - OverlayPosition.BottomLeft, - OverlayPosition.BottomRight, - OverlayPosition.LeftCenter, - OverlayPosition.LeftTop, - OverlayPosition.LeftBottom, - OverlayPosition.InnerLeftTop, - OverlayPosition.InnerLeftBottom, - OverlayPosition.InnerRightTop, - OverlayPosition.InnerRightBottom, + 'top-center', + 'top-left', + 'top-right', + 'right-center', + 'right-top', + 'right-bottom', + 'bottom-center', + 'bottom-left', + 'bottom-right', + 'left-center', + 'left-top', + 'left-bottom', + 'inner-left-top', + 'inner-left-bottom', + 'inner-right-top', + 'inner-right-bottom', ], }, marginX: { @@ -120,7 +119,7 @@ export const Primary: StoryObj = { render: Template, args: { show: false, - position: OverlayPosition.BottomCenter, + position: 'bottom-center', marginY: 6, }, } diff --git a/packages/bezier-react/src/components/Overlay/Overlay.test.tsx b/packages/bezier-react/src/components/Overlay/Overlay.test.tsx index 99c7e8ffb0..37e29198cb 100644 --- a/packages/bezier-react/src/components/Overlay/Overlay.test.tsx +++ b/packages/bezier-react/src/components/Overlay/Overlay.test.tsx @@ -18,7 +18,6 @@ import type { OverlayProps, TargetRectAttr, } from './Overlay.types' -import { OverlayPosition } from './Overlay.types' import { getOverlayTranslation } from './utils' import styles from './Overlay.module.scss' @@ -72,7 +71,7 @@ describe('Overlay', () => { const result = getOverlayTranslation({ overlay: null, targetRect: null, - position: OverlayPosition.BottomCenter, + position: 'bottom-center', marginX: 0, marginY: 0, keepInContainer: true, @@ -96,7 +95,7 @@ describe('Overlay', () => { const result = getOverlayTranslation({ overlay, targetRect, - position: OverlayPosition.BottomLeft, + position: 'bottom-left', marginX: 0, marginY: 0, keepInContainer: true, @@ -118,7 +117,7 @@ describe('Overlay', () => { const result = getOverlayTranslation({ overlay, targetRect: overflowTarget, - position: OverlayPosition.BottomLeft, + position: 'bottom-left', marginX: 0, marginY: 0, keepInContainer: true, @@ -153,7 +152,7 @@ describe('Overlay', () => { const result = getOverlayTranslation({ overlay, targetRect: overflowTarget, - position: OverlayPosition.BottomLeft, + position: 'bottom-left', marginX: 0, marginY: 0, keepInContainer: true, @@ -176,7 +175,7 @@ describe('Overlay', () => { show: true, className: '', containerClassName: '', - position: OverlayPosition.LeftCenter, + position: 'left-center', marginX: 0, marginY: 0, keepInContainer: false, diff --git a/packages/bezier-react/src/components/Overlay/Overlay.tsx b/packages/bezier-react/src/components/Overlay/Overlay.tsx index ca69120ddf..55a13acdfd 100644 --- a/packages/bezier-react/src/components/Overlay/Overlay.tsx +++ b/packages/bezier-react/src/components/Overlay/Overlay.tsx @@ -27,7 +27,6 @@ import type { OverlayProps, TargetRectAttr, } from './Overlay.types' -import { OverlayPosition } from './Overlay.types' import { getOverlayStyle } from './utils' import styles from './Overlay.module.scss' @@ -43,7 +42,7 @@ export const Overlay = forwardRef(function Overlay show = false, container: givenContainer, target, - position = OverlayPosition.LeftCenter, + position = 'left-center', marginX = 0, marginY = 0, keepInContainer = false, diff --git a/packages/bezier-react/src/components/Overlay/Overlay.types.ts b/packages/bezier-react/src/components/Overlay/Overlay.types.ts index 45c65ee827..0133f23af9 100644 --- a/packages/bezier-react/src/components/Overlay/Overlay.types.ts +++ b/packages/bezier-react/src/components/Overlay/Overlay.types.ts @@ -22,24 +22,23 @@ export interface TargetRectAttr { clientLeft: number } -export enum OverlayPosition { - TopCenter = 'topCenter', - TopLeft = 'topLeft', - TopRight = 'topRight', - RightCenter = 'rightCenter', - RightTop = 'rightTop', - RightBottom = 'rightBottom', - BottomCenter = 'bottomCenter', - BottomLeft = 'bottomLeft', - BottomRight = 'bottomRight', - LeftCenter = 'leftCenter', - LeftTop = 'leftTop', - LeftBottom = 'leftBottom', - InnerLeftTop = 'innerLeftTop', - InnerLeftBottom = 'innerLeftBottom', - InnerRightTop = 'innerRightTop', - InnerRightBottom = 'innerRightBottom', -} +export type OverlayPosition = +| 'top-center' +| 'top-left' +| 'top-right' +| 'right-center' +| 'right-top' +| 'right-bottom' +| 'bottom-center' +| 'bottom-left' +| 'bottom-right' +| 'left-center' +| 'left-top' +| 'left-bottom' +| 'inner-left-top' +| 'inner-left-bottom' +| 'inner-right-top' +| 'inner-right-bottom' interface OverlayOwnProps { show?: boolean diff --git a/packages/bezier-react/src/components/Overlay/index.ts b/packages/bezier-react/src/components/Overlay/index.ts index 25245c8849..17a06310ad 100644 --- a/packages/bezier-react/src/components/Overlay/index.ts +++ b/packages/bezier-react/src/components/Overlay/index.ts @@ -1,5 +1,5 @@ export { Overlay } from './Overlay' export { - OverlayPosition, + type OverlayPosition, type OverlayProps, } from './Overlay.types' diff --git a/packages/bezier-react/src/components/Overlay/utils.test.tsx b/packages/bezier-react/src/components/Overlay/utils.test.tsx index be7471a5de..4a27c71c52 100644 --- a/packages/bezier-react/src/components/Overlay/utils.test.tsx +++ b/packages/bezier-react/src/components/Overlay/utils.test.tsx @@ -1,4 +1,3 @@ -import { OverlayPosition } from './Overlay.types' import { getOverlayPosition, getOverlayTranslation, @@ -78,7 +77,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.TopCenter, + position: 'top-center', }) expect(translateX).toEqual(-75) @@ -89,7 +88,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.TopLeft, + position: 'top-left', }) expect(translateX).toEqual(5) @@ -100,7 +99,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.TopRight, + position: 'top-right', }) expect(translateX).toEqual(-155) @@ -111,7 +110,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.RightCenter, + position: 'right-center', }) expect(translateX).toEqual(105) @@ -122,7 +121,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.RightTop, + position: 'right-top', }) expect(translateX).toEqual(105) @@ -133,7 +132,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.RightBottom, + position: 'right-bottom', }) expect(translateX).toEqual(105) @@ -144,7 +143,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.BottomCenter, + position: 'bottom-center', }) expect(translateX).toEqual(-75) @@ -155,7 +154,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.BottomLeft, + position: 'bottom-left', }) expect(translateX).toEqual(5) @@ -166,7 +165,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.BottomRight, + position: 'bottom-right', }) expect(translateX).toEqual(-155) @@ -177,7 +176,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.LeftCenter, + position: 'left-center', }) expect(translateX).toEqual(-265) @@ -188,7 +187,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.LeftTop, + position: 'left-top', }) expect(translateX).toEqual(-265) @@ -199,7 +198,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.LeftBottom, + position: 'left-bottom', }) expect(translateX).toEqual(-265) @@ -210,7 +209,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.InnerLeftTop, + position: 'inner-left-top', }) expect(translateX).toEqual(5) @@ -221,7 +220,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.InnerLeftBottom, + position: 'inner-left-bottom', }) expect(translateX).toEqual(5) @@ -232,7 +231,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.InnerRightTop, + position: 'inner-right-top', }) expect(translateX).toEqual(-155) @@ -243,7 +242,7 @@ describe('positionUtils Test >', () => { // @ts-ignore const { translateX, translateY } = getOverlayTranslation({ ...mockArgs, - position: OverlayPosition.InnerRightBottom, + position: 'inner-right-bottom', }) expect(translateX).toEqual(-155) diff --git a/packages/bezier-react/src/components/Overlay/utils.ts b/packages/bezier-react/src/components/Overlay/utils.ts index 3ae3a13002..2aef99d52e 100644 --- a/packages/bezier-react/src/components/Overlay/utils.ts +++ b/packages/bezier-react/src/components/Overlay/utils.ts @@ -1,6 +1,6 @@ import { type ContainerRectAttr, - OverlayPosition, + type OverlayPosition, type TargetRectAttr, } from './Overlay.types' @@ -63,27 +63,27 @@ export function getOverlayTranslation({ // pre position switch (position) { - case OverlayPosition.TopCenter: - case OverlayPosition.TopLeft: - case OverlayPosition.TopRight: + case 'top-center': + case 'top-left': + case 'top-right': translateY -= (overlayHeight + marginY) translateX += marginX break - case OverlayPosition.RightCenter: - case OverlayPosition.RightTop: - case OverlayPosition.RightBottom: + case 'right-center': + case 'right-top': + case 'right-bottom': translateX += (targetWidth + marginX) translateY += marginY break - case OverlayPosition.BottomCenter: - case OverlayPosition.BottomLeft: - case OverlayPosition.BottomRight: + case 'bottom-center': + case 'bottom-left': + case 'bottom-right': translateY += (targetHeight + marginY) translateX += marginX break - case OverlayPosition.LeftCenter: - case OverlayPosition.LeftTop: - case OverlayPosition.LeftBottom: + case 'left-center': + case 'left-top': + case 'left-bottom': translateX -= (overlayWidth + marginX) translateY += marginY break @@ -91,37 +91,37 @@ export function getOverlayTranslation({ switch (position) { // post position - case OverlayPosition.TopCenter: - case OverlayPosition.BottomCenter: + case 'top-center': + case 'bottom-center': translateX -= ((overlayWidth / 2) - (targetWidth / 2)) break - case OverlayPosition.TopRight: - case OverlayPosition.BottomRight: + case 'top-right': + case 'bottom-right': translateX -= (overlayWidth - targetWidth) break - case OverlayPosition.RightCenter: - case OverlayPosition.LeftCenter: + case 'right-center': + case 'left-center': translateY -= ((overlayHeight / 2) - (targetHeight / 2)) break - case OverlayPosition.RightBottom: - case OverlayPosition.LeftBottom: + case 'right-bottom': + case 'left-bottom': translateY -= (overlayHeight - targetHeight) break // inner position - case OverlayPosition.InnerLeftTop: + case 'inner-left-top': translateX = marginX translateY = marginY break - case OverlayPosition.InnerLeftBottom: + case 'inner-left-bottom': translateX = marginX translateY = targetHeight - overlayHeight + marginY break - case OverlayPosition.InnerRightTop: + case 'inner-right-top': translateX = targetWidth - overlayWidth + marginX translateY = marginY break - case OverlayPosition.InnerRightBottom: + case 'inner-right-bottom': translateX = targetWidth - overlayWidth + marginX translateY = targetHeight - overlayHeight + marginY break diff --git a/packages/bezier-react/src/components/Select/Select.tsx b/packages/bezier-react/src/components/Select/Select.tsx index 19fb1e5652..93854b2c49 100644 --- a/packages/bezier-react/src/components/Select/Select.tsx +++ b/packages/bezier-react/src/components/Select/Select.tsx @@ -27,10 +27,7 @@ import { Icon, IconSize, } from '~/src/components/Icon' -import { - Overlay, - OverlayPosition, -} from '~/src/components/Overlay' +import { Overlay } from '~/src/components/Overlay' import { Text } from '~/src/components/Text' import { @@ -61,7 +58,7 @@ export const Select = forwardRef(function Select({ dropdownMarginX, dropdownMarginY = 6, dropdownZIndex = 'overlay', - dropdownPosition = OverlayPosition.BottomLeft, + dropdownPosition = 'bottom-left', onClickTrigger, onHideDropdown, ...rest From 2135073ad4fc46b6d7f161dd39255f9f208d668e Mon Sep 17 00:00:00 2001 From: andrew Date: Fri, 9 Feb 2024 12:09:37 +0900 Subject: [PATCH 09/24] feat(progress-bar): deprecate `ProgressBarSize`, `ProgressBarVariant` props --- .../ProgressBar/ProgressBar.types.ts | 36 +++++-------------- .../src/components/ProgressBar/index.ts | 4 +-- 2 files changed, 11 insertions(+), 29 deletions(-) diff --git a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts b/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts index dd04bfe4fe..a7d4e27137 100644 --- a/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts +++ b/packages/bezier-react/src/components/ProgressBar/ProgressBar.types.ts @@ -4,32 +4,14 @@ import type { VariantProps, } from '~/src/types/props' -/** - * @deprecated Use string literal instead of enum. - * @example - * - * ```tsx - * - * ``` - */ -export enum ProgressBarSize { - M = 'm', - S = 's', -} +export type ProgressBarSize = +| 'm' +| 's' -/** - * @deprecated Use string literal instead of enum. - * @example - * - * ```tsx - * - * ``` - */ -export enum ProgressBarVariant { - Green = 'green', - GreenAlt = 'green-alt', - Monochrome = 'monochrome', -} +export type ProgressBarVariant = + | 'green' + | 'green-alt' + | 'monochrome' interface ProgressBarOwnProps { /** @@ -48,6 +30,6 @@ interface ProgressBarOwnProps { export interface ProgressBarProps extends BezierComponentProps<'div'>, - SizeProps, - VariantProps, + SizeProps, + VariantProps, ProgressBarOwnProps {} diff --git a/packages/bezier-react/src/components/ProgressBar/index.ts b/packages/bezier-react/src/components/ProgressBar/index.ts index d87e7cbf37..309e414d32 100644 --- a/packages/bezier-react/src/components/ProgressBar/index.ts +++ b/packages/bezier-react/src/components/ProgressBar/index.ts @@ -1,6 +1,6 @@ export { ProgressBar } from './ProgressBar' export { type ProgressBarProps, - ProgressBarSize, - ProgressBarVariant, + type ProgressBarSize, + type ProgressBarVariant, } from './ProgressBar.types' From 4217ad3191a8e9b3bbd4bca1d36f97c99e104f0e Mon Sep 17 00:00:00 2001 From: andrew Date: Fri, 9 Feb 2024 12:31:50 +0900 Subject: [PATCH 10/24] feat(legacy-tooltip): convert `LegacyTooltipPosition` enum to string literal --- .../transform.ts | 14 ++++ .../LegacyTooltip/LegacyTooltip.stories.tsx | 22 +------ .../LegacyTooltip/LegacyTooltip.tsx | 3 +- .../LegacyTooltip/LegacyTooltip.types.ts | 27 ++++---- .../LegacyTooltip/LegacyTooltipContent.tsx | 7 +- .../src/components/LegacyTooltip/index.ts | 2 +- .../src/components/LegacyTooltip/utils.ts | 66 +++++++++---------- 7 files changed, 65 insertions(+), 76 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index 6f426f7a11..ebb631e93b 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -155,6 +155,20 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { LeftTop: 'left-top', LeftBottom: 'left-bottom', }, + LegacyTooltipPosition: { + TopCenter: 'top-center', + TopLeft: 'top-left', + TopRight: 'top-right', + RightCenter: 'right-center', + RightTop: 'right-top', + RightBottom: 'right-bottom', + BottomCenter: 'bottom-center', + BottomLeft: 'bottom-left', + BottomRight: 'bottom-right', + LeftCenter: 'left-center', + LeftTop: 'left-top', + LeftBottom: 'left-bottom', + }, OverlayPosition: { TopCenter: 'top-center', TopLeft: 'top-left', diff --git a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.stories.tsx b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.stories.tsx index 96b258f48e..1872d3eddb 100644 --- a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.stories.tsx +++ b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.stories.tsx @@ -9,7 +9,6 @@ import { Center } from '~/src/components/Center' import { LegacyTooltip } from './LegacyTooltip' import { type LegacyTooltipProps } from './LegacyTooltip.types' -import { LegacyTooltipPosition } from './LegacyTooltip.types' const meta: Meta = { component: LegacyTooltip, @@ -19,25 +18,6 @@ const meta: Meta = { type: 'text', }, }, - placement: { - control: { - type: 'radio', - }, - options: [ - LegacyTooltipPosition.TopCenter, - LegacyTooltipPosition.TopLeft, - LegacyTooltipPosition.TopRight, - LegacyTooltipPosition.RightCenter, - LegacyTooltipPosition.RightTop, - LegacyTooltipPosition.RightBottom, - LegacyTooltipPosition.BottomCenter, - LegacyTooltipPosition.BottomLeft, - LegacyTooltipPosition.BottomRight, - LegacyTooltipPosition.LeftCenter, - LegacyTooltipPosition.LeftTop, - LegacyTooltipPosition.LeftBottom, - ], - }, offset: { control: { type: 'range', @@ -87,7 +67,7 @@ export const Primary = { content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", lazy: true, - placement: LegacyTooltipPosition.BottomCenter, + placement: 'bottom-center', offset: 4, disabled: false, keepInContainer: false, diff --git a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx index 02908ddd9e..d6d624d436 100644 --- a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx +++ b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.tsx @@ -14,7 +14,6 @@ import classNames from 'classnames' import { useWindow } from '~/src/components/WindowProvider' import { type LegacyTooltipProps } from './LegacyTooltip.types' -import { LegacyTooltipPosition } from './LegacyTooltip.types' import { LegacyTooltipContent } from './LegacyTooltipContent' import styles from './LegacyTooltip.module.scss' @@ -36,7 +35,7 @@ export const LegacyTooltip = memo(forwardRef(function LegacyTooltip( contentWrapperClassName, content = null, lazy = false, // optional prop 에서 추후 default behavior 를 lazy 하게 바꿀 예정 - placement = LegacyTooltipPosition.BottomCenter, + placement = 'bottom-center', disabled = false, offset = 4, keepInContainer = false, diff --git a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.types.ts b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.types.ts index 119a2dc14f..f85e493ab7 100644 --- a/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.types.ts +++ b/packages/bezier-react/src/components/LegacyTooltip/LegacyTooltip.types.ts @@ -55,17 +55,16 @@ export interface GetReplacement extends Required = ({ contentWrapperStyle: givenContentWrapperStyle, disabled = false, keepInContainer = false, - placement = LegacyTooltipPosition.BottomCenter, + placement = 'bottom-center', tooltipContainer, offset = 4, allowHover = false, diff --git a/packages/bezier-react/src/components/LegacyTooltip/index.ts b/packages/bezier-react/src/components/LegacyTooltip/index.ts index 91a7ea9cbc..5f9fca9902 100644 --- a/packages/bezier-react/src/components/LegacyTooltip/index.ts +++ b/packages/bezier-react/src/components/LegacyTooltip/index.ts @@ -1,6 +1,6 @@ export { LegacyTooltip } from './LegacyTooltip' export { type LegacyTooltipContentProps, - LegacyTooltipPosition, + type LegacyTooltipPosition, type LegacyTooltipProps, } from './LegacyTooltip.types' diff --git a/packages/bezier-react/src/components/LegacyTooltip/utils.ts b/packages/bezier-react/src/components/LegacyTooltip/utils.ts index b902cde18e..73b10de5ee 100644 --- a/packages/bezier-react/src/components/LegacyTooltip/utils.ts +++ b/packages/bezier-react/src/components/LegacyTooltip/utils.ts @@ -1,7 +1,7 @@ import { type GetReplacement, type GetTooltipStyle, - LegacyTooltipPosition, + type LegacyTooltipPosition, } from './LegacyTooltip.types' export function getReplacement({ @@ -35,42 +35,42 @@ export function getReplacement({ if (isOverTop) { if (isOverLeft) { - return LegacyTooltipPosition.BottomLeft + return 'bottom-left' } if (isOverRight) { - return LegacyTooltipPosition.BottomRight + return 'bottom-right' } - return LegacyTooltipPosition.BottomCenter + return 'bottom-center' } if (isOverBottom) { if (isOverLeft) { - return LegacyTooltipPosition.TopLeft + return 'top-left' } if (isOverRight) { - return LegacyTooltipPosition.TopRight + return 'top-right' } - return LegacyTooltipPosition.TopCenter + return 'top-center' } if (isOverLeft) { if (isOverTop) { - return LegacyTooltipPosition.RightTop + return 'right-top' } if (isOverBottom) { - return LegacyTooltipPosition.RightBottom + return 'right-bottom' } - return LegacyTooltipPosition.RightCenter + return 'right-center' } if (isOverRight) { if (isOverTop) { - return LegacyTooltipPosition.LeftTop + return 'left-top' } if (isOverBottom) { - return LegacyTooltipPosition.LeftBottom + return 'left-bottom' } - return LegacyTooltipPosition.LeftCenter + return 'left-center' } return placement @@ -101,50 +101,50 @@ export function getTooltipStyle({ let offsetStyle = {} switch (placement) { - case LegacyTooltipPosition.TopCenter: - case LegacyTooltipPosition.TopLeft: - case LegacyTooltipPosition.TopRight: + case 'top-center': + case 'top-left': + case 'top-right': translateY = -100 offsetBottom = offset break - case LegacyTooltipPosition.RightCenter: - case LegacyTooltipPosition.RightTop: - case LegacyTooltipPosition.RightBottom: + case 'right-center': + case 'right-top': + case 'right-bottom': left += containerWidth offsetLeft = offset break - case LegacyTooltipPosition.BottomCenter: - case LegacyTooltipPosition.BottomLeft: - case LegacyTooltipPosition.BottomRight: + case 'bottom-center': + case 'bottom-left': + case 'bottom-right': top += containerHeight offsetTop = offset break - case LegacyTooltipPosition.LeftCenter: - case LegacyTooltipPosition.LeftTop: - case LegacyTooltipPosition.LeftBottom: + case 'left-center': + case 'left-top': + case 'left-bottom': translateX = -100 offsetRight = offset break } switch (placement) { - case LegacyTooltipPosition.TopCenter: - case LegacyTooltipPosition.BottomCenter: + case 'top-center': + case 'bottom-center': translateX = -50 left += (containerWidth / 2) break - case LegacyTooltipPosition.TopRight: - case LegacyTooltipPosition.BottomRight: + case 'top-right': + case 'bottom-right': translateX = -100 left += containerWidth break - case LegacyTooltipPosition.RightCenter: - case LegacyTooltipPosition.LeftCenter: + case 'right-center': + case 'left-center': translateY = -50 top += (containerHeight / 2) break - case LegacyTooltipPosition.RightBottom: - case LegacyTooltipPosition.LeftBottom: + case 'right-bottom': + case 'left-bottom': translateY = -100 top += containerHeight break From 43a716c3a06ab5ac69b67bda45d686e601382fbb Mon Sep 17 00:00:00 2001 From: andrew Date: Fri, 9 Feb 2024 12:37:15 +0900 Subject: [PATCH 11/24] feat(text-field): convert `TextFieldSize`, `TextFieldVariant` enum to string literal --- .../transform.ts | 14 ++++++++++ .../TextField/TextField.stories.tsx | 13 +--------- .../src/components/TextField/TextField.tsx | 6 ++--- .../components/TextField/TextField.types.ts | 26 +++++++++---------- .../src/components/TextField/index.ts | 4 +-- 5 files changed, 31 insertions(+), 32 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index ebb631e93b..94d7f1add7 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -187,6 +187,20 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { InnerRightTop: 'inner-right-top', InnerRightBottom: 'inner-right-bottom', }, + TextFieldType: { + Search: 'search', + Text: 'text', + Email: 'email', + Password: 'password', + Tel: 'tel', + Url: 'url', + Hidden: 'hidden', + Number: 'number', + }, + TextFieldVariant: { + Primary: 'primary', + Secondary: 'secondary', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/TextField/TextField.stories.tsx b/packages/bezier-react/src/components/TextField/TextField.stories.tsx index e53d64a465..f4d45ac8fd 100644 --- a/packages/bezier-react/src/components/TextField/TextField.stories.tsx +++ b/packages/bezier-react/src/components/TextField/TextField.stories.tsx @@ -10,13 +10,10 @@ import { type StoryFn, } from '@storybook/react' -import { getObjectFromEnum } from '~/src/utils/story' - import { TextField } from './TextField' import { type TextFieldProps, type TextFieldRef, - TextFieldVariant, } from './TextField.types' const meta: Meta = { @@ -60,7 +57,7 @@ export const Primary = { render: PrimaryTemplate, args: { - variant: TextFieldVariant.Primary, + variant: 'primary', size: 'm', disabled: false, readOnly: false, @@ -70,12 +67,4 @@ export const Primary = { maxLength: 10, placeholder: 'this is placeholder', }, - argTypes: { - variant: { - control: { - type: 'radio', - }, - options: getObjectFromEnum(TextFieldVariant), - }, - }, } diff --git a/packages/bezier-react/src/components/TextField/TextField.tsx b/packages/bezier-react/src/components/TextField/TextField.tsx index 3f2d019246..e584589731 100644 --- a/packages/bezier-react/src/components/TextField/TextField.tsx +++ b/packages/bezier-react/src/components/TextField/TextField.tsx @@ -37,8 +37,6 @@ import { type TextFieldItemProps, type TextFieldProps, type TextFieldRef, - TextFieldType, - TextFieldVariant, } from './TextField.types' import styles from './TextField.module.scss' @@ -166,7 +164,7 @@ export const TextField = forwardRef(function TextF size: sizeProps, autoFocus, autoComplete = 'off', - variant = TextFieldVariant.Primary, + variant = 'primary', allowClear = false, selectAllOnInit = false, selectAllOnFocus = false, @@ -224,7 +222,7 @@ export const TextField = forwardRef(function TextF }, [window]) const setSelectionRange = useCallback((start?: number, end?: number, direction?: SelectionRangeDirections) => { - if (type && [TextFieldType.Number, TextFieldType.Email, TextFieldType.Hidden].includes(type)) { return } + if (type && ['number', 'email', 'hidden'].includes(type)) { return } inputRef.current?.setSelectionRange(start || 0, end || 0, direction || 'none') }, [type]) diff --git a/packages/bezier-react/src/components/TextField/TextField.types.ts b/packages/bezier-react/src/components/TextField/TextField.types.ts index d7ebf78294..19748e0531 100644 --- a/packages/bezier-react/src/components/TextField/TextField.types.ts +++ b/packages/bezier-react/src/components/TextField/TextField.types.ts @@ -13,23 +13,21 @@ import type { VariantProps, } from '~/src/types/props' -export enum TextFieldType { - Search = 'search', - Text = 'text', - Email = 'email', - Password = 'password', - Tel = 'tel', - Url = 'url', - Hidden = 'hidden', - Number = 'number', -} +export type TextFieldType = +| 'search' +| 'text' +| 'email' +| 'password' +| 'tel' +| 'url' +| 'hidden' +| 'number' export type SelectionRangeDirections = 'forward' | 'backward' | 'none' -export enum TextFieldVariant { - Primary = 'primary', - Secondary = 'secondary', -} +export type TextFieldVariant = +| 'primary' +| 'secondary' export type TextFieldItemProps = { icon: BezierIcon diff --git a/packages/bezier-react/src/components/TextField/index.ts b/packages/bezier-react/src/components/TextField/index.ts index 40c79e5a00..c113426e75 100644 --- a/packages/bezier-react/src/components/TextField/index.ts +++ b/packages/bezier-react/src/components/TextField/index.ts @@ -2,6 +2,6 @@ export { TextField } from './TextField' export { type TextFieldProps, type TextFieldRef, - TextFieldType, - TextFieldVariant, + type TextFieldType, + type TextFieldVariant, } from './TextField.types' From 9e7dbf7d52ac2623ba8970c7246b1d5f1492009c Mon Sep 17 00:00:00 2001 From: andrew Date: Fri, 9 Feb 2024 12:43:04 +0900 Subject: [PATCH 12/24] feat(tag-badge): convert `TagBadgeSize`, `TagBadgeVariant` enum to string literal --- .../transform.ts | 22 ++++++ .../src/components/Badge/Badge.stories.tsx | 24 +----- .../src/components/Badge/Badge.tsx | 14 ++-- .../src/components/Tag/Tag.stories.tsx | 24 +----- .../bezier-react/src/components/Tag/Tag.tsx | 6 +- .../TagBadgeCommon/TagBadgeCommon.ts | 78 +++++++++---------- .../src/components/TagBadgeCommon/index.ts | 4 +- packages/bezier-react/src/index.ts | 4 +- 8 files changed, 77 insertions(+), 99 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index 94d7f1add7..ebe2eaf4b3 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -201,6 +201,28 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { Primary: 'primary', Secondary: 'secondary', }, + TagBadgeVariant: { + Default: 'default', + MonochromeLight: 'monochrome-light', + MonochromeDark: 'monochrome-dark', + Blue: 'blue', + Cobalt: 'cobalt', + Teal: 'teal', + Green: 'green', + Olive: 'olive', + Pink: 'pink', + Navy: 'navy', + Yellow: 'yellow', + Orange: 'orange', + Red: 'red', + Purple: 'purple', + }, + TagBadgeSize: { + XS: 'xs', + S: 's', + M: 'm', + L: 'l', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/Badge/Badge.stories.tsx b/packages/bezier-react/src/components/Badge/Badge.stories.tsx index 9cd6b945d4..63f3d1cc04 100644 --- a/packages/bezier-react/src/components/Badge/Badge.stories.tsx +++ b/packages/bezier-react/src/components/Badge/Badge.stories.tsx @@ -7,31 +7,13 @@ import { type StoryObj, } from '@storybook/react' -import { - TagBadgeSize, - TagBadgeVariant, -} from '~/src/components/TagBadgeCommon' - import { Badge } from './Badge' import { type BadgeProps } from './Badge.types' const meta:Meta = { component: Badge, - argTypes: { - size: { - control: { - type: 'radio', - }, - options: Object.keys(TagBadgeSize).map(k => TagBadgeSize[k]), - }, - variant: { - control: { - type: 'radio', - }, - options: Object.keys(TagBadgeVariant).map(k => TagBadgeVariant[k]), - }, - }, } + export default meta const Template: StoryFn = ({ children, ...badgeProps }) => ( @@ -43,8 +25,8 @@ export const Primary: StoryObj = { args: { children: 'Design', - size: TagBadgeSize.M, + size: 'm', icon: AppleIcon, - variant: TagBadgeVariant.Default, + variant: 'default', }, } diff --git a/packages/bezier-react/src/components/Badge/Badge.tsx b/packages/bezier-react/src/components/Badge/Badge.tsx index 6ed46ee925..2d03e2ea89 100644 --- a/packages/bezier-react/src/components/Badge/Badge.tsx +++ b/packages/bezier-react/src/components/Badge/Badge.tsx @@ -11,11 +11,7 @@ import { Icon, IconSize, } from '~/src/components/Icon' -import { - TagBadgeSize, - TagBadgeVariant, - getProperTagBadgeTypo, -} from '~/src/components/TagBadgeCommon' +import { getProperTagBadgeTypo } from '~/src/components/TagBadgeCommon' import commonStyles from '~/src/components/TagBadgeCommon/TagBadge.module.scss' import { Text } from '~/src/components/Text' @@ -30,8 +26,8 @@ export const BADGE_TEST_ID = 'bezier-badge' * @example * ```tsx * * Beta @@ -39,8 +35,8 @@ export const BADGE_TEST_ID = 'bezier-badge' * ``` */ export const Badge = memo(forwardRef(function Badge({ - size = TagBadgeSize.M, - variant = TagBadgeVariant.Default, + size = 'm', + variant = 'default', icon, children, className, diff --git a/packages/bezier-react/src/components/Tag/Tag.stories.tsx b/packages/bezier-react/src/components/Tag/Tag.stories.tsx index 415c9f4e1b..9844fa5f9a 100644 --- a/packages/bezier-react/src/components/Tag/Tag.stories.tsx +++ b/packages/bezier-react/src/components/Tag/Tag.stories.tsx @@ -6,30 +6,12 @@ import { type StoryObj, } from '@storybook/react' -import { - TagBadgeSize, - TagBadgeVariant, -} from '~/src/components/TagBadgeCommon' - import { Tag } from './Tag' const meta: Meta = { component: Tag, - argTypes: { - size: { - control: { - type: 'radio', - }, - options: TagBadgeSize, - }, - variant: { - control: { - type: 'radio', - }, - options: TagBadgeVariant, - }, - }, } + export default meta const Template: StoryFn = ({ children, ...otherProps }) => ( @@ -41,8 +23,8 @@ export const Primary: StoryObj = { args: { children: 'Design', - size: TagBadgeSize.M, - variant: TagBadgeVariant.Default, + size: 'm', + variant: 'default', // eslint-disable-next-line no-console onDelete: console.log, // eslint-disable-next-line no-console diff --git a/packages/bezier-react/src/components/Tag/Tag.tsx b/packages/bezier-react/src/components/Tag/Tag.tsx index dd3833c378..58a8052f2b 100644 --- a/packages/bezier-react/src/components/Tag/Tag.tsx +++ b/packages/bezier-react/src/components/Tag/Tag.tsx @@ -19,8 +19,6 @@ import { IconSize, } from '~/src/components/Icon' import { - TagBadgeSize, - TagBadgeVariant, getProperTagBadgeBgColor, getProperTagBadgeTypo, } from '~/src/components/TagBadgeCommon' @@ -48,8 +46,8 @@ export const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon' * ``` */ export const Tag = memo(forwardRef(function Tag({ - size = TagBadgeSize.M, - variant = TagBadgeVariant.Default, + size = 'm', + variant = 'default', color: givenColor, children, className, diff --git a/packages/bezier-react/src/components/TagBadgeCommon/TagBadgeCommon.ts b/packages/bezier-react/src/components/TagBadgeCommon/TagBadgeCommon.ts index ce6f0fc3cb..26517d79b0 100644 --- a/packages/bezier-react/src/components/TagBadgeCommon/TagBadgeCommon.ts +++ b/packages/bezier-react/src/components/TagBadgeCommon/TagBadgeCommon.ts @@ -3,59 +3,57 @@ import { type SemanticColor } from '~/src/types/tokens' /** * @deprecated */ -export enum TagBadgeSize { - XS = 'xs', - S = 's', - M = 'm', - L = 'l', -} +export type TagBadgeSize = +| 'xs' +| 's' +| 'm' +| 'l' /** * @deprecated */ -export enum TagBadgeVariant { - Default = 'Default', - MonochromeLight = 'MonochromeLight', - MonochromeDark = 'MonochromeDark', - Blue = 'Blue', - Cobalt = 'Cobalt', - Teal = 'Teal', - Green = 'Green', - Olive = 'Olive', - Pink = 'Pink', - Navy = 'Navy', - Yellow = 'Yellow', - Orange = 'Orange', - Red = 'Red', - Purple = 'Purple', -} +export type TagBadgeVariant = +| 'default' +| 'monochrome-light' +| 'monochrome-dark' +| 'blue' +| 'cobalt' +| 'teal' +| 'green' +| 'olive' +| 'pink' +| 'navy' +| 'yellow' +| 'orange' +| 'red' +| 'purple' /** * @deprecated */ export const TagBadgeBgColorPreset = { - [TagBadgeVariant.Default]: 'bg-black-lighter', - [TagBadgeVariant.MonochromeLight]: 'bg-black-lighter', - [TagBadgeVariant.MonochromeDark]: 'bg-black-darker', - [TagBadgeVariant.Blue]: 'bgtxt-blue-lighter', - [TagBadgeVariant.Cobalt]: 'bgtxt-cobalt-lighter', - [TagBadgeVariant.Teal]: 'bgtxt-teal-lighter', - [TagBadgeVariant.Green]: 'bgtxt-green-lighter', - [TagBadgeVariant.Olive]: 'bgtxt-olive-lighter', - [TagBadgeVariant.Pink]: 'bgtxt-pink-lighter', - [TagBadgeVariant.Navy]: 'bgtxt-navy-lighter', - [TagBadgeVariant.Yellow]: 'bgtxt-yellow-lighter', - [TagBadgeVariant.Orange]: 'bgtxt-orange-lighter', - [TagBadgeVariant.Red]: 'bgtxt-red-lighter', - [TagBadgeVariant.Purple]: 'bgtxt-purple-lighter', + default: 'bg-black-lighter', + 'monochrome-light': 'bg-black-lighter', + 'monochrome-dark': 'bg-black-darker', + blue: 'bgtxt-blue-lighter', + cobalt: 'bgtxt-cobalt-lighter', + teal: 'bgtxt-teal-lighter', + green: 'bgtxt-green-lighter', + olive: 'bgtxt-olive-lighter', + pink: 'bgtxt-pink-lighter', + navy: 'bgtxt-navy-lighter', + yellow: 'bgtxt-yellow-lighter', + orange: 'bgtxt-orange-lighter', + red: 'bgtxt-red-lighter', + purple: 'bgtxt-purple-lighter', } as const export function getProperTagBadgeTypo(size: TagBadgeSize) { return { - [TagBadgeSize.XS]: '11' as const, - [TagBadgeSize.S]: '13' as const, - [TagBadgeSize.M]: '14' as const, - [TagBadgeSize.L]: '15' as const, + xs: '11' as const, + s: '13' as const, + m: '14' as const, + l: '15' as const, }[size] } diff --git a/packages/bezier-react/src/components/TagBadgeCommon/index.ts b/packages/bezier-react/src/components/TagBadgeCommon/index.ts index ec560d116d..55f39033a5 100644 --- a/packages/bezier-react/src/components/TagBadgeCommon/index.ts +++ b/packages/bezier-react/src/components/TagBadgeCommon/index.ts @@ -1,7 +1,7 @@ export { TagBadgeBgColorPreset, - TagBadgeSize, - TagBadgeVariant, + type TagBadgeSize, + type TagBadgeVariant, getProperTagBadgeBgColor, getProperTagBadgeTypo, } from './TagBadgeCommon' diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts index 3893402c23..6c030c2b2f 100644 --- a/packages/bezier-react/src/index.ts +++ b/packages/bezier-react/src/index.ts @@ -49,8 +49,8 @@ export * from '~/src/components/Tabs' export * from '~/src/components/Tag' export { TagBadgeBgColorPreset, - TagBadgeSize, - TagBadgeVariant, + type TagBadgeSize, + type TagBadgeVariant, } from '~/src/components/TagBadgeCommon' export * from '~/src/components/Text' export * from '~/src/components/TextArea' From 06edcf68b45936bc57ba212d0ce9a1b963514e7c Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 10:00:33 +0900 Subject: [PATCH 13/24] feat(icon): convert `IconSize` enum to string literal --- .../transform.ts | 9 +++ .../components/AvatarGroup/AvatarGroup.tsx | 21 +++---- .../src/components/Badge/Badge.tsx | 7 +-- .../src/components/Banner/Banner.tsx | 9 +-- .../src/components/Button/Button.tsx | 15 ++--- .../src/components/Checkbox/Checkbox.tsx | 7 +-- .../bezier-react/src/components/Help/Help.tsx | 7 +-- .../src/components/Icon/Icon.stories.tsx | 58 ++++++++----------- .../bezier-react/src/components/Icon/Icon.tsx | 18 ++++-- .../src/components/Icon/Icon.types.ts | 20 +++---- .../bezier-react/src/components/Icon/index.ts | 4 +- .../components/KeyValueItem/KeyValueItem.tsx | 7 +-- .../src/components/ListItem/ListItem.tsx | 7 +-- .../components/NavGroup/NavGroup.stories.tsx | 7 +-- .../src/components/NavGroup/NavGroup.test.tsx | 7 +-- .../src/components/NavGroup/NavGroup.tsx | 9 +-- .../components/NavItem/NavItem.stories.tsx | 7 +-- .../src/components/NavItem/NavItem.tsx | 7 +-- .../components/OutlineItem/OutlineItem.tsx | 9 +-- .../components/SectionLabel/SectionLabel.tsx | 7 +-- .../src/components/Select/Select.tsx | 11 ++-- .../src/components/Status/Status.tsx | 7 +-- .../bezier-react/src/components/Tabs/Tabs.tsx | 11 ++-- .../bezier-react/src/components/Tag/Tag.tsx | 7 +-- .../src/components/TextField/TextField.tsx | 11 ++-- .../src/components/Toast/Toast.tsx | 9 +-- .../src/components/Tooltip/Tooltip.tsx | 7 +-- 27 files changed, 121 insertions(+), 184 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index ebe2eaf4b3..fd3c339499 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -223,6 +223,15 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { M: 'm', L: 'l', }, + IconSize: { + XL: 'xl', + L: 'l', + Normal: 'normal', + S: 's', + XS: 'xs', + XXS: 'xxs', + XXXS: 'xxxs', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx index b35a903f61..03cb934b8f 100644 --- a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx +++ b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx @@ -16,10 +16,7 @@ import { type AvatarSize, useAvatarRadiusToken, } from '~/src/components/Avatar' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { Text } from '~/src/components/Text' import { @@ -41,14 +38,14 @@ function getRestAvatarListCountText(count: number, max: number) { // TODO: Not specified function getProperIconSize(avatarSize: AvatarSize) { return { - 20: IconSize.XXS, - 24: IconSize.XS, - 30: IconSize.S, - 36: IconSize.Normal, - 42: IconSize.Normal, - 48: IconSize.L, - 90: IconSize.L, - 120: IconSize.L, + 20: 'xxs', + 24: 'xs', + 30: 's', + 36: 'normal', + 42: 'normal', + 48: 'l', + 90: 'l', + 120: 'l', }[avatarSize] } diff --git a/packages/bezier-react/src/components/Badge/Badge.tsx b/packages/bezier-react/src/components/Badge/Badge.tsx index 2d03e2ea89..af42500ae4 100644 --- a/packages/bezier-react/src/components/Badge/Badge.tsx +++ b/packages/bezier-react/src/components/Badge/Badge.tsx @@ -7,10 +7,7 @@ import classNames from 'classnames' import { isEmpty } from '~/src/utils/type' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { getProperTagBadgeTypo } from '~/src/components/TagBadgeCommon' import commonStyles from '~/src/components/TagBadgeCommon/TagBadge.module.scss' import { Text } from '~/src/components/Text' @@ -58,7 +55,7 @@ export const Badge = memo(forwardRef(function Badge( { icon && ( ) } diff --git a/packages/bezier-react/src/components/Banner/Banner.tsx b/packages/bezier-react/src/components/Banner/Banner.tsx index 08751a55cd..f02e0a11c4 100644 --- a/packages/bezier-react/src/components/Banner/Banner.tsx +++ b/packages/bezier-react/src/components/Banner/Banner.tsx @@ -7,10 +7,7 @@ import { warn } from '~/src/utils/assert' import { isNil } from '~/src/utils/type' import { Button } from '~/src/components/Button' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { LegacyIcon, isIconName, @@ -99,14 +96,14 @@ export const Banner = forwardRef(function Banner({ className={styles.Icon} source={icon} color={iconColor} - size={IconSize.S} + size="s" /> ) : ( ) }
diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx index d4caba4914..3195b3a5e7 100644 --- a/packages/bezier-react/src/components/Button/Button.tsx +++ b/packages/bezier-react/src/components/Button/Button.tsx @@ -9,10 +9,7 @@ import classNames from 'classnames' import { warn } from '~/src/utils/assert' import { BaseButton } from '~/src/components/BaseButton' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { LegacyIcon, isIconName, @@ -42,11 +39,11 @@ function getTypography(size: ButtonSize) { function getIconSize(size: ButtonSize) { return ({ - xs: IconSize.XS, - s: IconSize.XS, - m: IconSize.S, - l: IconSize.S, - xl: IconSize.Normal, + xs: 'xs', + s: 'xs', + m: 's', + l: 's', + xl: 'normal', } as const)[size] } diff --git a/packages/bezier-react/src/components/Checkbox/Checkbox.tsx b/packages/bezier-react/src/components/Checkbox/Checkbox.tsx index f650681e71..972c27c60b 100644 --- a/packages/bezier-react/src/components/Checkbox/Checkbox.tsx +++ b/packages/bezier-react/src/components/Checkbox/Checkbox.tsx @@ -12,10 +12,7 @@ import { getFormFieldSizeClassName } from '~/src/types/props-helpers' import { BaseButton } from '~/src/components/BaseButton' import { useFormFieldProps } from '~/src/components/FormControl' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { type CheckboxProps, @@ -45,7 +42,7 @@ const CheckIcon = forwardRef(function CheckIcon( className={styles.CheckIcon} ref={forwardedRef} source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon} - size={IconSize.XS} + size="xs" color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'} {...props} /> diff --git a/packages/bezier-react/src/components/Help/Help.tsx b/packages/bezier-react/src/components/Help/Help.tsx index 9f513054dc..238ec94bdd 100644 --- a/packages/bezier-react/src/components/Help/Help.tsx +++ b/packages/bezier-react/src/components/Help/Help.tsx @@ -4,10 +4,7 @@ import { HelpFilledIcon } from '@channel.io/bezier-icons' import { isEmpty } from '~/src/utils/type' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { Tooltip } from '~/src/components/Tooltip' import { type HelpProps } from './Help.types' @@ -33,7 +30,7 @@ export const Help = forwardRef(function Help({ diff --git a/packages/bezier-react/src/components/Icon/Icon.stories.tsx b/packages/bezier-react/src/components/Icon/Icon.stories.tsx index aa84abbb60..790cdbe64a 100644 --- a/packages/bezier-react/src/components/Icon/Icon.stories.tsx +++ b/packages/bezier-react/src/components/Icon/Icon.stories.tsx @@ -28,7 +28,6 @@ import { } from '@storybook/react' import { type SemanticColor } from '~/src/types/tokens' -import { getObjectFromEnum } from '~/src/utils/story' import { camelCase } from '~/src/utils/string' import { @@ -44,10 +43,7 @@ import { useToken } from '~/src/components/ThemeProvider' import { Icon } from './Icon' import mdx from './Icon.mdx' -import { - type IconProps, - IconSize, -} from './Icon.types' +import { type IconProps } from './Icon.types' const meta: Meta = { component: Icon, @@ -56,21 +52,13 @@ const meta: Meta = { page: mdx, }, }, - argTypes: { - size: { - control: { - type: 'radio', - }, - options: getObjectFromEnum(IconSize), - }, - }, } export default meta export const Playground: StoryObj = { args: { source: ChannelIcon, - size: IconSize.Normal, + size: 'normal', color: 'bg-black-darker', }, } @@ -111,7 +99,7 @@ export const AllIcons: StoryObj> = { ), args: { - size: IconSize.Normal, + size: 'normal', color: 'bg-black-darkest', }, } @@ -167,7 +155,7 @@ export const Overview: StoryFn<{}> = () => ( ] .map(semanticName => ( - + )) } @@ -175,15 +163,15 @@ export const Overview: StoryFn<{}> = () => ( - { [ - IconSize.XXXS, - IconSize.XXS, - IconSize.XS, - IconSize.S, - IconSize.Normal, - IconSize.L, - IconSize.XL, - ].map((size) => ( + { ([ + 'xxxs', + 'xxs', + 'xs', + 's', + 'normal', + 'l', + 'xl', + ] as const).map((size) => ( @@ -233,15 +221,15 @@ export const UsageColor: StoryObj<{}> = { export const UsageSize: StoryFn<{}> = () => ( - { [ - { label: 'XXXS', size: IconSize.XXXS }, - { label: 'XXS', size: IconSize.XXS }, - { label: 'XS', size: IconSize.XS }, - { label: 'S', size: IconSize.S }, - { label: 'Normal', size: IconSize.Normal }, - { label: 'L', size: IconSize.L }, - { label: 'XL', size: IconSize.XL }, - ].map(({ label, size }) => ( + { ([ + { label: 'XXXS', size: 'xxxs' }, + { label: 'XXS', size: 'xxs' }, + { label: 'XS', size: 'xs' }, + { label: 'S', size: 's' }, + { label: 'Normal', size: 'normal' }, + { label: 'L', size: 'l' }, + { label: 'XL', size: 'xl' }, + ] as const).map(({ label, size }) => ( diff --git a/packages/bezier-react/src/components/Icon/Icon.tsx b/packages/bezier-react/src/components/Icon/Icon.tsx index 34fdcb489d..4c39cdc623 100644 --- a/packages/bezier-react/src/components/Icon/Icon.tsx +++ b/packages/bezier-react/src/components/Icon/Icon.tsx @@ -13,13 +13,23 @@ import { tokenCssVar } from '~/src/utils/style' import { type IconProps, - IconSize, + type IconSize, } from './Icon.types' import styles from './Icon.module.scss' export const ICON_TEST_ID = 'bezier-icon' +const getSizeValue = (size: IconSize) => ({ + xl: 44, + l: 36, + normal: 24, + s: 20, + xs: 16, + xxs: 12, + xxxs: 10, +} satisfies Record)[size] + export const Icon = memo(forwardRef(function Icon( props, forwardedRef, @@ -29,7 +39,7 @@ export const Icon = memo(forwardRef(function Icon( const { className, - size = IconSize.Normal, + size = 'normal', color, source: SourceElement, style, @@ -49,8 +59,8 @@ export const Icon = memo(forwardRef(function Icon( marginStyles.className, className, )} - width={size} - height={size} + width={getSizeValue(size)} + height={getSizeValue(size)} data-testid={ICON_TEST_ID} {...rest} /> diff --git a/packages/bezier-react/src/components/Icon/Icon.types.ts b/packages/bezier-react/src/components/Icon/Icon.types.ts index 7238685631..e9728d43bd 100644 --- a/packages/bezier-react/src/components/Icon/Icon.types.ts +++ b/packages/bezier-react/src/components/Icon/Icon.types.ts @@ -7,18 +7,14 @@ import { type SizeProps, } from '~/src/types/props' -/** - * TODO: migrate to string literal - */ -export enum IconSize { - XL = 44, - L = 36, - Normal = 24, - S = 20, - XS = 16, - XXS = 12, - XXXS = 10, -} +export type IconSize = +| 'xl' +| 'l' +| 'normal' +| 's' +| 'xs' +| 'xxs' +| 'xxxs' interface IconOwnProps { /** diff --git a/packages/bezier-react/src/components/Icon/index.ts b/packages/bezier-react/src/components/Icon/index.ts index b03bae47ad..e1290fb6e3 100644 --- a/packages/bezier-react/src/components/Icon/index.ts +++ b/packages/bezier-react/src/components/Icon/index.ts @@ -1,5 +1,5 @@ export { Icon } from './Icon' -export { - type IconProps, +export type { + IconProps, IconSize, } from './Icon.types' diff --git a/packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx b/packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx index d724b1cf3e..1f20e6cb36 100644 --- a/packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx +++ b/packages/bezier-react/src/components/KeyValueItem/KeyValueItem.tsx @@ -10,10 +10,7 @@ import { } from '~/src/utils/type' import { Button } from '~/src/components/Button' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { Text, type TextProps, @@ -43,7 +40,7 @@ function KeyItem({ { isBezierIcon(icon) ? ( (function ListItem ) : leftContent } diff --git a/packages/bezier-react/src/components/NavGroup/NavGroup.stories.tsx b/packages/bezier-react/src/components/NavGroup/NavGroup.stories.tsx index 9cd62fb874..7b8e47adb7 100644 --- a/packages/bezier-react/src/components/NavGroup/NavGroup.stories.tsx +++ b/packages/bezier-react/src/components/NavGroup/NavGroup.stories.tsx @@ -10,10 +10,7 @@ import { type StoryObj, } from '@storybook/react' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { NavItem } from '~/src/components/NavItem' import { NavGroup } from './NavGroup' @@ -58,7 +55,7 @@ export const Primary: StoryObj = { content: '일반 설정', leftContent: SettingsIcon, rightContent: ( - + ), }, } diff --git a/packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx b/packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx index 202db837d8..ff28414973 100644 --- a/packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx +++ b/packages/bezier-react/src/components/NavGroup/NavGroup.test.tsx @@ -4,10 +4,7 @@ import { DotIcon } from '@channel.io/bezier-icons' import { render } from '~/src/utils/test' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { NAV_GROUP_LEFT_ICON_TEST_ID, @@ -24,7 +21,7 @@ describe('NavGroup Test >', () => { leftContent: DotIcon, name: 'general', content: 'test-content', - rightContent: , + rightContent: , } }) diff --git a/packages/bezier-react/src/components/NavGroup/NavGroup.tsx b/packages/bezier-react/src/components/NavGroup/NavGroup.tsx index 965c813f33..ef213f24cf 100644 --- a/packages/bezier-react/src/components/NavGroup/NavGroup.tsx +++ b/packages/bezier-react/src/components/NavGroup/NavGroup.tsx @@ -9,10 +9,7 @@ import classNames from 'classnames' import { isNil } from '~/src/utils/type' import { BaseButton } from '~/src/components/BaseButton' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { Text } from '~/src/components/Text' // eslint-disable-next-line no-restricted-imports @@ -68,7 +65,7 @@ export const NavGroup = forwardRef(function Na
@@ -82,7 +79,7 @@ export const NavGroup = forwardRef(function Na
diff --git a/packages/bezier-react/src/components/NavItem/NavItem.stories.tsx b/packages/bezier-react/src/components/NavItem/NavItem.stories.tsx index d623602c6d..1546f28580 100644 --- a/packages/bezier-react/src/components/NavItem/NavItem.stories.tsx +++ b/packages/bezier-react/src/components/NavItem/NavItem.stories.tsx @@ -7,10 +7,7 @@ import { type StoryObj, } from '@storybook/react' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { NavItem } from './NavItem' import type { NavItemProps } from './NavItem.types' @@ -38,7 +35,7 @@ export const Primary: StoryObj = { rightContent: ( ), diff --git a/packages/bezier-react/src/components/NavItem/NavItem.tsx b/packages/bezier-react/src/components/NavItem/NavItem.tsx index fbbcb989bc..25c564c28d 100644 --- a/packages/bezier-react/src/components/NavItem/NavItem.tsx +++ b/packages/bezier-react/src/components/NavItem/NavItem.tsx @@ -2,10 +2,7 @@ import React, { forwardRef } from 'react' import classNames from 'classnames' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { Text } from '~/src/components/Text' import type { NavItemProps } from './NavItem.types' @@ -68,7 +65,7 @@ export const NavItem = forwardRef(function NavI ) } diff --git a/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx b/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx index f466385837..7f9873842e 100644 --- a/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx +++ b/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx @@ -16,10 +16,7 @@ import { isNil, } from '~/src/utils/type' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { Text } from '~/src/components/Text' import { @@ -88,7 +85,7 @@ export const OutlineItem = forwardRef ) } @@ -101,7 +98,7 @@ export const OutlineItem = forwardRef diff --git a/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx b/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx index b737428070..043ffdf722 100644 --- a/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx +++ b/packages/bezier-react/src/components/SectionLabel/SectionLabel.tsx @@ -16,10 +16,7 @@ import { import { BaseButton } from '~/src/components/BaseButton' import { Button } from '~/src/components/Button' import { Help } from '~/src/components/Help' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { LegacyIcon, isIconName, @@ -56,7 +53,7 @@ function LeftContent({ children }: { children: SectionLabelLeftContent }) { } : { source: children, }} - size={IconSize.S} + size="s" color="txt-black-dark" /> ) diff --git a/packages/bezier-react/src/components/Select/Select.tsx b/packages/bezier-react/src/components/Select/Select.tsx index 93854b2c49..9c14300466 100644 --- a/packages/bezier-react/src/components/Select/Select.tsx +++ b/packages/bezier-react/src/components/Select/Select.tsx @@ -23,10 +23,7 @@ import { isEmpty } from '~/src/utils/type' import { BaseButton } from '~/src/components/BaseButton' import { useFormFieldProps } from '~/src/components/FormControl' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { Overlay } from '~/src/components/Overlay' import { Text } from '~/src/components/Text' @@ -147,7 +144,7 @@ export const Select = forwardRef(function Select({ ? ( @@ -167,7 +164,7 @@ export const Select = forwardRef(function Select({ ? ( @@ -178,7 +175,7 @@ export const Select = forwardRef(function Select({ { !withoutChevron && ( diff --git a/packages/bezier-react/src/components/Status/Status.tsx b/packages/bezier-react/src/components/Status/Status.tsx index cdee211034..3ec4727c93 100644 --- a/packages/bezier-react/src/components/Status/Status.tsx +++ b/packages/bezier-react/src/components/Status/Status.tsx @@ -13,10 +13,7 @@ import classNames from 'classnames' import { type SemanticColor } from '~/src/types/tokens' import { cssVar } from '~/src/utils/style' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { type StatusProps, @@ -69,7 +66,7 @@ export const Status = memo(forwardRef(function Stat { withIcon && ( diff --git a/packages/bezier-react/src/components/Tabs/Tabs.tsx b/packages/bezier-react/src/components/Tabs/Tabs.tsx index 9b1e87fa3b..ea00ff0cfa 100644 --- a/packages/bezier-react/src/components/Tabs/Tabs.tsx +++ b/packages/bezier-react/src/components/Tabs/Tabs.tsx @@ -13,10 +13,7 @@ import { isNil } from '~/src/utils/type' import { BaseButton } from '~/src/components/BaseButton' import { Button } from '~/src/components/Button' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { type TabActionElement, type TabActionProps, @@ -237,9 +234,9 @@ function getTypoBy(size: TabSize) { function getIconSizeBy(size: TabSize) { return ({ - l: IconSize.S, - m: IconSize.XS, - s: IconSize.XS, + l: 's', + m: 'xs', + s: 'xs', } as const)[size] } diff --git a/packages/bezier-react/src/components/Tag/Tag.tsx b/packages/bezier-react/src/components/Tag/Tag.tsx index 58a8052f2b..f6ee3458b6 100644 --- a/packages/bezier-react/src/components/Tag/Tag.tsx +++ b/packages/bezier-react/src/components/Tag/Tag.tsx @@ -14,10 +14,7 @@ import { isNil, } from '~/src/utils/type' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { getProperTagBadgeBgColor, getProperTagBadgeTypo, @@ -89,7 +86,7 @@ export const Tag = memo(forwardRef(function Tag({ tabIndex={0} className={styles.CloseIcon} source={CancelSmallIcon} - size={IconSize.XS} + size="xs" color="txt-black-darker" onClick={(e) => { e.stopPropagation() diff --git a/packages/bezier-react/src/components/TextField/TextField.tsx b/packages/bezier-react/src/components/TextField/TextField.tsx index e584589731..7de192bff9 100644 --- a/packages/bezier-react/src/components/TextField/TextField.tsx +++ b/packages/bezier-react/src/components/TextField/TextField.tsx @@ -26,10 +26,7 @@ import { import { BaseButton } from '~/src/components/BaseButton' import { useFormFieldProps } from '~/src/components/FormControl' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { useWindow } from '~/src/components/WindowProvider' import { @@ -76,7 +73,7 @@ function TextFieldLeftContent({ @@ -124,7 +121,7 @@ function TextFieldRightContent({ > @@ -407,7 +404,7 @@ export const TextField = forwardRef(function TextF className={styles.CloseIcon} data-testid={TEXT_INPUT_CLEAR_ICON_TEST_ID} source={CancelCircleFilledIcon} - size={IconSize.XS} + size="xs" /> ) } diff --git a/packages/bezier-react/src/components/Toast/Toast.tsx b/packages/bezier-react/src/components/Toast/Toast.tsx index 9033a850e9..e47deed71c 100644 --- a/packages/bezier-react/src/components/Toast/Toast.tsx +++ b/packages/bezier-react/src/components/Toast/Toast.tsx @@ -26,10 +26,7 @@ import { px } from '~/src/utils/style' import { isString } from '~/src/utils/type' import { BaseButton } from '~/src/components/BaseButton' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { Text } from '~/src/components/Text' import { InvertedThemeProvider } from '~/src/components/ThemeProvider' import { @@ -150,7 +147,7 @@ export function Toast({ >
@@ -179,7 +176,7 @@ export function Toast({ > diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx index 3a177899fe..f333c9d6e0 100644 --- a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx +++ b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx @@ -11,10 +11,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip' import { isEmpty } from '~/src/utils/type' -import { - Icon, - IconSize, -} from '~/src/components/Icon' +import { Icon } from '~/src/components/Icon' import { HStack } from '~/src/components/Stack' import { Text } from '~/src/components/Text' import { InvertedThemeProvider } from '~/src/components/ThemeProvider' @@ -265,7 +262,7 @@ export const Tooltip = forwardRef(function Tooltip { icon && ( Date: Tue, 13 Feb 2024 10:07:30 +0900 Subject: [PATCH 14/24] feat(text-area): convert `TextAreaHeight` enum to number literal --- .../transform.ts | 8 +++++++ .../components/TextArea/TextArea.stories.tsx | 21 ++----------------- .../src/components/TextArea/TextArea.tsx | 5 ++--- .../src/components/TextArea/TextArea.types.ts | 16 +++++++------- .../src/components/TextArea/index.ts | 2 +- 5 files changed, 20 insertions(+), 32 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index fd3c339499..ebd45ec86c 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -232,6 +232,14 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { XXS: 'xxs', XXXS: 'xxxs', }, + TextAreaHeight: { + Row3: 3, + Row6: 6, + Row10: 10, + Row16: 16, + Row24: 24, + Row36: 36, + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/TextArea/TextArea.stories.tsx b/packages/bezier-react/src/components/TextArea/TextArea.stories.tsx index 6eabc7bf00..603452a7b4 100644 --- a/packages/bezier-react/src/components/TextArea/TextArea.stories.tsx +++ b/packages/bezier-react/src/components/TextArea/TextArea.stories.tsx @@ -8,28 +8,11 @@ import { type StoryFn, } from '@storybook/react' -import { getObjectFromEnum } from '~/src/utils/story' - import { TextArea } from './TextArea' import type { TextAreaProps } from './TextArea.types' -import { TextAreaHeight } from './TextArea.types' const meta: Meta = { component: TextArea, - argTypes: { - minRows: { - control: { - type: 'radio', - }, - options: getObjectFromEnum(TextAreaHeight), - }, - maxRows: { - control: { - type: 'radio', - }, - options: getObjectFromEnum(TextAreaHeight), - }, - }, } export default meta @@ -64,8 +47,8 @@ export const Primary = { readOnly: false, disabled: false, hasError: false, - minRows: TextAreaHeight.Row6, - maxRows: TextAreaHeight.Row10, + minRows: '6', + maxRows: '10', placeholder: 'say hi to autoResizable textarea!', }, } diff --git a/packages/bezier-react/src/components/TextArea/TextArea.tsx b/packages/bezier-react/src/components/TextArea/TextArea.tsx index 75a63b8aa2..51e8232bfa 100644 --- a/packages/bezier-react/src/components/TextArea/TextArea.tsx +++ b/packages/bezier-react/src/components/TextArea/TextArea.tsx @@ -16,15 +16,14 @@ import useMergeRefs from '~/src/hooks/useMergeRefs' import { useFormFieldProps } from '~/src/components/FormControl' import type { TextAreaProps } from './TextArea.types' -import { TextAreaHeight } from './TextArea.types' import styles from './TextArea.module.scss' export const TextArea = forwardRef(function TextArea({ style, className, - minRows = TextAreaHeight.Row6, - maxRows = TextAreaHeight.Row6, + minRows = 6, + maxRows = 6, autoFocus = false, value = '', onKeyDown, diff --git a/packages/bezier-react/src/components/TextArea/TextArea.types.ts b/packages/bezier-react/src/components/TextArea/TextArea.types.ts index 705a6d6bb7..2cf507ec29 100644 --- a/packages/bezier-react/src/components/TextArea/TextArea.types.ts +++ b/packages/bezier-react/src/components/TextArea/TextArea.types.ts @@ -5,15 +5,13 @@ import type { FormFieldProps, } from '~/src/types/props' -// TODO: Use number literal types instead of enums -export enum TextAreaHeight { - Row3 = 3, - Row6 = 6, - Row10 = 10, - Row16 = 16, - Row24 = 24, - Row36 = 36, -} +export type TextAreaHeight = +| 3 +| 6 +| 10 +| 16 +| 24 +| 36 interface TextAreaOwnProps { minRows?: TextAreaHeight diff --git a/packages/bezier-react/src/components/TextArea/index.ts b/packages/bezier-react/src/components/TextArea/index.ts index 30b7eceff1..95d85846f2 100644 --- a/packages/bezier-react/src/components/TextArea/index.ts +++ b/packages/bezier-react/src/components/TextArea/index.ts @@ -1,6 +1,6 @@ export { TextArea } from './TextArea' export { - TextAreaHeight, + type TextAreaHeight, type TextAreaProps, } from './TextArea.types' From 4cc7cc7b73449672fbcf59c2147fa7da66670585 Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 10:10:17 +0900 Subject: [PATCH 15/24] feat(avatar-group): convert `AvatarGroupEllipsisType` enum to string literal --- .../v2-enum-member-to-string-literal/transform.ts | 4 ++++ .../components/AvatarGroup/AvatarGroup.stories.tsx | 13 ++----------- .../src/components/AvatarGroup/AvatarGroup.test.tsx | 11 ++++------- .../src/components/AvatarGroup/AvatarGroup.tsx | 11 ++++------- .../src/components/AvatarGroup/AvatarGroup.types.ts | 7 +++---- .../src/components/AvatarGroup/index.ts | 2 +- 6 files changed, 18 insertions(+), 30 deletions(-) diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index ebd45ec86c..d542299689 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -240,6 +240,10 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { Row24: 24, Row36: 36, }, + AvatarGroupEllipsisType: { + Icon: 'icon', + Count: 'count', + }, } function enumMemberToStringLiteral(sourceFile: SourceFile): true | void { diff --git a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.stories.tsx b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.stories.tsx index 6732076fcb..0f54e25d2f 100644 --- a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.stories.tsx +++ b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.stories.tsx @@ -9,21 +9,12 @@ import { import { Avatar } from '~/src/components/Avatar' import { AvatarGroup } from './AvatarGroup' -import { - AvatarGroupEllipsisType, - type AvatarGroupProps, -} from './AvatarGroup.types' +import { type AvatarGroupProps } from './AvatarGroup.types' import MOCK_AVATAR_LIST from './__mocks__/avatarList' const meta: Meta = { component: AvatarGroup, argTypes: { - ellipsisType: { - control: { - type: 'radio', - }, - options: AvatarGroupEllipsisType, - }, max: { control: { type: 'range', @@ -64,7 +55,7 @@ export const Primary: StoryObj = { args: { max: 5, size: '30', - ellipsisType: AvatarGroupEllipsisType.Icon, + ellipsisType: 'icon', spacing: 4, }, } diff --git a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.test.tsx b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.test.tsx index d29e71fe29..4af4f888a8 100644 --- a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.test.tsx +++ b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.test.tsx @@ -8,10 +8,7 @@ import { AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID, AvatarGroup, } from './AvatarGroup' -import { - AvatarGroupEllipsisType, - type AvatarGroupProps, -} from './AvatarGroup.types' +import { type AvatarGroupProps } from './AvatarGroup.types' import MOCK_AVATAR_LIST from './__mocks__/avatarList' describe('AvatarGroup', () => { @@ -22,7 +19,7 @@ describe('AvatarGroup', () => { props = { max: MOCK_AVATAR_LIST.length - 1, spacing: 4, - ellipsisType: AvatarGroupEllipsisType.Icon, + ellipsisType: 'icon', } }) @@ -45,7 +42,7 @@ describe('AvatarGroup', () => { describe('Ellipsis type - Icon', () => { beforeEach(() => { - props.ellipsisType = AvatarGroupEllipsisType.Icon + props.ellipsisType = 'icon' }) it('Snapshot', () => { @@ -70,7 +67,7 @@ describe('AvatarGroup', () => { describe('Ellipsis type - Count', () => { beforeEach(() => { - props.ellipsisType = AvatarGroupEllipsisType.Count + props.ellipsisType = 'count' }) it('Snapshot', () => { diff --git a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx index 03cb934b8f..92cf24f460 100644 --- a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx +++ b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx @@ -19,10 +19,7 @@ import { import { Icon } from '~/src/components/Icon' import { Text } from '~/src/components/Text' -import { - AvatarGroupEllipsisType, - type AvatarGroupProps, -} from './AvatarGroup.types' +import { type AvatarGroupProps } from './AvatarGroup.types' import styles from './AvatarGroup.module.scss' @@ -83,7 +80,7 @@ export const AvatarGroup = forwardRef(function max, size = '24', spacing = AVATAR_GROUP_DEFAULT_SPACING, - ellipsisType = AvatarGroupEllipsisType.Icon, + ellipsisType = 'icon', onMouseEnterEllipsis, onMouseLeaveEllipsis, style, @@ -129,7 +126,7 @@ export const AvatarGroup = forwardRef(function return AvatarElement } - if (ellipsisType === AvatarGroupEllipsisType.Icon) { + if (ellipsisType === 'icon') { return (
(function ) } - if (ellipsisType === AvatarGroupEllipsisType.Count) { + if (ellipsisType === 'count') { return ( { AvatarElement } diff --git a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.types.ts b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.types.ts index 09291fc758..dd07bea902 100644 --- a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.types.ts +++ b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.types.ts @@ -7,10 +7,9 @@ import type { import { type AvatarSize } from '~/src/components/Avatar' -export enum AvatarGroupEllipsisType { - Icon = 'Icon', - Count = 'Count', -} +export type AvatarGroupEllipsisType = +| 'icon' +| 'count' type MouseEventHandler = React.MouseEventHandler diff --git a/packages/bezier-react/src/components/AvatarGroup/index.ts b/packages/bezier-react/src/components/AvatarGroup/index.ts index 7e1b5b8803..b536837099 100644 --- a/packages/bezier-react/src/components/AvatarGroup/index.ts +++ b/packages/bezier-react/src/components/AvatarGroup/index.ts @@ -1,5 +1,5 @@ export { AvatarGroup } from './AvatarGroup' export { - AvatarGroupEllipsisType, + type AvatarGroupEllipsisType, type AvatarGroupProps, } from './AvatarGroup.types' From cac5dd9411cdb0d9398fac1b7f6629518abdf25a Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 10:12:08 +0900 Subject: [PATCH 16/24] Revert "feat(codemod): comment import declaration check for internal use" This reverts commit c7530b94e3f8ef04a9e3713e94102099cb4098b6. --- packages/bezier-codemod/src/shared/enum.ts | 7 +++---- packages/bezier-codemod/src/utils/import.ts | 10 +++++----- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/bezier-codemod/src/shared/enum.ts b/packages/bezier-codemod/src/shared/enum.ts index 3b1e350273..d9fbff581e 100644 --- a/packages/bezier-codemod/src/shared/enum.ts +++ b/packages/bezier-codemod/src/shared/enum.ts @@ -20,7 +20,7 @@ export const transformEnumToStringLiteralInBezier = (sourceFile: SourceFile, enu Object .keys(enumTransforms) .forEach((enumName) => { - // if (hasNamedImportInImportDeclaration(sourceFile, enumName, '@channel.io/bezier-react')) { + if (hasNamedImportInImportDeclaration(sourceFile, enumName, '@channel.io/bezier-react')) { sourceFile .getDescendantsOfKind(SyntaxKind.PropertyAccessExpression) .filter((node) => node.getFirstChildByKind(SyntaxKind.Identifier)?.getText() === enumName) @@ -31,12 +31,11 @@ export const transformEnumToStringLiteralInBezier = (sourceFile: SourceFile, enu transformedEnumNames.push(enumName) } }) - // } + } }) if (transformedEnumNames.length > 0) { - // removeUnusedNamedImport(sourceFile, ['@channel.io/bezier-react']) - removeUnusedNamedImport(sourceFile) + removeUnusedNamedImport(sourceFile, ['@channel.io/bezier-react']) return true } diff --git a/packages/bezier-codemod/src/utils/import.ts b/packages/bezier-codemod/src/utils/import.ts index 1885c043ed..5baf10d103 100644 --- a/packages/bezier-codemod/src/utils/import.ts +++ b/packages/bezier-codemod/src/utils/import.ts @@ -41,18 +41,18 @@ export const removeUnusedNamedImport = (sourceFile: SourceFile, importDeclaratio .filter((v) => (sourceFile.getDescendantsOfKind(SyntaxKind.Identifier).filter((_v) => _v.getText() === v.getText()).length === 1)) .forEach((v) => v.remove()) - // if (importDeclarations) { + if (importDeclarations) { sourceFile .getImportDeclarations() - // .filter((v) => importDeclarations.includes( - // trimQuoteAtBothEnds(v.getModuleSpecifier().getText()) ?? ''), - // ) + .filter((v) => importDeclarations.includes( + trimQuoteAtBothEnds(v.getModuleSpecifier().getText()) ?? ''), + ) .forEach((v) => { if (!v.getImportClause()) { v.remove() } }) - // } + } } export const renameNamedImport = (sourceFile: SourceFile, targets: string[], renameFn: (name: string) => string) => { From 622891ddc7a3f000aa7c3133619293bfd58c6ad9 Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 10:13:30 +0900 Subject: [PATCH 17/24] feat(codemod): resolve typecheck error --- packages/bezier-codemod/src/shared/enum.ts | 2 +- packages/bezier-codemod/src/utils/enum.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bezier-codemod/src/shared/enum.ts b/packages/bezier-codemod/src/shared/enum.ts index d9fbff581e..6359356485 100644 --- a/packages/bezier-codemod/src/shared/enum.ts +++ b/packages/bezier-codemod/src/shared/enum.ts @@ -11,7 +11,7 @@ import { type Name = string type Member = string -type Value = string +type Value = string | number export type EnumTransformMap = Record> export const transformEnumToStringLiteralInBezier = (sourceFile: SourceFile, enumTransforms: EnumTransformMap) => { diff --git a/packages/bezier-codemod/src/utils/enum.ts b/packages/bezier-codemod/src/utils/enum.ts index c34076b8d3..d4657e82ec 100644 --- a/packages/bezier-codemod/src/utils/enum.ts +++ b/packages/bezier-codemod/src/utils/enum.ts @@ -3,7 +3,7 @@ import { SyntaxKind, } from 'ts-morph' -export const renameEnumMember = (node: PropertyAccessExpression, to: string) => { +export const renameEnumMember = (node: PropertyAccessExpression, to: string | number) => { const ancestor = node.getFirstAncestor() if (ancestor?.isKind(SyntaxKind.JsxExpression)) { From b6b310fae0f882b2a5e6d02b2c4abd992390ff3d Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 10:15:08 +0900 Subject: [PATCH 18/24] feat(storybook): rm unused util --- packages/bezier-react/src/utils/story.test.ts | 19 ------------------- packages/bezier-react/src/utils/story.ts | 12 ------------ 2 files changed, 31 deletions(-) delete mode 100644 packages/bezier-react/src/utils/story.test.ts delete mode 100644 packages/bezier-react/src/utils/story.ts diff --git a/packages/bezier-react/src/utils/story.test.ts b/packages/bezier-react/src/utils/story.test.ts deleted file mode 100644 index 3b446d5ecd..0000000000 --- a/packages/bezier-react/src/utils/story.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { getObjectFromEnum } from './story' - -describe('story', () => { - describe('getObjectFromEnum', () => { - it('converts a non-empty enum to an object with enum members as keys and values', () => { - enum FooEnum { - A = 'A', - B = 'B', - C = 'C', - } - expect(getObjectFromEnum(FooEnum)).toMatchObject({ A: 'A', B: 'B', C: 'C' }) - }) - - it('converts an empty enum to an empty object', () => { - enum EmptyEnum {} - expect(getObjectFromEnum(EmptyEnum)).toMatchObject({}) - }) - }) -}) diff --git a/packages/bezier-react/src/utils/story.ts b/packages/bezier-react/src/utils/story.ts deleted file mode 100644 index d466eade5c..0000000000 --- a/packages/bezier-react/src/utils/story.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { isNaN } from './type' - -interface Enum { - [id: string]: string | number -} - -export const getObjectFromEnum = (enumeration: T) => Object.entries(enumeration) - .reduce((acc, [key, value]) => ( - isNaN(Number(key)) - ? { ...acc, [key]: value } - : acc - ), {} as { [K in keyof T]: T[K] }) From 81f7b7d533a99cb14e752be1c6d8301f0d2298ac Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 10:25:51 +0900 Subject: [PATCH 19/24] chore(changeset): add --- .changeset/gold-gorillas-shout.md | 25 +++++++++++++++++++++++++ .changeset/smart-ravens-rescue.md | 19 +++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 .changeset/gold-gorillas-shout.md create mode 100644 .changeset/smart-ravens-rescue.md diff --git a/.changeset/gold-gorillas-shout.md b/.changeset/gold-gorillas-shout.md new file mode 100644 index 0000000000..13533920cc --- /dev/null +++ b/.changeset/gold-gorillas-shout.md @@ -0,0 +1,25 @@ +--- +"@channel.io/bezier-react": major +--- + +**Breaking Changes: The enum type that the component receives as props is changed to a string (or number) literal type** + +The properties that change are: + +- `AvatarGroupEllipsisType` +- `IconSize` +- `LegacyTooltipPosition` +- `ModalTitleSize` +- `OverlayPosition` +- `ProgressBarSize`, `ProgressBarVariant` +- `SpinnerSize` +- `SwitchSize` +- `TagBadgeSize`, `TagBadgeVariant` +- `TextAreaHeight` +- `TextFieldSize`, `TextFieldVariant` +- `ToastPlacement`, `ToastAppearance`, `ToastPreset` +- `TooltipPosition` + +Also, `SpinnerThickness` props of `Spinner` is not supported any more. + +When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `TooltipPosition.TopCenter` -> `top-center`. Among the above enums, `TextAreaHeight` is converted to number literal type. e.g. `TextAreaHeight.Row16` -> `16` diff --git a/.changeset/smart-ravens-rescue.md b/.changeset/smart-ravens-rescue.md new file mode 100644 index 0000000000..90d3ef9e75 --- /dev/null +++ b/.changeset/smart-ravens-rescue.md @@ -0,0 +1,19 @@ +--- +"@channel.io/bezier-codemod": minor +--- + +Add more various cases to `v2-enum-member-to-string-literal`. Now it covers following enums. + +- `AvatarGroupEllipsisType` +- `IconSize` +- `LegacyTooltipPosition` +- `ModalTitleSize` +- `OverlayPosition` +- `ProgressBarSize`, `ProgressBarVariant` +- `SpinnerSize` +- `SwitchSize` +- `TagBadgeSize`, `TagBadgeVariant` +- `TextAreaHeight` +- `TextFieldSize`, `TextFieldVariant` +- `ToastPlacement`, `ToastAppearance`, `ToastPreset` +- `TooltipPosition` From cfff23b6fc5e4ecb71f2f5f25d5a2faebd0d79e8 Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 10:41:39 +0900 Subject: [PATCH 20/24] chore(storybook): resolve runtime error caused by using dead code --- packages/bezier-react/src/components/Banner/Banner.mdx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/bezier-react/src/components/Banner/Banner.mdx b/packages/bezier-react/src/components/Banner/Banner.mdx index 730b971540..d54fe11101 100644 --- a/packages/bezier-react/src/components/Banner/Banner.mdx +++ b/packages/bezier-react/src/components/Banner/Banner.mdx @@ -3,9 +3,6 @@ import { Canvas, Story, } from '@storybook/addon-docs' -import { - getTitle, -} from '~/src/utils/story' import { Banner, BannerVariant, From 814b551609d132e63676ea02fe5a955c08240f5b Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 10:53:10 +0900 Subject: [PATCH 21/24] chore: check in jsdoc --- .../bezier-react/src/components/AvatarGroup/AvatarGroup.tsx | 2 +- .../src/components/AvatarGroup/AvatarGroup.types.ts | 2 +- packages/bezier-react/src/components/Tag/Tag.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx index 92cf24f460..e00f56dccd 100644 --- a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx +++ b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.tsx @@ -68,7 +68,7 @@ function getProperTypoSize(avatarSize: AvatarSize) { * * * diff --git a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.types.ts b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.types.ts index dd07bea902..0b0b5a2738 100644 --- a/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.types.ts +++ b/packages/bezier-react/src/components/AvatarGroup/AvatarGroup.types.ts @@ -30,7 +30,7 @@ interface AvatarGroupOwnProps { /** * Controls how the ellipsis is displayed. - * @default AvatarGroupEllipsisType.Icon + * @default 'icon' */ ellipsisType?: AvatarGroupEllipsisType diff --git a/packages/bezier-react/src/components/Tag/Tag.tsx b/packages/bezier-react/src/components/Tag/Tag.tsx index f6ee3458b6..2234b70956 100644 --- a/packages/bezier-react/src/components/Tag/Tag.tsx +++ b/packages/bezier-react/src/components/Tag/Tag.tsx @@ -34,8 +34,8 @@ export const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon' * @example * ```tsx * * Payment From 8530787473b26254ce5f33b37ab5c91128e63e88 Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 12:41:03 +0900 Subject: [PATCH 22/24] chore(badge): update snapshot --- .../src/components/Badge/__snapshots__/Badge.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bezier-react/src/components/Badge/__snapshots__/Badge.test.tsx.snap b/packages/bezier-react/src/components/Badge/__snapshots__/Badge.test.tsx.snap index b29286d33f..4b4060b36c 100644 --- a/packages/bezier-react/src/components/Badge/__snapshots__/Badge.test.tsx.snap +++ b/packages/bezier-react/src/components/Badge/__snapshots__/Badge.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Badge test > Snapshot > 1`] = `
`; From 8dd616dd8187237aad962a29e439970faae04985 Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 15:33:50 +0900 Subject: [PATCH 23/24] feat(storybook): rm utils/story path from tsconfig --- packages/bezier-react/tsconfig.build.json | 1 - packages/bezier-react/tsconfig.prune.json | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/bezier-react/tsconfig.build.json b/packages/bezier-react/tsconfig.build.json index 40ece8182a..e5cec27871 100644 --- a/packages/bezier-react/tsconfig.build.json +++ b/packages/bezier-react/tsconfig.build.json @@ -6,7 +6,6 @@ "**/*.test.ts", "**/*.test.tsx", "src/utils/test.tsx", - "src/utils/story.ts", ], "compilerOptions": { "outDir": "dist/types", diff --git a/packages/bezier-react/tsconfig.prune.json b/packages/bezier-react/tsconfig.prune.json index a2f719cc36..977b535a3f 100644 --- a/packages/bezier-react/tsconfig.prune.json +++ b/packages/bezier-react/tsconfig.prune.json @@ -3,7 +3,6 @@ "exclude": [ "src/index.ts", "**/*.stories.tsx", - "src/utils/story.ts", ".storybook/**/*" ], "files": [ From 297b174818dbd8d8130aeedcd7902774d7bba70e Mon Sep 17 00:00:00 2001 From: andrew Date: Tue, 13 Feb 2024 15:41:49 +0900 Subject: [PATCH 24/24] feat(icon): change normal to m --- .changeset/gold-gorillas-shout.md | 2 +- .../transform.ts | 2 +- .../src/components/Button/Button.tsx | 2 +- .../src/components/Icon/Icon.stories.tsx | 26 +++++++++---------- .../bezier-react/src/components/Icon/Icon.tsx | 4 +-- .../src/components/Icon/Icon.types.ts | 2 +- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/.changeset/gold-gorillas-shout.md b/.changeset/gold-gorillas-shout.md index 13533920cc..a535fd32db 100644 --- a/.changeset/gold-gorillas-shout.md +++ b/.changeset/gold-gorillas-shout.md @@ -22,4 +22,4 @@ The properties that change are: Also, `SpinnerThickness` props of `Spinner` is not supported any more. -When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `TooltipPosition.TopCenter` -> `top-center`. Among the above enums, `TextAreaHeight` is converted to number literal type. e.g. `TextAreaHeight.Row16` -> `16` +When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. `TooltipPosition.TopCenter` -> `top-center`. Among the above enums, `TextAreaHeight` is converted to number literal type. e.g. `TextAreaHeight.Row16` -> `16`, and `IconSize.normal` is converted to `m` for consistency diff --git a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts index d542299689..e211048452 100644 --- a/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts +++ b/packages/bezier-codemod/src/transforms/v2-enum-member-to-string-literal/transform.ts @@ -226,7 +226,7 @@ const ENUM_TRANSFORM_MAP: EnumTransformMap = { IconSize: { XL: 'xl', L: 'l', - Normal: 'normal', + Normal: 'm', S: 's', XS: 'xs', XXS: 'xxs', diff --git a/packages/bezier-react/src/components/Button/Button.tsx b/packages/bezier-react/src/components/Button/Button.tsx index 3195b3a5e7..b126d0f20e 100644 --- a/packages/bezier-react/src/components/Button/Button.tsx +++ b/packages/bezier-react/src/components/Button/Button.tsx @@ -43,7 +43,7 @@ function getIconSize(size: ButtonSize) { s: 'xs', m: 's', l: 's', - xl: 'normal', + xl: 'm', } as const)[size] } diff --git a/packages/bezier-react/src/components/Icon/Icon.stories.tsx b/packages/bezier-react/src/components/Icon/Icon.stories.tsx index 790cdbe64a..2c9b573fb2 100644 --- a/packages/bezier-react/src/components/Icon/Icon.stories.tsx +++ b/packages/bezier-react/src/components/Icon/Icon.stories.tsx @@ -58,7 +58,7 @@ export default meta export const Playground: StoryObj = { args: { source: ChannelIcon, - size: 'normal', + size: 'm', color: 'bg-black-darker', }, } @@ -99,7 +99,7 @@ export const AllIcons: StoryObj> = { ), args: { - size: 'normal', + size: 'm', color: 'bg-black-darkest', }, } @@ -168,7 +168,7 @@ export const Overview: StoryFn<{}> = () => ( 'xxs', 'xs', 's', - 'normal', + 'm', 'l', 'xl', ] as const).map((size) => ( @@ -222,19 +222,19 @@ export const UsageColor: StoryObj<{}> = { export const UsageSize: StoryFn<{}> = () => ( { ([ - { label: 'XXXS', size: 'xxxs' }, - { label: 'XXS', size: 'xxs' }, - { label: 'XS', size: 'xs' }, - { label: 'S', size: 's' }, - { label: 'Normal', size: 'normal' }, - { label: 'L', size: 'l' }, - { label: 'XL', size: 'xl' }, - ] as const).map(({ label, size }) => ( + 'xxxs', + 'xxs', + 'xs', + 's', + 'm', + 'l', + 'xl', + ] as const).map((size) => ( - + - { `${label} (${size}x${size})` } + { size } diff --git a/packages/bezier-react/src/components/Icon/Icon.tsx b/packages/bezier-react/src/components/Icon/Icon.tsx index 4c39cdc623..e103610305 100644 --- a/packages/bezier-react/src/components/Icon/Icon.tsx +++ b/packages/bezier-react/src/components/Icon/Icon.tsx @@ -23,7 +23,7 @@ export const ICON_TEST_ID = 'bezier-icon' const getSizeValue = (size: IconSize) => ({ xl: 44, l: 36, - normal: 24, + m: 24, s: 20, xs: 16, xxs: 12, @@ -39,7 +39,7 @@ export const Icon = memo(forwardRef(function Icon( const { className, - size = 'normal', + size = 'm', color, source: SourceElement, style, diff --git a/packages/bezier-react/src/components/Icon/Icon.types.ts b/packages/bezier-react/src/components/Icon/Icon.types.ts index e9728d43bd..daf0c5463d 100644 --- a/packages/bezier-react/src/components/Icon/Icon.types.ts +++ b/packages/bezier-react/src/components/Icon/Icon.types.ts @@ -10,7 +10,7 @@ import { export type IconSize = | 'xl' | 'l' -| 'normal' +| 'm' | 's' | 'xs' | 'xxs'