@nextclaw/ui 0.12.23 → 0.12.25

package/src/features/marketplace/components/curated-shelves/marketplace-curated-scene-route.test.tsx

@@ -0,0 +1,235 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MarketplacePage } from "@/features/marketplace";
+import type {
+  MarketplaceInstalledView,
+  MarketplaceItemSummary,
+  MarketplaceListView,
+} from "@/shared/lib/api";
+
+type ItemsQueryState = {
+  data?: MarketplaceListView;
+  isLoading: boolean;
+  isFetching: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  isError: boolean;
+  error: Error | null;
+  fetchNextPage?: () => Promise<unknown>;
+};
+
+const mocks = vi.hoisted(() => ({
+  navigate: vi.fn(),
+  docOpen: vi.fn(),
+  routeParams: {} as { scene?: string },
+  itemsQuery: null as unknown as ItemsQueryState,
+}));
+
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+  return {
+    ...(actual as object),
+    useNavigate: () => mocks.navigate,
+    useParams: () => mocks.routeParams,
+  };
+});
+
+vi.mock("@/shared/components/doc-browser", () => ({
+  useDocBrowser: () => ({
+    open: mocks.docOpen,
+  }),
+}));
+
+vi.mock("@/app/components/i18n-provider", () => ({
+  useI18n: () => ({
+    language: "en",
+  }),
+}));
+
+vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
+  useConfirmDialog: () => ({
+    confirm: vi.fn(),
+    ConfirmDialog: () => null,
+  }),
+}));
+
+vi.mock("@/features/marketplace/hooks/use-marketplace", () => ({
+  useMarketplaceItems: () => mocks.itemsQuery,
+  useMarketplaceSkillScenes: () => ({
+    data: {
+      scenes: [
+        {
+          scene: "development-debugging",
+          title: "Development",
+          description: "Review, debug, analyze, and verify delivery work.",
+        },
+      ],
+    },
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+  }),
+  useMarketplaceSkillSceneCounts: () => new Map([["development-debugging", 2]]),
+  useMarketplaceInstalled: () => ({
+    data: {
+      type: "skill",
+      total: 0,
+      specs: [],
+      records: [],
+    } satisfies MarketplaceInstalledView,
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+  }),
+  useInstallMarketplaceItem: () => ({
+    mutateAsync: vi.fn(),
+  }),
+  useManageMarketplaceItem: () => ({
+    mutateAsync: vi.fn(),
+  }),
+}));
+
+function createMarketplaceItem(
+  overrides: Partial<MarketplaceItemSummary> = {},
+): MarketplaceItemSummary {
+  return {
+    id: "skill-web-search",
+    slug: "web-search",
+    type: "skill",
+    name: "Web Search",
+    summary: "Search the web from the marketplace",
+    summaryI18n: { en: "Search the web from the marketplace" },
+    tags: ["search"],
+    author: "NextClaw",
+    install: {
+      kind: "marketplace",
+      spec: "@nextclaw/web-search",
+      command: "nextclaw skills install @nextclaw/web-search",
+    },
+    updatedAt: "2026-03-17T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function createSceneItems(): MarketplaceItemSummary[] {
+  return [
+    createMarketplaceItem({
+      id: "skill-code-review",
+      slug: "code-review",
+      name: "Code Review",
+      summary: "Review code changes",
+      tags: ["code", "review"],
+    }),
+    createMarketplaceItem({
+      id: "skill-debug-lab",
+      slug: "debug-lab",
+      name: "Debug Lab",
+      summary: "Debug runtime failures",
+      tags: ["debug"],
+    }),
+    createMarketplaceItem({
+      id: "skill-calendar-sync",
+      slug: "calendar-sync",
+      name: "Calendar Sync",
+      summary: "Sync calendar events",
+      tags: ["calendar"],
+    }),
+    createMarketplaceItem({
+      id: "skill-writing-room",
+      slug: "writing-room",
+      name: "Writing Room",
+      summary: "Draft long-form writing",
+      tags: ["writing"],
+    }),
+  ];
+}
+
+function createItemsQuery(items: MarketplaceItemSummary[]) {
+  return {
+    data: {
+      total: items.length,
+      page: 1,
+      pageSize: 20,
+      totalPages: 1,
+      sort: "relevance",
+      items,
+    } satisfies MarketplaceListView,
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    hasNextPage: false,
+    fetchNextPage: vi.fn(),
+  };
+}
+
+describe("Marketplace curated scene routes", () => {
+  beforeEach(() => {
+    mocks.navigate.mockReset();
+    mocks.docOpen.mockReset();
+    mocks.routeParams = {};
+    mocks.itemsQuery = createItemsQuery(createSceneItems());
+  });
+
+  it("opens curated goals through a scene route", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<MarketplacePage forcedType="skills" />);
+
+    await user.click(screen.getByRole("button", { name: /Development/ }));
+
+    expect(screen.getByText("2 skills")).toBeTruthy();
+    expect(mocks.navigate).toHaveBeenCalledWith(
+      "/skills/scenes/development-debugging",
+    );
+    expect(container.querySelector("input")?.getAttribute("value") ?? "").toBe("");
+  });
+
+  it("renders scene routes as adaptive grids without the catalog shell", async () => {
+    const user = userEvent.setup();
+    mocks.routeParams = { scene: "development-debugging" };
+    mocks.itemsQuery = createItemsQuery(createSceneItems().slice(0, 2));
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.getByRole("button", { name: "Back" })).toBeTruthy();
+    expect(screen.getByText("Code Review")).toBeTruthy();
+    expect(screen.queryByText("Calendar Sync")).toBeNull();
+    expect(screen.queryByText("Skill Catalog")).toBeNull();
+    expect(screen.queryByPlaceholderText("Search skills...")).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: "Back" }));
+
+    expect(mocks.navigate).toHaveBeenCalledWith("/skills");
+  });
+
+  it("shows a scene loading state instead of stale catalog items", () => {
+    mocks.routeParams = { scene: "development-debugging" };
+    mocks.itemsQuery = {
+      ...createItemsQuery([]),
+      data: undefined,
+      isLoading: true,
+      isFetching: true,
+    };
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.getByTestId("marketplace-scene-skeleton")).toBeTruthy();
+    expect(screen.queryByText("Calendar Sync")).toBeNull();
+    expect(screen.queryByPlaceholderText("Search skills...")).toBeNull();
+  });
+
+  it("keeps infinite loading available inside scene routes", () => {
+    mocks.routeParams = { scene: "development-debugging" };
+    mocks.itemsQuery = {
+      ...createItemsQuery(createSceneItems().slice(0, 2)),
+      hasNextPage: true,
+      isFetchingNextPage: true,
+    };
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.getByTestId("marketplace-loading-more")).toBeTruthy();
+  });
+});

