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

package/src/components/input.tsx

@@ -1,171 +0,0 @@
-'use client'
-
-import { cva } from 'class-variance-authority'
-import { forwardRef, useRef, useState } from 'react'
-
-import { SearchIconSmall } from '../icons'
-import { cn } from '../utils/cn'
-
-// Close icon component
-const CloseIcon = ({ className }: { className?: string }) => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="10" cy="10" r="10" fill="currentColor" />
-    <path
-      d="M7 7l6 6M13 7l-6 6"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-)
-
-const inputVariants = cva(
-  // Base styles
-  'desktop:bg-white! px-4 py-1.5 h-11 flex items-center rounded-full border border-transparent bg-neutral-100 prose-p1 transition-colors duration-200 hover:border-neutral-600',
-  {
-    variants: {
-      state: {
-        default: 'border-transparent',
-        hover: 'border-neutral-600',
-        focus: 'border-neutral-600',
-        active: 'border-neutral-600',
-        unfocus: 'border-transparent',
-        error: 'border-red-600',
-      },
-    },
-    defaultVariants: {
-      state: 'default',
-    },
-  }
-)
-
-export type InputProps = {
-  placeholder?: string
-  value?: string
-  onChange?: (value: string) => void
-  onClear?: () => void
-  showClearButton?: boolean
-  children?: React.ReactNode
-  inputRef?: React.RefObject<HTMLInputElement>
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      placeholder = '搜尋更多新聞、議題',
-      value,
-      onChange,
-      onClear,
-      showClearButton = true,
-      className,
-      onFocus,
-      onBlur,
-      inputRef,
-      ...props
-    },
-    ref
-  ) => {
-    const [internalValue, setInternalValue] = useState('')
-    const [isFocused, setIsFocused] = useState(false)
-    const [isActive, setIsActive] = useState(false)
-    const innerInputRef = useRef<HTMLInputElement>(null)
-    const currentValue = value !== undefined ? value : internalValue
-    const hasValue = currentValue.length > 0
-
-    // Determine current state
-    const currentState = isFocused
-      ? 'focus'
-      : hasValue
-        ? isActive
-          ? 'active'
-          : 'unfocus'
-        : 'default'
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value
-      if (onChange) {
-        onChange(newValue)
-      } else {
-        setInternalValue(newValue)
-      }
-      setIsActive(true)
-    }
-
-    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-      if (onFocus) {
-        onFocus(e)
-      }
-      setIsFocused(true)
-      setIsActive(true)
-    }
-
-    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-      if (onBlur) {
-        onBlur(e)
-      }
-      setIsFocused(false)
-      setIsActive(false)
-    }
-
-    const handleClear = (e: React.MouseEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-
-      if (onChange) {
-        onChange('')
-      } else {
-        setInternalValue('')
-      }
-      if (onClear) {
-        onClear()
-      }
-
-      const currentRef = inputRef ?? innerInputRef
-      currentRef.current?.focus()
-    }
-
-    const inputClasses = cn(inputVariants({ state: currentState }), className)
-
-    return (
-      <div className="gap-2 flex flex-col">
-        <div className={inputClasses} ref={ref}>
-          <div className="text-neutral-600">
-            <SearchIconSmall />
-          </div>
-          <input
-            type="text"
-            value={currentValue}
-            onChange={handleChange}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            placeholder={placeholder}
-            className="placeholder:font-medium ml-2 max-w-[72%] flex-1 flex-shrink-1 bg-transparent text-neutral-900 placeholder:text-neutral-400 focus:outline-none"
-            ref={inputRef ?? innerInputRef}
-            {...props}
-          />
-
-          {showClearButton && hasValue && (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="p-1/2 ml-auto flex-shrink-0 cursor-pointer rounded-full text-neutral-400 transition-colors hover:text-neutral-600 active:bg-neutral-200"
-              aria-label="Clear input"
-            >
-              <CloseIcon />
-            </button>
-          )}
-        </div>
-      </div>
-    )
-  }
-)
-
-export default Input

