boltdocs 1.10.2 → 2.0.0

package/src/client/components/primitives/link.tsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import {
+  Link as RACLink,
+  type LinkProps as RACLinkProps,
+} from 'react-aria-components'
+import { useLocation } from 'react-router-dom'
+import { useLocalizedTo } from '@hooks/use-localized-to'
+import { usePreload } from '@client/app/preload'
+import { cn } from '@client/utils/cn'
+
+export interface LinkProps extends RACLinkProps {
+  /** Should prefetch the page on hover? Default 'hover' */
+  prefetch?: 'hover' | 'none'
+}
+
+/**
+ * A primitive Link component that wraps React Aria Components' Link
+ * and adds framework-specific logic for path localization and preloading.
+ *
+ * It uses the global navigation configuration from BoltdocsRouterProvider
+ * to handle seamless client-side transitions.
+ */
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    const { href, prefetch = 'hover', onMouseEnter, onFocus, ...rest } = props
+
+    const localizedHref = useLocalizedTo(href ?? '')
+    const { preload } = usePreload()
+
+    const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      onMouseEnter?.(e)
+      if (
+        prefetch === 'hover' &&
+        typeof localizedHref === 'string' &&
+        localizedHref.startsWith('/')
+      ) {
+        preload(localizedHref)
+      }
+    }
+
+    const handleFocus = (e: React.FocusEvent) => {
+      onFocus?.(e as any)
+      if (
+        prefetch === 'hover' &&
+        typeof localizedHref === 'string' &&
+        localizedHref.startsWith('/')
+      ) {
+        preload(localizedHref)
+      }
+    }
+
+    return (
+      <RACLink
+        {...rest}
+        ref={ref}
+        href={localizedHref as string}
+        onMouseEnter={handleMouseEnter}
+        onFocus={handleFocus as any}
+      />
+    )
+  },
+)
+Link.displayName = 'Link'
+
+/**
+ * Props for the NavLink component, extending standard Link props.
+ */
+export interface NavLinkProps
+  extends Omit<LinkProps, 'className' | 'children'> {
+  /**
+   * When true, the active state will only be applied if the paths match exactly.
+   * Default is false.
+   */
+  end?: boolean
+  /**
+   * Provides access to the active state for conditional children rendering.
+   */
+  children?:
+    | React.ReactNode
+    | ((props: { isActive: boolean }) => React.ReactNode)
+  /**
+   * Provides access to the active state for conditional styling.
+   */
+  className?: string | ((props: { isActive: boolean }) => string)
+}
+
+/**
+ * A primitive NavLink component that provides active state detection.
+ *
+ * It combines the Link primitive with path matching logic to determine
+ * if the link is currently active based on the browser's location.
+ */
+export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
+  (props, ref) => {
+    const { href, end = false, className, children, ...rest } = props
+    const location = useLocation()
+    const localizedHref = useLocalizedTo(href ?? '')
+
+    const isActive = end
+      ? location.pathname === localizedHref
+      : location.pathname.startsWith(localizedHref as string)
+
+    const resolvedClassName =
+      typeof className === 'function'
+        ? className({ isActive })
+        : cn(className, isActive && 'active')
+    const resolvedChildren =
+      typeof children === 'function' ? children({ isActive }) : children
+
+    return (
+      <Link
+        {...rest}
+        ref={ref}
+        href={href}
+        className={resolvedClassName as any}
+      >
+        {resolvedChildren as any}
+      </Link>
+    )
+  },
+)
+NavLink.displayName = 'NavLink'

