@riiid/santa-closet-web

santa-closet-web

UI Design Kit for 🎅's products

Dependencies

• React 에 의존성을 가집니다.
• jss로 스타일을 적용해줍니다.

🚧👷 warning 👷🚧

• foundation & component 추가 시 중복되는 명칭이 없도록 주의합니다. 👀

Installation

yarn add @riiid/santa-closet-web

Usage

foundation

santa-closet 의 색상, 아이콘, 쉐도우 스타일을 정의합니다.
기본 팔레트 색상 외에도 테마 색상 dark 또는 light 을 적용하실 수 있습니다.

foundation 구조는 아래와 같습니다.

Plugin	README
ALL	@riiid/santa-closet-web
colors	@riiid/santa-closet-web/colors
theme	@riiid/santa-closet-web/theme
icons	@riiid/santa-closet-web/icons
shadows	@riiid/santa-closet-web/shadows

예시

import {white1, shadowDown1} from '@riiid/santa-closet-web'
import {dark as theme} from '@riiid/santa-closet-web/theme';
import {Arrow, Cart, Password} from '@riiid/santa-closet-web/icons'

class Example extends Component {
  render () {
    return (
      <div style={shadowDown1}>
        <Arrow/>
        <Cart width={30} height={30} fill={white1}/>
        <Password fill={theme.color1}/>
      </div>
    )
  }
}

icon list

Example

Cheetsheet

cheat sheet - https://santa-closet.riiid.app

Example Project

yarn link 로 deploy 된 /lib 폴더와 연결하여 테스트합니다.🖐🏻

Deploy

yarn publish:module 스크립트 실행 후 배포되는 폴더의 버전과 루트 폴더의 버전을 동일하게 올려줍니다.

License

Riiid © Riiid