@nocobase/portal-template-default 1.0.0 → 1.0.1

package/registry/nocobase-acl/demo/prompt-generator.tsx

@@ -0,0 +1,115 @@
+import { Check, Copy, Sparkles } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+export type AclPromptGeneratorConfig = {
+  title: string;
+  description: string;
+  defaultScene: string;
+  defaultTarget: string;
+  requirements: string;
+};
+
+export function AclScenarioPromptGenerator({
+  config,
+}: {
+  config: AclPromptGeneratorConfig;
+}) {
+  const [scene, setScene] = useState(config.defaultScene);
+  const [target, setTarget] = useState(config.defaultTarget);
+  const [copied, setCopied] = useState(false);
+  const [copyError, setCopyError] = useState(false);
+
+  const prompt = useMemo(
+    () => `Build a complete NocoBase ACL scene in the Refine Starter.
+
+Business scene
+- Page or feature: ${scene}
+- Permission target: ${target}
+- Use realistic fixed sample content so the permission behavior is visible immediately.
+- Build the complete page section and user flow, not an isolated ACL snippet.
+
+ACL scenario
+${config.requirements}
+
+Implementation contract
+- Use the Starter's built-in NocoBase accessControlProvider and ACL store.
+- NocoBase roles:check is the source of truth. Do not create a second permission store or hard-code role names.
+- Keep backend ACL enforcement in place; frontend checks only control presentation and navigation.
+- Import reusable components from the installed local entry point at @/extensions/nocobase-acl when page composition is needed.
+- Resource actions use Refine names: list, show, create, edit, delete. Let the Starter map them to NocoBase list/get/create/update/destroy.
+- Preserve dataSourceKey when the collection belongs to a non-main data source.
+- Show an understandable forbidden or hidden state where appropriate.
+- Deliver complete React component code, resource metadata, route integration, and the visible sample UI.`,
+    [config.requirements, scene, target]
+  );
+
+  return (
+    <details className="group rounded-xl border bg-muted/15">
+      <summary className="flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-medium marker:hidden">
+        <Sparkles className="size-4 text-primary" />
+        Prompt generator
+        <span className="ml-auto text-xs font-normal text-muted-foreground">
+          {config.title}
+        </span>
+      </summary>
+      <div className="grid gap-4 border-t p-4 lg:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
+        <div className="space-y-4">
+          <p className="text-xs leading-5 text-muted-foreground">
+            {config.description}
+          </p>
+          <div className="space-y-2">
+            <Label htmlFor={`${config.title}-scene`}>Business scene</Label>
+            <Input
+              id={`${config.title}-scene`}
+              value={scene}
+              onChange={(event) => setScene(event.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor={`${config.title}-target`}>Permission target</Label>
+            <Textarea
+              id={`${config.title}-target`}
+              value={target}
+              onChange={(event) => setTarget(event.target.value)}
+              className="min-h-24"
+            />
+          </div>
+        </div>
+        <div className="min-w-0 overflow-hidden rounded-lg border bg-background">
+          <div className="flex items-center justify-between gap-3 border-b px-3 py-2">
+            <span className="text-xs font-medium">Generated prompt</span>
+            <Button
+              size="sm"
+              onClick={async () => {
+                try {
+                  await navigator.clipboard.writeText(prompt);
+                  setCopyError(false);
+                  setCopied(true);
+                  window.setTimeout(() => setCopied(false), 1500);
+                } catch {
+                  setCopyError(true);
+                }
+              }}
+            >
+              {copied ? <Check /> : <Copy />}
+              {copied ? "Copied" : "Copy prompt"}
+            </Button>
+          </div>
+          {copyError ? (
+            <p className="border-b px-3 py-2 text-xs text-destructive">
+              Clipboard access failed. Select the prompt text and copy it manually.
+            </p>
+          ) : null}
+          <pre className="max-h-80 overflow-auto whitespace-pre-wrap p-4 font-mono text-xs leading-5 text-muted-foreground">
+            {prompt}
+          </pre>
+        </div>
+      </div>
+    </details>
+  );
+}

package/registry/nocobase-acl/demo/role-switcher-prompt-generator.tsx

@@ -0,0 +1,179 @@
+import { Check, Copy } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+type Placement = "header" | "user-menu" | "settings" | "custom";
+type UnavailableState = "hide" | "current-role";
+
+const placementLabels: Record<Placement, string> = {
+  header: "Application header",
+  "user-menu": "User menu",
+  settings: "Account settings",
+  custom: "Custom surface",
+};
+
+const unavailableStateLabels: Record<UnavailableState, string> = {
+  "current-role": "Show current role",
+  hide: "Hide component",
+};
+
+const placementInstructions: Record<Placement, string> = {
+  header:
+    "Place it in the application header beside the existing account controls. Keep the trigger compact and preserve the responsive user menu.",
+  "user-menu":
+    "Place it inside the existing user/account popover as a full-width menu section, separated from profile and sign-out actions.",
+  settings:
+    "Place it in an account settings section with a field label and short explanation of how the active role changes visible data and actions.",
+  custom:
+    "Place it in the application surface described below, matching the surrounding layout and spacing.",
+};
+
+export function RoleSwitcherPromptGenerator() {
+  const [placement, setPlacement] = useState<Placement>("user-menu");
+  const [label, setLabel] = useState("Working as");
+  const [unavailableState, setUnavailableState] =
+    useState<UnavailableState>("current-role");
+  const [surface, setSurface] = useState(
+    "Use the Starter's existing account controls and visual language. Do not create a separate demo page."
+  );
+  const [copied, setCopied] = useState(false);
+  const [copyError, setCopyError] = useState(false);
+
+  const prompt = useMemo(
+    () => `Integrate the RoleSwitcher into the existing NocoBase Refine Starter.
+
+Target placement
+- Placement: ${placementLabels[placement]}
+- ${placementInstructions[placement]}
+- Application context: ${surface}
+
+Component presentation
+- Label: ${label.trim() ? label : "No label; pass label={false}."}
+- When role switching is unavailable: ${
+      unavailableState === "current-role"
+        ? "Keep the current identity visible by passing showWhenUnavailable."
+        : "Hide the component by keeping showWhenUnavailable false."
+    }
+- Use className and triggerClassName only to fit the existing surface; do not fork or restyle the internal Select implementation.
+
+Integration requirements
+- Import and reuse RoleSwitcher from the installed local entry point at @/extensions/nocobase-acl.
+- Update the existing application surface instead of creating an isolated example page.
+- Do not fetch, hard-code, or pass a duplicate role list. The component reads roles from the current Refine identity.
+- Do not reimplement Full permissions, Anonymous, or role-mode logic. The component derives these options from the Starter ACL store.
+- Do not add a separate role-switch mutation. The component already calls users:setDefaultRole and reloads the application after a successful switch.
+- Preserve existing account, responsive navigation, and sign-out behavior.
+- Return the complete updated component for the target surface and mention any imports that were added.`,
+    [label, placement, surface, unavailableState]
+  );
+
+  return (
+    <div className="grid items-start gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
+      <Card className="gap-0 py-0">
+        <CardHeader className="border-b py-4">
+          <CardTitle>Placement settings</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-5 py-5">
+          <div className="space-y-2">
+            <Label>Placement</Label>
+            <Select
+              value={placement}
+              onValueChange={(value) => value && setPlacement(value as Placement)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue>{placementLabels[placement]}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="header">Application header</SelectItem>
+                <SelectItem value="user-menu">User menu</SelectItem>
+                <SelectItem value="settings">Account settings</SelectItem>
+                <SelectItem value="custom">Custom surface</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="role-switcher-label">Label</Label>
+            <Input
+              id="role-switcher-label"
+              value={label}
+              onChange={(event) => setLabel(event.target.value)}
+              placeholder="Leave empty for no label"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Single-role behavior</Label>
+            <Select
+              value={unavailableState}
+              onValueChange={(value) =>
+                value && setUnavailableState(value as UnavailableState)
+              }
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue>
+                  {unavailableStateLabels[unavailableState]}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="current-role">Show current role</SelectItem>
+                <SelectItem value="hide">Hide component</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="role-switcher-surface">Application context</Label>
+            <Textarea
+              id="role-switcher-surface"
+              value={surface}
+              onChange={(event) => setSurface(event.target.value)}
+              className="min-h-28"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="gap-0 overflow-hidden py-0">
+        <CardHeader className="flex-row items-center justify-between gap-3 border-b py-3">
+          <CardTitle className="text-sm">Generated integration prompt</CardTitle>
+          <Button
+            size="sm"
+            onClick={async () => {
+              try {
+                await navigator.clipboard.writeText(prompt);
+                setCopyError(false);
+                setCopied(true);
+                window.setTimeout(() => setCopied(false), 1500);
+              } catch {
+                setCopyError(true);
+              }
+            }}
+          >
+            {copied ? <Check /> : <Copy />}
+            {copied ? "Copied" : "Copy prompt"}
+          </Button>
+        </CardHeader>
+        {copyError ? (
+          <p className="border-b px-4 py-2 text-xs text-destructive">
+            Clipboard access failed. Select the prompt and copy it manually.
+          </p>
+        ) : null}
+        <CardContent className="p-0">
+          <pre className="max-h-[560px] overflow-auto whitespace-pre-wrap p-5 font-mono text-xs leading-5 text-muted-foreground">
+            {prompt}
+          </pre>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/registry/nocobase-acl/demo/scenario-section.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  AclScenarioPromptGenerator,
+  type AclPromptGeneratorConfig,
+} from "./prompt-generator";
+
+export function AclScenarioSection({
+  eyebrow,
+  title,
+  description,
+  children,
+  prompt,
+}: {
+  eyebrow: string;
+  title: string;
+  description: string;
+  children: ReactNode;
+  prompt: AclPromptGeneratorConfig;
+}) {
+  return (
+    <section className="space-y-5 border-t pt-8">
+      <div>
+        <Badge variant="outline">{eyebrow}</Badge>
+        <h2 className="mt-3 text-2xl font-semibold tracking-[-0.025em]">
+          {title}
+        </h2>
+        <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
+          {description}
+        </p>
+      </div>
+      {children}
+      <AclScenarioPromptGenerator config={prompt} />
+    </section>
+  );
+}

package/registry/nocobase-acl/extension.tsx

@@ -0,0 +1,71 @@
+import type { AppExtension } from "@/app/extension";
+import { Blocks, PanelsTopLeft, ShieldCheck } from "lucide-react";
+import { lazy } from "react";
+import { Outlet, Route } from "react-router";
+import { LazyAclRoute } from "./demo/lazy-route";
+
+const AclComponentsPage = lazy(() =>
+  import("./demo/components").then((module) => ({
+    default: module.AclComponentsPage,
+  }))
+);
+const AclPatternsPage = lazy(() =>
+  import("./demo").then((module) => ({ default: module.AclPatternsPage }))
+);
+
+const nocobaseAclExtension: AppExtension = {
+  id: "nocobase-acl",
+  resources: [
+    {
+      name: "acl-integration",
+      meta: {
+        label: "Access control",
+        icon: <ShieldCheck />,
+        description: "NocoBase ACL integration for Refine applications.",
+        acl: { type: "authenticated" },
+      },
+    },
+    {
+      name: "acl-components",
+      list: "/acl",
+      meta: {
+        parent: "acl-integration",
+        label: "Role switcher",
+        icon: <Blocks />,
+        acl: { type: "authenticated" },
+      },
+    },
+    {
+      name: "acl-patterns",
+      list: "/acl/patterns",
+      meta: {
+        parent: "acl-integration",
+        label: "Permission patterns",
+        icon: <PanelsTopLeft />,
+        acl: { type: "authenticated" },
+      },
+    },
+  ],
+  routes: (
+    <Route key="nocobase-acl" path="/acl" element={<Outlet />}>
+      <Route
+        index
+        element={
+          <LazyAclRoute>
+            <AclComponentsPage />
+          </LazyAclRoute>
+        }
+      />
+      <Route
+        path="patterns"
+        element={
+          <LazyAclRoute>
+            <AclPatternsPage />
+          </LazyAclRoute>
+        }
+      />
+    </Route>
+  ),
+};
+
+export default nocobaseAclExtension;

package/registry/nocobase-acl/index.ts

@@ -0,0 +1 @@
+export * from "./components";