boltdocs 2.7.10 → 2.8.0

package/src/client/components/ui-base/tabs.tsx

@@ -1,83 +0,0 @@
-import { useEffect } from 'react'
-import { useTabs as useTabsHook } from '../../hooks/use-tabs'
-import { Tabs as T } from '../primitives/tabs'
-import { Link } from '../primitives/link'
-import type { BoltdocsTab, ComponentRoute } from '../../types'
-import * as DefaultIcons from './icons'
-import virtualIcons from 'virtual:boltdocs-icons'
-import { getTranslated } from '../../utils/i18n'
-import { useRoutes } from '../../hooks/use-routes'
-
-export function Tabs({
-  tabs,
-  routes,
-}: {
-  tabs: BoltdocsTab[]
-  routes: ComponentRoute[]
-}) {
-  const { currentLocale } = useRoutes()
-  const { indicatorStyle, tabRefs, activeIndex } = useTabsHook(tabs, routes)
-
-  useEffect(() => {
-    const activeTab = tabRefs.current[activeIndex]
-    if (activeTab) {
-      activeTab.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'center',
-      })
-    }
-  }, [activeIndex])
-
-  const renderTabIcon = (iconName?: string) => {
-    if (!iconName) return null
-    if (iconName.trim().startsWith('<svg')) {
-      return (
-        <span
-          className="h-4 w-4"
-          dangerouslySetInnerHTML={{ __html: iconName }}
-        />
-      )
-    }
-    const icons = { ...DefaultIcons, ...virtualIcons } as Record<string, any>
-    const TabIcon = icons[iconName] || icons[iconName + 'Icon']
-    if (TabIcon) {
-      return <TabIcon size={16} />
-    }
-    return <img src={iconName} alt="" className="h-4 w-4 object-contain" />
-  }
-
-  return (
-    <div className="mx-auto max-w-(--breakpoint-3xl) px-4 md:px-6 select-none">
-      <T.List className="border-none py-0 scrollbar-hide relative flex flex-row items-center">
-        {tabs.map((tab, index) => {
-          const isActive = index === activeIndex
-          const firstRoute = routes.find(
-            (r) => r.tab && r.tab.toLowerCase() === tab.id.toLowerCase(),
-          )
-          const linkTo = firstRoute ? firstRoute.path : '#'
-
-          return (
-            <Link
-              key={tab.id}
-              href={linkTo}
-              ref={(el: HTMLAnchorElement | null) => {
-                tabRefs.current[index] = el
-              }}
-              className={`relative flex items-center gap-2 px-4 py-3.5 text-sm font-semibold transition-colors duration-300 outline-none whitespace-nowrap ${
-                isActive ? 'text-primary-500' : 'text-muted hover:text-body'
-              }`}
-            >
-              {renderTabIcon(tab.icon)}
-              <span>{getTranslated(tab.text, currentLocale)}</span>
-            </Link>
-          )
-        })}
-        <T.Indicator
-          style={indicatorStyle}
-          className="h-0.5 bg-primary-500 rounded-full transition-all duration-300"
-        />
-      </T.List>
-    </div>
-  )
-}

package/src/client/components/ui-base/theme-toggle.tsx

