개발환경 - 디자인시스템

박경수·2024년 6월 10일
0

git : https://github.com/GoodPart/design_system/tree/master

스택

vite + react(typescript)
token transformer : https://www.npmjs.com/package/token-transformer
storybook
figma(tokens studio)

설치

// vite(react, ts)
npm create vite@latest
// storybook
npm install @storybook/builder-vite --save-dev

작업 현황

Front

vite(react + ts)
storybook

token-transformer 커맨드

  • npx token-transformer tokens.json ./src/global.json

design

figma(tokens studio lib)

figma -> storybook 연동

figma 플러그인 설치

storybook Connect

과정

  1. chromatic으로 story 배포
  2. figma에서 플러그인 다운로드
  3. chromatic 계정 인증
  4. figma 컴포넌트와 연결

주의

컴포넌트화된 작업물만 스토리북과 연동이 가능함.

설치 및 연동과정 정리

  1. figma 플러그인설치 (storybook Connect)
  2. chromatic 로그인 및 storybook 배포 스크립트 노출 (첫 연동 1회)

    npm install --save-dev chromatic
    npx chromatic --project-token=chpt_d52dd7aca972a6e ('project-token=...' 해당 부분은 프로젝트에 따라 상이)

  3. 정상적 설치 후 package.json에 chromatic스크립트 추가됨
  4. 설치 완료시 배포된 url을 확인 https://www.chromatic.com/setup?appId=66737ddf4b6da58683a63299접속

    좌측 상단 내 계정 클릭 ->

    ACTIVITY > design_system #1을 클릭

    View storybook클릭해 배포된 스토리북 확인.
  5. 연결할 스토리의 url을 복사 후 피그마로 이동해 연결할 컴포넌트를 우클릭 > story connect클릭해 해당 url을 삽입.

에러

storybook 설치시 npm error가 나타났다.
해당 storybook.log를 확인해보니, 권한 문제였다.

신기하게, 우분투가 아닌 윈도우에서도 권한이 필요했다.

조치

git bash를 관리자 권한으로 설정후 인스톨 진행.
npm install @storybook/builder-vite --save-dev


{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^1.5.0",
    "@storybook/addon-essentials": "^8.1.5",
    "@storybook/addon-interactions": "^8.1.5",
    "@storybook/addon-links": "^8.1.5",
    "@storybook/addon-onboarding": "^8.1.5",
    "@storybook/blocks": "^8.1.5",
    "@storybook/builder-vite": "^8.1.5",
    "@storybook/react": "^8.1.5",
    "@storybook/react-vite": "^8.1.5",
    "@storybook/test": "^8.1.5",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "eslint-plugin-storybook": "^0.8.0",
    "storybook": "^8.1.5",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}
profile
<>{...}</>

0개의 댓글