ding-react-admin 2.0.0 → 2.0.4

package/src/components/ScrollableArea.tsx

@@ -0,0 +1,46 @@
+import { theme } from "antd";
+import { forwardRef } from "react";
+import type { CSSProperties, ReactNode } from "react";
+import "./scrollable.css";
+
+export type ScrollableAreaProps = {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  /** Use lighter thumbs on dark sidebar backgrounds. */
+  variant?: "default" | "on-dark";
+};
+
+export const ScrollableArea = forwardRef<HTMLDivElement, ScrollableAreaProps>(
+  function ScrollableArea(
+    { children, className, style, variant = "default" },
+    ref,
+  ) {
+    const { token } = theme.useToken();
+
+    const thumb =
+      variant === "on-dark"
+        ? "rgba(255, 255, 255, 0.22)"
+        : token.colorTextQuaternary;
+    const thumbHover =
+      variant === "on-dark"
+        ? "rgba(255, 255, 255, 0.38)"
+        : token.colorTextTertiary;
+
+    return (
+      <div
+        ref={ref}
+        className={["ding-admin-scroll", className].filter(Boolean).join(" ")}
+        style={
+          {
+            ...style,
+            "--ding-scroll-thumb": thumb,
+            "--ding-scroll-thumb-hover": thumbHover,
+          } as CSSProperties
+        }
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/components/ThemeSwitch.tsx

@@ -1,28 +1,28 @@
-import {
-  DesktopOutlined,
-  MoonOutlined,
-  SunOutlined,
-} from "@ant-design/icons";
-import { Segmented } from "antd";
-import type { SegmentedProps } from "antd";
-import type { ThemeMode } from "../types";
-import { useThemeMode } from "../context/AppThemeProvider";
-
-const OPTIONS: SegmentedProps["options"] = [
-  { label: "Light", value: "light", icon: <SunOutlined /> },
-  { label: "Dark", value: "dark", icon: <MoonOutlined /> },
-  { label: "Auto", value: "system", icon: <DesktopOutlined /> },
-];
-
-export function ThemeSwitch() {
-  const { mode, setMode } = useThemeMode();
-
-  return (
-    <Segmented
-      size="small"
-      value={mode}
-      options={OPTIONS}
-      onChange={(v) => setMode(v as ThemeMode)}
-    />
-  );
-}
+import {
+  DesktopOutlined,
+  MoonOutlined,
+  SunOutlined,
+} from "@ant-design/icons";
+import { Segmented } from "antd";
+import type { SegmentedProps } from "antd";
+import type { ThemeMode } from "../types";
+import { useThemeMode } from "../context/AppThemeProvider";
+
+const OPTIONS: SegmentedProps["options"] = [
+  { label: "Light", value: "light", icon: <SunOutlined /> },
+  { label: "Dark", value: "dark", icon: <MoonOutlined /> },
+  { label: "Auto", value: "system", icon: <DesktopOutlined /> },
+];
+
+export function ThemeSwitch() {
+  const { mode, setMode } = useThemeMode();
+
+  return (
+    <Segmented
+      size="small"
+      value={mode}
+      options={OPTIONS}
+      onChange={(v) => setMode(v as ThemeMode)}
+    />
+  );
+}

package/src/components/ThemeToolbar.tsx

@@ -1,34 +1,34 @@
-import { SettingOutlined } from "@ant-design/icons";
-import { Button, Grid, Popover, Space, theme } from "antd";
-import { DensitySwitch } from "./DensitySwitch";
-import { ThemeSwitch } from "./ThemeSwitch";
-
-export function ThemeToolbar() {
-  const { token } = theme.useToken();
-  const screens = Grid.useBreakpoint();
-  const placement = screens.lg ? "bottomRight" : "bottom";
-
-  return (
-    <Popover
-      placement={placement}
-      trigger="click"
-      content={
-        <Space
-          orientation="vertical"
-          size="middle"
-          style={{ minWidth: 240, maxWidth: "min(92vw, 320px)" }}
-        >
-          <ThemeSwitch />
-          <DensitySwitch />
-        </Space>
-      }
-      styles={{ content: { padding: token.paddingSM } }}
-    >
-      <Button
-        type="default"
-        icon={<SettingOutlined />}
-        aria-label="Display and theme settings"
-      />
-    </Popover>
-  );
-}
+import { SettingOutlined } from "@ant-design/icons";
+import { Button, Grid, Popover, Space, theme } from "antd";
+import { DensitySwitch } from "./DensitySwitch";
+import { ThemeSwitch } from "./ThemeSwitch";
+
+export function ThemeToolbar() {
+  const { token } = theme.useToken();
+  const screens = Grid.useBreakpoint();
+  const placement = screens.lg ? "bottomRight" : "bottom";
+
+  return (
+    <Popover
+      placement={placement}
+      trigger="click"
+      content={
+        <Space
+          orientation="vertical"
+          size="middle"
+          style={{ minWidth: 240, maxWidth: "min(92vw, 320px)" }}
+        >
+          <ThemeSwitch />
+          <DensitySwitch />
+        </Space>
+      }
+      styles={{ content: { padding: token.paddingSM } }}
+    >
+      <Button
+        type="default"
+        icon={<SettingOutlined />}
+        aria-label="Display and theme settings"
+      />
+    </Popover>
+  );
+}

package/src/components/index.ts

@@ -1,4 +1,7 @@
-export { AuthAlternateLink } from "./AuthAlternateLink";
-export { ThemeToolbar } from "./ThemeToolbar";
-export { ThemeSwitch } from "./ThemeSwitch";
-export { DensitySwitch } from "./DensitySwitch";
+export { AuthAlternateLink } from "./AuthAlternateLink";
+export { NavMenuLabel } from "./NavMenuLabel";
+export { NavMenuSearch } from "./NavMenuSearch";
+export { ScrollableArea } from "./ScrollableArea";
+export { ThemeToolbar } from "./ThemeToolbar";
+export { ThemeSwitch } from "./ThemeSwitch";
+export { DensitySwitch } from "./DensitySwitch";

package/src/components/navMenu.css

@@ -0,0 +1,21 @@
+.ding-admin-nav-menu .ant-menu-title-content {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ding-admin-menu-label {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Mobile drawer: wrap long labels instead of truncating */
+.ant-drawer .ding-admin-menu-label {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}

package/src/components/scrollable.css

@@ -0,0 +1,28 @@
+.ding-admin-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ding-scroll-thumb) transparent;
+}
+
+.ding-admin-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.ding-admin-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ding-admin-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--ding-scroll-thumb);
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+
+.ding-admin-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ding-scroll-thumb-hover);
+}
+
+.ding-admin-scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/src/context/AppThemeProvider.tsx

