@uniai-fe/uds-primitives 0.1.0 → 0.1.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/README.md +8 -0
- package/dist/styles.css +3 -3
- package/package.json +8 -8
- package/src/components/badge/styles/index.scss +1 -1
- package/src/components/button/styles/button.scss +1 -1
- package/src/components/checkbox/styles/index.scss +1 -1
- package/src/components/chip/styles/index.scss +1 -1
- package/src/components/divider/styles/divider.scss +2 -2
- package/src/components/drawer/styles/index.scss +2 -2
- package/src/components/input/styles/index.scss +1 -1
- package/src/components/navigation/styles/index.scss +1 -1
- package/src/components/radio/styles/index.scss +1 -1
package/README.md
CHANGED
|
@@ -127,6 +127,14 @@ import "@uniai-fe/uds-primitives/css";
|
|
|
127
127
|
|
|
128
128
|
ThemeProvider는 CSS를 import하지 않으므로 foundation/primitives styles를 앱 루트에서 1회만 로드하면 중복 없이 토큰 매핑이 적용된다. Provider 자체는 foundation 패키지(`@uniai-fe/uds-foundation/provider`)에서만 export된다(one-source 규칙).
|
|
129
129
|
|
|
130
|
+
> modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-primitives/src/index.scss`를 직접 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-primitives/css` 엔트리만 사용한다.
|
|
131
|
+
|
|
132
|
+
### 토큰 스코프 & ThemeProvider
|
|
133
|
+
|
|
134
|
+
- primitives 소스 SCSS는 모든 디자인 토큰을 `:root`에 선언하고, 빌드 시 `scripts/merge-theme-root.mjs`가 이 토큰 블록을 하나의 `:root { ... }`로 합쳐 중복 선언을 제거한다.
|
|
135
|
+
- ThemeProvider가 루트 DOM에 `.uds-theme-root` 클래스를 주입하므로, 서비스 앱은 ThemeProvider를 layout 최상단에 배치한 뒤 `@uniai-fe/uds-foundation/css` → `@uniai-fe/uds-primitives/css` 순으로 import하면 된다.
|
|
136
|
+
- modules 레포(Storybook 등)는 SCSS 원본을 직접 import하지만 외부 소비자는 CSS 엔트리만 사용한다는 정책을 README/CODEX-RULES에 명시해둔다.
|
|
137
|
+
|
|
130
138
|
## Next.js 통합 예시
|
|
131
139
|
|
|
132
140
|
Next.js 15(app router 기준)에서 primitives를 사용하는 최소 구성 예시는 다음과 같다.
|
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
|
|
2
|
+
:root {
|
|
3
3
|
--theme-badge-height-xsmall: var(--theme-size-small-1, 20px);
|
|
4
4
|
--theme-badge-height-small: var(--theme-size-small-2, 24px);
|
|
5
5
|
--theme-badge-padding-inline-xsmall: var(--spacing-padding-3, 6px);
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
--drawer-radius-medium: var(--theme-radius-large-1);
|
|
163
163
|
--drawer-body-color: var(--color-label-standard);
|
|
164
164
|
--drawer-title-color: var(--color-label-strong);
|
|
165
|
-
--drawer-gap: calc(var(--spacing-gap-
|
|
165
|
+
--drawer-gap: calc(var(--spacing-gap-7, 20px) + 2px);
|
|
166
166
|
--drawer-padding-x: calc(var(--spacing-padding-10, 32px) - 2px);
|
|
167
167
|
--drawer-padding-top: var(--spacing-padding-7, 20px);
|
|
168
168
|
--drawer-padding-bottom: calc(
|
|
@@ -2430,7 +2430,7 @@ figure.chip {
|
|
|
2430
2430
|
padding: var(--spacing-padding-6) 0;
|
|
2431
2431
|
}
|
|
2432
2432
|
|
|
2433
|
-
/* Divider 토큰도
|
|
2433
|
+
/* Divider 토큰도 전역 :root 범위에 선언한다. */
|
|
2434
2434
|
|
|
2435
2435
|
|
|
2436
2436
|
.divider {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniai-fe/uds-primitives",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "UNIAI Design System; Primitives Components Package",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"publishConfig": {
|
|
15
15
|
"access": "public"
|
|
16
16
|
},
|
|
17
|
-
"packageManager": "pnpm@10.
|
|
17
|
+
"packageManager": "pnpm@10.27.0",
|
|
18
18
|
"engines": {
|
|
19
19
|
"node": ">=24",
|
|
20
20
|
"pnpm": ">=10"
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"lint": "eslint . --max-warnings=0",
|
|
45
45
|
"typecheck": "tsc --project tsconfig.build.json --noEmit",
|
|
46
46
|
"build": "pnpm format && pnpm typecheck && pnpm css:build",
|
|
47
|
-
"css:build": "sass --load-path=node_modules src/index.scss dist/styles.css --style=expanded --no-source-map && node ./scripts/merge-theme-root.mjs dist/styles.css --selector
|
|
47
|
+
"css:build": "sass --load-path=node_modules src/index.scss dist/styles.css --style=expanded --no-source-map && node ./scripts/merge-theme-root.mjs dist/styles.css --selector=:root",
|
|
48
48
|
"dev": "tsc --project tsconfig.build.json --watch --noEmit",
|
|
49
49
|
"module:lint": "pnpm lint",
|
|
50
50
|
"module:typecheck": "pnpm typecheck",
|
|
@@ -61,9 +61,9 @@
|
|
|
61
61
|
"react-hook-form": ">= 7"
|
|
62
62
|
},
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@mantine/core": "^8.3.
|
|
65
|
-
"@mantine/dates": "^8.3.
|
|
66
|
-
"@mantine/hooks": "^8.3.
|
|
64
|
+
"@mantine/core": "^8.3.11",
|
|
65
|
+
"@mantine/dates": "^8.3.11",
|
|
66
|
+
"@mantine/hooks": "^8.3.11",
|
|
67
67
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
68
68
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
69
69
|
"@radix-ui/react-toggle-group": "^1.1.11",
|
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
"@uniai-fe/util-functions": "workspace:*",
|
|
87
87
|
"eslint": "^9.39.2",
|
|
88
88
|
"prettier": "^3.7.4",
|
|
89
|
-
"react-hook-form": "^7.
|
|
90
|
-
"sass": "^1.97.
|
|
89
|
+
"react-hook-form": "^7.70.0",
|
|
90
|
+
"sass": "^1.97.2",
|
|
91
91
|
"typescript": "~5.9.3"
|
|
92
92
|
}
|
|
93
93
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
:root {
|
|
2
2
|
// Figma 기준 bottom sheet 여백/톤을 전역 변수로 정리한다.
|
|
3
3
|
--drawer-overlay-bg: rgba(0, 0, 0, 0.44);
|
|
4
4
|
--drawer-surface-bg: var(--color-bg-surface-static-white);
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
--drawer-radius-medium: var(--theme-radius-large-1);
|
|
7
7
|
--drawer-body-color: var(--color-label-standard);
|
|
8
8
|
--drawer-title-color: var(--color-label-strong);
|
|
9
|
-
--drawer-gap: calc(var(--spacing-gap-
|
|
9
|
+
--drawer-gap: calc(var(--spacing-gap-7, 20px) + 2px);
|
|
10
10
|
--drawer-padding-x: calc(var(--spacing-padding-10, 32px) - 2px);
|
|
11
11
|
--drawer-padding-top: var(--spacing-padding-7, 20px);
|
|
12
12
|
--drawer-padding-bottom: calc(
|