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

package/src/styles.css

@@ -0,0 +1,475 @@
+/* Tailwind v4 Theme Configuration */
+@theme {
+  /* Colors - Neutral */
+  --color-neutral-white: #ffffff;
+  --color-neutral-100: #f8f8f8;
+  --color-neutral-200: #eaeaea;
+  --color-neutral-300: #d9d9d9;
+  --color-neutral-400: #c6c6c6;
+  --color-neutral-500: #a3a3a3;
+  --color-neutral-600: #8e8e8e;
+  --color-neutral-700: #575757;
+  --color-neutral-800: #3b3b3b;
+  --color-neutral-900: #232323;
+  --color-neutral-black: #000000;
+  --color-neutral-border: #00000026;
+
+  /* Colors - Brand Red */
+  --color-red-100: #fff0f2;
+  --color-red-200: #ffc4ca;
+  --color-red-300: #ff98a2;
+  --color-red-400: #f76977;
+  --color-red-500: #bd4450;
+  --color-red-600: #a0343e;
+  --color-red-700: #82262f;
+  --color-red-800: #651a22;
+
+  /* Colors - Brand Blue */
+  --color-blue-100: #e9f8ff;
+  --color-blue-200: #b9e8ff;
+  --color-blue-300: #89d9ff;
+  --color-blue-400: #27b3f5;
+  --color-blue-500: #1696d3;
+  --color-blue-600: #087bb1;
+  --color-blue-700: #00618f;
+  --color-blue-800: #004a6d;
+
+  /* Colors - Brand Yellow */
+  --color-yellow-100: #fff9ec;
+  --color-yellow-200: #ffedc2;
+  --color-yellow-300: #ffe197;
+  --color-yellow-400: #f8c341;
+  --color-yellow-500: #d6a52d;
+  --color-yellow-600: #b4881d;
+  --color-yellow-700: #926c10;
+  --color-yellow-800: #705207;
+
+  /* Typography - Font Families */
+  --font-family-noto: 'Noto Sans TC', sans-serif;
+  --font-family-swei: 'SweiMarkerSansCJKtc-Regular', sans-serif;
+
+  /* Typography - Font Sizes */
+  --font-size-h1-large: 48px;
+  --font-size-h2-large: 40px;
+  --font-size-h3-large: 32px;
+  --font-size-h4-large: 28px;
+  --font-size-h5-large: 22px;
+  --font-size-h6-large: 18px;
+
+  --font-size-h1-small: 28px;
+  --font-size-h2-small: 24px;
+  --font-size-h3-small: 22px;
+  --font-size-h4-small: 18px;
+  --font-size-h5-small: 17px;
+  --font-size-h6-small: 16px;
+
+  --font-size-p1: 16px;
+  --font-size-p2: 14px;
+  --font-size-p3: 12px;
+  --font-size-p4: 10px;
+
+  /* Typography - Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.6;
+  --line-height-relaxed: 1.75;
+
+  /* Typography - Letter Spacing */
+  --letter-spacing-wide: 0.05em;
+
+  /* Spacing - Grid System */
+  --spacing-grid-xs: 4px;
+  --spacing-grid-sm: 8px;
+  --spacing-grid-md: 16px;
+  --spacing-grid-lg: 24px;
+  --spacing-grid-xl: 32px;
+  --spacing-grid-2xl: 48px;
+  --spacing-grid-3xl: 64px;
+  --spacing-grid-4xl: 96px;
+  --spacing-grid-5xl: 128px;
+
+  /* Container Widths */
+  --container-mobile: 375px;
+  --container-tablet: 768px;
+  --container-desktop: 1024px;
+  --container-hd: 1440px;
+
+  /* Grid Gutters */
+  --gutter-mobile: 16px;
+  --gutter-tablet: 24px;
+  --gutter-desktop: 32px;
+  --gutter-hd: 32px;
+
+  /* Margins */
+  --margin-mobile: 24px;
+  --margin-tablet: 32px;
+  --margin-desktop: 48px;
+  --margin-hd: 120px;
+
+  /* Responsive Breakpoints */
+  --breakpoint-mobile: 375px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1024px;
+  --breakpoint-hd: 1440px;
+
+  /* Header */
+  --mobile-header-height: 64px;
+
+  /* Legacy variables for backward compatibility */
+  --fontFamily: var(--font-family-noto);
+  --max-width: 1100px;
+  --border-radius: 12px;
+
+  /* Updated color palette using design system */
+  --paletteColor1: var(--color-blue-400);
+  --paletteColor2: var(--color-blue-600);
+  --paletteColor3: var(--color-neutral-gray-700);
+  --paletteColor4: var(--color-neutral-gray-900);
+  --paletteColor5: var(--color-red-400);
+  --paletteColor6: var(--color-yellow-400);
+  --paletteColor7: var(--color-neutral-gray-200);
+  --paletteColor8: var(--color-neutral-white);
+  --color: var(--paletteColor3);
+}
+
+/* Design System CSS Variables for compatibility */
+@layer base {
+  :root {
+    /* Colors - Neutral */
+    --color-neutral-white: #ffffff;
+    --color-neutral-gray-100: #f8f8f8;
+    --color-neutral-gray-200: #eaeaea;
+    --color-neutral-gray-300: #d9d9d9;
+    --color-neutral-gray-400: #c6c6c6;
+    --color-neutral-gray-500: #a3a3a3;
+    --color-neutral-gray-600: #8e8e8e;
+    --color-neutral-gray-700: #575757;
+    --color-neutral-gray-800: #3b3b3b;
+    --color-neutral-gray-900: #232323;
+    --color-neutral-black: #000000;
+    --color-neutral-border: #00000026;
+
+    /* Colors - Brand Red */
+    --color-red-100: #fff0f2;
+    --color-red-200: #ffc4ca;
+    --color-red-300: #ff98a2;
+    --color-red-400: #f76977;
+    --color-red-500: #bd4450;
+    --color-red-600: #a0343e;
+    --color-red-700: #82262f;
+    --color-red-800: #651a22;
+
+    /* Colors - Brand Blue */
+    --color-blue-100: #e9f8ff;
+    --color-blue-200: #b9e8ff;
+    --color-blue-300: #89d9ff;
+    --color-blue-400: #27b3f5;
+    --color-blue-500: #1696d3;
+    --color-blue-600: #087bb1;
+    --color-blue-700: #00618f;
+    --color-blue-800: #004a6d;
+
+    /* Colors - Brand Yellow */
+    --color-yellow-100: #fff9ec;
+    --color-yellow-200: #ffedc2;
+    --color-yellow-300: #ffe197;
+    --color-yellow-400: #f8c341;
+    --color-yellow-500: #d6a52d;
+    --color-yellow-600: #b4881d;
+    --color-yellow-700: #926c10;
+    --color-yellow-800: #705207;
+
+    /* Typography - Font Families */
+    --font-family-noto: 'Noto Sans TC', sans-serif;
+    --font-family-swei: 'SweiMarkerSansCJKtc-Regular', sans-serif;
+
+    /* Typography - Font Sizes */
+    --font-size-h1-large: 48px;
+    --font-size-h2-large: 40px;
+    --font-size-h3-large: 32px;
+    --font-size-h4-large: 28px;
+    --font-size-h5-large: 22px;
+    --font-size-h6-large: 18px;
+
+    --font-size-h1-small: 28px;
+    --font-size-h2-small: 24px;
+    --font-size-h3-small: 22px;
+    --font-size-h4-small: 18px;
+    --font-size-h5-small: 17px;
+    --font-size-h6-small: 16px;
+
+    --font-size-p1: 16px;
+    --font-size-p2: 14px;
+    --font-size-p3: 12px;
+    --font-size-p4: 10px;
+
+    /* Typography - Line Heights */
+    --line-height-tight: 1.25;
+    --line-height-normal: 1.6;
+    --line-height-relaxed: 1.75;
+
+    /* Typography - Letter Spacing */
+    --letter-spacing-wide: 0.05em;
+
+    /* Spacing - Grid System */
+    --spacing-grid-xs: 4px;
+    --spacing-grid-sm: 8px;
+    --spacing-grid-md: 16px;
+    --spacing-grid-lg: 24px;
+    --spacing-grid-xl: 32px;
+    --spacing-grid-2xl: 48px;
+    --spacing-grid-3xl: 64px;
+    --spacing-grid-4xl: 96px;
+    --spacing-grid-5xl: 128px;
+
+    /* Container Widths */
+    --container-mobile: 375px;
+    --container-tablet: 768px;
+    --container-desktop: 1024px;
+    --container-hd: 1440px;
+
+    /* Grid Gutters */
+    --gutter-mobile: 16px;
+    --gutter-tablet: 24px;
+    --gutter-desktop: 32px;
+    --gutter-hd: 32px;
+
+    /* Margins */
+    --margin-mobile: 24px;
+    --margin-tablet: 32px;
+    --margin-desktop: 48px;
+    --margin-hd: 120px;
+
+    /* Responsive Breakpoints */
+    --breakpoint-mobile: 375px;
+    --breakpoint-tablet: 768px;
+    --breakpoint-desktop: 1024px;
+    --breakpoint-hd: 1440px;
+
+    /* Header */
+    --mobile-header-height: 64px;
+
+    /* Legacy variables for backward compatibility */
+    --fontFamily: var(--font-family-noto);
+    --max-width: 1100px;
+    --border-radius: 12px;
+
+    /* Updated color palette using design system */
+    --paletteColor1: var(--color-blue-400);
+    --paletteColor2: var(--color-blue-600);
+    --paletteColor3: var(--color-neutral-gray-700);
+    --paletteColor4: var(--color-neutral-gray-900);
+    --paletteColor5: var(--color-red-400);
+    --paletteColor6: var(--color-yellow-400);
+    --paletteColor7: var(--color-neutral-gray-200);
+    --paletteColor8: var(--color-neutral-white);
+    --color: var(--paletteColor3);
+  }
+}
+
+@layer utilities {
+  /* Typography Utilities - Headlines Large */
+  .prose-h1-large {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h1-large);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h2-large {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h2-large);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h3-large {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h3-large);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h4-large {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h4-large);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h5-large {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h5-large);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h6-large {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h6-large);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  /* Typography Utilities - Headlines Small */
+  .prose-h1-small {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h1-small);
+    font-weight: 700;
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h2-small {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h2-small);
+    font-weight: 700;
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h3-small {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h3-small);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h4-small {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h4-small);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h5-small {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h5-small);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-h6-small {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-h6-small);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  /* Typography Utilities - Paragraphs */
+  .prose-p1 {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-p1);
+    font-weight: 500;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-p1-bold {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-p1);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-p2 {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-p2);
+    font-weight: 500;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-p2-bold {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-p2);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-p3 {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-p3);
+    font-weight: 500;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-p3-bold {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-p3);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-p4 {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-p4);
+    font-weight: 500;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  .prose-p4-bold {
+    font-family: var(--font-family-noto);
+    font-size: var(--font-size-p4);
+    font-weight: 700;
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-wide);
+  }
+
+  /* Swei Marker Sans Font Variants */
+  .font-swei {
+    font-family: var(--font-family-swei);
+  }
+
+  /* Theme Color Utilities */
+  .theme-red {
+    --theme-color: var(--color-red-400);
+  }
+  .theme-yellow {
+    --theme-color: var(--color-yellow-400);
+  }
+  .theme-blue {
+    --theme-color: var(--color-blue-400);
+  }
+
+  /* Custom Scrollbar Utilities */
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-neutral-gray-300) transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: transparent;
+  }
+
+  body.no-scroll {
+    overflow: hidden;
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,10 @@
+export type MenuItem = {
+  label: string
+  href: string
+  subItems?: MenuItem[]
+  external?: boolean
+  showIcon?: boolean
+  icon?: React.ReactNode
+}
+
+export type SocialMediaHrefs = readonly string[]

package/src/utils/cn.ts

@@ -0,0 +1,41 @@
+import { ClassValue, clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      // Add custom prose classes in font-size group since we follow the design system
+      'font-size': [
+        'prose-p1',
+        'prose-p1-bold',
+        'prose-p2',
+        'prose-p2-bold',
+        'prose-p3',
+        'prose-p3-bold',
+        'prose-p4',
+        'prose-p4-bold',
+        'prose-h1-large',
+        'prose-h2-large',
+        'prose-h3-large',
+        'prose-h4-large',
+        'prose-h5-large',
+        'prose-h6-large',
+        'prose-h1-small',
+        'prose-h2-small',
+        'prose-h3-small',
+        'prose-h4-small',
+        'prose-h5-small',
+        'prose-h6-small',
+      ],
+    },
+  },
+})
+
+/**
+ * Combines clsx and tailwind-merge for optimal class merging.
+ * @param inputs - Class names or conditional class values.
+ * @returns A single string with merged class names.
+ */
+export const cn = (...inputs: ClassValue[]): string => {
+  return twMerge(clsx(inputs))
+}

