@nocobase/portal-template-default 1.0.0

package/src/components/resources/buttons/clone.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useCloneButton } from "@refinedev/core";
+import { Copy } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type CloneButtonProps = {
+  /**
+   * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+   * @default Inferred resource name from the route
+   */
+  resource?: string;
+  /**
+   * Data item identifier for the actions with the API
+   * @default Reads `:id` from the URL
+   */
+  recordItemId?: BaseKey;
+  /**
+   * Access Control configuration for the button
+   * @default `{ enabled: true, hideIfUnauthorized: false }`
+   */
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  /**
+   * `meta` property is used when creating the URL for the related action and path.
+   */
+  meta?: Record<string, unknown>;
+} & React.ComponentProps<typeof Button>;
+
+export const CloneButton = React.forwardRef<
+  React.ComponentRef<typeof Button>,
+  CloneButtonProps
+>(
+  (
+    { resource, recordItemId, accessControl, meta, children, onClick, ...rest },
+    ref
+  ) => {
+    const { hidden, disabled, LinkComponent, to, label } = useCloneButton({
+      accessControl,
+      resource,
+      id: recordItemId,
+      meta,
+    });
+
+    const isDisabled = disabled || rest.disabled;
+    const isHidden = hidden || rest.hidden;
+
+    if (isHidden) return null;
+
+    return (
+      <Button
+        {...rest}
+        ref={ref}
+        disabled={isDisabled}
+        render={<LinkComponent to={to} replace={false} />}
+        onClick={(event) => {
+          if (isDisabled) {
+            event.preventDefault();
+            return;
+          }
+          if (onClick) {
+            event.preventDefault();
+            onClick(event);
+          }
+        }}
+      >
+        {children ?? (
+          <div className="flex items-center gap-2 font-semibold">
+            <Copy className="h-4 w-4" />
+            <span>{label}</span>
+          </div>
+        )}
+      </Button>
+    );
+  }
+);
+
+CloneButton.displayName = "CloneButton";

package/src/components/resources/buttons/create.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useCreateButton } from "@refinedev/core";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type CreateButtonProps = {
+  /**
+   * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+   * @default Inferred resource name from the route
+   */
+  resource?: BaseKey;
+  /**
+   * Access Control configuration for the button
+   * @default `{ enabled: true, hideIfUnauthorized: false }`
+   */
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  /**
+   * `meta` property is used when creating the URL for the related action and path.
+   */
+  meta?: Record<string, unknown>;
+} & React.ComponentProps<typeof Button>;
+
+export const CreateButton = React.forwardRef<
+  React.ComponentRef<typeof Button>,
+  CreateButtonProps
+>(({ resource, accessControl, meta, children, onClick, ...rest }, ref) => {
+  const { hidden, disabled, LinkComponent, to, label } = useCreateButton({
+    resource,
+    accessControl,
+    meta,
+  });
+
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
+
+  return (
+    <Button
+      {...rest}
+      ref={ref}
+      disabled={isDisabled}
+      render={<LinkComponent to={to} replace={false} />}
+      onClick={(event) => {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        if (onClick) {
+          event.preventDefault();
+          onClick(event);
+        }
+      }}
+    >
+      {children ?? (
+        <div className="flex items-center gap-2 font-semibold">
+          <Plus className="w-4 h-4" />
+          <span>{label ?? "Create"}</span>
+        </div>
+      )}
+    </Button>
+  );
+});
+
+CreateButton.displayName = "CreateButton";

