Docs: 添加商店表单支持

website/package.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.4.1",
     "@tsconfig/docusaurus": "^1.0.5",
+    "@types/react-color": "^3.0.10",
     "asciinema-player": "^3.5.0",
     "typescript": "^4.7.4"
   },

website/src/components/Form/Adapter.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { Form } from ".";
+
+export default function AdapterForm(): JSX.Element {
+  const formItems = [
+    {
+      name: "基本信息",
+      items: [
+        {
+          type: "text",
+          name: "name",
+          labelText: "适配器名称",
+        },
+        { type: "text", name: "description", labelText: "适配器描述" },
+        {
+          type: "text",
+          name: "homepage",
+          labelText: "适配器项目仓库/主页链接",
+        },
+      ],
+    },
+    {
+      name: "包信息",
+      items: [
+        { type: "text", name: "pypi", labelText: "PyPI 项目名" },
+        { type: "text", name: "module", labelText: "适配器 import 包名" },
+      ],
+    },
+    {
+      name: "其他信息",
+      items: [{ type: "tag", name: "tags", labelText: "标签" }],
+    },
+  ];
+  const handleSubmit = (result: Record<string, string>) => {
+    window.open(
+      `https://github.com/nonebot/nonebot2/issues/new?${new URLSearchParams({
+        assignees: "",
+        labels: "Adapter",
+        projects: "",
+        template: "adapter_publish.yml",
+        title: `Adapter: ${result.name}`,
+        ...result,
+      })}`
+    );
+  };
+
+  return (
+    <Form type="adapter" formItems={formItems} handleSubmit={handleSubmit} />
+  );
+}

website/src/components/Form/Bot.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { Form } from ".";
+
+export default function BotForm(): JSX.Element {
+  const formItems = [
+    {
+      name: "基本信息",
+      items: [
+        {
+          type: "text",
+          name: "name",
+          labelText: "机器人名称",
+        },
+        { type: "text", name: "description", labelText: "机器人描述" },
+        {
+          type: "text",
+          name: "homepage",
+          labelText: "机器人项目仓库/主页链接",
+        },
+      ],
+    },
+    {
+      name: "其他信息",
+      items: [{ type: "tag", name: "tags", labelText: "标签" }],
+    },
+  ];
+
+  const handleSubmit = (result: Record<string, string>) => {
+    window.open(
+      `https://github.com/nonebot/nonebot2/issues/new?${new URLSearchParams({
+        assignees: "",
+        labels: "Bot",
+        projects: "",
+        template: "bot_publish.yml",
+        title: `Bot: ${result.name}`,
+        ...result,
+      })}`
+    );
+  };
+
+  return <Form type="bot" formItems={formItems} handleSubmit={handleSubmit} />;
+}

website/src/components/Form/Items/Tag/index.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+
+import clsx from "clsx";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ChromePicker, type ColorResult } from "react-color";
+
+import "./styles.css";
+
+import TagComponent from "@/components/Tag";
+import { Tag as TagType } from "@/types/tag";
+
+export type Props = {
+  allowTags: TagType[];
+  onTagUpdate: (tags: TagType[]) => void;
+};
+
+export default function TagFormItem({
+  allowTags,
+  onTagUpdate,
+}: Props): JSX.Element {
+  const [tags, setTags] = useState<TagType[]>([]);
+  const [label, setLabel] = useState<TagType["label"]>("");
+  const [color, setColor] = useState<TagType["color"]>("#ea5252");
+  const slicedTags = Array.from(
+    new Set(
+      allowTags
+        .filter((tag) => tag.label.toLocaleLowerCase().includes(label))
+        .map((e) => e.label)
+    )
+  ).slice(0, 5);
+
+  const validateTag = () => {
+    return label.length >= 1 && label.length <= 10;
+  };
+  const newTag = () => {
+    if (tags.length >= 3) {
+      return;
+    }
+    if (validateTag()) {
+      const tag: TagType = { label, color };
+      setTags([...tags, tag]);
+      onTagUpdate(tags);
+    }
+  };
+  const delTag = (index: number) => {
+    setTags(tags.filter((_, i) => i !== index));
+    onTagUpdate(tags);
+  };
+  const onChangeColor = (color: ColorResult) => {
+    setColor(color.hex as TagType["color"]);
+  };
+
+  return (
+    <>
+      <label className="flex flex-wrap gap-x-1 gap-y-1">
+        {tags.map((tag, index) => (
+          <TagComponent
+            key={index}
+            {...tag}
+            className="cursor-pointer"
+            onClick={() => delTag(index)}
+          />
+        ))}
+        {tags.length < 3 && (
+          <span
+            className={clsx("add-btn", { "add-btn-disabled": !validateTag() })}
+            onClick={() => newTag()}
+          >
+            <FontAwesomeIcon className="pr-1" icon={["fas", "plus"]} />
+            新建标签
+          </span>
+        )}
+      </label>
+      <div className="form-item-container">
+        <span className="form-item-title">标签名称</span>
+        <div className="dropdown dropdown-bottom w-full">
+          <input
+            type="text"
+            value={label}
+            className="form-item form-item-input"
+            placeholder="请输入"
+            onChange={(e) => setLabel(e.target.value)}
+          />
+          {slicedTags.length > 0 && (
+            <ul
+              tabIndex={0}
+              className="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-52"
+            >
+              {slicedTags.map((tag) => (
+                <li key={tag}>
+                  <a onClick={() => setLabel(tag)}>{tag}</a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+      <div className="form-item-container">
+        <span className="form-item-title">标签颜色</span>
+        <ChromePicker
+          className="my-4 fix-input-color"
+          color={color}
+          disableAlpha={true}
+          onChangeComplete={onChangeColor}
+        />
+      </div>
+    </>
+  );
+}

website/src/components/Form/Items/Tag/styles.css

@@ -0,0 +1,35 @@
+.add-btn {
+  @apply px-2 select-none cursor-pointer min-w-[64px] rounded-full hover:bg-opacity-[.08];
+  @apply flex justify-center items-center border-dashed border-2;
+
+  &-disabled {
+    @apply pointer-events-none opacity-60;
+  }
+}
+
+.form-item {
+  @apply basis-3/4;
+
+  &-title {
+    @apply basis-1/4 label-text;
+  }
+
+  &-input {
+    @apply input input-sm input-bordered;
+  }
+
+  &-select {
+    @apply select select-sm select-bordered;
+  }
+
+  &-container {
+    @apply flex items-center mt-2;
+  }
+}
+
+.fix-input-color {
+  @apply !text-base-content !bg-base-100;
+  input {
+    @apply !text-base-content !bg-base-100;
+  }
+}

website/src/components/Form/Plugin.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { Form } from ".";
+
+export default function PluginForm(): JSX.Element {
+  const formItems = [
+    {
+      name: "包信息",
+      items: [
+        { type: "text", name: "pypi", labelText: "PyPI 项目名" },
+        { type: "text", name: "module", labelText: "插件 import 包名" },
+      ],
+    },
+    {
+      name: "其他信息",
+      items: [{ type: "tag", name: "tags", labelText: "标签" }],
+    },
+  ];
+  const handleSubmit = (result: Record<string, string>) => {
+    window.open(
+      `https://github.com/nonebot/nonebot2/issues/new?${new URLSearchParams({
+        assignees: "",
+        labels: "Plugin",
+        projects: "",
+        template: "plugin_publish.yml",
+        title: `Plugin: ${result.pypi}`,
+        ...result,
+      })}`
+    );
+  };
+
+  return (
+    <Form type="plugin" formItems={formItems} handleSubmit={handleSubmit} />
+  );
+}