@ampless/admin 0.2.0-alpha.2 → 0.2.0-alpha.21

package/README.ja.md

@@ -0,0 +1,73 @@
+> English: [README.md](./README.md)
+> 
+
+# @ampless/admin
+
+[ampless](https://github.com/heavymoons/ampless) 向け管理 UI ライブラリ。投稿エディター（Tiptap + Markdown + HTML）、メディアマネージャー（S3 + 画像処理）、サイト / テーマ設定、ロケール対応 UI 文字列、そしてすべてを結びつける Next.js ページファクトリーを提供します。
+
+> **プレリリース / アルファ版。** v1.0 まではマイナーバージョンでも破壊的変更が入る可能性があります。
+
+## なぜライブラリなのか？
+
+以前は管理 UI がテンプレートプロジェクト内に存在していました。バグ修正や機能追加のたびに、テンプレートと各サイト間でファイルをコピーし続ける必要がありました。`@ampless/admin` として切り出すことで、プロジェクトは `npm update @ampless/admin` を実行するだけで改善を取り込めます — 他の依存パッケージと同じアップグレードフローです。
+
+## インストール
+
+```bash
+npm install @ampless/admin@alpha @ampless/runtime@alpha ampless@alpha
+```
+
+ピア依存: `next`、`react`、`react-dom`、`aws-amplify`、`@aws-amplify/adapter-nextjs`。
+
+## 接続方法
+
+Next.js プロジェクトに `lib/admin.ts` を作成します：
+
+```ts
+import outputs from '../amplify_outputs.json'
+import cmsConfig from '../cms.config'
+import { createAdmin } from '@ampless/admin'
+import { ampless } from './ampless'
+
+export const admin = createAdmin({ outputs, cmsConfig, ampless })
+export const t = admin.t
+```
+
+各管理ルートを薄いシェルとして公開します：
+
+```tsx
+// app/(admin)/admin/posts/page.tsx
+import { admin } from '@/lib/admin'
+import { createPostsListPage } from '@ampless/admin/pages'
+export default createPostsListPage(admin)
+```
+
+```ts
+// app/api/media/[...path]/route.ts
+import { admin } from '@/lib/admin'
+import { createMediaProxyRoute } from '@ampless/admin/api'
+export const { GET } = createMediaProxyRoute(admin)
+export const runtime = 'nodejs'
+```
+
+## サブパス
+
+| サブパス                       | 内容                                                 |
+| ----------------------------- | --------------------------------------------------- |
+| `@ampless/admin`              | `createAdmin` ファクトリー + `Admin` インターフェース  |
+| `@ampless/admin/pages`        | ページファクトリー — 管理ルートごとに 1 つ             |
+| `@ampless/admin/api`          | API ルートファクトリー（`createMediaProxyRoute` など）|
+| `@ampless/admin/components`   | 高度な接続用フォーム / エディターコンポーネント         |
+
+## ロケール
+
+`createAdmin({ locale: 'ja' })` で管理 UI 文字列を日本語に切り替えます。
+オブジェクトリテラルを渡すと個別の文字列をオーバーライドできます：
+
+```ts
+createAdmin({
+  outputs,
+  cmsConfig,
+  locale: { sidebar: { brand: 'MySite Admin' } },
+})
+```

package/README.md

@@ -1,3 +1,6 @@
+> 日本語版: [README.ja.md](./README.ja.md)
+> 
+
 # @ampless/admin
 
 Admin UI library for [ampless](https://github.com/heavymoons/ampless): post

package/dist/api/index.d.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { Admin } from '../index.js';
 import 'ampless';
 import '@ampless/runtime';
-import '../i18n-ByHM_Bho.js';
+import '../i18n-MWvAMHzn.js';
 import '@aws-amplify/adapter-nextjs';
 
 /**

package/dist/chunk-2ITWLRYF.js

@@ -0,0 +1,38 @@
+// src/lib/media.ts
+var state = { outputs: null, cmsConfig: null };
+function setAdminMediaContext(outputs, cmsConfig) {
+  state.outputs = outputs;
+  state.cmsConfig = cmsConfig;
+}
+function publicMediaUrl(input) {
+  if (/^https?:\/\//.test(input)) return input;
+  let path = input.replace(/^\/+/, "");
+  if (path.startsWith("public/")) path = path.slice("public/".length);
+  const { outputs, cmsConfig } = state;
+  const delivery = cmsConfig?.media?.delivery ?? "nextjs";
+  if (delivery !== "s3-direct") return `/api/media/${path}`;
+  const storage = outputs?.storage;
+  if (!storage) return `/api/media/${path}`;
+  return `https://${storage.bucket_name}.s3.${storage.aws_region}.amazonaws.com/public/${path}`;
+}
+function createMedia(outputs, cmsConfig) {
+  const storage = outputs.storage;
+  function s3DirectUrl(path) {
+    if (!storage) return `/api/media/${path}`;
+    return `https://${storage.bucket_name}.s3.${storage.aws_region}.amazonaws.com/public/${path}`;
+  }
+  function urlFor(input) {
+    if (/^https?:\/\//.test(input)) return input;
+    let path = input.replace(/^\/+/, "");
+    if (path.startsWith("public/")) path = path.slice("public/".length);
+    const delivery = cmsConfig.media?.delivery ?? "nextjs";
+    return delivery === "s3-direct" ? s3DirectUrl(path) : `/api/media/${path}`;
+  }
+  return { publicMediaUrl: urlFor };
+}
+
+export {
+  setAdminMediaContext,
+  publicMediaUrl,
+  createMedia
+};

package/dist/chunk-5JKOPRCO.js

@@ -0,0 +1,41 @@
+'use client';
+import {
+  PostForm
+} from "./chunk-CVJCMTYB.js";
+import {
+  readAdminSiteIdFromCookie
+} from "./chunk-TZWSXAHD.js";
+import {
+  useT
+} from "./chunk-XY4JWSMS.js";
+
+// src/components/edit-post-view.tsx
+import { useEffect, useState, use } from "react";
+import { notFound } from "next/navigation";
+import { getPostById } from "ampless";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EditPostPage({ params }) {
+  const t = useT();
+  const { postId } = use(params);
+  const [post, setPost] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [missing, setMissing] = useState(false);
+  useEffect(() => {
+    const siteId = readAdminSiteIdFromCookie();
+    getPostById(postId, { siteId }).then((p) => {
+      if (!p) setMissing(true);
+      else setPost(p);
+    }).finally(() => setLoading(false));
+  }, [postId]);
+  if (loading)
+    return /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl p-4 md:p-8", children: t("common.loading") });
+  if (missing) notFound();
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl p-4 md:p-8", children: [
+    /* @__PURE__ */ jsx("h1", { className: "mb-6 text-2xl font-bold md:mb-8 md:text-3xl", children: t("posts.form.editTitle") }),
+    post && /* @__PURE__ */ jsx(PostForm, { post })
+  ] });
+}
+
+export {
+  EditPostPage
+};