package/src/components/resources/buttons/delete.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useDeleteButton } from "@refinedev/core";
+import { Loader2, Trash } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+type DeleteButtonProps = {
+  /**
+   * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+   * @default Inferred resource name from the route
+   */
+  resource?: string;
+  /**
+   * Data item identifier for the actions with the API
+   * @default Reads `:id` from the URL
+   */
+  recordItemId?: BaseKey;
+  /**
+   * Access Control configuration for the button
+   * @default `{ enabled: true, hideIfUnauthorized: false }`
+   */
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  /**
+   * `meta` property is used when creating the URL for the related action and path.
+   */
+  meta?: Record<string, unknown>;
+} & React.ComponentProps<typeof Button>;
+
+export const DeleteButton = React.forwardRef<
+  React.ComponentRef<typeof Button>,
+  DeleteButtonProps
+>(({ resource, recordItemId, accessControl, meta, children, ...rest }, ref) => {
+  const {
+    hidden,
+    disabled,
+    loading,
+    onConfirm,
+    label,
+    confirmTitle: defaultConfirmTitle,
+    confirmOkLabel: defaultConfirmOkLabel,
+    cancelLabel: defaultCancelLabel,
+  } = useDeleteButton({
+    resource,
+    id: recordItemId,
+    accessControl,
+    meta,
+  });
+  const [open, setOpen] = React.useState(false);
+
+  const isDisabled = disabled || rest.disabled || loading;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
+
+  const confirmCancelText = defaultCancelLabel;
+  const confirmOkText = defaultConfirmOkLabel;
+  const confirmTitle = defaultConfirmTitle;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger render={<span className="inline-flex" />}>
+        <Button
+          variant="destructive"
+          {...rest}
+          ref={ref}
+          disabled={isDisabled}
+        >
+          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          {children ?? (
+            <div className="flex items-center gap-2 font-semibold">
+              <Trash className="h-4 w-4" />
+              <span>{label}</span>
+            </div>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto" align="start">
+        <div className="flex flex-col gap-2">
+          <p className="text-sm">{confirmTitle}</p>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" size="sm" onClick={() => setOpen(false)}>
+              {confirmCancelText}
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              disabled={loading}
+              onClick={() => {
+                if (typeof onConfirm === "function") {
+                  onConfirm();
+                }
+                setOpen(false);
+              }}
+            >
+              {confirmOkText}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+DeleteButton.displayName = "DeleteButton";

package/src/components/resources/buttons/edit.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useEditButton } from "@refinedev/core";
+import { Button } from "@/components/ui/button";
+import { Pencil } from "lucide-react";
+
+type EditButtonProps = {
+  /**
+   * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+   * @default Inferred resource name from the route
+   */
+  resource?: string;
+  /**
+   * Data item identifier for the actions with the API
+   * @default Reads `:id` from the URL
+   */
+  recordItemId?: BaseKey;
+  /**
+   * Access Control configuration for the button
+   * @default `{ enabled: true, hideIfUnauthorized: false }`
+   */
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  /**
+   * `meta` property is used when creating the URL for the related action and path.
+   */
+  meta?: Record<string, unknown>;
+} & React.ComponentProps<typeof Button>;
+
+export const EditButton = React.forwardRef<
+  React.ComponentRef<typeof Button>,
+  EditButtonProps
+>(
+  (
+    { resource, recordItemId, accessControl, meta, children, onClick, ...rest },
+    ref
+  ) => {
+    const { hidden, disabled, LinkComponent, to, label } = useEditButton({
+      resource,
+      id: recordItemId,
+      accessControl,
+      meta,
+    });
+
+    const isDisabled = disabled || rest.disabled;
+    const isHidden = hidden || rest.hidden;
+
+    if (isHidden) return null;
+
+    return (
+      <Button
+        {...rest}
+        ref={ref}
+        disabled={isDisabled}
+        render={<LinkComponent to={to} replace={false} />}
+        onClick={(event) => {
+          if (isDisabled) {
+            event.preventDefault();
+            return;
+          }
+          if (onClick) {
+            event.preventDefault();
+            onClick(event);
+          }
+        }}
+      >
+        {children ?? (
+          <div className="flex items-center gap-2 font-semibold">
+            <Pencil className="h-4 w-4" />
+            <span>{label}</span>
+          </div>
+        )}
+      </Button>
+    );
+  }
+);
+
+EditButton.displayName = "EditButton";

package/src/components/resources/buttons/list.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useListButton } from "@refinedev/core";
+import { Button } from "@/components/ui/button";
+import { List } from "lucide-react";
+
+type ListButtonProps = {
+  /**
+   * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+   * @default Inferred resource name from the route
+   */
+  resource?: BaseKey;
+  /**
+   * Access Control configuration for the button
+   * @default `{ enabled: true, hideIfUnauthorized: false }`
+   */
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  /**
+   * `meta` property is used when creating the URL for the related action and path.
+   */
+  meta?: Record<string, unknown>;
+} & React.ComponentProps<typeof Button>;
+
+export const ListButton = React.forwardRef<
+  React.ComponentRef<typeof Button>,
+  ListButtonProps
+>(({ resource, accessControl, meta, children, onClick, ...rest }, ref) => {
+  const { hidden, disabled, LinkComponent, to, label } = useListButton({
+    resource,
+    accessControl,
+    meta,
+  });
+
+  const isDisabled = disabled || rest.disabled;
+  const isHidden = hidden || rest.hidden;
+
+  if (isHidden) return null;
+
+  return (
+    <Button
+      {...rest}
+      ref={ref}
+      disabled={isDisabled}
+      render={<LinkComponent to={to} replace={false} />}
+      onClick={(event) => {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        if (onClick) {
+          event.preventDefault();
+          onClick(event);
+        }
+      }}
+    >
+      {children ?? (
+        <div className="flex items-center gap-2 font-semibold">
+          <List className="w-4 h-4" />
+          <span>{label}</span>
+        </div>
+      )}
+    </Button>
+  );
+});
+
+ListButton.displayName = "ListButton";

package/src/components/resources/buttons/refresh.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useRefreshButton } from "@refinedev/core";
+import { RefreshCcw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type RefreshButtonProps = {
+  /**
+   * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+   * @default Inferred resource name from the route
+   */
+  resource?: string;
+  /**
+   * Data item identifier for the actions with the API
+   * @default Reads `:id` from the URL
+   */
+  recordItemId?: BaseKey;
+  /**
+   * Target data provider name for API call to be made
+   * @default `"default"`
+   */
+  dataProviderName?: string;
+  /**
+   * `meta` property is used when creating the URL for the related action and path.
+   */
+  meta?: Record<string, unknown>;
+} & React.ComponentProps<typeof Button>;
+
+export const RefreshButton = React.forwardRef<
+  React.ComponentRef<typeof Button>,
+  RefreshButtonProps
+>(
+  (
+    { resource, recordItemId, dataProviderName, meta, children, onClick, ...rest },
+    ref
+  ) => {
+    const {
+      onClick: refresh,
+      loading,
+      label,
+    } = useRefreshButton({
+      resource,
+      id: recordItemId,
+      dataProviderName,
+      meta,
+    });
+
+    const isDisabled = rest.disabled || loading;
+
+    return (
+      <Button
+        {...rest}
+        onClick={(event) => {
+          if (isDisabled) {
+            event.preventDefault();
+            return;
+          }
+          refresh();
+          onClick?.(event);
+        }}
+        ref={ref}
+        disabled={isDisabled}
+      >
+        {children ?? (
+          <div className="flex items-center gap-2">
+            <RefreshCcw
+              className={cn("h-4 w-4", {
+                "animate-spin": loading,
+              })}
+            />
+            <span>{label ?? "Refresh"}</span>
+          </div>
+        )}
+      </Button>
+    );
+  }
+);
+
+RefreshButton.displayName = "RefreshButton";

package/src/components/resources/buttons/show.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useShowButton } from "@refinedev/core";
+import { Eye } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type ShowButtonProps = {
+  /**
+   * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+   * @default Inferred resource name from the route
+   */
+  resource?: string;
+  /**
+   * Data item identifier for the actions with the API
+   * @default Reads `:id` from the URL
+   */
+  recordItemId?: BaseKey;
+  /**
+   * Access Control configuration for the button
+   * @default `{ enabled: true, hideIfUnauthorized: false }`
+   */
+  accessControl?: {
+    enabled?: boolean;
+    hideIfUnauthorized?: boolean;
+  };
+  /**
+   * `meta` property is used when creating the URL for the related action and path.
+   */
+  meta?: Record<string, unknown>;
+} & React.ComponentProps<typeof Button>;
+
+export const ShowButton = React.forwardRef<
+  React.ComponentRef<typeof Button>,
+  ShowButtonProps
+>(
+  (
+    { resource, recordItemId, accessControl, meta, children, onClick, ...rest },
+    ref
+  ) => {
+    const { hidden, disabled, LinkComponent, to, label } = useShowButton({
+      resource,
+      id: recordItemId,
+      accessControl,
+      meta,
+    });
+
+    const isDisabled = disabled || rest.disabled;
+    const isHidden = hidden || rest.hidden;
+
+    if (isHidden) return null;
+
+    return (
+      <Button
+        {...rest}
+        ref={ref}
+        disabled={isDisabled}
+        render={<LinkComponent to={to} replace={false} />}
+        onClick={(event) => {
+          if (isDisabled) {
+            event.preventDefault();
+            return;
+          }
+          if (onClick) {
+            event.preventDefault();
+            onClick(event);
+          }
+        }}
+      >
+        {children ?? (
+          <div className="flex items-center gap-2 font-semibold">
+            <Eye className="h-4 w-4" />
+            <span>{label}</span>
+          </div>
+        )}
+      </Button>
+    );
+  }
+);
+
+ShowButton.displayName = "ShowButton";

package/src/components/resources/status-badge.tsx

@@ -0,0 +1,37 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+type StatusBadgeProps = {
+  status?: string | null;
+  className?: string;
+};
+
+const dotStyles: Record<string, string> = {
+  published: "bg-foreground",
+  draft: "bg-neutral-400 dark:bg-neutral-500",
+  rejected: "border border-current bg-transparent",
+};
+
+export function StatusBadge({ status, className }: StatusBadgeProps) {
+  const normalizedStatus = status?.toLowerCase() || "unknown";
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "h-6 gap-1.5 rounded-md border-border/80 bg-card px-2 text-[11px] font-medium capitalize text-foreground shadow-none",
+        normalizedStatus === "rejected" && "text-muted-foreground",
+        className
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "size-1.5 rounded-full",
+          dotStyles[normalizedStatus] ?? "bg-muted-foreground"
+        )}
+      />
+      {normalizedStatus}
+    </Badge>
+  );
+}