@@ -1,128 +1,128 @@
-import { ConfigProvider, theme as antdTheme } from "antd";
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import type {
-  AppThemeProviderProps,
-  ThemeDensity,
-  ThemeMode,
-} from "../types";
-
-export type { ThemeDensity, ThemeMode };
-
-type ThemeContextValue = {
-  mode: ThemeMode;
-  setMode: (mode: ThemeMode) => void;
-  /** Resolved appearance for Ant Design (`system` → OS preference). */
-  resolved: "light" | "dark";
-  density: ThemeDensity;
-  setDensity: (density: ThemeDensity) => void;
-};
-
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-function readStoredMode(key: string): ThemeMode {
-  try {
-    const raw = localStorage.getItem(key);
-    if (raw === "light" || raw === "dark" || raw === "system") return raw;
-  } catch {
-    /* ignore */
-  }
-  return "system";
-}
-
-function getSystemDark(): boolean {
-  return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-
-function readStoredDensity(key: string): ThemeDensity {
-  try {
-    const raw = localStorage.getItem(key);
-    if (raw === "comfortable" || raw === "compact") return raw;
-  } catch {
-    /* ignore */
-  }
-  return "comfortable";
-}
-
-const DEFAULT_MODE_KEY = "ding-react-admin-theme-mode";
-const DEFAULT_DENSITY_KEY = "ding-react-admin-theme-density";
-
-export function AppThemeProvider({
-  children,
-  modeStorageKey = DEFAULT_MODE_KEY,
-  densityStorageKey = DEFAULT_DENSITY_KEY,
-}: AppThemeProviderProps) {
-  const [mode, setModeState] = useState<ThemeMode>(() =>
-    readStoredMode(modeStorageKey),
-  );
-  const [density, setDensityState] = useState<ThemeDensity>(() =>
-    readStoredDensity(densityStorageKey),
-  );
-  const [systemDark, setSystemDark] = useState(getSystemDark);
-
-  useEffect(() => {
-    if (mode !== "system") return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const onChange = () => setSystemDark(mq.matches);
-    onChange();
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, [mode]);
-
-  const setMode = (next: ThemeMode) => {
-    setModeState(next);
-    try {
-      localStorage.setItem(modeStorageKey, next);
-    } catch {
-      /* ignore */
-    }
-  };
-
-  const setDensity = (next: ThemeDensity) => {
-    setDensityState(next);
-    try {
-      localStorage.setItem(densityStorageKey, next);
-    } catch {
-      /* ignore */
-    }
-  };
-
-  const resolved: "light" | "dark" =
-    mode === "system" ? (systemDark ? "dark" : "light") : mode;
-
-  const configTheme = useMemo(() => {
-    const base =
-      resolved === "dark"
-        ? antdTheme.darkAlgorithm
-        : antdTheme.defaultAlgorithm;
-    return {
-      algorithm:
-        density === "compact"
-          ? [base, antdTheme.compactAlgorithm]
-          : base,
-    };
-  }, [resolved, density]);
-
-  const value = useMemo(
-    () => ({ mode, setMode, resolved, density, setDensity }),
-    [mode, resolved, density, setMode, setDensity],
-  );
-
-  return (
-    <ThemeContext.Provider value={value}>
-      <ConfigProvider theme={configTheme}>{children}</ConfigProvider>
-    </ThemeContext.Provider>
-  );
-}
-
-export function useThemeMode() {
-  const ctx = useContext(ThemeContext);
-  if (!ctx)
-    throw new Error("useThemeMode must be used within AppThemeProvider");
-  return ctx;
-}
+import { ConfigProvider, theme as antdTheme } from "antd";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import type {
+  AppThemeProviderProps,
+  ThemeDensity,
+  ThemeMode,
+} from "../types";
+
+export type { ThemeDensity, ThemeMode };
+
+type ThemeContextValue = {
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  /** Resolved appearance for Ant Design (`system` → OS preference). */
+  resolved: "light" | "dark";
+  density: ThemeDensity;
+  setDensity: (density: ThemeDensity) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function readStoredMode(key: string): ThemeMode {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === "light" || raw === "dark" || raw === "system") return raw;
+  } catch {
+    /* ignore */
+  }
+  return "system";
+}
+
+function getSystemDark(): boolean {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function readStoredDensity(key: string): ThemeDensity {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw === "comfortable" || raw === "compact") return raw;
+  } catch {
+    /* ignore */
+  }
+  return "comfortable";
+}
+
+const DEFAULT_MODE_KEY = "ding-react-admin-theme-mode";
+const DEFAULT_DENSITY_KEY = "ding-react-admin-theme-density";
+
+export function AppThemeProvider({
+  children,
+  modeStorageKey = DEFAULT_MODE_KEY,
+  densityStorageKey = DEFAULT_DENSITY_KEY,
+}: AppThemeProviderProps) {
+  const [mode, setModeState] = useState<ThemeMode>(() =>
+    readStoredMode(modeStorageKey),
+  );
+  const [density, setDensityState] = useState<ThemeDensity>(() =>
+    readStoredDensity(densityStorageKey),
+  );
+  const [systemDark, setSystemDark] = useState(getSystemDark);
+
+  useEffect(() => {
+    if (mode !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => setSystemDark(mq.matches);
+    onChange();
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [mode]);
+
+  const setMode = (next: ThemeMode) => {
+    setModeState(next);
+    try {
+      localStorage.setItem(modeStorageKey, next);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const setDensity = (next: ThemeDensity) => {
+    setDensityState(next);
+    try {
+      localStorage.setItem(densityStorageKey, next);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const resolved: "light" | "dark" =
+    mode === "system" ? (systemDark ? "dark" : "light") : mode;
+
+  const configTheme = useMemo(() => {
+    const base =
+      resolved === "dark"
+        ? antdTheme.darkAlgorithm
+        : antdTheme.defaultAlgorithm;
+    return {
+      algorithm:
+        density === "compact"
+          ? [base, antdTheme.compactAlgorithm]
+          : base,
+    };
+  }, [resolved, density]);
+
+  const value = useMemo(
+    () => ({ mode, setMode, resolved, density, setDensity }),
+    [mode, resolved, density, setMode, setDensity],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <ConfigProvider theme={configTheme}>{children}</ConfigProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+export function useThemeMode() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx)
+    throw new Error("useThemeMode must be used within AppThemeProvider");
+  return ctx;
+}

package/src/context/AuthProvider.tsx

@@ -1,77 +1,89 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-  type ReactNode,
-} from "react";
-import type { AuthAdapter, LoginCredentials } from "../types";
-
-type AuthContextValue = {
-  isAuthenticated: boolean;
-  login: (credentials: LoginCredentials) => Promise<void>;
-  logout: () => void;
-};
-
-const AuthContext = createContext<AuthContextValue | null>(null);
-
-export type AuthProviderProps = {
-  children: ReactNode;
-  /** How login, logout, and token reads are implemented (API, sessionStorage, etc.). */
-  adapter: AuthAdapter;
-};
-
-export function AuthProvider({ children, adapter }: AuthProviderProps) {
-  const [token, setToken] = useState<string | null>(() => adapter.getToken());
-
-  const login = useCallback(
-    async (credentials: LoginCredentials) => {
-      await adapter.login(credentials);
-      setToken(adapter.getToken());
-    },
-    [adapter],
-  );
-
-  const logout = useCallback(() => {
-    adapter.logout();
-    setToken(adapter.getToken());
-  }, [adapter]);
-
-  const value = useMemo<AuthContextValue>(
-    () => ({
-      isAuthenticated: Boolean(token),
-      login,
-      logout,
-    }),
-    [token, login, logout],
-  );
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-export function useAuth() {
-  const ctx = useContext(AuthContext);
-  if (!ctx) throw new Error("useAuth must be used within AuthProvider");
-  return ctx;
-}
-
-const DEFAULT_SESSION_KEY = "ding-react-admin-auth";
-
-/** Store a non-empty token string in `sessionStorage` when “logged in”. */
-export function createSessionStorageAuthAdapter(
-  storageKey: string = DEFAULT_SESSION_KEY,
-): AuthAdapter {
-  return {
-    async login({ username, password }: LoginCredentials) {
-      if (!username.trim() || !password) throw new Error("Invalid credentials");
-      sessionStorage.setItem(storageKey, "1");
-    },
-    logout() {
-      sessionStorage.removeItem(storageKey);
-    },
-    getToken() {
-      return sessionStorage.getItem(storageKey);
-    },
-  };
-}
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import type { AuthAdapter, LoginCredentials } from "../types";
+
+type AuthContextValue = {
+  isAuthenticated: boolean;
+  /** From `AuthAdapter.getUserLabel`; `"User"` when the adapter omits it or returns null. */
+  userLabel: string;
+  login: (credentials: LoginCredentials) => Promise<void>;
+  logout: () => void;
+};
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export type AuthProviderProps = {
+  children: ReactNode;
+  /** How login, logout, and token reads are implemented (API, sessionStorage, etc.). */
+  adapter: AuthAdapter;
+};
+
+const DEFAULT_USER_LABEL = "User";
+
+function readUserLabel(adapter: AuthAdapter): string {
+  return adapter.getUserLabel?.() ?? DEFAULT_USER_LABEL;
+}
+
+export function AuthProvider({ children, adapter }: AuthProviderProps) {
+  const [token, setToken] = useState<string | null>(() => adapter.getToken());
+  const [userLabel, setUserLabel] = useState(() => readUserLabel(adapter));
+
+  const login = useCallback(
+    async (credentials: LoginCredentials) => {
+      await adapter.login(credentials);
+      setToken(adapter.getToken());
+      setUserLabel(readUserLabel(adapter));
+    },
+    [adapter],
+  );
+
+  const logout = useCallback(() => {
+    adapter.logout();
+    setToken(adapter.getToken());
+    setUserLabel(readUserLabel(adapter));
+  }, [adapter]);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({
+      isAuthenticated: Boolean(token),
+      userLabel,
+      login,
+      logout,
+    }),
+    [token, userLabel, login, logout],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within AuthProvider");
+  return ctx;
+}
+
+const DEFAULT_SESSION_KEY = "ding-react-admin-auth";
+
+/** Store a non-empty token string in `sessionStorage` when “logged in”. */
+export function createSessionStorageAuthAdapter(
+  storageKey: string = DEFAULT_SESSION_KEY,
+): AuthAdapter {
+  return {
+    async login({ username, password }: LoginCredentials) {
+      if (!username.trim() || !password) throw new Error("Invalid credentials");
+      sessionStorage.setItem(storageKey, "1");
+    },
+    logout() {
+      sessionStorage.removeItem(storageKey);
+    },
+    getToken() {
+      return sessionStorage.getItem(storageKey);
+    },
+  };
+}