@nocobase/portal-template-default 1.0.3 → 1.0.5

package/src/extensions/nocobase-acl/components/acl-boundary.tsx

@@ -1,106 +0,0 @@
-import type { BaseKey } from "@refinedev/core";
-import type { PropsWithChildren, ReactNode } from "react";
-
-import { AccessDenied } from "@/components/access-control/access-denied";
-import {
-  canAccessWithSnapshot,
-  useAclSnapshot,
-} from "@/lib/nocobase/acl";
-
-export type AclPermission = {
-  resource: string;
-  action: string;
-  id?: BaseKey;
-  field?: string;
-  dataSourceKey?: string;
-};
-
-export type AclPageProps = PropsWithChildren<{
-  anyOf?: AclPermission[];
-  allOf?: AclPermission[];
-  fallback?: ReactNode;
-}>;
-
-export type AclRegionProps = PropsWithChildren<
-  Omit<AclPermission, "field"> & {
-    fallback?: "hidden" | "forbidden" | ReactNode;
-  }
->;
-
-export type AclFieldProps = PropsWithChildren<{
-  resource: string;
-  action: string;
-  field: string;
-  dataSourceKey?: string;
-  fallback?: ReactNode;
-}>;
-
-const canAccess = (
-  snapshot: ReturnType<typeof useAclSnapshot>,
-  permission: AclPermission
-) =>
-  canAccessWithSnapshot(snapshot, {
-    resource: permission.resource,
-    action: permission.action,
-    params: {
-      id: permission.id,
-      field: permission.field,
-      dataSourceKey: permission.dataSourceKey,
-    },
-  });
-
-export function AclPage({
-  children,
-  anyOf,
-  allOf,
-  fallback = <AccessDenied />,
-}: AclPageProps) {
-  const snapshot = useAclSnapshot();
-  const anyAllowed = !anyOf?.length || anyOf.some((item) => canAccess(snapshot, item));
-  const allAllowed = !allOf?.length || allOf.every((item) => canAccess(snapshot, item));
-
-  return anyAllowed && allAllowed ? children : fallback;
-}
-
-export function AclRegion({
-  children,
-  resource,
-  action,
-  id,
-  dataSourceKey,
-  fallback = "hidden",
-}: AclRegionProps) {
-  const snapshot = useAclSnapshot();
-  const allowed = canAccess(snapshot, {
-    resource,
-    action,
-    id,
-    dataSourceKey,
-  });
-
-  if (allowed) return children;
-  if (fallback === "hidden") return null;
-  if (fallback === "forbidden") {
-    return <AccessDenied className="min-h-40" />;
-  }
-  return fallback;
-}
-
-export function AclField({
-  children,
-  resource,
-  action,
-  field,
-  dataSourceKey,
-  fallback = null,
-}: AclFieldProps) {
-  const snapshot = useAclSnapshot();
-  return canAccess(snapshot, {
-    resource,
-    action,
-    field,
-    dataSourceKey,
-  })
-    ? children
-    : fallback;
-}

package/src/extensions/nocobase-acl/components/index.ts

@@ -1,3 +0,0 @@
-export * from "./acl-boundary";
-export * from "./role-options";
-export * from "./role-switcher";

package/src/extensions/nocobase-acl/components/role-options.ts

@@ -1,36 +0,0 @@
-import type { Role, RoleMode } from "@/lib/nocobase/acl";
-import { resolveTranslatableText } from "@/lib/i18n";
-
-export const UNION_ROLE = "__union__";
-export const ANONYMOUS_ROLE = "anonymous";
-
-export function resolveRoleTitle(role?: Role) {
-  return resolveTranslatableText(role?.title || role?.name || "Role", {
-    ns: "starter",
-  });
-}
-
-export function getRoleOptions({
-  roles,
-  roleMode,
-  allowAnonymous = false,
-}: {
-  roles: Role[];
-  roleMode?: RoleMode;
-  allowAnonymous?: boolean;
-}) {
-  if (roleMode === "only-use-union") {
-    return [{ name: UNION_ROLE, title: "Full permissions" }];
-  }
-
-  const options = roles.filter(
-    (role) => role.name !== UNION_ROLE && role.name !== ANONYMOUS_ROLE
-  );
-  if (allowAnonymous) {
-    options.push({ name: ANONYMOUS_ROLE, title: "Anonymous" });
-  }
-  if (roleMode === "allow-use-union") {
-    options.unshift({ name: UNION_ROLE, title: "Full permissions" });
-  }
-  return options;
-}

package/src/extensions/nocobase-acl/components/role-switcher.tsx

