From 64e07c78aecb63897a01d0abb278fdb683e9ca21 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Sat, 24 Aug 2024 03:25:13 +0900 Subject: [PATCH] =?UTF-8?q?refactor(ui/components/layout):=20flex,=20box?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=82=AC=ED=95=AD=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/components/layout/box.tsx | 112 +++++---------------- packages/ui/src/components/layout/flex.tsx | 71 +++++++------ 2 files changed, 57 insertions(+), 126 deletions(-) diff --git a/packages/ui/src/components/layout/box.tsx b/packages/ui/src/components/layout/box.tsx index c970dad..858c6cd 100644 --- a/packages/ui/src/components/layout/box.tsx +++ b/packages/ui/src/components/layout/box.tsx @@ -1,16 +1,26 @@ -import { assignInlineVars } from '@vanilla-extract/dynamic'; -import * as styles from './box.css'; -import { type HTMLFavolinkProps, Slot, forwardRef } from '../../system'; -import { cx, mergeStyles, px } from '../../utils'; +import * as Styles from './box.css'; +import { extractLayoutProps } from './extract-layout-props'; +import type * as CommonStyles from './layout.css'; +import { + type HTMLFavolinkPropsWithout, + type RemovedProps, + Slot, + forwardRef, +} from '../../system'; +import { cx } from '../../utils'; import { type MarginVariants, extractMarginProps } from '../margin'; -type BoxDivProps = HTMLFavolinkProps<'div'> & { as?: 'div' }; +type BoxDivProps = HTMLFavolinkPropsWithout<'div', RemovedProps> & { + as?: 'div'; +}; -type BoxSpanProps = HTMLFavolinkProps<'span'> & { as: 'span' }; +type BoxSpanProps = HTMLFavolinkPropsWithout<'span', RemovedProps> & { + as: 'span'; +}; -export type BoxProps = MarginVariants & - styles.BoxDynamicVariants & - styles.BoxEnumVariants & +export type BoxProps = CommonStyles.LayoutVariants & + MarginVariants & + Styles.BoxVariants & (BoxDivProps | BoxSpanProps); export const Box = forwardRef( @@ -18,36 +28,10 @@ export const Box = forwardRef( const { as: Tag = 'div', asChild, - children, className, - style, - padding, - paddingX, - paddingY, - paddingTop, - paddingRight, - paddingBottom, - paddingLeft, - width, - minWidth, - maxWidth, - height, - minHeight, - maxHeight, - position, - inset, - top, - right, - bottom, - left, - overflow, - overflowX, - overflowY, - flexBasis, - flexShrink, - flexGrow, + display, ...restProps - } = extractMarginProps(props); + } = extractMarginProps(extractLayoutProps(props)); return ( ( ref={forwardedRef} className={cx( 'favolink-box', - padding && styles.padding, - paddingX && styles.paddingX, - paddingY && styles.paddingY, - paddingTop && styles.paddingTop, - paddingRight && styles.paddingRight, - paddingBottom && styles.paddingBottom, - paddingLeft && styles.paddingLeft, - width && styles.width, - minWidth && styles.minWidth, - maxWidth && styles.maxWidth, - height && styles.width, - minHeight && styles.minHeight, - maxHeight && styles.maxHeight, - inset && styles.inset, - top && styles.top, - right && styles.right, - bottom && styles.bottom, - left && styles.left, - flexBasis && styles.flexBasis, - styles.boxEnumVariants({ - position, - overflow, - overflowX, - overflowY, - flexShrink, - flexGrow, - }), + Styles.boxVariants({ display }), className, )} - style={mergeStyles( - assignInlineVars({ - [styles.dynamicVars.padding]: px(padding), - [styles.dynamicVars.paddingX]: px(paddingX), - [styles.dynamicVars.paddingY]: px(paddingY), - [styles.dynamicVars.paddingTop]: px(paddingTop), - [styles.dynamicVars.paddingRight]: px(paddingRight), - [styles.dynamicVars.paddingBottom]: px(paddingBottom), - [styles.dynamicVars.paddingLeft]: px(paddingLeft), - [styles.dynamicVars.width]: px(width), - [styles.dynamicVars.minWidth]: px(minWidth), - [styles.dynamicVars.maxWidth]: px(maxWidth), - [styles.dynamicVars.height]: px(height), - [styles.dynamicVars.minHeight]: px(minHeight), - [styles.dynamicVars.maxHeight]: px(maxHeight), - [styles.dynamicVars.inset]: px(inset), - [styles.dynamicVars.top]: px(top), - [styles.dynamicVars.right]: px(right), - [styles.dynamicVars.bottom]: px(bottom), - [styles.dynamicVars.left]: px(left), - [styles.dynamicVars.flexBasis]: px(flexBasis), - }), - style, - )} > - {asChild ? children : {children}} + {asChild ? props.children : {props.children}} ); }, diff --git a/packages/ui/src/components/layout/flex.tsx b/packages/ui/src/components/layout/flex.tsx index 9057024..a85551c 100644 --- a/packages/ui/src/components/layout/flex.tsx +++ b/packages/ui/src/components/layout/flex.tsx @@ -1,50 +1,47 @@ -import { assignInlineVars } from '@vanilla-extract/dynamic'; -import { Box, type BoxProps } from './box'; -import * as styles from './flex.css'; -import { forwardRef } from '../../system'; -import { cx, mergeStyles, px } from '../../utils'; +import { extractFlexProps } from './extract-flex-props'; +import { extractLayoutProps } from './extract-layout-props'; +import type * as Styles from './flex.css'; +import type * as CommonStyles from './layout.css'; +import { + type HTMLFavolinkPropsWithout, + type RemovedProps, + Slot, + forwardRef, +} from '../../system'; +import { cx } from '../../utils'; +import { type MarginVariants, extractMarginProps } from '../margin'; -export type FlexProps = BoxProps & - styles.FlexDynamicVariants & - styles.FlexEnumVariants; +type FlexDivProps = HTMLFavolinkPropsWithout<'div', RemovedProps> & { + as?: 'div'; +}; -export const Flex = forwardRef( +type FlexSpanProps = HTMLFavolinkPropsWithout<'span', RemovedProps> & { + as: 'span'; +}; + +export type FlexProps = CommonStyles.LayoutVariants & + MarginVariants & + Styles.FlexVariants & + (FlexDivProps | FlexSpanProps); + +export const Flex = forwardRef( function Flex(props, forwardedRef) { const { + as: Tag = 'div', + asChild, className, - style, - display, - direction, - align, - justify, - wrap, - gap, - gapX, - gapY, + children, ...restProps - } = props; + } = extractMarginProps(extractFlexProps(extractLayoutProps(props))); return ( - + className={cx('favolink-flex', className)} + > + {asChild ? children : {children}} + ); }, );