package/dist/chunk-5Q6KVRZ2.js

@@ -0,0 +1,250 @@
+'use client';
+import {
+  ImageUploadDialog,
+  getMediaProcessingDefaults
+} from "./chunk-S66L5CDS.js";
+import {
+  publicMediaUrl
+} from "./chunk-2ITWLRYF.js";
+import {
+  useT
+} from "./chunk-XY4JWSMS.js";
+
+// src/components/media-uploader.tsx
+import { useState, useEffect, useCallback, useRef } from "react";
+import { uploadData, list, remove, isCancelError } from "aws-amplify/storage";
+import { processImage } from "ampless/media";
+import { Button, Input } from "@ampless/runtime/ui";
+import { Trash2, Copy, Check, FileText, Code2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var IMAGE_EXT_RE = /\.(jpe?g|png|gif|webp|avif|svg|bmp|tiff?)$/i;
+var STYLESHEET_EXT_RE = /\.css$/i;
+var SCRIPT_EXT_RE = /\.m?js$/i;
+function getExtension(path) {
+  const dot = path.lastIndexOf(".");
+  return dot >= 0 ? path.slice(dot + 1).toUpperCase() : "FILE";
+}
+function snippetFor(url, path) {
+  if (IMAGE_EXT_RE.test(path)) {
+    return `<img src="${url}" alt="" />`;
+  }
+  if (STYLESHEET_EXT_RE.test(path)) {
+    return `<link rel="stylesheet" href="${url}" />`;
+  }
+  if (SCRIPT_EXT_RE.test(path)) {
+    return `<script src="${url}"></script>`;
+  }
+  return url;
+}
+function sanitizeName(name) {
+  return name.replace(/[ -]/g, "").replace(/[\\/:*?"<>|]/g, "_").replace(/\s+/g, "_").replace(/^\.+/, "_").slice(0, 200) || "upload";
+}
+function MediaUploader() {
+  const t = useT();
+  const [items, setItems] = useState([]);
+  const [queue, setQueue] = useState([]);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState(null);
+  const [copiedPath, setCopiedPath] = useState(null);
+  const uploadTaskRef = useRef(null);
+  const cancelTokenRef = useRef({ cancelled: false });
+  const refresh = useCallback(async () => {
+    try {
+      const result = await list({ path: "public/media/" });
+      setItems(
+        result.items.map((item) => ({
+          path: item.path,
+          url: publicMediaUrl(item.path)
+        }))
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, []);
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  function handleFiles(e) {
+    const files = Array.from(e.target.files ?? []);
+    e.target.value = "";
+    if (files.length === 0) return;
+    setError(null);
+    setQueue((prev) => [...prev, ...files]);
+  }
+  async function handleDialogConfirm(file, options) {
+    const token = { cancelled: false };
+    cancelTokenRef.current = token;
+    setUploading(true);
+    setError(null);
+    let advance = true;
+    try {
+      const processed = await processImage(file, options);
+      if (token.cancelled) {
+        advance = false;
+        return;
+      }
+      const safeName = sanitizeName(processed.suggestedName);
+      const now = /* @__PURE__ */ new Date();
+      const yyyy = now.getFullYear();
+      const mm = String(now.getMonth() + 1).padStart(2, "0");
+      const path = `public/media/${yyyy}/${mm}/${Date.now()}-${safeName}`;
+      const task = uploadData({
+        path,
+        data: processed.blob,
+        options: { contentType: processed.mime }
+      });
+      uploadTaskRef.current = task;
+      await task.result;
+      await refresh();
+    } catch (err) {
+      if (isCancelError(err) || token.cancelled) {
+        advance = false;
+      } else {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    } finally {
+      uploadTaskRef.current = null;
+      setUploading(false);
+      if (advance) {
+        setQueue((prev) => prev.slice(1));
+      }
+    }
+  }
+  function handleDialogSkip() {
+    if (uploading) return;
+    setQueue((prev) => prev.slice(1));
+  }
+  function handleDialogCancel() {
+    cancelTokenRef.current.cancelled = true;
+    uploadTaskRef.current?.cancel();
+    setQueue([]);
+  }
+  async function handleDelete(path) {
+    if (!confirm(t("media.deleteConfirm"))) return;
+    try {
+      await remove({ path });
+      await refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+  async function handleCopy(item, mode) {
+    const text = mode === "url" ? item.url : snippetFor(item.url, item.path);
+    await navigator.clipboard.writeText(text);
+    const key = `${item.path}:${mode}`;
+    setCopiedPath(key);
+    setTimeout(() => setCopiedPath((p) => p === key ? null : p), 1500);
+  }
+  const currentFile = queue[0] ?? null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-md border p-4", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "file",
+          multiple: true,
+          onChange: handleFiles,
+          disabled: uploading
+        }
+      ),
+      uploading && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: t("media.uploading") }),
+      !uploading && queue.length > 0 && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: t("media.queued", { count: queue.length }) })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx(
+      ImageUploadDialog,
+      {
+        file: currentFile,
+        remaining: queue.length,
+        busy: uploading,
+        defaults: getMediaProcessingDefaults(),
+        onConfirm: handleDialogConfirm,
+        onSkip: handleDialogSkip,
+        onCancel: handleDialogCancel
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4", children: items.map((item) => {
+      const isImage = IMAGE_EXT_RE.test(item.path);
+      const isStylesheet = STYLESHEET_EXT_RE.test(item.path);
+      const isScript = SCRIPT_EXT_RE.test(item.path);
+      const filename = item.path.split("/").pop() ?? "";
+      const ext = getExtension(item.path);
+      const tagSnippet = snippetFor(item.url, item.path);
+      const tagDiffersFromUrl = tagSnippet !== item.url;
+      const urlCopied = copiedPath === `${item.path}:url`;
+      const tagCopied = copiedPath === `${item.path}:tag`;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative overflow-hidden rounded-md border bg-[var(--card)]",
+          children: [
+            isImage ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: item.url,
+                  alt: item.path,
+                  className: "aspect-square w-full object-cover"
+                }
+              )
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex aspect-square w-full flex-col items-center justify-center gap-2 bg-muted text-muted-foreground", children: [
+              isStylesheet || isScript ? /* @__PURE__ */ jsx(Code2, { className: "h-8 w-8" }) : /* @__PURE__ */ jsx(FileText, { className: "h-8 w-8" }),
+              /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs font-semibold", children: [
+                ".",
+                ext.toLowerCase()
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t px-2 py-1 text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", title: filename, children: filename }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-6 w-6",
+                    onClick: () => handleCopy(item, "url"),
+                    title: t("media.copyUrl"),
+                    children: urlCopied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                  }
+                ),
+                tagDiffersFromUrl && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-6 w-6",
+                    onClick: () => handleCopy(item, "tag"),
+                    title: t("media.copyTag"),
+                    children: tagCopied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Code2, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-6 w-6",
+                    onClick: () => handleDelete(item.path),
+                    title: t("media.delete"),
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        item.path
+      );
+    }) }),
+    items.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground", children: t("media.empty") })
+  ] });
+}
+
+export {
+  MediaUploader
+};

