@nocobase/portal-template-default 1.0.9 → 1.0.10

package/src/App.tsx

@@ -1,92 +1,32 @@
-import { Refine, Authenticated, type ResourceProps } from "@refinedev/core";
+import { Refine, type ResourceProps } from "@refinedev/core";
 
-import { BrowserRouter, Route, Routes, Outlet } from "react-router";
+import { BrowserRouter } from "react-router";
 import routerProvider, {
-  CatchAllNavigate,
   UnsavedChangesNotifier,
 } from "@refinedev/react-router";
-import {
-  UserCreate,
-  UserEdit,
-  UserResourceLayout,
-  RoleDetailRoute,
-  userRoutes,
-  UserShow,
-} from "./pages/users";
 import { dataProvider } from "./providers/data";
-import { Login } from "./pages/login";
-import { Register } from "./pages/register";
-import { ForgotPassword } from "./pages/forgot-password";
-import { ErrorComponent } from "./components/app-shell/error-component";
-import { Layout } from "./components/app-shell/layout";
 import { DocumentTitleHandler } from "./components/app-shell/document-title-handler";
 import { useNotificationProvider } from "./components/notifications/use-notification-provider";
 import { Toaster } from "./components/notifications/toaster";
 import { ThemeProvider } from "./components/theme/theme-provider";
 import { TooltipProvider } from "./components/ui/tooltip";
 import { BrandLogo } from "./components/app-shell/brand";
-import {
-  AppExtensionProviders,
-  AppAuthRuntimeProviders,
-  extensionResources,
-  extensionRouteElements,
-} from "./app/extensions";
+import { AppAuthRuntimeProviders, extensionResources } from "./app/extensions";
 import "./App.css";
 import { authProvider } from "./providers/auth";
 import { accessControlProvider } from "./providers/access-control";
-import { AclBootstrap } from "./components/access-control/acl-bootstrap";
-import { ResourceAccessGuard } from "./components/access-control/resource-access-guard";
-import { NavigateToAccessibleResource } from "./components/access-control/navigate-to-accessible-resource";
-import { KeyRound, PanelsTopLeft, UsersRound } from "lucide-react";
 import { i18nProvider } from "./providers/i18n";
 import { SystemSettingsProvider } from "./providers/system-settings";
-import { AuthDemoPage } from "./components/auth/demo";
 import { getPortalBase } from "./providers/runtime-config";
+import { AclStoreProvider, aclStore } from "./lib/nocobase/acl";
+import { AppRoutes } from "./app/routes";
 
-const coreResources: ResourceProps[] = [
-  {
-    name: "users",
-    list: userRoutes.list,
-    create: userRoutes.create,
-    edit: userRoutes.edit,
-    show: userRoutes.show,
-    meta: {
-      label: "Users",
-      singularLabel: "User",
-      i18nKey: "resources.users",
-      i18nSingularKey: "resources.user",
-      i18nOptions: { ns: "app" },
-      descriptionI18nKey: "resources.users.description",
-      icon: <UsersRound />,
-      description:
-        "Manage the people who can sign in and work in this NocoBase application.",
-      canCreate: true,
-      canDelete: true,
-      acl: {
-        type: "collection",
-      },
-    },
-  },
-  {
-    name: "auth-components",
-    meta: {
-      label: "Authentication",
-      icon: <KeyRound />,
-      description: "NocoBase authentication UI and integration patterns.",
-      acl: { type: "authenticated" },
-    },
-  },
-  {
-    name: "auth-patterns",
-    list: "/auth",
-    meta: {
-      parent: "auth-components",
-      label: "Login composition",
-      icon: <PanelsTopLeft />,
-      acl: { type: "authenticated" },
-    },
-  },
-];
+const getResourcePriority = (resource: ResourceProps) =>
+  typeof resource.meta?.priority === "number" ? resource.meta.priority : 100;
+
+const appResources = [...extensionResources].sort(
+  (left, right) => getResourcePriority(left) - getResourcePriority(right)
+);
 
 const basename = getPortalBase().replace(/\/+$/, "");
 
