From 3d25d2d2fea51a8f3ed137664dc9beb6991c82f2 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Thu, 1 Aug 2024 16:36:36 +0900 Subject: [PATCH] =?UTF-8?q?feat(ui/react):=20extractMarginProps,=20margin?= =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20style=20=EC=B6=94=EA=B0=80=20(#285)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(ui/react): extractMarginProps, margin 관련 style 추가 * feat(ui/react): 컴포넌트들에 margin 속성 추가 --- .../ui/react/src/components/layout/box.tsx | 6 +- .../ui/react/src/components/layout/flex.tsx | 5 +- packages/ui/react/src/components/tag/tag.tsx | 11 ++-- .../src/components/typography/heading.tsx | 4 +- .../react/src/components/typography/text.tsx | 4 +- .../react/src/margin/extract-margin-props.ts | 57 +++++++++++++++++++ packages/ui/react/src/margin/index.ts | 3 + packages/ui/react/src/margin/margin.css.ts | 45 +++++++++++++++ 8 files changed, 122 insertions(+), 13 deletions(-) create mode 100644 packages/ui/react/src/margin/extract-margin-props.ts create mode 100644 packages/ui/react/src/margin/index.ts create mode 100644 packages/ui/react/src/margin/margin.css.ts diff --git a/packages/ui/react/src/components/layout/box.tsx b/packages/ui/react/src/components/layout/box.tsx index eb33627..fa9d9cd 100644 --- a/packages/ui/react/src/components/layout/box.tsx +++ b/packages/ui/react/src/components/layout/box.tsx @@ -2,12 +2,14 @@ import { type HTMLFavolinkProps, Slot, forwardRef } from '@favolink-ui/system'; import { cx, mergeStyles, px } from '@favolink-ui/utils'; import { assignInlineVars } from '@vanilla-extract/dynamic'; import * as styles from './box.css'; +import { type MarginVariants, extractMarginProps } from '../../margin'; type BoxDivProps = HTMLFavolinkProps<'div'> & { as?: 'div' }; type BoxSpanProps = HTMLFavolinkProps<'span'> & { as: 'span' }; -export type BoxProps = styles.BoxDynamicVariants & +export type BoxProps = MarginVariants & + styles.BoxDynamicVariants & styles.BoxEnumVariants & (BoxDivProps | BoxSpanProps); @@ -45,7 +47,7 @@ export const Box = forwardRef( flexShrink, flexGrow, ...restProps - } = props; + } = extractMarginProps(props); return ( ( function Flex(props, forwardedRef) { const { - children, className, style, display, @@ -45,9 +44,7 @@ export const Flex = forwardRef( }), style, )} - > - {children} - + /> ); }, ); diff --git a/packages/ui/react/src/components/tag/tag.tsx b/packages/ui/react/src/components/tag/tag.tsx index f991cf7..e7540aa 100644 --- a/packages/ui/react/src/components/tag/tag.tsx +++ b/packages/ui/react/src/components/tag/tag.tsx @@ -5,21 +5,22 @@ import { } from '@favolink-ui/system'; import { cx } from '@favolink-ui/utils'; import * as styles from './tag.css'; +import { type MarginVariants, extractMarginProps } from '../../margin'; -export type TagProps = HTMLFavolinkProps<'span'> & styles.TagVariants; +export type TagProps = HTMLFavolinkProps<'span'> & + MarginVariants & + styles.TagVariants; export const Tag = forwardRef( function Tag(props, forwardedRef) { - const { children, className, color, ...restProps } = props; + const { className, color, ...restProps } = extractMarginProps(props); return ( - {children} - + /> ); }, ); diff --git a/packages/ui/react/src/components/typography/heading.tsx b/packages/ui/react/src/components/typography/heading.tsx index 7e7f396..0aa73aa 100644 --- a/packages/ui/react/src/components/typography/heading.tsx +++ b/packages/ui/react/src/components/typography/heading.tsx @@ -2,9 +2,11 @@ import { type HTMLFavolinkProps, Slot, forwardRef } from '@favolink-ui/system'; import { cx } from '@favolink-ui/utils'; import * as styles from './heading.css'; import * as commonStyles from './typography.css'; +import { type MarginVariants, extractMarginProps } from '../../margin'; export type HeadingProps = commonStyles.TypographyVariants & HTMLFavolinkProps<'h1'> & + MarginVariants & styles.HeadingVariants; export const Heading = forwardRef( @@ -20,7 +22,7 @@ export const Heading = forwardRef( wrap, weight, ...restProps - } = props; + } = extractMarginProps(props); return ( & { as: 'div' }; @@ -12,6 +13,7 @@ type TextPProps = HTMLFavolinkProps<'p'> & { as: 'p' }; type TextSpanProps = HTMLFavolinkProps<'span'> & { as?: 'span' }; export type TextProps = commonStyles.TypographyVariants & + MarginVariants & styles.TextVariants & (TextDivProps | TextLabelProps | TextPProps | TextSpanProps); @@ -29,7 +31,7 @@ export const Text = forwardRef( size, weight, ...restProps - } = props; + } = extractMarginProps(props); return ( (props: P) { + const { + className, + style, + margin, + marginX, + marginY, + marginTop, + marginRight, + marginBottom, + marginLeft, + ...restProps + } = props; + + const newClassName = cx( + margin && styles.margin, + marginX && styles.marginX, + marginY && styles.marginY, + marginTop && styles.marginTop, + marginRight && styles.marginRight, + marginBottom && styles.marginBottom, + marginLeft && styles.marginLeft, + className, + ); + + const newStyle = mergeStyles( + assignInlineVars({ + [styles.marginVars.margin]: px(margin), + [styles.marginVars.marginX]: px(marginX), + [styles.marginVars.marginY]: px(marginY), + [styles.marginVars.marginTop]: px(marginTop), + [styles.marginVars.marginRight]: px(marginRight), + [styles.marginVars.marginBottom]: px(marginBottom), + [styles.marginVars.marginLeft]: px(marginLeft), + }), + style, + ); + + const resultProps = { + ...restProps, + className: newClassName, + style: newStyle, + } as Omit; + + return resultProps; +} diff --git a/packages/ui/react/src/margin/index.ts b/packages/ui/react/src/margin/index.ts new file mode 100644 index 0000000..bf1b3a6 --- /dev/null +++ b/packages/ui/react/src/margin/index.ts @@ -0,0 +1,3 @@ +/* eslint-disable @stylistic/padding-line-between-statements, react-refresh/only-export-components */ +export { extractMarginProps } from './extract-margin-props'; +export { type MarginVariants } from './margin.css'; diff --git a/packages/ui/react/src/margin/margin.css.ts b/packages/ui/react/src/margin/margin.css.ts new file mode 100644 index 0000000..f714c5f --- /dev/null +++ b/packages/ui/react/src/margin/margin.css.ts @@ -0,0 +1,45 @@ +import { createThemeContract, style } from '@vanilla-extract/css'; + +export const marginVars = createThemeContract({ + margin: null, + marginX: null, + marginY: null, + marginTop: null, + marginRight: null, + marginBottom: null, + marginLeft: null, +}); + +export const margin = style({ + margin: marginVars.margin, +}); + +export const marginX = style({ + marginRight: marginVars.marginX, + marginLeft: marginVars.marginX, +}); + +export const marginY = style({ + marginRight: marginVars.marginX, + marginLeft: marginVars.marginX, +}); + +export const marginTop = style({ + marginTop: marginVars.marginTop, +}); + +export const marginRight = style({ + marginRight: marginVars.marginRight, +}); + +export const marginBottom = style({ + marginBottom: marginVars.marginBottom, +}); + +export const marginLeft = style({ + marginLeft: marginVars.marginLeft, +}); + +export type MarginVariants = { + [K in keyof typeof marginVars]?: number | string; +};