@nocobase/portal-template-default 1.0.0 → 1.0.2

package/src/pages/blog-posts/edit.tsx

@@ -1,197 +0,0 @@
-import { useForm } from "@refinedev/react-hook-form";
-import { useSelect } from "@refinedev/core";
-import { useEffect } from "react";
-import { useNavigate } from "react-router";
-import { Textarea } from "@/components/ui/textarea";
-
-import { EditView } from "@/components/resources/views/edit-view";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-
-export const BlogPostEdit = () => {
-  const navigate = useNavigate();
-
-  const {
-    refineCore: { onFinish, query },
-    ...form
-  } = useForm({
-    refineCoreProps: {
-      meta: {
-        appends: ["category"],
-      },
-    },
-  });
-
-  const blogPostsData = query?.data?.data;
-  const defaultCategoryId =
-    blogPostsData?.categoryId ?? blogPostsData?.category?.id;
-
-  useEffect(() => {
-    if (defaultCategoryId != null && !form.getValues("categoryId")) {
-      form.setValue("categoryId", defaultCategoryId.toString(), {
-        shouldDirty: false,
-      });
-    }
-  }, [defaultCategoryId, form]);
-
-  const { options: categoryOptions } = useSelect({
-    resource: "categories",
-    defaultValue: defaultCategoryId?.toString(),
-    optionLabel: "title",
-    optionValue: "id",
-    pagination: {
-      currentPage: 1,
-      pageSize: 100,
-    },
-  });
-
-  function onSubmit(values: Record<string, string>) {
-    onFinish(values);
-  }
-
-  return (
-    <EditView>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="resource-form">
-          <FormField
-            control={form.control}
-            name="title"
-            rules={{ required: "Title is required" }}
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Title</FormLabel>
-                <FormControl
-                  render={<Input
-                    {...field}
-                    value={field.value || ""}
-                    placeholder="Enter title"
-                  />}
-                />
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="content"
-            rules={{ required: "Content is required" }}
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Content</FormLabel>
-                <FormControl
-                  render={<Textarea
-                    {...field}
-                    value={field.value || ""}
-                    placeholder="Enter content"
-                    rows={10}
-                  />}
-                />
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="categoryId"
-            rules={{ required: "Category is required" }}
-            render={({ field }) => {
-              const selectedCategoryId = field.value ?? defaultCategoryId;
-
-              return <FormItem>
-                <FormLabel>Category</FormLabel>
-                <Select
-                  items={categoryOptions?.map((option) => ({
-                    label: option.label,
-                    value: option.value.toString(),
-                  }))}
-                  onValueChange={field.onChange}
-                  value={selectedCategoryId?.toString() || ""}
-                >
-                  <FormControl
-                    render={<SelectTrigger>
-                      <SelectValue placeholder="Select a category" />
-                    </SelectTrigger>}
-                  />
-                  <SelectContent>
-                    {categoryOptions?.map((option) => (
-                      <SelectItem key={option.value} value={option.value.toString()}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <FormMessage />
-              </FormItem>;
-            }}
-          />
-
-          <FormField
-            control={form.control}
-            name="status"
-            rules={{ required: "Status is required" }}
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Status</FormLabel>
-                <Select
-                  items={{
-                    draft: "Draft",
-                    published: "Published",
-                    rejected: "Rejected",
-                  }}
-                  onValueChange={field.onChange}
-                  value={field.value || ""}
-                >
-                  <FormControl
-                    render={<SelectTrigger>
-                      <SelectValue placeholder="Select status" />
-                    </SelectTrigger>}
-                  />
-                  <SelectContent>
-                    <SelectItem value="draft">Draft</SelectItem>
-                    <SelectItem value="published">Published</SelectItem>
-                    <SelectItem value="rejected">Rejected</SelectItem>
-                  </SelectContent>
-                </Select>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className="flex gap-2">
-            <Button
-              type="submit"
-              {...form.saveButtonProps}
-              disabled={form.formState.isSubmitting}
-            >
-              {form.formState.isSubmitting ? "Updating..." : "Update"}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => navigate(-1)}
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </EditView>
-  );
-};

package/src/pages/blog-posts/list.tsx

@@ -1,131 +0,0 @@
-import { useTable } from "@refinedev/react-table";
-import { createColumnHelper } from "@tanstack/react-table";
-import { Eye, Pencil, Trash2 } from "lucide-react";
-import React from "react";
-
-import { DataTable } from "@/components/data-table/data-table";
-import { StatusBadge } from "@/components/resources/status-badge";
-import { ListView } from "@/components/resources/views/list-view";
-import { EditButton } from "@/components/resources/buttons/edit";
-import { ShowButton } from "@/components/resources/buttons/show";
-import { DeleteButton } from "@/components/resources/buttons/delete";
-
-type BlogPost = {
-  id: string;
-  title: string;
-  content: string;
-  status: string;
-  createdAt: string;
-  category: { id: string; title: string };
-};
-
-export const BlogPostList = () => {
-  const columns = React.useMemo(() => {
-    const columnHelper = createColumnHelper<BlogPost>();
-
-    return [
-      columnHelper.accessor("id", {
-        id: "id",
-        header: "ID",
-        enableSorting: false,
-      }),
-      columnHelper.accessor("title", {
-        id: "title",
-        header: "Title",
-        enableSorting: true,
-      }),
-      columnHelper.accessor("content", {
-        id: "content",
-        header: "Content",
-        enableSorting: false,
-        cell: ({ getValue }) => {
-          const content = getValue();
-          if (!content) return "-";
-          return (
-            <div className="max-w-xs truncate">{content.slice(0, 80)}...</div>
-          );
-        },
-      }),
-      columnHelper.accessor("category.title", {
-        id: "category",
-        header: "Category",
-        enableSorting: false,
-        cell: ({ row }) => {
-          return row.original.category?.title || "-";
-        },
-      }),
-      columnHelper.accessor("status", {
-        id: "status",
-        header: "Status",
-        enableSorting: true,
-        cell: ({ getValue }) => {
-          const status = getValue();
-          return <StatusBadge status={status} />;
-        },
-      }),
-      columnHelper.accessor("createdAt", {
-        id: "createdAt",
-        header: "Created At",
-        enableSorting: true,
-        cell: ({ getValue }) => {
-          const date = getValue();
-          return date ? new Date(date).toLocaleDateString() : "-";
-        },
-      }),
-      columnHelper.display({
-        id: "actions",
-        header: "Actions",
-        cell: ({ row }) => (
-          <div className="flex items-center gap-1">
-            <EditButton
-              recordItemId={row.original.id}
-              variant="ghost"
-              size="icon"
-              aria-label="Edit post"
-              title="Edit"
-            >
-              <Pencil />
-            </EditButton>
-            <ShowButton
-              recordItemId={row.original.id}
-              variant="ghost"
-              size="icon"
-              aria-label="View post"
-              title="View"
-            >
-              <Eye />
-            </ShowButton>
-            <DeleteButton
-              recordItemId={row.original.id}
-              variant="ghost"
-              size="icon"
-              className="text-destructive hover:text-destructive"
-              aria-label="Delete post"
-              title="Delete"
-            >
-              <Trash2 />
-            </DeleteButton>
-          </div>
-        ),
-        enableSorting: false,
-        size: 144,
-      }),
-    ];
-  }, []);
-
-  const table = useTable({
-    columns,
-    refineCoreProps: {
-      syncWithLocation: true,
-      meta: {
-        appends: ["category"],
-      },
-    },
-  });
-
-  return (
-    <ListView>
-      <DataTable table={table} />
-    </ListView>
-  );
-};

package/src/pages/blog-posts/show.tsx

@@ -1,81 +0,0 @@
-import { useOne, useShow } from "@refinedev/core";
-import React from "react";
-
-import { ShowView } from "@/components/resources/views/show-view";
-import { StatusBadge } from "@/components/resources/status-badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-
-export const BlogPostShow = () => {
-  const { result: record, query } = useShow({});
-
-  const {
-    result: category,
-    query: { isLoading: categoryIsLoading },
-  } = useOne({
-    resource: "categories",
-    id: record?.category?.id || "",
-    queryOptions: {
-      enabled: !!record,
-    },
-  });
-  const { isLoading } = query;
-
-  return (
-    <ShowView>
-      <div className="max-w-4xl space-y-6">
-        <Card className="resource-detail-card">
-          <CardHeader>
-            <CardTitle>{record?.title}</CardTitle>
-            <CardDescription>
-              <div className="flex items-center gap-4">
-                <StatusBadge status={record?.status} />
-                <span className="text-sm text-muted-foreground">
-                  ID: {record?.id}
-                </span>
-              </div>
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div>
-              <h4 className="text-sm font-medium mb-2">Category</h4>
-              <p className="text-sm text-muted-foreground">
-                {categoryIsLoading ? "Loading..." : category?.title || "-"}
-              </p>
-            </div>
-
-            <Separator />
-
-            <div>
-              <h4 className="text-sm font-medium mb-2">Created At</h4>
-              <p className="text-sm text-muted-foreground">
-                {record?.createdAt
-                  ? new Date(record.createdAt).toLocaleDateString()
-                  : "-"}
-              </p>
-            </div>
-
-            <Separator />
-
-            <div>
-              <h4 className="text-sm font-medium mb-4">Content</h4>
-              <div className="prose prose-sm max-w-none">
-                {record?.content ? (
-                  <div dangerouslySetInnerHTML={{ __html: record.content }} />
-                ) : (
-                  <p className="text-muted-foreground">No content available</p>
-                )}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </ShowView>
-  );
-};

package/src/pages/categories/create.tsx

@@ -1,73 +0,0 @@
-import { useForm } from "@refinedev/react-hook-form";
-import { useNavigate } from "react-router";
-
-import { CreateView } from "@/components/resources/views/create-view";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-
-export const CategoryCreate = () => {
-  const navigate = useNavigate();
-
-  const {
-    refineCore: { onFinish },
-    ...form
-  } = useForm({
-    refineCoreProps: {},
-  });
-
-  function onSubmit(values: Record<string, string>) {
-    onFinish(values);
-  }
-
-  return (
-    <CreateView>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="resource-form">
-          <FormField
-            control={form.control}
-            name="title"
-            rules={{ required: "Title is required" }}
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Title</FormLabel>
-                <FormControl
-                  render={<Input
-                    {...field}
-                    value={field.value || ""}
-                    placeholder="Enter category title"
-                  />}
-                />
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className="flex gap-2">
-            <Button
-              type="submit"
-              {...form.saveButtonProps}
-              disabled={form.formState.isSubmitting}
-            >
-              {form.formState.isSubmitting ? "Creating..." : "Create"}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => navigate(-1)}
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </CreateView>
-  );
-};

package/src/pages/categories/edit.tsx

@@ -1,73 +0,0 @@
-import { useForm } from "@refinedev/react-hook-form";
-import { useNavigate } from "react-router";
-
-import { EditView } from "@/components/resources/views/edit-view";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-
-export const CategoryEdit = () => {
-  const navigate = useNavigate();
-
-  const {
-    refineCore: { onFinish },
-    ...form
-  } = useForm({
-    refineCoreProps: {},
-  });
-
-  function onSubmit(values: Record<string, string>) {
-    onFinish(values);
-  }
-
-  return (
-    <EditView>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="resource-form">
-          <FormField
-            control={form.control}
-            name="title"
-            rules={{ required: "Title is required" }}
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Title</FormLabel>
-                <FormControl
-                  render={<Input
-                    {...field}
-                    value={field.value || ""}
-                    placeholder="Enter category title"
-                  />}
-                />
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className="flex gap-2">
-            <Button
-              type="submit"
-              {...form.saveButtonProps}
-              disabled={form.formState.isSubmitting}
-            >
-              {form.formState.isSubmitting ? "Updating..." : "Update"}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => navigate(-1)}
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </EditView>
-  );
-};

