From b52baaf61029b4cb7620fcf1055105864920d7c1 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sat, 20 Jul 2024 00:47:17 +0900 Subject: [PATCH] =?UTF-8?q?refactor(ui/react/components/layout):=20Flex=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=ED=8E=B8,=20cr?= =?UTF-8?q?eateCssPropertyStyleVariants=20=ED=95=A8=EC=88=98=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20(#256)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(ui/react/components/layout): flex.styles.css.ts 삭제, dynamic, enum 속성이 포함된 Flex 컴포넌트 스타일 추가 * refactor(ui/react/components/layout): dynamic, enum 속성이 포함된 Flex 컴포넌트로 개편 * feat(ui/react/components/layout): 사용하지 않는 createCssPropertyStyleVariants 삭제 --- .../create-css-property-style-variants.ts | 32 --------- .../react/src/components/layout/flex.css.ts | 53 +++++++++++++++ .../src/components/layout/flex.styles.css.ts | 7 -- .../ui/react/src/components/layout/flex.tsx | 67 +++++++++++-------- .../ui/react/src/components/layout/index.ts | 5 -- 5 files changed, 91 insertions(+), 73 deletions(-) delete mode 100644 packages/ui/react/src/components/layout/create-css-property-style-variants.ts create mode 100644 packages/ui/react/src/components/layout/flex.css.ts delete mode 100644 packages/ui/react/src/components/layout/flex.styles.css.ts diff --git a/packages/ui/react/src/components/layout/create-css-property-style-variants.ts b/packages/ui/react/src/components/layout/create-css-property-style-variants.ts deleted file mode 100644 index 29591f0..0000000 --- a/packages/ui/react/src/components/layout/create-css-property-style-variants.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { styleVariants } from '@vanilla-extract/css'; -import { type CSSProperties } from 'react'; - -export type CSSPropertyValue = Exclude< - CSSProperties[Property], - object | undefined ->; - -export function createCSSPropertyStyleVariants< - PropertyKey extends keyof CSSProperties, - PropertyValue extends CSSPropertyValue | number | string, ->( - property: PropertyKey, - propertyValues: (number | string)[] | PropertyValue[], -) { - const propertyValueRecord = propertyValues.reduce( - (accumulator, currentPropertyValue) => ({ - ...accumulator, - [currentPropertyValue]: currentPropertyValue, - }), - {} as Record, - ); - - const propertyStyleVariants = styleVariants( - propertyValueRecord, - (propertyValue) => ({ - [property]: propertyValue, - }), - ); - - return propertyStyleVariants; -} diff --git a/packages/ui/react/src/components/layout/flex.css.ts b/packages/ui/react/src/components/layout/flex.css.ts new file mode 100644 index 0000000..3af23c2 --- /dev/null +++ b/packages/ui/react/src/components/layout/flex.css.ts @@ -0,0 +1,53 @@ +import { type RecipeVariants, recipe } from '@vanilla-extract/recipes'; +import { dynamicStyles, dynamicVars, enumStyles } from '../../styles/utils'; + +const { + display: { none, flex, inlineFlex }, + alignItems: align, + justifyContent: justify, + flexWrap: wrap, + flexDirection: direction, +} = enumStyles; + +export const flexEnumVariants = recipe({ + variants: { + display: { + none, + flex, + inlineFlex, + }, + align, + direction, + justify, + wrap, + }, + + defaultVariants: { + display: 'flex', + }, +}); + +export type FlexEnumVariants = Exclude< + RecipeVariants, + undefined +>; + +const { gapVar, gapXVar, gapYVar } = dynamicVars; + +export const flexDynamicVariantVars = { + gapVar, + gapXVar, + gapYVar, +}; + +const { gap, gapX, gapY } = dynamicStyles; + +export const flexDynamicVariants = { + gap, + gapX, + gapY, +}; + +export type FlexDynamicVariants = Partial< + Record +>; diff --git a/packages/ui/react/src/components/layout/flex.styles.css.ts b/packages/ui/react/src/components/layout/flex.styles.css.ts deleted file mode 100644 index e194987..0000000 --- a/packages/ui/react/src/components/layout/flex.styles.css.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { style } from '@vanilla-extract/css'; -import { flexStyleVars } from '../../styles'; - -export const flexBase = style({ - display: 'flex', - ...flexStyleVars, -}); diff --git a/packages/ui/react/src/components/layout/flex.tsx b/packages/ui/react/src/components/layout/flex.tsx index 5caf288..45b03b6 100644 --- a/packages/ui/react/src/components/layout/flex.tsx +++ b/packages/ui/react/src/components/layout/flex.tsx @@ -1,33 +1,42 @@ -import { - type HTMLFavolinkProps, - favolink, - forwardRef, -} from '@favolink-ui/system'; +import { forwardRef } from '@favolink-ui/system'; import { cx } from '@favolink-ui/utils'; -import * as styles from './flex.styles.css'; -import { extractProps } from '../../extract-props'; -import { - type FlexStyleProps, - flexStyleProps, - flexStyleVars, -} from '../../styles'; +import { Box, type BoxProps } from './box'; +import * as styles from './flex.css'; +import { extractDynamicProps } from '../../styles'; -export type FlexProps = FlexStyleProps & HTMLFavolinkProps<'div'>; +export type FlexProps = BoxProps & + styles.FlexDynamicVariants & + styles.FlexEnumVariants; -export const Flex = forwardRef(function Flex(props, ref) { - const { children, className, ...restProps } = extractProps( - props, - flexStyleVars, - flexStyleProps, - ); +export const Flex = forwardRef( + function Flex(props, forwardedRef) { + const { + children, + className, + display, + align, + direction, + justify, + wrap, + ...restProps + } = extractDynamicProps( + props, + styles.flexDynamicVariantVars, + styles.flexDynamicVariants, + ); - return ( - - {children} - - ); -}); + return ( + + {children} + + ); + }, +); diff --git a/packages/ui/react/src/components/layout/index.ts b/packages/ui/react/src/components/layout/index.ts index 5c35e3d..72b604d 100644 --- a/packages/ui/react/src/components/layout/index.ts +++ b/packages/ui/react/src/components/layout/index.ts @@ -1,8 +1,3 @@ /* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */ -export { - createCSSPropertyStyleVariants, - type CSSPropertyValue, -} from './create-css-property-style-variants'; - export { Box, type BoxProps } from './box'; export { Flex, type FlexProps } from './flex';