@aiquants/menu-bar 1.18.2 → 1.19.0

package/src/MenuBar.tsx

@@ -1,248 +0,0 @@
-/**
- * @module MenuBar
- * @description Main menu bar component for @aiquants/menu-bar.
- * @description @aiquants/menu-bar のメインメニューバーコンポーネント。
- */
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"
-
-const useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect
-
-import { MenuContent } from "./contents/MenuContent"
-import type { IMenu, MenuNavigationPayload } from "./contents/MenuList"
-import { OverlayShadow } from "./contents/OverlayShadow"
-import { MenuSwitch } from "./elements/MenuSwitch"
-import { dispatchMenuPinChange } from "./events/pinEvent"
-import type { Theme } from "./types"
-
-/**
- * Props interface for the MenuBar component.
- * MenuBar コンポーネントのプロップスインターフェース。
- */
-export interface IMenuBarProps {
-    /** List of menu items. メニュー項目のリスト。 */
-    menuList: IMenu[]
-    /** Optional header content rendered at top of menu drawer. メニューヘッダー要素。 */
-    menuHeader?: React.ReactNode
-    /** Callback handler for sign out button click. サインアウト処理ハンドラー。 */
-    onClickSignout(): void
-    /** Whether to hide the menu bar (legacy camelCase). メニュー非表示フラグ（旧表記）。 */
-    isMenuhide?: boolean
-    /** Whether to hide the menu bar. メニュー非表示フラグ。 */
-    isMenuHide?: boolean
-    /** Current active color theme. 現在のテーマ。 */
-    theme: Theme
-    /** Toggle handler for switching color theme. テーマ切り替えハンドラー。 */
-    toggleTheme: () => void
-    /** Navigation callback when a menu item is selected. メニュー遷移ハンドラー。 */
-    onMenuNavigate?(payload: MenuNavigationPayload): void
-    /** Controlled pinning state (optional). ピン留め状態制御プロップ。 */
-    isPinned?: boolean
-    /** Custom width in pixels when menu is pinned (default: 240). ピン留め時の幅(px)。 */
-    pinnedWidth?: number
-    /** Callback invoked when menu pin state changes. ピン留め状態変更時のコールバック。 */
-    onPinChange?(pinned: boolean, widthPx: number): void
-    /** Controlled list of pinned submenu IDs. ピン留めサブメニューIDリスト（制御）。 */
-    pinnedSubmenuIds?: number[]
-    /** Initial list of pinned submenu IDs for uncontrolled mode. ピン留めサブメニューID初期リスト。 */
-    initialPinnedSubmenuIds?: number[]
-    /** Callback invoked when submenu pin state changes. サブメニューピン留め変更時コールバック。 */
-    onSubmenuPinChange?(pinnedIds: number[]): void
-    /** Controls whether the Escape key closes the menu drawer. Escape キーによるメニュー閉鎖制御。 */
-    closeOnEscape?: boolean | "auto"
-}
-
-/**
- * Renders the primary collapsible and pinnable menu bar with drawer navigation.
- * 折りたたみ・ピン留め対応のプライマリメニューバーコンポーネント。
- *
- * @param props - MenuBarProps configuration.
- * @returns Rendered JSX element or null.
- */
-export const MenuBar = (props: IMenuBarProps): React.JSX.Element | null => {
-    const {
-        menuList,
-        menuHeader,
-        onClickSignout,
-        isMenuhide,
-        isMenuHide,
-        theme,
-        toggleTheme,
-        onMenuNavigate,
-        isPinned: propIsPinned,
-        pinnedWidth = 240,
-        onPinChange,
-        pinnedSubmenuIds: propPinnedSubmenuIds,
-        initialPinnedSubmenuIds,
-        onSubmenuPinChange,
-        closeOnEscape = "auto",
-    } = props
-
-    const shouldHideMenu = isMenuHide ?? isMenuhide ?? false
-
-    const [internalIsPinned, setInternalIsPinned] = useState(() => {
-        try {
-            return localStorage.getItem("aiquants-menu-pinned") === "true"
-        } catch {
-            return false
-        }
-    })
-
-    const isPinned = propIsPinned !== undefined ? propIsPinned : internalIsPinned
-    const [isMenuOpen, setIsMenuOpen] = useState(isPinned)
-
-    // isPinned が true に変化した場合は自動的にメニューを開いた状態にする
-    useEffect(() => {
-        if (isPinned) {
-            setIsMenuOpen(true)
-        }
-    }, [isPinned])
-
-    const [pinnedSubmenuIds, setPinnedSubmenuIds] = useState<number[]>(() => {
-        if (initialPinnedSubmenuIds) {
-            return initialPinnedSubmenuIds
-        }
-        try {
-            const saved = localStorage.getItem("aiquants-submenu-pinned")
-            if (saved) {
-                const parsed = JSON.parse(saved)
-                if (Array.isArray(parsed)) {
-                    return parsed.filter((id) => typeof id === "number")
-                }
-            }
-        } catch {}
-        return []
-    })
-
-    const activePinnedSubmenuIds = propPinnedSubmenuIds !== undefined ? propPinnedSubmenuIds : pinnedSubmenuIds
-
-    const handleToggleSubmenuPin = useCallback(
-        (id: number) => {
-            const currentIds = propPinnedSubmenuIds !== undefined ? propPinnedSubmenuIds : pinnedSubmenuIds
-            const nextIds = currentIds.includes(id) ? currentIds.filter((x) => x !== id) : [...currentIds, id]
-
-            if (propPinnedSubmenuIds === undefined) {
-                setPinnedSubmenuIds(nextIds)
-                try {
-                    localStorage.setItem("aiquants-submenu-pinned", JSON.stringify(nextIds))
-                } catch {}
-            }
-
-            if (onSubmenuPinChange) {
-                onSubmenuPinChange(nextIds)
-            }
-        },
-        [propPinnedSubmenuIds, pinnedSubmenuIds, onSubmenuPinChange],
-    )
-
-    // コールバック関数参照を useRef で最新保持し、エフェクト再実行のインライン関数連鎖を遮断
-    const onPinChangeRef = useRef(onPinChange)
-    useSafeLayoutEffect(() => {
-        onPinChangeRef.current = onPinChange
-    }, [onPinChange])
-
-    // ピン状態変化時に CSS 変数をセットし、CustomEvent を自動発行
-    useSafeLayoutEffect(() => {
-        const effectiveWidth = isPinned ? pinnedWidth : 0
-        const widthCss = `${effectiveWidth}px`
-        document.documentElement.style.setProperty("--aiquants-menu-pinned-width", widthCss)
-
-        // CustomEvent 発行
-        dispatchMenuPinChange(isPinned, effectiveWidth)
-    }, [isPinned, pinnedWidth])
-
-    // アンマウント時に CSS 変数をリセットしピン解除通知を発行
-    useSafeLayoutEffect(() => {
-        return () => {
-            document.documentElement.style.setProperty("--aiquants-menu-pinned-width", "0px")
-            dispatchMenuPinChange(false, 0)
-        }
-    }, [])
-
-    const handleMenuOpen = useCallback(() => {
-        setIsMenuOpen(true)
-    }, [])
-
-    const handleMenuClose = useCallback(() => {
-        setIsMenuOpen(false)
-        if (propIsPinned === undefined) {
-            setInternalIsPinned(false)
-            try {
-                localStorage.removeItem("aiquants-menu-pinned")
-            } catch {}
-        }
-        onPinChangeRef.current?.(false, 0)
-    }, [propIsPinned])
-
-    const handleTogglePin = useCallback(() => {
-        const nextPinned = !isPinned
-        const nextWidth = nextPinned ? pinnedWidth : 0
-
-        if (propIsPinned === undefined) {
-            setInternalIsPinned(nextPinned)
-            try {
-                if (nextPinned) {
-                    localStorage.setItem("aiquants-menu-pinned", "true")
-                } else {
-                    localStorage.removeItem("aiquants-menu-pinned")
-                }
-            } catch {}
-        }
-
-        onPinChangeRef.current?.(nextPinned, nextWidth)
-    }, [isPinned, propIsPinned, pinnedWidth])
-
-    const handleMenuSelected = useCallback(
-        (payload: MenuNavigationPayload) => {
-            if (onMenuNavigate) {
-                onMenuNavigate(payload)
-            }
-            if (!isPinned) {
-                setIsMenuOpen(false)
-            }
-        },
-        [onMenuNavigate, isPinned],
-    )
-
-    const handleEscKey = useCallback(
-        (e: KeyboardEvent) => {
-            if (e.key === "Escape") {
-                handleMenuClose()
-            }
-        },
-        [handleMenuClose],
-    )
-
-    const escapeCloses = closeOnEscape === true || (closeOnEscape === "auto" && !isPinned)
-
-    useEffect(() => {
-        if (isMenuOpen && escapeCloses) {
-            window.addEventListener("keydown", handleEscKey)
-        } else {
-            window.removeEventListener("keydown", handleEscKey)
-        }
-
-        return () => {
-            window.removeEventListener("keydown", handleEscKey)
-        }
-    }, [isMenuOpen, escapeCloses, handleEscKey])
-
-    return shouldHideMenu ? null : (
-        <div className={`aiquants-menu-bar ${theme}`}>
-            <MenuSwitch onMenuClose={handleMenuClose} onMenuOpen={handleMenuOpen} open={!isMenuOpen} theme={theme} />
-            <MenuContent
-                menuList={menuList}
-                menuHeader={menuHeader}
-                onClickSignout={onClickSignout}
-                onMenuSelected={handleMenuSelected}
-                open={isMenuOpen}
-                theme={theme}
-                toggleTheme={toggleTheme}
-                isPinned={isPinned}
-                onTogglePin={handleTogglePin}
-                pinnedSubmenuIds={activePinnedSubmenuIds}
-                onToggleSubmenuPin={handleToggleSubmenuPin}
-            />
-            <OverlayShadow isOverlay={isMenuOpen && !isPinned} onOverlayClick={handleMenuClose} />
-        </div>
-    )
-}

