From a7c4ee7d9e792500c9a84cdea16ebed58b4d39c6 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 14 May 2024 14:28:44 +0900 Subject: [PATCH] feature. Remove deprecated components regarding SearchBox --- .../search-box/TSearchBox.interface.ts | 33 ----- .../data-container/search-box/TSearchBox.tsx | 120 ---------------- .../search-box/TSearchBoxContext.ts | 9 -- .../search-box/TSearchBoxItem.tsx | 70 ---------- .../search-box/TSearchBoxRow.tsx | 41 ------ .../data-container/search-box/index.ts | 5 - src/components/index.ts | 1 - src/styles/component/Components.scss | 1 - .../data-container/search-box/TSearchBox.scss | 114 --------------- .../search-box/TSearchBox.stories.tsx | 80 ----------- .../search-box/TSearchBox.test.tsx | 130 ------------------ .../search-box/TSearchBoxItem.test.tsx | 82 ----------- .../search-box/TSearchBoxRow.test.tsx | 33 ----- .../step-box/TSearchBox.test.tsx | 130 ------------------ 14 files changed, 849 deletions(-) delete mode 100644 src/components/data-container/search-box/TSearchBox.interface.ts delete mode 100644 src/components/data-container/search-box/TSearchBox.tsx delete mode 100644 src/components/data-container/search-box/TSearchBoxContext.ts delete mode 100644 src/components/data-container/search-box/TSearchBoxItem.tsx delete mode 100644 src/components/data-container/search-box/TSearchBoxRow.tsx delete mode 100644 src/components/data-container/search-box/index.ts delete mode 100644 src/styles/component/data-container/search-box/TSearchBox.scss delete mode 100644 stories/components/data-container/search-box/TSearchBox.stories.tsx delete mode 100644 tests/unit/react/tks/component/data-container/search-box/TSearchBox.test.tsx delete mode 100644 tests/unit/react/tks/component/data-container/search-box/TSearchBoxItem.test.tsx delete mode 100644 tests/unit/react/tks/component/data-container/search-box/TSearchBoxRow.test.tsx delete mode 100644 tests/unit/react/tks/component/data-container/step-box/TSearchBox.test.tsx diff --git a/src/components/data-container/search-box/TSearchBox.interface.ts b/src/components/data-container/search-box/TSearchBox.interface.ts deleted file mode 100644 index 989d9a4d..00000000 --- a/src/components/data-container/search-box/TSearchBox.interface.ts +++ /dev/null @@ -1,33 +0,0 @@ -import {ReactNode} from 'react'; -import {TBaseProps} from '@/common/base/TBase.interface'; - -type TFormLabel = string | ReactNode; - -export interface TSearchBoxProps extends TBaseProps { - children: ReactNode, - - column?: number, - labelWidth?: string, - - expandableZone?: ReactNode, - - onSearch?: () => void, - onReset?: () => void, -} - -export interface TSearchBoxRowProps extends TBaseProps { - children: ReactNode, -} - -export interface TSearchBoxItemProps extends TBaseProps { - children: ReactNode, - - span?: number, - required?: boolean, - label?: TFormLabel, -} - -export interface TSearchBoxContextInterface { - column: number - labelWidth: string, -} diff --git a/src/components/data-container/search-box/TSearchBox.tsx b/src/components/data-container/search-box/TSearchBox.tsx deleted file mode 100644 index b8920e81..00000000 --- a/src/components/data-container/search-box/TSearchBox.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import {CSSProperties, useCallback, useMemo, useState} from 'react'; -import TButton from '../../button/button/TButton'; -import {TSearchBoxContextInterface, TSearchBoxProps} from './TSearchBox.interface'; -import TSearchBoxContext from './TSearchBoxContext'; -import {TIcon} from '~/icon'; - - -function TSearchBox(props: TSearchBoxProps) { - - // region [Hooks] - - const searchBoxContext: TSearchBoxContextInterface = {column: props.column, labelWidth: props.labelWidth}; - - const [isExpanded, setIsExpanded] = useState(false); - - // endregion - - - // region [Styles] - - const rootClass: string = useMemo((): string => { - const clazz: string[] = []; - - if (props.className) clazz.push(props.className); - - return clazz.join(' '); - }, [props.className]); - - const expandZoneClass: string = useMemo((): string => { - - if (isExpanded) { return 't-search-box__content__expand-zone--expanded'; } - - return 't-search-box__content__expand-zone--collapsed'; - }, [isExpanded]); - - const rootStyle: CSSProperties = useMemo(() => { - let style: CSSProperties = {}; - - if (props.style) style = {...props.style}; - - return style; - }, [props.style]); - - // endregion - - // region [Events] - - const onSearch = useCallback(() => { - props.onSearch(); - }, [props]); - - const onReset = useCallback(() => { - props.onReset(); - }, [props]); - - const onClickExpand = useCallback(() => { - setIsExpanded(!isExpanded); - }, [isExpanded]); - - // endregion - - - // region [Templates] - - return ( -
- 검색 조건 - -
- - {props.children} - { - props.expandableZone && ( -
-
- {isExpanded && props.expandableZone} -
- -
-
-
-
- { isExpanded ? '닫기' : '열기'} - expand_more -
-
-
- -
- - ) - } - -
- - { - (props.onReset || props.onSearch) && ( -
- {props.onReset && (초기화)} - {props.onSearch && (조회)} -
- ) - } - -
- ); - - // endregion - - -} - -TSearchBox.defaultProps = { - column: 2, - labelWidth: '15%', -}; - -export default TSearchBox; diff --git a/src/components/data-container/search-box/TSearchBoxContext.ts b/src/components/data-container/search-box/TSearchBoxContext.ts deleted file mode 100644 index ef1462cd..00000000 --- a/src/components/data-container/search-box/TSearchBoxContext.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {createContext} from 'react'; -import {TSearchBoxContextInterface} from './TSearchBox.interface'; - -export const searchBoxContext = createContext({ - column: 2, - labelWidth: '500px', -}); - -export default searchBoxContext; diff --git a/src/components/data-container/search-box/TSearchBoxItem.tsx b/src/components/data-container/search-box/TSearchBoxItem.tsx deleted file mode 100644 index e00fc82a..00000000 --- a/src/components/data-container/search-box/TSearchBoxItem.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import {CSSProperties, useContext, useMemo} from 'react'; -import TSearchBoxContext from './TSearchBoxContext'; -import {TSearchBoxItemProps} from '@/components'; - -function TSearchBoxItem(props: TSearchBoxItemProps) { - - // region [Hooks] - - const {column, labelWidth} = useContext(TSearchBoxContext); - - - // endregion - - - // region [Styles] - - const rootClass = useMemo((): string => { - const clazz: string[] = []; - - if (props.className) { clazz.push(props.className); } - if (props.required) { clazz.push('t-search-box-item--required'); } - - return clazz.join(' '); - }, [props.className, props.required]); - - const rootStyle = useMemo((): CSSProperties => { - let style: CSSProperties = {}; - - style.width = `calc(100% / ${column} * ${props.span || 1})`; - if (props.style) { style = {...props.style}; } - - return style; - }, [column, props.span, props.style]); - - - const labelStyle = useMemo((): CSSProperties => { - const style: CSSProperties = {}; - - style.flex = `0 0 ${labelWidth}`; - - return style; - }, [labelWidth]); - - // endregion - - - // region [Templates] - - return ( - - { - props.label && ( - - ) - } -
{props.children}
- - ); - - // endregion - - -} - -export default TSearchBoxItem; diff --git a/src/components/data-container/search-box/TSearchBoxRow.tsx b/src/components/data-container/search-box/TSearchBoxRow.tsx deleted file mode 100644 index e83ef042..00000000 --- a/src/components/data-container/search-box/TSearchBoxRow.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import {CSSProperties, useMemo} from 'react'; -import {TSearchBoxRowProps} from '@/components'; - -function TSearchBoxRow(props: TSearchBoxRowProps) { - - // region [Styles] - - - const rootClass = useMemo((): string => { - const clazz: string[] = []; - - if (props.className) clazz.push(props.className); - - return clazz.join(' '); - }, [props.className]); - - const rootStyle: CSSProperties = useMemo((): CSSProperties => { - let style: CSSProperties = {}; - - if (props.style) style = {...props.style}; - - return style; - }, [props.style]); - - // endregion - - - // region [Templates] - - return ( -
- {props.children} -
- ); - - // endregion - - -} - -export default TSearchBoxRow; diff --git a/src/components/data-container/search-box/index.ts b/src/components/data-container/search-box/index.ts deleted file mode 100644 index 5a16baf5..00000000 --- a/src/components/data-container/search-box/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as TSearchBox } from './TSearchBox'; -export { default as TSearchBoxRow } from './TSearchBoxRow'; -export { default as TSearchBoxItem } from './TSearchBoxItem'; - -export * from './TSearchBox.interface'; diff --git a/src/components/index.ts b/src/components/index.ts index dd0f963c..8c20cf7d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -14,7 +14,6 @@ export * from './data-container/form-section'; export * from './data-container/action-bar'; export * from './data-container/highlight-text'; export * from './data-container/pagination'; -export * from './data-container/search-box'; export * from './data-container/tab-box'; export * from './data-container/step-box'; export * from './data-container/card'; diff --git a/src/styles/component/Components.scss b/src/styles/component/Components.scss index 0e559317..bbd379e8 100644 --- a/src/styles/component/Components.scss +++ b/src/styles/component/Components.scss @@ -4,7 +4,6 @@ @import 'button/icon-button/TIconButton'; // data-container -@import 'data-container/search-box/TSearchBox.scss'; @import 'data-container/data-grid/TDataGrid.scss'; @import 'data-container/highlight-text/THighlightText.scss'; @import 'data-container/drop-holder/TDropHolder.scss'; diff --git a/src/styles/component/data-container/search-box/TSearchBox.scss b/src/styles/component/data-container/search-box/TSearchBox.scss deleted file mode 100644 index 3ca9a346..00000000 --- a/src/styles/component/data-container/search-box/TSearchBox.scss +++ /dev/null @@ -1,114 +0,0 @@ -.t-search-box { - - .t-search-box__content { - display: flex; - flex-direction: column; - background-color: $t-background-color-01; - padding: 0 $t-spacing-32; - - & > .t-search-box-row { - &:first-child { padding-top: $t-spacing-32; } - &:last-child { padding-bottom: $t-spacing-32; } - } - - .t-search-box__content__expand-zone { - - .t-search-box__content__expand-zone__panel { - height: 30px; - width: 100%; - display: flex; - align-items: center; - position: relative; - margin-bottom: $t-spacing-32; - .t-search-box__content__expand-zone__panel__divider { - border-bottom: 1px solid $t-gray-color-2; - width: 100%; - } - - .t-search-box__content__expand-zone__panel__expand-button-wrapper { - position: absolute; - width: 128px; - left: calc(50% - 64px) ; - background: $t-primary-color--tint-9; - padding: 0 $t-spacing-32; - color: $t-primary-color; - - .t-search-box__content__expand-zone__panel__expand-button { - display: flex; - gap: $t-spacing-8; - align-items: center; - font-weight: $t-font-weight-medium; - cursor: pointer; - @include user-select-none; - - .t-icon { - transform: rotate(0deg); - transition: 0.2s; - } - } - } - } - - &.t-search-box__content__expand-zone--expanded { - .t-search-box__content__expand-zone__panel .t-search-box__content__expand-zone__panel__expand-button .t-icon { - transform: rotate(180deg); - } - } - } - - } - - .t-search-box__action-bar { - margin-top: $t-spacing-48; - display: flex; - justify-content: center; - } - - .t-search-box__action-bar { - display: flex; - - - .t-search-box__form-action-bar__left-action { - flex: 1 0 auto; - } - .t-search-box__form-action-bar__right-action { - flex: 0 1 auto; - } - } - - .t-search-box-row { - width: 100%; - display: flex; - align-items: flex-start; - gap: 0; - padding: $t-spacing-16 0; - } - - -} - - -.t-search-box-item { - display: flex; - align-items: center; - position: relative; - padding: 0; - flex: 0 0 auto; - - .t-search-box-item__label { - font-weight: $t-font-weight-regular; - } - .t-search-box-item__content { - flex: 1 0 auto; - display: flex; - align-items: center; - gap: $t-spacing-8; - min-height: 46px; - line-height: $t-line-height-body; - padding-right: $t-spacing-56; - } - - &.t-search-box-item--required .t-search-box-item__label::after { - @include require-mark; - } -} diff --git a/stories/components/data-container/search-box/TSearchBox.stories.tsx b/stories/components/data-container/search-box/TSearchBox.stories.tsx deleted file mode 100644 index 21e4dc4a..00000000 --- a/stories/components/data-container/search-box/TSearchBox.stories.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import {Meta, StoryObj} from '@storybook/react'; -import TTextField from '@/components/input/text-field/TTextField'; -import useInputState from '@/common/hook/UseInputState'; -import TToast, {notify} from '@/components/guide/toast/TToast'; -import TSearchBox from '@/components/data-container/search-box/TSearchBox'; -import {TSearchBoxProps} from '@/components/data-container/search-box/TSearchBox.interface'; -import TSearchBoxRow from '@/components/data-container/search-box/TSearchBoxRow'; -import TSearchBoxItem from '@/components/data-container/search-box/TSearchBoxItem'; -import TCheckboxGroup from '@/components/input/checkbox-group/TCheckboxGroup'; - - -const meta: Meta = { - title: 'DataContainer/TSearchBox', - component: TSearchBox, -}; -export default meta; - -type Story = StoryObj; - - -const Template = (args: TSearchBoxProps) => { - - const name = useInputState(''); - const status = useInputState([]); - - - function onReset() { - name.onChange(''); - status.onChange([]); - } - - return ( - <> - - - notify.info('검색 이벤트 발생')} - {...args} - expandableZone={<> - - - - - - - - - - - } - > - - - - - - - - - - - - - ); -}; - - -export const Default: Story = { - render: Template, -}; - diff --git a/tests/unit/react/tks/component/data-container/search-box/TSearchBox.test.tsx b/tests/unit/react/tks/component/data-container/search-box/TSearchBox.test.tsx deleted file mode 100644 index 769fe8e1..00000000 --- a/tests/unit/react/tks/component/data-container/search-box/TSearchBox.test.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import {render, screen} from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import TSearchBox from '~/data-container/search-box/TSearchBox'; -import TSearchBoxRow from '~/data-container/search-box/TSearchBoxRow'; -import TSearchBoxItem from '~/data-container/search-box/TSearchBoxItem'; - - -jest.mock('@/common/util/ColorUtil', () => ({ - shadeColor: jest.fn(() => 'blue'), -})); - -describe('TSearchBox', () => { - - describe('Style', () => { - - it('Classname prop applies to root', () => { - - // Arrange - render(search box content); - const root = screen.getByRole('form'); - - // Assert - - expect(root) - .toHaveClass('class-name-prop'); - - }); - - it('Style prop applies to root', () => { - - // Arrange - render(search box content); - const root = screen.getByRole('form'); - - // Assert - - expect(root) - .toHaveStyle({width: '100%'}); - }); - - it('Column prop applied to TSearchBoxItem width', () => { - - // Arrange - const columnCount = 3; - render(<> - - - content - - - ); - - const searchBoxItem = screen.getByRole('group'); - - // Assert - - expect(searchBoxItem) - .toHaveStyle({width: `calc(100% / ${columnCount} * 1)`}); - }); - - it('Apply the LabelWidth prop to adjust the width of the label in TSearchBoxItem.', () => { - - // Arrange - const labelWidth = '120px'; - render(<> - - - content - - - ); - - const searchBoxItemLabel = screen.getByText('레이블'); - - - // Assert - expect(searchBoxItemLabel) - .toHaveStyle({flex: `0 0 ${labelWidth}`}); - }); - - }); - - describe('Event', () => { - - it('When the onSearch prop is supplied, the "조회" button should be displayed and working', async () => { - - // Arrange - const onSearch = jest.fn(() => { /* Just test */ }); - - render(search box content); - const button = screen.getByRole('button'); - - // Act - await userEvent.click(button); - - // Assert - expect(button) - .toHaveTextContent('조회'); - - expect(button) - .toHaveClass('t-button'); - - expect(onSearch) - .toHaveBeenCalledTimes(1); - }); - - it('When the onSearch prop is supplied, the "조회" button should be displayed and working', async () => { - - // Arrange - const onReset = jest.fn(() => { /* Just test */ }); - - render(search box content); - const button = screen.getByRole('button'); - - // Act - await userEvent.click(button); - - // Assert - expect(button) - .toHaveTextContent('초기화'); - - expect(button) - .toHaveClass('t-button'); - - expect(onReset) - .toHaveBeenCalledTimes(1); - }); - - }); -}); diff --git a/tests/unit/react/tks/component/data-container/search-box/TSearchBoxItem.test.tsx b/tests/unit/react/tks/component/data-container/search-box/TSearchBoxItem.test.tsx deleted file mode 100644 index d94a23e3..00000000 --- a/tests/unit/react/tks/component/data-container/search-box/TSearchBoxItem.test.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import {render, screen} from '@testing-library/react'; -import TSearchBoxItem from '~/data-container/search-box/TSearchBoxItem'; -import TSearchBox from '~/data-container/search-box/TSearchBox'; -import TSearchBoxRow from '~/data-container/search-box/TSearchBoxRow'; - - -// span?: number, - -describe('TSearchBoxItem', () => { - - describe('Style', () => { - - it('Classname prop applies to root', () => { - - // Arrange - render(content); - const root = screen.getByRole('group'); - - // Assert - - expect(root) - .toHaveClass('class-name-prop'); - - }); - - it('Style prop applies to root', () => { - - // Arrange - render(content); - const root = screen.getByRole('group'); - - // Assert - expect(root) - .toHaveStyle({width: '100%'}); - }); - - - it('When required prop is applied, * mark is displayed', () => { - - // Arrange - render(content); - const root = screen.getByRole('group'); - - // Assert - expect(root) - .toHaveClass('t-search-box-item--required'); - }); - - it('When label prop is applied, it should be displayed on label area', () => { - - // Arrange - const labelText = '레이블'; - render(content); - const root = screen.getByText(labelText); - - // Assert - expect(root) - .toHaveClass('t-search-box-item__label'); - }); - - it('When span prop is applied, it should be applied on flex to adjust width', () => { - - // Arrange - const columnCount = 3; - const spanCount = 2; - render(<> - - - content); - - - ); - - const root = screen.getByRole('group'); - - // Assert - expect(root) - .toHaveStyle({width: `calc(100% / ${columnCount} * ${spanCount})`}); - }); - - }); -}); diff --git a/tests/unit/react/tks/component/data-container/search-box/TSearchBoxRow.test.tsx b/tests/unit/react/tks/component/data-container/search-box/TSearchBoxRow.test.tsx deleted file mode 100644 index c375e821..00000000 --- a/tests/unit/react/tks/component/data-container/search-box/TSearchBoxRow.test.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import {render, screen} from '@testing-library/react'; -import TSearchBoxRow from '~/data-container/search-box/TSearchBoxRow'; - - -describe('TSearchBoxRow', () => { - - describe('Style', () => { - - it('Classname prop applies to root', () => { - - // Arrange - render(content); - const root = screen.getByText('content'); - - // Assert - - expect(root) - .toHaveClass('class-name-prop'); - - }); - - it('Style prop applies to root', () => { - - // Arrange - render(content); - const root = screen.getByText('content'); - - // Assert - expect(root) - .toHaveStyle({width: '100%'}); - }); - }); -}); diff --git a/tests/unit/react/tks/component/data-container/step-box/TSearchBox.test.tsx b/tests/unit/react/tks/component/data-container/step-box/TSearchBox.test.tsx deleted file mode 100644 index 769fe8e1..00000000 --- a/tests/unit/react/tks/component/data-container/step-box/TSearchBox.test.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import {render, screen} from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import TSearchBox from '~/data-container/search-box/TSearchBox'; -import TSearchBoxRow from '~/data-container/search-box/TSearchBoxRow'; -import TSearchBoxItem from '~/data-container/search-box/TSearchBoxItem'; - - -jest.mock('@/common/util/ColorUtil', () => ({ - shadeColor: jest.fn(() => 'blue'), -})); - -describe('TSearchBox', () => { - - describe('Style', () => { - - it('Classname prop applies to root', () => { - - // Arrange - render(search box content); - const root = screen.getByRole('form'); - - // Assert - - expect(root) - .toHaveClass('class-name-prop'); - - }); - - it('Style prop applies to root', () => { - - // Arrange - render(search box content); - const root = screen.getByRole('form'); - - // Assert - - expect(root) - .toHaveStyle({width: '100%'}); - }); - - it('Column prop applied to TSearchBoxItem width', () => { - - // Arrange - const columnCount = 3; - render(<> - - - content - - - ); - - const searchBoxItem = screen.getByRole('group'); - - // Assert - - expect(searchBoxItem) - .toHaveStyle({width: `calc(100% / ${columnCount} * 1)`}); - }); - - it('Apply the LabelWidth prop to adjust the width of the label in TSearchBoxItem.', () => { - - // Arrange - const labelWidth = '120px'; - render(<> - - - content - - - ); - - const searchBoxItemLabel = screen.getByText('레이블'); - - - // Assert - expect(searchBoxItemLabel) - .toHaveStyle({flex: `0 0 ${labelWidth}`}); - }); - - }); - - describe('Event', () => { - - it('When the onSearch prop is supplied, the "조회" button should be displayed and working', async () => { - - // Arrange - const onSearch = jest.fn(() => { /* Just test */ }); - - render(search box content); - const button = screen.getByRole('button'); - - // Act - await userEvent.click(button); - - // Assert - expect(button) - .toHaveTextContent('조회'); - - expect(button) - .toHaveClass('t-button'); - - expect(onSearch) - .toHaveBeenCalledTimes(1); - }); - - it('When the onSearch prop is supplied, the "조회" button should be displayed and working', async () => { - - // Arrange - const onReset = jest.fn(() => { /* Just test */ }); - - render(search box content); - const button = screen.getByRole('button'); - - // Act - await userEvent.click(button); - - // Assert - expect(button) - .toHaveTextContent('초기화'); - - expect(button) - .toHaveClass('t-button'); - - expect(onReset) - .toHaveBeenCalledTimes(1); - }); - - }); -});