@aiquants/menu-bar 1.16.1 → 1.17.1

package/src/MenuBar.tsx

@@ -0,0 +1,202 @@
+/**
+ * @module MenuBar
+ * @description This module provides the main menu bar component.
+ * @description このモジュールは、メインメニューバーコンポーネントを提供します。
+ */
+import { useCallback, useEffect, useLayoutEffect, 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 type { Theme } from "./types"
+
+/**
+ * @interface IMenuBarProps
+ * @description Props for the MenuBar component.
+ * @description MenuBar コンポーネントの Props。
+ * @property {IMenu[]} menuList - The list of menu items. メニュー項目のリスト。
+ * @property {React.ReactNode} [menuHeader] - The header content of the menu. メニューのヘッダーコンテンツ。
+ * @property {() => void} onClickSignout - Function to handle sign out. サインアウトを処理する関数。
+ * @property {boolean} [isMenuhide] - Whether to hide the menu. メニューを非表示にするかどうか。
+ * @property {Theme} theme - The current theme.
+ * @property {() => void} toggleTheme - Function to toggle the theme.
+ * @property {(payload: MenuNavigationPayload) => void} [onMenuNavigate] - Function to receive menu navigation events. メニュー遷移イベントを受け取る関数。
+ * @property {boolean | "auto"} [closeOnEscape] - Controls whether the Escape key closes the menu.
+ *   - "auto" (default): closes when NOT pinned, stays open when pinned. ピン留めなしでは閉じ、ピン留め中は閉じない。
+ *   - true: always closes on Escape (resets pin if pinned). 常に閉じる。
+ *   - false: never closes on Escape. 常に閉じない。
+ */
+interface IMenuBarProps {
+    menuList: IMenu[]
+    menuHeader?: React.ReactNode
+    onClickSignout(): void
+    isMenuhide?: boolean
+    theme: Theme
+    toggleTheme: () => void
+    onMenuNavigate?(payload: MenuNavigationPayload): void
+    onPinChange?(pinned: boolean): void
+    pinnedSubmenuIds?: number[]
+    initialPinnedSubmenuIds?: number[]
+    onSubmenuPinChange?(pinnedIds: number[]): void
+    closeOnEscape?: boolean | "auto"
+}
+
+/**
+ * @function MenuBar
+ * @description A component that renders the main menu bar.
+ * @description メインメニューバーを描画するコンポーネント。
+ * @param {IMenuBarProps} props - The props for the component.
+ * @returns {React.JSX.Element | null} The rendered menu bar.
+ */
+export const MenuBar = (props: IMenuBarProps): React.JSX.Element | null => {
+    const { menuList, menuHeader, onClickSignout, isMenuhide, theme, toggleTheme, onMenuNavigate, onPinChange, pinnedSubmenuIds: propPinnedSubmenuIds, initialPinnedSubmenuIds, onSubmenuPinChange, closeOnEscape = "auto" } = props
+    const [isPinned, setIsPinned] = useState(() => {
+        try {
+            return localStorage.getItem("aiquants-menu-pinned") === "true"
+        } catch {
+            return false
+        }
+    })
+    const [isMenuOpen, setIsMenuOpen] = useState(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],
+    )
+
+    // ピン状態変化時に CSS 変数をセットしコールバックで通知
+    useSafeLayoutEffect(() => {
+        const width = isPinned ? "250px" : "0px"
+        document.documentElement.style.setProperty("--aiquants-menu-pinned-width", width)
+        onPinChange?.(isPinned)
+    }, [isPinned, onPinChange])
+
+    // アンマウント時に CSS 変数をリセット
+    useSafeLayoutEffect(() => {
+        return () => {
+            document.documentElement.style.setProperty("--aiquants-menu-pinned-width", "0px")
+        }
+    }, [])
+
+    const handleMenuOpen = useCallback(() => {
+        setIsMenuOpen(true)
+    }, [])
+
+    const handleMenuClose = useCallback(() => {
+        setIsMenuOpen(false)
+        setIsPinned(false)
+        try {
+            localStorage.removeItem("aiquants-menu-pinned")
+        } catch {}
+    }, [])
+
+    const handleTogglePin = useCallback(() => {
+        setIsPinned((prev) => {
+            const next = !prev
+            if (next) {
+                try {
+                    localStorage.setItem("aiquants-menu-pinned", "true")
+                } catch {}
+            } else {
+                try {
+                    localStorage.removeItem("aiquants-menu-pinned")
+                } catch {}
+            }
+            return next
+        })
+    }, [])
+
+    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],
+    )
+
+    // Esc キーで閉じるかの実効値。
+    // "auto" (デフォルト): ピン留めなしでは閉じ、ピン留め中は閉じない。true/false で強制。
+    // 想定外の値が渡された場合は安全側 (閉じない) に倒す。
+    const escapeCloses = closeOnEscape === true || (closeOnEscape === "auto" && !isPinned)
+
+    // Escキーでメニューを閉じる処理 (escapeCloses が true のときのみリスナーを登録)
+    useEffect(() => {
+        if (isMenuOpen && escapeCloses) {
+            window.addEventListener("keydown", handleEscKey, { passive: true })
+        } else {
+            window.removeEventListener("keydown", handleEscKey)
+        }
+
+        return () => {
+            window.removeEventListener("keydown", handleEscKey)
+        }
+    }, [isMenuOpen, escapeCloses, handleEscKey])
+
+    return isMenuhide ? 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/components/SessionInfo.tsx