package/src/features/marketplace/components/curated-shelves/marketplace-curated-shelves.config.ts

@@ -0,0 +1,162 @@
+import {
+  BriefcaseBusiness,
+  Cpu,
+  Globe2,
+  MessagesSquare,
+  PenLine,
+  Sparkles,
+  TerminalSquare,
+} from "lucide-react";
+import type { ComponentType } from "react";
+
+export type MarketplaceShelfLocalizedText = {
+  zh: string;
+  en: string;
+};
+
+export type MarketplaceShelfSceneVisual = {
+  scene: string;
+  title?: MarketplaceShelfLocalizedText;
+  summary?: MarketplaceShelfLocalizedText;
+  icon: ComponentType<{ className?: string }>;
+  tone: keyof typeof MARKETPLACE_SHELF_TONE_STYLES;
+  span: string;
+};
+
+export const MARKETPLACE_SHELF_SCENE_VISUALS: MarketplaceShelfSceneVisual[] = [
+  {
+    scene: "development-debugging",
+    title: { zh: "开发与调试", en: "Development" },
+    summary: {
+      zh: "代码审查、错误定位、架构分析与交付验证。",
+      en: "Review, debug, analyze, and verify delivery work.",
+    },
+    icon: TerminalSquare,
+    tone: "dark",
+    span: "md:col-span-2",
+  },
+  {
+    scene: "office-collaboration",
+    title: { zh: "办公协作", en: "Office Work" },
+    summary: {
+      zh: "连接文档、日历、会议、邮件和团队通信。",
+      en: "Connect docs, calendars, meetings, mail, and teams.",
+    },
+    icon: BriefcaseBusiness,
+    tone: "green",
+    span: "md:col-span-2",
+  },
+  {
+    scene: "writing-content",
+    title: { zh: "写作与内容", en: "Writing" },
+    summary: {
+      zh: "把调研、写作、润色和发布组织成连续工作流。",
+      en: "Turn research, writing, polishing, and publishing into one flow.",
+    },
+    icon: PenLine,
+    tone: "amber",
+    span: "md:col-span-2",
+  },
+  {
+    scene: "browser-automation",
+    title: { zh: "浏览器自动化", en: "Browser" },
+    summary: {
+      zh: "操作网页、捕获动态内容并验证真实用户路径。",
+      en: "Operate pages, capture dynamic content, and verify user paths.",
+    },
+    icon: Globe2,
+    tone: "blue",
+    span: "md:col-span-2",
+  },
+  {
+    scene: "local-environment",
+    title: { zh: "本地环境", en: "Local" },
+    summary: {
+      zh: "管理终端、文件、运行时和本地服务。",
+      en: "Manage shells, files, runtimes, and local services.",
+    },
+    icon: Cpu,
+    tone: "violet",
+    span: "md:col-span-1",
+  },
+  {
+    scene: "social-platforms",
+    title: { zh: "社交平台", en: "Social" },
+    summary: {
+      zh: "处理发布、互动、检索和内容分发。",
+      en: "Handle posting, interaction, search, and distribution.",
+    },
+    icon: MessagesSquare,
+    tone: "sky",
+    span: "md:col-span-1",
+  },
+  {
+    scene: "nextclaw-official",
+    title: { zh: "NextClaw 官方", en: "NextClaw Official" },
+    summary: {
+      zh: "优先查看由 NextClaw 维护的原生能力。",
+      en: "Browse native capabilities maintained by NextClaw.",
+    },
+    icon: Sparkles,
+    tone: "teal",
+    span: "md:col-span-2",
+  },
+];
+
+export const MARKETPLACE_SHELF_FALLBACK_VISUAL: Omit<MarketplaceShelfSceneVisual, "scene"> = {
+  icon: Sparkles,
+  tone: "dark",
+  span: "md:col-span-2",
+};
+
+export const MARKETPLACE_SHELF_TONE_STYLES = {
+  dark: {
+    card: "border-gray-200/80 bg-white text-gray-950",
+    icon: "border-stone-600 bg-stone-600 text-white",
+    title: "text-gray-950",
+    text: "text-gray-500",
+    meta: "text-gray-400",
+  },
+  blue: {
+    card: "border-gray-200/80 bg-white text-gray-950",
+    icon: "border-cyan-600 bg-cyan-600 text-white",
+    title: "text-gray-950",
+    text: "text-gray-500",
+    meta: "text-gray-400",
+  },
+  green: {
+    card: "border-gray-200/80 bg-white text-gray-950",
+    icon: "border-emerald-600 bg-emerald-600 text-white",
+    title: "text-gray-950",
+    text: "text-gray-500",
+    meta: "text-gray-400",
+  },
+  amber: {
+    card: "border-gray-200/80 bg-white text-gray-950",
+    icon: "border-amber-600 bg-amber-600 text-white",
+    title: "text-gray-950",
+    text: "text-gray-500",
+    meta: "text-gray-400",
+  },
+  violet: {
+    card: "border-gray-200/80 bg-white text-gray-950",
+    icon: "border-violet-500 bg-violet-500 text-white",
+    title: "text-gray-950",
+    text: "text-gray-500",
+    meta: "text-gray-400",
+  },
+  sky: {
+    card: "border-gray-200/80 bg-white text-gray-950",
+    icon: "border-sky-500 bg-sky-500 text-white",
+    title: "text-gray-950",
+    text: "text-gray-500",
+    meta: "text-gray-400",
+  },
+  teal: {
+    card: "border-gray-200/80 bg-white text-gray-950",
+    icon: "border-teal-600 bg-teal-600 text-white",
+    title: "text-gray-950",
+    text: "text-gray-500",
+    meta: "text-gray-400",
+  },
+} as const;