boltdocs 2.6.2 → 2.7.0

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

@@ -1,169 +1,92 @@
-import { useState, useEffect, useMemo } from 'react'
-import { useSidebar } from '../../hooks/use-sidebar'
 import { Sidebar as SidebarPrimitive } from '../primitives/sidebar'
-import { PoweredBy } from './powered-by'
 import * as LucideIcons from 'lucide-react'
-import virtualIcons from 'virtual:boltdocs-icons'
 import type { ComponentRoute } from '../../types'
 import type { BoltdocsConfig } from '../../../shared/types'
+import { VersionSelector, I18nSelector } from './version-i18n'
+import { ThemeSwitcher } from './theme-toggle'
+import { useNavbar } from '../../hooks/use-navbar'
+import { useUI } from '../../app/ui-context'
+import { Button } from '../primitives/button'
 
-function getIcon(iconName?: string): React.ElementType | undefined {
-  if (!iconName) return undefined
-  const icons = { ...LucideIcons, ...virtualIcons } as unknown as Record<
-    string,
-    React.ElementType
-  >
-  const IconComponent = icons[iconName] || icons[iconName + 'Icon']
-  return IconComponent || undefined
+interface SidebarProps {
+  routes: ComponentRoute[]
+  config: BoltdocsConfig
 }
 
-function SidebarSubRouteGroup({
-  route,
-  activePath,
-  getIcon,
-}: {
-  route: ComponentRoute
-  activePath: string
-  getIcon: (iconName?: string) => React.ElementType | undefined
-}) {
-  const isCurrent =
-    activePath ===
-    (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
-
-  const hasActiveSubRoute = useMemo(
-    () => route.subRoutes?.some((r) => r.path === activePath),
-    [route.subRoutes, activePath],
-  )
-
-  const [isOpen, setIsOpen] = useState(hasActiveSubRoute || isCurrent)
+function SidebarMain({ routes, config }: SidebarProps) {
+  const { logo, title, logoProps } = useNavbar()
+  const { closeSidebar } = useUI()
 
-  useEffect(() => {
-    if (hasActiveSubRoute || isCurrent) {
-      setIsOpen(true)
-    }
-  }, [hasActiveSubRoute, isCurrent])
+  const SidebarLogo = logo ? (
+    <img
+      src={logo}
+      alt={logoProps?.alt || title}
+      width={24}
+      height={24}
+      className="rounded-xl"
+    />
+  ) : null
 
-  return (
-    <SidebarPrimitive.SubGroup
-      label={route.title}
-      href={route.path}
-      active={isCurrent}
-      icon={getIcon(route.icon)}
-      badge={route.badge}
-      isOpen={isOpen}
-      onToggle={() => setIsOpen(!isOpen)}
-    >
-      {route.subRoutes?.map((subRoute: ComponentRoute) => {
-        const isSubCurrent =
-          activePath ===
-          (subRoute.path.endsWith('/') ? subRoute.path.slice(0, -1) : subRoute.path)
-        return (
-          <SidebarPrimitive.Link
-            key={subRoute.path}
-            label={subRoute.title}
-            href={subRoute.path}
-            active={isSubCurrent}
-            icon={getIcon(subRoute.icon)}
-            badge={subRoute.badge}
-          />
-        )
-      })}
-    </SidebarPrimitive.SubGroup>
-  )
-}
+  const hasUtilities = config.versions || config.i18n
 
-function SidebarGroupSection({
-  group,
-  activePath,
-  getIcon,
-}: {
-  group: {
-    slug: string
-    title: string
-    routes: ComponentRoute[]
-    icon?: string
-  }
-  activePath: string
-  getIcon: (iconName?: string) => React.ElementType | undefined
-}) {
   return (
-    <SidebarPrimitive.Group title={group.title} icon={getIcon(group.icon)}>
-      {group.routes.map((route: ComponentRoute) => {
-        if (route.subRoutes && route.subRoutes.length > 0) {
-          return (
-            <SidebarSubRouteGroup
-              key={route.path}
-              route={route}
-              activePath={activePath}
-              getIcon={getIcon}
-            />
-          )
-        }
+    <>
+      {/* Desktop Version */}
+      <SidebarPrimitive.Root>
+        <SidebarPrimitive.Content>
+          <SidebarPrimitive.Items routes={routes} />
+        </SidebarPrimitive.Content>
+      </SidebarPrimitive.Root>
 
-        const isCurrent =
-          activePath ===
-          (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
-        return (
-          <SidebarPrimitive.Link
-            key={route.path}
-            label={route.title}
-            href={route.path}
-            active={isCurrent}
-            icon={getIcon(route.icon)}
-            badge={route.badge}
-          />
-        )
-      })}
-    </SidebarPrimitive.Group>
+      {/* Mobile Version */}
+      <SidebarPrimitive.Mobile>
+        <SidebarPrimitive.Header>
+          <div className="flex items-center gap-3">
+            {SidebarLogo}
+            <span className="font-bold text-lg tracking-tight text-body truncate max-w-[120px]">
+              {title}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <ThemeSwitcher className="w-24 h-9 rounded-xl" />
+            <Button
+              onPress={closeSidebar}
+              className="h-9 w-9 flex items-center justify-center bg-transparent border-none outline-none select-none cursor-pointer rounded-xl hover:bg-primary-50/50 text-muted hover:text-body transition-colors"
+              aria-label="Close sidebar"
+            >
+              <LucideIcons.X size={20} />
+            </Button>
+          </div>
+        </SidebarPrimitive.Header>
+        <SidebarPrimitive.Content>
+          {hasUtilities && (
+            <div className="flex flex-col gap-4 mb-10">
+              <div className="flex gap-3">
+                {config.versions && (
+                  <VersionSelector className="flex-1 justify-between h-10 bg-surface border-subtle rounded-xl" />
+                )}
+                {config.i18n && (
+                  <I18nSelector className="flex-1 justify-between h-10 bg-surface border-subtle rounded-xl" />
+                )}
+              </div>
+              <div className="mt-2 border-b border-subtle" />
+            </div>
+          )}
+          <SidebarPrimitive.Items routes={routes} />
+        </SidebarPrimitive.Content>
+      </SidebarPrimitive.Mobile>
+    </>
   )
 }
 
-export function Sidebar({
-  routes,
-  config,
-}: {
-  routes: ComponentRoute[]
-  config: BoltdocsConfig
-}) {
-  const { groups, ungrouped, activePath } = useSidebar(routes)
-  const themeConfig = config.theme || {}
-
-  return (
-    <SidebarPrimitive.Root>
-      {ungrouped.length > 0 && (
-        <SidebarPrimitive.Group className="mb-6">
-          {ungrouped.map((route) => {
-            const isCurrent =
-              activePath ===
-              (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
-            return (
-              <SidebarPrimitive.Link
-                key={route.path}
-                label={route.title}
-                href={route.path}
-                active={isCurrent}
-                icon={getIcon(route.icon)}
-                badge={route.badge}
-              />
-            )
-          })}
-        </SidebarPrimitive.Group>
-      )}
-
-      {groups.map((group) => (
-        <SidebarGroupSection
-          key={group.slug}
-          group={group}
-          activePath={activePath}
-          getIcon={getIcon}
-        />
-      ))}
-
-      {themeConfig?.poweredBy && (
-        <div className="mt-auto pt-8">
-          <PoweredBy />
-        </div>
-      )}
-    </SidebarPrimitive.Root>
-  )
-}
+export const Sidebar = Object.assign(SidebarMain, {
+  Root: SidebarPrimitive.Root,
+  Mobile: SidebarPrimitive.Mobile,
+  Header: SidebarPrimitive.Header,
+  Content: SidebarPrimitive.Content,
+  Group: SidebarPrimitive.Group,
+  Link: SidebarPrimitive.Link,
+  SubGroup: SidebarPrimitive.SubGroup,
+  Item: SidebarPrimitive.Item,
+  Items: SidebarPrimitive.Items,
+})

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

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useTabs as useTabsHook } from '../../hooks/use-tabs'
 import { Tabs as T } from '../primitives/tabs'
 import { Link } from '../primitives/link'
@@ -16,6 +17,17 @@ export function Tabs({
   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')) {
@@ -34,8 +46,8 @@ export function Tabs({
   }
 
   return (
-    <div className="mx-auto max-w-(--breakpoint-3xl) px-4 md:px-6">
-      <T.List className="border-none py-0">
+    <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(
@@ -50,10 +62,8 @@ export function Tabs({
               ref={(el: HTMLAnchorElement | null) => {
                 tabRefs.current[index] = el
               }}
-              className={`relative flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors outline-none ${
-                isActive
-                  ? 'text-primary-500'
-                  : 'text-text-muted hover:text-text-main'
+              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)}
@@ -61,7 +71,10 @@ export function Tabs({
             </Link>
           )
         })}
-        <T.Indicator style={indicatorStyle} />
+        <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

@@ -3,6 +3,7 @@ import { Sun, Moon, Monitor } from 'lucide-react'
 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()
@@ -21,7 +22,7 @@ export function ThemeToggle() {
   return (
     <Menu.Trigger placement="bottom right">
       <Button
-        className="flex h-9 w-9 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-bg-surface hover:text-text-main outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+        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" />
@@ -33,20 +34,97 @@ export function ThemeToggle() {
           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">
-          <Sun size={16} />
-          <span>Light</span>
+        <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">
-          <Moon size={16} />
-          <span>Dark</span>
+        <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">
-          <Monitor size={16} />
-          <span>System</span>
+        <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

@@ -0,0 +1,80 @@
+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 'lucide-react'
+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,7 +1,6 @@
 export { useNavbar } from './use-navbar'
 export { useSidebar } from './use-sidebar'
 export { useSearch } from './use-search'
-export { useOnThisPage } from './use-onthispage'
 export { useTabs } from './use-tabs'
 export { useVersion } from './use-version'
 export { useI18n } from './use-i18n'
@@ -10,3 +9,5 @@ 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'