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

package/src/styles.css

@@ -1,360 +0,0 @@
-/* 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: 32px;
-  --font-size-h2-small: 28px;
-  --font-size-h3-small: 24px;
-  --font-size-h4-small: 22px;
-  --font-size-h5-small: 20px;
-  --font-size-h6-small: 18px;
-
-  --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-700);
-  --paletteColor4: var(--color-neutral-900);
-  --paletteColor5: var(--color-red-400);
-  --paletteColor6: var(--color-yellow-400);
-  --paletteColor7: var(--color-neutral-200);
-  --paletteColor8: var(--color-neutral-white);
-  --color: var(--paletteColor3);
-}
-
-/* Design System CSS Variables for compatibility */
-@layer base {
-  :root {
-    /* 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-700);
-    --paletteColor4: var(--color-neutral-900);
-    --paletteColor5: var(--color-red-400);
-    --paletteColor6: var(--color-yellow-400);
-    --paletteColor7: var(--color-neutral-200);
-    --paletteColor8: var(--color-neutral-white);
-    --color: var(--paletteColor3);
-  }
-}
-
-@layer utilities {
-  body.no-scroll {
-    overflow: hidden;
-  }
-}
-
-/* Typography Utilities - Headlines Large */
-@utility 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: 2.4px;
-}
-
-@utility 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: 2px;
-}
-
-@utility 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: 1.6px;
-}
-
-@utility 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: 1.4px;
-}
-
-@utility 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: 1.1px;
-}
-
-@utility 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: 0.9px;
-}
-
-/* Typography Utilities - Headlines Small */
-@utility prose-h1-small {
-  font-family: var(--font-family-noto);
-  font-size: var(--font-size-h1-small);
-  font-weight: 700;
-  line-height: var(--line-height-normal);
-  letter-spacing: 1.6px;
-}
-
-@utility prose-h2-small {
-  font-family: var(--font-family-noto);
-  font-size: var(--font-size-h2-small);
-  font-weight: 700;
-  line-height: var(--line-height-normal);
-  letter-spacing: 1.4px;
-}
-
-@utility 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: 1.2px;
-}
-
-@utility 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: 1.1px;
-}
-
-@utility 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: 1px;
-}
-
-@utility 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: 0.9px;
-}
-
-/* Typography Utilities - Paragraphs */
-@utility 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: 0.8px;
-}
-
-@utility 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: 0.8px;
-}
-
-@utility 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: 0.7px;
-}
-
-@utility 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: 0.7px;
-}
-
-@utility 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: 0.6px;
-}
-
-@utility 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: 0.6px;
-}
-
-@utility 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: 0.5px;
-}
-
-@utility 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: 0.5px;
-}
-
-/* Swei Marker Sans Font Variants */
-@utility font-swei {
-  font-family: var(--font-family-swei);
-}
-
-@utility scrollbar-thin {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-neutral-300) transparent;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: transparent;
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: transparent;
-  }
-}
-
-/* Theme Color Utilities */
-@utility theme-red {
-  --theme-color: var(--color-red-400);
-}
-@utility theme-yellow {
-  --theme-color: var(--color-yellow-400);
-}
-@utility theme-blue {
-  --theme-color: var(--color-blue-400);
-}

package/src/types/index.ts

@@ -1,10 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

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

package/tsconfig.json

@@ -1,33 +0,0 @@
-{
-  "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"]
-}