package/src/__tests__/pinEvent.test.tsx

@@ -1,68 +0,0 @@
-import { act, render, renderHook } from "@testing-library/react"
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
-import { dispatchMenuPinChange, getInitialPinState, subscribeMenuPinChange } from "../events/pinEvent"
-import { useMenuPinState } from "../hooks/useMenuPinState"
-import { MenuBar } from "../MenuBar"
-
-describe("pinEvent module & useMenuPinState hook", () => {
-    beforeEach(() => {
-        localStorage.clear()
-        document.documentElement.style.removeProperty("--aiquants-menu-pinned-width")
-    })
-
-    afterEach(() => {
-        vi.restoreAllMocks()
-    })
-
-    it("getInitialPinState reads document style or localStorage safely", () => {
-        expect(getInitialPinState(240)).toEqual({ pinned: false, width: 0 })
-
-        localStorage.setItem("aiquants-menu-pinned", "true")
-        expect(getInitialPinState(240)).toEqual({ pinned: true, width: 240 })
-
-        document.documentElement.style.setProperty("--aiquants-menu-pinned-width", "280px")
-        expect(getInitialPinState(240)).toEqual({ pinned: true, width: 280 })
-    })
-
-    it("subscribeMenuPinChange fires immediately when immediate: true", () => {
-        localStorage.setItem("aiquants-menu-pinned", "true")
-        const listener = vi.fn()
-
-        const unsubscribe = subscribeMenuPinChange(listener, { immediate: true })
-        expect(listener).toHaveBeenCalledWith({ pinned: true, width: 240 })
-
-        dispatchMenuPinChange(false, 0)
-        expect(listener).toHaveBeenCalledWith({ pinned: false, width: 0 })
-
-        unsubscribe()
-    })
-
-    it("useMenuPinState hook syncs state correctly and avoids hydration mismatch", () => {
-        localStorage.setItem("aiquants-menu-pinned", "true")
-        const { result } = renderHook(() => useMenuPinState({ defaultPinnedWidth: 240 }))
-
-        expect(result.current).toEqual({ pinned: true, width: 240 })
-
-        act(() => {
-            dispatchMenuPinChange(false, 0)
-        })
-
-        expect(result.current).toEqual({ pinned: false, width: 0 })
-    })
-
-    it("MenuBar triggers onPinChange on toggle and dispatches CustomEvent", () => {
-        const onPinChange = vi.fn()
-        const eventListener = vi.fn()
-        const unsubscribe = subscribeMenuPinChange(eventListener, { immediate: false })
-
-        const { unmount } = render(<MenuBar menuList={[]} onClickSignout={() => {}} theme="light" toggleTheme={() => {}} isPinned={true} pinnedWidth={240} onPinChange={onPinChange} />)
-
-        expect(eventListener).toHaveBeenCalledWith({ pinned: true, width: 240 })
-        expect(document.documentElement.style.getPropertyValue("--aiquants-menu-pinned-width")).toBe("240px")
-
-        unmount()
-        expect(document.documentElement.style.getPropertyValue("--aiquants-menu-pinned-width")).toBe("0px")
-
-        unsubscribe()
-    })
-})

