-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: TableContainer 생성 * fix: 스토리북 문서 생성 * feat: Table 기본 CSS 적용 * feat: checkbox 생성 * feat:header checkbox body checkbox 구분 로직 생성 * feat: checkbox context 생성 * fix: table tree 방식 파괴 * feat: 체크박스 기능 추가 * feat: 체크박스 기능 생성 * feat: 체크박스 기능 추가 * feat: 선택시 배경 색상 변경 * fix: table 컴포넌트 접근성 관련 처리 * feat: table 컴포넌트 props 명확히 정리 * feat: 스토리북 문서 작성 * fix: rollup, package.json 설정 변경 * feat: 스크롤 가능한 table로 개선 * fix: 스토리북 문서화 잘못 되어 있는 부분 수정 * feat: 페이지네이션 컴포넌트 구현 * feat: table with pagination * refac: 테이블 컴포넌트 합성 컴포넌트로 변경 * fix: Table 코드 깔끔하게 정리 * fix: 스타일 수정 사항 반영 * fix: 사용하지 않는 컨테이너 컴포넌트 제거 * fix: 패키지 버전 변경 * fix: pagination 컴포넌트 코드리뷰 반영 * fix: 배경색 변경 변수명 깔끔하게 * fix: 코드리뷰 반영 * feat: changset 파일 작성 * fix: package 오타수정
- Loading branch information
Showing
21 changed files
with
1,508 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "wowds-ui": patch | ||
| --- | ||
|
|
||
| pagination 컴포넌트를 배포해요. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { forwardRef } from "react"; | ||
| import { color } from "wowds-tokens"; | ||
|
|
||
| import type { IconProps } from "@/types/Icon.ts"; | ||
|
|
||
| const DoubleArrow = forwardRef<SVGSVGElement, IconProps>( | ||
| ( | ||
| { | ||
| className, | ||
| width = "20", | ||
| height = "20", | ||
| viewBox = "0 0 20 20", | ||
| stroke = "white", | ||
| ...rest | ||
| }, | ||
| ref | ||
| ) => { | ||
| return ( | ||
| <svg | ||
| aria-label="double-arrow icon" | ||
| className={className} | ||
| fill="none" | ||
| height={height} | ||
| ref={ref} | ||
| viewBox={viewBox} | ||
| width={width} | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| {...rest} | ||
| > | ||
| <path | ||
| d="M6 4L11 10L6 16" | ||
| stroke={color[stroke]} | ||
| strokeLinejoin="bevel" | ||
| strokeWidth="1.4" | ||
| /> | ||
| <path | ||
| d="M11 4L16 10L11 16" | ||
| stroke={color[stroke]} | ||
| strokeLinejoin="bevel" | ||
| strokeWidth="1.4" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| DoubleArrow.displayName = "DoubleArrow"; | ||
| export default DoubleArrow; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
145 changes: 145 additions & 0 deletions
145
packages/wow-ui/src/components/Pagination/Pagination.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { useState } from "react"; | ||
|
|
||
| import Button from "@/components/Button"; | ||
| import Pagination from "@/components/Pagination"; | ||
|
|
||
| const meta = { | ||
| title: "UI/Pagination", | ||
| component: Pagination, | ||
| tags: ["autodocs"], | ||
| parameters: { | ||
| componentSubtitle: "페이지네이션 컴포넌트", | ||
| a11y: { | ||
| config: { | ||
| rules: [{ id: "color-contrast", enabled: false }], | ||
| }, | ||
| }, | ||
| }, | ||
| argTypes: { | ||
| totalPages: { | ||
| description: "페이지의 총 개수입니다.", | ||
| table: { | ||
| type: { summary: "number" }, | ||
| }, | ||
| control: { | ||
| type: "number", | ||
| }, | ||
| }, | ||
| currentPage: { | ||
| description: "외부에서 주입할 수 있는 현재 페이지입니다.", | ||
| table: { | ||
| type: { summary: "number" }, | ||
| }, | ||
| control: { | ||
| type: "number", | ||
| }, | ||
| }, | ||
| defaultPage: { | ||
| description: "기본 페이지입니다.", | ||
| table: { | ||
| type: { summary: "number" }, | ||
| }, | ||
| control: { | ||
| type: "number", | ||
| }, | ||
| }, | ||
| onChange: { | ||
| description: "외부에서 페이지 값의 변화를 감지할 수 있는 함수입니다.", | ||
| table: { | ||
| type: { summary: "(page: number) => void" }, | ||
| }, | ||
| }, | ||
| pageButtonBackgroundColor: { | ||
| description: "페이지네이션 컴포넌트 버튼 색을 변경합니다.", | ||
| table: { | ||
| type: { summary: "ColorToken" }, | ||
| }, | ||
| }, | ||
| style: { | ||
| description: | ||
| "페이지네이션 컴포넌트에 커스텀하게 전달할 style입니다 배경색 등을 변경할 수 있습니다.", | ||
| table: { | ||
| type: { summary: "CSSProperties" }, | ||
| defaultValue: { summary: "{}" }, | ||
| }, | ||
| control: false, | ||
| }, | ||
| className: { | ||
| description: | ||
| "페이지네이션 컴포넌트에 전달하는 커스텀 클래스를 설정합니다.", | ||
| table: { | ||
| type: { summary: "string" }, | ||
| }, | ||
| control: { | ||
| type: "text", | ||
| }, | ||
| }, | ||
| }, | ||
| } satisfies Meta<typeof Pagination>; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Primary: Story = { | ||
| args: { | ||
| totalPages: 13, | ||
| }, | ||
| }; | ||
|
|
||
| export const DefaultPage: Story = { | ||
| args: { | ||
| totalPages: 13, | ||
| defaultPage: 6, | ||
| }, | ||
| }; | ||
|
|
||
| export const ChangeBackgroundColorPage: Story = { | ||
| args: { | ||
| totalPages: 15, | ||
| pageButtonBackgroundColor: "red50", | ||
| }, | ||
| }; | ||
|
|
||
| const ControlledPagination = () => { | ||
| const [selectedPage, setSelectedPage] = useState<number>(1); | ||
|
|
||
| const handleSelectionChange = () => { | ||
| if (selectedPage >= 15) { | ||
| setSelectedPage(15); | ||
| } else setSelectedPage(selectedPage + 3); | ||
| }; | ||
| return ( | ||
| <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}> | ||
| <Button onClick={() => handleSelectionChange()}> | ||
| 3페이지씩 건너뛰기 | ||
| </Button> | ||
| <Pagination currentPage={selectedPage} totalPages={15} /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const ControlledState: Story = { | ||
| args: { totalPages: 15 }, | ||
| render: () => <ControlledPagination />, | ||
| }; | ||
|
|
||
| const WatchPageStatePagination = () => { | ||
| const [selectedPage, setSelectedPage] = useState<number>(1); | ||
|
|
||
| const handleSelectionChange = (page: number) => { | ||
| setSelectedPage(page); | ||
| }; | ||
| return ( | ||
| <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}> | ||
| <Pagination totalPages={15} onChange={handleSelectionChange} /> | ||
| <div>선택된 페이지는 {selectedPage}입니다 </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const WatchPageState: Story = { | ||
| args: { totalPages: 15 }, | ||
| render: () => <WatchPageStatePagination />, | ||
| }; |
Oops, something went wrong.