From 071f581834cbec12637783ac8e27d844fd1c6e8b Mon Sep 17 00:00:00 2001 From: Hyejun Lee Date: Sun, 21 Jan 2024 18:18:00 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20CSS=20Variable=EB=A1=9C=20=EB=B0=98?= =?UTF-8?q?=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84=20(#39)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 데스크탑 및 모바일 뷰 CSS Variable 추가 * chore: 파일 끝 빈 줄 추가 * fix: 컴포넌트 상대 경로 수정 * chore: 컴포넌트 주석 처리 --------- Co-authored-by: solar3070 <> --- packages/ui/.gitignore | 4 ++++ packages/ui/.npmignore | 4 ++++ packages/ui/Toast/parts/style.css.ts | 6 +++--- packages/ui/cssVariables.ts | 4 ++-- packages/ui/index.ts | 8 ++++++++ packages/ui/index.tsx | 6 ------ packages/ui/package.json | 8 ++++++-- packages/ui/scripts/build-css-modules.js | 26 ++++++++++++++++++++++++ packages/ui/tsconfig.json | 6 ++++-- yarn.lock | 20 ++++++++++++++++++ 10 files changed, 77 insertions(+), 15 deletions(-) create mode 100644 packages/ui/.gitignore create mode 100644 packages/ui/.npmignore create mode 100644 packages/ui/index.ts delete mode 100644 packages/ui/index.tsx create mode 100644 packages/ui/scripts/build-css-modules.js diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore new file mode 100644 index 0000000..1091ed5 --- /dev/null +++ b/packages/ui/.gitignore @@ -0,0 +1,4 @@ +/node_modules/ +/dist +.DS_Store +/*.css diff --git a/packages/ui/.npmignore b/packages/ui/.npmignore new file mode 100644 index 0000000..606d0cf --- /dev/null +++ b/packages/ui/.npmignore @@ -0,0 +1,4 @@ +/src/ +/scripts/ +.gitignore +tsconfig.json diff --git a/packages/ui/Toast/parts/style.css.ts b/packages/ui/Toast/parts/style.css.ts index 793d523..1a9c9dd 100644 --- a/packages/ui/Toast/parts/style.css.ts +++ b/packages/ui/Toast/parts/style.css.ts @@ -2,7 +2,7 @@ import { keyframes, style } from "@vanilla-extract/css"; import theme from "../../theme.css"; const toastAnimation = keyframes({ - "0%, 100%": { transform: "translate(-50%, calc(-100% - 36px))" }, + "0%, 100%": { transform: "translate(-50%, calc(-100% - var(--mds-toast-top, 36px)))" }, "10%, 90%": { transform: "translate(-50%, 0)" }, }); @@ -14,12 +14,12 @@ export const root = style({ gap: "8px", position: "fixed", - top: "36px", + top: "var(--mds-toast-top, 36px)", left: "50%", transform: "translateX(-50%)", transition: "transform .2s linear", - width: "380px", + width: "var(--mds-toast-width, 380px)", padding: "14px 16px", borderRadius: "18px", backgroundColor: theme.colors.gray10, diff --git a/packages/ui/cssVariables.ts b/packages/ui/cssVariables.ts index fb93d11..1fd7801 100644 --- a/packages/ui/cssVariables.ts +++ b/packages/ui/cssVariables.ts @@ -15,16 +15,16 @@ export const desktopVariables = `:root { --mds-dialog-title-font-weight:600; --mds-dialog-title-font-line-height:30px; --mds-dialog-title-font-letter-spacing:-2%; - + --mds-dialog-title-margin-bottom:12; - --mds-dialog-description-font-family: SUIT; --mds-dialog-description-font-size:16px; --mds-dialog-description-font-style:normal; --mds-dialog-description-font-weight:400; --mds-dialog-description-font-line-height:26px; --mds-dialog-description-font-letter-spacing:-1.5%; + }`; export const mobileVariables = `:root { diff --git a/packages/ui/index.ts b/packages/ui/index.ts new file mode 100644 index 0000000..24f6a4a --- /dev/null +++ b/packages/ui/index.ts @@ -0,0 +1,8 @@ +export * from "./cssVariables"; + +// component exports +// export { default as Button } from "./Button"; +// export { ToastProvider, useToast } from "./Toast"; +// export type { ToastOptionType } from "./Toast"; +// export { default as Test } from "./Test"; +// export { default as Dialog } from "./Dialog"; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx deleted file mode 100644 index 8c91efd..0000000 --- a/packages/ui/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -// component exports -export { default as Button } from './Button'; -export { ToastProvider, useToast } from "./Toast"; -export type { ToastOptionType } from "./Toast"; -export { default as Test } from "./Test"; -export { default as Dialog } from "./Dialog"; diff --git a/packages/ui/package.json b/packages/ui/package.json index 5dfc3c4..995d44e 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,10 +1,13 @@ { "name": "ui", "version": "0.0.0", - "main": "./index.tsx", - "types": "./index.tsx", + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", "license": "MIT", "scripts": { + "build": "tsup index.ts cssVariables.ts --format cjs,esm --dts && yarn build-css-modules", + "build-css-modules": "node ./scripts/build-css-modules.js", "lint": "eslint .", "generate:component": "turbo gen react-component" }, @@ -17,6 +20,7 @@ "eslint-config-custom": "*", "react": "^18.2.0", "tsconfig": "*", + "tsup": "^8.0.1", "typescript": "^4.5.2" }, "dependencies": { diff --git a/packages/ui/scripts/build-css-modules.js b/packages/ui/scripts/build-css-modules.js new file mode 100644 index 0000000..b9b8f22 --- /dev/null +++ b/packages/ui/scripts/build-css-modules.js @@ -0,0 +1,26 @@ +const fs = require("fs"); +const path = require("path"); +const allVariables = require("../dist/cssVariables"); +const outputDir = require("../tsconfig.json").compilerOptions.outDir; + +Object.keys(allVariables).forEach((key) => { + const variableValues = Object.entries(allVariables).find( + ([name]) => name === key + )[1]; + + fs.writeFileSync( + path.join(outputDir, toFileName(key) + ".css"), + `${variableValues}` + ); +}); + +function toCssCasing(str) { + return str + .replace(/([a-z])/, "$1") + .replace(/([A-Z])/g, "-$1") + .toLowerCase(); +} + +function toFileName(str) { + return toCssCasing(str); +} diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index 980246e..fdb3740 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -1,8 +1,10 @@ { "compilerOptions": { - "jsx": "react" + "jsx": "react-jsx", + "outDir": ".", + "allowSyntheticDefaultImports": true }, "extends": "tsconfig/react-library.json", - "include": ["."], + "include": ["index.ts", "cssVariables.ts"], "exclude": ["dist", "build", "node_modules"] } diff --git a/yarn.lock b/yarn.lock index c53ac13..24a3a83 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10276,6 +10276,26 @@ tsup@^7.2.0: sucrase "^3.20.3" tree-kill "^1.2.2" +tsup@^8.0.1: + version "8.0.1" + resolved "https://registry.npmjs.org/tsup/-/tsup-8.0.1.tgz#04a0170f7bbe77e81da3b53006b0a40282291833" + integrity sha512-hvW7gUSG96j53ZTSlT4j/KL0q1Q2l6TqGBFc6/mu/L46IoNWqLLUzLRLP1R8Q7xrJTmkDxxDoojV5uCVs1sVOg== + dependencies: + bundle-require "^4.0.0" + cac "^6.7.12" + chokidar "^3.5.1" + debug "^4.3.1" + esbuild "^0.19.2" + execa "^5.0.0" + globby "^11.0.3" + joycon "^3.0.1" + postcss-load-config "^4.0.1" + resolve-from "^5.0.0" + rollup "^4.0.2" + source-map "0.8.0-beta.0" + sucrase "^3.20.3" + tree-kill "^1.2.2" + tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"