Skip to content

๐Ÿ˜ˆ xionwcfm utils, design system, token, hooks, components

Notifications You must be signed in to change notification settings

XionWCFM/xionwcfm-lib

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

50 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

xionwcfm-lib

xionwcfm-lib ๋Š” xionwcfmmonorepo์˜ ๊ณตํ†ต ์ฝ”๋“œ๋ฒ ์ด์Šค ์œ ํ‹ธ์„ ๋ถ„๋ฆฌํ•˜์—ฌ ์›๊ฒฉ ํŒจํ‚ค์ง€๋กœ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

Available Packages

jotai๋ฅผ ๋ž˜ํ•‘ํ•˜๋Š” ์ž‘์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

์ž์„ธํ•œ ์‚ฌ์šฉ์˜ˆ์‹œ๋Š” @xionwcfm/jotai readme์—์„œ ํ™•์ธํ•ด์ฃผ์„ธ์š”

jotai๋ฅผ peer dependencies๋กœ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

pnpm i jotai @xionwcfm/jotai

pnpm i @xionwcfm/token

xionwcfm color 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์—์„œ ํ™•์ธํ•˜์„ธ์š”


@xionwcfm/react

pnpm i @xionwcfm/react

๋””์ž์ธ์ด ๊ด€์‹ฌ์‚ฌ๊ฐ€ ์•„๋‹Œ ์ปดํฌ๋„ŒํŠธ์™€ ์œ ์šฉํ•œ ์ปค์Šคํ…€ํ›…์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

peer dependencies

  "peerDependencies": {
    "react": ">=18",
    "react-dom": ">=18"
  }

์ž์„ธํ•œ ์‚ฌํ•ญ์€ @xionwcfm/react source code๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”

About

๐Ÿ˜ˆ xionwcfm utils, design system, token, hooks, components

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published