그로밋 작업

문맥

Hacktoberfest 2021에 대한 두 번째 기여를 위해 접근성, 모듈성, 응답성 및 테마를 제공하는 반응 기반 프레임워크인 grommet을 우연히 발견했습니다. 저는 #5735 작업을 통해 스토리 구성 요소를 개선하여 테마를 허용하기로 결정했습니다.

Grommet: Storybook 테마 기능을 사용하여 스토리 향상

스토리북은 격리된 환경에서 구성 요소를 문서화하고 탐색하는 데 사용되며 최근에는 Theme 버튼을 통해 여러 테마로 스토리북 스토리를 볼 수 있는 기능이 그로밋 스토리북의 상단 표시줄에 추가되었습니다.

이제 사용자는 Theme 버튼을 사용하여 구성 요소의 테마를 전환하는 옵션을 사용할 수 있습니다. 하지만 그로밋 스토리북에는 총 60개의 스토리가 있으며 Theme 기능이 추가되면서 1개만 리팩토링되었습니다. 따라서 문제는 새로운 테마 기능을 사용할 수 있도록 다른 59개 스토리에 대한 도움을 요청했습니다.

그래서 두 번째 기여를 위해 몇 가지 스토리를 작업하고 테마 기능을 추가하기로 결정했습니다.

그로밋 스토리북 작업

프로젝트 설정은 설정 및 기여 가이드를 거친 후 매우 간단했습니다. 처음에는 이 프로젝트가 복잡해 보였지만 스토리북을 시작하고 조금 살펴보니 어떻게 작동하는지 기본적인 이해를 할 수 있었습니다. 작업할 3가지 구성 요소로 범위를 좁혔습니다.

앵커

드롭버튼

메뉴

각 구성 요소에는 개선이 필요한 여러 스토리가 포함되어 있습니다. 예를 들어 Anchor에는 다음이 포함됩니다.

Color.js
Default.js
Gap.js
Inline.js
Size.js
Weight.js

테마가 작동하지 않는 이유는 모든 구성 요소가 이제 제거해야 하는 기본grommet 테마를 사용하고 있었기 때문입니다.

  <Grommet theme={grommet}>
    ...
  </Grommet >

그래서 저는 이러한 구성 요소에 대한 각 스토리로 이동하여 Grommet 래퍼와 수입품을 제거했습니다. 일부 스토리의 경우 이로 인해 구성 요소의 레이아웃이 엉망이 되었기 때문에 필요에 따라 <Box> 래퍼를 중앙에 추가해야 했습니다.

또한 일부 스토리는 theme={grommet} 대신 사용자 정의 테마를 사용했습니다. 이것은 문제 설명에서 강조되었으며 이러한 경우 구성 요소 내부의 /CustomThemed 폴더로 이동하고 스토리북이 Custom Themed라는 하위 폴더에 렌더링하도록 내보내기 제목을 변경했습니다. 예를 들어:


각 구성 요소에 대해 이 작업을 수행한 후 Theme가 이제 base , grommet 및 hpe 간에 전환될 수 있는지 테스트했습니다. 또한 변경 사항으로 인한 레이아웃 불일치가 없는지 테스트했습니다. jest를 통한 빠른 테스트 실행으로 이제 변경 사항을 푸시하고 풀 요청을 생성할 준비가 되었습니다.

*풀 리퀘스트 링크: Allow theming for Anchor, DropButton and Menu stories - Issue 5735

풀 리퀘스트

풀 리퀘스트를 생성한 후 주요 이슈에 대한 코멘트를 남겨 홍보를 강조했습니다. 그런 다음 검토했고 개발자는 좋아 보인다고 말했습니다. 그러나 메뉴 스토리의 작동 방식에 문제가 있었습니다. 이는 Grommet에 full 소품이 없기 때문에 발생했으며 개발자는 해당 문제를 해결하기 위해 풀 요청을 생성했습니다.

주제가 있는 스토리북으로 전체 Grommet을 지정하는 기능 추가 - https://github.com/grommet/grommet/pull/5737

내 pr은 이제 이 수정 사항이 병합되기를 기다리고 있었고 시간이 얼마나 걸릴지 확신할 수 없었기 때문에 개발자에게 pr에 hacktoberfest-accepted를 추가하는 것을 고려해 달라고 요청했습니다. 그들은 그렇게 했습니다!

병합할 수 없다는 사실에 약간 실망했지만, 또 다른 새로운 프로젝트를 배우고 탐색했으며 이것이 hacktoberfest에 대한 두 번째 기여가 되었기 때문에 여전히 기뻤습니다!