@windrun-huaiin/third-ui 5.14.1 → 6.0.0

package/src/main/language-detector.tsx

@@ -0,0 +1,175 @@
+/**
+ * @license
+ * MIT License
+ * Copyright (c) 2025 D8ger
+ * 
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use client'
+
+import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
+import { useLocale, useTranslations } from 'next-intl'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+type I18nConfig = {
+  locales: readonly string[];
+  detector: {
+    storagePrefix: string;
+    storageKey: string;
+    autoCloseTimeout: number;
+    expirationDays: number;
+  };
+};
+
+interface LanguageDetectorProps {
+  i18nConfig: I18nConfig;
+}
+
+type Locale = string;
+
+interface LanguagePreference {
+  locale: string;
+  status: 'accepted' | 'rejected';
+  timestamp: number;
+}
+
+export function LanguageDetector({ i18nConfig }: LanguageDetectorProps) {
+  const [show, setShow] = useState(false)
+  const [detectedLocale, setDetectedLocale] = useState<Locale | null>(null)
+  const currentLocale = useLocale()
+  const router = useRouter()
+  const t = useTranslations('languageDetection')
+
+  // Get the storage key from the configuration
+  const LANGUAGE_PREFERENCE_KEY = `${i18nConfig.detector.storagePrefix}-${i18nConfig.detector.storageKey}`
+
+  useEffect(() => {
+    // Get the browser language
+    const browserLang = navigator.language.split('-')[0] as Locale
+
+    // Get the language preference from localStorage
+    const savedPreference = localStorage.getItem(LANGUAGE_PREFERENCE_KEY)
+    const preference: LanguagePreference | null = savedPreference
+      ? JSON.parse(savedPreference)
+      : null
+
+    // Check if the language detection box should be displayed
+    const shouldShowDetector = () => {
+      if (!preference) return true;
+
+      // If the stored language is the same as the current language, do not display the detection box
+      if (preference.locale === currentLocale) return false;
+
+      // If the user has previously rejected switching to this language, do not display the detection box
+      if (preference.status === 'rejected' && preference.locale === browserLang) return false;
+
+      // If the user has previously accepted switching to this language, do not display the detection box
+      if (preference.status === 'accepted' && preference.locale === currentLocale) return false;
+
+      // Use the expiration time from the configuration
+      const expirationMs = i18nConfig.detector.expirationDays * 24 * 60 * 60 * 1000;
+      if (Date.now() - preference.timestamp < expirationMs) return false;
+
+      return true;
+    }
+
+    // Check if the browser language is in the supported language list and needs to display the detection box
+    if ((i18nConfig.locales as string[]).includes(browserLang) &&
+      browserLang !== currentLocale &&
+      shouldShowDetector()) {
+      setDetectedLocale(browserLang)
+      setShow(true)
+
+      // Use the automatic closing time from the configuration
+      const timer = setTimeout(() => {
+        console.log('[LanguageDetector] Auto closing after timeout')
+        setShow(false)
+        // Save the rejected state when the automatic closing occurs
+        savePreference(browserLang, 'rejected')
+      }, i18nConfig.detector.autoCloseTimeout)
+
+      return () => clearTimeout(timer)
+    }
+  }, [currentLocale])
+
+  // Save the language preference to localStorage
+  const savePreference = (locale: string, status: 'accepted' | 'rejected') => {
+    const preference: LanguagePreference = {
+      locale,
+      status,
+      timestamp: Date.now()
+    }
+    localStorage.setItem(LANGUAGE_PREFERENCE_KEY, JSON.stringify(preference))
+  }
+
+  const handleLanguageChange = () => {
+    if (detectedLocale) {
+      // Save the accepted state
+      savePreference(detectedLocale, 'accepted')
+
+      // Get the current path
+      const pathname = window.location.pathname
+      // Replace the language part
+      const newPathname = pathname.replace(`/${currentLocale}`, `/${detectedLocale}`)
+      // Redirect to the new path
+      router.push(newPathname)
+      setShow(false)
+    }
+  }
+
+  const handleClose = () => {
+    if (detectedLocale) {
+      // Save the rejected state
+      savePreference(detectedLocale, 'rejected')
+    }
+    setShow(false)
+  }
+
+  if (!detectedLocale || !show) return null
+
+  return (
+    <div className="fixed top-16 right-4 z-40 w-[420px]">
+      <div className={`shadow-lg rounded-lg transition-all duration-300 ${show ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'} 
+        bg-linear-to-r from-purple-100/95 via-white/95 to-purple-100/95 backdrop-blur-xs
+        animate-gradient-x`}>
+        <div className="relative px-6 py-4 overflow-hidden">
+          <div className="relative z-10 flex flex-col gap-3">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex flex-col gap-1.5">
+                <h3 className="text-lg font-semibold text-gray-900">
+                  {t('title')}
+                </h3>
+                <p className="text-base text-gray-600">
+                  {t('description')} <span className="text-purple-500 font-semibold">{detectedLocale === 'zh' ? '中文' : 'English'}</span>?
+                </p>
+              </div>
+              <button
+                onClick={handleClose}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                <icons.X className="h-5 w-5" />
+              </button>
+            </div>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={handleClose}
+                className="flex-1 px-4 py-2 text-base bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200"
+              >
+                {t('close')}
+              </button>
+              <button
+                onClick={handleLanguageChange}
+                className="flex-1 px-4 py-2 text-base bg-purple-500 text-white rounded-md hover:bg-purple-600"
+              >
+                {t('changeAction')}
+              </button>
+            </div>
+          </div>
+          <div className="absolute inset-0 bg-linear-to-r from-transparent via-purple-200/30 to-transparent animate-shimmer" />
+        </div>
+      </div>
+    </div>
+  )
+} 

package/src/main/price-plan-interactive.tsx

@@ -0,0 +1,273 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { cn } from '@lib/utils';
+
+// Import interfaces from the main component
+interface BillingOption {
+  key: string;
+  discount: number;
+}
+
+interface Prices {
+  [key: string]: number | string;
+}
+
+interface PricePlanAppConfig {
+  billingOptions: BillingOption[];
+  prices: Prices;
+  minPlanFeaturesCount: number;
+}
+
+interface PricePlanData {
+  title: string;
+  subtitle: string;
+  billingSwitch: {
+    options: Array<{
+      key: string;
+      name: string;
+      unit: string;
+      discountText: string;
+      subTitle?: string;
+    }>;
+    defaultKey: string;
+  };
+  plans: Array<any>;
+  currency: string;
+  pricePlanConfig: PricePlanAppConfig;
+}
+
+export function PricePlanInteractive({ data }: { data: PricePlanData }) {
+  const [billingKey, setBillingKey] = useState(data.billingSwitch.defaultKey);
+  const [tooltip, setTooltip] = useState<{
+    show: boolean;
+    content: string;
+    x: number;
+    y: number;
+  }>({ show: false, content: '', x: 0, y: 0 });
+  
+  const router = useRouter();
+
+  useEffect(() => {
+    // Progressive enhancement: Add billing switch functionality
+    const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLButtonElement;
+    const yearlyButton = document.querySelector('[data-billing-button="yearly"]') as HTMLButtonElement;
+    
+    const handleBillingSwitch = (newBillingKey: string) => {
+      setBillingKey(newBillingKey);
+      updatePrices(newBillingKey);
+      updateDiscountInfo(newBillingKey);
+      updateButtonStyles(newBillingKey);
+    };
+
+    if (monthlyButton) {
+      monthlyButton.addEventListener('click', () => handleBillingSwitch('monthly'));
+    }
+    if (yearlyButton) {
+      yearlyButton.addEventListener('click', () => handleBillingSwitch('yearly'));
+    }
+
+    // Add tooltip functionality
+    data.plans.forEach((plan: any) => {
+      plan.features?.forEach((feature: any, i: number) => {
+        if (feature?.tooltip) {
+          const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`) as HTMLElement;
+          if (tooltipTrigger) {
+            const handleMouseEnter = (e: MouseEvent) => {
+              setTooltip({
+                show: true,
+                content: feature.tooltip,
+                x: e.clientX,
+                y: e.clientY
+              });
+            };
+            
+            const handleMouseMove = (e: MouseEvent) => {
+              setTooltip(prev => ({ ...prev, x: e.clientX, y: e.clientY }));
+            };
+            
+            const handleMouseLeave = () => {
+              setTooltip(prev => ({ ...prev, show: false }));
+            };
+
+            tooltipTrigger.addEventListener('mouseenter', handleMouseEnter);
+            tooltipTrigger.addEventListener('mousemove', handleMouseMove);
+            tooltipTrigger.addEventListener('mouseleave', handleMouseLeave);
+          }
+        }
+      });
+    });
+
+    // Add plan button functionality
+    data.plans.forEach((plan: any) => {
+      const planButton = document.querySelector(`[data-plan-button="${plan.key}"]`) as HTMLButtonElement;
+      if (planButton && !plan.button?.disabled) {
+        planButton.addEventListener('click', () => {
+          router.push('/');
+        });
+      }
+    });
+
+    // Cleanup
+    return () => {
+      if (monthlyButton) {
+        const newButton = monthlyButton.cloneNode(true);
+        monthlyButton.parentNode?.replaceChild(newButton, monthlyButton);
+      }
+      if (yearlyButton) {
+        const newButton = yearlyButton.cloneNode(true);
+        yearlyButton.parentNode?.replaceChild(newButton, yearlyButton);
+      }
+      
+      // Cleanup tooltip events
+      data.plans.forEach((plan: any) => {
+        plan.features?.forEach((_feature: any, i: number) => {
+          const tooltipTrigger = document.querySelector(`[data-tooltip-trigger="${plan.key}-${i}"]`) as HTMLElement;
+          if (tooltipTrigger) {
+            const newTrigger = tooltipTrigger.cloneNode(true);
+            tooltipTrigger.parentNode?.replaceChild(newTrigger, tooltipTrigger);
+          }
+        });
+      });
+    };
+  }, [data, router]);
+
+  const updatePrices = (newBillingKey: string) => {
+    const currentBilling = data.pricePlanConfig.billingOptions.find((opt: any) => opt.key === newBillingKey) || data.pricePlanConfig.billingOptions[0];
+    const currentBillingDisplay = data.billingSwitch.options.find((opt: any) => opt.key === newBillingKey) || data.billingSwitch.options[0];
+
+    data.plans.forEach((plan: any) => {
+      const priceContainer = document.querySelector(`[data-price-container="${plan.key}"]`) as HTMLElement;
+      const priceValue = data.pricePlanConfig.prices[plan.key];
+      
+      if (priceContainer) {
+        // Update price display based on new billing
+        const priceValueElement = document.querySelector(`[data-price-value="${plan.key}"]`) as HTMLElement;
+        const priceUnitElement = document.querySelector(`[data-price-unit="${plan.key}"]`) as HTMLElement;
+        const priceOriginalElement = document.querySelector(`[data-price-original="${plan.key}"]`) as HTMLElement;
+        const priceDiscountElement = document.querySelector(`[data-price-discount="${plan.key}"]`) as HTMLElement;
+        const priceSubtitleElement = document.querySelector(`[data-price-subtitle="${plan.key}"]`) as HTMLElement;
+
+        if (typeof priceValue !== 'number' || isNaN(priceValue)) {
+          // Non-numeric price
+          if (priceValueElement) priceValueElement.textContent = String(priceValue);
+          if (priceSubtitleElement) priceSubtitleElement.textContent = plan.showBillingSubTitle === false ? '' : (currentBillingDisplay?.subTitle || '');
+        } else {
+          // Numeric price
+          const originValue = Number(priceValue);
+          const discount = currentBilling.discount;
+          const hasDiscount = discount !== 0;
+          const saleValue = originValue * (1 - discount);
+          const formatPrice = (v: number) => Number(v.toFixed(2)).toString();
+          const showNaN = saleValue < 0;
+
+          if (priceValueElement) {
+            priceValueElement.textContent = `${data.currency}${showNaN ? 'NaN' : (hasDiscount ? formatPrice(saleValue) : formatPrice(originValue))}`;
+          }
+          if (priceUnitElement) {
+            priceUnitElement.textContent = currentBillingDisplay.unit || '';
+          }
+
+          // Handle discount display
+          if (hasDiscount) {
+            if (priceOriginalElement) {
+              priceOriginalElement.textContent = `${data.currency}${showNaN ? 'NaN' : formatPrice(originValue)}`;
+              priceOriginalElement.style.display = 'inline';
+            }
+            if (priceDiscountElement && currentBillingDisplay.discountText) {
+              const discountText = currentBillingDisplay.discountText.replace('{percent}', String(Math.round(Math.abs(discount) * 100)));
+              priceDiscountElement.textContent = discountText;
+              priceDiscountElement.style.display = 'inline';
+            }
+          } else {
+            if (priceOriginalElement) priceOriginalElement.style.display = 'none';
+            if (priceDiscountElement) priceDiscountElement.style.display = 'none';
+          }
+
+          if (priceSubtitleElement) {
+            priceSubtitleElement.textContent = plan.showBillingSubTitle === false ? '' : (currentBillingDisplay?.subTitle || '');
+          }
+        }
+      }
+    });
+  };
+
+  const updateDiscountInfo = (newBillingKey: string) => {
+    const discountInfoElement = document.querySelector('[data-discount-info]') as HTMLElement;
+    if (discountInfoElement) {
+      const opt = data.billingSwitch.options.find((opt: any) => opt.key === newBillingKey);
+      const bOpt = data.pricePlanConfig.billingOptions.find((opt: any) => opt.key === newBillingKey);
+      
+      if (opt && bOpt && opt.discountText && bOpt.discount !== 0) {
+        const discountText = opt.discountText.replace('{percent}', String(Math.round(Math.abs(bOpt.discount) * 100)));
+        discountInfoElement.innerHTML = `
+          <span class="px-2 py-1 text-xs rounded bg-yellow-100 text-yellow-800 font-semibold align-middle text-center inline-flex items-center justify-center whitespace-nowrap">
+            ${discountText}
+          </span>
+        `;
+      } else {
+        discountInfoElement.innerHTML = '';
+      }
+    }
+  };
+
+  const updateButtonStyles = (newBillingKey: string) => {
+    const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLElement;
+    const yearlyButton = document.querySelector('[data-billing-button="yearly"]') as HTMLElement;
+
+    if (monthlyButton) {
+      if (newBillingKey === 'monthly') {
+        monthlyButton.className = cn(
+          'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
+          'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+        );
+      } else {
+        monthlyButton.className = cn(
+          'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
+          'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
+        );
+      }
+    }
+
+    if (yearlyButton) {
+      if (newBillingKey === 'yearly') {
+        yearlyButton.className = cn(
+          'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
+          'text-white bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 rounded-full shadow-sm'
+        );
+      } else {
+        yearlyButton.className = cn(
+          'min-w-[120px] px-6 py-2 font-medium transition text-lg relative',
+          'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full'
+        );
+      }
+    }
+  };
+
+  // Tooltip component
+  const Tooltip = ({ show, content, x, y }: typeof tooltip) => {
+    if (!show) return null;
+    const style: React.CSSProperties = {
+      position: 'fixed',
+      left: Math.max(8, x),
+      top: Math.max(8, y),
+      zIndex: 9999,
+      maxWidth: 200,
+      transform: 'translateY(-50%)',
+      pointerEvents: 'none',
+      whiteSpace: 'pre-line',
+    };
+    return (
+      <div 
+        style={style}
+        className="bg-gray-700 dark:bg-gray-200 text-gray-100 dark:text-gray-800 text-xs leading-relaxed px-3 py-2 rounded-lg shadow-lg border border-gray-300 dark:border-gray-600 backdrop-blur-sm"
+      >
+        {content}
+      </div>
+    );
+  };
+
+  return <Tooltip {...tooltip} />;
+}