@kids-reporter/routing-ui 0.1.0-alpha.5 → 0.1.0-alpha.7

package/src/header/index.tsx

@@ -1,104 +0,0 @@
-'use client'
-import {
-  ADDITIONAL_MENU_ITEMS,
-  DONATE_URL,
-  MENU_ITEMS,
-  SEARCH_PLACEHOLDER,
-  SOCIAL_MEDIA_ITEMS,
-  SUBSCRIBE_URL,
-} from '../constants/default-values'
-import {
-  ScrollLevel,
-  useIsAtTop,
-  useMediaQuery,
-  useScrollLevel,
-} from '../hooks'
-import type { MenuItem, SocialMediaHrefs } from '../types'
-import { DesktopHeader } from './desktop-header'
-import { useHeaderContext } from './header-context'
-import Menu from './menu'
-import { MobileHeader } from './mobile-header'
-
-type HeaderProps = {
-  menuItems?: MenuItem[]
-  additionalMenuItems?: MenuItem[]
-  socialMediaHrefs?: SocialMediaHrefs
-  searchPlaceholder?: string
-  subscribeUrl?: string
-  donateUrl?: string
-}
-
-function Header({
-  menuItems = MENU_ITEMS,
-  additionalMenuItems = ADDITIONAL_MENU_ITEMS,
-  socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),
-  searchPlaceholder = SEARCH_PLACEHOLDER,
-  subscribeUrl = SUBSCRIBE_URL,
-  donateUrl = DONATE_URL,
-}: HeaderProps) {
-  const context = useHeaderContext()
-  const postTitle = context?.postTitle
-  const isLoggedIn = context?.isLoggedIn || false
-  const loginUrl = context?.loginUrl || '/login'
-  const isMenuOpen = context?.isMenuOpen || false
-  const openMenu = context?.openMenu
-  const closeMenu = context?.closeMenu
-  const keywords = context?.keywords || []
-  const onHamburgerOverlayOpen = () => {
-    openMenu?.()
-  }
-  const mobileBackButtonHref = context?.mobileBackButtonHref
-
-  const onCloseMenu = () => {
-    closeMenu?.()
-  }
-
-  const isMobile = useMediaQuery('(max-width: 768px)')
-
-  const isAtTop = useIsAtTop()
-  const scrollingLevel = useScrollLevel({
-    scrollDownDistance: 150,
-    throttleThreshold: 50,
-  })
-
-  const isScrollingDown = scrollingLevel === ScrollLevel.DOWN_HIDDEN
-
-  return (
-    <>
-      <DesktopHeader
-        onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-        keywords={keywords}
-        hide={isScrollingDown}
-        compactMode={!isAtTop}
-        postTitle={isAtTop ? undefined : postTitle}
-        searchPlaceholder={searchPlaceholder}
-        subscribeUrl={subscribeUrl}
-        menuItems={menuItems}
-        isLoggedIn={isLoggedIn}
-        loginUrl={loginUrl}
-      />
-      <MobileHeader
-        onCloseMenu={onCloseMenu}
-        showCloseButtonWhenMenuOpen={isMobile}
-        onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-        isMenuOpen={isMenuOpen}
-        isLoggedIn={isLoggedIn}
-        loginUrl={loginUrl}
-        mobileBackButtonHref={mobileBackButtonHref}
-      />
-      <Menu
-        isOpen={isMenuOpen}
-        onClose={closeMenu || (() => undefined)}
-        keywords={keywords}
-        menuItems={menuItems}
-        additionalMenuItems={additionalMenuItems}
-        socialMediaHrefs={socialMediaHrefs}
-        donateUrl={donateUrl}
-        subscribeUrl={subscribeUrl}
-        searchPlaceholder={searchPlaceholder}
-      />
-    </>
-  )
-}
-
-export default Header

package/src/header/is-logged-in-setter.tsx

@@ -1,27 +0,0 @@
-import { useEffect } from 'react'
-
-import { useHeaderContext } from './header-context'
-
-type IsLoggedInSetterProps = {
-  isLoggedIn: boolean
-  loginUrl: string
-}
-
-function IsLoggedInSetter({ isLoggedIn, loginUrl }: IsLoggedInSetterProps) {
-  const context = useHeaderContext()
-  const setIsLoggedIn = context?.setIsLoggedIn
-  const setLoginUrl = context?.setLoginUrl
-
-  useEffect(() => {
-    setIsLoggedIn?.(isLoggedIn)
-    setLoginUrl?.(loginUrl)
-    return () => {
-      setIsLoggedIn?.(false)
-      setLoginUrl?.(undefined)
-    }
-  }, [isLoggedIn, setIsLoggedIn, loginUrl, setLoginUrl])
-
-  return null
-}
-
-export default IsLoggedInSetter

