@designbasekorea/wordpress-ui 0.1.0 → 0.1.3
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 +59 -5
- package/dist/browser.cjs +1 -1
- package/dist/browser.d.ts +14 -2
- package/dist/browser.esm.js +1 -1
- package/dist/browser.iife.js +1 -1
- package/dist/components.cjs +1 -0
- package/dist/components.d.ts +77 -0
- package/dist/components.esm.js +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +81 -2
- package/dist/index.esm.js +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.d.ts +62 -142
- package/dist/react/index.esm.js +1 -1
- package/dist/styles/controls.css +1 -1
- package/dist/styles/shell.css +1 -1
- package/dist/styles.css +1 -1
- package/docs/WORDPRESS-ADMIN-GUIDE.md +26 -7
- package/examples/react.tsx +16 -16
- package/examples/vanilla.html +28 -33
- package/package.json +16 -1
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
이 문서는 `@designbasekorea/wordpress-ui`를 WordPress 플러그인과 테마의 관리자 화면에 적용하는 표준 가이드입니다.
|
|
4
4
|
|
|
5
|
+
이 가이드의 기준 배포 버전은 `0.1.2`입니다. 플러그인 또는 테마의 lockfile과
|
|
6
|
+
vendor 산출물도 같은 버전으로 맞추고, 버전을 올릴 때마다 아래 검증 명령을 다시
|
|
7
|
+
실행합니다.
|
|
8
|
+
|
|
5
9
|
이 패키지는 `@designbasekorea/ui-wc`를 내부 구현으로 사용하지만, 소비자는 `ui-wc`를 직접 import하지 않습니다. 소비자 코드는 항상 `wordpress-ui`의 공개 진입점과 배포된 자산만 사용합니다.
|
|
6
10
|
|
|
7
11
|
현재 패키지는 다음 원칙을 따릅니다.
|
|
@@ -58,7 +62,7 @@ WordPress plugin/theme
|
|
|
58
62
|
### 2.1 Node 프로젝트에 설치
|
|
59
63
|
|
|
60
64
|
```bash
|
|
61
|
-
npm install @designbasekorea/wordpress-ui
|
|
65
|
+
npm install @designbasekorea/wordpress-ui@0.1.2
|
|
62
66
|
```
|
|
63
67
|
|
|
64
68
|
WordPress 서버가 npm을 실행하는 것이 아닙니다. 라이브러리를 설치한 뒤 플러그인 또는 테마 빌드 과정에서 배포에 필요한 파일을 포함해야 합니다.
|
|
@@ -139,7 +143,7 @@ require_once __DIR__ . '/vendor/wordpress-ui/wordpress-ui.php';
|
|
|
139
143
|
|
|
140
144
|
final class MyPlugin_Admin_Assets
|
|
141
145
|
{
|
|
142
|
-
private const UI_VERSION = '0.1.
|
|
146
|
+
private const UI_VERSION = '0.1.2';
|
|
143
147
|
|
|
144
148
|
public static function init(): void
|
|
145
149
|
{
|
|
@@ -314,6 +318,19 @@ WordPress 플러그인과 테마의 기본 선택지는 vanilla/PHP입니다. Re
|
|
|
314
318
|
|
|
315
319
|
`browser` entry를 로드하면 `wordpress-ui`가 관리자 화면에 필요한 ui-wc element를 등록합니다.
|
|
316
320
|
|
|
321
|
+
TypeScript 번들에서 Web Component 클래스를 직접 참조해야 할 때는 `ui-wc`가 아니라
|
|
322
|
+
`@designbasekorea/wordpress-ui/components`를 import합니다. 이 entry가 `wordpress-ui`의
|
|
323
|
+
등록 allowlist와 같은 컴포넌트 집합을 사용하므로, 소비 플러그인과 테마가 ui-wc의 내부
|
|
324
|
+
경로·등록 정책·아이콘 경로에 결합되지 않습니다.
|
|
325
|
+
|
|
326
|
+
짧은 import를 선호하면 동일한 named export를 패키지 루트에서 가져올 수도 있습니다.
|
|
327
|
+
`components`와 루트는 같은 Web Component 클래스를 가리키며, HTML/PHP 화면은 여전히
|
|
328
|
+
`browser` entry로 등록 runtime을 enqueue해야 합니다.
|
|
329
|
+
|
|
330
|
+
```ts
|
|
331
|
+
import { DbButton, DbInput, DbSelect, DbModal } from '@designbasekorea/wordpress-ui';
|
|
332
|
+
```
|
|
333
|
+
|
|
317
334
|
```html
|
|
318
335
|
<form class="myplugin-filter-form" data-myplugin-filter-form>
|
|
319
336
|
<db-search-bar
|
|
@@ -394,7 +411,7 @@ select?.addEventListener('db-change', (event) => {
|
|
|
394
411
|
React는 선택 사항입니다. Gutenberg나 기존 React 앱과 연결해야 하는 화면에서만 사용하고, 일반적인 PHP admin page에는 vanilla entry를 권장합니다.
|
|
395
412
|
|
|
396
413
|
```bash
|
|
397
|
-
npm install @designbasekorea/wordpress-ui react react-dom
|
|
414
|
+
npm install @designbasekorea/wordpress-ui@0.1.2 react react-dom
|
|
398
415
|
```
|
|
399
416
|
|
|
400
417
|
```tsx
|
|
@@ -866,13 +883,15 @@ import '@designbasekorea/wordpress-ui/styles.css';
|
|
|
866
883
|
|
|
867
884
|
// React 화면에서만 허용
|
|
868
885
|
import { AdminShell, AdminDataTable } from '@designbasekorea/wordpress-ui/react';
|
|
886
|
+
import { DbButton, DbInput, DbSelect, DbModal } from '@designbasekorea/wordpress-ui/components';
|
|
887
|
+
// 또는: import { DbButton, DbInput, DbSelect, DbModal } from '@designbasekorea/wordpress-ui';
|
|
869
888
|
|
|
870
|
-
// 금지: 소비 플러그인/테마에서 직접 import하지 않는다.
|
|
871
|
-
import '@designbasekorea/ui-wc';
|
|
872
|
-
import { DbButton } from '@designbasekorea/ui-wc/components/db-button';
|
|
889
|
+
// 금지: 소비 플러그인/테마에서 @designbasekorea/ui-wc 내부 경로를 직접 import하지 않는다.
|
|
873
890
|
```
|
|
874
891
|
|
|
875
|
-
|
|
892
|
+
`wordpress-ui/components`는 내부적으로 `ui-wc`를 사용하지만, 관리자용 token scope, 아이콘
|
|
893
|
+
경로, 등록 allowlist, CSS 격리 정책은 `wordpress-ui`가 소유합니다. 공통 요구사항이 생기면
|
|
894
|
+
소비자에서 임시로 우회하지 말고 `wordpress-ui`의 공개 API로 승격할지 먼저 검토합니다.
|
|
876
895
|
|
|
877
896
|
## 16. 공식 참고 문서
|
|
878
897
|
|
package/examples/react.tsx
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import '@designbasekorea/wordpress-ui/styles.css';
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
|
-
AdminDataTable,
|
|
5
4
|
AdminPage,
|
|
6
5
|
AdminPageContent,
|
|
7
6
|
AdminPageHeader,
|
|
8
|
-
AdminSection,
|
|
9
7
|
AdminShell,
|
|
10
8
|
Button,
|
|
9
|
+
Section,
|
|
10
|
+
Table,
|
|
11
11
|
} from '@designbasekorea/wordpress-ui/react';
|
|
12
12
|
|
|
13
13
|
type PageRow = {
|
|
@@ -31,23 +31,23 @@ export function WordPressAdminExample() {
|
|
|
31
31
|
{ id: 'settings', label: '설정', href: '#settings' },
|
|
32
32
|
]}
|
|
33
33
|
>
|
|
34
|
+
<AdminPageHeader
|
|
35
|
+
title="페이지 목록"
|
|
36
|
+
description="조회·저장·권한 처리는 플러그인이 담당합니다."
|
|
37
|
+
actions={<Button variant="primary" size="s">새 페이지</Button>}
|
|
38
|
+
/>
|
|
34
39
|
<AdminPage>
|
|
35
|
-
<AdminPageHeader
|
|
36
|
-
title="페이지 목록"
|
|
37
|
-
description="조회·저장·권한 처리는 플러그인이 담당합니다."
|
|
38
|
-
actions={<Button variant="primary" size="s">새 페이지</Button>}
|
|
39
|
-
/>
|
|
40
40
|
<AdminPageContent>
|
|
41
|
-
<
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
rowKey=
|
|
41
|
+
<Section title="최근 페이지" description="상태가 바뀌면 플러그인 상태를 다시 전달합니다." fullWidth>
|
|
42
|
+
<Table
|
|
43
|
+
columns={JSON.stringify([
|
|
44
|
+
{ key: 'title', header: '제목' },
|
|
45
|
+
{ key: 'status', header: '상태' },
|
|
46
|
+
])}
|
|
47
|
+
data={JSON.stringify(rows)}
|
|
48
|
+
rowKey="id"
|
|
49
49
|
/>
|
|
50
|
-
</
|
|
50
|
+
</Section>
|
|
51
51
|
</AdminPageContent>
|
|
52
52
|
</AdminPage>
|
|
53
53
|
</AdminShell>
|
package/examples/vanilla.html
CHANGED
|
@@ -8,64 +8,59 @@
|
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
10
|
<div class="designbase-wp-admin">
|
|
11
|
-
<div class="
|
|
12
|
-
<aside id="example-sidebar" class="
|
|
13
|
-
<div class="
|
|
14
|
-
<div class="
|
|
15
|
-
<nav class="
|
|
16
|
-
<a class="
|
|
17
|
-
<a class="
|
|
18
|
-
<a class="
|
|
11
|
+
<div class="designbase-wp-admin__shell">
|
|
12
|
+
<aside id="example-sidebar" class="designbase-wp-admin__shell-sidebar">
|
|
13
|
+
<div class="designbase-wp-admin__sidebar" aria-label="PageNest 메뉴">
|
|
14
|
+
<div class="designbase-wp-admin__sidebar-title">PageNest</div>
|
|
15
|
+
<nav class="designbase-wp-admin__sidebar-nav">
|
|
16
|
+
<a class="designbase-wp-admin__sidebar-link is-active" href="#" aria-current="page"><i class="designbase-wp-admin__icon icon-dashboard" aria-hidden="true"></i><span class="designbase-wp-admin__sidebar-label">대시보드</span></a>
|
|
17
|
+
<a class="designbase-wp-admin__sidebar-link" href="#"><i class="designbase-wp-admin__icon icon-file-manager" aria-hidden="true"></i><span class="designbase-wp-admin__sidebar-label">페이지 목록</span></a>
|
|
18
|
+
<a class="designbase-wp-admin__sidebar-link" href="#"><i class="designbase-wp-admin__icon icon-settings" aria-hidden="true"></i><span class="designbase-wp-admin__sidebar-label">설정</span></a>
|
|
19
19
|
</nav>
|
|
20
|
-
<button class="
|
|
20
|
+
<button class="designbase-wp-admin__sidebar-close" type="button" data-sidebar-close>닫기</button>
|
|
21
21
|
</div>
|
|
22
22
|
</aside>
|
|
23
|
-
<main class="
|
|
24
|
-
|
|
25
|
-
class="
|
|
23
|
+
<main class="designbase-wp-admin__shell-main">
|
|
24
|
+
<button
|
|
25
|
+
class="designbase-wp-admin__shell-menu-toggle"
|
|
26
26
|
type="button"
|
|
27
|
-
data-
|
|
27
|
+
data-sidebar-toggle="example-sidebar"
|
|
28
28
|
aria-controls="example-sidebar"
|
|
29
29
|
aria-expanded="false"
|
|
30
|
-
><i class="
|
|
31
|
-
<div class="
|
|
30
|
+
><i class="designbase-wp-admin__icon icon-menu" aria-hidden="true"></i><span class="screen-reader-text">메뉴 열기</span></button>
|
|
31
|
+
<div class="designbase-wp-admin__page">
|
|
32
32
|
<db-page-header
|
|
33
33
|
title="페이지 목록"
|
|
34
34
|
description="REST와 권한 상태는 소비자가 소유하고 UI는 상태만 표현합니다."
|
|
35
35
|
variant="minimal"
|
|
36
36
|
>
|
|
37
|
-
<button slot="actions"
|
|
37
|
+
<db-button slot="actions" variant="primary" size="s" start-icon="plus" type="button">새 페이지</db-button>
|
|
38
38
|
</db-page-header>
|
|
39
39
|
|
|
40
40
|
<db-alert variant="info" title="wordpress-ui 예제" message="ui-wc primitives와 관리자 패턴은 이 root 안에서만 동작합니다." closable="false"></db-alert>
|
|
41
41
|
|
|
42
|
-
<form class="
|
|
43
|
-
<div class="
|
|
44
|
-
<
|
|
45
|
-
<label
|
|
46
|
-
|
|
47
|
-
<option>전체 상태</option>
|
|
48
|
-
<option>공개</option>
|
|
49
|
-
<option>초안</option>
|
|
50
|
-
</select>
|
|
51
|
-
</label>
|
|
42
|
+
<form class="designbase-wp-admin__filter-bar" role="search">
|
|
43
|
+
<div class="designbase-wp-admin__filter-bar__fields">
|
|
44
|
+
<db-input type="search" size="s" name="search" placeholder="페이지 검색" aria-label="검색"></db-input>
|
|
45
|
+
<db-select size="s" name="status" aria-label="상태" value="all"
|
|
46
|
+
options='[{"value":"all","label":"전체 상태"},{"value":"published","label":"공개"},{"value":"draft","label":"초안"}]'></db-select>
|
|
52
47
|
</div>
|
|
53
|
-
<div class="
|
|
48
|
+
<div class="designbase-wp-admin__filter-bar__actions">
|
|
54
49
|
<button class="button button-secondary" type="reset">초기화</button>
|
|
55
50
|
<button class="button button-primary" type="submit">적용</button>
|
|
56
51
|
</div>
|
|
57
52
|
</form>
|
|
58
53
|
|
|
59
|
-
<section class="
|
|
60
|
-
<div class="
|
|
61
|
-
<div class="
|
|
62
|
-
<div class="
|
|
54
|
+
<section class="designbase-wp-admin__section">
|
|
55
|
+
<div class="designbase-wp-admin__section-header"><div><h2>최근 페이지</h2><p>예시 테이블은 데이터를 직접 조회하지 않습니다.</p></div></div>
|
|
56
|
+
<div class="designbase-wp-admin__section-content">
|
|
57
|
+
<div class="designbase-wp-admin__data-table">
|
|
63
58
|
<table>
|
|
64
59
|
<caption class="screen-reader-text">최근 페이지</caption>
|
|
65
60
|
<thead><tr><th scope="col">제목</th><th scope="col">상태</th><th scope="col">수정일</th></tr></thead>
|
|
66
61
|
<tbody>
|
|
67
|
-
<tr><td>Designbase</td><td><span class="
|
|
68
|
-
<tr><td>새 링크 페이지</td><td><span class="
|
|
62
|
+
<tr><td>Designbase</td><td><span class="designbase-wp-admin__status is-success">공개</span></td><td>방금 전</td></tr>
|
|
63
|
+
<tr><td>새 링크 페이지</td><td><span class="designbase-wp-admin__status">초안</span></td><td>어제</td></tr>
|
|
69
64
|
</tbody>
|
|
70
65
|
</table>
|
|
71
66
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designbasekorea/wordpress-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "WordPress 관리자용 Designbase UI primitives와 plugin shell patterns",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -19,6 +19,18 @@
|
|
|
19
19
|
"require": "./dist/browser.cjs",
|
|
20
20
|
"default": "./dist/browser.esm.js"
|
|
21
21
|
},
|
|
22
|
+
"./components": {
|
|
23
|
+
"types": "./dist/components.d.ts",
|
|
24
|
+
"import": "./dist/components.esm.js",
|
|
25
|
+
"require": "./dist/components.cjs",
|
|
26
|
+
"default": "./dist/components.esm.js"
|
|
27
|
+
},
|
|
28
|
+
"./primitives": {
|
|
29
|
+
"types": "./dist/components.d.ts",
|
|
30
|
+
"import": "./dist/components.esm.js",
|
|
31
|
+
"require": "./dist/components.cjs",
|
|
32
|
+
"default": "./dist/components.esm.js"
|
|
33
|
+
},
|
|
22
34
|
"./react": {
|
|
23
35
|
"types": "./dist/react/index.d.ts",
|
|
24
36
|
"import": "./dist/react/index.esm.js",
|
|
@@ -33,7 +45,10 @@
|
|
|
33
45
|
},
|
|
34
46
|
"sideEffects": [
|
|
35
47
|
"*.css",
|
|
48
|
+
"./dist/components.esm.js",
|
|
49
|
+
"./dist/components.cjs",
|
|
36
50
|
"./dist/browser.esm.js",
|
|
51
|
+
"./dist/browser.cjs",
|
|
37
52
|
"./dist/react/index.esm.js"
|
|
38
53
|
],
|
|
39
54
|
"files": [
|