xionwcfm-lib
๋ xionwcfmmonorepo
์ ๊ณตํต ์ฝ๋๋ฒ ์ด์ค ์ ํธ์ ๋ถ๋ฆฌํ์ฌ ์๊ฒฉ ํจํค์ง๋ก ๊ด๋ฆฌํฉ๋๋ค.
jotai๋ฅผ ๋ํํ๋ ์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
์์ธํ ์ฌ์ฉ์์๋ @xionwcfm/jotai readme์์ ํ์ธํด์ฃผ์ธ์
jotai๋ฅผ peer dependencies๋ก ๊ฐ์ง๋๋ค.
pnpm i jotai @xionwcfm/jotai
pnpm i @xionwcfm/token
color , spacing ๋ฑ ๋์์ธ์ ํ์ํ ํ ํฐ๋ค์ ์ ์ํฉ๋๋ค.
css variables์ ์์กดํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉ ์ css๋ฅผ import ํ์ฌ ์ฃผ์ธ์
DesignSystem Figma์์ ๋ ๋ง์ ์ ๋ณด๋ฅผ ์ป์ ์ ์์ต๋๋ค.
tailwindcss๋ฅผ ์ฌ์ฉํ๋ค๋ฉด token์ ๋ค์๊ณผ ๊ฐ์ด ํตํฉํ ์ ์์ต๋๋ค.
tailwind.config.ts
import { XION_STYLE } from "@xionwcfm/token";
import type { Config } from "tailwindcss";
const config: Config = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}"],
theme: {
colors: XION_STYLE.colors,
borderRadius: XION_STYLE.borderRadius,
spacing: XION_STYLE.spacing,
fontSize: XION_STYLE.fontSize,
fontWeight: XION_STYLE.fontWeight,
lineHeight: XION_STYLE.lineHeight,
boxShadow: XION_STYLE.boxShadow,
extend: {
keyframes: XION_STYLE.keyframes as Config["theme"],
animation: XION_STYLE.animation,
screens: XION_STYLE.screens,
},
},
};
export default config;
pnpm i @xionwcfm/token @xionwcfm/xds
๋ชจ๋ฐ์ผ ์น๋ทฐ ๊ฐ๋ฐ์ ์ต์ ํ๋ ๋์์ธ ์์คํ ์ ์ ๊ณตํฉ๋๋ค.
ํ๋ก์ ํธ์ ํต์ผ์ฑ์ ์ํด @xionwcfm/token
์ ํจ๊ป ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
์์ ์ ํ๋ก์ ํธ์ Root์์ Import๋ฅผ ์ํํฉ๋๋ค.
import "@xionwcfm/token/style";
import "@xionwcfm/xds/style";
์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ @xionwcfm/xds storybook์์ ํ์ธํ์ธ์
pnpm i @xionwcfm/react
๋์์ธ์ด ๊ด์ฌ์ฌ๊ฐ ์๋ ์ปดํฌ๋ํธ์ ์ ์ฉํ ์ปค์คํ ํ ์ ์ ๊ณตํฉ๋๋ค.
peer dependencies
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
์์ธํ ์ฌํญ์ @xionwcfm/react source code๋ฅผ ์ฐธ๊ณ ํ์ธ์