package/dist/chunk-7IR4F7GA.js

@@ -0,0 +1,6 @@
+// src/lib/admin-site-cookie.ts
+var ADMIN_SITE_COOKIE = "admin-site-id";
+
+export {
+  ADMIN_SITE_COOKIE
+};

package/dist/chunk-A3SWBQA6.js

@@ -0,0 +1,71 @@
+'use client';
+import {
+  readAdminSiteIdFromCookie
+} from "./chunk-TZWSXAHD.js";
+import {
+  useT
+} from "./chunk-XY4JWSMS.js";
+
+// src/components/posts-list-view.tsx
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { listPosts } from "ampless";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@ampless/runtime/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PostsList() {
+  const t = useT();
+  const [posts, setPosts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    const siteId = readAdminSiteIdFromCookie();
+    listPosts({ status: "all", siteId }).then(setPosts).finally(() => setLoading(false));
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl p-4 md:p-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-wrap items-center justify-between gap-3 md:mb-8", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold md:text-3xl", children: t("posts.list.title") }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: "/admin/posts/new", children: t("posts.list.newButton") }) })
+    ] }),
+    loading ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("common.loading") }) : posts.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-md border p-12 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("posts.list.empty") }),
+      /* @__PURE__ */ jsx(Button, { asChild: true, className: "mt-4", children: /* @__PURE__ */ jsx(Link, { href: "/admin/posts/new", children: t("posts.list.createFirst") }) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: t("posts.list.columnTitle") }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("posts.list.columnStatus") }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("posts.list.columnSlug") }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("posts.list.columnUpdated") })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: posts.map((post) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: `/admin/posts/${post.postId}`,
+            className: "font-medium hover:underline",
+            children: post.title
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: post.status === "published" ? "inline-block rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-700" : "inline-block rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-700",
+            children: t(`common.${post.status}`)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-xs text-muted-foreground", children: post.slug }),
+        /* @__PURE__ */ jsx(TableCell, { className: "text-sm text-muted-foreground", children: post.publishedAt ? new Date(post.publishedAt).toLocaleDateString() : "\u2014" })
+      ] }, post.postId)) })
+    ] }) })
+  ] });
+}
+
+export {
+  PostsList
+};

package/dist/chunk-BC4B6DLO.js

@@ -0,0 +1,21 @@
+'use client';
+import {
+  PostForm
+} from "./chunk-CVJCMTYB.js";
+import {
+  useT
+} from "./chunk-XY4JWSMS.js";
+
+// src/components/new-post-view.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function NewPostPage() {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl p-4 md:p-8", children: [
+    /* @__PURE__ */ jsx("h1", { className: "mb-6 text-2xl font-bold md:mb-8 md:text-3xl", children: t("posts.form.newTitle") }),
+    /* @__PURE__ */ jsx(PostForm, {})
+  ] });
+}
+
+export {
+  NewPostPage
+};