shinheylynn / storybook-multi-framework

📖 인티그레이션에서 사용한 Multi-framework Storybook 소스코드입니다.

Project 소개

📌 문제점

• Vue.js를 사용하는 Moreden
• React.js를 사용하는 Medistream

두 사이트 모두 동일한 UI 컴포넌트들을 사용하고 있으나, 프레임워크가 다르기 때문에 각기 다른 저장소에서 관리 중이었음.

컴포넌트에 업데이트가 생기면 두 저장소에서 모두 수정해야 한다는 번거로움이 있었기 때문에, 효율도를 높이기 위해서 다양한 프레임워크들을 하나의 저장소에서 관리할 수 있도록 한다.

💡 목표한 바를 이루고자 Storybook의 composition 기능을 활용하여 구조를 설계한다.

에 대해

1. Storybook 튜토리얼 읽어보기
2. UI 컴포넌트 생성 후 디자인 시스템으로 제작하는 방법
3. 공식 문서 읽어보기
4. Composition 기능에 대해 읽어보기

Storybook Multi-Framework 작업:

(편의상 React library를 framework로 지칭함.)

2개 이상의 프레임워크를 하나의 Storybook으로 합쳐서 하나의 레포로 관리한다. 이를 통해 다수의 프레임워크로 작성된 UI들을 효율적으로 관리할 수 있도록 한다.

Architecture:

root
ㄴ .storybook
	 story는 없고, react와 vue를 composition하는 storybook.
ㄴ stories
	 root-storybook이 동작하기 위한 최소 하나 이상의 story가 존재한다.
ㄴ components
	 UI 컴포넌트 구성하는 jsx, vue 파일들이 모여있다.
ㄴ [+] react-storybook
	components 내 jsx를 import하는 story들이 모여있다.
ㄴ [+] vue-storybook
	components 내 vue를 import하는 story들이 모여있다.

& 배포:

본 프로젝트는 root storybook을 제외한 각 Framework Storybook들을 Chromatic을 이용하여 배포한다.

• root storybook은 회사 내 규정대로 AWS S3를 이용하여 배포함.

Pipeline

pipelines:
  branches:
    develop:
      - step:
          name: Build
          deployment: Production
          image: node:18
          script:
            - npm install
            - npm run build-storybook
          artifacts:
            - storybook-static/**
      - step:
          name: Deploy to S3
          image: atlassian/pipelines-awscli
          script:
            - aws s3 sync --delete ./storybook-static s3://ui.integrationcorp.co.kr
            - aws cloudfront create-invalidation --distribution-id E2J4QL6EK16P4D --paths "/*"
    react:
      - step:
          name: Build & Deploy
          deployment: Production
          image: node:18
          script:
            - npm install
            - cd storybook-react
            - npm install
            - npm run build-storybook 
            - npx chromatic --project-token $REACT_STORYBOOK_TOKEN --exit-zero-on-changes
          artifacts:
            - storybook-react/storybook-static/**
    vue:
      - step:
          name: Build & Deploy
          deployment: Production
          image: node:16
          script:
            - npm install
            - cd storybook-vue
            - npm install
            - npm run build-storybook 
            - npx chromatic --project-token $VUE_STORYBOOK_TOKEN --exit-zero-on-changes
          artifacts:
            - storybook-vue/storybook-static/**
  tags:
    production-*:
      - step:
          name: Build
          deployment: Production
          image: node:18
          script:
            - npm install
            - npm run build-storybook
          artifacts:
            - storybook-static/**
      - step:
          name: Deploy to S3
          image: atlassian/pipelines-awscli
          script:
            - aws s3 sync --delete ./storybook-static s3://ui.integrationcorp.co.kr
            - aws cloudfront create-invalidation --distribution-id E2J4QL6EK16P4D --paths "/*"

package.json scripts:

npm scripts	commands
"storybook"	"storybook dev -p 6006"
"storybook:react"	"cd storybook-react && npm install && npm run storybook"
"storybook:vue"	"cd storybook-vue && npm install && npm run storybook"
"build-storybook"	"storybook build"
"build-storybook:react"	"cd storybook-react && npm install && npm run build-storybook"
"build-storybook:vue"	"cd storybook-vue && npm install && npm run build-storybook"