📝 Docs: 添加商店表单支持 (#2460)

Co-authored-by: Ju4tCode <42488585+yanyongyu@users.noreply.github.com>

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} />
+  );
+}

website/src/components/Form/index.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from "react";
+
+import clsx from "clsx";
+
+import "./styles.css";
+
+import TagFormItem from "./Items/Tag";
+
+import { fetchRegistryData, Resource } from "@/libs/store";
+import { Tag as TagType } from "@/types/tag";
+
+export type FormItemData = {
+  type: string;
+  name: string;
+  labelText: string;
+};
+
+export type FormItemGroup = {
+  name: string;
+  items: FormItemData[];
+};
+
+export type Props = {
+  children?: React.ReactNode;
+  type: Resource["resourceType"];
+  formItems: FormItemGroup[];
+  handleSubmit: (result: Record<string, string>) => void;
+};
+
+export function Form({
+  type,
+  children,
+  formItems,
+  handleSubmit,
+}: Props): JSX.Element {
+  const [currentStep, setCurrentStep] = useState<number>(0);
+  const [result, setResult] = useState<Record<string, string>>({});
+  const [allowTags, setAllowTags] = useState<TagType[]>([]);
+
+  // load tags asynchronously
+  useEffect(() => {
+    fetchRegistryData(type)
+      .then((data) =>
+        setAllowTags(
+          data
+            .filter((item) => item.tags.length > 0)
+            .map((ele) => ele.tags)
+            .flat()
+        )
+      )
+      .catch((e) => {
+        console.error(e);
+      });
+  }, [type]);
+
+  const setFormValue = (key: string, value: string) => {
+    setResult({ ...result, [key]: value });
+  };
+
+  const handleNextStep = () => {
+    const currentStepNames = formItems[currentStep].items.map(
+      (item) => item.name
+    );
+    if (currentStepNames.every((name) => result[name]))
+      setCurrentStep(currentStep + 1);
+    else return;
+  };
+  const onPrev = () => currentStep > 0 && setCurrentStep(currentStep - 1);
+  const onNext = () =>
+    currentStep < formItems.length - 1
+      ? handleNextStep()
+      : handleSubmit(result);
+
+  return (
+    <>
+      <ul className="steps">
+        {formItems.map((item, index) => (
+          <li
+            key={index}
+            className={clsx("step", currentStep === index && "step-primary")}
+          >
+            {item.name}
+          </li>
+        ))}
+      </ul>
+      <div className="form-control w-full min-h-[300px]">
+        {children ||
+          formItems[currentStep].items.map((item) => (
+            <FormItem
+              key={item.name}
+              type={item.type}
+              name={item.name}
+              labelText={item.labelText}
+              allowTags={allowTags}
+              result={result}
+              setResult={setFormValue}
+            />
+          ))}
+      </div>
+      <div className="flex justify-between">
+        <button
+          className={clsx("form-btn form-btn-prev", {
+            "form-btn-hidden": currentStep === 0,
+          })}
+          onClick={onPrev}
+        >
+          上一步
+        </button>
+        <button className="form-btn form-btn-next" onClick={onNext}>
+          {currentStep === formItems.length - 1 ? "提交" : "下一步"}
+        </button>
+      </div>
+    </>
+  );
+}
+
+export function FormItem({
+  type,
+  name,
+  labelText,
+  allowTags,
+  result,
+  setResult,
+}: FormItemData & {
+  allowTags: TagType[];
+  result: Record<string, string>;
+  setResult: (key: string, value: string) => void;
+}): JSX.Element {
+  return (
+    <>
+      <label className="label">
+        <span className="label-text">{labelText}</span>
+      </label>
+      {type === "text" && (
+        <input
+          value={result[name] || ""}
+          type="text"
+          name={name}
+          onChange={(e) => setResult(name, e.target.value)}
+          placeholder="请输入"
+          className={clsx("form-input", {
+            "form-input-error": !result[name],
+          })}
+        />
+      )}
+      {type === "text" && !result[name] && (
+        <label className="label">
+          <span className="form-label form-label-error">请输入{labelText}</span>
+        </label>
+      )}
+      {type === "tag" && (
+        <TagFormItem
+          allowTags={allowTags}
+          onTagUpdate={(tags) => setResult(name, JSON.stringify(tags))}
+        />
+      )}
+    </>
+  );
+}

website/src/components/Form/styles.css

@@ -0,0 +1,31 @@
+.form-btn {
+  @apply btn btn-sm btn-primary no-animation;
+
+  &-prev {
+    @apply mr-auto;
+  }
+
+  &-next {
+    @apply ml-auto;
+  }
+
+  &-hidden {
+    @apply hidden;
+  }
+}
+
+.form-input {
+  @apply input input-bordered w-full;
+
+  &-error {
+    @apply input-error;
+  }
+}
+
+.form-label {
+  @apply text-xs;
+
+  &-error {
+    @apply text-error;
+  }
+}