@nocobase/portal-template-default 1.0.0

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

@@ -0,0 +1,351 @@
+"use client";
+
+import React from "react";
+import {
+  useMenu,
+  useLink,
+  type TreeMenuItem,
+} from "@refinedev/core";
+import {
+  SidebarRail as ShadcnSidebarRail,
+  Sidebar as ShadcnSidebar,
+  SidebarContent as ShadcnSidebarContent,
+  SidebarFooter as ShadcnSidebarFooter,
+  SidebarHeader as ShadcnSidebarHeader,
+  useSidebar as useShadcnSidebar,
+} from "@/components/ui/sidebar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+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";
+
+export function Sidebar() {
+  const { open } = useShadcnSidebar();
+  const { menuItems, selectedKey } = useMenu();
+
+  return (
+    <ShadcnSidebar
+      collapsible="icon"
+      className={cn("border-r border-sidebar-border/70")}
+    >
+      <ShadcnSidebarRail />
+      <SidebarHeader />
+      <ShadcnSidebarContent
+        className={cn(
+          "transition-discrete",
+          "duration-200",
+          "flex",
+          "flex-col",
+          "gap-1.5",
+          "py-3",
+          {
+            "px-3": open,
+            "px-1": !open,
+          }
+        )}
+      >
+        {menuItems.map((item: TreeMenuItem) => (
+          <SidebarItem
+            key={item.key || item.name}
+            item={item}
+            selectedKey={selectedKey}
+          />
+        ))}
+      </ShadcnSidebarContent>
+      <SidebarFooter />
+    </ShadcnSidebar>
+  );
+}
+
+type MenuItemProps = {
+  item: TreeMenuItem;
+  selectedKey?: string;
+};
+
+function SidebarItem({ item, selectedKey }: MenuItemProps) {
+  const { open } = useShadcnSidebar();
+
+  if (item.meta?.group) {
+    return <SidebarItemGroup item={item} selectedKey={selectedKey} />;
+  }
+
+  if (item.children && item.children.length > 0) {
+    if (open) {
+      return <SidebarItemCollapsible item={item} selectedKey={selectedKey} />;
+    }
+    return <SidebarItemDropdown item={item} selectedKey={selectedKey} />;
+  }
+
+  return <SidebarItemLink item={item} selectedKey={selectedKey} />;
+}
+
+function SidebarItemGroup({ item, selectedKey }: MenuItemProps) {
+  const { children } = item;
+  const { open } = useShadcnSidebar();
+
+  return (
+    <div className={cn("mt-2 border-t", "border-sidebar-border/70", "pt-4")}>
+      <span
+        className={cn(
+          "ml-3",
+          "block",
+          "text-xs",
+          "font-semibold",
+          "uppercase",
+          "text-muted-foreground",
+          "transition-all",
+          "duration-200",
+          {
+            "h-8": open,
+            "h-0": !open,
+            "opacity-0": !open,
+            "opacity-100": open,
+            "pointer-events-none": !open,
+            "pointer-events-auto": open,
+          }
+        )}
+      >
+        {getDisplayName(item)}
+      </span>
+      {children && children.length > 0 && (
+        <div className={cn("flex", "flex-col")}>
+          {children.map((child: TreeMenuItem) => (
+            <SidebarItem
+              key={child.key || child.name}
+              item={child}
+              selectedKey={selectedKey}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SidebarItemCollapsible({ item, selectedKey }: MenuItemProps) {
+  const { name, children } = item;
+
+  const chevronIcon = (
+    <ChevronRight
+      className={cn(
+        "h-4",
+        "w-4",
+        "shrink-0",
+        "text-muted-foreground",
+        "transition-transform",
+        "duration-200",
+        "group-data-[state=open]:rotate-90"
+      )}
+    />
+  );
+
+  return (
+    <Collapsible key={`collapsible-${name}`} className={cn("w-full", "group")}>
+      <CollapsibleTrigger
+        render={<SidebarButton item={item} rightIcon={chevronIcon} />}
+      />
+      <CollapsibleContent className={cn("ml-6", "flex", "flex-col", "gap-2")}>
+        {children?.map((child: TreeMenuItem) => (
+          <SidebarItem
+            key={child.key || child.name}
+            item={child}
+            selectedKey={selectedKey}
+          />
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function SidebarItemDropdown({ item, selectedKey }: MenuItemProps) {
+  const { children } = item;
+  const Link = useLink();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<SidebarButton item={item} />} />
+      <DropdownMenuContent side="right" align="start">
+        {children?.map((child: TreeMenuItem) => {
+          const { key: childKey } = child;
+          const isSelected = childKey === selectedKey;
+
+          return (
+            <DropdownMenuItem
+              key={childKey || child.name}
+              render={<Link
+                to={child.route || ""}
+                className={cn("flex w-full items-center gap-2", {
+                  "bg-accent text-accent-foreground": isSelected,
+                })}
+              />}
+            >
+              <ItemIcon
+                icon={child.meta?.icon ?? child.icon}
+                isSelected={isSelected}
+              />
+              <span>{getDisplayName(child)}</span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function SidebarItemLink({ item, selectedKey }: MenuItemProps) {
+  const isSelected = item.key === selectedKey;
+
+  return <SidebarButton item={item} isSelected={isSelected} asLink={true} />;
+}
+
+function SidebarHeader() {
+  const { open } = useShadcnSidebar();
+
+  return (
+    <ShadcnSidebarHeader
+      className={cn(
+        "h-16",
+        "p-0",
+        "border-b",
+        "border-sidebar-border/70",
+        "flex-row",
+        "items-center",
+        "overflow-hidden",
+        open ? "px-5" : "justify-center px-0"
+      )}
+    >
+      <Brand
+        showText={open}
+        logoClassName={cn("transition-transform duration-200", !open && "size-9")}
+      />
+    </ShadcnSidebarHeader>
+  );
+}
+
+function SidebarFooter() {
+  const { open } = useShadcnSidebar();
+
+  return (
+    <ShadcnSidebarFooter className="border-t border-sidebar-border/70 p-0">
+      <div
+        className={cn(
+          "flex min-h-16 items-center",
+          open ? "gap-3 px-5 py-3" : "justify-center px-2"
+        )}
+      >
+        <ShieldCheck className="size-4 shrink-0 text-muted-foreground" />
+        {open && (
+          <div className="min-w-0 text-xs leading-4">
+            <div className="font-semibold text-sidebar-foreground">
+              AI builds freely.
+            </div>
+            <div className="text-muted-foreground">
+              NocoBase keeps it reliable.
+            </div>
+          </div>
+        )}
+      </div>
+    </ShadcnSidebarFooter>
+  );
+}
+
+function getDisplayName(item: TreeMenuItem) {
+  return item.meta?.label ?? item.label ?? item.name;
+}
+
+type IconProps = {
+  icon: React.ReactNode;
+  isSelected?: boolean;
+};
+
+function ItemIcon({ icon, isSelected }: IconProps) {
+  return (
+    <div
+      className={cn("w-4", {
+        "text-muted-foreground": !isSelected,
+        "text-primary": isSelected,
+      })}
+    >
+      {icon ?? <ListIcon />}
+    </div>
+  );
+}
+
+type SidebarButtonProps = React.ComponentProps<typeof Button> & {
+  item: TreeMenuItem;
+  isSelected?: boolean;
+  rightIcon?: React.ReactNode;
+  asLink?: boolean;
+  onClick?: () => void;
+};
+
+function SidebarButton({
+  item,
+  isSelected = false,
+  rightIcon,
+  asLink = false,
+  className,
+  onClick,
+  ...props
+}: SidebarButtonProps) {
+  const Link = useLink();
+
+  const buttonContent = (
+    <>
+      <ItemIcon icon={item.meta?.icon ?? item.icon} isSelected={isSelected} />
+      <span
+        className={cn(
+          "tracking-[-0.00875rem] text-foreground",
+          {
+            "flex-1": rightIcon,
+            "text-left": rightIcon,
+            "line-clamp-1": !rightIcon,
+            truncate: !rightIcon,
+            "font-normal": !isSelected,
+            "font-medium": isSelected,
+          },
+        )}
+      >
+        {getDisplayName(item)}
+      </span>
+      {rightIcon}
+    </>
+  );
+
+  return (
+    <Button
+      render={
+        asLink && item.route ? (
+          <Link to={item.route} className={cn("flex w-full items-center gap-2")} />
+        ) : undefined
+      }
+      variant="ghost"
+      size="default"
+      className={cn(
+        "flex h-10 w-full items-center justify-start gap-3 rounded-lg px-3 text-sm transition-colors",
+        {
+          "bg-primary/10 text-primary hover:!bg-primary/15": isSelected,
+          "hover:bg-sidebar-accent/80": !isSelected,
+        },
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    >
+      {buttonContent}
+    </Button>
+  );
+}
+
+Sidebar.displayName = "Sidebar";

package/src/components/app-shell/user-avatar.tsx

@@ -0,0 +1,42 @@
+import { useGetIdentity } from "@refinedev/core";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+type User = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  fullName: string;
+  email: string;
+  avatar?: string;
+};
+
+export function UserAvatar() {
+  const { data: user, isLoading: userIsLoading } = useGetIdentity<User>();
+
+  if (userIsLoading || !user) {
+    return <Skeleton className={cn("h-10", "w-10", "rounded-full")} />;
+  }
+
+  const { fullName, avatar } = user;
+
+  return (
+    <Avatar className={cn("h-10", "w-10")}>
+      {avatar && <AvatarImage src={avatar} alt={fullName} />}
+      <AvatarFallback>{getInitials(fullName)}</AvatarFallback>
+    </Avatar>
+  );
+}
+
+const getInitials = (name = "") => {
+  const names = name.split(" ");
+  let initials = names[0].substring(0, 1).toUpperCase();
+
+  if (names.length > 1) {
+    initials += names[names.length - 1].substring(0, 1).toUpperCase();
+  }
+  return initials;
+};
+
+UserAvatar.displayName = "UserAvatar";

package/src/components/app-shell/user-info.tsx

@@ -0,0 +1,53 @@
+import { useGetIdentity } from "@refinedev/core";
+import { Skeleton } from "@/components/ui/skeleton";
+import { UserAvatar } from "@/components/app-shell/user-avatar";
+import { cn } from "@/lib/utils";
+
+type User = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  fullName: string;
+  email: string;
+  avatar?: string;
+};
+
+export function UserInfo() {
+  const { data: user, isLoading: userIsLoading } = useGetIdentity<User>();
+
+  if (userIsLoading || !user) {
+    return (
+      <div className={cn("flex", "items-center", "gap-x-2")}>
+        <Skeleton className={cn("h-10", "w-10", "rounded-full")} />
+        <div className={cn("flex", "flex-col", "justify-between", "h-10")}>
+          <Skeleton className={cn("h-4", "w-32")} />
+          <Skeleton className={cn("h-4", "w-24")} />
+        </div>
+      </div>
+    );
+  }
+
+  const { firstName, lastName, email } = user;
+
+  return (
+    <div className={cn("flex", "items-center", "gap-x-2")}>
+      <UserAvatar />
+      <div
+        className={cn(
+          "flex",
+          "flex-col",
+          "justify-between",
+          "h-10",
+          "text-left"
+        )}
+      >
+        <span className={cn("text-sm", "font-medium", "text-muted-foreground")}>
+          {firstName} {lastName}
+        </span>
+        <span className={cn("text-xs", "text-muted-foreground")}>{email}</span>
+      </div>
+    </div>
+  );
+}
+
+UserInfo.displayName = "UserInfo";

package/src/components/auth/auth-layout.tsx

@@ -0,0 +1,82 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { Blocks, ShieldCheck, Sparkles } from "lucide-react";
+
+import { Brand } from "@/components/app-shell/brand";
+
+type AuthLayoutProps = PropsWithChildren<{
+  title: string;
+  description: string;
+  footer?: ReactNode;
+}>;
+
+export function AuthLayout({
+  title,
+  description,
+  footer,
+  children,
+}: AuthLayoutProps) {
+  return (
+    <div className="grid min-h-svh md:grid-cols-[minmax(420px,44%)_1fr]">
+      <main className="grid place-items-center bg-card px-6 py-10 sm:px-12">
+        <div className="w-full max-w-sm">
+          <Brand className="mb-14" logoClassName="h-10" />
+          <h1 className="text-3xl font-semibold tracking-[-0.035em]">
+            {title}
+          </h1>
+          <p className="mb-8 mt-2 text-sm text-muted-foreground">
+            {description}
+          </p>
+          {children}
+          {footer && <div className="mt-8 text-sm">{footer}</div>}
+        </div>
+      </main>
+
+      <section className="relative hidden overflow-hidden bg-neutral-950 p-12 text-white md:grid md:place-items-center">
+        <div className="absolute inset-0 opacity-[0.08] [background-image:linear-gradient(currentColor_1px,transparent_1px),linear-gradient(90deg,currentColor_1px,transparent_1px)] [background-size:48px_48px]" />
+        <div className="relative w-full max-w-xl">
+          <div className="text-xs font-semibold uppercase tracking-[0.14em] text-primary-foreground/60">
+            AI-native application platform
+          </div>
+          <h2 className="mt-3 max-w-lg text-5xl font-semibold leading-[1.08] tracking-[-0.04em]">
+            Let AI build freely. NocoBase keeps it reliable.
+          </h2>
+          <p className="mt-5 max-w-lg text-base leading-7 text-white/60">
+            Give AI a flexible frontend framework to shape each experience,
+            while NocoBase secures the data, permissions, workflows and
+            governance underneath.
+          </p>
+
+          <div className="mt-10 max-w-md rounded-xl border border-white/15 bg-white p-5 text-neutral-900 shadow-2xl shadow-black/20">
+            <div className="flex items-center gap-3">
+              <div className="grid size-10 place-items-center rounded-lg bg-neutral-100">
+                <Sparkles className="size-4" />
+              </div>
+              <div>
+                <div className="font-semibold">AI-native frontend</div>
+                <div className="text-sm text-neutral-500">
+                  Compose interfaces freely on a flexible framework.
+                </div>
+              </div>
+            </div>
+            <div className="my-5 h-px bg-neutral-200" />
+            <div className="flex items-center gap-3">
+              <div className="grid size-10 place-items-center rounded-lg bg-neutral-100">
+                <ShieldCheck className="size-4" />
+              </div>
+              <div>
+                <div className="font-semibold">NocoBase foundation</div>
+                <div className="text-sm text-neutral-500">
+                  Reliable data, access control, workflows and governance.
+                </div>
+              </div>
+            </div>
+            <div className="mt-5 flex items-center gap-2 rounded-lg bg-neutral-100 px-3 py-2 text-xs font-medium text-neutral-600">
+              <Blocks className="size-3.5" />
+              Freedom above. Confidence below.
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/components/auth/forgot-password-form.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowLeft } from "lucide-react";
+import { useForgotPassword, useLink } from "@refinedev/core";
+
+import { AuthLayout } from "@/components/auth/auth-layout";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export const ForgotPasswordForm = () => {
+  const [email, setEmail] = useState("");
+  const Link = useLink();
+  const { mutate: forgotPassword } = useForgotPassword();
+
+  const handleForgotPassword = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    forgotPassword({ email });
+  };
+
+  return (
+    <AuthLayout
+      title="Forgot password"
+      description="Enter your email to reset your password."
+      footer={
+        <Link
+          to="/login"
+          className="inline-flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <ArrowLeft className="size-4" />
+          Back to sign in
+        </Link>
+      }
+    >
+      <form onSubmit={handleForgotPassword} className="space-y-5">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            autoComplete="email"
+            autoFocus
+            required
+            className="h-11 rounded-lg"
+          />
+        </div>
+        <Button type="submit" size="lg" className="h-11 w-full rounded-lg">
+          Send reset link
+        </Button>
+      </form>
+    </AuthLayout>
+  );
+};
+
+ForgotPasswordForm.displayName = "ForgotPasswordForm";

package/src/components/auth/input-password.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+type InputPasswordProps = React.ComponentProps<"input">;
+
+export const InputPassword = ({ className, ...props }: InputPasswordProps) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className={cn("relative")}>
+      <Input
+        type={showPassword ? "text" : "password"}
+        className={cn(className)}
+        {...props}
+      />
+      <button
+        type="button"
+        className={cn(
+          "appearance-none",
+          "absolute right-3 top-1/2 -translate-y-1/2"
+        )}
+        onClick={() => setShowPassword(!showPassword)}
+      >
+        {showPassword ? (
+          <EyeOff size={18} className={cn("text-gray-500")} />
+        ) : (
+          <Eye size={18} className={cn("text-gray-500")} />
+        )}
+      </button>
+    </div>
+  );
+};
+
+InputPassword.displayName = "InputPassword";