From 8f0e05f04b8d9c714755fa7379ae4950c59c275f Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Fri, 19 Jul 2024 22:23:18 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat(ui/react/components/layout):=20box=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20dynamic,=20enum=20css=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/react/src/components/layout/box.css.ts | 113 ++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 packages/ui/react/src/components/layout/box.css.ts diff --git a/packages/ui/react/src/components/layout/box.css.ts b/packages/ui/react/src/components/layout/box.css.ts new file mode 100644 index 0000000..10810a4 --- /dev/null +++ b/packages/ui/react/src/components/layout/box.css.ts @@ -0,0 +1,113 @@ +import { type RecipeVariants, recipe } from '@vanilla-extract/recipes'; +import { dynamicStyles, dynamicVars, enumStyles } from '../../styles/utils'; + +const { position, overflow, overflowX, overflowY, flexShrink, flexGrow } = + enumStyles; + +export const boxEnumVariants = recipe({ + variants: { + position, + overflow, + overflowX, + overflowY, + flexShrink, + flexGrow, + }, +}); + +export type BoxEnumVariants = Exclude< + RecipeVariants, + undefined +>; + +const { + paddingVar, + paddingBottomVar, + paddingLeftVar, + paddingRightVar, + paddingTopVar, + paddingXVar, + paddingYVar, + widthVar, + minWidthVar, + maxWidthVar, + heightVar, + minHeightVar, + maxHeightVar, + insetVar, + topVar, + bottomVar, + leftVar, + rightVar, + flexBasisVar, +} = dynamicVars; + +export const boxDynamicVariantVars = { + paddingVar, + paddingBottomVar, + paddingLeftVar, + paddingRightVar, + paddingTopVar, + paddingXVar, + paddingYVar, + widthVar, + minWidthVar, + maxWidthVar, + heightVar, + minHeightVar, + maxHeightVar, + insetVar, + topVar, + bottomVar, + leftVar, + rightVar, + flexBasisVar, +}; + +export const { + padding, + paddingBottom, + paddingLeft, + paddingRight, + paddingTop, + paddingX, + paddingY, + width, + minWidth, + maxWidth, + height, + minHeight, + maxHeight, + inset, + top, + bottom, + left, + right, + flexBasis, +} = dynamicStyles; + +export const boxDynamicVariants = { + padding, + paddingBottom, + paddingLeft, + paddingRight, + paddingTop, + paddingX, + paddingY, + width, + minWidth, + maxWidth, + height, + minHeight, + maxHeight, + inset, + top, + bottom, + left, + right, + flexBasis, +}; + +export type BoxDynamicVariants = Partial< + Record +>; From 94e85cf26464d161fa1bc678873bfa1fc1ffb958 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Fri, 19 Jul 2024 22:23:45 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat(ui/react/components/layout):=20box=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/react/src/components/layout/box.tsx | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 packages/ui/react/src/components/layout/box.tsx diff --git a/packages/ui/react/src/components/layout/box.tsx b/packages/ui/react/src/components/layout/box.tsx new file mode 100644 index 0000000..d573724 --- /dev/null +++ b/packages/ui/react/src/components/layout/box.tsx @@ -0,0 +1,54 @@ +import { type HTMLFavolinkProps, Slot, forwardRef } from '@favolink-ui/system'; +import { cx } from '@favolink-ui/utils'; +import * as styles from './box.css'; +import { extractDynamicProps } from '../../styles'; + +type BoxDivProps = HTMLFavolinkProps<'div'> & { as?: 'div' }; + +type BoxSpanProps = HTMLFavolinkProps<'span'> & { as: 'span' }; + +export type BoxProps = styles.BoxDynamicVariants & + styles.BoxEnumVariants & + (BoxDivProps | BoxSpanProps); + +export const Box = forwardRef( + function Box(props, forwardedRef) { + const { + as: Tag = 'div', + asChild, + children, + className, + position, + overflow, + overflowX, + overflowY, + flexShrink, + flexGrow, + ...restProps + } = extractDynamicProps( + props, + styles.boxDynamicVariantVars, + styles.boxDynamicVariants, + ); + + return ( + + {asChild ? children : {children}} + + ); + }, +); From 2da477a3d2e23535d3965e0b7b1a3cb706f5d313 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Fri, 19 Jul 2024 22:25:28 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat(ui/react/components/layout):=20index.t?= =?UTF-8?q?s=EC=97=90=20box=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/react/src/components/layout/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/react/src/components/layout/index.ts b/packages/ui/react/src/components/layout/index.ts index 0fd178f..5c35e3d 100644 --- a/packages/ui/react/src/components/layout/index.ts +++ b/packages/ui/react/src/components/layout/index.ts @@ -4,4 +4,5 @@ export { type CSSPropertyValue, } from './create-css-property-style-variants'; +export { Box, type BoxProps } from './box'; export { Flex, type FlexProps } from './flex'; From 2c15e6824d2c1677ff161084114671600ceb6b93 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Fri, 19 Jul 2024 22:30:25 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat(ui/react/components/layout):=20box=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20className?= =?UTF-8?q?=EC=97=90=20'favolink-box'=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/react/src/components/layout/box.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/react/src/components/layout/box.tsx b/packages/ui/react/src/components/layout/box.tsx index d573724..4f700c9 100644 --- a/packages/ui/react/src/components/layout/box.tsx +++ b/packages/ui/react/src/components/layout/box.tsx @@ -36,6 +36,7 @@ export const Box = forwardRef( {...restProps} ref={forwardedRef} className={cx( + 'favolink-box', styles.boxEnumVariants({ position, overflow,