@ablogcms/background-process 3.2.28-beta.0

package/README.md

@@ -0,0 +1,18 @@
+# @ablogcms/background-process
+
+バックグラウンド処理（インポート／エクスポート／バックアップ／システム更新など）の進捗を
+`ACMS_POST_Logger_ProgressJson` へのポーリングで取得し、進捗バー・完了メッセージ・処理項目一覧を
+表示するコンポーネント。
+
+## 使い方
+
+```tsx
+import { BackgroundProcess } from '@ablogcms/background-process';
+
+<BackgroundProcess type="backup_db" successMessage="バックアップが完了しました" errorMessage="バックアップに失敗しました" />;
+```
+
+- `type`: `ACMS_POST_Logger_ProgressJson` に渡す処理種別。
+- `interval`（既定 1000ms）: ポーリング間隔。
+- `timeout`（既定 180000ms）: 最終更新からの経過時間がこれを超えるとタイムアウト扱いにする。
+- `showProcessList`（既定 true）: 処理項目一覧（失敗項目は `[Error]` 付き）を表示するか。

package/dist/background-process.d.ts

@@ -0,0 +1,23 @@
+export interface ProcessItem {
+    status: string;
+    message: string;
+}
+export interface ProgressResponse {
+    processing: boolean;
+    success: boolean;
+    error: string;
+    percentage: number;
+    inProcess: string;
+    updatedAt: string;
+    processList: ProcessItem[];
+}
+export interface BackgroundProcessProps {
+    type: string;
+    successMessage: string;
+    errorMessage: string;
+    interval?: number;
+    timeout?: number;
+    showProcessList?: boolean;
+}
+declare function BackgroundProcess({ type, successMessage, errorMessage, interval, timeout, showProcessList, }: BackgroundProcessProps): import("react").JSX.Element | null;
+export default BackgroundProcess;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BackgroundProcess } from './background-process.js';
+export type { BackgroundProcessProps, ProcessItem, ProgressResponse } from './background-process.js';

package/dist/index.mjs

