3. 디자인시스템 - npm에서 받아서 활용해보기

 

앞서 설정한 디자인 시스템의 npm을 storybook 문서를 활용하여 테스트를 진행해 보자.

 

1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용

2. 디자인시스템 - Storybook chromatic 배포 및 git 연동

 

3. 디자인시스템 - npm에서 받아서 활용해보기

3.1. 리액트 설치

$ npx create-react-app design-system-test-app --template typescript
$ yarn create react-app design-system-test-app --template typescript

 

3.2. npm 라이브러리 설치

$ yarn add @djgundam/react-storybook-rollup-starter

 

3.3. 확인

import React from "react"

import { Button } from '@djgundam/react-storybook-rollup-starter'


const TestStorybook = () => {

  return (

    <div style={{background: '#FFF', width: '200px', height:'200px'}}>

    <Button
      primary={false}
      label="Button111"
      size="small"
      backgroundColor="skyblue"
    />
    </div>
  )
}

export default TestStorybook