pikurate-ds-web

pikurate design system for web.

Install

npm install --save @pikurate/ds-web

How To Use

  import { Button, Icon } from '@pikurate/ds-web';

  const Example = () => (
    <div>
      <Button theme="active" onClick={() => {}}>
        버튼 <Icon icon="check_white" size="4rem" />
      </Button>
    </div>
  )

How to Develop

setup project

Pikurate Design System project

git clone https://gitlab.com/pikurate/ds-web.git

npm install

npm run sb

build

yarn build-sb : netlify 에서 필요함 yarn build : npm 시 사용할 코드

배포 전에는 반드시 빌드를 하도록 합시다.

• 현재 배포된 서버는 핸리의 개인 계정이 연동된 넷플리파이 계정에 연동되어 있습니다.
• build-sb 커맨드를 수정하지 마시기 바랍니다.
• netlify 에서 사용중입니다.

배포하기

yarn login

yarn publish --access public

Author : brady

Data: 22/05/03

스토리북 작성방법

1. 이 프로젝트는 디자인 시스템 구축 및 테스트 활용을 위해서 개발되었습니다.

2. 참고한 레포지토리는 codeacademy 의 gamut design system 입니다. 🚀링크

3. 모든 컴포넌트는 src/Component 에 배치합니다.

4. 모든 스토리는 stories 폴더에 배치합니다.

5. 스토리의 구분은 다음과 같습니다.

   "@Legacy", // 레거시 파일들 입니다.
   "Foundations", // 디자인 시스템의 근본이 되는 친구들 입니다.
   "Typography", // 타이포
   "Layouts", // 레이아웃
   "Atoms", // 원자단위 컴포넌트 (버튼, 카드 등)
   "Molecules", // 분자단위 컴포넌트 (원자 조합 컴포넌트)
   "Organisms", // 조직단위 컴포넌트 (폼, 리스트, 테이블 등)
   "Pages", // 페이지 화면
   "Brand", // 브랜드 관련 컴포넌트 (아바타, 로고 등등)
   "Hooks", // 테스트 위한 Hooks 컴포넌트