Pastel UI

• 🎨 Storybook

파스텔 UI는 카카오스타일 파트너센터 디자인 시스템을 위한 리액트 기반의 라이브러리입니다.

사용

프로젝트에 @croquiscom/pastel-ui과 peer dependencies를 추가해줍니다.

npm install --save @croquiscom/pastel-ui @emotion/react @emotion/styled react react-dom

import React from 'react'
import { value color, value text_styles, value HStack } from '@croquiscom/pastel-ui';
import styled from '@emotion/styled';

export default function Test() {
  return (
    <HStack spacing={10}>
      <BaseText variant='Heading_24_Bold' color={colors.gray900}>Hello</BaseText>
      <StyledText>Pastel UI</StyledText>
    </HStack>
  );
}

const StyledText = styled.p`
  ${text_styles.Body_14_SemiBold};
  color: ${colors.gray600};
`;

개발

요구되는 개발 환경

Node.js v14+, Yarn v1.22+

로컬에 클론된 레포지토리로 이동하여, node_modules를 설치합니다.

yarn

스토리북을 통해 확인하기 위해선 다음 명령어를 실행합니다. (브라우저에서 http://localhost:6006/ 로 이동하세요.)

yarn storybook

구조

├── assets
│   └── icons
├── src
│   ├── [COMPONENT]
│   │   ├── index.ts
│   │   ├── [COMPONENT].tsx
│   │   ├── [COMPONENT].stories.mdx
│   │   ├── types.ts
│   │   └── styles.ts
│   ├── icons
│   │   ├── generated
│   │   ├── Icon.stories.tsx
│   │   └── Icon.stories.mdx
│   ├── global_styles
│   ├── themes
│   ├── styles
│   ├── hooks
│   ├── stories
│   ├── types
│   └── index.ts
└── tools
    ├── svgr-component-template.js
    └── svgr-index-template.js

• [COMPONENT]: 컴포넌트 디렉토리 이름은 소문자, 구분자는 -로 (eg. toggle-switch) 작성합니다. 하위에는 관련 컴포넌트 파일과 해당 컴포넌트의 스토리북(*.stories.tsx) 파일을 포함합니다.
  • styles.ts, types.ts과 같은 파일을 포함할 수 있습니다.
  • 컴포넌트는 Named Exports 합니다.
  • 각 컴포넌트 디렉토리와 src 하위의 index.ts를 통해 export 합니다.
• global_styles: 리셋 스타일을 포함한 글로벌 스타일을 포함합니다.
  • 리셋 스타일을 위한 class 네임은 prefix로 pastel-ui-를 붙여줍니다.
• themes: color, typography와 같은 theme과 관련된 스타일, 스타일 토큰을 포함합니다.
• styles: 컴포넌트에 공용으로 사용할 스타일, 스타일 함수를 포함합니다.
• hooks: 커스텀 훅을 포함합니다.
• stories: 스토리북용 컴포넌트나 스타일, 컴포넌트 외의 스토리북 문서
• assets: svg 등의 에셋을 포함합니다.
• tools: svgr template 등의 라이브러리 제작을 위한 스크립트를 포함합니다.

아이콘 추가

⚠️ SVGR을 통해 svg파일을 리액트 컴포넌트로 제네레이트합니다. src/icons/generated 하위에서 직접 수정하지 말아주세요!

• assets/icons에 svg를 추가합니다.
• yarn svgr을 실행합니다.
• src/icons/generated 하위에 제네레이트된 아이콘 리액트 컴포넌트와 src/icons/generated/index.ts에 해당 컴포넌트의 export가 추가된 것을 확인합니다.
• yarn storybook을 실행하여 스토리북 내에서 Icon/Icons 메뉴로 이동하여 목록에서 해당 아이콘이 잘 추가되었는지 확입니다.

PR

• main을 base 브랜치로 한 작업 브랜치를 생성합니다.
• 배포 및 버전관리를 changeset을 통해 관리하고 있습니다. PR 생성시 changeset README.md 문서를 참고하여 파일을 생성해주세요.
• PR 및 마스터 머지 시에 chromatic으로 자동 배포됩니다.

배포

Github Action을 통해 자동으로 배포하고 있습니다.

changeset 파일을 포함한 PR이 main에 머지되면, Github Action 워크플로우가 동작되며, 버전 배포를 위한 Version Packages PR이 생성됩니다. 해당 PR을 머지하게 되면 Github Action의 워크플로우가 동작되며 패키지가 배포됩니다.

Github Action을 통한 배포가 불가능할 경우

npm 권한이 필요합니다. npm에 가입 후 권한을 요청해주세요.

• Version Packages PR이 생성되지 않았을 경우, 다음을 수행해 changelog와 package.json을 version bump를 포함한 작업 PR을 생성합니다.

yarn changeset version
git commit -m "chore: version bump"

• Version Packages PR이 생성되었을 경우 해당 PR을 머지하고 main을 최신 상태로 PULL 받아주세요.

yarn release