@wipco/sdui 0.1.0

package/dist/types-D5Tkrynd.d.ts

@@ -0,0 +1,197 @@
+/**
+ * SDUI(Server-Driven UI) 페이지 스펙 — 백엔드와의 렌더링 계약.
+ *
+ * 백엔드는 이 형태의 JSON을 내려주고, 프런트는 레지스트리에 등록된
+ * 컴포넌트로 조합/렌더링만 한다. (WIPCO ERP의 SDUI 계약과 동일 형식)
+ */
+/** JSON으로 표현 가능한 prop 값. UI 노드는 props가 아니라 slots/children으로 전달한다. */
+type SduiScalar = string | number | boolean | null;
+type SduiPropValue = SduiScalar | SduiPropValue[] | {
+    [key: string]: SduiPropValue;
+};
+/** children/slot 항목: 문자열이면 텍스트, 객체면 하위 노드. */
+type SduiChild = string | SduiNode;
+interface SduiNode {
+    /** 레지스트리에 등록된 컴포넌트 이름 (예: "Button", "Grid") */
+    component: string;
+    /** React key. 형제간 고유 권장 (없으면 배열 인덱스 사용) */
+    key?: string;
+    /**
+     * 데이터 성격의 props.
+     * - `on`으로 시작하는 프롭에는 {@link SduiAction}(또는 액션 배열)을 넣으면 핸들러로 변환된다.
+     * - 값 프롭 자리에는 {@link SduiStateRef}를 넣어 페이지 상태를 바인딩할 수 있다.
+     */
+    props?: Record<string, SduiPropValue>;
+    /** ReactNode를 받는 프롭(Card.title, Card.actions, Dialog.footer 등)은 여기로 전달한다. */
+    slots?: Record<string, SduiChild[]>;
+    /** 기본 슬롯(children) */
+    children?: SduiChild[];
+}
+/**
+ * 페이지 상태 참조. props 값 자리에 넣으면 렌더러가 현재 상태 값으로 치환한다.
+ * 예: { "value": { "$state": "tab", "default": "all" } }
+ */
+interface SduiStateRef {
+    $state: string;
+    default?: SduiPropValue;
+}
+/** ForEach 반복 스코프 안에서 현재 행을 참조한다. true면 행 전체, 문자열이면 해당 필드. */
+interface SduiItemRef {
+    $item: string | true;
+}
+/** ForEach 반복 스코프 안에서 현재 인덱스(0부터)를 참조한다. */
+interface SduiIndexRef {
+    $index: true;
+}
+/**
+ * 파생 계산값. args의 각 항목은 숫자/문자열이거나 다른 참조($state/$item/$calc)일 수 있다.
+ * 예(금액=수량×단가): { "$calc": { "op": "mul", "args": [{ "$item": "qty" }, { "$item": "price" }] } }
+ * sum은 args가 배열 하나면 그 배열 원소를 합산하고, field를 주면 객체 배열에서 해당 필드를 합산한다.
+ */
+interface SduiCalcRef {
+    $calc: {
+        op: 'sum' | 'sub' | 'mul' | 'div' | 'percent' | 'count' | 'concat' | 'encode'
+        /** 비교·논리 — Show의 when, Button의 disabled 등에 바인딩한다 */
+         | 'eq' | 'gt' | 'gte' | 'lt' | 'lte' | 'not';
+        args: SduiPropValue[];
+        /** sum/count에서 객체 배열의 필드를 지정 */
+        field?: string;
+    };
+}
+/** 폼 필드 검증 규칙. */
+type SduiRule = {
+    rule: 'required';
+    message?: string;
+} | {
+    rule: 'min';
+    value: number;
+    message?: string;
+} | {
+    rule: 'max';
+    value: number;
+    message?: string;
+} | {
+    rule: 'minLength';
+    value: number;
+    message?: string;
+} | {
+    rule: 'maxLength';
+    value: number;
+    message?: string;
+} | {
+    rule: 'pattern';
+    value: string;
+    message?: string;
+} | {
+    rule: 'notBeforeField';
+    field: string;
+    message?: string;
+} | {
+    rule: 'custom';
+    name: string;
+    message?: string;
+};
+/**
+ * on* 프롭 자리에 넣는 선언적 액션. 배열이면 순서대로 실행된다.
+ */
+type SduiAction = {
+    action: 'navigate';
+    to: string;
+} | {
+    action: 'setState';
+    key: string;
+    value?: SduiPropValue;
+    /** true면 이벤트 값(input value, 선택된 탭 value, 페이지 번호 등)을 그대로 저장한다. */
+    fromEvent?: boolean;
+}
+/** setState(key, true) 단축 — Dialog 등 열기 */
+ | {
+    action: 'open';
+    key: string;
+}
+/** setState(key, false) 단축 — 닫기 */
+ | {
+    action: 'close';
+    key: string;
+} | {
+    action: 'toast';
+    tone?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    message?: string;
+}
+/**
+ * 폼 제출: Form(id)의 상태 슬라이스를 수집 → 규칙 검증 → 통과 시
+ * 어댑터 fetch로 endpoint에 전송. 실패 시 필드별 에러를
+ * `{formId}.$errors`에, 진행 상태를 `{formId}.$submitting`에 기록한다.
+ */
+ | {
+    action: 'submitForm';
+    form: string;
+    endpoint: string;
+    method?: 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    /** 성공 시 순차 실행 (이벤트 값 = 응답 JSON) */
+    onSuccess?: SduiAction[];
+    /** 실패 시 순차 실행 (이벤트 값 = 에러 메시지). 생략하면 danger 토스트 */
+    onError?: SduiAction[];
+}
+/** 클라이언트 조회 캐시 무효화 — 어댑터의 invalidate로 위임 */
+ | {
+    action: 'invalidate';
+    prefix: string;
+    exact?: boolean;
+}
+/** 페이지 스펙 재조회 — 어댑터의 refresh로 위임 */
+ | {
+    action: 'refresh';
+}
+/** 파일 다운로드 — blob 저장 */
+ | {
+    action: 'download';
+    endpoint: string;
+    filename?: string;
+}
+/** 브라우저 인쇄 다이얼로그 */
+ | {
+    action: 'print';
+}
+/** 배열 상태 조작 — ForEach와 함께 반복 행 편집에 쓴다 */
+ | {
+    action: 'arrayAppend';
+    key: string;
+    value?: SduiPropValue;
+} | {
+    action: 'arrayRemove';
+    key: string;
+    index: number | SduiIndexRef;
+} | {
+    action: 'arrayMove';
+    key: string;
+    from: number | SduiIndexRef;
+    to: number | SduiIndexRef;
+} | {
+    action: 'arrayUpdate';
+    key: string;
+    index: number | SduiIndexRef;
+    field: string;
+    value?: SduiPropValue;
+    fromEvent?: boolean;
+}
+/** 앱 코드에 위임하는 확장 지점 — SduiRenderer의 onCustomAction으로 전달된다. */
+ | {
+    action: 'custom';
+    name: string;
+    payload?: SduiPropValue;
+};
+interface SduiPage {
+    version: 1;
+    /** 문서 <title> 및 페이지 헤더에 쓰인다. */
+    title?: string;
+    subtitle?: string;
+    /** 실시간 채널 구독 — 어댑터의 subscribe로 위임(이벤트 수신 시 조용한 재조회) */
+    subscribe?: string[];
+    /** URL 쿼리파라미터와 동기화할 상태 키 — 딥링크/새로고침 보존용 */
+    urlState?: string[];
+    body: SduiChild[];
+}
+
+export type { SduiAction as S, SduiPropValue as a, SduiRule as b, SduiPage as c, SduiCalcRef as d, SduiChild as e, SduiIndexRef as f, SduiItemRef as g, SduiNode as h, SduiScalar as i, SduiStateRef as j };

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@wipco/sdui",
+  "version": "0.1.0",
+  "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
+  "keywords": [
+    "sdui",
+    "server-driven-ui",
+    "react",
+    "renderer"
+  ],
+  "author": "wipco-dev",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wipco-dev/wipco-sdui.git",
+    "directory": "packages/sdui"
+  },
+  "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"
+    },
+    "./rich": {
+      "types": "./dist/rich.d.ts",
+      "default": "./dist/rich.js"
+    },
+    "./meta": {
+      "types": "./dist/meta.d.ts",
+      "default": "./dist/meta.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",
+    "check:meta": "node scripts/check-meta.mjs",
+    "prepack": "pnpm run build"
+  },
+  "peerDependencies": {
+    "ol": ">=9",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "recharts": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "ol": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.7.0"
+  }
+}