@conscience-technology/ctds 0.3.2 → 0.3.4
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/assets/components/Checkbox/Checkbox.module.css +1 -0
- package/assets/components/MenuItem/MenuItem.module.css +30 -5
- package/assets/components/MenuItem/MenuItem.tsx +86 -5
- package/assets/components/Radio/Radio.module.css +1 -0
- package/assets/components/Sidebar/Sidebar.tsx +4 -1
- package/assets/components/_data.ts +3 -7
- package/assets/components/index.ts +0 -1
- package/assets/prompts/components/menu-item.md +1 -0
- package/package.json +1 -1
- package/assets/components/Accordion/Accordion.module.css +0 -247
- package/assets/components/Accordion/Accordion.tsx +0 -207
- package/assets/components/Accordion/index.ts +0 -8
- package/assets/components/CommandPalette/CommandPalette.module.css +0 -203
- package/assets/components/CommandPalette/CommandPalette.tsx +0 -262
- package/assets/components/CommandPalette/index.ts +0 -9
- package/assets/components/CommandPalette/useCommandPaletteHotkey.ts +0 -49
- package/assets/components/EventCard/EventCard.module.css +0 -133
- package/assets/components/EventCard/EventCard.tsx +0 -149
- package/assets/components/EventCard/index.ts +0 -2
- package/assets/prompts/components/accordion.md +0 -126
- package/assets/prompts/components/command-palette.md +0 -148
- package/assets/prompts/components/event-card.md +0 -78
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
# EventCard
|
|
2
|
-
|
|
3
|
-
### 원칙
|
|
4
|
-
리스트에 쌓이는 **하나의 일정** 아이템. 좌측 날짜 블록(큰 숫자 + 요일) · 세로 hairline · 우측 제목 + status Badge + meta 라인의 고정 anatomy. 캘린더 셀 안 색 바는 [[components/event-chip]]의 몫이고, 이 컴포넌트는 "다가오는 일정 리스트" "결재/행사 리스트"처럼 시간을 축으로 수직 나열되는 자리의 1 레코드.
|
|
5
|
-
|
|
6
|
-
날짜 숫자는 2자리 기준으로 트랙이 고정되어 리스트가 세로로 쌓여도 제목 시작점이 흔들리지 않는다. status는 enum 4종(upcoming/pending/completed/cancelled)으로 받아 [[components/badge]] soft + 상태색으로 자동 매핑 — 호출부가 Badge를 직접 조립하지 않는다.
|
|
7
|
-
|
|
8
|
-
### Do
|
|
9
|
-
- 한 아이템엔 **한 일정**. `date` 하나 + `title` 하나 + 선택적 `status` + `meta[]`.
|
|
10
|
-
- status는 enum 4종으로 넘긴다 — 자유 색/텍스트 Badge 조립 금지. 라벨만 override 필요하면 `statusLabel`.
|
|
11
|
-
- 메타 라인 아이템 사이는 **짧은 세로 hairline**으로 분리 (bullet·중점·|·하이픈 금지).
|
|
12
|
-
- 행 전체를 라우팅으로 쓰려면 `href` — hover bg + focus ring 자동.
|
|
13
|
-
- 리스트로 쌓을 때 세로 gap은 `--space-2` ~ `--space-3`. 카드 자체가 chrome(border+radius+padding)을 들고 있어 부모는 수직 flex만.
|
|
14
|
-
|
|
15
|
-
### Don't
|
|
16
|
-
- [HARD] 안에 다시 Card chrome(추가 border/shadow) 쌓지 않는다 — "리스트 안 카드 안 카드"가 되어 depth가 깨진다.
|
|
17
|
-
- [HARD] status를 자유 색으로 덮어쓰지 않는다. "좋음=green" 같은 가치판단 반전 금지. 색은 **상태 enum**이 결정.
|
|
18
|
-
- [HARD] 날짜 요일 라벨을 UPPERCASE로 강제하지 않는다 — 소문자 유지("fri", "sun"). [[feedback_no_uppercase]].
|
|
19
|
-
- [HARD] 메타 사이 bullet/중점/`|`/em-dash 삽입 금지. 짧은 세로 hairline만.
|
|
20
|
-
- 날짜 숫자 외의 자리에 큰 숫자(가격·카운트) 추가 금지 — 좌측 트랙은 "날짜" 자리 하나.
|
|
21
|
-
- 2줄 이상 서술/본문을 title에 넣지 않는다 — 1줄 ellipsis. 본문이 길면 상세 뷰로.
|
|
22
|
-
- 날짜 블록을 Avatar/Icon으로 대체하지 않는다 — 그러면 이건 [[components/list-item]].
|
|
23
|
-
|
|
24
|
-
### Fallback
|
|
25
|
-
`status` 애매하면 생략(Badge 안 뜸). `statusLabel`은 enum 기본 라벨(Upcoming/Pending/Completed/Cancelled) 사용. 라우팅 자리 아니면 `href` 생략.
|
|
26
|
-
|
|
27
|
-
### 관련
|
|
28
|
-
- [[components/event-chip]] — 혼동 금지. EventChip은 캘린더 셀 안 색 바, EventCard는 리스트 카드.
|
|
29
|
-
- [[components/list-item]] — 날짜 자리에 Avatar/Icon이 오는 "누가 뭘 했다" 피드는 ListItem.
|
|
30
|
-
- [[components/metric-card]] — 같은 Card chrome 규칙(그림자 금지, line 기본).
|
|
31
|
-
- [[components/badge]] — status 매핑은 Badge soft + status.
|
|
32
|
-
- [[components/icon]] — meta 아이콘.
|
|
33
|
-
- [[tokens/color]] — `--bg` · `--border` · `--fg-strong` · `--fg-muted` · `--hover`.
|
|
34
|
-
- [[axes/density]] — compact에선 세로 padding 줄어 리스트가 조밀해짐.
|
|
35
|
-
- [[feedback_no_bullet_separator]] — meta 사이 분리 규칙.
|
|
36
|
-
- [[feedback_no_uppercase]] — 요일 소문자 유지.
|
|
37
|
-
- [[feedback_font_weight_cap]] — title은 sm이라 medium, day는 2xl이라 semibold.
|
|
38
|
-
|
|
39
|
-
### Props 시그니처
|
|
40
|
-
```tsx
|
|
41
|
-
<EventCard
|
|
42
|
-
date={Date} // required — 날짜 블록으로 자동 포맷
|
|
43
|
-
title={ReactNode} // required — 1줄 ellipsis
|
|
44
|
-
status="upcoming | pending | completed | cancelled" // Badge soft + 상태색 자동
|
|
45
|
-
statusLabel={ReactNode} // 기본 라벨 override (ex: 한국어 "예정")
|
|
46
|
-
meta={{ icon?: IconName; label: ReactNode }[]} // 메타 라인. 사이는 세로 hairline으로 자동 분리
|
|
47
|
-
href={string} // 있으면 <a> + hover/focus ring 활성
|
|
48
|
-
/>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
### Variant 매트릭스
|
|
52
|
-
variant 자체는 없음. 상태는 `status` enum이 담당.
|
|
53
|
-
|
|
54
|
-
| status | Badge status | 기본 라벨 | 쓰임 |
|
|
55
|
-
|---|---|---|---|
|
|
56
|
-
| `upcoming` | `info` | Upcoming | 다가올 일정 (기본 info 톤) |
|
|
57
|
-
| `pending` | `warning` | Pending | 승인·확정 대기 |
|
|
58
|
-
| `completed` | `success` | Completed | 종료·완료 |
|
|
59
|
-
| `cancelled` | `destructive` | Cancelled | 취소·무산 |
|
|
60
|
-
|
|
61
|
-
### 조합 예시
|
|
62
|
-
```tsx
|
|
63
|
-
<section>
|
|
64
|
-
{events.map((e) => (
|
|
65
|
-
<EventCard
|
|
66
|
-
key={e.id}
|
|
67
|
-
href={`/events/${e.id}`}
|
|
68
|
-
date={e.date}
|
|
69
|
-
title={e.title}
|
|
70
|
-
status={e.status}
|
|
71
|
-
meta={[
|
|
72
|
-
{ icon: "calendar-dots", label: e.when },
|
|
73
|
-
{ icon: "compass", label: e.where },
|
|
74
|
-
]}
|
|
75
|
-
/>
|
|
76
|
-
))}
|
|
77
|
-
</section>
|
|
78
|
-
```
|