From 8c2b8736a32e3fc7b59494a8dcf9d4db6adbff2f Mon Sep 17 00:00:00 2001 From: "Yang Wooseong (Andrew)" Date: Mon, 11 Sep 2023 14:17:29 +0900 Subject: [PATCH] Allow `iconName` prop of `Button`, `Banner`, `SectionLabel` component to include `BezierIcon` type (#1562) * config(git-ignore): include .tgz file in .gitignore * feat(button): only allow ReactElement and BezierIcon type for leftContent props of Button component * feat(build-file): add 1.10.2 version build tgz * feat(button): stop support for iconName type of SideContent * feat(banner): stop support for iconName type of icon prop * feat(storybook/props-interface): adopt icon migration of SectionLabel and Button component * feat(storybook/button): adopt icon migration of Button component * feat(storybook/component-convention): adopt icon migration of Button component * feat(storybook/icon): adopt icon migration of Button component * feat(section-label): adopt icon migration in test code * feat(key-value-list-item): adopt icon migration in storybook * feat(list-menu-title): adopt icon migration in storybook * Revert "config(git-ignore): include .tgz file in .gitignore" This reverts commit 790158010d5de08a66598c947db96ff64d7ddfba. * Revert "feat(build-file): add 1.10.2 version build tgz" This reverts commit 2757393bf17b0e08194075ea86958826d7b6e766. * feat(button): widen Button type to include ReactNode * feat(button, banner, section-label): restore support for iconName type of icon prop * chore(change-set): add change-set to bump minor version * feat(banner, section-label, button): add deprecation warning log when iconName type is used * feat(codemod/icon-name-to-bezier-icon): add Banner to transformation target * chore(changeset): bump minor version of bezier-react/bezier-codemod * refactor(button): use assert function of assertUtils * refactor(section-label, banner): use assert function of assertUtils * refactor(button): remove redundant comment --- .changeset/poor-cars-wonder.md | 5 + .changeset/seven-bikes-unite.md | 5 + .../transforms/icon-name-to-bezier-icon.ts | 8 +- .../src/components/Banner/Banner.stories.tsx | 57 +++++++----- .../src/components/Banner/Banner.styled.ts | 5 +- .../src/components/Banner/Banner.test.tsx | 8 +- .../src/components/Banner/Banner.tsx | 26 +++++- .../src/components/Banner/Banner.types.ts | 11 ++- .../src/components/Button/Button.mdx | 10 +- .../src/components/Button/Button.stories.tsx | 92 +++++++++++-------- .../src/components/Button/Button.tsx | 19 +++- .../src/components/Button/Button.types.ts | 4 +- .../bezier-react/src/components/Icon/Icon.mdx | 11 +-- .../KeyValueListItem.stories.tsx | 3 +- .../ListMenuTitle/ListMenuTitle.stories.tsx | 9 +- .../components/Modals/Modal/Modal.styled.ts | 3 +- .../SectionLabel/SectionLabel.stories.tsx | 25 +++-- .../SectionLabel/SectionLabel.styled.ts | 8 +- .../SectionLabel/SectionLabel.test.tsx | 15 ++- .../components/SectionLabel/SectionLabel.tsx | 55 ++++++++--- .../SectionLabel/SectionLabel.types.ts | 7 +- .../PropsInterface.stories.mdx | 61 +++++++----- .../ComponentConvention/Stories.stories.mdx | 37 +++++--- 23 files changed, 318 insertions(+), 166 deletions(-) create mode 100644 .changeset/poor-cars-wonder.md create mode 100644 .changeset/seven-bikes-unite.md diff --git a/.changeset/poor-cars-wonder.md b/.changeset/poor-cars-wonder.md new file mode 100644 index 0000000000..3c3a5d63fd --- /dev/null +++ b/.changeset/poor-cars-wonder.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-codemod": minor +--- + +Add Banner to iconName transformation target diff --git a/.changeset/seven-bikes-unite.md b/.changeset/seven-bikes-unite.md new file mode 100644 index 0000000000..3b7f3e7b81 --- /dev/null +++ b/.changeset/seven-bikes-unite.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": minor +--- + +Allow `iconName` prop of `Button`, `Banner`, `SectionLabel` component to include `BezierIcon` type \ No newline at end of file diff --git a/packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts b/packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts index 0f28e1d2b0..5a308868bb 100644 --- a/packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts +++ b/packages/bezier-codemod/src/transforms/icon-name-to-bezier-icon.ts @@ -13,11 +13,9 @@ import { type ComponentName = string type Attributes = string[] -/** - * NOTE: add other components or attributes if necessary - */ -const meta: Array<[ComponentName, Attributes]> = [ +const transformationTargets: Array<[ComponentName, Attributes]> = [ ['Button', ['leftContent', 'rightContent']], + ['Banner', ['icon', 'actionIcon']], ] const regex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/ @@ -87,7 +85,7 @@ const changeIconNameToBezierIcon = (sourceFile: SourceFile) => (jsxElement: JsxS return false } -const iconNameToBezierIcon = (sourceFile: SourceFile) => meta.reduce((acc, [component, attributes]) => { +const iconNameToBezierIcon = (sourceFile: SourceFile) => transformationTargets.reduce((acc, [component, attributes]) => { const components = getComponentsToMigrate(sourceFile)(component) const migratedComponents = components.reduce((_acc, cur) => { diff --git a/packages/bezier-react/src/components/Banner/Banner.stories.tsx b/packages/bezier-react/src/components/Banner/Banner.stories.tsx index 74c7660f78..1c1278e8be 100644 --- a/packages/bezier-react/src/components/Banner/Banner.stories.tsx +++ b/packages/bezier-react/src/components/Banner/Banner.stories.tsx @@ -1,5 +1,16 @@ import React from 'react' +import { + BlockIcon, + CancelIcon, + CancelSmallIcon, + ChannelIcon, + CheckCircleFilledIcon, + ErrorTriangleFilledIcon, + Hourglass3Icon, + InfoIcon, + LightbulbIcon, +} from '@channel.io/bezier-icons' import type { Meta, Story, @@ -66,9 +77,9 @@ export const Playground: Story = props => Playground.args = { variant: BannerVariant.Default, - icon: 'lightbulb', + icon: LightbulbIcon, content: 'Information here.', - actionIcon: 'cancel-small', + actionIcon: CancelSmallIcon, onClickAction: noop, } @@ -77,50 +88,50 @@ export const Overview: Story<{}> = () => ( @@ -132,7 +143,7 @@ export const UsageMinWidth: Story<{}> = () => ( @@ -146,21 +157,21 @@ export const UsageFullWidth: Story<{}> = () => ( @@ -174,7 +185,7 @@ export const UsageMaxWidth: Story<{}> = () => ( @@ -189,7 +200,7 @@ export const UsageConsecutive: Story<{}> = () => ( = () => ( @@ -232,11 +243,11 @@ UsageNoIcon.storyName = 'Usage (no icon)' export const UsageLink: Story<{}> = () => ( ) @@ -245,12 +256,12 @@ UsageLink.storyName = 'Usage (link)' export const UsageLinkTo: Story<{}> = () => ( ) diff --git a/packages/bezier-react/src/components/Banner/Banner.styled.ts b/packages/bezier-react/src/components/Banner/Banner.styled.ts index f731f9eb4e..57de471ffe 100644 --- a/packages/bezier-react/src/components/Banner/Banner.styled.ts +++ b/packages/bezier-react/src/components/Banner/Banner.styled.ts @@ -2,6 +2,7 @@ import { styled } from '~/src/foundation' import type { VariantProps } from '~/src/types/ComponentProps' +import { Icon } from '~/src/components/Icon' import { LegacyIcon } from '~/src/components/LegacyIcon' import { StackItem as BaseStackItem, @@ -18,7 +19,8 @@ import type { BannerVariant } from './Banner.types' type BannerVariantProps = Required> -const BannerIcon = styled(LegacyIcon)`` +const BannerIcon = styled(Icon)`` +const BannerLegacyIcon = styled(LegacyIcon)`` const ContentWrapper = styled.div` color: ${({ foundation, variant }) => foundation?.theme?.[TEXT_COLORS[variant]]}; @@ -51,6 +53,7 @@ const StackItem = styled(BaseStackItem)` export default { BannerIcon, + BannerLegacyIcon, ContentWrapper, Link, Stack, diff --git a/packages/bezier-react/src/components/Banner/Banner.test.tsx b/packages/bezier-react/src/components/Banner/Banner.test.tsx index ff5de4f630..2c133a0930 100644 --- a/packages/bezier-react/src/components/Banner/Banner.test.tsx +++ b/packages/bezier-react/src/components/Banner/Banner.test.tsx @@ -1,5 +1,9 @@ import React from 'react' +import { + AllIcon, + InfoIcon, +} from '@channel.io/bezier-icons' import { fireEvent } from '@testing-library/react' import { render } from '~/src/utils/testUtils' @@ -15,7 +19,7 @@ describe('Banner >', () => { beforeEach(() => { props = { - icon: 'info', + icon: InfoIcon, content: 'Lorem ipsum dolor amet.', hasLink: false, } @@ -40,7 +44,7 @@ describe('Banner >', () => { it('renders action button if actionIcon is correct value', () => { const onClickAction = jest.fn() - const { getByRole } = renderBanner({ actionIcon: 'all', onClickAction }) + const { getByRole } = renderBanner({ actionIcon: AllIcon, onClickAction }) const actionButton = getByRole('button') fireEvent.click(actionButton) diff --git a/packages/bezier-react/src/components/Banner/Banner.tsx b/packages/bezier-react/src/components/Banner/Banner.tsx index 28a1de0688..561d876c6c 100644 --- a/packages/bezier-react/src/components/Banner/Banner.tsx +++ b/packages/bezier-react/src/components/Banner/Banner.tsx @@ -1,7 +1,10 @@ import React, { forwardRef } from 'react' +import { isBezierIcon } from '@channel.io/bezier-icons' + import { Typography } from '~/src/foundation' +import { warn } from '~/src/utils/assertUtils' import { isNil, isString, @@ -13,6 +16,7 @@ import { ButtonStyleVariant, } from '~/src/components/Button' import { IconSize } from '~/src/components/Icon' +import { isIconName } from '~/src/components/LegacyIcon' import { StackItem } from '~/src/components/Stack' import { Text } from '~/src/components/Text' @@ -85,6 +89,10 @@ export const Banner = forwardRef(function Banner( testId = BANNER_TEST_ID, } = props + if (isIconName(icon)) { + warn('Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.') + } + return ( { !isNil(icon) && ( - + { isBezierIcon(icon) ? ( + + ) : ( + + ) } ) } diff --git a/packages/bezier-react/src/components/Banner/Banner.types.ts b/packages/bezier-react/src/components/Banner/Banner.types.ts index adac00677d..05f970157c 100644 --- a/packages/bezier-react/src/components/Banner/Banner.types.ts +++ b/packages/bezier-react/src/components/Banner/Banner.types.ts @@ -1,6 +1,9 @@ import type { ReactNode } from 'react' -import { type IconName } from '@channel.io/bezier-icons' +import { + type BezierIcon, + type IconName, +} from '@channel.io/bezier-icons' import type { AdditionalColorProps, @@ -32,7 +35,7 @@ interface BannerOptions { * * If `null` is given, no icon will be displayed. */ - icon: IconName | null + icon: BezierIcon | IconName | null /** * Whether to display link at the end of banner content. @@ -72,10 +75,8 @@ interface BannerOptions { /** * Specifies which icon button to display at the top right of the banner. - * - * FIXME(@ed): 새로운 아이콘 방식으로 변경 */ - actionIcon?: IconName + actionIcon?: BezierIcon | IconName /** * Handler to be executed when the action icon button is clicked. diff --git a/packages/bezier-react/src/components/Button/Button.mdx b/packages/bezier-react/src/components/Button/Button.mdx index bc19e135a4..80a9b124c0 100644 --- a/packages/bezier-react/src/components/Button/Button.mdx +++ b/packages/bezier-react/src/components/Button/Button.mdx @@ -1,6 +1,10 @@ import { useState, } from 'react' +import { + PlayIcon, + TriangleDownIcon, +} from '@channel.io/bezier-icons' import { ArgsTable, Canvas, @@ -107,7 +111,7 @@ ButtonGroup에 대해 더 알아보려면 [스토리](/docs/components-buttongro ### Recipe: Button with various contents -- 기본적으로 `leftContent`, `rightContent` prop에 icon name에 해당하는 string을 지정하여 좌우측에 아이콘이 들어가는 형태를 표현합니다. +- 기본적으로 `leftContent`, `rightContent` prop에 `BezierIcon`을 지정하여 좌우측에 아이콘이 들어가는 형태를 표현합니다. @@ -140,7 +144,7 @@ const AsyncActionButton = () => { } return (