@wipco/sdui-editor 0.1.0

package/dist/styles.css

@@ -0,0 +1,147 @@
+/*
+ * 편집기 스타일 — 라이브러리 토큰(wp-*) 위에 얹는다.
+ *
+ * 예전 관리자 앱의 스타일시트에서 왔지만 두 가지가 달라졌다:
+ *
+ *  1. **전역 리셋을 걷어냈다.** 이 CSS는 소비 프로젝트의 페이지 안으로 들어간다 —
+ *     `* { box-sizing }`이나 `body { font-family }`를 여기서 선언하면 편집기를 한 번
+ *     마운트했다는 이유로 그 프로젝트 전체의 타이포그래피가 바뀐다.
+ *  2. **모든 클래스에 `sdui-editor-` 접두를 붙였다.** `.editor-toolbar`·`.help-panel`
+ *     같은 흔한 이름은 소비 프로젝트와 부딪칠 여지가 크다.
+ *
+ * 높이: 편집기는 부모가 준 높이를 채우되(`height: 100%`), 부모 높이가 auto인
+ * 평범한 문서 흐름에 놓여도 편집·미리보기 창이 찌부러지지 않도록 분할 영역에
+ * 최소 높이를 준다.
+ */
+
+.sdui-editor {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  color: var(--wp-text-default);
+  font-size: 13px;
+}
+.sdui-editor *,
+.sdui-editor *::before,
+.sdui-editor *::after { box-sizing: border-box; }
+
+.sdui-editor-center {
+  display: flex; align-items: center; justify-content: center;
+  padding: 48px 0;
+}
+
+/* ---------- 편집기 자체 헤더 (chrome=false면 안 그린다) ---------- */
+.sdui-editor-chrome {
+  display: flex; align-items: center; gap: 12px;
+  height: 44px; padding: 0 16px; flex: none;
+  background: var(--wp-chrome-bg); color: var(--wp-chrome-fg);
+}
+.sdui-editor-chrome__title { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
+
+/* ---------- 목록 화면 ---------- */
+.sdui-editor-page {
+  width: 100%; max-width: 1080px; margin: 0 auto;
+  padding: 28px 24px 48px;
+  display: flex; flex-direction: column; gap: var(--wp-space-4);
+}
+.sdui-editor-list-toolbar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px; border-bottom: 1px solid var(--wp-border-subtle);
+}
+.sdui-editor-list-toolbar .wp-inputwrap { max-width: 320px; }
+
+/* 저장소 제약 목록 — Alert 안에 들어가므로 여백만 정리한다 */
+.sdui-editor-limitations { margin: 4px 0 0; padding-left: 18px; }
+.sdui-editor-limitations li { margin: 2px 0; }
+
+/* ---------- 편집 화면 ---------- */
+.sdui-editor-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.sdui-editor-toolbar {
+  display: flex; align-items: center; gap: 8px; flex: none;
+  padding: 8px 12px; background: var(--wp-surface-card);
+  border-bottom: 1px solid var(--wp-border-subtle);
+  flex-wrap: wrap;
+}
+.sdui-editor-toolbar__id { font-weight: 700; color: var(--wp-text-brand); }
+.sdui-editor-banner { padding: 8px 12px 0; }
+.sdui-editor-split {
+  flex: 1; display: flex;
+  /* 부모 높이가 auto여도 편집·미리보기가 쓸 만한 크기를 갖게 한다 */
+  min-height: clamp(480px, 70vh, 900px);
+}
+.sdui-editor-pane {
+  width: 46%; min-width: 380px; display: flex; flex-direction: column; min-height: 0;
+  border-right: 1px solid var(--wp-border-subtle); background: var(--wp-surface-card);
+}
+.sdui-editor-json { flex: 1; min-height: 0; overflow: hidden; }
+.sdui-editor-json .cm-editor { height: 100%; }
+.sdui-editor-issues {
+  flex: none; max-height: 160px; overflow-y: auto;
+  border-top: 1px solid var(--wp-border-subtle); background: var(--wp-slate-25);
+  padding: 8px 12px; display: flex; flex-direction: column; gap: 4px;
+}
+.sdui-editor-issue { font-size: 12px; color: var(--wp-text-warning); display: flex; gap: 8px; align-items: baseline; }
+.sdui-editor-issue .wp-mono-xs { color: var(--wp-text-subtle); flex: none; }
+.sdui-editor-issue--error { color: var(--wp-text-danger); }
+
+.sdui-editor-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
+.sdui-editor-preview__head {
+  flex: none; display: flex; align-items: center; gap: 12px;
+  padding: 8px 16px; border-bottom: 1px solid var(--wp-border-subtle);
+  background: var(--wp-slate-25);
+}
+.sdui-editor-preview__notice { font-size: 12px; color: var(--wp-text-info); }
+.sdui-editor-preview__body { flex: 1; overflow-y: auto; padding: 24px; position: relative; }
+.sdui-editor-preview__body .sdui-root { display: flex; flex-direction: column; gap: var(--wp-space-4); }
+
+/* ---------- 도움말 패널 ---------- */
+.sdui-editor-help {
+  width: 340px; flex: none; display: flex; flex-direction: column; min-height: 0;
+  border-left: 1px solid var(--wp-border-subtle); background: var(--wp-surface-card);
+}
+.sdui-editor-help__head {
+  flex: none; display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px; border-bottom: 1px solid var(--wp-border-subtle);
+}
+.sdui-editor-help__body {
+  flex: 1; overflow-y: auto; padding: 14px;
+  display: flex; flex-direction: column; gap: 18px;
+}
+.sdui-editor-help__body section { display: flex; flex-direction: column; gap: 8px; }
+.sdui-editor-help__code {
+  margin: 0; padding: 10px; font-size: 11px; line-height: 1.5;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  background: var(--wp-slate-50); border: 1px solid var(--wp-border-subtle);
+  border-radius: var(--wp-radius-md); overflow-x: auto; white-space: pre;
+}
+.sdui-editor-help__dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }
+.sdui-editor-help__dl dt { margin: 0; }
+.sdui-editor-help__dl dt code { font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--wp-text-brand); }
+.sdui-editor-help__dl dd { margin: 1px 0 0; font-size: 12px; color: var(--wp-text-muted); }
+.sdui-editor-help__chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.sdui-editor-help__chip {
+  font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace;
+  background: var(--wp-slate-100); border-radius: var(--wp-radius-sm); padding: 2px 6px;
+}
+
+/* ---------- 뷰어 ---------- */
+.sdui-editor-viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.sdui-editor-viewer__bar {
+  flex: none; display: flex; align-items: center; gap: 12px;
+  padding: 8px 16px;
+  background: var(--wp-surface-card);
+  border-bottom: 1px solid var(--wp-border-subtle);
+}
+.sdui-editor-viewer__id { color: var(--wp-text-subtle); }
+.sdui-editor-viewer__body { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 24px 48px; }
+.sdui-editor-viewer__body .sdui-root { display: flex; flex-direction: column; gap: var(--wp-space-4); }
+
+@media (max-width: 900px) {
+  .sdui-editor-split { flex-direction: column; }
+  .sdui-editor-pane {
+    width: 100%; min-width: 0; height: 50%;
+    border-right: none; border-bottom: 1px solid var(--wp-border-subtle);
+  }
+  .sdui-editor-help { position: fixed; right: 0; top: 0; bottom: 0; box-shadow: var(--wp-shadow-lg); z-index: 50; }
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@wipco/sdui-editor",
+  "version": "0.1.0",
+  "description": "SDUI 페이지 스펙 편집기 — 소비 프로젝트가 자기 라우트에 마운트하는 React 컴포넌트",
+  "keywords": [
+    "sdui",
+    "server-driven-ui",
+    "react",
+    "editor"
+  ],
+  "author": "wipco-dev",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wipco-dev/wipco-sdui.git",
+    "directory": "packages/sdui-editor"
+  },
+  "homepage": "https://github.com/wipco-dev/wipco-sdui#readme",
+  "bugs": {
+    "url": "https://github.com/wipco-dev/wipco-sdui/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup && cp src/styles.css dist/styles.css",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepack": "pnpm run build"
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.8.0",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/state": "^6.5.0",
+    "@codemirror/view": "^6.36.0",
+    "codemirror": "^6.0.1"
+  },
+  "peerDependencies": {
+    "@wipco/sdui": "^0.1.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@wipco/sdui": "^0.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.7.0"
+  }
+}