solved-ac / ui-react Goto Github PK

View Code? Open in Web Editor NEW

37.0 2.0 3.0 3.54 MB

React component library used by solved.ac

Home Page: https://solved-ac.github.io/ui-react/

JavaScript 1.57% HTML 1.18% TypeScript 96.99% CSS 0.25%

react react-component reactjs solved-ac

ui-react's Introduction

HEAVILY INCOMPLETE

Do not use this package in production! Almost every commit will be a breaking change.

@solved-ac/ui-react

React component library used by solved.ac

Install

yarn add @solved-ac/ui-react @emotion/react @emotion/styled

or, with npm:

npm install --save @solved-ac/ui-react @emotion/react @emotion/styled

Usage

<ThemeProvider theme={solvedThemes.light}>
  <SolvedGlobalStyles />
  <Component />
</ThemeProvider>

Contribute

Contributions are welcome!

License

MIT © shiftpsh

ui-react's People

Contributors

Stargazers

Watchers

Forkers

mu-hun socker210 ydk1104

ui-react's Issues

doc에서 잘못된 코드가 보입니다.

https://solved-ac.github.io/ui-react/ 에서 코드에서 컴포넌트의 이름이 제대로 보이지 않습니다.

storybookjs/storybook#20920 이 이슈인 것 같은데, 아직 확인은 못해서 확실하진 않네요

storybook 개발 환경 개선 건의

현재 빌드를 위해 두가지의 절차를 거치는게 번거롭게 느껴졌습니다:

루트 경로에서 microbundle 커맨드를 실행

example 경로로 이동해서 start-storybook 을 실행

개발 환경에서는 프로덕션 빌드를 건너 뛰고 바로 스토리북 개발 서버를 실행하는 사용하는 프로젝트 구조를 사용하면 어떨까요..?

아래와 같이 컴포넌트와 스토리 컴포넌트를 같은 경로에 두면 스토리북 개발 서버에서 개발 중인 컴포넌트의 빌드를 위임을 할 수 있습니다!

❯ ls src/components  
Button.tsx                Button.stories.tsx             Collapse.tsx              Collapse..stories.tsx  // (생략)

타입에 오타가 있습니다

#5 (fix: invalid return type of cssVariables function)에서 적용한 타입에 오타가 있습니다. 실수로 고치다가 뒤에 있던 중괄호 하나를 그대로 놔뒀나봅니다. 🤯

ui-react/src/utils/styles.ts

Line 40 in 7b3e77b

v: { [K in keyof T]: `var(${VariableName<P, K>})` }

ui-react/src/utils/styles.ts

Line 54 in 7b3e77b

) as { [K in keyof T]: `var(${VariableName<P, K>})` }

`cssVariables`의 반환 타입이 올바르지 않습니다.

ui-react/src/utils/styles.ts

Lines 7 to 19 in 609190f

 export const cssVariables = < 

 T extends { 

 readonly [key: string]: string | ((theme: SolvedTheme) => string) 

 }, 

 P extends string 

 >( 

 defaults: T, 

 prefix: P 

 ): { 

 vars: { [key in keyof T]: `--solvedac-${string}` } 

 v: { [key in keyof T]: `var(--solvedac-${P}-${string})` } 

 styles: (theme: SolvedTheme) => string 

 } => {

위 부분에서 v의 타입을 정확히 정의하기 위해서는 (MakeKebabCase<T> 같은 타입을 만든 후) `var(--solvedac-${MakeKebabCase<P>}-${string})`와 같이 정의되어야 합니다.

그 이유는 다음과 같습니다.

ui-react/src/utils/styles.ts

Lines 29 to 31 in 609190f

 const v = Object.fromEntries( 

 Object.entries(vars).map(([k, v]) => [k, `var(${v})`]) 

 ) as { [key in keyof T]: `var(--solvedac-${P}-${string})` }

v는 위 코드에 의해 결정되고, 각 값은 vars 오브젝트의 키 k에 대해 `var(${vars[k]})`입니다.

ui-react/src/utils/styles.ts

Lines 22 to 27 in 609190f

 const vars = Object.fromEntries( 

 names.map((name) => [ 

 name, 

 `--solvedac-${toCssName(prefix)}-${toCssName(name)}`, 

 ]) 

 ) as { [key in keyof T]: `--solvedac-${string}` }

vars는 위 코드에 의해 결정되고, 각 값은 names 배열의 원소 name에 대해 `--solvedac-${toCssName(prefix)}-${toCssName(name)}`입니다.

ui-react/src/utils/styles.ts

Lines 4 to 5 in 609190f

 export const toCssName = (name: string): string => 

 name.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).replace(/^-/, '')

toCssName은 위 코드와 같이 정의되고, 사이사이에 낀 알파벳 대문자를 소문자로 바꾸는 역할을 합니다.

따라서, toCssName(prefix)의 타입은 P라고 볼 수 없습니다.
반례로 P = 'exampleValue', name = string일 때 실제 값은 --solvedac-example-value-${string}일 것입니다.

solved-ac (번역 오류), 설정 > 계정 > Twitter 연동 > Twitter로 로그인 버튼

'설정' - '계정' - 'Twitter 연동' 에서 "Twitter로 로그인" 버튼이
브라우저 언어가 Korean일 때와 English일 때 둘 다 Korean으로 표시되는 이슈가 있습니다.

사용 브라우저 : Arc, Safari
이슈 시연 일시 : 23.05.02 11:27

[Korean]

[English]

	export const cssVariables = <
	T extends {
	readonly [key: string]: string \| ((theme: SolvedTheme) => string)
	},
	P extends string
	>(
	defaults: T,
	prefix: P
	): {
	vars: { [key in keyof T]: `--solvedac-${string}` }
	v: { [key in keyof T]: `var(--solvedac-${P}-${string})` }
	styles: (theme: SolvedTheme) => string
	} => {

	const v = Object.fromEntries(
	Object.entries(vars).map(([k, v]) => [k, `var(${v})`])
	) as { [key in keyof T]: `var(--solvedac-${P}-${string})` }

	const vars = Object.fromEntries(
	names.map((name) => [
	name,
	`--solvedac-${toCssName(prefix)}-${toCssName(name)}`,
	])
	) as { [key in keyof T]: `--solvedac-${string}` }

	export const toCssName = (name: string): string =>
	name.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).replace(/^-/, '')

solved-ac / ui-react Goto Github PK

ui-react's Introduction

HEAVILY INCOMPLETE

@solved-ac/ui-react

Install

Usage

Contribute

License

ui-react's People

Contributors

Stargazers

Watchers

Forkers

ui-react's Issues

Recommend Projects

Recommend Topics

Recommend Org