package/src/components/SessionInfo.tsx

@@ -1,95 +0,0 @@
-import ExternalLink from "lucide-react/dist/esm/icons/external-link.js"
-import User from "lucide-react/dist/esm/icons/user.js"
-import type { UserProfile } from "../types/user"
-
-const DEFAULT_USER_ICON =
-    "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2NiZDVlMSI+PHBhdGggZD0iTTEyIDEyYzIuMjEgMCA0LTEuNzkgNC00cy0xLjc5LTQtNC00LTQgMS43OS00IDQgMS43OSA0IDQgNHptMCAyYy0yLjY3IDAtOCAxLjM0LTggNHYyaDE2di0yYzAtMi42Ni01LjMzLTQtOC00eiIvPjwvc3ZnPg=="
-
-/**
- * Link component props interface.
- * リンクコンポーネントのプロパティ。
- */
-export interface LinkProps {
-    /** Link destination URL */
-    to: string
-    /** CSS class name */
-    className?: string
-    /** Link content */
-    children: React.ReactNode
-}
-
-/**
- * Generic Link component that can be replaced with router-specific implementation.
- * ルーター固有の実装で置き換え可能な汎用リンクコンポーネント。
- */
-export const DefaultLink = ({ to, className, children }: LinkProps): React.JSX.Element => (
-    <a href={to} className={className}>
-        {children}
-    </a>
-)
-
-/**
- * SessionInfo component props interface.
- * ユーザーセッション情報を表示するコンポーネントのプロパティ。
- */
-export interface SessionInfoProps {
-    /** User profile information from Google OAuth */
-    user: UserProfile | null
-    /** Custom Link component (optional, defaults to DefaultLink) */
-    LinkComponent?: React.ComponentType<LinkProps>
-}
-
-/**
- * SessionInfo component for displaying user session information.
- * Displays user profile photo, navigation links, and user name when authenticated.
- *
- * ユーザーセッション情報を表示するコンポーネント。
- * 認証時にプロフィール写真、ナビゲーションリンク、ユーザー名を表示する。
- */
-export const SessionInfo = (props: SessionInfoProps): React.JSX.Element => {
-    const { user, LinkComponent = DefaultLink } = props
-
-    return (
-        <div className="w-full">
-            {user ? (
-                <div className="aiquants-session-card group relative flex flex-col gap-2 rounded-xl border border-white/20 bg-white/10 p-2.5 shadow-sm backdrop-blur-md transition-all duration-200 hover:border-white/30 hover:bg-white/15 dark:border-slate-700/60 dark:bg-slate-800/60 dark:hover:border-slate-600/80 dark:hover:bg-slate-800/90">
-                    {/* アバター & ユーザー名 */}
-                    <div className="flex min-w-0 items-center gap-2.5">
-                        <div className="relative shrink-0">
-                            <div className="h-8 w-8 overflow-hidden rounded-full border border-white/40 shadow-xs dark:border-slate-500">
-                                <img className="h-full w-full rounded-full object-cover" src={user.photo || DEFAULT_USER_ICON} alt={user.displayName || "user profile"} />
-                            </div>
-                            <span className="absolute -right-0.5 -bottom-0.5 h-2.5 w-2.5 rounded-full border-2 border-slate-900 bg-emerald-400" title="Online" />
-                        </div>
-                        <div className="min-w-0 flex-1 leading-tight">
-                            <div className="truncate font-semibold text-white text-xs tracking-tight dark:text-slate-100" title={user.displayName}>
-                                {user.displayName}
-                            </div>
-                            <div className="mt-0.5 font-medium text-[10px] text-white/75 tracking-tight dark:text-slate-400">Google Account</div>
-                        </div>
-                    </div>
-
-                    {/* アクションボタン */}
-                    <div className="grid grid-cols-2 gap-1.5 border-white/15 border-t pt-1.5 dark:border-slate-700/50">
-                        <LinkComponent
-                            className="flex items-center justify-center gap-1 rounded-md border border-white/15 bg-white/10 px-2 py-1 font-medium text-[11px] text-white transition-all duration-150 hover:bg-white/25 active:scale-95 dark:border-slate-600/50 dark:bg-slate-700/50 dark:text-slate-200 dark:hover:bg-slate-600/80"
-                            to="/">
-                            <User size={11} className="shrink-0 opacity-80" />
-                            <span className="truncate">プロフィール</span>
-                        </LinkComponent>
-                        <LinkComponent
-                            className="flex items-center justify-center gap-1 rounded-md border border-white/15 bg-white/10 px-2 py-1 font-medium text-[11px] text-white transition-all duration-150 hover:bg-white/25 active:scale-95 dark:border-slate-600/50 dark:bg-slate-700/50 dark:text-slate-200 dark:hover:bg-slate-600/80"
-                            to="https://myaccount.google.com/">
-                            <ExternalLink size={11} className="shrink-0 opacity-80" />
-                            <span className="truncate">Google</span>
-                        </LinkComponent>
-                    </div>
-                </div>
-            ) : (
-                <div className="aiquants-session-card flex items-center justify-between rounded-xl border border-white/20 bg-white/10 p-2.5 shadow-xs dark:border-slate-700/60 dark:bg-slate-800/60">
-                    <span className="font-medium text-white/90 text-xs dark:text-slate-200">ログインしてください</span>
-                </div>
-            )}
-        </div>
-    )
-}