package/src/pages/categories/index.ts

@@ -1,4 +0,0 @@
-export * from "./create";
-export * from "./edit";
-export * from "./list";
-export * from "./show";

package/src/pages/categories/list.tsx

@@ -1,86 +0,0 @@
-import { type BaseRecord } from "@refinedev/core";
-import { useTable } from "@refinedev/react-table";
-import { createColumnHelper } from "@tanstack/react-table";
-import { Eye, Pencil, Trash2 } from "lucide-react";
-import React from "react";
-
-import { DataTable } from "@/components/data-table/data-table";
-import { ListView } from "@/components/resources/views/list-view";
-import { EditButton } from "@/components/resources/buttons/edit";
-import { ShowButton } from "@/components/resources/buttons/show";
-import { DeleteButton } from "@/components/resources/buttons/delete";
-
-type Category = {
-  id: string;
-  title: string;
-};
-
-export const CategoryList = () => {
-  const columns = React.useMemo(() => {
-    const columnHelper = createColumnHelper<Category>();
-
-    return [
-      columnHelper.accessor("id", {
-        id: "id",
-        header: "ID",
-        enableSorting: false,
-      }),
-      columnHelper.accessor("title", {
-        id: "title",
-        header: "Title",
-        enableSorting: true,
-      }),
-      columnHelper.display({
-        id: "actions",
-        header: "Actions",
-        cell: ({ row }) => (
-          <div className="flex items-center gap-1">
-            <EditButton
-              recordItemId={row.original.id}
-              variant="ghost"
-              size="icon"
-              aria-label="Edit category"
-              title="Edit"
-            >
-              <Pencil />
-            </EditButton>
-            <ShowButton
-              recordItemId={row.original.id}
-              variant="ghost"
-              size="icon"
-              aria-label="View category"
-              title="View"
-            >
-              <Eye />
-            </ShowButton>
-            <DeleteButton
-              recordItemId={row.original.id}
-              variant="ghost"
-              size="icon"
-              className="text-destructive hover:text-destructive"
-              aria-label="Delete category"
-              title="Delete"
-            >
-              <Trash2 />
-            </DeleteButton>
-          </div>
-        ),
-        enableSorting: false,
-        size: 144,
-      }),
-    ];
-  }, []);
-
-  const table = useTable({
-    columns,
-    refineCoreProps: {
-      syncWithLocation: true,
-    },
-  });
-
-  return (
-    <ListView>
-      <DataTable table={table} />
-    </ListView>
-  );
-};

package/src/pages/categories/show.tsx

@@ -1,37 +0,0 @@
-import { useShow } from "@refinedev/core";
-import React from "react";
-
-import { ShowView } from "@/components/resources/views/show-view";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-
-export const CategoryShow = () => {
-  const { result: record, query } = useShow({});
-  const { isLoading } = query;
-
-  return (
-    <ShowView>
-      <Card className="resource-detail-card max-w-3xl">
-        <CardHeader>
-          <CardTitle>{record?.title}</CardTitle>
-          <CardDescription>Category ID: {record?.id}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div>
-              <h4 className="text-sm font-medium mb-2">Title</h4>
-              <p className="text-sm text-muted-foreground">
-                {record?.title || "-"}
-              </p>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </ShowView>
-  );
-};