package/src/utils/generate-social-media-config.ts

@@ -0,0 +1,75 @@
+import { JSX } from 'react'
+
+import {
+  FBIcon,
+  IGIcon,
+  MediumIcon,
+  RSSIcon,
+  ThreadsIcon,
+  YouTubeIcon,
+} from '../icons'
+import { SocialMediaHrefs } from '../types'
+
+export type SocialMediaConfig = {
+  label: string
+  href: string
+  icon: (() => JSX.Element) | null
+}
+
+export function generateSocialMediaConfig(
+  socialMediaHrefs: SocialMediaHrefs
+): SocialMediaConfig[] {
+  return socialMediaHrefs.map((href) => {
+    // Extract domain from URL to determine the social media platform
+    let label = 'Unknown'
+    let icon = null
+    try {
+      const url = new URL(href)
+      const hostname = url.hostname.toLowerCase()
+
+      // Check for specific patterns
+      if (hostname.includes('facebook.com')) {
+        label = 'Facebook'
+        icon = FBIcon
+      } else if (hostname.includes('instagram.com')) {
+        label = 'Instagram'
+        icon = IGIcon
+      } else if (
+        hostname.includes('youtube.com') ||
+        hostname.includes('youtu.be')
+      ) {
+        label = 'YouTube'
+        icon = YouTubeIcon
+      } else if (
+        hostname.includes('threads.net') ||
+        hostname.includes('threads.com')
+      ) {
+        label = 'Threads'
+        icon = ThreadsIcon
+      } else if (hostname.includes('medium.com')) {
+        label = 'Medium'
+        icon = MediumIcon
+      } else if (href.includes('rss.xml') || href.includes('rss')) {
+        label = 'RSS'
+        icon = RSSIcon
+      }
+    } catch {
+      console.warn(`Invalid URL provided: ${href}`)
+    }
+
+    if (!icon) {
+      console.warn(`No icon found for social media platform: ${label}`)
+      return {
+        label,
+        href,
+        icon: null, // or a default icon component
+      }
+    }
+
+    return {
+      label,
+      href,
+      icon,
+    }
+  })
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './cn'
+export * from './generate-social-media-config'

package/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "emitDeclarationOnly": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}