package/src/constants/default-values.tsx

@@ -1,153 +0,0 @@
-import { SettingsIconSmall } from '../icons'
-import { MenuItem } from '../types'
-
-export const SUBSCRIBE_URL = 'https://solink.soundon.fm/kidstwreporter'
-export const DONATE_URL = 'https://support.twreporter.org/'
-export const PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-policy'
-export const SEARCH_PLACEHOLDER = '搜尋更多新聞、議題'
-
-export const MENU_ITEMS: MenuItem[] = [
-  {
-    label: '最新',
-    href: '/all',
-    subItems: [],
-  },
-  {
-    label: '專題',
-    href: '/topic/page',
-    subItems: [],
-  },
-  {
-    label: '新聞',
-    href: '/category/news',
-    subItems: [
-      { label: '焦點新聞', href: '/category/news/times' },
-      { label: '真的假的', href: '/category/news/knowledge' },
-      { label: '人物故事', href: '/category/news/story' },
-      { label: '文化報導', href: '/category/news/explore' },
-      { label: '專欄', href: '/category/news/column' },
-      { label: '英文新聞', href: '/categories/news/english-version' },
-    ],
-  },
-  {
-    label: '多媒體',
-    href: '/category/comics',
-    subItems: [
-      { label: '圖解新聞', href: '/category/comics/times' },
-      { label: '新聞遊戲', href: '/category/comics/test-news' },
-      { label: '圖文故事', href: '/category/comics/graphic-story' },
-    ],
-  },
-  {
-    label: '校園',
-    href: '/category/campus',
-    subItems: [
-      { label: '校園寶可夢', href: '/category/campus/campus-pokemon' },
-      { label: '上課好好玩', href: '/category/campus/teaching' },
-      { label: '小讀者連線', href: '/category/campus/joining' },
-    ],
-  },
-  {
-    label: 'Podcast',
-    href: '/category/listening-news',
-    subItems: [
-      {
-        label: '小記者，問什麼？',
-        href: '/category/listening-news/kids-reporter-ask',
-      },
-      {
-        label: '新聞讀報',
-        href: '/category/listening-news/multilingual-listening-news',
-      },
-      {
-        label: '新聞關鍵字',
-        href: '/category/listening-news/listening-news-keywords',
-      },
-      {
-        label: '文化關鍵字',
-        href: '/category/listening-news/listening-news-culture-keywords',
-      },
-    ],
-  },
-  {
-    label: '教案',
-    href: '/category/classroom',
-    subItems: [],
-  },
-]
-
-export const ADDITIONAL_MENU_ITEMS: MenuItem[] = [
-  {
-    label: '閱讀探索設定',
-    href: '/reading-settings',
-    subItems: [],
-    showIcon: true,
-    icon: <SettingsIconSmall />,
-  },
-  {
-    label: '關於我們',
-    href: '/about',
-    subItems: [],
-  },
-  {
-    label: '呼叫報導仔流程',
-    href: '/about#callkidsreporter',
-    subItems: [],
-  },
-  {
-    label: '投稿專區',
-    href: 'https://forms.gle/49AEG8kFj7QWjgij8',
-    subItems: [],
-    external: true,
-  },
-  {
-    label: '加入小記者',
-    href: 'https://forms.gle/eGq5jagNTwriwSCX6',
-    subItems: [],
-    external: true,
-  },
-  {
-    label: '訂閱Podcast',
-    href: 'https://solink.soundon.fm/kidstwreporter',
-    subItems: [],
-    external: true,
-  },
-  {
-    label: '聯絡我們',
-    href: '/about#mail',
-    subItems: [],
-  },
-  {
-    label: '前往《報導者》',
-    href: 'https://www.twreporter.org/',
-    subItems: [],
-    external: true,
-  },
-]
-
-export const SOCIAL_MEDIA_ITEMS = [
-  {
-    label: 'Facebook',
-    href: 'https://www.facebook.com/twreporter/',
-  },
-  {
-    label: 'Instagram',
-    href: 'https://www.instagram.com/twreporter/',
-  },
-  {
-    label: 'YouTube',
-    href: 'https://www.youtube.com/@TwreporterOrg',
-  },
-  {
-    label: 'Threads',
-    href: 'https://www.threads.com/@twreporter',
-  },
-  {
-    label: 'Medium',
-    href: 'https://medium.com/twreporter',
-  },
-  {
-    label: 'RSS',
-    href: 'https://kids-storage.twreporter.org/rss/rss.xml',
-  },
-]

