@kids-reporter/routing-ui 0.1.0-alpha.4 → 0.1.0-alpha.6

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-header.tsx

@@ -1,61 +0,0 @@
-'use client'
-
-import { 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
-}
-
-export function MobileHeader({
-  onHamburgerOverlayOpen,
-  onCloseMenu,
-  showCloseButtonWhenMenuOpen,
-  isMenuOpen,
-}: 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">
-          <LogoLink />
-
-          <div className="gap-4 flex items-center">
-            {!showCloseButton && (
-              <a
-                href="/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

package/src/header/shared-components.tsx

@@ -1,325 +0,0 @@
-'use client'
-import { cva } from 'class-variance-authority'
-import { useEffect, useRef, useState } from 'react'
-
-import { Button, Input } from '../components'
-import {
-  ClearIcon,
-  HamburgerIcon,
-  HamburgerIconSmall,
-  SearchIcon,
-  SettingsIcon,
-} from '../icons'
-import type { MenuItem } from '../types'
-import { cn } from '../utils/cn'
-
-const searchFormVariants = cva(
-  'ease-in-out h-full transition-all duration-300',
-  {
-    variants: {
-      mode: {
-        inline: 'h-11 w-full',
-        popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',
-      },
-      isSearchOpen: {
-        true: '',
-        false: '',
-      },
-    },
-    compoundVariants: [
-      {
-        mode: 'popover',
-        isSearchOpen: true,
-        class: 'w-66 pointer-events-auto opacity-100',
-      },
-      {
-        mode: 'popover',
-        isSearchOpen: false,
-        class: 'pointer-events-none',
-      },
-    ],
-  }
-)
-
-const searchDropdownVariants = cva(
-  'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',
-  {
-    variants: {
-      mode: {
-        inline: '',
-        popover: 'top-12 -right-4 shadow-custom p-4 absolute',
-      },
-      isSearchOpen: {
-        true: '',
-        false: '',
-      },
-      isFocused: {
-        true: '',
-        false: '',
-      },
-    },
-    compoundVariants: [
-      {
-        mode: 'popover',
-        isSearchOpen: true,
-        isFocused: true,
-        class: 'p-4 h-min opacity-100',
-      },
-      {
-        mode: 'popover',
-        isSearchOpen: false,
-        class: 'pointer-events-none',
-      },
-      {
-        mode: 'inline',
-        isFocused: true,
-        class:
-          'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',
-      },
-      {
-        mode: 'inline',
-        isFocused: false,
-        class: '-translate-y-3 pointer-events-none w-full',
-      },
-    ],
-  }
-)
-
-export function LogoLink({ compactMode = false }: { compactMode?: boolean }) {
-  return (
-    <a href="/" className="flex items-center" rel="home">
-      <img
-        src="/assets/images/brand-icon.svg"
-        alt="少年報導者 The Reporter for Kids"
-        loading="eager"
-        className={cn(
-          'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',
-          compactMode && 'desktop:h-[26px]'
-        )}
-        width={293}
-        height={32}
-      />
-    </a>
-  )
-}
-
-type SearchInputSectionProps =
-  | {
-      mode: 'popover'
-      isSearchOpen: boolean
-      tags: string[]
-      searchPlaceholder: string
-    }
-  | {
-      mode: 'inline'
-      tags: string[]
-      searchPlaceholder: string
-    }
-
-export function SearchInputSection(props: SearchInputSectionProps) {
-  const ref = useRef<HTMLInputElement>(null)
-  const [isFocused, setIsFocused] = useState(false)
-  const [searchValue, setSearchValue] = useState('')
-
-  const mode = props.mode
-  const isSearchOpen = mode === 'popover' && props.isSearchOpen
-  const tags = props.tags
-  const searchPlaceholder = props.searchPlaceholder
-
-  useEffect(() => {
-    if (mode === 'inline') {
-      return
-    }
-    if (isSearchOpen) {
-      ref.current?.focus()
-      setIsFocused(true)
-      document.body.classList.add('no-scroll')
-      return
-    }
-    setIsFocused(false)
-    document.body.classList.remove('no-scroll')
-  }, [mode, isSearchOpen])
-
-  return (
-    <div
-      onFocus={() => setIsFocused(true)}
-      onBlur={() => setIsFocused(false)}
-      className={mode === 'inline' ? 'relative w-full' : 'h-11'}
-    >
-      <form
-        role="search"
-        method="get"
-        action="/search"
-        className={searchFormVariants({
-          mode,
-          isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,
-        })}
-      >
-        <Input
-          placeholder={searchPlaceholder}
-          name="q"
-          title="Search for..."
-          aria-label="Search for..."
-          className="w-[99%]"
-          inputRef={ref}
-          onChange={setSearchValue}
-          value={searchValue}
-        />
-      </form>
-      <div
-        className={searchDropdownVariants({
-          mode,
-          isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,
-          isFocused,
-        })}
-      >
-        <h3 className="font-bold mb-3 prose-p3 text-neutral-700">熱門搜尋</h3>
-        <div className="gap-2.5 flex flex-wrap">
-          {tags.map((keyword) => (
-            <a
-              key={keyword}
-              className="px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white"
-              href={`/search?q=${encodeURIComponent(keyword)}`}
-            >
-              #{keyword}
-            </a>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function ActionButtons({
-  hideCtaButtons = false,
-  tags,
-  searchPlaceholder,
-  subscribeUrl,
-}: {
-  hideCtaButtons?: boolean
-  tags: string[]
-  searchPlaceholder: string
-  subscribeUrl: string
-}) {
-  const [isSearchOpen, setIsSearchOpen] = useState(false)
-
-  const containerRef = useRef<HTMLDivElement>(null)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const containerElement = containerRef.current
-      const buttonElement = buttonRef.current
-      if (!containerElement || !buttonElement) return
-      if (
-        !containerElement.contains(event.target as Node) &&
-        !buttonElement.contains(event.target as Node)
-      ) {
-        setIsSearchOpen(false)
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [])
-
-  return (
-    <div className="relative flex items-center">
-      <div className="mr-6 relative flex items-center" ref={containerRef}>
-        {/* CTA Buttons - Base layer */}
-        {!hideCtaButtons && !isSearchOpen && (
-          <div className="gap-4 flex items-center">
-            <Button variant="secondary" size={32} asChild>
-              <a href="/about#post">投稿</a>
-            </Button>
-            <Button variant="primary" size={32} asChild>
-              <a href={subscribeUrl} target="_blank" rel="noopener noreferrer">
-                訂閱
-              </a>
-            </Button>
-          </div>
-        )}
-
-        <SearchInputSection
-          isSearchOpen={isSearchOpen}
-          mode="popover"
-          tags={tags}
-          searchPlaceholder={searchPlaceholder}
-        />
-      </div>
-
-      <button
-        className="w-8 h-8 mr-4 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800"
-        aria-label="搜尋"
-        onClick={() => setIsSearchOpen(!isSearchOpen)}
-        ref={buttonRef}
-      >
-        {isSearchOpen ? <ClearIcon /> : <SearchIcon />}
-      </button>
-      <button
-        className="w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800"
-        aria-label="設定"
-      >
-        <SettingsIcon />
-      </button>
-    </div>
-  )
-}
-
-export function BottomNavigation({
-  onHamburgerOverlayOpen,
-  menuItems,
-}: {
-  onHamburgerOverlayOpen: () => void
-  menuItems: MenuItem[]
-}) {
-  return (
-    <div className="py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border">
-      <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />
-
-      {menuItems.reduce((acc, item, index) => {
-        return [
-          ...acc,
-          <div key={item.label} className="flex items-center">
-            <a
-              href={item.href}
-              className="py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400"
-            >
-              {item.label}
-            </a>
-          </div>,
-          ...(index < menuItems.length - 1
-            ? [
-                <div
-                  key={`separator-${index}`}
-                  className="h-4 mx-2 w-px bg-neutral-border"
-                />,
-              ]
-            : []),
-        ]
-      }, [] as React.ReactNode[])}
-    </div>
-  )
-}
-
-export function HamburgerButton({
-  onHamburgerOverlayOpen,
-  small = false,
-}: {
-  onHamburgerOverlayOpen: () => void
-  small?: boolean
-}) {
-  return (
-    <button
-      className={cn(
-        'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',
-        small ? 'w-6 h-6' : 'w-8 h-8'
-      )}
-      onClick={onHamburgerOverlayOpen}
-    >
-      {small ? <HamburgerIconSmall /> : <HamburgerIcon />}
-    </button>
-  )
-}

package/src/hooks/index.ts

@@ -1,3 +0,0 @@
-export { default as useIsAtTop } from './use-is-at-top'
-export { default as useMediaQuery } from './use-media-query'
-export { ScrollLevel, default as useScrollLevel } from './use-scroll-level'

package/src/hooks/use-is-at-top.ts

@@ -1,23 +0,0 @@
-'use client'
-import { useEffect, useState } from 'react'
-
-const useIsAtTop = (threshold = 35) => {
-  const [isAtTop, setIsAtTop] = useState(true)
-
-  useEffect(() => {
-    const checkIsAtTop = () => {
-      setIsAtTop(window.scrollY <= threshold)
-    }
-
-    checkIsAtTop()
-    window.addEventListener('scroll', checkIsAtTop, { passive: true })
-
-    return () => {
-      window.removeEventListener('scroll', checkIsAtTop)
-    }
-  }, [threshold])
-
-  return isAtTop
-}
-
-export default useIsAtTop

package/src/hooks/use-media-query.ts

@@ -1,57 +0,0 @@
-'use client'
-import { useEffect, useLayoutEffect, useState } from 'react'
-
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
-type UseMediaQueryOptions = {
-  defaultValue?: boolean
-  initializeWithValue?: boolean
-}
-
-const IS_SERVER = typeof window === 'undefined'
-
-function useMediaQuery(
-  query: string,
-  {
-    defaultValue = false,
-    initializeWithValue = true,
-  }: UseMediaQueryOptions = {}
-): boolean {
-  const getMatches = (query: string): boolean => {
-    if (IS_SERVER) {
-      return defaultValue
-    }
-    return window.matchMedia(query).matches
-  }
-
-  const [matches, setMatches] = useState<boolean>(() => {
-    if (initializeWithValue && !IS_SERVER) {
-      return getMatches(query)
-    }
-    return defaultValue
-  })
-
-  // Handles the change event of the media query.
-  function handleChange() {
-    setMatches(getMatches(query))
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia = window.matchMedia(query)
-
-    // Triggered at the first client-side load and if query changes
-    handleChange()
-
-    // Use modern addEventListener/removeEventListener
-    matchMedia.addEventListener('change', handleChange)
-
-    return () => {
-      matchMedia.removeEventListener('change', handleChange)
-    }
-  }, [query])
-
-  return matches
-}
-
-export default useMediaQuery