@@ -1,130 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Sun, Moon, Monitor } from './icons'
-import { useTheme } from '../../app/theme-context'
-import { Button } from 'react-aria-components'
-import { Menu } from '../primitives/menu'
-import { cn } from '../../utils/cn'
-
-export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return <div className="h-9 w-9" />
-  }
-
-  const Icon = theme === 'system' ? Monitor : theme === 'dark' ? Moon : Sun
-
-  return (
-    <Menu.Trigger placement="bottom right">
-      <Button
-        className="flex h-9 w-9 items-center justify-center rounded-xl text-muted transition-colors hover:bg-surface hover:text-body outline-none border-none bg-transparent cursor-pointer"
-        aria-label="Selection theme"
-      >
-        <Icon size={20} className="animate-in fade-in zoom-in duration-300" />
-      </Button>
-      <Menu.Root
-        selectionMode="single"
-        selectedKeys={[theme]}
-        onSelectionChange={(keys) => {
-          const newTheme = Array.from(keys)[0] as 'light' | 'dark' | 'system'
-          setTheme(newTheme)
-        }}
-        className="w-36 bg-main border border-subtle rounded-xl p-1.5 shadow-md outline-none flex flex-col gap-0.5 animate-fade-in z-100"
-      >
-        <Menu.Item
-          id="light"
-          className="group flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-body dark:hover:bg-primary-300/50 hover:bg-primary-200/50 transition-colors duration-100 cursor-pointer select-none outline-none group data-selected:text-primary-500 data-selected:bg-primary-500/5"
-        >
-          <Sun
-            className="group-hover:text-primary-500 dark:group-hover:text-primary-200"
-            size={16}
-          />
-          <span className="ml-2">Light</span>
-        </Menu.Item>
-        <Menu.Item
-          id="dark"
-          className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-body dark:hover:bg-primary-300/50 hover:bg-primary-200/50 transition-colors duration-100 cursor-pointer select-none outline-none group data-selected:text-primary-500 data-selected:bg-primary-500/5"
-        >
-          <Moon
-            className="group-hover:text-primary-500 dark:group-hover:text-primary-200"
-            size={16}
-          />
-          <span className="ml-2">Dark</span>
-        </Menu.Item>
-        <Menu.Item
-          id="system"
-          className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-body dark:hover:bg-primary-300/50 hover:bg-primary-200/50 transition-colors duration-100 cursor-pointer select-none outline-none group data-selected:text-primary-500 data-selected:bg-primary-500/5"
-        >
-          <Monitor
-            className="group-hover:text-primary-500 dark:group-hover:text-primary-200"
-            size={16}
-          />
-          <span className="ml-2">System</span>
-        </Menu.Item>
-      </Menu.Root>
-    </Menu.Trigger>
-  )
-}
-
-export function ThemeSwitcher({ className }: { className?: string }) {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return (
-      <div
-        className={cn(
-          'h-10 w-full bg-surface rounded-xl animate-pulse',
-          className,
-        )}
-      />
-    )
-  }
-
-  const isDark = theme === 'dark'
-
-  return (
-    <div
-      className={cn(
-        'flex p-1 bg-surface border border-subtle rounded-xl relative w-full h-11',
-        className,
-      )}
-    >
-      <div
-        className={cn(
-          'absolute inset-y-1 w-[calc(50%-4px)] bg-main border border-subtle rounded-lg transition-all duration-300 ease-out shadow-xs',
-          isDark ? 'translate-x-full' : 'translate-x-0',
-        )}
-      />
-      <button
-        onClick={() => setTheme('light')}
-        className={cn(
-          'flex-1 flex items-center justify-center rounded-lg z-10 transition-colors outline-none cursor-pointer border-none bg-transparent',
-          !isDark ? 'text-body font-semibold' : 'text-muted hover:text-body',
-        )}
-        aria-label="Light mode"
-      >
-        <Sun size={18} />
-      </button>
-      <button
-        onClick={() => setTheme('dark')}
-        className={cn(
-          'flex-1 flex items-center justify-center rounded-lg z-10 transition-colors outline-none cursor-pointer border-none bg-transparent',
-          isDark ? 'text-body font-semibold' : 'text-muted hover:text-body',
-        )}
-        aria-label="Dark mode"
-      >
-        <Moon size={18} />
-      </button>
-    </div>
-  )
-}

package/src/client/components/ui-base/version-i18n.tsx

