Skip to content

Commit

Permalink
🔨 FilterButton forwardRef로 변환
Browse files Browse the repository at this point in the history
  • Loading branch information
june6723 committed Jul 8, 2024
1 parent 54c4662 commit d26d445
Show file tree
Hide file tree
Showing 11 changed files with 1,326 additions and 1,365 deletions.
24 changes: 12 additions & 12 deletions apps/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,25 @@
"stylis": "^4.3.2"
},
"devDependencies": {
"@chromatic-com/storybook": "^1",
"@chromatic-com/storybook": "^1.6.1",
"@parte-ds/tsconfig": "workspace:*",
"@storybook/addon-actions": "^8.1.8",
"@storybook/addon-docs": "^8.1.8",
"@storybook/addon-essentials": "^8.1.8",
"@storybook/addon-interactions": "^8.1.8",
"@storybook/addon-links": "^8.1.8",
"@storybook/addon-mdx-gfm": "^8.1.8",
"@storybook/react": "^8.1.8",
"@storybook/react-vite": "^8.1.8",
"@storybook/test": "^8.1.8",
"@storybook/addon-actions": "^8.1.11",
"@storybook/addon-docs": "^8.1.11",
"@storybook/addon-essentials": "^8.1.11",
"@storybook/addon-interactions": "^8.1.11",
"@storybook/addon-links": "^8.1.11",
"@storybook/addon-mdx-gfm": "^8.1.11",
"@storybook/react": "^8.1.11",
"@storybook/react-vite": "^8.1.11",
"@storybook/test": "^8.1.11",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"chromatic": "^6.24.1",
"eslint-config-parte": "workspace:*",
"serve": "^14.2.3",
"storybook": "^8.1.8",
"typescript": "^5.4.5",
"storybook": "^8.1.11",
"typescript": "^5.5.3",
"vite": "^4.5.3"
}
}
9 changes: 4 additions & 5 deletions apps/storybook/stories/Buttons/FilterButton.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,15 @@ type Story = StoryObj<typeof FilterButton>;

export const Fill: Story = {
args: {
type: "fill",
variant: "fill",
size: "medium",
children: "필터",
},
};
export const Outline: Story = {
args: {
type: "outline",
variant: "outline",
size: "medium",
},
parameters: {
controls: { exclude: ["variant", "size"] },
children: "필터",
},
};
7 changes: 7 additions & 0 deletions apps/web/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# @parte-ds/web

## 0.1.105

### Patch Changes

- Updated dependencies
- @parte-ds/ui@1.22.8

## 0.1.104

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion apps/web/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@parte-ds/web",
"version": "0.1.104",
"version": "0.1.105",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
"release": "turbo run build --filter=!./apps/* && changeset publish"
},
"devDependencies": {
"@changesets/cli": "^2.27.5",
"eslint": "^9.4.0",
"@changesets/cli": "^2.27.7",
"eslint": "^9.6.0",
"eslint-config-parte": "workspace:*",
"prettier": "^3.3.2",
"turbo": "^2.0.3"
"turbo": "^2.0.6"
},
"packageManager": "[email protected]",
"name": "parte"
Expand Down
6 changes: 6 additions & 0 deletions packages/parte-ui/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# @parte-ds/ui

## 1.22.8

### Patch Changes

- Fix filter button to foward ref comp

## 1.22.7