package/src/footer.tsx

@@ -1,149 +0,0 @@
-'use client'
-
-import Button from './components/button'
-import {
-  ADDITIONAL_MENU_ITEMS,
-  DONATE_URL,
-  PRIVACY_POLICY,
-  SOCIAL_MEDIA_ITEMS,
-} from './constants/default-values'
-import { MenuItem, SocialMediaHrefs } from './types'
-import { generateSocialMediaConfig } from './utils/generate-social-media-config'
-
-type FooterProps = {
-  socialMediaHrefs?: SocialMediaHrefs
-  additionalMenuItems?: MenuItem[]
-  donateUrl?: string
-  privacyPolicyUrl?: string
-}
-
-const Footer = ({
-  socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),
-  additionalMenuItems = ADDITIONAL_MENU_ITEMS,
-  donateUrl = DONATE_URL,
-  privacyPolicyUrl = PRIVACY_POLICY,
-}: FooterProps) => {
-  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)
-
-  return (
-    <footer className="w-full bg-neutral-white">
-      {/* Main Footer Content */}
-      <div className="py-12 desktop:py-14 w-full bg-neutral-white px-(--margin-mobile) desktop:px-(--margin-desktop)">
-        <div className="max-w-300 mx-auto">
-          <div className="gap-8 flex flex-col items-center desktop:flex-row desktop:justify-between">
-            {/* Logo and Description */}
-            <div className="max-w-100 gap-6 flex w-full flex-col items-center desktop:items-start">
-              <div className="flex items-center">
-                <a href="/" className="flex items-center">
-                  <img
-                    src="/assets/images/footer-logo.svg"
-                    alt="少年報導者"
-                    loading="lazy"
-                    width={238}
-                    height={26}
-                  />
-                </a>
-              </div>
-              <p className="w-full prose-p2 text-neutral-900">
-                《少年報導者》是由非營利媒體《報導者》針對兒少打造的深度新聞報導品牌，與兒童和少年一起理解世界，參與未來。
-              </p>
-              <Button size={44} variant="secondary" asChild className="w-75">
-                <a href={donateUrl} target="_blank" rel="noreferrer">
-                  贊助我們
-                </a>
-              </Button>
-            </div>
-
-            <div className="gap-6 flex flex-row">
-              <div className="gap-2 flex flex-col">
-                {additionalMenuItems.slice(0, 4).map((link) => (
-                  <a
-                    key={link.label}
-                    href={link.href}
-                    className="min-w-30 prose-p2-bold text-neutral-900 transition-colors duration-200 hover:text-red-400"
-                    target={link.external ? '_blank' : undefined}
-                    rel={link.external ? 'noopener noreferrer' : undefined}
-                  >
-                    {link.label}
-                  </a>
-                ))}
-              </div>
-              <div className="gap-2 flex flex-col">
-                {additionalMenuItems.slice(4).map((link) => (
-                  <a
-                    key={link.label}
-                    href={link.href}
-                    className="min-w-30 prose-p2-bold text-neutral-900 transition-colors duration-200 hover:text-red-400"
-                    target={link.external ? '_blank' : undefined}
-                    rel={link.external ? 'noopener noreferrer' : undefined}
-                  >
-                    {link.label}
-                  </a>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="py-6 w-full bg-red-400 px-(--margin-mobile) desktop:px-(--margin-desktop)">
-        <div className="max-w-300 mx-auto">
-          <div className="gap-5 desktop:gap-4 flex flex-col items-center desktop:flex-row desktop:justify-between">
-            <div className="gap-4 order-1 flex items-center desktop:order-2">
-              {socialMediaConfig.map((social) => {
-                const IconComponent = social.icon
-                return (
-                  <a
-                    key={social.label}
-                    href={social.href}
-                    className="relative text-neutral-white transition-colors duration-200 hover:text-neutral-200"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={social.label}
-                  >
-                    <div className="peer w-6 h-6 relative z-10 flex items-center justify-center rounded-full text-neutral-white transition-all duration-200 hover:text-red-500">
-                      {IconComponent && <IconComponent />}
-                    </div>
-                    <div className="p-2 peer-hover:bg-white absolute top-1/2 left-1/2 z-1 flex h-[23px] w-[23px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-all duration-200"></div>
-                  </a>
-                )
-              })}
-            </div>
-
-            <div className="text-center prose-p3 text-neutral-white desktop:order-1 desktop:text-left">
-              <p className="desktop:inline">
-                衛部救字第1131363879號｜勸募期間 2025/1/1~12/31
-                <span className="hidden desktop:inline">｜</span>
-              </p>
-              <p className="desktop:inline">
-                <a
-                  href={privacyPolicyUrl}
-                  target="_blank"
-                  className="desktop:ml-1 text-neutral-white underline"
-                  rel="noopener noreferrer"
-                >
-                  隱私政策
-                </a>
-                ｜
-                <a
-                  href="https://www.twreporter.org/a/license-footer"
-                  target="_blank"
-                  className="desktop:ml-1 text-neutral-white underline"
-                  rel="noopener noreferrer"
-                >
-                  許可協議
-                </a>
-              </p>
-              <p className="hidden desktop:inline">｜</p>
-              <p className="desktop:inline">
-                Copyright © {new Date().getFullYear()} The Reporter
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  )
-}
-
-export default Footer

package/src/header/desktop-header.tsx

@@ -1,132 +0,0 @@
-'use client'
-
-import { LoginIcon } from '../icons'
-import type { MenuItem } from '../types'
-import { cn } from '../utils/cn'
-import {
-  ActionButtons,
-  BottomNavigation,
-  HamburgerButton,
-  LogoLink,
-} from './shared-components'
-
-type DesktopHeaderProps = {
-  onHamburgerOverlayOpen: () => void
-  keywords: string[]
-  compactMode: boolean
-  postTitle?: string
-  hide: boolean
-  searchPlaceholder: string
-  subscribeUrl: string
-  menuItems: MenuItem[]
-  isLoggedIn?: boolean
-  loginUrl?: string
-}
-
-export function DesktopHeader({
-  onHamburgerOverlayOpen,
-  keywords,
-  compactMode,
-  postTitle,
-  hide,
-  searchPlaceholder,
-  subscribeUrl,
-  menuItems,
-  isLoggedIn,
-  loginUrl,
-}: DesktopHeaderProps) {
-  return (
-    <>
-      <div className="hidden h-(--desktop-header-height) desktop:block"></div>
-      <div
-        className={cn(
-          'top-0 ease-in-out fixed left-1/2 z-1000 hidden w-full -translate-x-1/2 transform transition-all duration-500 desktop:block',
-          compactMode && 'bg-white',
-          hide
-            ? 'pointer-events-none -translate-y-full opacity-0'
-            : 'translate-y-0 pointer-events-auto opacity-100'
-        )}
-      >
-        <div className="px-12 hidden w-full bg-transparent desktop:block">
-          <div className="max-w-300 mx-auto">
-            <div
-              className={cn(
-                'px-4 flex items-center justify-between py-[18px]',
-                compactMode && 'py-2.5'
-              )}
-            >
-              <div className={'flex items-center'}>
-                <div
-                  className={cn(
-                    'ease-in-out overflow-hidden transition-all duration-500',
-                    compactMode
-                      ? 'translate-x-0 max-w-12 mr-4 w-auto scale-100 opacity-100'
-                      : '-translate-x-2 w-0 max-w-0 pointer-events-none scale-95 opacity-0'
-                  )}
-                >
-                  <HamburgerButton
-                    onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-                    small
-                  />
-                </div>
-                <div className={compactMode ? 'mr-12' : 'mr-8'}>
-                  <LogoLink compactMode={compactMode} />
-                </div>
-                {postTitle && (
-                  <div className="pr-12 block">
-                    <p className="font-medium tracking-wide max-w-124 overflow-hidden prose-p2 text-ellipsis whitespace-nowrap text-neutral-900">
-                      {postTitle}
-                    </p>
-                  </div>
-                )}
-                <div
-                  className={cn(
-                    'ease-in-out overflow-hidden transition-all duration-500',
-                    compactMode
-                      ? 'max-h-0 -translate-x-8 scale-95 opacity-0'
-                      : 'max-h-20 max-w-auto scale-100 opacity-100',
-                    postTitle && compactMode && 'max-w-0'
-                  )}
-                >
-                  <span className="font-medium translate-y-0 inline-block prose-p2 tracking-[2.2px]! text-nowrap text-neutral-900 opacity-100">
-                    理解世界 × 參與未來
-                  </span>
-                </div>
-              </div>
-
-              <div className="gap-4 flex items-center">
-                <ActionButtons
-                  tags={keywords}
-                  hideCtaButtons={compactMode}
-                  searchPlaceholder={searchPlaceholder}
-                  subscribeUrl={subscribeUrl}
-                />
-                <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>
-              </div>
-            </div>
-
-            <div
-              className={cn(
-                'ease-in-out overflow-hidden transition-all duration-500',
-                compactMode
-                  ? 'h-0 -translate-y-4 opacity-0'
-                  : 'translate-y-0 h-auto opacity-100'
-              )}
-            >
-              <BottomNavigation
-                onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-                menuItems={menuItems}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

package/src/header/header-context.tsx

@@ -1,82 +0,0 @@
-'use client'
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react'
-
-type HeaderContextType = {
-  postTitle?: string
-  setPostTitle: (title?: string) => void
-  isMenuOpen: boolean
-  openMenu: () => void
-  closeMenu: () => void
-  keywords: string[]
-  isLoggedIn: boolean
-  setIsLoggedIn: (isLoggedIn: boolean) => void
-  mobileBackButtonHref?: string
-  setMobileBackButtonHref: (href?: string) => void
-  loginUrl?: string
-  setLoginUrl: (url?: string) => void
-}
-
-const HeaderContext = createContext<HeaderContextType | undefined>(undefined)
-
-export function HeaderProvider({
-  children,
-  keywords,
-}: {
-  children: ReactNode
-  keywords: string[]
-}) {
-  const [postTitle, setPostTitle] = useState<string | undefined>(undefined)
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [isLoggedIn, setIsLoggedIn] = useState(false)
-  const [mobileBackButtonHref, setMobileBackButtonHref] = useState<
-    string | undefined
-  >(undefined)
-  const [loginUrl, setLoginUrl] = useState<string | undefined>(undefined)
-  const openMenu = useCallback(() => setIsMenuOpen(true), [])
-  const closeMenu = useCallback(() => setIsMenuOpen(false), [])
-
-  const contextValue = useMemo(
-    () => ({
-      postTitle,
-      setPostTitle,
-      isMenuOpen,
-      openMenu,
-      closeMenu,
-      keywords,
-      isLoggedIn,
-      setIsLoggedIn,
-      mobileBackButtonHref,
-      setMobileBackButtonHref,
-      loginUrl,
-      setLoginUrl,
-    }),
-    [
-      postTitle,
-      isMenuOpen,
-      openMenu,
-      closeMenu,
-      keywords,
-      isLoggedIn,
-      mobileBackButtonHref,
-      loginUrl,
-    ]
-  )
-
-  return (
-    <HeaderContext.Provider value={contextValue}>
-      {children}
-    </HeaderContext.Provider>
-  )
-}
-
-export function useHeaderContext() {
-  const context = useContext(HeaderContext)
-  return context
-}