Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable turbosnap when chromatic builds storybook #2185

Closed
yangwooseong opened this issue Apr 30, 2024 · 2 comments · Fixed by #2198
Closed

Enable turbosnap when chromatic builds storybook #2185

yangwooseong opened this issue Apr 30, 2024 · 2 comments · Fixed by #2198
Assignees
@yangwooseong
Labels
enhancement Issues or PR related to making existing features better

Comments

@yangwooseong
Copy link
Collaborator

yangwooseong commented Apr 30, 2024 •
edited
Loading

Summary

  • 크로마틱이 스토리북을 빌드할 때마다 50개 컴포넌트에 대해서 스토리 100여 개를 생성하는데, 크로마틱 무료 플랜의 제한이 5,000개/월 이라서 제한에 걸릴 것으로 우려됩니다.
  • turbosnap 기능을 활용하면 변하지 않은 스토리에 대해서는 사용량을 20%로 환산하여 계산한다고 합니다. 예를 들어 스토리 5개가 바뀐다고 하면 5 + 95 * 0.2 = 24개를 사용했다고 계산하기 때문에 사용량을 꽤 절감할 수 있습니다.
  • https://www.chromatic.com/docs/github-actions/#enable-turbosnap 문서를 참고하여 turbosnap 기능을 활용할 수 있는지 테스트합니다.

References
@yangwooseong yangwooseong added the enhancement Issues or PR related to making existing features better label Apr 30, 2024
@yangwooseong yangwooseong self-assigned this Apr 30, 2024
@github-project-automation github-project-automation bot moved this to 📌 Backlog in Bezier React Apr 30, 2024
@channel-io channel-io deleted a comment from channeltalk bot Apr 30, 2024
@yangwooseong
Copy link
Collaborator Author

yangwooseong commented Apr 30, 2024 •
edited
Loading

  • turbosnap 은 GitHub Action 에서 pull_request 가 아닌 push 트리거를 권장한다고 합니다. 따라서 trigger가 pull_request의 activity type이 [opened, reopened] 일때와 push 일 때를 나눠서 각각 turbosnap이 비활성화된 워크플로우와 활성화된 워크플로우를 만들어야 할 것 같습니다. 이 2개의 워크플로우는 turbosnap 을 설정 유무와 trigger 액션(pr, push) 를 제외하고 동일하기 때문에 workflow 재사용 기능을 고려해보면 좋을 것 같습니다. -> pull_request 가 만들어질 때 push 이벤트도 발생하기 때문에 두개 만들 필요는 없어보이네요
  • 램덤으로 이미지를 생성하는 부분은 제거해야 합니다.

Reference

@channel-io channel-io deleted a comment from channeltalk bot Apr 30, 2024
@yangwooseong yangwooseong mentioned this issue May 7, 2024
Merged
6 tasks
yangwooseong added a commit that referenced this issue May 20, 2024
@yangwooseong
Enable chromatic turbosnap (#2198)
8f32f50 
<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

- Fixes #2185

## Summary

<!-- Please brief explanation of the changes made -->

- Chromatic의 turbosnap기능을 활성화하고, trigger되는 조건을 push, pull_request에서
push로 변경합니다.

## Details

<!-- Please elaborate description of the changes -->

- turbosnap은 webpack의 디펜던시 그래프를 이용해서 변화가 있는 스토리만 스냅샷을 찍는 기능입니다. 베지어 스토리
갯수가 100개 정도 되서 사용량 제한 5000개를 초과하지 않기 위해 필요한 기능입니다. 자세한 설명은 이슈를 첨고해주세요.
- `Help`컴포넌트를 바꾸는 경우: 디펜던시 그래프에서 Help와 연결된 부분 (Help, FormLabel,
FormControl, Modal, Button 등)이 변화가 있다고 판단하고 관련된 스토리 22개만 스냅샷으로
찍습니다([#](https://github.com/yangwooseong/bezier-react/actions/runs/8933306731/job/24538487220)).
Modal이나 Button이 연결되어 있다고 판단하는 것은 스토리에서 FormLabel, FormControl을 사용하고 있어서
그렇습니다.
- `AlphaButton` 컴포넌트를 바꾸는 경우: `AlphaButton`에 의존하는 컴포넌트가 없기 때문에 스냅샷 하나만
찍게 됩니다
([#](https://github.com/yangwooseong/bezier-react/actions/runs/8933402361/job/24538725045?pr=135)).
- turbosnap문서에서 pull_request가 아닌 push를 이벤트 트리거로 사용하라고 권장하고 있어서
pull_request를 제거하고 브랜치 필터를 제거했습니다.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

- No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

- https://www.chromatic.com/manage?appId=62bead1508281287d3c94d25
- https://www.chromatic.com/docs/turbosnap/
@github-project-automation github-project-automation bot moved this from 📌 Backlog to ✅ Done in Bezier React May 20, 2024
@channeltalk ChannelTalk
Copy link

channeltalk bot commented May 20, 2024

https://desk.channel.io/#/channels/1/team_chats/groups/1237/664b0544cb5d2d4a1589

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yangwooseong yangwooseong

Labels
enhancement Issues or PR related to making existing features better
Projects
No open projects
Bezier React
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Enable chromatic turbosnap yangwooseong/bezier-react
1 participant
@yangwooseong