From 77f2d1b91e5c182681673c8bfe536b4c82a326c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gromit=20=28=EC=A0=84=EB=AF=BC=EC=9E=AC=29?= <64779472+ssi02014@users.noreply.github.com> Date: Mon, 18 Nov 2024 01:04:30 +0900 Subject: [PATCH] =?UTF-8?q?chore(react):=20lodash-es=20=EC=9D=98=EC=A1=B4?= =?UTF-8?q?=EC=84=B1=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD=20(#587)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(react): 의존성 위치 변경 * fix(react): AspectRatio 인터페이스 단순화 * chore: changeset log 추가 --- .changeset/green-dolls-jog.md | 5 +++ .pnp.cjs | 11 +++++++ ...er-js-npm-0.7.39-23053990d8-fea522f42d.zip | Bin 0 -> 9853 bytes docs/docs/react/components/AspectRatio.mdx | 12 +++---- packages/react/package.json | 5 +-- .../src/components/AspectRatio/index.tsx | 31 +++++++++++------- yarn.lock | 12 +++++-- 7 files changed, 52 insertions(+), 24 deletions(-) create mode 100644 .changeset/green-dolls-jog.md create mode 100644 .yarn/cache/@types-ua-parser-js-npm-0.7.39-23053990d8-fea522f42d.zip diff --git a/.changeset/green-dolls-jog.md b/.changeset/green-dolls-jog.md new file mode 100644 index 000000000..73e16e252 --- /dev/null +++ b/.changeset/green-dolls-jog.md @@ -0,0 +1,5 @@ +--- +'@modern-kit/react': minor +--- + +chore(react): lodash-es 의존성 위치 변경 - @ssi02014 diff --git a/.pnp.cjs b/.pnp.cjs index 0b17db081..57e9f0440 100644 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -7736,6 +7736,7 @@ const RAW_RUNTIME_STATE = ["@types/lodash-es", "npm:4.17.12"],\ ["@types/react", "npm:18.3.1"],\ ["@types/react-dom", "npm:18.3.0"],\ + ["@types/ua-parser-js", "npm:0.7.39"],\ ["@vitest/coverage-istanbul", "virtual:c1880e9304d9a3f41f70832a3686cc183762f34f175965fa7d8f3dcb85f95d5592cbd0c09ea32431c9305ef07668e5847055a578fa362ec3f6feb507679c1fd5#npm:2.1.3"],\ ["classnames", "npm:2.5.1"],\ ["esbuild", "npm:0.24.0"],\ @@ -7779,6 +7780,7 @@ const RAW_RUNTIME_STATE = ["@types/lodash-es", "npm:4.17.12"],\ ["@types/react", "npm:18.3.1"],\ ["@types/react-dom", "npm:18.3.0"],\ + ["@types/ua-parser-js", "npm:0.7.39"],\ ["@vitest/coverage-istanbul", "virtual:c1880e9304d9a3f41f70832a3686cc183762f34f175965fa7d8f3dcb85f95d5592cbd0c09ea32431c9305ef07668e5847055a578fa362ec3f6feb507679c1fd5#npm:2.1.3"],\ ["classnames", "npm:2.5.1"],\ ["esbuild", "npm:0.24.0"],\ @@ -9946,6 +9948,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["@types/ua-parser-js", [\ + ["npm:0.7.39", {\ + "packageLocation": "./.yarn/cache/@types-ua-parser-js-npm-0.7.39-23053990d8-fea522f42d.zip/node_modules/@types/ua-parser-js/",\ + "packageDependencies": [\ + ["@types/ua-parser-js", "npm:0.7.39"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@types/unist", [\ ["npm:2.0.7", {\ "packageLocation": "./.yarn/cache/@types-unist-npm-2.0.7-5097b97603-ecfb4ad990.zip/node_modules/@types/unist/",\ diff --git a/.yarn/cache/@types-ua-parser-js-npm-0.7.39-23053990d8-fea522f42d.zip b/.yarn/cache/@types-ua-parser-js-npm-0.7.39-23053990d8-fea522f42d.zip new file mode 100644 index 0000000000000000000000000000000000000000..7f05d4cd485220a743bc7b868309a83f441bdf48 GIT binary patch literal 9853 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 Wy>s~Cw`uuz@NW%oL2Un!e*FhJ^YOv} literal 0 HcmV?d00001 diff --git a/docs/docs/react/components/AspectRatio.mdx b/docs/docs/react/components/AspectRatio.mdx index 5017815be..aca873f62 100644 --- a/docs/docs/react/components/AspectRatio.mdx +++ b/docs/docs/react/components/AspectRatio.mdx @@ -14,14 +14,10 @@ import { AspectRatio } from '@modern-kit/react'; ## Interface ```ts title="typescript" -const AspectRatio: < - T extends React.ElementType = 'div' ->({ - asChild, - ratio, - children, - ...props -}: React.PropsWithChildren>) => JSX.Element; +interface AspectRatioProps extends ComponentProps<'div'> { + asChild?: boolean; + ratio: number; +} ``` ## Usage diff --git a/packages/react/package.json b/packages/react/package.json index 7b3640741..4d6fee15b 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -35,14 +35,14 @@ "@testing-library/jest-dom": "^6.5.0", "@testing-library/react": "^14.3.1", "@testing-library/user-event": "^14.5.1", - "@types/lodash-es": "^4", + "@types/lodash-es": "^4.17.12", "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", + "@types/ua-parser-js": "^0.7.39", "@vitest/coverage-istanbul": "^2.1.3", "classnames": "^2.5.1", "esbuild": "^0.24.0", "jsdom": "^25.0.0", - "lodash-es": "^4.17.21", "postcss": "^8.4.41", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -57,6 +57,7 @@ }, "dependencies": { "@modern-kit/utils": "workspace:^", + "lodash-es": "^4.17.21", "ua-parser-js": "^1.0.39" }, "peerDependencies": { diff --git a/packages/react/src/components/AspectRatio/index.tsx b/packages/react/src/components/AspectRatio/index.tsx index ea04bbad3..4752b5988 100644 --- a/packages/react/src/components/AspectRatio/index.tsx +++ b/packages/react/src/components/AspectRatio/index.tsx @@ -1,13 +1,18 @@ import classNames from 'classnames'; import styles from './AspectRatio.module.css'; import { Slot } from '../Slot'; -import React from 'react'; +import { + CSSProperties, + Children, + ComponentProps, + PropsWithChildren, + useMemo, +} from 'react'; -type AspectRatioProps = - React.ComponentPropsWithoutRef & { - asChild?: boolean; - ratio: number; - }; +interface AspectRatioProps extends ComponentProps<'div'> { + asChild?: boolean; + ratio: number; +} /** * @description 주어진 aspect-ratio 비율에 맞게 가로/세로 비율을 편리하게 맞춰주는 컴포넌트입니다. @@ -28,7 +33,7 @@ type AspectRatioProps = * // 기본적으로 div를 생성 후 aspect-ratio 속성을 적용합니다. * ```tsx * - *

Content

+ * placeholder * * ``` * @@ -36,18 +41,20 @@ type AspectRatioProps = * // asChild 속성을 true로 설정하면 자식 요소에 aspect-ratio 속성을 적용합니다. * ```tsx * - *
Content
+ *
+ * placeholder + *
* * ``` */ -export const AspectRatio = ({ +export const AspectRatio = ({ asChild = false, ratio, children, ...props -}: React.PropsWithChildren>): JSX.Element => { +}: PropsWithChildren): JSX.Element => { const Wrapper = asChild ? Slot : 'div'; - const customStyle: React.CSSProperties = React.useMemo( + const customStyle: CSSProperties = useMemo( () => ({ paddingTop: `calc(100% * (1 / ${ratio}))`, ...props.style, @@ -60,7 +67,7 @@ export const AspectRatio = ({ className={classNames(styles['wrapper'], props.className)} style={customStyle} {...props}> - {React.Children.only(children)} + {Children.only(children)} ); }; diff --git a/yarn.lock b/yarn.lock index 70a17bbc4..a9f09b138 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4965,9 +4965,10 @@ __metadata: "@testing-library/jest-dom": "npm:^6.5.0" "@testing-library/react": "npm:^14.3.1" "@testing-library/user-event": "npm:^14.5.1" - "@types/lodash-es": "npm:^4" + "@types/lodash-es": "npm:^4.17.12" "@types/react": "npm:^18.2.20" "@types/react-dom": "npm:^18.2.7" + "@types/ua-parser-js": "npm:^0.7.39" "@vitest/coverage-istanbul": "npm:^2.1.3" classnames: "npm:^2.5.1" esbuild: "npm:^0.24.0" @@ -6354,7 +6355,7 @@ __metadata: languageName: node linkType: hard -"@types/lodash-es@npm:^4": +"@types/lodash-es@npm:^4, @types/lodash-es@npm:^4.17.12": version: 4.17.12 resolution: "@types/lodash-es@npm:4.17.12" dependencies: @@ -6644,6 +6645,13 @@ __metadata: languageName: node linkType: hard +"@types/ua-parser-js@npm:^0.7.39": + version: 0.7.39 + resolution: "@types/ua-parser-js@npm:0.7.39" + checksum: fea522f42dfc2854d9c93144a13c3db3bbe1c791458451db06d46bec7e1dbbe945d1542e02bb38378e39a04bdb7810b43e2ead26f9e6c250832e187312522708 + languageName: node + linkType: hard + "@types/unist@npm:*, @types/unist@npm:^3.0.0": version: 3.0.2 resolution: "@types/unist@npm:3.0.2"