스토리북 및 크로마틱 자동 배포 워크플로우 추가 셋업 #11
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
💅 ## storybook-URL - https://66a939e10fecfdf69816c066-rfimnvtdbm.chromatic.com/ |
| addons: [ | ||
| "@storybook/addon-onboarding", | ||
| "@storybook/addon-links", | ||
| "@storybook/addon-essentials", | ||
| "@chromatic-com/storybook", | ||
| "@storybook/addon-interactions", | ||
| ], |
There was a problem hiding this comment.
필수 애드온은 잘 정의되어 있네요!
이외 config 코드도 이견 없습니다~
| const preview: Preview = { | ||
| parameters: { | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
제가 emotion으로만 스토리북을 구상 해봤어서 그런데
global이 잘 동작한다면 문제 없어요!
추후 wrapper 컴포넌트가 추가 된다면 renderStory() 메서드를 기반으로 이 부분에서 구현 하시면 돼요~
There was a problem hiding this comment.
Wrapper Component가 추가된다면 어떤 경우인지 혹시 알려주실 수 있나요?
There was a problem hiding this comment.
Root.tsx 생각하시면 이해하기 편해요~
const ThemeWrapper = ({ children }) => (
<ThemeProvider theme={theme}>
<Global styles={global} />
{children}
</ThemeProvider>
)
export const decorators = [(renderStory) => <ThemeWrapper>{renderStory()}</ThemeWrapper>]스토리북에서도 Root 단에 필요한 로직이나 스타일링이 있다면 preview를 JSX 문법으로 활용할 수 있다는 의미였어요!
| @@ -9,10 +9,13 @@ | |||
| "lint": "next lint", | |||
| "prepare": "husky", | |||
| "cz": "cz", | |||
| "formatting": "prettier --write '**/*.{ts,tsx}' && eslint --fix ." | |||
| "formatting": "prettier --write '**/*.{ts,tsx}' && eslint --fix .", | |||
There was a problem hiding this comment.
P3
사소하지만 prettier를 format, lint를 lint 스크립트로 분리하는 것도 추천드려요!
디버깅 목적으로 둘이 독립적으로 사용되는 경우도 자주 있을 뿐더러, 조금 더 보편적인 방식이라 생각해요 (저의 과거 리서치에 의하면)
추가로 next lint 스크립트도 사용하지 않는다면 제거하거나 eslint로 오버라이딩 하면 좋겠네요!
There was a problem hiding this comment.
호오...! 반영하겠습니다 감사합니다.
| colors: { | ||
| "primary-color-01": "var(--primary-color-01)", | ||
| "primary-color-02": "var(--primary-color-02)", |
There was a problem hiding this comment.
P3
제가 emotion으로만 프로젝트를 했어서 그런데
공식문서 토대로 질문 드리면, extend 하위에 color가 있어도 정상 동작 하던가요?
문서에서는 color가 config 객체의 상위 프로퍼티로 설명 되어있길래 여쭤봐요!
There was a problem hiding this comment.
사용자 정의 색상 추가는 extend에 하라고 어디서 본것 같아서.. 추가를 했습니다.
extend 외부에 있는 color에 넣을경우는 이제 그 default 색상들에 오버라이딩이 되는 것 같습니다. ( 물론 키값이 같아야겠지만 )
동작은 잘 됬어가지구.. 그 부분은 놓쳤네요.
일단 그대로 두도록 하겠습니당. 감사합니다.
PR 타입 ( 하나 이상의 PR 타입을 선택해주세요 )
개요
질문
변경 사항