@@ -0,0 +1,79 @@
+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="max-h-20 max-w-52">
+            <div className="flex grow flex-col">
+                {user ? (
+                    <>
+                        <div className="flex flex-row">
+                            <div className="aiquants-session-photo m-1 h-14 w-14 p-0.5">
+                                <img className="object-contain" src={user.photo || DEFAULT_USER_ICON} aria-label="profile photo" />
+                            </div>
+                            <div className="mx-1 flex flex-col">
+                                <LinkComponent className="aiquants-session-link my-1 rounded-lg px-2 text-center text-xs" to="/">
+                                    プロフィールを編集
+                                </LinkComponent>
+                                <LinkComponent className="aiquants-session-link rounded-lg px-2 text-center text-xs" to="/">
+                                    プロフィール
+                                </LinkComponent>
+                                <LinkComponent className="aiquants-session-link my-1 rounded-lg px-2 text-center text-xs" to="https://myaccount.google.com/">
+                                    Google Account
+                                </LinkComponent>
+                            </div>
+                        </div>
+                        <div className="aiquants-session-info mb-1 min-h-[1em] w-full rounded-r-lg px-2 py-0.5 text-xs">{user.displayName}</div>
+                    </>
+                ) : (
+                    <div className="aiquants-session-info mb-1 min-h-[1em] w-9/12 rounded-r-lg py-0.5 pl-1 text-xs">ログインはこちら</div>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/contents/MenuContent.tsx

@@ -0,0 +1,83 @@
+/**
+ * @module MenuContent
+ * @description This module provides the content for the menu bar.
+ * @description このモジュールは、メニューバーのコンテンツを提供します。
+ */
+
+import { Pin, PinOff } from "lucide-react"
+import type { Theme } from "../types"
+import { type IMenu, MenuList, type MenuNavigationPayload } from "./MenuList"
+
+/**
+ * @interface IMenuContentProps
+ * @description Props for the MenuContent component.
+ * @description MenuContent コンポーネントの Props。
+ * @property {IMenu[]} menuList - The list of menu items. メニュー項目のリスト。
+ * @property {React.ReactNode} [menuHeader] - The header content of the menu. メニューのヘッダーコンテンツ。
+ * @property {boolean} open - Whether the menu is open. メニューが開いているかどうか。
+ * @property {(payload: MenuNavigationPayload) => void} onMenuSelected - Function to handle menu item selection. メニュー項目選択を処理する関数。
+ * @property {() => void} onClickSignout - Function to handle sign out. サインアウトを処理する関数。
+ * @property {Theme} theme - The current theme.
+ * @property {() => void} toggleTheme - Function to toggle the theme.
+ * @property {boolean} isPinned - Whether the menu is pinned open. メニューがピン留めされているかどうか。
+ * @property {() => void} onTogglePin - Function to toggle pin state. ピン留め状態をトグルする関数。
+ */
+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-[250px] select-none flex-col transition-transform duration-500 ${open ? "aiquants-menu-translate-x-0" : "aiquants-menu-translate-x-250"}`}>
+            <div className="flex h-[100px] flex-col">{menuHeader}</div>
+            <div className="flex grow flex-col">
+                <MenuList menuList={menuList} onMenuSelected={onMenuSelected} pinnedSubmenuIds={pinnedSubmenuIds} onToggleSubmenuPin={onToggleSubmenuPin} />
+            </div>
+            <div className="px-4 pt-2 pb-4">
+                <div className="flex items-center justify-between gap-2">
+                    <button
+                        type="button"
+                        onClick={onTogglePin}
+                        className={`flex items-center justify-center rounded-md px-3 py-2 text-white text-xs shadow-sm transition-colors duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/60 ${isPinned ? "bg-amber-500/90 hover:bg-amber-600" : "border border-white/15 bg-white/10 hover:bg-white/20"}`}
+                        title={isPinned ? "ピン留め解除" : "ピン留め"}>
+                        {isPinned ? <Pin size={14} /> : <PinOff size={14} />}
+                    </button>
+                    <button
+                        type="button"
+                        onClick={toggleTheme}
+                        className="group relative flex min-w-0 flex-1 items-center gap-2 rounded-lg border border-white/15 bg-white/10 px-3 py-2 font-medium text-white text-xs shadow-sm backdrop-blur-sm transition-all duration-300 hover:border-white/25 hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-0 dark:border-gray-600/40 dark:bg-gray-800/80 dark:hover:border-gray-500/60 dark:hover:bg-gray-700">
+                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm transition-all duration-300 group-hover:scale-110 group-hover:bg-white/30 dark:bg-gray-600/60 dark:group-hover:bg-gray-500/70">
+                            <span className="text-sm transition-transform duration-300 group-hover:scale-110">{theme === "dark" ? "🌞" : "🌙"}</span>
+                        </div>
+                        <span className="truncate text-white transition-colors duration-300 group-hover:text-white/90 dark:text-gray-200 dark:group-hover:text-white">{theme === "dark" ? "Light" : "Dark"}</span>
+                        <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-transparent via-white/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:via-gray-400/10" />
+                    </button>
+                    <button
+                        type="button"
+                        className="aiquants-signout-button flex min-w-0 items-center justify-center whitespace-nowrap rounded-md bg-red-500/90 px-3 py-2 font-medium text-white text-xs shadow-sm transition-colors duration-300 hover:bg-red-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-300/60"
+                        onClick={onClickSignout}>
+                        <span className="truncate">サインアウト</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}