@nocobase/portal-template-default 1.0.0

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

@@ -0,0 +1,104 @@
+"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 { RefreshButton } from "@/components/resources/buttons/refresh";
+import { ArrowLeftIcon } from "lucide-react";
+
+type EditViewProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function EditView({ children, className }: EditViewProps) {
+  return (
+    <div className={cn("flex flex-col", "gap-6", className)}>
+      <EditViewHeader />
+      {children}
+    </div>
+  );
+}
+
+type EditViewHeaderProps = PropsWithChildren<{
+  resource?: string;
+  title?: string;
+  wrapperClassName?: string;
+  headerClassName?: string;
+  actionsSlot?: React.ReactNode;
+}>;
+
+export const EditViewHeader = ({
+  resource: resourceFromProps,
+  title: titleFromProps,
+  actionsSlot,
+  wrapperClassName,
+  headerClassName,
+}: EditViewHeaderProps) => {
+  const back = useBack();
+
+  const getUserFriendlyName = useUserFriendlyName();
+
+  const { resource, identifier } = useResourceParams({
+    resource: resourceFromProps,
+  });
+  const { id: recordItemId } = useResourceParams();
+
+  const resourceName = resource?.name ?? identifier;
+
+  const resourceTitle = getUserFriendlyName(
+    resource?.meta?.label ?? identifier ?? resource?.name,
+    "singular"
+  );
+  const title = titleFromProps ?? `Edit ${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 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+          headerClassName
+        )}
+      >
+        <div className="flex items-start gap-2">
+          <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">
+              Update this {resourceTitle.toLowerCase()} while NocoBase keeps
+              the data consistent.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {actionsSlot}
+          <RefreshButton
+            variant="outline"
+            recordItemId={recordItemId}
+            resource={resourceName}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+EditView.displayName = "EditView";

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

@@ -0,0 +1,86 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+
+import { useResourceParams, useUserFriendlyName } from "@refinedev/core";
+import { Breadcrumb } from "@/components/app-shell/breadcrumb";
+import { CreateButton } from "@/components/resources/buttons/create";
+import { cn } from "@/lib/utils";
+
+type ListViewProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function ListView({ children, className }: ListViewProps) {
+  return (
+    <div className={cn("flex flex-col", "gap-6", className)}>
+      <ListViewHeader />
+      {children}
+    </div>
+  );
+}
+
+type ListHeaderProps = PropsWithChildren<{
+  resource?: string;
+  title?: string;
+  canCreate?: boolean;
+  headerClassName?: string;
+  wrapperClassName?: string;
+}>;
+
+export const ListViewHeader = ({
+  canCreate,
+  resource: resourceFromProps,
+  title: titleFromProps,
+  wrapperClassName,
+  headerClassName,
+}: ListHeaderProps) => {
+  const getUserFriendlyName = useUserFriendlyName();
+
+  const { resource, identifier } = useResourceParams({
+    resource: resourceFromProps,
+  });
+  const resourceName = identifier ?? resource?.name;
+
+  const isCreateButtonVisible = canCreate ?? !!resource?.create;
+
+  const title =
+    titleFromProps ??
+    getUserFriendlyName(
+      resource?.meta?.label ?? identifier ?? resource?.name,
+      "plural"
+    );
+  const description = resource?.meta?.description as string | undefined;
+
+  return (
+    <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
+      <div className="flex items-center text-muted-foreground">
+        <Breadcrumb />
+      </div>
+      <div
+        className={cn(
+          "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
+          headerClassName
+        )}
+      >
+        <div>
+          <h2 className="text-3xl font-semibold tracking-[-0.035em]">
+            {title}
+          </h2>
+          {description && (
+            <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
+              {description}
+            </p>
+          )}
+        </div>
+        {isCreateButtonVisible && (
+          <div className="flex items-center gap-2">
+            <CreateButton resource={resourceName} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+ListView.displayName = "ListView";

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

@@ -0,0 +1,108 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+
+import { ArrowLeftIcon } from "lucide-react";
+import {
+  useBack,
+  useResourceParams,
+  useUserFriendlyName,
+} from "@refinedev/core";
+import { Breadcrumb } from "@/components/app-shell/breadcrumb";
+import { Button } from "@/components/ui/button";
+import { RefreshButton } from "@/components/resources/buttons/refresh";
+import { cn } from "@/lib/utils";
+import { EditButton } from "../buttons/edit";
+
+type ShowViewProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function ShowView({ children, className }: ShowViewProps) {
+  return (
+    <div className={cn("flex flex-col", "gap-6", className)}>
+      <ShowViewHeader />
+      {children}
+    </div>
+  );
+}
+
+type ShowViewHeaderProps = PropsWithChildren<{
+  resource?: string;
+  title?: string;
+  wrapperClassName?: string;
+  headerClassName?: string;
+}>;
+
+export const ShowViewHeader = ({
+  resource: resourceFromProps,
+  title: titleFromProps,
+  wrapperClassName,
+  headerClassName,
+}: ShowViewHeaderProps) => {
+  const back = useBack();
+
+  const getUserFriendlyName = useUserFriendlyName();
+
+  const { resource, identifier } = useResourceParams({
+    resource: resourceFromProps,
+  });
+  const { id: recordItemId } = useResourceParams();
+
+  const resourceName = resource?.name ?? identifier;
+
+  const title =
+    titleFromProps ??
+    getUserFriendlyName(
+      resource?.meta?.label ?? identifier ?? resource?.name,
+      "singular"
+    );
+
+  return (
+    <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
+      <div className="flex items-center text-muted-foreground">
+        <Breadcrumb />
+      </div>
+      <div
+        className={cn(
+          "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+          headerClassName
+        )}
+      >
+        <div className="flex items-start gap-2">
+          <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">
+              Review the record and its NocoBase-managed data.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <RefreshButton
+            variant="outline"
+            recordItemId={recordItemId}
+            resource={resourceName}
+          />
+          <EditButton
+            variant="outline"
+            recordItemId={recordItemId}
+            resource={resourceName}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ShowView.displayName = "ShowView";

package/src/components/theme/theme-provider.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "light",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "nocobase-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const storedTheme = localStorage.getItem(storageKey);
+    return storedTheme === "dark" || storedTheme === "light"
+      ? storedTheme
+      : defaultTheme;
+  });
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) {
+    console.error("useTheme must be used within a ThemeProvider");
+  }
+
+  return context;
+}
+
+ThemeProvider.displayName = "ThemeProvider";

package/src/components/theme/theme-select.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React from "react";
+import { useTheme } from "./theme-provider";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Moon, Sun, ChevronDown, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type ThemeOption = {
+  value: "light" | "dark";
+  label: string;
+  icon: React.ReactNode;
+};
+
+const themeOptions: ThemeOption[] = [
+  {
+    value: "light",
+    label: "Light",
+    icon: <Sun className="h-4 w-4" />,
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: <Moon className="h-4 w-4" />,
+  },
+];
+
+export function ThemeSelect() {
+  const { theme, setTheme } = useTheme();
+
+  const currentTheme = themeOptions.find((option) => option.value === theme);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="lg"
+            className={cn(
+              "w-full",
+              "justify-between",
+              "px-3",
+              "text-left",
+              "text-sm",
+              "font-normal",
+              "text-foreground",
+              "hover:bg-accent",
+              "hover:text-accent-foreground",
+              "focus-visible:outline-none",
+              "focus-visible:ring-2",
+              "focus-visible:ring-ring"
+            )}
+          />
+        }
+      >
+        <div className="flex items-center gap-2">
+          {currentTheme?.icon}
+          <span>{currentTheme?.label}</span>
+        </div>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-40 space-y-1">
+        {themeOptions.map((option) => {
+          const isSelected = theme === option.value;
+
+          return (
+            <DropdownMenuItem
+              key={option.value}
+              onClick={() => setTheme(option.value)}
+              className={cn(
+                "flex items-center gap-2 cursor-pointer relative pr-8",
+                {
+                  "bg-accent text-accent-foreground": isSelected,
+                }
+              )}
+            >
+              {option.icon}
+              <span>{option.label}</span>
+              {isSelected && (
+                <Check className="h-4 w-4 absolute right-2 text-primary" />
+              )}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+ThemeSelect.displayName = "ThemeSelect";

package/src/components/theme/theme-toggle.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useTheme } from "@/components/theme/theme-provider";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Moon, Sun } from "lucide-react";
+
+type ThemeToggleProps = {
+  className?: string;
+};
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => setTheme(theme === "dark" ? "light" : "dark");
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={toggleTheme}
+      className={cn(
+        "rounded-xl",
+        "border-border/70",
+        "bg-background/60",
+        className,
+        "h-10",
+        "w-10"
+      )}
+    >
+      <Sun
+        className={cn(
+          "h-[1.2rem]",
+          "w-[1.2rem]",
+          "rotate-0",
+          "scale-100",
+          "transition-all",
+          "duration-200",
+          {
+            "-rotate-90 scale-0": theme === "dark",
+          }
+        )}
+      />
+      <Moon
+        className={cn(
+          "absolute",
+          "h-[1.2rem]",
+          "w-[1.2rem]",
+          "rotate-90",
+          "scale-0",
+          "transition-all",
+          "duration-200",
+          {
+            "rotate-0 scale-100": theme === "dark",
+            "rotate-90 scale-0": theme === "light",
+          }
+        )}
+      />
+      <span className="sr-only">
+        Switch to {theme === "dark" ? "light" : "dark"} mode
+      </span>
+    </Button>
+  );
+}
+
+ThemeToggle.displayName = "ThemeToggle";

package/src/components/ui/accordion.tsx

@@ -0,0 +1,72 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }