dramancompany / remember-ui Goto Github PK

View Code? Open in Web Editor NEW

8.0 13.0 4.0 73.49 MB

Remember Web UI Components

License: MIT License

JavaScript 1.29% TypeScript 41.79% HTML 56.91%

remember-ui's Introduction

Remember UI

리멤버 웹의 (구)디자인 시스템

personal access token 발급

github -> settings -> developer settings ->< personal access tokens에서 read:packages 권한이 있는 token 발급
프로젝트 내 .npmrc 파일 생성 후 아래 내용 작성

//npm.pkg.github.com/:_authToken=[발급받은 토큰]
@dramancompany:registry=https://npm.pkg.github.com/

Build

$ yarn build
# 아래 명령어로 빌드 하면,
# 빌드 후 rollup-plugin-visualizer 를 통해 생성된 html이 열림
$ yarn build:visualize

Publish

배포시 dist 폴더 내의 내용을 root로 변환하여 배포 하고자 별도 스크립트로 배포하는 방식임

# 최신 버전 배포
$ yarn pub
# 베타 버전 배포
$ yarn pub:beta

스토리북 GitHub Pages 배포

master 브랜치의 /docs의 변동사항이 생기면 자동으로 배포 트리거
pr 리뷰가 완료 되면 Storybook docs build를 진행한 후 master 브랜치에 머지 한다.

# 스토리북 빌드
$ build-storybook

install

$ yarn add @dramancompany/remember-ui

rui

리멤버 웹의 디자인 시스템

remember-ui's People

Contributors

Stargazers

Watchers

Forkers

kyusungdev p0rygon hyesech baboleevan

remember-ui's Issues

styled-components 종속성 제거

https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library

webOnly breack-point 기준 픽셀 769px로 변경

mobileOnly max-width: 768px
webOnly min-width: 768px
로 설정 되어있어 768px에서 모바일 분기가 되지 않고 pc로 분기가 되어버리는 문제가 있음
따라서 webOnly breack-point 기준 픽셀을 769px로 변경해야함

deprecated 되어야 할 코드 정리

아예 그냥 deprecated 되어도 되는 것

Chip
Container
BaseButton

새로운 디자인으로 대체되어 언젠간 deprecated 되어야하는 것

ConfirmModal -> MessageModal로 교체
DesignedModal -> 디자인팀에서 전체적으로 교체하려고 준비중
Career Typography -> 새로운 Typography로 교체 필요

remember-ui에 있을 필요 없는데 있는 것

TopButton
Accordian
ProgressModal -> career 한정으로만 사용하고 다른데서는 안씀

있는데 잘 안쓰는 것 (각 프로젝트에서 이미 내부적으로 구현해서 쓴다거나)

CustomButton
LinkButton
MoreButton

가능하면 deprecated 되었으면 하는 것

font mixin -> color 기본 값 이슈

토스트 관련 UI 및 animation 추가

각 프로젝트에 개별로 구현되어있는 토스트 관련된 것들을 remember-ui로 추가한다

color에 css-variable 사용 검토

textarea 컴포넌트에 없는 속성이 props로 들어가 있음

validate 속성 삭제 필요
https://github.com/dramancompany/remember-ui/blob/060798c6dd58361015d3fe7c324a700270e47126/src/components/Input/Textarea/index.tsx

프로젝트 공용으로 사용하는 icon들 remember-ui 내부로 모아두기

icon(Refinement) 문서 참조

pageSelector 다음페이지 없을때(우측 화살표 disabled 될때)도 클릭이됨

https://dramancompany.atlassian.net/browse/PCWEB-7071

2022-02-24.2.45.19.mov

remember-ui import path improve

현재 color, mixin, component, typo 이렇게 총 4가지의 경우가 있는데 이를 나누지않고 import 해서 사용하고 있다
아래와 같이 개선하는것은 어떨지?

// As-is
import { yellow100, webOnly, NewBaseButton } from "remember-ui";

// To-be
import { yellow100 } from "remember-ui/color";
import { webOnly } from "remember-ui/mixin";
import { NewBaseButton } from "remember-ui/component";

Tippy js에서 props name warning 뜨는 것 수정 필요

Docz 걷어내고 Storybook 도입

Docz의 문제점

배포가 main branch에 되어있어서 실제 코드 변경과 document파일이 섞여서 PR보기도 힘들고, 컴포넌트 변경 히스토리 보기에도 불편함
버그가 있어서 새로고침하면 컴포넌트 css가 안먹음

다른 대안?

Docz를 최신화 해도 되고
Storybook을 도입해도되고
어쨋든 조사가 필요함

멀티라인 ellipsis mixin 추가

/src/core/GlobalStyle/mixin.js 파일에 멀티라인 ellipsis 추가

export const multiLineEllipsis = ( 
  line = 2
) => css`
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: ${line};
`;