[refactor] simplify Copilot's source codes

Author: TechQuery

app/page.tsx

@@ -1,4 +1,4 @@
-import { ComponentCard } from "@/components/component-card";
+import { ComponentCard } from "@/components/example/component-card";
 import { HelloWorld } from "@/registry/new-york/blocks/hello-world/hello-world";
 import { ExampleForm } from "@/registry/new-york/blocks/example-form/example-form";
 import PokemonPage from "@/registry/new-york/blocks/complex-component/page";

components/component-card.tsx components/example/component-card.tsxcomponents/component-card.tsx renamed to components/example/component-card.tsx

@@ -0,0 +1,34 @@
+import { GitRepository } from "mobx-github";
+
+import { i18n, topicStore } from "@/models/example";
+import { Field } from "@/registry/new-york/blocks/rest-form/rest-form";
+import { SearchableInput } from "@/registry/new-york/blocks/searchable-input/searchable-input";
+
+export const fields: Field<GitRepository>[] = [
+  {
+    key: "full_name",
+    renderLabel: "Repository Name",
+    required: true,
+    minLength: 3,
+    invalidMessage: "Input 3 characters at least",
+  },
+  { key: "homepage", type: "url", renderLabel: "Home Page" },
+  { key: "language", renderLabel: "Programming Language" },
+  {
+    key: "topics",
+    renderLabel: "Topic",
+    renderInput: ({ topics }) => (
+      <SearchableInput
+        translator={i18n}
+        store={topicStore}
+        labelKey="name"
+        valueKey="name"
+        placeholder="search GitHub topics"
+        multiple
+        defaultValue={topics?.map((value) => ({ value, label: value }))}
+      />
+    ),
+  },
+  { key: "stargazers_count", type: "number", renderLabel: "Star Count" },
+  { key: "description", renderLabel: "Description", rows: 3 },
+];

components/example/form.tsx

@@ -0,0 +1,49 @@
+import { components, operations } from "@octokit/openapi-types";
+import { githubClient, RepositoryModel } from "mobx-github";
+import { TranslationModel } from "mobx-i18n";
+import { ListModel, Filter } from "mobx-restful";
+import { buildURLData } from "web-utility";
+
+export const i18n = new TranslationModel({
+  en_US: {
+    load_more: "Load more",
+    no_more: "No more",
+    submit: "Submit",
+    cancel: "Cancel",
+  },
+});
+
+type Topic = components["schemas"]["topic-search-result-item"];
+
+type TopicSearchResponse =
+  operations["search/topics"]["responses"]["200"]["content"]["application/json"];
+
+const GITHUB_TOKEN = process.env.GITHUB_TOKEN;
+
+githubClient.use(({ request }, next) => {
+  if (GITHUB_TOKEN)
+    request.headers = {
+      ...request.headers,
+      Authorization: `Bearer ${GITHUB_TOKEN}`,
+    };
+  return next();
+});
+
+class GitHubTopicModel extends ListModel<Topic> {
+  baseURI = "search/topics";
+  client = githubClient;
+
+  async loadPage(pageIndex: number, pageSize: number, { name }: Filter<Topic>) {
+    const { body } = await this.client.get<TopicSearchResponse>(
+      `${this.baseURI}?${buildURLData({
+        q: name,
+        page: pageIndex,
+        per_page: pageSize,
+      })}`
+    );
+    return { pageData: body!.items, totalCount: body!.total_count };
+  }
+}
+
+export const repositoryStore = new RepositoryModel("idea2app"),
+  topicStore = new GitHubTopicModel();