package/src/client/components/primitives/menu.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import { Check, ChevronRight, Dot } from 'lucide-react'
+import React from 'react'
+import * as RAC from 'react-aria-components'
+import { Popover, type PopoverProps } from './popover'
+import { cn } from '@client/utils/cn'
+
+/**
+ * MenuTrigger wraps a trigger (usually a Button) and a Menu.
+ */
+export interface MenuTriggerProps extends RAC.MenuTriggerProps {
+  placement?: PopoverProps['placement']
+}
+
+export function MenuTrigger(props: MenuTriggerProps) {
+  const [trigger, menu] = (
+    React.Children.toArray(props.children) as React.ReactElement[]
+  ).slice(0, 2)
+  return (
+    <RAC.MenuTrigger {...props}>
+      {trigger as any}
+      <Popover placement={props.placement} className="min-w-[200px]">
+        {menu as any}
+      </Popover>
+    </RAC.MenuTrigger>
+  )
+}
+
+/**
+ * SubmenuTrigger for nested menus.
+ */
+export function SubmenuTrigger(props: RAC.SubmenuTriggerProps) {
+  const [trigger, menu] = (
+    React.Children.toArray(props.children) as React.ReactElement[]
+  ).slice(0, 2)
+  return (
+    <RAC.SubmenuTrigger {...props}>
+      {trigger as any}
+      <Popover offset={-4} crossOffset={-4}>
+        {menu as any}
+      </Popover>
+    </RAC.SubmenuTrigger>
+  )
+}
+
+/**
+ * The Menu container.
+ */
+export function Menu<T extends object>(props: RAC.MenuProps<T>) {
+  return (
+    <RAC.Menu
+      {...props}
+      className={RAC.composeRenderProps(props.className, (className) =>
+        cn('p-1.5 outline-none max-h-[inherit] overflow-auto', className),
+      )}
+    />
+  )
+}
+
+/**
+ * MenuItem with support for selection states and submenus.
+ */
+export function MenuItem(props: RAC.MenuItemProps) {
+  const textValue =
+    props.textValue ||
+    (typeof props.children === 'string' ? props.children : undefined)
+
+  return (
+    <RAC.MenuItem
+      {...props}
+      textValue={textValue}
+      className={RAC.composeRenderProps(
+        props.className,
+        (className, { isFocused, isPressed, isDisabled }) =>
+          cn(
+            'group relative flex flex-row items-center gap-2.5 px-3 py-1.5 rounded-lg outline-none cursor-default transition-all duration-200',
+            'text-text-main text-[0.8125rem]',
+            isFocused && 'bg-primary-500/10 text-primary-600 shadow-sm',
+            isPressed && 'scale-[0.98] bg-primary-500/15',
+            isDisabled && 'opacity-40 grayscale pointer-events-none',
+            className,
+          ),
+      )}
+    >
+      {RAC.composeRenderProps(
+        props.children,
+        (children, { selectionMode, isSelected, hasSubmenu }) => (
+          <>
+            {selectionMode !== 'none' && (
+              <span className="flex items-center w-4 h-4 shrink-0 justify-center">
+                {isSelected && selectionMode === 'multiple' && (
+                  <Check className="w-3.5 h-3.5 stroke-[2.5px] text-primary-500 animate-in zoom-in-50 duration-200" />
+                )}
+                {isSelected && selectionMode === 'single' && (
+                  <Dot className="w-6 h-6 text-primary-500 animate-in zoom-in-50 duration-200" />
+                )}
+              </span>
+            )}
+            <div className="flex-1 flex flex-row items-center gap-2.5 truncate font-medium">
+              {children}
+            </div>
+            {hasSubmenu && (
+              <ChevronRight className="w-4 h-4 ml-auto text-text-muted group-focused:text-primary-500/70 transition-colors" />
+            )}
+          </>
+        ),
+      )}
+    </RAC.MenuItem>
+  )
+}
+
+/**
+ * MenuSection for grouping items with an optional header.
+ */
+export interface MenuSectionProps<T> extends RAC.MenuSectionProps<T> {
+  title?: string
+}
+
+export function MenuSection<T extends object>({
+  title,
+  ...props
+}: MenuSectionProps<T>) {
+  return (
+    <RAC.MenuSection
+      {...props}
+      className={cn('flex flex-col gap-0.5', props.className)}
+    >
+      {title && (
+        <RAC.Header className="px-3 py-2 text-[10px] font-bold uppercase tracking-[0.075em] text-text-muted/50 select-none">
+          {title}
+        </RAC.Header>
+      )}
+      <RAC.Collection items={props.items}>{props.children}</RAC.Collection>
+    </RAC.MenuSection>
+  )
+}
+
+/**
+ * MenuSeparator for visual division.
+ */
+export function MenuSeparator(props: RAC.SeparatorProps) {
+  return (
+    <RAC.Separator
+      {...props}
+      className="mx-2 my-1.5 border-t border-border-subtle/50"
+    />
+  )
+}
+
+// Default export for convenience
+export default {
+  Root: Menu,
+  Item: MenuItem,
+  Trigger: MenuTrigger,
+  SubTrigger: SubmenuTrigger,
+  Section: MenuSection,
+  Separator: MenuSeparator,
+}

package/src/client/components/primitives/navbar.tsx