package/src/contents/MenuContent.tsx

@@ -1,79 +0,0 @@
-/**
- * @module MenuContent
- * @description This module provides the content for the menu bar.
- * @description このモジュールは、メニューバーのコンテンツを提供します。
- */
-
-import LogOut from "lucide-react/dist/esm/icons/log-out.js"
-import Pin from "lucide-react/dist/esm/icons/pin.js"
-import PinOff from "lucide-react/dist/esm/icons/pin-off.js"
-import type { Theme } from "../types"
-import { type IMenu, MenuList, type MenuNavigationPayload } from "./MenuList"
-
-/**
- * @interface IMenuContentProps
- * @description Props for the MenuContent component.
- * @description MenuContent コンポーネントの Props。
- */
-interface IMenuContentProps {
-    menuList: IMenu[]
-    menuHeader?: React.ReactNode
-    open: boolean
-    onMenuSelected(payload: MenuNavigationPayload): void
-    onClickSignout(): void
-    theme: Theme
-    toggleTheme: () => void
-    isPinned: boolean
-    onTogglePin(): void
-    pinnedSubmenuIds: number[]
-    onToggleSubmenuPin(id: number): void
-}
-
-/**
- * Renders the content of the menu bar.
- * メニューバーのコンテンツを描画します。
- * @param {IMenuContentProps} props - The properties for the MenuContent component.
- * @returns {React.JSX.Element} The rendered menu content.
- */
-export const MenuContent = (props: IMenuContentProps): React.JSX.Element => {
-    const { menuList, menuHeader, open, onMenuSelected, onClickSignout, theme, toggleTheme, isPinned, onTogglePin, pinnedSubmenuIds, onToggleSubmenuPin } = props
-
-    return (
-        <div className={`aiquants-menu-content fixed top-0 right-0 z-2147483642 flex min-h-dvh w-[240px] select-none flex-col transition-transform duration-500 ${open ? "aiquants-menu-translate-x-0" : "aiquants-menu-translate-x-250"}`}>
-            <div className="flex shrink-0 flex-col justify-center border-white/15 border-b px-2.5 py-2 dark:border-slate-700/60">{menuHeader}</div>
-            <div className="flex grow flex-col overflow-y-auto">
-                <MenuList menuList={menuList} onMenuSelected={onMenuSelected} pinnedSubmenuIds={pinnedSubmenuIds} onToggleSubmenuPin={onToggleSubmenuPin} />
-            </div>
-            <div className="border-white/15 border-t px-2.5 py-1.5 dark:border-slate-700/60">
-                <div className="flex items-center justify-between gap-1.5">
-                    <button
-                        type="button"
-                        onClick={onTogglePin}
-                        data-aqmb-pin-button
-                        className={`flex h-7 items-center justify-center rounded-md px-2 text-[11px] text-white shadow-2xs transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/60 ${isPinned ? "bg-amber-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-amber-500" : "border border-white/20 bg-white/10 hover:bg-white/20 dark:border-slate-600/60 dark:bg-slate-700/60 dark:hover:bg-slate-600"}`}
-                        title={isPinned ? "ピン留め解除" : "ピン留め"}
-                        aria-label={isPinned ? "ピン留め解除" : "ピン留め"}>
-                        {isPinned ? <Pin size={12} /> : <PinOff size={12} />}
-                    </button>
-                    <button
-                        type="button"
-                        onClick={toggleTheme}
-                        data-aqmb-theme-button
-                        className="group relative flex h-7 items-center justify-center rounded-md border border-white/20 bg-white/10 px-2 text-[11px] text-white shadow-2xs backdrop-blur-xs transition-all duration-200 hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 dark:border-slate-600/60 dark:bg-slate-700/60 dark:hover:bg-slate-600"
-                        title={theme === "dark" ? "ライトモードに切り替え" : "ダークモードに切り替え"}
-                        aria-label={theme === "dark" ? "ライトモードに切り替え" : "ダークモードに切り替え"}>
-                        <span className="text-xs transition-transform duration-200 group-hover:scale-110">{theme === "dark" ? "🌞" : "🌙"}</span>
-                    </button>
-                    <button
-                        type="button"
-                        data-aqmb-signout-button
-                        className="aiquants-signout-button flex h-7 flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md bg-red-500/90 px-2.5 font-medium text-[11px] text-white shadow-2xs transition-colors duration-200 hover:bg-red-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-300/60 dark:bg-red-600/90 dark:hover:bg-red-500"
-                        onClick={onClickSignout}>
-                        <LogOut size={11} className="shrink-0" />
-                        <span>サインアウト</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    )
-}