### Patch Changes
Expand Down
10 changes: 5 additions & 5 deletions packages/parte-ui/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@parte-ds/ui",
"version": "1.22.7",
"version": "1.22.8",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
Expand All @@ -18,13 +18,13 @@
"devDependencies": {
"@parte-ds/tsconfig": "workspace:*",
"@parte-ds/utils": "workspace:*",
"@tanstack/react-table": "^8.17.3",
"@types/node": "^20.14.2",
"@tanstack/react-table": "^8.19.2",
"@types/node": "^20.14.10",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-transition-group": "^4.4.10",
"@types/shallowequal": "^1.1.5",
"eslint": "^9.4.0",
"eslint": "^9.6.0",
"eslint-config-parte": "workspace:*",
"react": "^18.3.1",
"react-dom": "^18.3.1",
Expand All @@ -35,7 +35,7 @@
"shallowequal": "^1.1.0",
"styled-components": "^6.1.11",
"tsup": "^7.2.0",
"typescript": "^5.4.5"
"typescript": "^5.5.3"
},
"publishConfig": {
"access": "public"
Expand Down
82 changes: 44 additions & 38 deletions packages/parte-ui/src/FilterButton/FilterButton.styled.ts
Original file line number Diff line number Diff line change
@@ -1,80 +1,82 @@
import { ExtractToStyledProps } from "@parte-ds/utils";
import styled, { css } from "styled-components";
import {
import type {
FilterButtonSize,
FilterButtonProps,
FilterButtonType,
FilterButtonStyledProps,
FilterButtonVariant,
} from "./FilterButton.types";
import { theme } from "../@foundations";

const sizeHandler = (size: FilterButtonSize) => {
if (size === "large")
return css`
height: 40px;
padding: 10px 12px;
${({ theme }) => theme.typography.C300};
`;

if (size === "medium")
return css`
height: 32px;
padding: 8px 12px;
${({ theme }) => theme.typography.C200};
`;
};

const typeHaandler = (type: FilterButtonType) => {
if (type === "fill")
const typeHaandler = (variant: FilterButtonVariant) => {
if (variant === "fill")
return css`
color: ${theme.colors.N700};
background-color: ${theme.colors.N100};
color: ${({ theme }) => theme.colors.N700};
background-color: ${({ theme }) => theme.colors.N100};
border: none;
outline: none;
&:hover {
background-color: ${theme.colors.N200};
background-color: ${({ theme }) => theme.colors.N200};
}
&:active {
color: ${theme.colors.N800};
background-color: ${theme.colors.N300};
color: ${({ theme }) => theme.colors.N800};
background-color: ${({ theme }) => theme.colors.N300};
}
&[data-selected="true"] {
color: ${theme.colors.B400};
background-color: ${theme.colors.B50};
&[data-active="true"] {
color: ${({ theme }) => theme.colors.B400};
background-color: ${({ theme }) => theme.colors.B50};
svg {
color: ${theme.colors.B400};
color: ${({ theme }) => theme.colors.B400};
}
}
&[data-active="true"]:hover {
background-color: ${({ theme }) => theme.colors.B100};
}
`;
if (type === "outline")
if (variant === "outline")
return css`
color: ${theme.colors.N700};
background-color: ${theme.colors.N0};
border: 1px solid ${theme.colors.N400};
color: ${({ theme }) => theme.colors.N700};
background-color: ${({ theme }) => theme.colors.N0};
border: 1px solid ${({ theme }) => theme.colors.N400};
&:hover {
background-color: ${theme.colors.N100};
background-color: ${({ theme }) => theme.colors.N100};
}
&:active {
color: ${theme.colors.N800};
background-color: ${theme.colors.N200};
color: ${({ theme }) => theme.colors.N800};
background-color: ${({ theme }) => theme.colors.N200};
}
&[data-active="true"] {
color: ${({ theme }) => theme.colors.B400};
background-color: ${({ theme }) => theme.colors.B50};
}
&[data-selected="true"] {
color: ${theme.colors.B400};
background-color: ${theme.colors.B50};
&[data-active="true"]:hover {
background-color: ${({ theme }) => theme.colors.B100};
}
`;
};

const filterButtonStyles = css<FilterButtonProps>`
${({ size, type }) => css`
${sizeHandler(size ?? "large")}
${typeHaandler(type ?? "fill")}
`}
export const StyledFilterButton = styled.button<FilterButtonStyledProps>`
position: relative;
display: inline-flex;
align-items: center;
flex-direction: row;
justify-content: center;
text-decoration: none;
vertical-align: middle;
outline: none;
user-select: none;
cursor: pointer;
white-space: nowrap;
Expand All @@ -85,13 +87,17 @@ const filterButtonStyles = css<FilterButtonProps>`
-moz-appearance: none;
gap: 6px;
border-radius: 4px;
font-family: inherit;
width: fit-content;
${({ $variant, $size }) => css`
${sizeHandler($size)}
${typeHaandler($variant)}
`}
&:focus {
${({ theme }) => theme.commonStyles.outline}
}
&:disabled {
cursor: default;
}
`;
export const StyledFilterButton = styled.button<FilterButtonProps>`
${filterButtonStyles}
`;
48 changes: 25 additions & 23 deletions packages/parte-ui/src/FilterButton/FilterButton.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
import { forwardRef } from "react";
import { FilterButtonProps } from "./FilterButton.types";
import { forwardRef, PropsWithChildren } from "react";
import { FilterTwoIcon } from "../../../parte-icons/src";
import { StyledFilterButton } from "./FilterButton.styled";
import { Caption } from "../@foundations";
import type { FilterButtonProps } from "./FilterButton.types";

export const FilterButton = ({
selectedCount,
size = "large",
type = "fill",
text = "필터",
}: FilterButtonProps) => {
return (
<StyledFilterButton
selectedCount={selectedCount}
size={size}
type={type}
data-selected={selectedCount ? selectedCount > 0 : false}
>
<FilterTwoIcon size={size === "large" ? 20 : 16} />
<Caption size={size === "large" ? 300 : 200}>
{text} {selectedCount === 0 ? "" : selectedCount}
</Caption>
</StyledFilterButton>
);
};
export const FilterButton = forwardRef<
HTMLButtonElement,
PropsWithChildren<FilterButtonProps>
>(
(
{ selectedCount, size = "large", variant = "fill", children, ...rest },
ref,
) => {
return (
<StyledFilterButton
ref={ref}
$size={size}
$variant={variant}
data-active={selectedCount ? selectedCount > 0 : false}
type="button"
{...rest}
>
<FilterTwoIcon size={size === "large" ? 20 : 16} />
{children} {selectedCount === 0 ? "" : selectedCount}
</StyledFilterButton>
);
},
);

FilterButton.displayName = "FilterButton";
9 changes: 7 additions & 2 deletions packages/parte-ui/src/FilterButton/FilterButton.types.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
export type FilterButtonType = "fill" | "outline";
export type FilterButtonVariant = "fill" | "outline";
export type FilterButtonSize = "medium" | "large";
export type FilterButtonProps = {
selectedCount?: number;
size?: FilterButtonSize;
type?: FilterButtonType;
variant?: FilterButtonVariant;
text?: string;
};

export type FilterButtonStyledProps = {
$size: FilterButtonSize;
$variant: FilterButtonVariant;
};
Loading

0 comments on commit d26d445

Please sign in to comment.