diff --git a/.changeset/eleven-emus-occur.md b/.changeset/eleven-emus-occur.md new file mode 100644 index 0000000..9f53f16 --- /dev/null +++ b/.changeset/eleven-emus-occur.md @@ -0,0 +1,5 @@ +--- +'@croquiscom/monolith': patch +--- + +Stack컴포넌트 css제거 및 props_to_style 형태로 변경 diff --git a/package.json b/package.json index 1c9104a..326ffff 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,9 @@ "module": "dist/index.es.js", "types": "dist/index.d.ts", "exports": { - ".": { - "types": "./dist/index.d.ts", - "import": "./dist/index.es.js", - "require": "./dist/index.cjs.js" - }, - "./style.css": "./dist/monolith.css" + "types": "./dist/index.d.ts", + "import": "./dist/index.es.js", + "require": "./dist/index.cjs.js" }, "files": [ "dist" @@ -21,6 +18,8 @@ "scripts": { "dev": "vite", "build": "tsc -b && vite build", + "build:clean": "pnpm run build && pnpm run clean:dts", + "clean:dts": "find src -name '*.d.ts' -not -name 'vite-env.d.ts' -delete", "build:docs": "typedoc", "lint:prettier": "prettier . --write", "lint": "eslint ./src --ext .ts,.tsx", diff --git a/src/components/stack/Stack.css b/src/components/stack/Stack.css deleted file mode 100644 index 805a8c4..0000000 --- a/src/components/stack/Stack.css +++ /dev/null @@ -1,38 +0,0 @@ -.flex { - display: flex; -} - -/* flex-direction */ -.flex-column { flex-direction: column; } -.flex-column-reverse { flex-direction: column-reverse; } -.flex-row { flex-direction: row; } -.flex-row-reverse { flex-direction: row-reverse; } - -/* flex-wrap */ -.flex-nowrap { flex-wrap: nowrap; } -.flex-wrap { flex-wrap: wrap; } -.flex-wrap-reverse { flex-wrap: wrap-reverse; } - -/* align-items */ -.align-center { align-items: center; } -.align-start { align-items: start; } -.align-end { align-items: end; } -.align-flex-start { align-items: flex-start; } -.align-flex-end { align-items: flex-end; } -.align-self-start { align-items: self-start; } -.align-self-end { align-items: self-end; } -.align-baseline { align-items: baseline; } -.align-stretch { align-items: stretch; } - -/* justify-content */ -.justify-center { justify-content: center; } -.justify-start { justify-content: start; } -.justify-end { justify-content: end; } -.justify-flex-start { justify-content: flex-start; } -.justify-flex-end { justify-content: flex-end; } -.justify-left { justify-content: left; } -.justify-right { justify-content: right; } -.justify-space-between { justify-content: space-between; } -.justify-space-around { justify-content: space-around; } -.justify-space-evenly { justify-content: space-evenly; } -.justify-stretch { justify-content: stretch; } diff --git a/src/components/stack/Stack.test.tsx b/src/components/stack/Stack.test.tsx index c0789ea..c2ef5f7 100644 --- a/src/components/stack/Stack.test.tsx +++ b/src/components/stack/Stack.test.tsx @@ -22,7 +22,7 @@ describe('Stack', () => {
1번
, ); - expect(container.firstChild).toHaveClass('flex flex-column'); + expect(container.firstChild).toHaveStyle({ display: 'flex', flexDirection: 'column' }); }); it('wrap prop이 정상적으로 적용됩니다', () => { @@ -31,7 +31,7 @@ describe('Stack', () => {
1번
, ); - expect(container.firstChild).toHaveClass('flex flex-wrap'); + expect(container.firstChild).toHaveStyle({ display: 'flex', flexWrap: 'wrap' }); }); it('align prop이 정상적으로 적용됩니다', () => { @@ -40,7 +40,7 @@ describe('Stack', () => {
1번
, ); - expect(container.firstChild).toHaveClass('flex align-center'); + expect(container.firstChild).toHaveStyle({ display: 'flex', alignItems: 'center' }); }); it('justify prop이 정상적으로 적용됩니다', () => { @@ -49,7 +49,7 @@ describe('Stack', () => {
1번
, ); - expect(container.firstChild).toHaveClass('flex justify-center'); + expect(container.firstChild).toHaveStyle({ display: 'flex', justifyContent: 'center' }); }); it('gap prop이 정상적으로 적용됩니다', () => { @@ -121,7 +121,13 @@ describe('Stack', () => {
1번
, ); - expect(container.firstChild).toHaveClass('flex flex-column flex-nowrap align-center justify-center'); + expect(container.firstChild).toHaveStyle({ + display: 'flex', + flexDirection: 'column', + flexWrap: 'nowrap', + alignItems: 'center', + justifyContent: 'center', + }); expect(container.firstChild).toHaveStyle({ gap: '10px', width: '100px', diff --git a/src/components/stack/Stack.tsx b/src/components/stack/Stack.tsx index b95863e..6fa21c0 100644 --- a/src/components/stack/Stack.tsx +++ b/src/components/stack/Stack.tsx @@ -1,6 +1,4 @@ import { PropsWithChildren, CSSProperties, HTMLAttributes, forwardRef } from 'react'; -import './Stack.css'; -import { buildFlexClassNames } from './utils/buildFlexClassNames'; /** The props type of {@link Stack | 'Stack'}. */ export interface StackProps extends PropsWithChildren { @@ -108,16 +106,17 @@ export const Stack = forwardRef { - const flex_classes = buildFlexClassNames({ direction, wrap, align, justify }); - const combined_classes = [flex_classes, className] - .filter((cls) => cls && typeof cls === 'string' && cls.trim() !== '') - .join(' '); - - const spacing_style: CSSProperties = { + const combined_style: CSSProperties = { + display: 'flex', + ...(direction !== undefined && { flexDirection: direction }), + ...(wrap !== undefined && { flexWrap: wrap }), + ...(align !== undefined && { alignItems: align }), + ...(justify !== undefined && { justifyContent: justify }), ...(gap !== undefined && { gap }), ...(width !== undefined && { width }), ...(height !== undefined && { height }), @@ -131,10 +130,11 @@ export const Stack = forwardRef +
{children}
); diff --git a/src/components/stack/utils/buildFlexClassNames.test.ts b/src/components/stack/utils/buildFlexClassNames.test.ts deleted file mode 100644 index b880ec3..0000000 --- a/src/components/stack/utils/buildFlexClassNames.test.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { buildFlexClassNames } from './buildFlexClassNames'; - -describe('buildFlexClassNames', () => { - it('파라미터가 없는 경우 flex만 반환합니다.', () => { - const classNames = buildFlexClassNames({}); - expect(classNames).toEqual('flex'); - }); - - it('flex-direction 파라미터가 있는 경우 flex-direction 클래스를 반환합니다.', () => { - const classNames = buildFlexClassNames({ direction: 'row' }); - expect(classNames).toEqual('flex flex-row'); - }); - - it('flex-wrap 파라미터가 있는 경우 flex-wrap 클래스를 반환합니다.', () => { - const classNames = buildFlexClassNames({ wrap: 'wrap' }); - expect(classNames).toEqual('flex flex-wrap'); - }); - - it('align-items 파라미터가 있는 경우 align-items 클래스를 반환합니다.', () => { - const classNames = buildFlexClassNames({ align: 'center' }); - expect(classNames).toEqual('flex align-center'); - }); - - it('justify-content 파라미터가 있는 경우 justify-content 클래스를 반환합니다.', () => { - const classNames = buildFlexClassNames({ justify: 'center' }); - expect(classNames).toEqual('flex justify-center'); - }); - - it('모든 파라미터가 있는 경우 모든 클래스를 반환합니다.', () => { - const classNames = buildFlexClassNames({ direction: 'row', wrap: 'wrap', align: 'center', justify: 'center' }); - expect(classNames).toEqual('flex flex-row flex-wrap align-center justify-center'); - }); -}); diff --git a/src/components/stack/utils/buildFlexClassNames.ts b/src/components/stack/utils/buildFlexClassNames.ts deleted file mode 100644 index 491a35e..0000000 --- a/src/components/stack/utils/buildFlexClassNames.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { CSSProperties } from 'react'; - -/** The props type of {@link buildFlexClassNames | 'buildFlexClassNames'}. */ -export interface FlexClassNamesParams { - /** flex-direction 속성을 지정합니다. */ - direction?: CSSProperties['flexDirection']; - /** flex-wrap 속성을 지정합니다. */ - wrap?: CSSProperties['flexWrap']; - /** align-items 속성을 지정합니다. */ - align?: CSSProperties['alignItems']; - /** justify-content 속성을 지정합니다. */ - justify?: CSSProperties['justifyContent']; -} - -/** - * 컴포넌트에 적용할 Flexbox 관련 CSS 클래스명을 반환합니다. - * - * @param props - {@link FlexClassNamesParams}를 참조하세요. - * @returns 컴포넌트에 적용할 Flexbox 관련 CSS 클래스명을 반환합니다. - */ -export const buildFlexClassNames = ({ direction, wrap, align, justify }: FlexClassNamesParams): string => { - const classes: string[] = ['flex']; - - if (direction) { - classes.push(`flex-${direction}`); - } - if (wrap) { - classes.push(`flex-${wrap}`); - } - if (align) { - classes.push(`align-${align}`); - } - if (justify) { - classes.push(`justify-${justify}`); - } - - return classes.join(' '); -}; diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo index 9e87358..c917b2d 100644 --- a/tsconfig.app.tsbuildinfo +++ b/tsconfig.app.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/index.ts","./src/vite-env.d.ts","./src/components/index.ts","./src/components/stack/stack.test.tsx","./src/components/stack/stack.tsx","./src/components/stack/utils/buildflexclassnames.test.ts","./src/components/stack/utils/buildflexclassnames.ts","./src/components/switch-case/switchcase.test.tsx","./src/components/switch-case/switchcase.tsx","./src/hooks/index.ts","./src/hooks/use-countdown-timer/usecountdowntimer.test.ts","./src/hooks/use-countdown-timer/usecountdowntimer.tsx","./src/hooks/use-debounce/usedebounce.test.ts","./src/hooks/use-debounce/usedebounce.ts","./src/hooks/use-delay-loading/usedelayloading.test.tsx","./src/hooks/use-delay-loading/usedelayloading.tsx","./src/hooks/use-is-mounted/useismounted.test.tsx","./src/hooks/use-is-mounted/useismounted.tsx","./src/hooks/use-isomorphic-layout-effect/useisomorphiclayouteffect.test.ts","./src/hooks/use-isomorphic-layout-effect/useisomorphiclayouteffect.ts","./src/hooks/use-mount/usemount.test.ts","./src/hooks/use-mount/usemount.ts","./src/hooks/use-preload-image/usepreloadimage.test.ts","./src/hooks/use-preload-image/usepreloadimage.ts","./src/hooks/use-throttle/usethrottle.test.ts","./src/hooks/use-throttle/usethrottle.ts","./src/utils/index.ts","./src/utils/compress-image/compressimage.test.ts","./src/utils/compress-image/compressimage.ts","./src/utils/create-array/createarray.test.ts","./src/utils/create-array/createarray.ts","./src/utils/debounce/debounce.test.ts","./src/utils/debounce/debounce.ts","./src/utils/delay/delay.test.ts","./src/utils/delay/delay.ts","./src/utils/is-android/isandroid.test.ts","./src/utils/is-android/isandroid.ts","./src/utils/is-equal/isequal.test.ts","./src/utils/is-equal/isequal.ts","./src/utils/is-ios/isios.test.ts","./src/utils/is-ios/isios.ts","./src/utils/throttle/throttle.test.ts","./src/utils/throttle/throttle.ts"],"version":"5.7.3"} \ No newline at end of file +{"root":["./src/index.ts","./src/vite-env.d.ts","./src/components/index.ts","./src/components/stack/stack.test.tsx","./src/components/stack/stack.tsx","./src/components/switch-case/switchcase.test.tsx","./src/components/switch-case/switchcase.tsx","./src/hooks/index.ts","./src/hooks/use-countdown-timer/usecountdowntimer.test.ts","./src/hooks/use-countdown-timer/usecountdowntimer.tsx","./src/hooks/use-debounce/usedebounce.test.ts","./src/hooks/use-debounce/usedebounce.ts","./src/hooks/use-delay-loading/usedelayloading.test.tsx","./src/hooks/use-delay-loading/usedelayloading.tsx","./src/hooks/use-is-mounted/useismounted.test.tsx","./src/hooks/use-is-mounted/useismounted.tsx","./src/hooks/use-isomorphic-layout-effect/useisomorphiclayouteffect.test.ts","./src/hooks/use-isomorphic-layout-effect/useisomorphiclayouteffect.ts","./src/hooks/use-mount/usemount.test.ts","./src/hooks/use-mount/usemount.ts","./src/hooks/use-preload-image/usepreloadimage.test.ts","./src/hooks/use-preload-image/usepreloadimage.ts","./src/hooks/use-throttle/usethrottle.test.ts","./src/hooks/use-throttle/usethrottle.ts","./src/utils/index.ts","./src/utils/compress-image/compressimage.test.ts","./src/utils/compress-image/compressimage.ts","./src/utils/create-array/createarray.test.ts","./src/utils/create-array/createarray.ts","./src/utils/debounce/debounce.test.ts","./src/utils/debounce/debounce.ts","./src/utils/delay/delay.test.ts","./src/utils/delay/delay.ts","./src/utils/is-android/isandroid.test.ts","./src/utils/is-android/isandroid.ts","./src/utils/is-equal/isequal.test.ts","./src/utils/is-equal/isequal.ts","./src/utils/is-ios/isios.test.ts","./src/utils/is-ios/isios.ts","./src/utils/throttle/throttle.test.ts","./src/utils/throttle/throttle.ts"],"version":"5.7.3"} \ No newline at end of file diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo deleted file mode 100644 index 2b5f0f5..0000000 --- a/tsconfig.tsbuildinfo +++ /dev/null @@ -1 +0,0 @@ -{"root":["./src/app.tsx","./src/index.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/index.ts","./src/components/switch-case/switchcase.tsx","./src/hooks/index.ts","./src/hooks/use-mount/usemount.ts"],"errors":true,"version":"5.7.3"} \ No newline at end of file