@@ -1,80 +0,0 @@
-import { useVersion } from '../../hooks/use-version'
-import { useI18n } from '../../hooks/use-i18n'
-import { Menu } from '../primitives/menu'
-import { Button } from '../primitives/button'
-import { ChevronDown, Languages } from './icons'
-import { cn } from '../../utils/cn'
-
-export function VersionSelector({ className }: { className?: string }) {
-  const { currentVersionLabel, availableVersions, handleVersionChange } =
-    useVersion()
-
-  if (availableVersions.length === 0) return null
-
-  return (
-    <Menu.Trigger>
-      <Button
-        className={cn(
-          'flex h-9 items-center justify-between gap-2 border border-subtle bg-surface px-4 py-1.5 rounded-xl text-xs font-semibold text-body hover:bg-primary-50/20 hover:border-primary-500/50 transition-all duration-300 outline-none select-none cursor-pointer',
-          className,
-        )}
-      >
-        <span className="font-semibold text-[0.8125rem]">
-          {currentVersionLabel}
-        </span>
-        <ChevronDown className="w-3.5 h-3.5 text-muted/60" />
-      </Button>
-      <Menu.Root className="w-40 bg-main border border-subtle rounded-xl p-1.5 shadow-md outline-none flex flex-col gap-0.5 animate-fade-in z-100">
-        <Menu.Section items={availableVersions}>
-          {(version) => (
-            <Menu.Item
-              key={`${version.value ?? ''}`}
-              onPress={() => handleVersionChange(version.value)}
-              className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-body hover:bg-primary-50/50 cursor-pointer select-none outline-none group data-selected:text-primary-500 data-selected:bg-primary-500/5"
-            >
-              {version.label as string}
-            </Menu.Item>
-          )}
-        </Menu.Section>
-      </Menu.Root>
-    </Menu.Trigger>
-  )
-}
-
-export function I18nSelector({ className }: { className?: string }) {
-  const { currentLocale, availableLocales, handleLocaleChange } = useI18n()
-
-  if (availableLocales.length === 0) return null
-
-  return (
-    <Menu.Trigger>
-      <Button
-        className={cn(
-          'flex h-9 items-center justify-between gap-2 border border-subtle bg-surface px-4 py-1.5 rounded-xl text-xs font-semibold text-body hover:bg-primary-50/20 hover:border-primary-500/50 transition-all duration-300 outline-none select-none cursor-pointer',
-          className,
-        )}
-      >
-        <div className="flex items-center gap-1.5">
-          <Languages className="w-3.5 h-3.5 text-primary-500" />
-          <span className="font-bold text-[0.75rem] uppercase opacity-90">
-            {currentLocale || 'en'}
-          </span>
-        </div>
-        <ChevronDown className="w-3.5 h-3.5 text-muted/60" />
-      </Button>
-      <Menu.Root className="w-40 bg-main border border-subtle rounded-xl p-1.5 shadow-md outline-none flex flex-col gap-0.5 animate-fade-in z-100">
-        <Menu.Section items={availableLocales}>
-          {(locale) => (
-            <Menu.Item
-              key={`${locale.value ?? ''}`}
-              onPress={() => handleLocaleChange(locale.value)}
-              className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-medium text-body dark:hover:bg-primary-300/50 hover:bg-primary-200/50 transition-colors duration-100 cursor-pointer select-none outline-none group data-selected:text-primary-500 data-selected:bg-primary-500/5"
-            >
-              <span>{locale.label as string}</span>
-            </Menu.Item>
-          )}
-        </Menu.Section>
-      </Menu.Root>
-    </Menu.Trigger>
-  )
-}

package/src/client/hooks/index.ts

@@ -1,13 +0,0 @@
-export { useNavbar } from './use-navbar'
-export { useSidebar } from './use-sidebar'
-export { useSearch } from './use-search'
-export { useTabs } from './use-tabs'
-export { useVersion } from './use-version'
-export { useI18n } from './use-i18n'
-export { usePageNav } from './use-page-nav'
-export { useBreadcrumbs } from './use-breadcrumbs'
-export { useRoutes } from './use-routes'
-export { useLocalizedTo } from './use-localized-to'
-export { useLocation } from './use-location'
-export { useSearchHighlight } from './use-search-highlight'
-export { useAnalytics, useTrackPageView, useTrackEvent } from './use-analytics'

package/src/client/hooks/use-analytics.ts

