From cd51a8ab1a9cef58e3b6eef04cbed877c104ebf9 Mon Sep 17 00:00:00 2001 From: yondo123 <46988995+yondo123@users.noreply.github.com> Date: Wed, 20 Sep 2023 23:58:52 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20code=20sty?= =?UTF-8?q?le=20to=20match=20lint=20rules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/card/src/components/CardProvider.tsx | 43 ++++++++++++++----- 1 file changed, 33 insertions(+), 10 deletions(-) diff --git a/packages/card/src/components/CardProvider.tsx b/packages/card/src/components/CardProvider.tsx index f0e1b55..499edc0 100644 --- a/packages/card/src/components/CardProvider.tsx +++ b/packages/card/src/components/CardProvider.tsx @@ -1,6 +1,23 @@ +import { useMemo } from 'react'; import { defaultContextValues, CardContext } from '../context'; +import type { FlexToken, Direction, Size, Variant } from '../types'; +import type { ColorToken } from '@jdesignlab/theme'; -export const CardProvider = ({ ...props }) => { +interface CardProps { + align?: FlexToken; + justify?: FlexToken; + color?: ColorToken; + direction?: Direction; + size?: Size; + variant?: Variant; +} + +interface CardProviderProps { + cardProps: CardProps; + children: React.ReactNode; +} + +export const CardProvider = ({ ...props }: CardProviderProps) => { const { cardProps } = props; const defaultStyleProps = defaultContextValues.styleProps; @@ -14,14 +31,20 @@ export const CardProvider = ({ ...props }) => { ...restProps } = cardProps; - return ( - - {props.children} - + const providerValue = useMemo( + () => ({ + styleProps: { + align, + color, + direction, + justify, + size, + variant + }, + cardProps: restProps + }), + [align, color, direction, justify, restProps, size, variant] ); + + return {props.children}; }; From 3390db18c5dd450726947c9a71508f6127418776 Mon Sep 17 00:00:00 2001 From: yondo123 <46988995+yondo123@users.noreply.github.com> Date: Thu, 21 Sep 2023 00:02:36 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20consolidat?= =?UTF-8?q?e=20UI=20style=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/card/src/styles.ts | 113 ++++++++++++++++++ packages/card/src/styles/createCardStyle.ts | 53 -------- .../card/src/styles/createContentStyle.ts | 23 ---- .../card/src/styles/createDividerStyle.ts | 25 ---- packages/card/src/styles/createFlexStyle.ts | 23 ---- 5 files changed, 113 insertions(+), 124 deletions(-) create mode 100644 packages/card/src/styles.ts delete mode 100644 packages/card/src/styles/createCardStyle.ts delete mode 100644 packages/card/src/styles/createContentStyle.ts delete mode 100644 packages/card/src/styles/createDividerStyle.ts delete mode 100644 packages/card/src/styles/createFlexStyle.ts diff --git a/packages/card/src/styles.ts b/packages/card/src/styles.ts new file mode 100644 index 0000000..10be59e --- /dev/null +++ b/packages/card/src/styles.ts @@ -0,0 +1,113 @@ +import { css } from '@emotion/react'; +import { hexToRgba, getColorByToken } from '@jdesignlab/theme'; +import { DEFAULT_BORDER_COLOR } from './constants'; +import type { ColorToken } from '@jdesignlab/theme'; +import type { Size, Variant, Direction, FlexMap, FlexToken } from './types'; + +export const createCardVariant = ( + size: Size, + variant: Variant, + backgroundColor: ColorToken, + borderColor: ColorToken +) => { + const hexBorderColor = getColorByToken(borderColor); + + const baseStyle = css({ + boxSizing: 'border-box', + padding: '12px 24px' + }); + + const variantStyle = () => { + switch (variant) { + case 'filled': + return css({ + boxSizing: 'border-box', + boxShadow: 'none', + backgroundColor: `${getColorByToken(backgroundColor)}` + }); + case 'outlined': + return css({ boxSizing: 'border-box', border: `1px solid ${hexBorderColor}` }); + default: + return css({ + boxSizing: 'border-box', + boxShadow: `0 3px 6px ${hexToRgba(hexBorderColor, 0.16)}, 0 3px 6px ${hexToRgba(hexBorderColor, 0.2)}` + }); + } + }; + + const sizeStyle = () => { + switch (size) { + case 'lg': + return css({ + maxWidth: '720px' + }); + case 'sm': + return css({ + maxWidth: '200px' + }); + // medium + default: + return css({ + maxWidth: '440px' + }); + } + }; + + return [baseStyle, variantStyle(), sizeStyle()]; +}; + +export const createBorderDirection = (direction: Direction, borderColor: ColorToken) => { + if (direction === 'horizontal') { + return css({ + boxSizing: 'border-box', + borderRight: `1px solid ${borderColor}`, + maxWidth: '33%', + wordWrap: 'break-word' + }); + } + + return css({ + borderTop: `1px solid ${borderColor}`, + wordWrap: 'break-word', + maxWidth: '100%', + boxSizing: 'border-box' + }); +}; + +export const createDivider = (direction: Direction) => { + const dividerColor = getColorByToken(DEFAULT_BORDER_COLOR); + + if (direction === 'vertical') { + return css({ + width: '100%', + height: 0, + margin: '12px 0', + borderTop: `${dividerColor} solid 1px` + }); + } + return css({ + height: '64px', + width: '1px', + margin: '0 4px', + borderLeft: `${dividerColor} solid 1px` + }); +}; + +export const createFlexStyle = (justify: FlexToken, align: FlexToken, direction: Direction) => { + const flexMap: FlexMap = { + stretch: 'stretch', + start: 'flex-start', + end: 'flex-end', + center: 'center', + between: 'space-between', + around: 'space-around' + }; + + return css({ + display: 'flex', + flexDirection: direction === 'horizontal' ? 'row' : 'column', + alignItems: `${flexMap[align]}`, + justifyContent: `${flexMap[justify]}`, + borderRadius: '8px' + }); +}; diff --git a/packages/card/src/styles/createCardStyle.ts b/packages/card/src/styles/createCardStyle.ts deleted file mode 100644 index 960dcff..0000000 --- a/packages/card/src/styles/createCardStyle.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { css } from '@emotion/react'; -import { hexToRgba, getColorByToken } from '@jdesignlab/theme'; -import type { ColorToken } from '@jdesignlab/theme'; -import type { Size, Variant } from '../types'; - -const createCardStyle = (size: Size, variant: Variant, backgroundColor: ColorToken, borderColor: ColorToken) => { - const hexBorderColor = getColorByToken(borderColor); - - const baseStyle = css({ - boxSizing: 'border-box', - padding: '12px 24px' - }); - - const variantStyle = () => { - switch (variant) { - case 'filled': - return css({ - boxSizing: 'border-box', - boxShadow: 'none', - backgroundColor: `${getColorByToken(backgroundColor)}` - }); - case 'outlined': - return css({ boxSizing: 'border-box', border: `1px solid ${hexBorderColor}` }); - default: - return css({ - boxSizing: 'border-box', - boxShadow: `0 3px 6px ${hexToRgba(hexBorderColor, 0.16)}, 0 3px 6px ${hexToRgba(hexBorderColor, 0.2)}` - }); - } - }; - - const sizeStyle = () => { - switch (size) { - case 'lg': - return css({ - maxWidth: '720px' - }); - case 'sm': - return css({ - maxWidth: '200px' - }); - //medium - default: - return css({ - maxWidth: '440px' - }); - } - }; - - return [baseStyle, variantStyle(), sizeStyle()]; -}; - -export default createCardStyle; diff --git a/packages/card/src/styles/createContentStyle.ts b/packages/card/src/styles/createContentStyle.ts deleted file mode 100644 index 21c92b1..0000000 --- a/packages/card/src/styles/createContentStyle.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { css } from '@emotion/react'; -import type { ColorToken } from '@jdesignlab/theme'; -import type { Direction } from '../types'; - -const createContentStyle = (direction: Direction, borderColor: ColorToken) => { - if (direction === 'horizontal') { - return css({ - boxSizing: 'border-box', - borderRight: `1px solid ${borderColor}`, - maxWidth: '33%', - wordWrap: 'break-word' - }); - } - - return css({ - borderTop: `1px solid ${borderColor}`, - wordWrap: 'break-word', - maxWidth: '100%', - boxSizing: 'border-box' - }); -}; - -export default createContentStyle; diff --git a/packages/card/src/styles/createDividerStyle.ts b/packages/card/src/styles/createDividerStyle.ts deleted file mode 100644 index c20fd5a..0000000 --- a/packages/card/src/styles/createDividerStyle.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { css } from '@emotion/react'; -import { getColorByToken } from '@jdesignlab/theme'; -import { DEFAULT_BORDER_COLOR } from '../constants'; -import { Direction } from '../types'; - -const createDividerStyle = (direction: Direction) => { - const dividerColor = getColorByToken(DEFAULT_BORDER_COLOR); - - if (direction === 'vertical') { - return css({ - width: '100%', - height: 0, - margin: '12px 0', - borderTop: `${dividerColor} solid 1px` - }); - } - return css({ - height: '64px', - width: '1px', - margin: '0 4px', - borderLeft: `${dividerColor} solid 1px` - }); -}; - -export default createDividerStyle; diff --git a/packages/card/src/styles/createFlexStyle.ts b/packages/card/src/styles/createFlexStyle.ts deleted file mode 100644 index 600cea9..0000000 --- a/packages/card/src/styles/createFlexStyle.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { css } from '@emotion/react'; -import type { Direction, FlexMap, FlexToken } from '../types'; - -const createFlexStyle = (justify: FlexToken, align: FlexToken, direction: Direction) => { - const flexMap: FlexMap = { - stretch: 'stretch', - start: 'flex-start', - end: 'flex-end', - center: 'center', - between: 'space-between', - around: 'space-around' - }; - - return css({ - display: 'flex', - flexDirection: direction === 'horizontal' ? 'row' : 'column', - alignItems: `${flexMap[align]}`, - justifyContent: `${flexMap[justify]}`, - borderRadius: '8px' - }); -}; - -export default createFlexStyle; From 29cfb4b550195de93d05e178be607ad96c217b60 Mon Sep 17 00:00:00 2001 From: yondo123 <46988995+yondo123@users.noreply.github.com> Date: Thu, 21 Sep 2023 00:02:52 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20code=20sty?= =?UTF-8?q?le=20to=20match=20lint=20rules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/card/src/components/Card.tsx | 10 +++++----- packages/card/src/components/CardBody.tsx | 4 ++-- packages/card/src/components/CardContainer.tsx | 7 +++---- packages/card/src/components/CardDivider.tsx | 4 ++-- packages/card/src/components/CardFooter.tsx | 4 ++-- packages/card/src/components/CardHeader.tsx | 10 +++++----- 6 files changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/card/src/components/Card.tsx b/packages/card/src/components/Card.tsx index 2d126d3..f9fa225 100644 --- a/packages/card/src/components/Card.tsx +++ b/packages/card/src/components/Card.tsx @@ -9,16 +9,16 @@ import { REQUIRED_CARD_PROPS } from '../constants'; import omitProps from '../utils/omitProps'; import type { CardProps } from '../types'; -export const Card = (props: CardProps) => { - const { children, ...propsWithoutChildren } = props; - const domAttributes = omitProps(propsWithoutChildren, REQUIRED_CARD_PROPS); +export const Card = ({ children, ...restProps }: CardProps) => { + const domAttributes = omitProps(restProps, REQUIRED_CARD_PROPS); return ( - - {props.children} + + {children} ); }; + Card.displayName = 'Card'; Card.Header = CardHeader; Card.Body = CardBody; diff --git a/packages/card/src/components/CardBody.tsx b/packages/card/src/components/CardBody.tsx index 72902e9..cb03766 100644 --- a/packages/card/src/components/CardBody.tsx +++ b/packages/card/src/components/CardBody.tsx @@ -3,7 +3,7 @@ import { jsx } from '@emotion/react'; import { useContext } from 'react'; import { createClassVariant } from '@jdesignlab/theme'; import { CardContext } from '../context'; -import createContentStyle from '../styles/createContentStyle'; +import * as Style from '../styles'; import { DEFAULT_BORDER_COLOR } from '../constants'; import type { CardBodyProps } from '../types'; @@ -13,7 +13,7 @@ export const CardBody = (props: CardBodyProps) => { return jsx( as, { - css: createContentStyle(direction, DEFAULT_BORDER_COLOR), + css: Style.createBorderDirection(direction, DEFAULT_BORDER_COLOR), className: `${createClassVariant('card', 'content')} ${className}`, ...restProps }, diff --git a/packages/card/src/components/CardContainer.tsx b/packages/card/src/components/CardContainer.tsx index ec54837..c6260cf 100644 --- a/packages/card/src/components/CardContainer.tsx +++ b/packages/card/src/components/CardContainer.tsx @@ -4,15 +4,14 @@ import { useContext } from 'react'; import { createClassVariant } from '@jdesignlab/theme'; import { DEFAULT_BORDER_COLOR } from '../constants'; import { CardContext } from '../context'; -import createCardStyle from '../styles/createCardStyle'; -import createFlexStyle from '../styles/createFlexStyle'; +import * as Style from '../styles'; import { CardProps, CardStyle } from '../types'; export const CardContainer = (props: Omit) => { const { children, as = 'div', role = 'article', className = '', ...restProps } = props; const { size, variant, color, justify, align, direction } = useContext(CardContext).styleProps; - const cardBaseStyle = createCardStyle(size, variant, color, DEFAULT_BORDER_COLOR); - const flexStyle = createFlexStyle(justify, align, direction); + const cardBaseStyle = Style.createCardVariant(size, variant, color, DEFAULT_BORDER_COLOR); + const flexStyle = Style.createFlexStyle(justify, align, direction); return jsx( as, { diff --git a/packages/card/src/components/CardDivider.tsx b/packages/card/src/components/CardDivider.tsx index bccda7f..949fb29 100644 --- a/packages/card/src/components/CardDivider.tsx +++ b/packages/card/src/components/CardDivider.tsx @@ -1,14 +1,14 @@ /** @jsxImportSource @emotion/react */ import { useContext } from 'react'; import { createClassVariant } from '@jdesignlab/theme'; -import createDividerStyle from '../styles/createDividerStyle'; +import * as Style from '../styles'; import { CardContext } from '../context'; export const CardDivider = () => { const { direction } = useContext(CardContext).styleProps; return (
diff --git a/packages/card/src/components/CardFooter.tsx b/packages/card/src/components/CardFooter.tsx index 7d9d34a..eec24f9 100644 --- a/packages/card/src/components/CardFooter.tsx +++ b/packages/card/src/components/CardFooter.tsx @@ -2,9 +2,9 @@ import { jsx } from '@emotion/react'; import { useContext } from 'react'; import { createClassVariant } from '@jdesignlab/theme'; +import * as Style from '../styles'; import { DEFAULT_BORDER_COLOR } from '../constants'; import { CardContext } from '../context'; -import createContentStyle from '../styles/createContentStyle'; import type { CardFooterProps } from '../types'; export const CardFooter = (props: CardFooterProps) => { @@ -13,7 +13,7 @@ export const CardFooter = (props: CardFooterProps) => { return jsx( as, { - css: createContentStyle(direction, DEFAULT_BORDER_COLOR), + css: Style.createBorderDirection(direction, DEFAULT_BORDER_COLOR), className: `${className} ${createClassVariant('card', 'footer')}`, ...restProps }, diff --git a/packages/card/src/components/CardHeader.tsx b/packages/card/src/components/CardHeader.tsx index b2d177c..792c64a 100644 --- a/packages/card/src/components/CardHeader.tsx +++ b/packages/card/src/components/CardHeader.tsx @@ -1,20 +1,20 @@ /** @jsxImportSource @emotion/react */ -import { css, jsx } from '@emotion/react'; +import { jsx } from '@emotion/react'; import { useContext } from 'react'; import { createClassVariant } from '@jdesignlab/theme'; +import * as Style from '../styles'; import { CardContext } from '../context'; -import createContentStyle from '../styles/createContentStyle'; -import type { CardHeaderProps } from '../types'; import { DEFAULT_BORDER_COLOR } from '../constants'; +import type { CardHeaderProps } from '../types'; export const CardHeader = (props: CardHeaderProps) => { - const { children, as = 'header', role = 'heading', className = '', ...restProps } = props; + const { children, as = 'header', className = '', ...restProps } = props; const { direction } = useContext(CardContext).styleProps; return jsx( as, { - css: [createContentStyle(direction, DEFAULT_BORDER_COLOR)], + css: [Style.createBorderDirection(direction, DEFAULT_BORDER_COLOR)], className: `${className} ${createClassVariant('card', 'footer')}`, ...restProps },