@@ -0,0 +1,359 @@
+import { type ReactNode, useState, useEffect } from 'react'
+import {
+  Button,
+  Separator,
+  ToggleButton,
+  Link,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  cn,
+} from './index'
+import { Button as ButtonRAC } from 'react-aria-components'
+import { Search, Sun, Moon, ExternalLink, ChevronDown } from 'lucide-react'
+import * as IconsSocials from '@components/icons-dev'
+import type { ComponentBase } from './types'
+import type { BoltdocsSocialLink } from '@node/config'
+
+export interface NavbarLinkProps extends Omit<ComponentBase, 'children'> {
+  label: ReactNode
+  href: string
+  active?: boolean
+  to?: 'internal' | 'external'
+}
+
+export interface NavbarLogoProps extends Omit<ComponentBase, 'children'> {
+  src: string
+  alt: string
+  width?: number
+  height?: number
+}
+
+export interface NavbarSearchTriggerProps extends ComponentBase {
+  onPress: () => void
+}
+
+export interface NavbarThemeProps {
+  className?: string
+  theme: 'dark' | 'light'
+  onThemeChange: (isSelected: boolean) => void
+}
+
+export interface NavbarMenuProps extends ComponentBase {
+  label: ReactNode
+  icon?: ReactNode
+}
+
+export interface NavbarVersionProps extends ComponentBase {
+  current: string
+}
+
+export interface NavbarItemProps extends Omit<ComponentBase, 'children'> {
+  label: string
+  onPress?: () => void
+  isCurrent?: boolean
+}
+
+export interface NavbarSocialsProps extends ComponentBase {
+  icon: string
+  link: string
+}
+
+export const NavbarRoot = ({
+  children,
+  className,
+  ...props
+}: ComponentBase) => {
+  return (
+    <header
+      className={cn(
+        'boltdocs-navbar sticky top-0 z-50 w-full border-b border-border-subtle bg-bg-main/80 backdrop-blur-md',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </header>
+  )
+}
+
+export const NavbarContent = ({ children, className }: ComponentBase) => {
+  return (
+    <div
+      className={cn(
+        'mx-auto flex lg:h-navbar max-w-(--breakpoint-3xl) items-center justify-between px-4 md:px-6',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const NavbarLeft = ({ children, className }: ComponentBase) => {
+  return (
+    <div className={cn('flex items-center gap-4', className)}>{children}</div>
+  )
+}
+
+export const NavbarRight = ({ children, className }: ComponentBase) => {
+  return (
+    <div className={cn('flex items-center gap-2 md:gap-4', className)}>
+      {children}
+    </div>
+  )
+}
+
+export const NavbarCenter = ({ children, className }: ComponentBase) => {
+  return (
+    <div
+      className={cn(
+        'hidden lg:flex flex-1 justify-center items-center gap-4 px-4',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const NavbarLogo = ({
+  src,
+  alt,
+  width = 24,
+  height = 24,
+  className,
+}: NavbarLogoProps) => {
+  return (
+    <Link
+      href="/"
+      className={cn('flex items-center gap-2 shrink-0 outline-none', className)}
+    >
+      {src ? (
+        <img
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          className="h-6 w-6 object-contain"
+        />
+      ) : null}
+    </Link>
+  )
+}
+
+export const NavbarTitle = ({ children, className }: ComponentBase) => {
+  return (
+    <span
+      className={cn(
+        'text-lg font-bold tracking-tight hidden sm:inline-block',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export const NavbarLinks = ({ children, className }: ComponentBase) => {
+  return (
+    <nav
+      className={cn(
+        'hidden md:flex items-center gap-6 text-sm font-medium',
+        className,
+      )}
+    >
+      {children}
+    </nav>
+  )
+}
+
+export const NavbarLink = ({
+  label,
+  href,
+  active,
+  to,
+  className,
+}: NavbarLinkProps) => {
+  return (
+    <Link
+      href={href}
+      target={to === 'external' ? '_blank' : undefined}
+      className={cn(
+        'transition-colors outline-none hover:text-text-main focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
+        active ? 'text-primary-500' : 'text-text-muted',
+        className,
+      )}
+    >
+      {label as any}
+      {to === 'external' && (
+        <span className="ml-1 inline-block">
+          <ExternalLink size={12} />
+        </span>
+      )}
+    </Link>
+  )
+}
+
+export const NavbarSearchTrigger = ({
+  className,
+  onPress,
+}: NavbarSearchTriggerProps) => {
+  const [mounted, setMounted] = useState(false)
+  const isMac = mounted && /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <ButtonRAC
+      onPress={onPress}
+      className={cn(
+        'flex items-center gap-2 rounded-full border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-muted outline-none cursor-pointer',
+        'transition-colors hover:border-border-strong hover:text-text-main',
+        'focus-visible:ring-2 focus-visible:ring-primary-500/30',
+        'w-full max-w-[320px] justify-between',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <Search size={16} />
+        <span className="hidden sm:inline-block">Search docs...</span>
+      </div>
+      <div className="hidden sm:flex items-center gap-1 pointer-events-none select-none">
+        <kbd className="flex h-5 items-center justify-center rounded border border-border-subtle bg-bg-main px-1.5 font-mono text-[10px] font-medium">
+          {isMac ? '⌘' : 'Ctrl'}
+        </kbd>
+        <kbd className="flex h-5 w-5 items-center justify-center rounded border border-border-subtle bg-bg-main font-mono text-[10px] font-medium">
+          K
+        </kbd>
+      </div>
+    </ButtonRAC>
+  )
+}
+
+export const NavbarTheme = ({
+  className,
+  theme,
+  onThemeChange,
+}: NavbarThemeProps) => {
+  return (
+    <ToggleButton
+      isSelected={theme === 'dark'}
+      onChange={onThemeChange}
+      className={cn(
+        'rounded-md p-2 text-text-muted outline-none cursor-pointer transition-colors',
+        'hover:bg-bg-surface hover:text-text-main',
+        'focus-visible:ring-2 focus-visible:ring-primary-500/30',
+        className,
+      )}
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
+    </ToggleButton>
+  )
+}
+
+export const NavbarMenu = ({
+  label,
+  children,
+  className,
+  icon,
+}: NavbarMenuProps) => {
+  return (
+    <MenuTrigger placement="bottom end">
+      <Button
+        variant="ghost"
+        className={cn(
+          'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-text-muted outline-none cursor-pointer transition-colors',
+          'hover:bg-bg-surface hover:text-text-main',
+          'focus-visible:ring-2 focus-visible:ring-primary-500/30',
+          className,
+        )}
+      >
+        {icon && <span className="flex items-center shrink-0">{icon}</span>}
+        <span className="text-[13px] font-bold uppercase tracking-wide">
+          {label}
+        </span>
+        <ChevronDown size={14} className="ml-0.5 opacity-50" />
+      </Button>
+      <Menu className="min-w-[180px]">{children as any}</Menu>
+    </MenuTrigger>
+  )
+}
+
+export const NavbarItem = ({
+  label,
+  className,
+  onPress,
+  isCurrent,
+}: NavbarItemProps) => {
+  return (
+    <MenuItem
+      onAction={onPress}
+      className={cn(
+        isCurrent &&
+          'bg-primary-500 text-white font-medium hover:bg-primary-600 focus:bg-primary-600 focus:text-white',
+        className,
+      )}
+    >
+      {label}
+    </MenuItem>
+  )
+}
+
+export const Icon = ({ name }: { name: BoltdocsSocialLink['icon'] }) => {
+  if (name === 'github') return <IconsSocials.Github />
+  if (name === 'discord') return <IconsSocials.Discord />
+  if (name === 'x') return <IconsSocials.XSocial />
+  if (name === 'bluesky') return <IconsSocials.Bluesky />
+}
+
+export const NavbarSocials = ({
+  icon,
+  link,
+  className,
+}: NavbarSocialsProps) => {
+  return (
+    <Link
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        'rounded-md p-2 text-text-muted outline-none transition-colors',
+        'hover:bg-bg-surface hover:text-text-main',
+        'focus-visible:ring-2 focus-visible:ring-primary-500/30',
+        className,
+      )}
+    >
+      <Icon name={icon} />
+    </Link>
+  )
+}
+
+export const NavbarSplit = ({ className }: ComponentBase) => {
+  return (
+    <Separator
+      orientation="vertical"
+      className={cn('h-6 w-px bg-border-subtle mx-1', className)}
+    />
+  )
+}
+
+export default {
+  NavbarRoot,
+  NavbarLeft,
+  NavbarRight,
+  NavbarCenter,
+  NavbarLogo,
+  Title: NavbarTitle,
+  Links: NavbarLinks,
+  Link: NavbarLink,
+  SearchTrigger: NavbarSearchTrigger,
+  Theme: NavbarTheme,
+  Item: NavbarItem,
+  Socials: NavbarSocials,
+  Split: NavbarSplit,
+  Content: NavbarContent,
+}