@@ -97,123 +37,32 @@ function App() {
         <ThemeProvider>
           <TooltipProvider>
             <SystemSettingsProvider>
-            <Refine
-              dataProvider={dataProvider}
-              notificationProvider={useNotificationProvider()}
-              routerProvider={routerProvider}
-              authProvider={authProvider}
-              accessControlProvider={accessControlProvider}
-              i18nProvider={i18nProvider}
-              resources={[...coreResources, ...extensionResources]}
-              options={{
-                syncWithLocation: true,
-                warnWhenUnsavedChanges: true,
-                disableTelemetry: true,
-                title: {
-                  text: "NocoBase",
-                  icon: <BrandLogo className="size-14 rounded-2xl" />,
-                },
-              }}
-            >
-            <Routes>
-              <Route
-                element={
-                  <Authenticated
-                    key="authenticated-inner"
-                    fallback={<CatchAllNavigate to="/login" />}
-                  >
-                    <AclBootstrap>
-                      <AppExtensionProviders>
-                        <Layout>
-                          <Outlet />
-                        </Layout>
-                      </AppExtensionProviders>
-                    </AclBootstrap>
-                  </Authenticated>
-                }
-              >
-                <Route index element={<NavigateToAccessibleResource />} />
-                <Route path="/auth" element={<AuthDemoPage />} />
-                <Route
-                  path="/users"
-                  element={<UserResourceLayout />}
+              <AclStoreProvider store={aclStore}>
+                <Refine
+                  dataProvider={dataProvider}
+                  notificationProvider={useNotificationProvider()}
+                  routerProvider={routerProvider}
+                  authProvider={authProvider}
+                  accessControlProvider={accessControlProvider}
+                  i18nProvider={i18nProvider}
+                  resources={appResources}
+                  options={{
+                    syncWithLocation: true,
+                    warnWhenUnsavedChanges: true,
+                    disableTelemetry: true,
+                    title: {
+                      text: "NocoBase",
+                      icon: <BrandLogo className="size-14 rounded-2xl" />,
+                    },
+                  }}
                 >
-                  <Route
-                    path="create"
-                    element={
-                      <ResourceAccessGuard resource="users" action="create">
-                        <UserCreate />
-                      </ResourceAccessGuard>
-                    }
-                  />
-                  <Route
-                    path="edit/:id"
-                    element={
-                      <ResourceAccessGuard resource="users" action="edit">
-                        <UserEdit />
-                      </ResourceAccessGuard>
-                    }
-                  />
-                  <Route
-                    path="roles/:roleName"
-                    element={
-                      <ResourceAccessGuard resource="roles" action="show">
-                        <RoleDetailRoute returnTo="list" />
-                      </ResourceAccessGuard>
-                    }
-                  />
-                  <Route
-                    path="show/:id"
-                    element={
-                      <ResourceAccessGuard resource="users" action="show">
-                        <UserShow />
-                      </ResourceAccessGuard>
-                    }
-                  >
-                    <Route
-                      path="edit"
-                      element={
-                        <ResourceAccessGuard resource="users" action="edit">
-                          <UserEdit returnTo="show" />
-                        </ResourceAccessGuard>
-                      }
-                    />
-                    <Route
-                      path="roles/:roleName"
-                      element={
-                        <ResourceAccessGuard resource="roles" action="show">
-                          <RoleDetailRoute returnTo="show" />
-                        </ResourceAccessGuard>
-                      }
-                    />
-                  </Route>
-                </Route>
-                {extensionRouteElements}
-                <Route path="*" element={<ErrorComponent />} />
-              </Route>
-              <Route
-                element={
-                  <Authenticated
-                    key="authenticated-outer"
-                    fallback={<Outlet />}
-                  >
-                    <AclBootstrap>
-                      <NavigateToAccessibleResource />
-                    </AclBootstrap>
-                  </Authenticated>
-                }
-              >
-                <Route path="/login" element={<Login />} />
-                <Route path="/signin" element={<Login />} />
-                <Route path="/register" element={<Register />} />
-                <Route path="/forgot-password" element={<ForgotPassword />} />
-              </Route>
-            </Routes>
+                  <AppRoutes />
 
-            <Toaster />
-            <UnsavedChangesNotifier />
-            <DocumentTitleHandler appName="NocoBase" />
-            </Refine>
+                  <Toaster />
+                  <UnsavedChangesNotifier />
+                  <DocumentTitleHandler appName="NocoBase" />
+                </Refine>
+              </AclStoreProvider>
             </SystemSettingsProvider>
           </TooltipProvider>
         </ThemeProvider>

package/src/app/development.tsx

@@ -0,0 +1,154 @@
+import type { ResourceProps, TreeMenuItem } from "@refinedev/core";
+import { KeyRound, PanelsTopLeft } from "lucide-react";
+import type { ReactElement } from "react";
+import { Navigate, Outlet, Route, useLocation } from "react-router";
+
+import { AuthDemoPage } from "@/components/auth/demo";
+import { Header } from "@/components/app-shell/header";
+import { SidebarNavigation } from "@/components/app-shell/sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import type { AppExtension } from "./extension";
+
+const coreDevelopmentResources: ResourceProps[] = [
+  {
+    name: "auth-components",
+    meta: {
+      label: "Authentication",
+      icon: <KeyRound />,
+      description: "NocoBase authentication UI and integration patterns.",
+    },
+  },
+  {
+    name: "auth-patterns",
+    list: "auth",
+    meta: {
+      parent: "auth-components",
+      label: "Login composition",
+      icon: <PanelsTopLeft />,
+      description:
+        "Dynamic login and application-owned customization patterns.",
+    },
+  },
+];
+
+const toDevelopmentPath = (path: string) =>
+  `/dev/${path.replace(/^\/+/, "")}`.replace(/\/+$/, "");
+
+function collectDevelopmentMenu(extensions: AppExtension[]) {
+  const resources = [
+    ...coreDevelopmentResources,
+    ...extensions.flatMap((extension) => extension.dev?.resources ?? []),
+  ];
+  const childrenByParent = new Map<string, ResourceProps[]>();
+  const roots: ResourceProps[] = [];
+
+  for (const resource of resources) {
+    const parent = resource.meta?.parent;
+    if (typeof parent === "string") {
+      const children = childrenByParent.get(parent) ?? [];
+      children.push(resource);
+      childrenByParent.set(parent, children);
+    } else {
+      roots.push(resource);
+    }
+  }
+
+  const toMenuItem = (
+    resource: ResourceProps,
+    parentKey?: string
+  ): TreeMenuItem => {
+    const key = parentKey ? `${parentKey}/${resource.name}` : resource.name;
+    const children = childrenByParent
+      .get(resource.name)
+      ?.map((child) => toMenuItem(child, key));
+
+    return {
+      name: resource.name,
+      key,
+      route:
+        typeof resource.list === "string"
+          ? toDevelopmentPath(resource.list)
+          : undefined,
+      meta: resource.meta,
+      children: children ?? [],
+    };
+  };
+
+  return roots.map((resource) => toMenuItem(resource));
+}
+
+function findFirstRoute(items: TreeMenuItem[]): string | undefined {
+  for (const item of items) {
+    if (item.route) return item.route;
+    const childRoute = item.children && findFirstRoute(item.children);
+    if (childRoute) return childRoute;
+  }
+}
+
+function findSelectedKey(items: TreeMenuItem[], pathname: string) {
+  const matches: TreeMenuItem[] = [];
+
+  const visit = (menuItems: TreeMenuItem[]) => {
+    for (const item of menuItems) {
+      if (
+        item.route &&
+        (pathname === item.route || pathname.startsWith(`${item.route}/`))
+      ) {
+        matches.push(item);
+      }
+      if (item.children) visit(item.children);
+    }
+  };
+
+  visit(items);
+  return matches.sort(
+    (left, right) => (right.route?.length ?? 0) - (left.route?.length ?? 0)
+  )[0]?.key;
+}
+
+export function createDevelopmentRoute(
+  extensions: AppExtension[]
+): ReactElement {
+  const menuItems = collectDevelopmentMenu(extensions);
+  const firstRoute = findFirstRoute(menuItems) ?? "/";
+  const routes = extensions
+    .map((extension) => extension.dev?.routes)
+    .filter((route): route is ReactElement => Boolean(route));
+
+  return (
+    <Route
+      key="registry-development"
+      path="/dev"
+      element={<DevelopmentLayout menuItems={menuItems} />}
+    >
+      <Route index element={<Navigate to={firstRoute} replace />} />
+      <Route path="auth" element={<AuthDemoPage />} />
+      {routes}
+    </Route>
+  );
+}
+
+function DevelopmentLayout({ menuItems }: { menuItems: TreeMenuItem[] }) {
+  const { pathname } = useLocation();
+
+  return (
+    <SidebarProvider>
+      <SidebarNavigation
+        menuItems={menuItems}
+        selectedKey={findSelectedKey(menuItems, pathname)}
+      />
+      <SidebarInset className="bg-muted/25">
+        <Header />
+        <main
+          className={cn(
+            "@container/main mx-auto flex w-full max-w-[1600px] flex-1 flex-col",
+            "relative px-4 py-5 md:p-6 lg:px-8 lg:py-7"
+          )}
+        >
+          <Outlet />
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/src/app/extension.ts

@@ -4,8 +4,13 @@ import type { AuthenticatorAdapter } from "@/components/auth/types";
 
 export type AppExtension = {
   id: string;
+  priority?: number;
   resources?: ResourceProps[];
   routes?: ReactElement;
+  dev?: {
+    resources?: ResourceProps[];
+    routes?: ReactElement;
+  };
   Provider?: ComponentType<PropsWithChildren>;
   AuthRuntimeProvider?: ComponentType<PropsWithChildren>;
   authRuntimePriority?: number;

package/src/app/extensions.tsx

@@ -1,15 +1,25 @@
-import { Suspense, type PropsWithChildren, type ReactNode } from "react";
+import {
+  Suspense,
+  type PropsWithChildren,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import type { AppExtension } from "./extension";
 import { LoadingState } from "@/components/app-shell/loading-state";
+import { createDevelopmentRoute } from "./development";
 
 const extensionModules = import.meta.glob<{ default: AppExtension }>(
-  "../extensions/*/extension.tsx",
+  "@/extensions/*/extension.tsx",
   { eager: true }
 );
 
 export const appExtensions = Object.values(extensionModules)
   .map((module) => module.default)
-  .sort((left, right) => left.id.localeCompare(right.id));
+  .sort(
+    (left, right) =>
+      (left.priority ?? 100) - (right.priority ?? 100) ||
+      left.id.localeCompare(right.id)
+  );
 
 export const extensionResources = appExtensions.flatMap(
   (extension) => extension.resources ?? []
@@ -17,7 +27,11 @@ export const extensionResources = appExtensions.flatMap(
 
 export const extensionRouteElements = appExtensions
   .map((extension) => extension.routes)
-  .filter((routes): routes is NonNullable<typeof routes> => Boolean(routes));
+  .filter((routes): routes is ReactElement => Boolean(routes));
+
+export const extensionStandaloneRouteElements = import.meta.env.DEV
+  ? [createDevelopmentRoute(appExtensions)]
+  : [];
 
 export const extensionUserMenuItems = appExtensions
   .filter((extension) => extension.UserMenuItems)

package/src/app/routes.tsx

@@ -0,0 +1,65 @@
+import { Authenticated } from "@refinedev/core";
+import { CatchAllNavigate } from "@refinedev/react-router";
+import { Outlet, Route, Routes } from "react-router";
+
+import { AclBootstrap } from "@/components/access-control/acl-bootstrap";
+import { NavigateToAccessibleResource } from "@/components/access-control/navigate-to-accessible-resource";
+import { ErrorComponent } from "@/components/app-shell/error-component";
+import { Layout } from "@/components/app-shell/layout";
+import { ForgotPassword } from "@/pages/forgot-password";
+import { Login } from "@/pages/login";
+import { Register } from "@/pages/register";
+import {
+  AppExtensionProviders,
+  extensionRouteElements,
+  extensionStandaloneRouteElements,
+} from "./extensions";
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route
+        element={
+          <Authenticated
+            key="authenticated-inner"
+            fallback={<CatchAllNavigate to="/login" />}
+          >
+            <AclBootstrap>
+              <AppExtensionProviders>
+                <Outlet />
+              </AppExtensionProviders>
+            </AclBootstrap>
+          </Authenticated>
+        }
+      >
+        {extensionStandaloneRouteElements}
+        <Route
+          element={
+            <Layout>
+              <Outlet />
+            </Layout>
+          }
+        >
+          <Route index element={<NavigateToAccessibleResource />} />
+          {extensionRouteElements}
+          <Route path="*" element={<ErrorComponent />} />
+        </Route>
+      </Route>
+
+      <Route
+        element={
+          <Authenticated key="authenticated-outer" fallback={<Outlet />}>
+            <AclBootstrap>
+              <NavigateToAccessibleResource />
+            </AclBootstrap>
+          </Authenticated>
+        }
+      >
+        <Route path="/login" element={<Login />} />
+        <Route path="/signin" element={<Login />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
+      </Route>
+    </Routes>
+  );
+}

package/src/components/access-control/acl-bootstrap.tsx

@@ -1,9 +1,17 @@
-import type { PropsWithChildren } from "react";
+import { useEffect, type PropsWithChildren } from "react";
 
+import { useAclState, useAclStore } from "@/lib/nocobase/acl";
 import { AclGate } from "./acl-gate";
-import { useAclRuntime } from "./use-acl-runtime";
 
 export function AclBootstrap({ children }: PropsWithChildren) {
-  useAclRuntime();
+  const store = useAclStore();
+  const state = useAclState();
+
+  useEffect(() => {
+    if (state.status === "idle") {
+      store.load();
+    }
+  }, [state.status, store]);
+
   return <AclGate>{children}</AclGate>;
 }

package/src/components/access-control/acl-gate.tsx

@@ -3,26 +3,27 @@ import type { PropsWithChildren } from "react";
 
 import { Button } from "@/components/ui/button";
 import { LoadingState } from "@/components/app-shell/loading-state";
-import { loadAcl, useAclSnapshot } from "@/lib/nocobase/acl";
+import { useAclState, useAclStore } from "@/lib/nocobase/acl";
 
 export function AclGate({ children }: PropsWithChildren) {
-  const snapshot = useAclSnapshot();
+  const store = useAclStore();
+  const state = useAclState();
 
-  if (snapshot.status === "ready") return children;
+  if (state.status === "ready") return children;
 
-  if (snapshot.status === "error") {
+  if (state.status === "error") {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background p-6">
         <div className="max-w-md text-center">
           <h1 className="text-xl font-semibold">Unable to load permissions</h1>
           <p className="mt-2 text-sm leading-6 text-muted-foreground">
-            {snapshot.error?.message ??
+            {state.error.message ??
               "The current role permissions could not be loaded."}
           </p>
           <Button
             className="mt-5"
             variant="outline"
-            onClick={() => void loadAcl({ force: true }).catch(() => undefined)}
+            onClick={() => store.retry()}
           >
             <RotateCcw />
             Retry

package/src/components/access-control/can-access.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithChildren, ReactNode } from "react";
+
+import { useCanAccess, type AclAccessRequest } from "@/lib/nocobase/acl";
+
+export type CanAccessProps = PropsWithChildren<
+  AclAccessRequest & {
+    fallback?: ReactNode;
+  }
+>;
+
+export function CanAccess({
+  children,
+  fallback = null,
+  ...request
+}: CanAccessProps) {
+  return useCanAccess(request) ? children : fallback;
+}

package/src/components/access-control/navigate-to-accessible-resource.tsx

@@ -4,14 +4,19 @@ import { Navigate } from "react-router";
 import {
   filterMenuItemsByAcl,
   findFirstAccessibleRoute,
-  useAclSnapshot,
+  useAclState,
 } from "@/lib/nocobase/acl";
 import { AccessDenied } from "./access-denied";
 
 export function NavigateToAccessibleResource() {
   const { menuItems } = useMenu();
-  const acl = useAclSnapshot();
-  const route = findFirstAccessibleRoute(filterMenuItemsByAcl(menuItems, acl));
+  const state = useAclState();
+  const route =
+    state.status === "ready"
+      ? findFirstAccessibleRoute(
+          filterMenuItemsByAcl(menuItems, state.permissions)
+        )
+      : undefined;
 
   return route ? <Navigate to={route} replace /> : <AccessDenied />;
 }

package/src/components/app-shell/sidebar.tsx

@@ -31,18 +31,34 @@ import { Button } from "@/components/ui/button";
 import { ChevronRight, ListIcon, ShieldCheck } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Brand } from "@/components/app-shell/brand";
-import { filterMenuItemsByAcl, useAclSnapshot } from "@/lib/nocobase/acl";
+import { filterMenuItemsByAcl, useAclState } from "@/lib/nocobase/acl";
 import { getResourceLabel } from "@/components/resources/resource-label";
 
 export function Sidebar() {
-  const { open } = useShadcnSidebar();
   const { menuItems, selectedKey } = useMenu();
-  const acl = useAclSnapshot();
+  const acl = useAclState();
   const allowedMenuItems = React.useMemo(
-    () => filterMenuItemsByAcl(menuItems, acl),
+    () =>
+      acl.status === "ready"
+        ? filterMenuItemsByAcl(menuItems, acl.permissions)
+        : [],
     [acl, menuItems]
   );
 
+  return (
+    <SidebarNavigation menuItems={allowedMenuItems} selectedKey={selectedKey} />
+  );
+}
+
+export function SidebarNavigation({
+  menuItems,
+  selectedKey,
+}: {
+  menuItems: TreeMenuItem[];
+  selectedKey?: string;
+}) {
+  const { open } = useShadcnSidebar();
+
   return (
     <ShadcnSidebar
       collapsible="icon"
@@ -64,7 +80,7 @@ export function Sidebar() {
           }
         )}
       >
-        {allowedMenuItems.map((item: TreeMenuItem) => (
+        {menuItems.map((item: TreeMenuItem) => (
           <SidebarItem
             key={item.key || item.name}
             item={item}