@@ -1,135 +0,0 @@
-import { useGetIdentity } from "@refinedev/core";
-import { Loader2, ShieldCheck } from "lucide-react";
-import { useMemo, useState, type ReactNode } from "react";
-
-import { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  switchRole,
-  useAclSnapshot,
-  type AclIdentity,
-  type Role,
-} from "@/lib/nocobase/acl";
-import { cn } from "@/lib/utils";
-import { getRoleOptions, resolveRoleTitle, UNION_ROLE } from "./role-options";
-
-export type RoleSwitcherProps = {
-  className?: string;
-  triggerClassName?: string;
-  label?: ReactNode | false;
-  showWhenUnavailable?: boolean;
-};
-
-export function RoleSwitcher({
-  className,
-  triggerClassName,
-  label = "Switch role",
-  showWhenUnavailable = false,
-}: RoleSwitcherProps) {
-  const { data: identity, isLoading } = useGetIdentity<AclIdentity>();
-  const acl = useAclSnapshot();
-  const [switching, setSwitching] = useState(false);
-  const [error, setError] = useState<string>();
-
-  const roles = useMemo(
-    () =>
-      getRoleOptions({
-        roles: identity?.roles ?? [],
-        roleMode: acl.data.roleMode,
-        allowAnonymous: acl.data.allowAnonymous,
-      }),
-    [acl.data.allowAnonymous, acl.data.roleMode, identity?.roles]
-  );
-
-  const currentRole = acl.data.role ?? roles[0]?.name;
-  const canSwitch = roles.length > 1 && acl.data.roleMode !== "only-use-union";
-
-  if (isLoading) {
-    return <Loader2 className="size-4 animate-spin text-muted-foreground" />;
-  }
-  if (!canSwitch && !showWhenUnavailable) return null;
-
-  if (!canSwitch) {
-    return (
-      <div className={cn("flex items-center gap-2 text-sm", className)}>
-        <ShieldCheck className="size-4 text-muted-foreground" />
-        <span className="text-muted-foreground">Current role</span>
-        <Badge variant="secondary">{getRoleTitle(roles, currentRole)}</Badge>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("space-y-2", className)}>
-      {label === false ? null : (
-        <p className="text-xs font-medium text-muted-foreground">{label}</p>
-      )}
-      <Select
-        value={currentRole}
-        disabled={switching}
-        onValueChange={(value) => {
-          if (!value || value === currentRole) return;
-          setSwitching(true);
-          setError(undefined);
-          void switchRole(value, { reloadAcl: false })
-            .then(() => window.location.reload())
-            .catch((reason) => {
-              setError(
-                reason instanceof Error
-                  ? reason.message
-                  : "Unable to switch role"
-              );
-              setSwitching(false);
-            });
-        }}
-      >
-        <SelectTrigger
-          className={cn("w-full min-w-52", triggerClassName)}
-          aria-label="Switch role"
-        >
-          {switching ? <Loader2 className="animate-spin" /> : <ShieldCheck />}
-          <SelectValue>{getRoleTitle(roles, currentRole)}</SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {roles.map((role, index) => (
-            <RoleOption
-              key={role.name}
-              role={role}
-              showSeparator={index === 1 && roles[0]?.name === UNION_ROLE}
-            />
-          ))}
-        </SelectContent>
-      </Select>
-      {error ? <p className="text-xs text-destructive">{error}</p> : null}
-    </div>
-  );
-}
-
-function RoleOption({
-  role,
-  showSeparator,
-}: {
-  role: Role;
-  showSeparator: boolean;
-}) {
-  return (
-    <>
-      {showSeparator ? <SelectSeparator /> : null}
-      <SelectItem value={role.name}>{resolveRoleTitle(role)}</SelectItem>
-    </>
-  );
-}
-
-function getRoleTitle(roles: Role[], roleName?: string) {
-  return resolveRoleTitle(
-    roles.find((role) => role.name === roleName) ??
-      (roleName ? { name: roleName } : undefined)
-  );
-}

package/src/extensions/nocobase-acl/demo/boundary-api.tsx