@@ -1,272 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { useLocation } from './use-location'
-import type { BoltdocsIntegrationsConfig } from '../../shared/types'
-
-declare global {
-  interface Window {
-    gtag?: (...args: unknown[]) => void
-    dataLayer?: unknown[]
-    gtag_report_conversion?: (url?: string) => boolean
-  }
-}
-
-export interface AnalyticsEvent {
-  action: string
-  category?: string
-  label?: string
-  value?: number
-  params?: Record<string, unknown>
-}
-
-export interface AnalyticsInstance {
-  trackPageView: (path: string, title?: string) => void
-  trackEvent: (event: AnalyticsEvent) => void
-  trackSearch: (query: string, resultsCount?: number) => void
-  trackDownload: (file: string, type?: string) => void
-  trackExternalLink: (url: string) => void
-  isEnabled: boolean
-}
-
-function createAnalyticsInstance(
-  config?: BoltdocsIntegrationsConfig,
-): AnalyticsInstance {
-  if (typeof window === 'undefined') {
-    return createDisabledAnalytics()
-  }
-
-  const isGtagAvailable = typeof window.gtag === 'function'
-
-  if (isGtagAvailable) {
-    return createGtagAnalytics(config)
-  }
-
-  if (window.dataLayer) {
-    return createDataLayerAnalytics(config)
-  }
-
-  return createDisabledAnalytics()
-}
-
-function createGtagAnalytics(
-  config?: BoltdocsIntegrationsConfig,
-): AnalyticsInstance {
-  return {
-    trackPageView: (path: string, title?: string) => {
-      window.gtag?.('event', 'page_view', {
-        page_path: path,
-        page_title: title || document.title,
-        send_to: config?.ga4?.measurementId,
-      })
-    },
-    trackEvent: ({ action, category, label, value, params }) => {
-      window.gtag?.('event', action, {
-        event_category: category,
-        event_label: label,
-        value,
-        send_to: config?.ga4?.measurementId,
-        ...params,
-      })
-    },
-    trackSearch: (query: string, resultsCount?: number) => {
-      window.gtag?.('event', 'search', {
-        search_term: query,
-        results_count: resultsCount,
-        send_to: config?.ga4?.measurementId,
-      })
-    },
-    trackDownload: (file: string, type?: string) => {
-      window.gtag?.('event', 'file_download', {
-        file_name: file,
-        file_type: type || file.split('.').pop(),
-        send_to: config?.ga4?.measurementId,
-      })
-    },
-    trackExternalLink: (url: string) => {
-      window.gtag?.('event', 'external_link', {
-        link_url: url,
-        send_to: config?.ga4?.measurementId,
-      })
-    },
-    isEnabled: true,
-  }
-}
-
-function createDataLayerAnalytics(
-  config?: BoltdocsIntegrationsConfig,
-): AnalyticsInstance {
-  return {
-    trackPageView: (path: string, title?: string) => {
-      window.dataLayer?.push({
-        event: 'page_view',
-        page_path: path,
-        page_title: title || document.title,
-        send_to: config?.gtm?.tagId,
-      })
-    },
-    trackEvent: ({ action, category, label, value, params }) => {
-      window.dataLayer?.push({
-        event: action,
-        event_category: category,
-        event_label: label,
-        value,
-        send_to: config?.gtm?.tagId,
-        ...params,
-      })
-    },
-    trackSearch: (query: string, resultsCount?: number) => {
-      window.dataLayer?.push({
-        event: 'search',
-        search_term: query,
-        results_count: resultsCount,
-        send_to: config?.gtm?.tagId,
-      })
-    },
-    trackDownload: (file: string, type?: string) => {
-      window.dataLayer?.push({
-        event: 'file_download',
-        file_name: file,
-        file_type: type || file.split('.').pop(),
-        send_to: config?.gtm?.tagId,
-      })
-    },
-    trackExternalLink: (url: string) => {
-      window.dataLayer?.push({
-        event: 'external_link',
-        link_url: url,
-        send_to: config?.gtm?.tagId,
-      })
-    },
-    isEnabled: true,
-  }
-}
-
-function createDisabledAnalytics(): AnalyticsInstance {
-  return {
-    trackPageView: () => {},
-    trackEvent: () => {},
-    trackSearch: () => {},
-    trackDownload: () => {},
-    trackExternalLink: () => {},
-    isEnabled: false,
-  }
-}
-
-export interface UseAnalyticsOptions {
-  config?: BoltdocsIntegrationsConfig
-  autoTrackPageViews?: boolean
-  autoTrackDownloads?: boolean
-  autoTrackExternalLinks?: boolean
-  excludePatterns?: RegExp[]
-}
-
-const CONFIG_INSTANCE_SYMBOL = Symbol.for('__BDOCS_CONFIG_INSTANCE__')
-
-export function useAnalytics(options: UseAnalyticsOptions = {}) {
-  const {
-    config: optionsConfig,
-    autoTrackPageViews = true,
-    autoTrackDownloads = true,
-    autoTrackExternalLinks = true,
-    excludePatterns = [],
-  } = options
-
-  const globalConfig =
-    typeof globalThis !== 'undefined'
-      ? ((globalThis as any)[CONFIG_INSTANCE_SYMBOL] as
-          | { integrations?: BoltdocsIntegrationsConfig }
-          | undefined)
-      : undefined
-  const config = optionsConfig ?? globalConfig?.integrations
-
-  const analytics = useMemo(() => createAnalyticsInstance(config), [config])
-
-  const previousPath = useRef<string>('')
-  const location = useLocation()
-
-  useEffect(() => {
-    if (!autoTrackPageViews || !analytics.isEnabled) return
-
-    const path = location.pathname + location.search
-
-    if (path !== previousPath.current) {
-      previousPath.current = path
-      analytics.trackPageView(path, document.title)
-    }
-  }, [location.pathname, autoTrackPageViews, analytics])
-
-  useEffect(() => {
-    if (!autoTrackDownloads || !analytics.isEnabled) return
-
-    const handleClick = (event: MouseEvent) => {
-      const target = (event.target as Element)?.closest('a')
-      if (!target) return
-
-      const href = target.getAttribute('href')
-      if (!href) return
-
-      if (excludePatterns.some((pattern) => pattern.test(href))) return
-
-      const isDownload =
-        target.hasAttribute('download') ||
-        /\.(pdf|doc|docx|xls|xlsx|ppt|pptx|zip|rar|7z|tar|gz|mp3|mp4|avi|mov|png|jpg|jpeg|gif|svg|webp)$/i.test(
-          href,
-        )
-
-      if (isDownload) {
-        const fileName = href.split('/').pop() || href
-        analytics.trackDownload(fileName, fileName.split('.').pop())
-      }
-    }
-
-    document.addEventListener('click', handleClick)
-    return () => document.removeEventListener('click', handleClick)
-  }, [autoTrackDownloads, autoTrackExternalLinks, analytics, excludePatterns])
-
-  useEffect(() => {
-    if (!autoTrackExternalLinks || !analytics.isEnabled) return
-
-    const handleClick = (event: MouseEvent) => {
-      const target = (event.target as Element)?.closest('a')
-      if (!target) return
-
-      const href = target.getAttribute('href')
-      if (!href) return
-
-      if (excludePatterns.some((pattern) => pattern.test(href))) return
-
-      const isExternal =
-        href.startsWith('http://') ||
-        href.startsWith('https://') ||
-        href.startsWith('//')
-
-      if (isExternal && !href.includes(window.location.hostname)) {
-        analytics.trackExternalLink(href)
-      }
-    }
-
-    document.addEventListener('click', handleClick)
-    return () => document.removeEventListener('click', handleClick)
-  }, [autoTrackExternalLinks, analytics, excludePatterns])
-
-  return analytics
-}
-
-export function useTrackPageView() {
-  const analytics = useMemo(() => createAnalyticsInstance(), [])
-  return useCallback(
-    (path: string, title?: string) => {
-      analytics.trackPageView(path, title)
-    },
-    [analytics],
-  )
-}
-
-export function useTrackEvent() {
-  const analytics = useMemo(() => createAnalyticsInstance(), [])
-  return useCallback(
-    (event: AnalyticsEvent) => {
-      analytics.trackEvent(event)
-    },
-    [analytics],
-  )
-}

package/src/client/hooks/use-breadcrumbs.ts

@@ -1,22 +0,0 @@
-import { useRoutes } from './use-routes'
-
-/**
- * Hook to generate breadcrumbs based on the current active route.
- */
-export function useBreadcrumbs() {
-  const { currentRoute: activeRoute } = useRoutes()
-
-  const crumbs: Array<{ label: string; href?: string }> = []
-
-  if (activeRoute) {
-    if (activeRoute.groupTitle) {
-      crumbs.push({ label: activeRoute.groupTitle })
-    }
-    crumbs.push({ label: activeRoute.title, href: activeRoute.path })
-  }
-
-  return {
-    crumbs,
-    activeRoute,
-  }
-}