@uniai-fe/uds-primitives 0.0.5 → 0.0.7
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 +64 -0
- package/dist/styles.css +3614 -0
- package/package.json +17 -5
- package/src/components/navigation/index.tsx +5 -0
- package/src/components/navigation/types/index.ts +24 -0
- package/src/index.scss +22 -1
- package/src/theme/ThemeProvider.tsx +2 -2
- package/styles.scss +1 -0
package/README.md
CHANGED
|
@@ -43,6 +43,70 @@ export default function Page() {
|
|
|
43
43
|
}
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
+
## 스타일 내보내기
|
|
47
|
+
|
|
48
|
+
`@uniai-fe/uds-primitives/styles` 엔트리를 import하면 foundation CSS, theme override, 컴포넌트 SCSS가 한 번에 로드된다.
|
|
49
|
+
|
|
50
|
+
```scss
|
|
51
|
+
@use "@uniai-fe/uds-primitives/styles";
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Next.js/webpack 환경에서 Sass를 사용하지 않는 경우에는 ESM import로 `@uniai-fe/uds-primitives/css`를 불러오면 된다. 이 CSS에는 foundation 토큰과 primitives 스타일이 이미 번들링되어 있다.
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
import "@uniai-fe/uds-primitives/css";
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
컴포넌트 단위로 필요한 스타일만 선택해 불러오려면 각 경로(`components/{name}/index.scss`)를 직접 import하면 된다.
|
|
61
|
+
|
|
62
|
+
```scss
|
|
63
|
+
@use "@uniai-fe/uds-primitives/components/button/index.scss";
|
|
64
|
+
@use "@uniai-fe/uds-primitives/components/navigation/index.scss";
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
ThemeProvider는 CSS를 import하지 않으므로 위 styles 엔트리를 앱 루트에서 1회만 로드하면 중복 없이 토큰 매핑이 적용된다.
|
|
68
|
+
|
|
69
|
+
## Next.js 통합 예시
|
|
70
|
+
|
|
71
|
+
Next.js 15(app router 기준)에서 primitives를 사용하는 최소 구성 예시는 다음과 같다.
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
// next.config.ts
|
|
75
|
+
const nextConfig = {
|
|
76
|
+
transpilePackages: ["@uniai-fe/uds-foundation", "@uniai-fe/uds-primitives"],
|
|
77
|
+
sassOptions: {
|
|
78
|
+
// monorepo가 아니어도 node_modules 경로를 자동 탐색하지만,
|
|
79
|
+
// 필요 시 디자인 토큰 경로를 명시해 두면 빌드 환경 차이를 줄일 수 있다.
|
|
80
|
+
includePaths: ["./node_modules"],
|
|
81
|
+
},
|
|
82
|
+
};
|
|
83
|
+
export default nextConfig;
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
```scss
|
|
87
|
+
/* app/globals.scss */
|
|
88
|
+
@use "@uniai-fe/uds-primitives/styles";
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
// app/layout.tsx
|
|
93
|
+
import type { ReactNode } from "react";
|
|
94
|
+
import "@uniai-fe/uds-primitives/styles";
|
|
95
|
+
import { ThemeProvider } from "@uniai-fe/uds-primitives";
|
|
96
|
+
|
|
97
|
+
export default function RootLayout({ children }: { children: ReactNode }) {
|
|
98
|
+
return (
|
|
99
|
+
<html lang="ko">
|
|
100
|
+
<body>
|
|
101
|
+
<ThemeProvider>{children}</ThemeProvider>
|
|
102
|
+
</body>
|
|
103
|
+
</html>
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
위 예시는 ThemeProvider가 CSS를 다시 import하지 않는 현재 구조를 기준으로 하므로, `globals.scss` 또는 루트에서 styles/css 엔트리를 반드시 한 번 로드해야 한다. Sass 기반 프로젝트는 `@use "@uniai-fe/uds-primitives/styles";`, CSS-only 프로젝트는 `import "@uniai-fe/uds-primitives/css";`를 사용한다.
|
|
109
|
+
|
|
46
110
|
모든 컴포넌트는 `className`/`data-*` 기반으로 override가 가능하며, 내부 슬롯(prefix/suffix/iconSlot 등)은 `CONTEXT-*.md`에 정의된 API를 따릅니다.
|
|
47
111
|
|
|
48
112
|
## 구조
|