@@ -1,186 +0,0 @@
-import { Card } from "@/components/ui/card";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-type PropRow = [
-  name: string,
-  type: string,
-  defaultValue: string,
-  description: string
-];
-
-const pageProps: PropRow[] = [
-  [
-    "anyOf",
-    "AclPermission[]",
-    "undefined",
-    "Allows the page when any listed permission is available.",
-  ],
-  [
-    "allOf",
-    "AclPermission[]",
-    "undefined",
-    "Requires every listed permission before rendering the page.",
-  ],
-  [
-    "fallback",
-    "ReactNode",
-    "AccessDenied",
-    "Replaces the complete page when its permission test fails.",
-  ],
-  ["children", "ReactNode", "required", "The protected page content."],
-];
-
-const regionProps: PropRow[] = [
-  [
-    "resource",
-    "string",
-    "required",
-    "NocoBase collection or ACL resource name.",
-  ],
-  [
-    "action",
-    "string",
-    "required",
-    "Resource action such as list, show, create, edit, or delete.",
-  ],
-  [
-    "id",
-    "BaseKey",
-    "undefined",
-    "Optional record ID for record-scoped permission checks.",
-  ],
-  [
-    "dataSourceKey",
-    "string",
-    "undefined",
-    "Selects a non-main NocoBase data source.",
-  ],
-  [
-    "fallback",
-    '"hidden" | "forbidden" | ReactNode',
-    '"hidden"',
-    "Hides the region or replaces it with a local denied state.",
-  ],
-  ["children", "ReactNode", "required", "The protected page region."],
-];
-
-const fieldProps: PropRow[] = [
-  [
-    "resource",
-    "string",
-    "required",
-    "NocoBase collection containing the field.",
-  ],
-  [
-    "action",
-    "string",
-    "required",
-    "The action whose field whitelist should be checked.",
-  ],
-  ["field", "string", "required", "Exact NocoBase field name."],
-  [
-    "dataSourceKey",
-    "string",
-    "undefined",
-    "Selects a non-main NocoBase data source.",
-  ],
-  [
-    "fallback",
-    "ReactNode",
-    "null",
-    "Optional read-only replacement for a denied field.",
-  ],
-  ["children", "ReactNode", "required", "The protected field or field group."],
-];
-
-export function AclBoundaryApi() {
-  return (
-    <section className="space-y-5 border-t pt-8">
-      <div>
-        <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-          Permission boundaries
-        </p>
-        <h2 className="mt-2 text-xl font-semibold tracking-tight">
-          Components behind the patterns
-        </h2>
-        <p className="mt-1.5 max-w-3xl text-sm leading-6 text-muted-foreground">
-          Use the smallest boundary that matches the intended user experience:
-          complete page, independent region, or individual field.
-        </p>
-      </div>
-      <div className="space-y-7">
-        <ComponentApi
-          title="AclPage"
-          description="Protects a complete route or business page. This corresponds to the Page permission pattern above."
-          rows={pageProps}
-        />
-        <ComponentApi
-          title="AclRegion"
-          description="Protects one independent area inside a larger page. This corresponds to the Region permission pattern."
-          rows={regionProps}
-        />
-        <ComponentApi
-          title="AclField"
-          description="Protects one field or field group. This corresponds to the Field permission pattern."
-          rows={fieldProps}
-        />
-      </div>
-    </section>
-  );
-}
-
-function ComponentApi({
-  title,
-  description,
-  rows,
-}: {
-  title: string;
-  description: string;
-  rows: PropRow[];
-}) {
-  return (
-    <div className="space-y-3">
-      <div>
-        <h3 className="font-semibold">{title}</h3>
-        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-      </div>
-      <Card className="gap-0 overflow-hidden py-0">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Prop</TableHead>
-              <TableHead>Type</TableHead>
-              <TableHead>Default</TableHead>
-              <TableHead>Description</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {rows.map(([name, type, defaultValue, propDescription]) => (
-              <TableRow key={name}>
-                <TableCell className="font-mono text-xs font-medium">
-                  {name}
-                </TableCell>
-                <TableCell className="font-mono text-xs text-muted-foreground">
-                  {type}
-                </TableCell>
-                <TableCell className="font-mono text-xs text-muted-foreground">
-                  {defaultValue}
-                </TableCell>
-                <TableCell className="min-w-72 whitespace-normal text-muted-foreground">
-                  {propDescription}
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Card>
-    </div>
-  );
-}

package/src/extensions/nocobase-acl/demo/components.tsx

@@ -1,231 +0,0 @@
-import { ShieldCheck } from "lucide-react";
-
-import { Badge } from "@/components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { RoleSwitcher } from "../components";
-import { RoleSwitcherPromptGenerator } from "./role-switcher-prompt-generator";
-
-type PropRow = [
-  name: string,
-  type: string,
-  defaultValue: string,
-  description: string
-];
-
-const roleSwitcherProps: PropRow[] = [
-  [
-    "className",
-    "string",
-    "undefined",
-    "Styles the component wrapper so it can fit a toolbar, menu, or settings layout.",
-  ],
-  [
-    "triggerClassName",
-    "string",
-    "undefined",
-    "Styles only the Select trigger without changing the wrapper.",
-  ],
-  [
-    "label",
-    "ReactNode | false",
-    '"Switch role"',
-    "Replaces the field label. Pass false for a compact control without a label.",
-  ],
-  [
-    "showWhenUnavailable",
-    "boolean",
-    "false",
-    "Shows the current role as a non-interactive badge when the user cannot switch roles.",
-  ],
-];
-
-const roleBehaviors = [
-  [
-    "Multiple assigned roles",
-    "Renders a Select using roles from the signed-in identity.",
-  ],
-  ["allow-use-union", "Prepends Full permissions using the __union__ role."],
-  [
-    "only-use-union",
-    "Shows Full permissions as the current non-interactive role.",
-  ],
-  ["allowAnonymous", "Appends Anonymous to the available role options."],
-  [
-    "One available role",
-    "Returns null, or shows the current-role badge when showWhenUnavailable is true.",
-  ],
-];
-
-export function AclComponentsPage() {
-  return (
-    <div className="space-y-12 pb-12">
-      <header className="space-y-2">
-        <h1 className="text-2xl font-semibold tracking-[-0.025em] sm:text-3xl">
-          Role switcher
-        </h1>
-        <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
-          A reusable role selector backed by the Starter&apos;s NocoBase ACL
-          store and signed-in identity.
-        </p>
-      </header>
-
-      <section className="space-y-5 border-t pt-8">
-        <SectionTitle
-          eyebrow="Role selection"
-          title="RoleSwitcher"
-          description="The component resolves the signed-in user's roles and NocoBase role mode automatically. Business pages only decide its placement and presentation."
-        />
-        <div className="grid items-start gap-5 xl:grid-cols-2">
-          <Card>
-            <CardHeader>
-              <CardTitle>Live component</CardTitle>
-              <CardDescription>
-                Uses the current identity and active NocoBase ACL response.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <RoleSwitcher
-                showWhenUnavailable
-                className="w-full max-w-sm"
-                label="Working as"
-              />
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>Unavailable state</CardTitle>
-              <CardDescription>
-                With one usable role, showWhenUnavailable keeps identity visible
-                without presenting a disabled Select.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="flex min-h-9 items-center gap-2 text-sm">
-                <ShieldCheck className="size-4 text-muted-foreground" />
-                <span className="text-muted-foreground">Current role</span>
-                <Badge variant="secondary">Member</Badge>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      <section className="space-y-5 border-t pt-8">
-        <SectionTitle
-          eyebrow="Prompt generator"
-          title="Place the role switcher in an existing application surface"
-          description="Describe the target placement and presentation. The generated prompt integrates the exported component without rebuilding its role-loading or switching behavior."
-        />
-        <RoleSwitcherPromptGenerator />
-      </section>
-
-      <section className="space-y-5 border-t pt-8">
-        <SectionTitle
-          eyebrow="Component API"
-          title="Role switcher props"
-          description="Role data, union mode, Anonymous, persistence, and reload behavior are built in rather than exposed as duplicated application props."
-        />
-        <PropsTable rows={roleSwitcherProps} />
-      </section>
-
-      <section className="space-y-5 border-t pt-8">
-        <SectionTitle
-          eyebrow="Automatic behavior"
-          title="Role options follow NocoBase configuration"
-          description="These states are derived from the identity and roles:check response, so applications do not maintain a second role list."
-        />
-        <Card className="gap-0 overflow-hidden py-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Condition</TableHead>
-                <TableHead>Rendered behavior</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {roleBehaviors.map(([condition, behavior]) => (
-                <TableRow key={condition}>
-                  <TableCell className="font-medium">{condition}</TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {behavior}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </Card>
-      </section>
-    </div>
-  );
-}
-
-function PropsTable({ rows }: { rows: PropRow[] }) {
-  return (
-    <Card className="gap-0 overflow-hidden py-0">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Prop</TableHead>
-            <TableHead>Type</TableHead>
-            <TableHead>Default</TableHead>
-            <TableHead>Description</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {rows.map(([name, type, defaultValue, description]) => (
-            <TableRow key={name}>
-              <TableCell className="font-mono text-xs font-medium">
-                {name}
-              </TableCell>
-              <TableCell className="font-mono text-xs text-muted-foreground">
-                {type}
-              </TableCell>
-              <TableCell className="font-mono text-xs text-muted-foreground">
-                {defaultValue}
-              </TableCell>
-              <TableCell className="min-w-72 whitespace-normal text-muted-foreground">
-                {description}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Card>
-  );
-}
-
-function SectionTitle({
-  eyebrow,
-  title,
-  description,
-}: {
-  eyebrow: string;
-  title: string;
-  description: string;
-}) {
-  return (
-    <div>
-      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-        {eyebrow}
-      </p>
-      <h2 className="mt-2 text-xl font-semibold tracking-tight">{title}</h2>
-      <p className="mt-1.5 max-w-3xl text-sm leading-6 text-muted-foreground">
-        {description}
-      </p>
-    </div>
-  );
-}