@orioncactuscorp/ui 1.12.0 → 1.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2408 -0
- package/README.md +13 -11
- package/dist/components/Accordion/Accordion.css +1 -1
- package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
- package/dist/components/Button/Button.css +1 -1
- package/dist/components/Cell/Cell.css +1 -1
- package/dist/styles.css +4 -4
- package/docs/api-conventions.md +90 -0
- package/package.json +3 -2
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# Component API Naming Conventions
|
|
2
|
+
|
|
3
|
+
`@orioncactuscorp/ui`는 컴포넌트의 시각적 선택지를 `variant`,
|
|
4
|
+
`appearance`, `size`로 일관되게 표현합니다. 이 규칙은 처음 사용하는
|
|
5
|
+
컴포넌트에서도 prop의 역할을 예측할 수 있게 하는 공개 API 계약입니다.
|
|
6
|
+
|
|
7
|
+
## 역할은 계약, 시각 값은 기본값
|
|
8
|
+
|
|
9
|
+
prop 이름과 TypeScript에 선언된 선택지는 버전 관리되는 계약입니다. 반면 각
|
|
10
|
+
선택지가 사용하는 색, 간격, 크기 같은 구체적인 시각 값은 디자인 시스템의
|
|
11
|
+
기본값입니다. 지원되는 token, component contract 변수, selector 계약을 통해
|
|
12
|
+
consumer가 조정할 수 있으며, 디자인 시스템 정책에 따라 변경될 수 있습니다.
|
|
13
|
+
|
|
14
|
+
지원되는 선택지의 정확한 목록은 각 컴포넌트의 TypeScript 선언을 기준으로
|
|
15
|
+
확인하세요. 모든 컴포넌트가 아래 축을 전부 제공하지는 않습니다.
|
|
16
|
+
|
|
17
|
+
## `variant`: 하나의 시각·표현 축
|
|
18
|
+
|
|
19
|
+
컴포넌트에 열거형 시각 또는 표현 축이 하나라면 `variant`를 사용합니다.
|
|
20
|
+
`variant`가 나타내는 구체적인 역할은 컴포넌트에 따라 의미·색, 강조 강도,
|
|
21
|
+
형태, surface 표현, layout 표현, slot content 종류 등이 될 수 있습니다.
|
|
22
|
+
|
|
23
|
+
상태, 간격, 동작처럼 독립된 개념은 `variant`에 합치지 않고 별도 prop으로
|
|
24
|
+
표현합니다.
|
|
25
|
+
|
|
26
|
+
## `appearance` + `variant`: 독립된 두 축
|
|
27
|
+
|
|
28
|
+
형태 또는 surface와 의미 또는 색을 각각 선택해야 하는 컴포넌트는 두 축을
|
|
29
|
+
분리합니다.
|
|
30
|
+
|
|
31
|
+
- `appearance`: 형태 또는 surface 처리
|
|
32
|
+
- `variant`: 의미 또는 색 의도
|
|
33
|
+
|
|
34
|
+
`Button`이 대표적인 예입니다. `appearance`는 `solid | outlined`, `variant`는
|
|
35
|
+
`default | primary | secondary | assistive`를 제공합니다.
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
<Button appearance='solid' variant='primary'>
|
|
39
|
+
저장
|
|
40
|
+
</Button>
|
|
41
|
+
|
|
42
|
+
<Button appearance='outlined' variant='assistive'>
|
|
43
|
+
도움말
|
|
44
|
+
</Button>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
이 분리는 형태와 의미를 하나의 조합 이름으로 합치지 않고 각 역할을 독립적으로
|
|
48
|
+
읽고 선택할 수 있게 합니다.
|
|
49
|
+
|
|
50
|
+
## `size`: 표준 크기 순서의 부분집합
|
|
51
|
+
|
|
52
|
+
named size의 표준 순서는 다음과 같습니다.
|
|
53
|
+
|
|
54
|
+
```text
|
|
55
|
+
xsmall < small < medium < large
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
각 컴포넌트는 실제로 지원하는 크기만 부분집합으로 제공합니다. 예를 들어 어떤
|
|
59
|
+
컴포넌트가 `small | medium`만 제공하더라도 사용하지 않는 `xsmall`이나 `large`를
|
|
60
|
+
대칭성을 위해 추가하지 않습니다. TypeScript union의 선언 순서는 별도 계약이
|
|
61
|
+
아니며, 크기 비교에는 위 순서를 사용합니다.
|
|
62
|
+
|
|
63
|
+
### Named size 밖의 예외
|
|
64
|
+
|
|
65
|
+
named preset이 아니라 외부 문맥이나 직접 지정한 치수로 크기를 정해야 할 때만
|
|
66
|
+
다음과 같은 값을 허용합니다.
|
|
67
|
+
|
|
68
|
+
- `inherit`: owner의 typography·크기를 상속
|
|
69
|
+
- `custom`: component CSS가 치수를 결정
|
|
70
|
+
- 숫자 또는 자유 형식 값: primitive나 icon-sized control에 직접 치수를 전달
|
|
71
|
+
|
|
72
|
+
`TextButton`은 owner 안에서 자연스럽게 조합할 수 있도록 `size='inherit'`을
|
|
73
|
+
제공합니다. 색을 상속하는 `variant='inherit'`은 size가 아닌 variant 축의
|
|
74
|
+
선택지입니다.
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
<TextButton variant='inherit' size='inherit'>
|
|
78
|
+
자세히 보기
|
|
79
|
+
</TextButton>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
새 named size가 필요할 때 `tiny`, `mini` 같은 별도 척도를 만들지 않습니다.
|
|
83
|
+
직접·custom·상속 크기가 필요한 경우에는 해당 예외의 목적을 컴포넌트 API에
|
|
84
|
+
문서화합니다.
|
|
85
|
+
|
|
86
|
+
## 현재 호환성 예외: Badge `tiny`
|
|
87
|
+
|
|
88
|
+
`Badge`의 `size='tiny'`는 표준 named size 밖에 있는 현행 호환성 예외입니다.
|
|
89
|
+
현재 public API는 유지하며, 다음 major 릴리스에서 `xsmall`로 정규화할
|
|
90
|
+
예정입니다. 변경 시 migration note로 안내합니다.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orioncactuscorp/ui",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.2",
|
|
4
4
|
"description": "orioncactus UI foundations and core primitives",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"dist",
|
|
33
33
|
"src/scss",
|
|
34
34
|
"docs",
|
|
35
|
+
"CHANGELOG.md",
|
|
35
36
|
"README.md",
|
|
36
37
|
"LICENSE"
|
|
37
38
|
],
|
|
@@ -125,7 +126,7 @@
|
|
|
125
126
|
"vitest": "^3.2.4"
|
|
126
127
|
},
|
|
127
128
|
"dependencies": {
|
|
128
|
-
"@orioncactuscorp/icons": "^1.
|
|
129
|
+
"@orioncactuscorp/icons": "^1.12.2",
|
|
129
130
|
"@base-ui-components/react": "^1.0.0-rc.0"
|
|
130
131
|
}
|
|
131
132
|
}
|