@kids-reporter/routing-ui 0.1.0-alpha.1

package/eslint.config.mjs

@@ -0,0 +1,55 @@
+import baseConfig, {
+  typescriptConfig,
+  javascriptConfig,
+} from '../../eslint.base.config.mjs'
+import globals from 'globals'
+
+export default [
+  ...baseConfig,
+  // Override for routing-ui package - React/TypeScript focused
+  {
+    ...typescriptConfig,
+    files: ['src/**/*.{ts,tsx}'],
+    rules: {
+      ...typescriptConfig.rules,
+    },
+  },
+  {
+    ...javascriptConfig,
+    files: ['src/**/*.{js,jsx}'],
+    rules: {
+      ...javascriptConfig.rules,
+      // Tailwind CSS classname sorting rules
+      'no-restricted-syntax': [
+        'warn',
+        {
+          selector: 'JSXAttribute[name.name="className"]',
+          message:
+            'Tailwind CSS classes should be sorted. Use prettier-plugin-tailwindcss for automatic sorting.',
+        },
+        {
+          selector: 'JSXAttribute[name.name="class"]',
+          message:
+            'CSS classes should be sorted. Consider using a class sorting tool.',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.config.{js,mjs,cjs}'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: {
+        ...globals.node,
+        ...globals.es2022,
+      },
+    },
+    rules: {
+      'no-undef': 'error',
+    },
+  },
+  {
+    ignores: ['node_modules/**', 'dist/**', 'build/**'],
+  },
+]

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@kids-reporter/routing-ui",
+  "license": "MIT",
+  "version": "0.1.0-alpha.1",
+  "description": "Routing UI for Kids Reporter",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "./scripts/build.sh",
+    "lint": "eslint . --config ./eslint.config.mjs",
+    "lint:check": "eslint . --config ./eslint.config.mjs",
+    "type-check": "tsc --noEmit",
+    "postinstall": "yarn build"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.5",
+    "@babel/plugin-transform-runtime": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
+    "@babel/runtime": "^7.18.5",
+    "@types/lodash": "^4.17.7",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "18.3.7",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tailwindcss": "^4.1.14"
+  }
+}

package/prettier.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  arrowParens: 'always',
+  plugins: ['prettier-plugin-tailwindcss'],
+  tailwindStylesheet: './src/styles.css',
+  tailwindFunctions: ['clsx', 'cn', 'cva'],
+}

package/scripts/build.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+set -e
+
+echo "Cleaning dist directory..."
+rm -rf ./dist
+mkdir -p ./dist
+
+echo "Building CJS version..."
+npx babel src --out-dir dist --extensions ".ts,.tsx" --source-maps
+
+echo "Copying CSS file..."
+cp ./src/styles.css ./dist/styles.css
+
+echo "Generating TypeScript declarations..."
+npx tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist
+
+echo "Build completed successfully!"

package/src/components/button.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import React from 'react'
+
+import { cn } from '../utils/cn'
+
+const buttonVariants = cva(
+  // Base styles
+  'font-noto gap-2.5 font-bold inline-flex cursor-pointer items-center justify-center rounded-full transition-colors duration-200',
+  {
+    variants: {
+      variant: {
+        primary: [
+          'text-white border-0 bg-red-400',
+          'hover:bg-red-500',
+          'active:bg-red-600',
+          'disabled:bg-gray-400 disabled:text-white disabled:cursor-default',
+        ],
+        secondary: [
+          'bg-white text-gray-900 border-2 border-red-400',
+          'hover:text-white hover:border-red-500 hover:bg-red-500',
+          'active:text-white active:border-red-600 active:bg-red-600',
+          'disabled:border-gray-400 disabled:bg-white disabled:text-gray-400 disabled:cursor-default',
+        ],
+      },
+      size: {
+        44: 'h-11 px-5 py-2 text-base', // 44px height, 16px font size
+        36: 'h-9 px-4 py-2 text-sm', // 36px height, 14px font size
+        32: 'h-8 px-3 py-1 text-sm', // 32px height, 14px font size
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 44,
+    },
+  }
+)
+
+// Loading spinner icon component
+const LoadingSpinner = ({ size = 20 }: { size?: number }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 25 24"
+    fill="none"
+    className="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      opacity="0.5"
+      d="M12.5 2C10.5222 2 8.58879 2.58649 6.9443 3.6853C5.29981 4.78412 4.01809 6.3459 3.26121 8.17317C2.50433 10.0004 2.3063 12.0111 2.69215 13.9509C3.078 15.8907 4.03041 17.6725 5.42894 19.0711C6.82746 20.4696 8.60929 21.422 10.5491 21.8079C12.4889 22.1937 14.4996 21.9957 16.3268 21.2388C18.1541 20.4819 19.7159 19.2002 20.8147 17.5557C21.9135 15.9112 22.5 13.9778 22.5 12C22.5 10.6868 22.2413 9.38642 21.7388 8.17317C21.2363 6.95991 20.4997 5.85752 19.5711 4.92893C18.6425 4.00035 17.5401 3.26375 16.3268 2.7612C15.1136 2.25866 13.8132 2 12.5 2ZM12.5 20C10.9178 20 9.37104 19.5308 8.05544 18.6518C6.73985 17.7727 5.71447 16.5233 5.10897 15.0615C4.50347 13.5997 4.34504 11.9911 4.65372 10.4393C4.9624 8.88743 5.72433 7.46197 6.84315 6.34315C7.96197 5.22433 9.38743 4.4624 10.9393 4.15372C12.4911 3.84504 14.0997 4.00346 15.5615 4.60896C17.0233 5.21447 18.2727 6.23984 19.1518 7.55544C20.0308 8.87103 20.5 10.4177 20.5 12C20.5 14.1217 19.6572 16.1566 18.1569 17.6569C16.6566 19.1571 14.6217 20 12.5 20Z"
+      fill="currentColor"
+    />
+    <path
+      d="M20.5 12H22.5C22.5 10.6868 22.2413 9.38642 21.7388 8.17317C21.2362 6.95991 20.4997 5.85752 19.5711 4.92893C18.6425 4.00035 17.5401 3.26375 16.3268 2.7612C15.1136 2.25866 13.8132 2 12.5 2V4C14.6217 4 16.6566 4.84285 18.1569 6.34315C19.6571 7.84344 20.5 9.87827 20.5 12Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export type ButtonProps = {
+  isLoading?: boolean
+  disabled?: boolean
+  asChild?: boolean
+  children: React.ReactNode
+} & VariantProps<typeof buttonVariants> &
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      isLoading = false,
+      disabled = false,
+      asChild = false,
+      size,
+      variant,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isDisabled = disabled || isLoading
+
+    const buttonClasses = cn(buttonVariants({ variant, size }), className)
+
+    const Comp = asChild ? Slot : 'button'
+
+    return (
+      <Comp
+        ref={ref}
+        className={buttonClasses}
+        disabled={isDisabled}
+        {...props}
+      >
+        {isLoading ? (
+          <LoadingSpinner size={size === 32 ? 16 : size === 36 ? 18 : 20} />
+        ) : (
+          children
+        )}
+      </Comp>
+    )
+  }
+)
+
+export default Button

package/src/components/index.tsx

@@ -0,0 +1,2 @@
+export { default as Button } from './button'
+export { default as Input } from './input'

package/src/components/input.tsx

@@ -0,0 +1,171 @@
+'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
+  'prose-p1 desktop:bg-white! px-4 py-1.5 h-11 flex items-center rounded-full border border-transparent bg-neutral-100 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

@@ -0,0 +1,153 @@
+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/news-classroom',
+    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',
+  },
+]