package/src/components/resources/views/create-view.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import {
+  useBack,
+  useResourceParams,
+  useUserFriendlyName,
+} from "@refinedev/core";
+import type { PropsWithChildren } from "react";
+import { Breadcrumb } from "@/components/app-shell/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { ArrowLeftIcon } from "lucide-react";
+
+type CreateViewProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function CreateView({ children, className }: CreateViewProps) {
+  return (
+    <div className={cn("flex flex-col", "gap-6", className)}>
+      <CreateViewHeader />
+      {children}
+    </div>
+  );
+}
+
+type CreateHeaderProps = PropsWithChildren<{
+  resource?: string;
+  title?: string;
+  wrapperClassName?: string;
+  headerClassName?: string;
+}>;
+
+export const CreateViewHeader = ({
+  resource: resourceFromProps,
+  title: titleFromProps,
+  wrapperClassName,
+  headerClassName,
+}: CreateHeaderProps) => {
+  const back = useBack();
+
+  const getUserFriendlyName = useUserFriendlyName();
+
+  const { resource, identifier } = useResourceParams({
+    resource: resourceFromProps,
+  });
+
+  const resourceTitle = getUserFriendlyName(
+    resource?.meta?.label ?? identifier ?? resource?.name,
+    "singular"
+  );
+  const title = titleFromProps ?? `Create ${resourceTitle}`;
+
+  return (
+    <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
+      <div className="flex items-center text-muted-foreground">
+        <Breadcrumb />
+      </div>
+      <div className={cn("flex items-start gap-2", headerClassName)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="mt-0.5 rounded-lg"
+          onClick={back}
+        >
+          <ArrowLeftIcon className="h-4 w-4" />
+        </Button>
+        <div>
+          <h2 className="text-3xl font-semibold tracking-[-0.035em]">
+            {title}
+          </h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Add a new {resourceTitle.toLowerCase()} to your NocoBase workspace.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CreateView.displayName = "CreateView";