@koreacreditdata/feather v0.8.23-merlin

Feather

• Figma

Requirement

• node@14
• yarn

Development

• (vscode 사용자의 경우) clone후 TypeScript: Select TypeScript Version...으로 workspace의 typescript binary를 선택
  • typescript-plugin-css-modules가 import된 css modules 파일에서 정의한 className의 key를 제대로 추론하기 위해서 작업영역의 typescript version을 사용해야 합니다.

# dependencies 설치
yarn

# start
yarn feather storybook

Deploy

• Storybook
  • 조건
    • master 브랜치 push
  • 작업내용
    • github action을 사용해서 storybook을 build하고 feather.kcd.co.kr 에 배포 진행
    • ./github/workflows/storybook.yml 참조

• npm

  • 조건

    • v* 조건에 맞는 git tag 추가하여 push

    # feather package 폴더로 이동
    cd packages/feather
    
    # package.json의 version을 올리고 tag를 생성
    npm version [major|minor|patch]
    git add .
    git commit -m [DEPLOY_VERSION]
    git tag [DEPLOY_VERSION]
    
    # 태그와 함께 push
    git push origin [DEPLOY_VERSION]
    
    # example
    cd packages/feather
    npm version patch # prints v0.1.7
    git add .
    git commit -m v0.1.7
    git tag v0.1.7
    git push origin v0.1.7
    git push origin master

  • 작업내용

    • github action을 사용해서 npm 배포 진행
    • ./github/workflows/publish.yml 참조

Rules

개발시 아래 규칙에 따라 코딩합니다.

1. StyleableProps

1.1 모든 컴포넌트의 Props는 StyleableProps을 intersection 타입으로 결합한다.

type Props = StyleableProps & { prop1: string }

function Component({ prop1, className, style }: Props) { /* ... */ }

1.2 정의할 Props가 없을 경우 StyleableProps를 기본 타입으로 선언한다.

function Component({ ...props }: StyleableProps) { /* ... */ }

1.3 className, style은 컴포넌트 최상단 element의 속성으로 할당한다.

function Component({ className, style, ...props }: Props) {
  return (
    <ParentComp className={className} style={style}>
      <ChildComp {...props} />
    </ParentComp>
  );
}

2. 컴포넌트 네이밍 규칙

• 부모 컴포넌트 이름을 짓기 애매할땐, 레퍼런스(React suite)에서 참고한다.

• 컴포넌트의 기능은 같지만, style이 많이 다른 경우

  • variant + 최상위 폴더명

    예)

    • List + Panel = ListPanel
    • Link + Button = LinkButton
    • FinanceInstrument + Cell = FinanceInstrumentCell

• 컴포넌트를 이루는 하나의 구성요소일 경우

  • 최상위 폴더명 + 구조적인 하위 분류

    예)

    • Cell + Header = CellHeader

    2depth 이상의 sub-component인 경우)

    • Cell > CellHeader > CellCountHeader

• 하위 컴포넌트는 최대 3 depth까지 허용한다.

3. 폴더링 규칙

• Cell 폴더링이 되어 있는 것처럼 각 폴더안에 구성요소는 따로 폴더링을 한다.
• 다만, 최상위 폴더의 가장 default가 되는 컴포넌트는 폴더링하지 않는다.

├── Cell/
│   ├── CellAction/
│   ├── ...
│   │── Cell.module.css
│   │── Cell.stories.tsx
│   │── Cell.tsx
│   └── index.ts
...

• 2depth 이상 깊어지는 경우, (e.g Cell > CellAction > CellAccordionAction, CellLinkAction)

  CellAction 을 default로 두어 CellAccordionAction 과 CellLinkAction 이 파생되었기 때문에 아래와 같은 구조를 갖는다.

├── Cell/
│   ├── CellAction/
│   │   ├── CellAccordionAction/
│   │   ├── CellLinkAction/
│   │   ├── CellAction.module.css
│   │   ├── CellAction.stories.tsx
│   │   └── CellAction.tsx
...

4. story 및 export 규칙

• 외부에서 사용하고자 하는 모든 컴포넌트는 아무리 작을지라도 story를 추가하고, export 한다.

  여백만 잡혀서 story에 잘 안보일 것 같으면, 내부에 더미 텍스트를 넣어서라도 추가한다.

• 단일 컴포넌트인 경우, storyName을 지정하여 단일 story로 빼낸다.

  • 스토리Template.storyName = '컴포넌트명'

• variation을 보여주고 싶은 경우, 하나 story안에서 여러가지 경우를 렌더링한다.

  • Button 예시

• index.ts 파일은 최상위 컴포넌트 폴더에서 하나로만 둔다.

├── Cell/
│   ├── CellAction/
│   ├── ...
│   └── index.ts // Cell, CellAction 등 하위 컴포넌트의 export까지 해당 index 파일에서 관리
...

5. stories.tsx 파일 내 default Meta 작성법 추천

// Badge.stories.tsx 예시
export default {
  title: '최상위폴더명/상위폴더명/컴포넌트명',
  component: Badge(보여주고 싶은 현재 컴포넌트),
  args: { // defaultValue 지정 용도
    text: '레이블',
    color: BADGE_COLOR.GRAY, // defaultValue 지정. (열거형 타입이라면 이처럼 enum 형태로 작성하기)
    ...
  },
  argTypes: { // control 옵션 지정 용도
    text: {
      ...
    },
    color: {
      options: Object.values(BADGE_COLOR), // enum값을 연결하여 실제 값이 변경되더라도 story에서 바로 동기화 가능하도록 함.
      control: {
        type: 'radio', // type을 지정해주지 않으면 storybook의 default control type인 text input이 나타난다. 열거형 타입이라면 radio나 select 를 지정하여 사용자가 선택 가능하게 한다.
        // options는 이 위치에 넣지 말기. (storybook 7.0이후 deprecated될 예정)
      },
    },
    ...
  },
  parameters: {
    control: [...]
    // args로 지정하는 것 외로 contorls에 불필요한 (e.g. key나 ref) props가 나타나는 경우 추가.
    // args나 argTypes가 지정되지 않았는데 parameters에만 추가한다고 controls에 나오지않음. 즉, 불필요한게 controls에 나올때 줄이는 용도이고 추가로 더 나오게 하려면 무조건 args로 추가해야함
  }
} as Meta;

이상의 규칙들은 대부분 eslint와 featherlint로 보장되지만 자동화하기 어려운 부분은 신경써서 개발해야 합니다.

참고 1: featherlint가 pre-commit 단계에서 검사하는 rule

• component index 파일이 존재하는 컴포넌트를 src/index.ts 에서 export하고 있는지
• 외부에 노출되는(i.e., component index 파일에서 export하는) 컴포넌트들에 대한 스토리가 작성되어 있는지
• 외부에 노출되는 컴포넌트에서 StyleableProps를 사용하는지
• 단, featherlint-disable 이 명시되어 있는 파일은 이 룰에서 제외

참고 2: 구조 개선안 wiki 작성 문서

.vscode

기본 설정은 https://github.com/koreacreditdata/guides 참고

feather 와 같은 모노레포와 같은 구조에선 아래와 같이 config path 를 직접 지정해주어야 합니다.

settings.json

{
  "eslint.nodePath": "./node_modules",
  "eslint.workingDirectories": [ "./packages/feather" ],
  "stylelint.configFile": "./packages/feather/.stylelintrc.json"
}