@@ -0,0 +1,73 @@
+// src/background-process.tsx
+import { useState, useEffect, useCallback } from "react";
+import Alert from "@ablogcms/components/alert";
+import ProgressBar from "@ablogcms/components/progress-bar";
+import { fetchClient } from "@ablogcms/fetch-client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BackgroundProcess({
+  type,
+  successMessage,
+  errorMessage,
+  interval = 1e3,
+  timeout = 18e4,
+  showProcessList = true
+}) {
+  const [json, setJson] = useState(null);
+  const [stopped, setStopped] = useState(false);
+  const poll = useCallback(async () => {
+    try {
+      const data = new FormData();
+      data.append("ACMS_POST_Logger_ProgressJson", "exec");
+      data.append("type", type);
+      data.append("formToken", window.csrfToken);
+      const response = await fetchClient.post(ACMS.Config.root, data);
+      const result = response.data;
+      const updatedAt = new Date(result.updatedAt).getTime();
+      const now = Date.now();
+      if (now - updatedAt > timeout) {
+        result.error = "\u30BF\u30A4\u30E0\u30A2\u30A6\u30C8\u3057\u307E\u3057\u305F\u3002\u30EA\u30ED\u30FC\u30C9\u3057\u3066\u51E6\u7406\u304C\u5B8C\u4E86\u3057\u3066\u3044\u308B\u304B\u78BA\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002";
+        setStopped(true);
+      }
+      setJson(result);
+      if (!result.processing) {
+        setStopped(true);
+      }
+    } catch {
+      setStopped(true);
+    }
+  }, [type, timeout]);
+  useEffect(() => {
+    const id = setInterval(() => {
+      poll();
+    }, interval);
+    if (stopped) {
+      clearInterval(id);
+    }
+    return () => clearInterval(id);
+  }, [poll, interval, stopped]);
+  if (!json) {
+    return null;
+  }
+  const { processing, success, error, percentage, inProcess, processList } = json;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    processing && /* @__PURE__ */ jsx(
+      ProgressBar,
+      {
+        value: error ? 100 : percentage,
+        variant: error ? "danger" : "info",
+        striped: true,
+        animated: true,
+        labelPosition: "overlay",
+        label: error || inProcess
+      }
+    ),
+    !processing && success && /* @__PURE__ */ jsx(Alert, { variant: "info", children: successMessage }),
+    !processing && error && /* @__PURE__ */ jsx(Alert, { variant: "warning", children: errorMessage }),
+    showProcessList && processList && processList.length > 0 && /* @__PURE__ */ jsx("ul", { children: processList.map((item) => /* @__PURE__ */ jsx("li", { className: item.status === "ng" ? "acms-admin-text-danger" : void 0, children: item.status === "ng" ? `[Error] ${item.message}` : item.message }, item.message)) })
+  ] });
+}
+var background_process_default = BackgroundProcess;
+export {
+  background_process_default as BackgroundProcess
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/background-process.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport Alert from '@ablogcms/components/alert';\nimport ProgressBar from '@ablogcms/components/progress-bar';\nimport { fetchClient } from '@ablogcms/fetch-client';\n\nexport interface ProcessItem {\n  status: string;\n  message: string;\n}\n\nexport interface ProgressResponse {\n  processing: boolean;\n  success: boolean;\n  error: string;\n  percentage: number;\n  inProcess: string;\n  updatedAt: string;\n  processList: ProcessItem[];\n}\n\nexport interface BackgroundProcessProps {\n  type: string;\n  successMessage: string;\n  errorMessage: string;\n  interval?: number;\n  timeout?: number;\n  showProcessList?: boolean;\n}\n\nfunction BackgroundProcess({\n  type,\n  successMessage,\n  errorMessage,\n  interval = 1_000,\n  timeout = 180_000,\n  showProcessList = true,\n}: BackgroundProcessProps) {\n  const [json, setJson] = useState<ProgressResponse | null>(null);\n  const [stopped, setStopped] = useState(false);\n\n  const poll = useCallback(async () => {\n    try {\n      const data = new FormData();\n      data.append('ACMS_POST_Logger_ProgressJson', 'exec');\n      data.append('type', type);\n      data.append('formToken', window.csrfToken);\n      const response = await fetchClient.post<ProgressResponse>(ACMS.Config.root, data);\n      const result: ProgressResponse = response.data;\n      const updatedAt = new Date(result.updatedAt).getTime();\n      const now = Date.now();\n\n      if (now - updatedAt > timeout) {\n        result.error = 'タイムアウトしました。リロードして処理が完了しているか確認してください。';\n        setStopped(true);\n      }\n\n      setJson(result);\n\n      if (!result.processing) {\n        setStopped(true);\n      }\n    } catch {\n      setStopped(true);\n    }\n  }, [type, timeout]);\n\n  useEffect(() => {\n    const id = setInterval(() => {\n      poll();\n    }, interval);\n\n    if (stopped) {\n      clearInterval(id);\n    }\n    return () => clearInterval(id);\n  }, [poll, interval, stopped]);\n\n  if (!json) {\n    return null;\n  }\n\n  const { processing, success, error, percentage, inProcess, processList } = json;\n\n  return (\n    <>\n      {processing && (\n        <ProgressBar\n          value={error ? 100 : percentage}\n          variant={error ? 'danger' : 'info'}\n          striped\n          animated\n          labelPosition=\"overlay\"\n          label={error || inProcess}\n        />\n      )}\n\n      {!processing && success && <Alert variant=\"info\">{successMessage}</Alert>}\n\n      {!processing && error && <Alert variant=\"warning\">{errorMessage}</Alert>}\n\n      {showProcessList && processList && processList.length > 0 && (\n        <ul>\n          {processList.map((item) => (\n            <li key={item.message} className={item.status === 'ng' ? 'acms-admin-text-danger' : undefined}>\n              {item.status === 'ng' ? `[Error] ${item.message}` : item.message}\n            </li>\n          ))}\n        </ul>\n      )}\n    </>\n  );\n}\n\nexport default BackgroundProcess;\n"],"mappings":";AAAA,SAAS,UAAU,WAAW,mBAAmB;AACjD,OAAO,WAAW;AAClB,OAAO,iBAAiB;AACxB,SAAS,mBAAmB;AAiFxB,mBAEI,KAFJ;AAvDJ,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AACpB,GAA2B;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkC,IAAI;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,OAAO,YAAY,YAAY;AACnC,QAAI;AACF,YAAM,OAAO,IAAI,SAAS;AAC1B,WAAK,OAAO,iCAAiC,MAAM;AACnD,WAAK,OAAO,QAAQ,IAAI;AACxB,WAAK,OAAO,aAAa,OAAO,SAAS;AACzC,YAAM,WAAW,MAAM,YAAY,KAAuB,KAAK,OAAO,MAAM,IAAI;AAChF,YAAM,SAA2B,SAAS;AAC1C,YAAM,YAAY,IAAI,KAAK,OAAO,SAAS,EAAE,QAAQ;AACrD,YAAM,MAAM,KAAK,IAAI;AAErB,UAAI,MAAM,YAAY,SAAS;AAC7B,eAAO,QAAQ;AACf,mBAAW,IAAI;AAAA,MACjB;AAEA,cAAQ,MAAM;AAEd,UAAI,CAAC,OAAO,YAAY;AACtB,mBAAW,IAAI;AAAA,MACjB;AAAA,IACF,QAAQ;AACN,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,YAAU,MAAM;AACd,UAAM,KAAK,YAAY,MAAM;AAC3B,WAAK;AAAA,IACP,GAAG,QAAQ;AAEX,QAAI,SAAS;AACX,oBAAc,EAAE;AAAA,IAClB;AACA,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,MAAM,UAAU,OAAO,CAAC;AAE5B,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,YAAY,SAAS,OAAO,YAAY,WAAW,YAAY,IAAI;AAE3E,SACE,iCACG;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,QAAQ,MAAM;AAAA,QACrB,SAAS,QAAQ,WAAW;AAAA,QAC5B,SAAO;AAAA,QACP,UAAQ;AAAA,QACR,eAAc;AAAA,QACd,OAAO,SAAS;AAAA;AAAA,IAClB;AAAA,IAGD,CAAC,cAAc,WAAW,oBAAC,SAAM,SAAQ,QAAQ,0BAAe;AAAA,IAEhE,CAAC,cAAc,SAAS,oBAAC,SAAM,SAAQ,WAAW,wBAAa;AAAA,IAE/D,mBAAmB,eAAe,YAAY,SAAS,KACtD,oBAAC,QACE,sBAAY,IAAI,CAAC,SAChB,oBAAC,QAAsB,WAAW,KAAK,WAAW,OAAO,2BAA2B,QACjF,eAAK,WAAW,OAAO,WAAW,KAAK,OAAO,KAAK,KAAK,WADlD,KAAK,OAEd,CACD,GACH;AAAA,KAEJ;AAEJ;AAEA,IAAO,6BAAQ;","names":[]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@ablogcms/background-process",
+  "version": "3.2.28-beta.0",
+  "type": "module",
+  "description": "バックグラウンド処理（インポート/エクスポート等）の進捗ポーリング表示コンポーネント",
+  "license": "MIT",
+  "homepage": "https://www.a-blogcms.jp",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org:appleple/ablogcms.git",
+    "directory": "packages/frontend/background-process"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@ablogcms/components": "3.2.28-beta.0",
+    "@ablogcms/fetch-client": "3.2.28-beta.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "vitest": "^4.1.9"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "@types/react": "^19.2.17"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node ../../../tools/build-package.mjs"
+  }
+}