색상 코드를 사용처에서 그대로 사용하면 디자인이 어긋나는 경우가 있기 때문에, Theme 에 palette 를 주입해서 color set 을 만들고 이를 쓰도록 변경.
예를 들어 텍스트의 경우 black70 등의 색상을 그대로 사용하지 않고, content-color-1 같은 형식으로 사용하게 해야 할 듯

추후 Design System 이름이 정해지면 해당 이름에 '-react' postfix 붙여서 이름 정하기?

ex) Carbon Design System -> @channel.io/carbon-react

// 기본 component Props 를 기반으로 prop 정의
interface TextProps extends ComponentProps {
	...
}

// render 에 해당하는 함수, ReactNode 반환
const TextView: React.ReactNode = (props: TextProps) => {
	...
}

// 실제 컴포넌트가 반환되는 지점
export default createComponent({
	displayName: 'Text',
	// 등등, 컴포넌트에 기본적으로 setting 되어야 하는 잡다한 것들을 전부 여기에 집어넣는다. render 는 필수로, props 를 받고 react Node 로 변환하는 부분.
	render: TextView,
})

interface CreateComponentConfig {
	...
	render: (props: ComponentProps) => any
}

// 몇가지 옵션들을 받아서 component 를 만드는 factory
// 각 컴포넌트에서 반복되서 작업될 옵션들 (display name을 비롯)을 여기서 한 번에 처리한다.
function createComponent({
	displayName,
	render,
}: CreateComponentConfig) {
	const ChannelComponent = () => {
		return render({...})
	}

	ChannelComponent.create = createShortHand() // 아래에서 설명함

	ChannelComponent.displayName = displayName

	return ChannelComponent
}

Fluent 의 독특했던 점은 Component 에 create 라는 method 를 따로 붙여주어서, JSX 없이 코드를 작성할 수 있게 함. 이것은 Spreading Panel 이나 Input Group, DropDown 등 내부에 다른 컴포넌트를 포함해야 하는 컴포넌트의 코드를 작성할 때 readability 측면에서 유리하지 않을까 싶음.

// JSX
const InternalContent = <Box {...props} />

// Fluent style
const InternalContent = Box.create({...})

Desk 에서 사용하고 있는 SpreadingPanel 의 호환. (Large Panel)
유저챗, 팀챗 우측 패널 등도 포함 가능. (Small Panel)

두 가지의 Panel 이 있을 수 있다. Card Base

https://github.com/channel-io/eslint-config-channel

현재 상황

문제점

어떻게 개선할 수 있는지

Reference

현재상황

재현 방법

기대한 동작

실제 동작

Reference

현재상황

재현 방법

https://desk.channel.io/root/user-chats/혜진-5fa9e84e74337db51c31

기대한 동작

실제 동작

Reference

현재 상황

문제점

어떻게 개선할 수 있는지

Reference

Dynamic Overlay Base

• Theme
• Elevation
• Border
• Transition
• Radius
• Typography

현재상황

재현 방법

기대한 동작

실제 동작

Reference

현재 상황

문제점

어떻게 개선할 수 있는지

Reference

Publish storybook on github papges

현재 상황

문제점

어떻게 개선할 수 있는지

Reference

현재 상황

사용처에서 Icon에 따로 hover시 color를 지정해주는 경우가 많음

문제점

추후 다크모드 적용시 Icon별 hover style이 있는지 확인하여 지정해줘야 하는 문제가 있어서 복잡함

어떻게 개선할 수 있는지

Icon에 hoverColor 추가

Reference

svg static file serving 의 까다로움으로 인해, 좋은 방법을 리서치하고 추후 개발할 것

현재 상황

문제점

어떻게 개선할 수 있는지

Reference

데스크 전용 레이아웃 컴포넌트 추가
https://www.notion.so/channelio/08938107552d4ac5ad50cd775f2a1db4 참조

Related: #108
Expansion Panel 1개 이상을 묶는 개념의 컴포넌트.

현재상황

재현 방법

모든 아이콘 tsx 파일에 대해 prop type 이 SVGSVGElement 라서 marginTop, marginBottom 등이 없음. 이로 인해 에러 발생

기대한 동작

실제 동작

Reference

현재 상황

Colors 의 property 이름을 임의로 정하고 있음

문제점

어떻게 개선할 수 있는지

디자인 팀과 상의하여, primaryActiveColor 등 네이밍 컨벤션과 팔레트 바인딩을 정해야 함.

Reference

현재의 react-tooltip 이외에 다른 툴팁 라이브러리를 리서치해야 합니다.
관련 리서치 문서:

https://www.notion.so/channelio/Tooltip-c91fb48318a54a9d8d864d7cda286735

현재 상황

문제점

어떻게 개선할 수 있는지

Reference

팀챗, 유저챗 우측 패널, ExpansionPanel #108 등에서 사용되는 Wrapper component.

현재상황

재현 방법

일회성 메시지 에디터 운영 패널에서 전송 설정 하기 선택 영역 클릭

기대한 동작

글씨만큼만 너비 설정

실제 동작

일회성 메시지 에디터 운영 패널에서 전송 설정 하기 선택 영역이 오른쪽 빈 공간까지 잡힘

Reference

최근 emotion 의 사용 추세가 늘어나는 듯 합니다. 번들 사이즈가 좀 더 작으며 typescript 라는 장점이 있습니다. 사용법은 거의 차이나지 않고 emotion 쪽이 좀 더 유연하게 사용할 수 있어서 emotion 을 사용해보면 어떨까 합니다.

https://www.npmtrends.com/styled-components-vs-@emotion/core

+)
styled-components 도 DefinitlyTyped 가 제공되고는 있습니다만 dependency 에 약간 문제가 있습니다 (@types/react-native 가 @types/styled-components 의 peerDependencies 가 아닌 dependencies 로 분류되어 있음)

현재 상황

문제점

어떻게 개선할 수 있는지

Reference

http://airbnb.io/lunar/?path=/story/core-divider--standard-divider

모든 컴포넌트(Layout, Color 등은 제외)의 공통 구조를 정의합시다.

참고:
https://github.com/microsoft/fluentui/tree/master/packages/foundation

현재 상황

현재는 고객 연락처에서만 사용중임

문제점

어떻게 개선할 수 있는지

Reference

• npm version check
• typecheck
• lint check
• jest (test code)

현재 상황

Overlay 는 지정된 위치에 고정으로 렌더링됨

문제점

Container 속성에 따라 일부분이 가려지기도 함

어떻게 개선할 수 있는지

container 와의 여백을 계산해서 dynamic 하게 화면 안쪽으로 렌더링 되도록 설정

Reference