@uniai-fe/uds-templates 0.12.5 → 0.12.6

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.
Files changed (6) hide show
  1. package/dist/styles.css +38 -0
  2. package/package.json +8 -8
  3. package/src/edge-case/components/Empty.tsx +6 -4
  4. package/src/edge-case/components/Loading.tsx +13 -5
  5. package/src/edge-case/styles/edge-case.scss +38 -0
  6. package/src/edge-case/types/index.ts +6 -0
package/dist/styles.css CHANGED
@@ -2360,6 +2360,44 @@
2360
2360
  width: 100%;
2361
2361
  }
2362
2362
 
2363
+ .edge-case:where([data-edge-case="empty"], [data-edge-case="loading"]) {
2364
+ --alternate-layout-content-gap: var(--spacing-gap-3);
2365
+ --alternate-layout-title-color: var(--color-label-standard);
2366
+ --alternate-layout-title-font-size: var(--font-heading-small-size);
2367
+ --alternate-layout-title-line-height: var(--font-heading-small-line-height);
2368
+ --alternate-layout-title-letter-spacing: var(
2369
+ --font-heading-small-letter-spacing
2370
+ );
2371
+ --alternate-layout-title-font-weight: var(--font-heading-small-weight);
2372
+ --alternate-layout-contents-color: var(--color-label-alternative);
2373
+ --alternate-layout-contents-font-size: var(--font-body-xsmall-size);
2374
+ --alternate-layout-contents-line-height: var(--font-body-xsmall-line-height);
2375
+ --alternate-layout-contents-letter-spacing: var(
2376
+ --font-body-xsmall-letter-spacing
2377
+ );
2378
+ --alternate-layout-contents-font-weight: var(--font-body-xsmall-weight);
2379
+ }
2380
+
2381
+ .edge-case:where([data-edge-case="empty"]) {
2382
+ --alternate-layout-gap: var(--spacing-gap-5);
2383
+ --alternate-layout-figure-size: 128px;
2384
+ }
2385
+
2386
+ .edge-case:where(.edge-case-loading-large, [data-edge-case="loading"]) {
2387
+ --alternate-layout-gap: var(--spacing-gap-10);
2388
+ --alternate-layout-figure-size: var(--alternate-loading-icon-large-size);
2389
+ }
2390
+
2391
+ .edge-case:where(.edge-case-loading-medium) {
2392
+ --alternate-layout-gap: var(--spacing-gap-10);
2393
+ --alternate-layout-figure-size: var(--alternate-loading-icon-medium-size);
2394
+ }
2395
+
2396
+ .edge-case:where(.edge-case-loading-small) {
2397
+ --alternate-layout-gap: var(--spacing-gap-10);
2398
+ --alternate-layout-figure-size: var(--alternate-loading-icon-small-size);
2399
+ }
2400
+
2363
2401
  .edge-case:where(.edge-case-not-found, [data-edge-case="not-found"]) {
2364
2402
  --alternate-layout-min-block-size: 100dvh;
2365
2403
  --alternate-layout-gap: var(--spacing-gap-3);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-templates",
3
- "version": "0.12.5",
3
+ "version": "0.12.6",
4
4
  "description": "UNIAI Design System; UI Templates Package",
5
5
  "type": "module",
6
6
  "private": false,
@@ -37,7 +37,7 @@
37
37
  "peerDependencies": {
38
38
  "@tanstack/react-query": ">=5 <6",
39
39
  "@uniai-fe/uds-foundation": "^0.4.8 || ^0.5.0 || ^0.6.0",
40
- "@uniai-fe/uds-primitives": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0",
40
+ "@uniai-fe/uds-primitives": "^0.12.9",
41
41
  "@uniai-fe/util-api": "^0.1.15 || ^0.2.0",
42
42
  "@uniai-fe/util-functions": "^0.3.0 || ^0.4.0",
43
43
  "@uniai-fe/util-jotai": "^0.1.9 || ^0.2.0 || ^0.3.0",
@@ -67,17 +67,17 @@
67
67
  "react-hook-form": "^7.86.0",
68
68
  "sass": "^1.102.0",
69
69
  "typescript": "6.0.3",
70
- "@uniai-fe/tsconfig": "0.2.0",
71
70
  "@uniai-fe/eslint-config": "0.4.3",
72
- "@uniai-fe/react-hooks": "0.3.0",
73
71
  "@uniai-fe/next-devkit": "0.4.1",
74
- "@uniai-fe/uds-primitives": "0.12.7",
75
- "@uniai-fe/uds-foundation": "0.6.0",
72
+ "@uniai-fe/react-hooks": "0.3.0",
73
+ "@uniai-fe/tsconfig": "0.2.0",
74
+ "@uniai-fe/uds-primitives": "0.12.9",
76
75
  "@uniai-fe/util-api": "0.2.1",
77
- "@uniai-fe/util-jotai": "0.3.0",
76
+ "@uniai-fe/uds-foundation": "0.6.0",
77
+ "@uniai-fe/util-functions": "0.4.3",
78
78
  "@uniai-fe/util-rtc": "0.2.1",
79
79
  "@uniai-fe/util-next": "0.5.0",
80
- "@uniai-fe/util-functions": "0.4.3"
80
+ "@uniai-fe/util-jotai": "0.3.0"
81
81
  },
82
82
  "scripts": {
83
83
  "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",
package/src/edge-case/components/Empty.tsx CHANGED
@@ -31,10 +31,12 @@ export default function EdgeCaseEmpty({
31
31
  {figure ? (
32
32
  <Alternate.Layout.Figure>{figure}</Alternate.Layout.Figure>
33
33
  ) : null}
34
- <Alternate.Layout.Title>{title}</Alternate.Layout.Title>
35
- {description ? (
36
- <Alternate.Layout.Contents>{description}</Alternate.Layout.Contents>
37
- ) : null}
34
+ <Alternate.Layout.Text>
35
+ <Alternate.Layout.Title>{title}</Alternate.Layout.Title>
36
+ {description ? (
37
+ <Alternate.Layout.Contents>{description}</Alternate.Layout.Contents>
38
+ ) : null}
39
+ </Alternate.Layout.Text>
38
40
  {/* 변경: templates는 action 정책을 확정하지 않고 소비 측 주입 지점만 연다. */}
39
41
  {children}
40
42
  </Alternate.Layout.Container>
package/src/edge-case/components/Loading.tsx CHANGED
@@ -10,6 +10,7 @@ import type { EdgeCaseLoadingProps } from "../types";
10
10
  * @param {EdgeCaseLoadingProps} props
11
11
  * @param {string} [props.className] 최상위 edge-case container className override다.
12
12
  * @param {React.ReactNode} [props.figure] 로딩 상태 visual 콘텐츠다.
13
+ * @param {"small" | "medium" | "large"} [props.size="large"] 로딩 figure와 기본 spinner 크기다.
13
14
  * @param {React.ReactNode} [props.title] 로딩 상태 제목 콘텐츠다.
14
15
  * @param {React.ReactNode} [props.description] 로딩 상태 설명 콘텐츠다.
15
16
  * @param {React.ReactNode} [props.children] 하단에 주입할 custom action 또는 보조 콘텐츠다.
@@ -19,21 +20,28 @@ import type { EdgeCaseLoadingProps } from "../types";
19
20
  export default function EdgeCaseLoading({
20
21
  className,
21
22
  figure,
23
+ size = "large",
22
24
  title,
23
25
  description,
24
26
  children,
25
27
  }: EdgeCaseLoadingProps) {
26
28
  return (
27
29
  <Alternate.Layout.Container
28
- className={clsx("edge-case", className)}
30
+ className={clsx("edge-case", `edge-case-loading-${size}`, className)}
29
31
  data-edge-case="loading"
30
32
  >
31
33
  <Alternate.Layout.Figure>
32
- {figure ?? <Alternate.LoadingIcon size="large" direction="vertical" />}
34
+ {figure ?? <Alternate.LoadingIcon size={size} direction="vertical" />}
33
35
  </Alternate.Layout.Figure>
34
- {title ? <Alternate.Layout.Title>{title}</Alternate.Layout.Title> : null}
35
- {description ? (
36
- <Alternate.Layout.Contents>{description}</Alternate.Layout.Contents>
36
+ {title || description ? (
37
+ <Alternate.Layout.Text>
38
+ {title ? (
39
+ <Alternate.Layout.Title>{title}</Alternate.Layout.Title>
40
+ ) : null}
41
+ {description ? (
42
+ <Alternate.Layout.Contents>{description}</Alternate.Layout.Contents>
43
+ ) : null}
44
+ </Alternate.Layout.Text>
37
45
  ) : null}
38
46
  {/* 변경: 로딩 취소/재시도 같은 정책은 서비스 앱이 children으로 주입한다. */}
39
47
  {children}
package/src/edge-case/styles/edge-case.scss CHANGED
@@ -2,6 +2,44 @@
2
2
  width: 100%;
3
3
  }
4
4
 
5
+ .edge-case:where([data-edge-case="empty"], [data-edge-case="loading"]) {
6
+ --alternate-layout-content-gap: var(--spacing-gap-3);
7
+ --alternate-layout-title-color: var(--color-label-standard);
8
+ --alternate-layout-title-font-size: var(--font-heading-small-size);
9
+ --alternate-layout-title-line-height: var(--font-heading-small-line-height);
10
+ --alternate-layout-title-letter-spacing: var(
11
+ --font-heading-small-letter-spacing
12
+ );
13
+ --alternate-layout-title-font-weight: var(--font-heading-small-weight);
14
+ --alternate-layout-contents-color: var(--color-label-alternative);
15
+ --alternate-layout-contents-font-size: var(--font-body-xsmall-size);
16
+ --alternate-layout-contents-line-height: var(--font-body-xsmall-line-height);
17
+ --alternate-layout-contents-letter-spacing: var(
18
+ --font-body-xsmall-letter-spacing
19
+ );
20
+ --alternate-layout-contents-font-weight: var(--font-body-xsmall-weight);
21
+ }
22
+
23
+ .edge-case:where([data-edge-case="empty"]) {
24
+ --alternate-layout-gap: var(--spacing-gap-5);
25
+ --alternate-layout-figure-size: 128px;
26
+ }
27
+
28
+ .edge-case:where(.edge-case-loading-large, [data-edge-case="loading"]) {
29
+ --alternate-layout-gap: var(--spacing-gap-10);
30
+ --alternate-layout-figure-size: var(--alternate-loading-icon-large-size);
31
+ }
32
+
33
+ .edge-case:where(.edge-case-loading-medium) {
34
+ --alternate-layout-gap: var(--spacing-gap-10);
35
+ --alternate-layout-figure-size: var(--alternate-loading-icon-medium-size);
36
+ }
37
+
38
+ .edge-case:where(.edge-case-loading-small) {
39
+ --alternate-layout-gap: var(--spacing-gap-10);
40
+ --alternate-layout-figure-size: var(--alternate-loading-icon-small-size);
41
+ }
42
+
5
43
  .edge-case:where(.edge-case-not-found, [data-edge-case="not-found"]) {
6
44
  // 변경: NotFound는 페이지 단위 fallback preset이므로 Alternate.Layout의 최소 높이를 전체 viewport로 확장한다.
7
45
  --alternate-layout-min-block-size: 100dvh;
package/src/edge-case/types/index.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { ReactNode } from "react";
2
+ import type { AlternateLoadingIconSize } from "@uniai-fe/uds-primitives";
2
3
 
3
4
  /**
4
5
  * Edge Case Empty Props; 빈 상태 화면 템플릿 props
@@ -35,6 +36,7 @@ export interface EdgeCaseEmptyProps {
35
36
  * Edge Case Loading Props; 로딩 상태 화면 템플릿 props
36
37
  * @property {string} [className] 최상위 edge-case container className override다.
37
38
  * @property {ReactNode} [figure] 로딩 상태 visual 콘텐츠다. 없으면 Alternate.LoadingIcon을 사용한다.
39
+ * @property {"small" | "medium" | "large"} [size="large"] 로딩 figure와 기본 spinner 크기다.
38
40
  * @property {ReactNode} [title] 로딩 상태 제목 콘텐츠다.
39
41
  * @property {ReactNode} [description] 로딩 상태 설명 콘텐츠다.
40
42
  * @property {ReactNode} [children] 하단에 주입할 custom action 또는 보조 콘텐츠다.
@@ -48,6 +50,10 @@ export interface EdgeCaseLoadingProps {
48
50
  * 로딩 상태 visual 콘텐츠다. 없으면 Alternate.LoadingIcon을 사용한다.
49
51
  */
50
52
  figure?: ReactNode;
53
+ /**
54
+ * 로딩 figure와 기본 spinner 크기다. 허용값은 "small", "medium", "large"다.
55
+ */
56
+ size?: AlternateLoadingIconSize;
51
57
  /**
52
58
  * 로딩 상태 제목 콘텐츠다.
53
59
  */