-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(ui/components/layout): layout style 분리, extractFlexProps, ex…
…tractLayoutProps 추가 (#332) * feat(ui/components/layout): box 관련 style 추가 * refactor(ui/components/layout): layout 관련 style layout.css.ts로 분리 * refactor(ui/components/layout): flex, layout 관련 extractProps 함수 추가 * refactor(ui/components/layout): flex style에 enum, dynamic type 통합 * refactor(ui/components/layout): flex, box 컴포넌트에 변경사항 적용 * refactor(ui/components/layout): styles를 PascalCase로 변경
- Loading branch information
Showing
7 changed files
with
357 additions
and
250 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,130 +1,18 @@ | ||
| import { createThemeContract, style } from '@vanilla-extract/css'; | ||
| import { type RecipeVariants, recipe } from '@vanilla-extract/recipes'; | ||
| import { | ||
| flexGrow, | ||
| flexShrink, | ||
| overflow, | ||
| overflowX, | ||
| overflowY, | ||
| position, | ||
| } from '../../styles'; | ||
| import { display } from '../../styles'; | ||
|
|
||
| export const dynamicVars = createThemeContract({ | ||
| padding: null, | ||
| paddingX: null, | ||
| paddingY: null, | ||
| paddingTop: null, | ||
| paddingRight: null, | ||
| paddingBottom: null, | ||
| paddingLeft: null, | ||
| width: null, | ||
| minWidth: null, | ||
| maxWidth: null, | ||
| height: null, | ||
| minHeight: null, | ||
| maxHeight: null, | ||
| inset: null, | ||
| top: null, | ||
| right: null, | ||
| bottom: null, | ||
| left: null, | ||
| flexBasis: null, | ||
| }); | ||
|
|
||
| export const padding = style({ | ||
| padding: dynamicVars.padding, | ||
| }); | ||
|
|
||
| export const paddingX = style({ | ||
| paddingRight: dynamicVars.paddingX, | ||
| paddingLeft: dynamicVars.paddingX, | ||
| }); | ||
|
|
||
| export const paddingY = style({ | ||
| paddingRight: dynamicVars.paddingY, | ||
| paddingLeft: dynamicVars.paddingY, | ||
| }); | ||
|
|
||
| export const paddingTop = style({ | ||
| paddingTop: dynamicVars.paddingTop, | ||
| }); | ||
|
|
||
| export const paddingRight = style({ | ||
| paddingRight: dynamicVars.paddingRight, | ||
| }); | ||
|
|
||
| export const paddingBottom = style({ | ||
| paddingBottom: dynamicVars.paddingBottom, | ||
| }); | ||
|
|
||
| export const paddingLeft = style({ | ||
| paddingLeft: dynamicVars.paddingLeft, | ||
| }); | ||
|
|
||
| export const width = style({ | ||
| width: dynamicVars.width, | ||
| }); | ||
|
|
||
| export const minWidth = style({ | ||
| minHeight: dynamicVars.minWidth, | ||
| }); | ||
|
|
||
| export const maxWidth = style({ | ||
| maxHeight: dynamicVars.maxWidth, | ||
| }); | ||
|
|
||
| export const height = style({ | ||
| height: dynamicVars.height, | ||
| }); | ||
|
|
||
| export const minHeight = style({ | ||
| minHeight: dynamicVars.minHeight, | ||
| }); | ||
|
|
||
| export const maxHeight = style({ | ||
| maxHeight: dynamicVars.maxHeight, | ||
| }); | ||
|
|
||
| export const inset = style({ | ||
| inset: dynamicVars.inset, | ||
| }); | ||
|
|
||
| export const top = style({ | ||
| top: dynamicVars.top, | ||
| }); | ||
|
|
||
| export const right = style({ | ||
| right: dynamicVars.right, | ||
| }); | ||
|
|
||
| export const bottom = style({ | ||
| bottom: dynamicVars.bottom, | ||
| }); | ||
|
|
||
| export const left = style({ | ||
| left: dynamicVars.left, | ||
| }); | ||
|
|
||
| export const flexBasis = style({ | ||
| flexBasis: dynamicVars.flexBasis, | ||
| }); | ||
|
|
||
| export type BoxDynamicVariants = { | ||
| [K in keyof typeof dynamicVars]?: number | string; | ||
| }; | ||
|
|
||
| export const boxEnumVariants = recipe({ | ||
| export const boxVariants = recipe({ | ||
| variants: { | ||
| position, | ||
| overflow, | ||
| overflowX, | ||
| overflowY, | ||
| flexShrink, | ||
| flexGrow, | ||
| display: { | ||
| none: display.none, | ||
| inline: display.inline, | ||
| 'inline-block': display['inline-block'], | ||
| block: display.block, | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export type BoxEnumVariants = Exclude< | ||
| RecipeVariants<typeof boxEnumVariants>, | ||
| export type BoxVariants = Exclude< | ||
| RecipeVariants<typeof boxVariants>, | ||
| undefined | ||
| >; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { assignInlineVars } from '@vanilla-extract/dynamic'; | ||
| import { type CSSProperties } from 'react'; | ||
| import * as Styles from './flex.css'; | ||
| import { cx, mergeStyles, px } from '../../utils'; | ||
|
|
||
| export function extractFlexProps< | ||
| P extends Styles.FlexVariants & { | ||
| [key: string]: any; | ||
| className?: string; | ||
| style?: CSSProperties; | ||
| }, | ||
| >(props: P) { | ||
| const { | ||
| display, | ||
| direction, | ||
| align, | ||
| justify, | ||
| wrap, | ||
| gap, | ||
| gapX, | ||
| gapY, | ||
| ...restProps | ||
| } = props; | ||
|
|
||
| const newClassName = cx( | ||
| gap && Styles.gap, | ||
| gapX && Styles.gapX, | ||
| gapY && Styles.gapY, | ||
| Styles.flexEnumVariants({ display, direction, align, justify, wrap }), | ||
| props.className, | ||
| ); | ||
|
|
||
| const newStyle = mergeStyles( | ||
| assignInlineVars({ | ||
| [Styles.dynamicVars.gap]: px(gap), | ||
| [Styles.dynamicVars.gapX]: px(gapX), | ||
| [Styles.dynamicVars.gapY]: px(gapY), | ||
| }), | ||
| props.style, | ||
| ); | ||
|
|
||
| const resultProps = { | ||
| ...restProps, | ||
| className: newClassName, | ||
| style: newStyle, | ||
| } as Omit<P, keyof Styles.FlexVariants>; | ||
|
|
||
| return resultProps; | ||
| } |
Oops, something went wrong.