@designbasekorea/wordpress-ui 0.1.0
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 +102 -0
- package/dist/browser.cjs +1 -0
- package/dist/browser.d.ts +82 -0
- package/dist/browser.esm.js +1 -0
- package/dist/browser.iife.js +1 -0
- package/dist/icons.woff +0 -0
- package/dist/icons.woff2 +0 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +34 -0
- package/dist/index.esm.js +1 -0
- package/dist/react/index.cjs +1 -0
- package/dist/react/index.d.ts +234 -0
- package/dist/react/index.esm.js +1 -0
- package/dist/styles/controls.css +3898 -0
- package/dist/styles/overlays.css +3896 -0
- package/dist/styles/shell.css +3898 -0
- package/dist/styles.css +3898 -0
- package/docs/WORDPRESS-ADMIN-GUIDE.md +890 -0
- package/examples/react.tsx +55 -0
- package/examples/vanilla.html +80 -0
- package/package.json +113 -0
- package/wordpress-ui.php +65 -0
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import '@designbasekorea/wordpress-ui/styles.css';
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
AdminDataTable,
|
|
5
|
+
AdminPage,
|
|
6
|
+
AdminPageContent,
|
|
7
|
+
AdminPageHeader,
|
|
8
|
+
AdminSection,
|
|
9
|
+
AdminShell,
|
|
10
|
+
Button,
|
|
11
|
+
} from '@designbasekorea/wordpress-ui/react';
|
|
12
|
+
|
|
13
|
+
type PageRow = {
|
|
14
|
+
id: number;
|
|
15
|
+
title: string;
|
|
16
|
+
status: string;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
const rows: PageRow[] = [
|
|
20
|
+
{ id: 1, title: 'Designbase', status: '공개' },
|
|
21
|
+
{ id: 2, title: '새 링크 페이지', status: '초안' },
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
export function WordPressAdminExample() {
|
|
25
|
+
return (
|
|
26
|
+
<AdminShell
|
|
27
|
+
sidebarTitle="PageNest"
|
|
28
|
+
sidebarItems={[
|
|
29
|
+
{ id: 'dashboard', label: '대시보드', href: '#dashboard', active: true },
|
|
30
|
+
{ id: 'pages', label: '페이지 목록', href: '#pages' },
|
|
31
|
+
{ id: 'settings', label: '설정', href: '#settings' },
|
|
32
|
+
]}
|
|
33
|
+
>
|
|
34
|
+
<AdminPage>
|
|
35
|
+
<AdminPageHeader
|
|
36
|
+
title="페이지 목록"
|
|
37
|
+
description="조회·저장·권한 처리는 플러그인이 담당합니다."
|
|
38
|
+
actions={<Button variant="primary" size="s">새 페이지</Button>}
|
|
39
|
+
/>
|
|
40
|
+
<AdminPageContent>
|
|
41
|
+
<AdminSection title="최근 페이지" description="상태가 바뀌면 플러그인 상태를 다시 전달합니다.">
|
|
42
|
+
<AdminDataTable
|
|
43
|
+
rows={rows}
|
|
44
|
+
columns={[
|
|
45
|
+
{ id: 'title', header: '제목', key: 'title' },
|
|
46
|
+
{ id: 'status', header: '상태', key: 'status' },
|
|
47
|
+
]}
|
|
48
|
+
rowKey={(row) => row.id}
|
|
49
|
+
/>
|
|
50
|
+
</AdminSection>
|
|
51
|
+
</AdminPageContent>
|
|
52
|
+
</AdminPage>
|
|
53
|
+
</AdminShell>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="ko">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>wordpress-ui vanilla example</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/styles.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="designbase-wp-admin">
|
|
11
|
+
<div class="dbwp-admin-shell">
|
|
12
|
+
<aside id="example-sidebar" class="dbwp-admin-shell__sidebar">
|
|
13
|
+
<div class="dbwp-admin-sidebar" aria-label="PageNest 메뉴">
|
|
14
|
+
<div class="dbwp-admin-sidebar__title">PageNest</div>
|
|
15
|
+
<nav class="dbwp-admin-sidebar__nav">
|
|
16
|
+
<a class="dbwp-admin-sidebar__link is-active" href="#" aria-current="page"><i class="dbwp-admin-icon icon-dashboard" aria-hidden="true"></i><span class="dbwp-admin-sidebar__label">대시보드</span></a>
|
|
17
|
+
<a class="dbwp-admin-sidebar__link" href="#"><i class="dbwp-admin-icon icon-file-manager" aria-hidden="true"></i><span class="dbwp-admin-sidebar__label">페이지 목록</span></a>
|
|
18
|
+
<a class="dbwp-admin-sidebar__link" href="#"><i class="dbwp-admin-icon icon-settings" aria-hidden="true"></i><span class="dbwp-admin-sidebar__label">설정</span></a>
|
|
19
|
+
</nav>
|
|
20
|
+
<button class="dbwp-admin-sidebar__close" type="button" data-dbwp-sidebar-close>닫기</button>
|
|
21
|
+
</div>
|
|
22
|
+
</aside>
|
|
23
|
+
<main class="dbwp-admin-shell__main">
|
|
24
|
+
<button
|
|
25
|
+
class="dbwp-admin-shell__menu-toggle"
|
|
26
|
+
type="button"
|
|
27
|
+
data-dbwp-sidebar-toggle="example-sidebar"
|
|
28
|
+
aria-controls="example-sidebar"
|
|
29
|
+
aria-expanded="false"
|
|
30
|
+
><i class="dbwp-admin-icon icon-menu" aria-hidden="true"></i><span class="screen-reader-text">메뉴 열기</span></button>
|
|
31
|
+
<div class="dbwp-admin-page">
|
|
32
|
+
<db-page-header
|
|
33
|
+
title="페이지 목록"
|
|
34
|
+
description="REST와 권한 상태는 소비자가 소유하고 UI는 상태만 표현합니다."
|
|
35
|
+
variant="minimal"
|
|
36
|
+
>
|
|
37
|
+
<button slot="actions" class="button button-primary" type="button">새 페이지</button>
|
|
38
|
+
</db-page-header>
|
|
39
|
+
|
|
40
|
+
<db-alert variant="info" title="wordpress-ui 예제" message="ui-wc primitives와 관리자 패턴은 이 root 안에서만 동작합니다." closable="false"></db-alert>
|
|
41
|
+
|
|
42
|
+
<form class="dbwp-admin-filter-bar" role="search">
|
|
43
|
+
<div class="dbwp-admin-filter-bar__fields">
|
|
44
|
+
<label>검색 <input class="dbwp-admin-control" type="search" placeholder="페이지 검색"></label>
|
|
45
|
+
<label>상태
|
|
46
|
+
<select class="dbwp-admin-control">
|
|
47
|
+
<option>전체 상태</option>
|
|
48
|
+
<option>공개</option>
|
|
49
|
+
<option>초안</option>
|
|
50
|
+
</select>
|
|
51
|
+
</label>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="dbwp-admin-filter-bar__actions">
|
|
54
|
+
<button class="button button-secondary" type="reset">초기화</button>
|
|
55
|
+
<button class="button button-primary" type="submit">적용</button>
|
|
56
|
+
</div>
|
|
57
|
+
</form>
|
|
58
|
+
|
|
59
|
+
<section class="dbwp-admin-section">
|
|
60
|
+
<div class="dbwp-admin-section__header"><div><h2>최근 페이지</h2><p>예시 테이블은 데이터를 직접 조회하지 않습니다.</p></div></div>
|
|
61
|
+
<div class="dbwp-admin-section__content">
|
|
62
|
+
<div class="dbwp-admin-data-table">
|
|
63
|
+
<table>
|
|
64
|
+
<caption class="screen-reader-text">최근 페이지</caption>
|
|
65
|
+
<thead><tr><th scope="col">제목</th><th scope="col">상태</th><th scope="col">수정일</th></tr></thead>
|
|
66
|
+
<tbody>
|
|
67
|
+
<tr><td>Designbase</td><td><span class="dbwp-admin-status is-success">공개</span></td><td>방금 전</td></tr>
|
|
68
|
+
<tr><td>새 링크 페이지</td><td><span class="dbwp-admin-status">초안</span></td><td>어제</td></tr>
|
|
69
|
+
</tbody>
|
|
70
|
+
</table>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
</div>
|
|
75
|
+
</main>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<script src="../dist/browser.iife.js"></script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@designbasekorea/wordpress-ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "WordPress 관리자용 Designbase UI primitives와 plugin shell patterns",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.cjs",
|
|
7
|
+
"module": "dist/index.esm.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.esm.js",
|
|
13
|
+
"require": "./dist/index.cjs",
|
|
14
|
+
"default": "./dist/index.esm.js"
|
|
15
|
+
},
|
|
16
|
+
"./browser": {
|
|
17
|
+
"types": "./dist/browser.d.ts",
|
|
18
|
+
"import": "./dist/browser.esm.js",
|
|
19
|
+
"require": "./dist/browser.cjs",
|
|
20
|
+
"default": "./dist/browser.esm.js"
|
|
21
|
+
},
|
|
22
|
+
"./react": {
|
|
23
|
+
"types": "./dist/react/index.d.ts",
|
|
24
|
+
"import": "./dist/react/index.esm.js",
|
|
25
|
+
"require": "./dist/react/index.cjs",
|
|
26
|
+
"default": "./dist/react/index.esm.js"
|
|
27
|
+
},
|
|
28
|
+
"./styles.css": "./dist/styles.css",
|
|
29
|
+
"./styles/controls.css": "./dist/styles/controls.css",
|
|
30
|
+
"./styles/shell.css": "./dist/styles/shell.css",
|
|
31
|
+
"./styles/overlays.css": "./dist/styles/overlays.css",
|
|
32
|
+
"./package.json": "./package.json"
|
|
33
|
+
},
|
|
34
|
+
"sideEffects": [
|
|
35
|
+
"*.css",
|
|
36
|
+
"./dist/browser.esm.js",
|
|
37
|
+
"./dist/react/index.esm.js"
|
|
38
|
+
],
|
|
39
|
+
"files": [
|
|
40
|
+
"dist",
|
|
41
|
+
"README.md",
|
|
42
|
+
"docs",
|
|
43
|
+
"examples",
|
|
44
|
+
"wordpress-ui.php"
|
|
45
|
+
],
|
|
46
|
+
"scripts": {
|
|
47
|
+
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
48
|
+
"clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
|
|
49
|
+
"build:css": "mkdir -p dist/styles && sass src/styles/index.scss dist/styles.css --style=compressed --no-source-map && sass src/styles/controls.scss dist/styles/controls.css --style=compressed --no-source-map && sass src/styles/shell.scss dist/styles/shell.css --style=compressed --no-source-map && sass src/styles/overlays.scss dist/styles/overlays.css --style=compressed --no-source-map && node src/styles/scope-css.mjs dist/styles.css dist/styles/controls.css dist/styles/shell.css dist/styles/overlays.css",
|
|
50
|
+
"build": "npm run typecheck && npm run clean && npm run build:css && rollup -c",
|
|
51
|
+
"verify": "node scripts/verify.mjs",
|
|
52
|
+
"test": "npm run verify",
|
|
53
|
+
"audit:axe": "node scripts/audit-axe.mjs",
|
|
54
|
+
"prepublishOnly": "npm run build",
|
|
55
|
+
"dev": "ROLLUP_MINIFY=0 rollup -c --watch",
|
|
56
|
+
"prestorybook": "npm run build",
|
|
57
|
+
"storybook": "storybook dev -p 6008",
|
|
58
|
+
"prebuild-storybook": "npm run build",
|
|
59
|
+
"build-storybook": "storybook build"
|
|
60
|
+
},
|
|
61
|
+
"dependencies": {
|
|
62
|
+
"@designbasekorea/ui-wc": "0.8.4"
|
|
63
|
+
},
|
|
64
|
+
"peerDependencies": {
|
|
65
|
+
"react": ">=18.0.0 <20.0.0",
|
|
66
|
+
"react-dom": ">=18.0.0 <20.0.0"
|
|
67
|
+
},
|
|
68
|
+
"peerDependenciesMeta": {
|
|
69
|
+
"react": {
|
|
70
|
+
"optional": true
|
|
71
|
+
},
|
|
72
|
+
"react-dom": {
|
|
73
|
+
"optional": true
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"devDependencies": {
|
|
77
|
+
"@designbasekorea/icons-webfont": "file:../icons-webfont",
|
|
78
|
+
"@designbasekorea/theme": "file:../theme",
|
|
79
|
+
"@designbasekorea/tokens": "file:../tokens",
|
|
80
|
+
"@designbasekorea/ui-wc": "file:../ui-wc",
|
|
81
|
+
"@rollup/plugin-commonjs": "^29.0.3",
|
|
82
|
+
"@rollup/plugin-node-resolve": "^15.2.1",
|
|
83
|
+
"@rollup/plugin-terser": "^1.0.0",
|
|
84
|
+
"@rollup/plugin-typescript": "^11.1.3",
|
|
85
|
+
"@storybook/addon-essentials": "^8.6.14",
|
|
86
|
+
"@storybook/addon-interactions": "^8.6.14",
|
|
87
|
+
"@storybook/addon-links": "^8.6.14",
|
|
88
|
+
"@storybook/blocks": "^8.6.14",
|
|
89
|
+
"@storybook/react": "^8.6.14",
|
|
90
|
+
"@storybook/react-vite": "^8.6.14",
|
|
91
|
+
"@types/react": "^19.2.7",
|
|
92
|
+
"@types/react-dom": "^19.2.5",
|
|
93
|
+
"axe-core": "^4.10.3",
|
|
94
|
+
"playwright": "^1.62.1",
|
|
95
|
+
"postcss": "^8.5.26",
|
|
96
|
+
"react": "^19.2.0",
|
|
97
|
+
"react-dom": "^19.2.0",
|
|
98
|
+
"rollup": "^3.29.2",
|
|
99
|
+
"rollup-plugin-dts": "^6.2.3",
|
|
100
|
+
"sass": "^1.103.1",
|
|
101
|
+
"storybook": "^8.6.14",
|
|
102
|
+
"typescript": "^5.2.2",
|
|
103
|
+
"vite": "^6.4.3"
|
|
104
|
+
},
|
|
105
|
+
"publishConfig": {
|
|
106
|
+
"access": "public"
|
|
107
|
+
},
|
|
108
|
+
"repository": {
|
|
109
|
+
"type": "git",
|
|
110
|
+
"url": "https://github.com/designbasekorea/Designbase-Library.git",
|
|
111
|
+
"directory": "packages/wordpress-ui"
|
|
112
|
+
}
|
|
113
|
+
}
|
package/wordpress-ui.php
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<?php
|
|
2
|
+
/**
|
|
3
|
+
* Optional WordPress enqueue helper for plugins and themes.
|
|
4
|
+
*
|
|
5
|
+
* The caller remains responsible for deciding which admin screens need the
|
|
6
|
+
* assets. This helper only enqueues the bundled wordpress-ui files.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
if (!defined('ABSPATH')) {
|
|
10
|
+
exit;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
if (!function_exists('designbase_wordpress_ui_enqueue')) {
|
|
14
|
+
/**
|
|
15
|
+
* Enqueue wordpress-ui on a previously validated admin screen.
|
|
16
|
+
*
|
|
17
|
+
* @param array<string, mixed> $args {
|
|
18
|
+
* @type string $handle Base script/style handle.
|
|
19
|
+
* @type string $base_url Public URL of the package root.
|
|
20
|
+
* @type string $base_path Filesystem path of the package root.
|
|
21
|
+
* @type string $version Optional cache version.
|
|
22
|
+
* }
|
|
23
|
+
* @return bool
|
|
24
|
+
*/
|
|
25
|
+
function designbase_wordpress_ui_enqueue($args = [])
|
|
26
|
+
{
|
|
27
|
+
if (!function_exists('wp_enqueue_style') || !function_exists('wp_enqueue_script')) {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
$args = wp_parse_args($args, [
|
|
32
|
+
'handle' => 'designbase-wordpress-ui',
|
|
33
|
+
'base_url' => '',
|
|
34
|
+
'base_path' => '',
|
|
35
|
+
'version' => '',
|
|
36
|
+
]);
|
|
37
|
+
|
|
38
|
+
$base_url = untrailingslashit((string) $args['base_url']);
|
|
39
|
+
$base_path = untrailingslashit((string) $args['base_path']);
|
|
40
|
+
if ($base_url === '' || $base_path === '') {
|
|
41
|
+
return false;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
$style_path = $base_path . '/dist/styles.css';
|
|
45
|
+
$browser_path = $base_path . '/dist/browser.iife.js';
|
|
46
|
+
if (!is_readable($style_path) || !is_readable($browser_path)) {
|
|
47
|
+
return false;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
$version = (string) $args['version'];
|
|
51
|
+
if ($version === '') {
|
|
52
|
+
$version = (string) filemtime($style_path);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
$handle = sanitize_key((string) $args['handle']);
|
|
56
|
+
if ($handle === '') {
|
|
57
|
+
$handle = 'designbase-wordpress-ui';
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
wp_enqueue_style($handle, $base_url . '/dist/styles.css', [], $version);
|
|
61
|
+
wp_enqueue_script($handle . '-browser', $base_url . '/dist/browser.iife.js', [], $version, true);
|
|
62
|
+
|
|
63
|
+
return true;
|
|
64
|
+
}
|
|
65
|
+
}
|