Docz 란?
스토리북 같은 UI 컴포넌트 문서화하는 툴이다.
스토리북이랑 비교해서 좋은게 props 를 설정하는게 정말 간단하다.
예시 버튼 컴포넌트
//Button.js
import React from 'react';
import p from 'prop-types';
import * as S from './Button.styled';
export function Button({ children, backgroundColor }) {
return (
<S.Button backgroundColor={backgroundColor}>
<S.Text>{children}</S.Text>
</S.Button>
);
}
Button.propTypes = {
backgroundColor: p.oneOf(['blue', 'purple']),
children: p.string,
};
Button.defaultProps = {
backgroundColor: 'blue',
children: 'Some message',
};
// Button.styled.js
import { TouchableOpacity, Text as RNText } from 'react-native';
import styled from 'styled-components/native';
import tw from 'tailwind-rn';
export const Button = styled(TouchableOpacity)`
${tw('p-3 bg-blue-300 rounded-lg w-40')};
background-color: ${({ backgroundColor }) => backgroundColor};
`;
export const Text = styled(RNText)`
${tw('text-white')};
`;- 버튼 mdx 문서
// Button.mdx
---
name: Button
menu: Components
---
import { Playground, Props } from 'docz';
import { Button } from './Button';
# Button
## Properties
<Props of={Button} />
## Basic usage
<Playground>
<Button>default</Button>
<Button backgroundColor={'purple'}>purple</Button>
</Playground>Props 컴포넌트에 사용자 정의 컴포넌트를 넣으면 propTypes 참조해서 알아서 table을 만들어준다.
컴포넌트 ui는 아래 Playground 자식으로 출력할 컴포넌트를 넣어주면 된다.
이럴게 props table이 생성 된다.
스토리북처럼 버튼식으로 프로퍼티 바꾸는 애드온은 없는 데 아래 스크립트 코드를 수정해서 직접 바꿔줄 수 있다.
문서화의 목적이라면 스토리북 대신 쓰기 충분해 보이는데, chromatic 같은 툴이 없어서 시각적 회귀 테스트와 같은 부가 기능이 필요하면 다소 아쉬울 수 있을 것 같다.
리액트 네이티브에 설정
yarn add docz react react-dom react-native-web패키지 4개를 설치한다.
문서를 웹에서 사용하기 위해 react-native-web 을 사용 한다.
// package.json
{
...
"scripts" : {
"docz:start": "docz dev",
"docz:build": "docz build"
}
}package.json에 실행 스크립트 추가
// gatsby-node.js
exports.onCreateWebpackConfig = args => {
args.actions.setWebpackConfig({
resolve: {
alias: {
'react-native': 'react-native-web',
},
},
});
};
// doczrc.js
export default {
title: 'React Native Boilerplate',
src: './src',
};프로젝트 루트 경로에 gatsby-node.js 와 doczrc.js 를 추가한다.
react-native 패키지는 모바일 전용이기에 웹에서 실행할 수 없다. react-native를 import 하는 부분에 react-native-web으로 모킹 하기위해 alias 설정한다.
doczrc.js 에선 사이트 타이틀과 src 경로를 지정한다. src 지정 안하면 루트파일부터 모든 파일(node_modules까지)을 탐색하기 때문에 시간이 오래걸린다.
설정은 끝났고 src 디렉토리 내에 mdx 파일을 작성하면 docz 실행 시 알아서 가져온다.
배포
빌드 하면 정적 html을 생성해준다. (.docz/dist)
netlify 사용해서 정말 쉽게 배포할 수 있다.
즉시 배포되고 main 브랜치에 ci cd도 자동으로 설정해줌
Loading Comments...