package/src/header/menu/header-menu-item-group.tsx

@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { MenuItem } from '../../types'
-import HeaderMenuItem from './header-menu-item'
-
-function MenuItemGroup({
-  isMenuOpen,
-  menuItems,
-}: {
-  isMenuOpen: boolean
-  menuItems: MenuItem[]
-}) {
-  const [currentExpandedItem, setCurrentExpandedItem] = useState<string | null>(
-    null
-  )
-
-  const handleClick = (label: string | null) => {
-    setCurrentExpandedItem(label)
-  }
-
-  useEffect(() => {
-    if (!isMenuOpen) {
-      setCurrentExpandedItem(null)
-    }
-  }, [isMenuOpen])
-
-  return menuItems.map((item) => (
-    <HeaderMenuItem
-      key={item.label}
-      {...item}
-      isExpanded={currentExpandedItem === item.label}
-      onExpand={handleClick}
-    />
-  ))
-}
-
-export default MenuItemGroup

package/src/header/menu/header-menu-item.tsx

@@ -1,132 +0,0 @@
-import { MenuItem } from '../../types'
-import { cn } from '../../utils/cn'
-import { useHeaderContext } from '../header-context'
-
-type HeaderMenuItemProps = {
-  contentClassName?: string
-  isExpanded?: boolean
-  onExpand?: (label: string | null) => void
-} & MenuItem
-
-function HeaderMenuItem({
-  label,
-  href,
-  subItems,
-  external,
-  showIcon,
-  icon,
-  isExpanded,
-  contentClassName,
-  onExpand,
-}: HeaderMenuItemProps) {
-  const hasSubItems = subItems && subItems.length > 0
-  const context = useHeaderContext()
-  const closeMenu = context?.closeMenu
-
-  const handleExpand = () => {
-    if (hasSubItems) {
-      onExpand?.(isExpanded ? null : label)
-    }
-  }
-
-  const content = (
-    <div
-      className={cn(
-        'group flex w-full items-center justify-between text-neutral-900 transition-colors duration-100 group-hover:text-neutral-900',
-        contentClassName
-      )}
-    >
-      <div className="gap-2 flex items-center">
-        {showIcon && icon && (
-          <div className="w-4 h-4 flex items-center justify-center">{icon}</div>
-        )}
-        <span
-          className={cn(
-            'prose-p1-bold',
-            isExpanded && 'text-red-400 group-hover:text-red-400'
-          )}
-        >
-          {label}
-        </span>
-      </div>
-
-      {hasSubItems && (
-        <div
-          className={cn(
-            'w-6 h-6 flex items-center justify-center transition-transform',
-            isExpanded && 'rotate-180 text-red-400 group-hover:text-red-400'
-          )}
-        >
-          <svg width="14" height="7" viewBox="0 0 14 7" fill="none">
-            <path
-              d="M1 1L7 6L13 1"
-              stroke="currentColor"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </div>
-      )}
-    </div>
-  )
-
-  if (hasSubItems) {
-    return (
-      <div className="w-full">
-        <button
-          onClick={handleExpand}
-          className="px-6 tablet:px-8 py-2 flex w-full cursor-pointer items-center justify-between transition-colors duration-200 hover:bg-neutral-black/5 active:bg-neutral-black/10"
-        >
-          {content}
-        </button>
-        <div
-          className={cn(
-            'ease-in-out overflow-hidden transition-all duration-300',
-            isExpanded ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
-          )}
-        >
-          {subItems.map((subItem, index) => (
-            <a
-              key={index}
-              href={subItem.href}
-              className="px-6 tablet:px-12 py-2 pl-12 font-medium block prose-p2 transition-colors duration-200 hover:bg-neutral-black/5 hover:text-neutral-900 active:bg-neutral-black/10"
-              onClick={closeMenu}
-            >
-              {subItem.label}
-            </a>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  if (external) {
-    return (
-      <a
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={
-          'px-6 tablet:px-8 py-2 block transition-colors duration-200 hover:bg-neutral-black/5 active:bg-neutral-black/10'
-        }
-      >
-        {content}
-      </a>
-    )
-  }
-
-  return (
-    <a
-      href={href}
-      className={
-        'px-6 tablet:px-8 py-2 block transition-colors duration-200 hover:bg-neutral-black/5 active:bg-neutral-black/10'
-      }
-      onClick={closeMenu}
-    >
-      {content}
-    </a>
-  )
-}
-
-export default HeaderMenuItem

package/src/header/menu/index.tsx

@@ -1,205 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-
-import Button from '../../components/button'
-import { ClearIcon } from '../../icons'
-import type { MenuItem, SocialMediaHrefs } from '../../types'
-import { cn } from '../../utils/cn'
-import { generateSocialMediaConfig } from '../../utils/generate-social-media-config'
-import { SearchInputSection } from '../shared-components'
-import HeaderMenuItem from './header-menu-item'
-import HeaderMenuItemGroup from './header-menu-item-group'
-
-type MenuProps = {
-  isOpen: boolean
-  onClose: () => void
-  keywords: string[]
-  menuItems: MenuItem[]
-  additionalMenuItems: MenuItem[]
-  socialMediaHrefs: SocialMediaHrefs
-  donateUrl: string
-  subscribeUrl: string
-  searchPlaceholder: string
-}
-
-function Divider() {
-  return (
-    <div className="px-6 tablet:px-8 py-4 w-full">
-      <div className="h-px w-full bg-neutral-300"></div>
-    </div>
-  )
-}
-
-function Menu({
-  isOpen,
-  onClose,
-  keywords,
-  menuItems,
-  additionalMenuItems,
-  socialMediaHrefs,
-  donateUrl,
-  subscribeUrl,
-  searchPlaceholder,
-}: MenuProps) {
-  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)
-
-  useEffect(() => {
-    if (isOpen) {
-      document.body.classList.add('no-scroll')
-    } else {
-      document.body.classList.remove('no-scroll')
-    }
-
-    return () => {
-      document.body.classList.remove('no-scroll')
-    }
-  }, [isOpen])
-
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose()
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape)
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape)
-    }
-  }, [isOpen, onClose])
-
-  return (
-    <>
-      {/* Overlay */}
-      <div
-        className={cn(
-          'inset-0 fixed z-1001 bg-neutral-500/50 transition-opacity duration-300',
-          isOpen ? 'opacity-100' : 'pointer-events-none opacity-0'
-        )}
-        onClick={onClose}
-      />
-
-      {/* Menu */}
-      <div
-        className={cn(
-          'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out tablet:pt-0 fixed z-1001 h-full scrollbar-thin w-full transform pt-(--mobile-header-height) transition-transform duration-300',
-          isOpen ? 'translate-x-0' : '-translate-x-full'
-        )}
-      >
-        <div className="flex h-full flex-col overflow-y-auto">
-          <div className="px-6 tablet:px-8 py-4 mt-4 hidden items-center justify-between tablet:flex">
-            <div className="flex items-center">
-              <a href="/">
-                <img
-                  src="/assets/images/brand-icon.svg"
-                  alt="少年報導者 The Reporter for Kids"
-                  className="h-5"
-                  height={20}
-                  width={183}
-                  loading="eager"
-                />
-              </a>
-            </div>
-            <button
-              onClick={onClose}
-              className="w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800"
-              aria-label="關閉選單"
-            >
-              <ClearIcon />
-            </button>
-          </div>
-
-          <div className="px-6 tablet:px-8 pt-4 desktop:hidden">
-            <SearchInputSection
-              mode="inline"
-              tags={keywords}
-              searchPlaceholder={searchPlaceholder}
-            />
-          </div>
-
-          <div className="py-4 flex-1">
-            <HeaderMenuItem {...menuItems?.[0]} />
-
-            <Divider />
-
-            {/* Categories */}
-            <div className="py-2">
-              <HeaderMenuItemGroup isMenuOpen={isOpen} menuItems={menuItems} />
-            </div>
-
-            <Divider />
-
-            {/* Reading Settings */}
-            <HeaderMenuItem
-              {...additionalMenuItems?.[0]}
-              contentClassName="text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900"
-            />
-
-            <Divider />
-
-            {/* About Us Section */}
-            <div className="py-2">
-              {additionalMenuItems.slice(1).map((item, index) => (
-                <HeaderMenuItem
-                  key={index}
-                  label={item.label}
-                  href={item.href}
-                  external={item.external}
-                  contentClassName="text-neutral-600 [&_span]:[font-family:var(--font-family-noto)] [&_span]:[font-size:var(--font-size-p2)] [&_span]:[font-weight:500] [&_span]:[line-height:var(--line-height-normal)] [&_span]:[letter-spacing:var(--letter-spacing-wide)] hover:text-neutral-900"
-                />
-              ))}
-            </div>
-
-            <Divider />
-
-            {/* Social Media */}
-            <div className="px-6 tablet:px-8">
-              <div className="gap-4 tablet:gap-0 px-4 flex items-center justify-center tablet:justify-between">
-                {socialMediaConfig.map((item) => (
-                  <a
-                    key={item.label}
-                    href={item.href}
-                    className="text-neutral-900 transition-colors duration-200 hover:text-red-500"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={item.label}
-                  >
-                    <div className="w-6 h-6 flex items-center justify-center">
-                      {item.icon && <item.icon />}
-                    </div>
-                  </a>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          {/* Action Buttons */}
-          <div className="px-6 tablet:px-8 py-6 tablet:pt-6 tablet:pb-8">
-            <div className="gap-4 flex flex-col">
-              <Button variant="secondary" size={44} asChild className="w-full">
-                <a
-                  href={subscribeUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  訂閱電子報
-                </a>
-              </Button>
-              <Button variant="primary" size={44} asChild className="w-full">
-                <a href={donateUrl} target="_blank" rel="noopener noreferrer">
-                  贊助我們
-                </a>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default Menu

package/src/header/mobile-back-button-href-setter.tsx

@@ -1,22 +0,0 @@
-import { useEffect } from 'react'
-
-import { useHeaderContext } from './header-context'
-
-type MobileBackButtonHrefSetterProps = {
-  href?: string
-}
-
-function MobileBackButtonHrefSetter({ href }: MobileBackButtonHrefSetterProps) {
-  const context = useHeaderContext()
-  const setMobileBackButtonHref = context?.setMobileBackButtonHref
-
-  useEffect(() => {
-    setMobileBackButtonHref?.(href)
-
-    return () => setMobileBackButtonHref?.(undefined)
-  }, [href, setMobileBackButtonHref])
-
-  return null
-}
-
-export default MobileBackButtonHrefSetter

package/src/header/mobile-header.tsx

@@ -1,77 +0,0 @@
-'use client'
-
-import { ArrowIcon, ClearIcon, LoginIcon } from '../icons'
-import { cn } from '../utils/cn'
-import { HamburgerButton, LogoLink } from './shared-components'
-
-type MobileHeaderProps = {
-  onHamburgerOverlayOpen: () => void
-  onCloseMenu: () => void
-  showCloseButtonWhenMenuOpen: boolean
-  isMenuOpen: boolean
-  isLoggedIn?: boolean
-  mobileBackButtonHref?: string
-  loginUrl?: string
-}
-
-export function MobileHeader({
-  onHamburgerOverlayOpen,
-  onCloseMenu,
-  showCloseButtonWhenMenuOpen,
-  isMenuOpen,
-  isLoggedIn,
-  loginUrl,
-  mobileBackButtonHref,
-}: MobileHeaderProps) {
-  const showCloseButton = showCloseButtonWhenMenuOpen && isMenuOpen
-
-  return (
-    <>
-      <div className="h-(--mobile-header-height) desktop:hidden"></div>
-      <div
-        className={cn(
-          'px-6 tablet:px-8 ease-in-out top-0 translate-y-0 pointer-events-auto fixed z-1002 w-full bg-neutral-white opacity-100 transition-all duration-300 tablet:z-1000 desktop:hidden'
-        )}
-      >
-        <div className="py-4 flex items-center justify-between">
-          <div className="flex items-center">
-            {mobileBackButtonHref && (
-              <a
-                href={mobileBackButtonHref}
-                className="size-8 mr-2 flex cursor-pointer items-center justify-center text-neutral-600 tablet:hidden"
-              >
-                <ArrowIcon />
-              </a>
-            )}
-            <LogoLink />
-          </div>
-
-          <div className="gap-4 flex items-center">
-            {!showCloseButton && (
-              <a
-                href={isLoggedIn ? '/member' : (loginUrl ?? '/login')}
-                className="w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500"
-                aria-label="登入"
-              >
-                <LoginIcon />
-              </a>
-            )}
-            {showCloseButton ? (
-              <button
-                onClick={onCloseMenu}
-                className="w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-colors duration-200 hover:text-neutral-800"
-                aria-label="關閉選單"
-              >
-                <ClearIcon />
-              </button>
-            ) : (
-              <HamburgerButton
-                onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

package/src/header/post-title-setter.tsx

@@ -1,22 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-
-import { useHeaderContext } from './header-context'
-
-type PostTitleSetterProps = {
-  postTitle?: string
-}
-
-function PostTitleSetter({ postTitle }: PostTitleSetterProps) {
-  const context = useHeaderContext()
-  const setPostTitle = context?.setPostTitle
-  useEffect(() => {
-    setPostTitle?.(postTitle)
-    return () => setPostTitle?.(undefined)
-  }, [postTitle, setPostTitle])
-
-  return null
-}
-
-export default PostTitleSetter