npm - @exxatdesignux/ui - Versions diffs - 0.5.10 → 0.5.12 - Mend

@exxatdesignux/ui 0.5.10 → 0.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (478) hide show

package/template-vite/index.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en" class="theme-one">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Exxat Design System</title>
+    <meta
+      name="description"
+      content="Shared UI component library for Exxat One and Exxat Prism — built to WCAG 2.1 Level AA."
+    />
+    <meta name="theme-color" content="#f6f3ff" />
+    <!--
+      Adobe Fonts — Ivy Presto · Kit ID: wuk5wqn.
+      crossorigin="" pairs the preconnect/preload/fetch as one CORS-correct
+      connection so the stylesheet cannot read first-party cookies.
+    -->
+    <link rel="preconnect" href="https://use.typekit.net" crossorigin="" />
+    <link rel="preconnect" href="https://p.typekit.net" crossorigin="" />
+    <link
+      rel="preload"
+      href="https://use.typekit.net/wuk5wqn.css"
+      as="style"
+      crossorigin=""
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.typekit.net/wuk5wqn.css"
+      crossorigin=""
+    />
+    <!--
+      Font Awesome Pro Kit. CSP/origins documented in the Vite config /
+      consumer hosting setup; the kit URL is content-versioned so SRI is
+      not applied — origin pinning + crossorigin="anonymous" is the
+      trust model.
+    -->
+    <script
+      src="https://kit.fontawesome.com/d9bd5774e0.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body class="bg-sidebar text-foreground font-sans">
+    <a href="#main-content" class="skip-to-content">Skip to main content</a>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template-vite/lib/next-compat.tsx ADDED Viewed

@@ -0,0 +1,98 @@
+import * as React from "react"
+import {
+  useNavigate,
+  useLocation,
+  useSearchParams as useRouterSearchParams,
+  Link as RouterLink,
+  type LinkProps as RouterLinkProps,
+} from "react-router-dom"
+/**
+ * `next/*` → `react-router-dom` shim
+ * ----------------------------------
+ *
+ * The template-vite stack uses react-router-dom for navigation, but the
+ * porteable DS components keep Next-style import shapes so the codebase
+ * stays one source of truth for components shared with `apps/web`
+ * (which today still runs Next).
+ *
+ * Replace `import Link from "next/link"` with
+ * `import { Link } from "@/lib/next-compat"`, and
+ * `import { useRouter, ... } from "next/navigation"` with
+ * `import { useRouter, ... } from "@/lib/next-compat"`.
+ *
+ * When `apps/web` finishes migrating to Vite (PR-3 → PR-6) and the Next
+ * stack is removed entirely (PR-7), this shim is deleted and call sites
+ * import directly from `react-router-dom`.
+ */
+// ---------------------------------------------------------------------------
+// next/link
+// ---------------------------------------------------------------------------
+export type LinkProps = Omit<RouterLinkProps, "to"> & {
+  href: string
+  /** next/link prefetch — RR doesn't prefetch routes; no-op. */
+  prefetch?: boolean
+  /** next/link scroll — RR scrolls by default; no-op flag. */
+  scroll?: boolean
+}
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  function Link({ href, prefetch: _prefetch, scroll: _scroll, ...rest }, ref) {
+    return <RouterLink ref={ref} to={href} {...rest} />
+  },
+)
+// ---------------------------------------------------------------------------
+// next/navigation
+// ---------------------------------------------------------------------------
+/**
+ * Next-shape `useRouter`. The template only uses `push`, `replace`, `back`,
+ * `forward`, `refresh`, and `prefetch` from the Next router — we map each
+ * to the matching `useNavigate` / window primitives. `prefetch` is a no-op
+ * because RR doesn't ship a route-prefetch primitive.
+ */
+export function useRouter() {
+  const navigate = useNavigate()
+  return React.useMemo(
+    () => ({
+      push: (href: string) => navigate(href),
+      replace: (href: string) => navigate(href, { replace: true }),
+      back: () => navigate(-1),
+      forward: () => navigate(1),
+      refresh: () => window.location.reload(),
+      prefetch: (_href: string) => undefined,
+    }),
+    [navigate],
+  )
+}
+export function usePathname(): string {
+  return useLocation().pathname
+}
+/**
+ * Next's `useSearchParams` returns `ReadonlyURLSearchParams`. RR's tuple
+ * returns `[URLSearchParams, setSearchParams]`. We expose just the
+ * params object — call sites that need to write delegate to `useRouter().push`.
+ */
+export function useSearchParams(): URLSearchParams {
+  const [params] = useRouterSearchParams()
+  return params
+}
+/**
+ * Next's `redirect()` works in server components / actions — there's no
+ * SPA equivalent. Where Next code did `redirect("/x")`, the Vite port
+ * uses `<Navigate to="/x" replace />` JSX. This helper exists only so
+ * any straggler imports compile; it throws so call sites are surfaced.
+ */
+export function redirect(href: string): never {
+  throw new Error(
+    `redirect("${href}") is server-only and unavailable in the Vite shim. ` +
+      `Use <Navigate to="${href}" replace /> from react-router-dom in JSX, ` +
+      `or useNavigate() inside a useEffect.`,
+  )
+}

package/{template → template-vite}/package.json RENAMED Viewed

@@ -1,30 +1,19 @@
 {
   "name": "my-exxat-app",
   "version": "0.0.1",
-  "description": "Starter app built on @exxatdesignux/ui design system.",
+  "description": "Starter app built on @exxatdesignux/ui design system. Vite + React + react-router-dom — the lightweight stack designers use to prototype against the DS without Next.js memory overhead.",
   "type": "module",
   "private": true,
   "engines": {
-    "node": ">=24.0.0"
+    "node": ">=20.0.0"
   },
   "scripts": {
-    "dev": "NODE_OPTIONS='--max-old-space-size=6144 --max-semi-space-size=64' NEXT_TELEMETRY_DISABLED=1 next dev --turbopack",
-    "dev:webpack": "NODE_OPTIONS='--max-old-space-size=6144 --max-semi-space-size=64' NEXT_TELEMETRY_DISABLED=1 next dev",
-    "dev:3001": "NODE_OPTIONS='--max-old-space-size=6144 --max-semi-space-size=64' NEXT_TELEMETRY_DISABLED=1 next dev --turbopack -p 3001",
-    "dev:3005": "NODE_OPTIONS='--max-old-space-size=6144 --max-semi-space-size=64' NEXT_TELEMETRY_DISABLED=1 next dev --turbopack -p 3005",
-    "dev:profile": "NODE_OPTIONS='--max-old-space-size=6144 --heap-prof --heap-prof-interval=512000 --diagnostic-dir=./.next/diagnostics' NEXT_TELEMETRY_DISABLED=1 next dev --turbopack",
-    "dev:fresh": "pnpm clean:cache && pnpm dev",
-    "clean": "rm -rf .next",
-    "clean:cache": "rm -rf .next/dev/cache .next/dev/trace .next/diagnostics",
-    "dev:daemon": "pm2 start ecosystem.config.cjs",
-    "dev:daemon:stop": "pm2 stop exxat-ds",
-    "dev:daemon:restart": "pm2 restart exxat-ds",
-    "dev:daemon:delete": "pm2 delete exxat-ds",
-    "dev:daemon:logs": "pm2 logs exxat-ds --lines 80",
-    "dev:daemon:status": "pm2 status",
-    "build": "next build",
-    "analyze": "ANALYZE=true next build",
-    "start": "next start",
+    "predev": "exxat-ui dev-guard",
+    "dev": "vite",
+    "dev:3001": "vite --port 3001",
+    "dev:3005": "vite --port 3005",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
     "lint": "eslint",
     "format": "prettier --write \"**/*.{ts,tsx}\"",
     "typecheck": "tsc --noEmit",
@@ -38,6 +27,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@exxatdesignux/ui": "latest",
+    "@fontsource-variable/inter": "^5.2.5",
     "@hookform/resolvers": "^5.2.2",
     "@tabler/icons-react": "^3.41.1",
     "@tanstack/react-table": "^8.21.3",
@@ -47,13 +37,13 @@
     "cmdk": "^1.1.1",
     "lucide-react": "^0.577.0",
     "motion": "^12.38.0",
-    "next": "16.2.6",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",
     "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.72.0",
     "react-resizable-panels": "^4.10.0",
+    "react-router-dom": "^7.1.1",
     "recharts": "^2.15.4",
     "shadcn": "^4.7.0",
     "sonner": "^2.0.7",
@@ -64,8 +54,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@next/bundle-analyzer": "16.2.6",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^25.5.0",
@@ -73,24 +62,23 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.7.0",
     "eslint": "^9.39.4",
-    "eslint-config-next": "16.2.6",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
     "jsdom": "^26.1.0",
-    "pm2": "^7.0.1",
-    "postcss": "^8.5.14",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.18.2",
     "vite": "^6.4.1",
     "vitest": "^3.2.4"
   },
   "overrides": {
-    "postcss": "^8.5.14",
     "ws": "^8.20.1"
   },
   "pnpm": {
     "overrides": {
-      "postcss@<8.5.10": "^8.5.14",
       "ws@<8.20.1": "^8.20.1"
     }
   }

package/template-vite/scripts/port-next-imports.mjs ADDED Viewed

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+/**
+ * One-off port helper — rewrites next/* imports in template-vite/ to
+ * the @/lib/next-compat shim (or, for next/dynamic, to React.lazy).
+ *
+ * Run from packages/ui/template-vite root:
+ *   node scripts/port-next-imports.mjs
+ *
+ * The script is idempotent: running twice leaves files unchanged. It is
+ * intentionally conservative — only rewrites import lines, never logic.
+ */
+import { readFile, writeFile } from "node:fs/promises"
+import { glob } from "node:fs/promises"
+import path from "node:path"
+const ROOT = path.resolve(import.meta.dirname, "..")
+const REWRITES = [
+  // Default `Link` import — `import Link from "next/link"` → `import { Link } from "@/lib/next-compat"`
+  {
+    re: /import\s+Link\s+from\s+["']next\/link["']/g,
+    to: 'import { Link } from "@/lib/next-compat"',
+  },
+  // Named imports from next/navigation — keep the named list, swap source
+  {
+    re: /from\s+["']next\/navigation["']/g,
+    to: 'from "@/lib/next-compat"',
+  },
+]
+async function main() {
+  const patterns = ["**/*.ts", "**/*.tsx"]
+  const files = []
+  for (const pattern of patterns) {
+    for await (const f of glob(pattern, { cwd: ROOT })) {
+      if (
+        f.startsWith("node_modules/") ||
+        f.startsWith("dist/") ||
+        f.includes("/.next-compat") ||
+        f === "lib/next-compat.tsx" ||
+        f.startsWith("scripts/")
+      ) {
+        continue
+      }
+      files.push(f)
+    }
+  }
+  let changed = 0
+  for (const rel of files) {
+    const abs = path.join(ROOT, rel)
+    const src = await readFile(abs, "utf8")
+    let out = src
+    for (const { re, to } of REWRITES) {
+      out = out.replace(re, to)
+    }
+    if (out !== src) {
+      await writeFile(abs, out, "utf8")
+      changed += 1
+      console.log(`  ✓ ${rel}`)
+    }
+  }
+  console.log(`\nport-next-imports: ${changed} file(s) updated.`)
+}
+main().catch(err => {
+  console.error("port-next-imports failed:", err)
+  process.exit(1)
+})

package/template-vite/src/App.tsx ADDED Viewed

@@ -0,0 +1,103 @@
+import { Outlet } from "react-router-dom"
+import {
+  AppSidebar,
+  SidebarShell,
+  SecondaryPanelProvider,
+  SecondaryPanel,
+} from "@/components/sidebar"
+import {
+  SIDEBAR_STATE_COOKIE_NAME,
+  sidebarDefaultOpenFromCookie,
+} from "@/lib/sidebar-state-cookie"
+import { ThemeProvider } from "@/components/theme-provider"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { ProductProvider } from "@/contexts/product-context"
+import { ThemeColorSync } from "@/components/theme-color-sync"
+import { DashboardViewProvider } from "@/contexts/dashboard-view-context"
+import { ChartVariantProvider } from "@/contexts/chart-variant-context"
+import { AskLeoProvider, AskLeoSidebar } from "@/components/ask-leo-sidebar"
+import { KeyMetricsAskLeoBridge } from "@/components/key-metrics-ask-leo-bridge"
+import { SystemBannerProvider } from "@/contexts/system-banner-context"
+import { SystemBannerSlot } from "@/components/system-banner-slot"
+import { CommandMenu } from "@/components/command-menu"
+import { CommandMenuProvider } from "@/contexts/command-menu-context"
+import { buildCommandMenuConfig } from "@/lib/command-menu-config"
+import { COMMAND_MENU_SEARCH_DATA_GROUPS } from "@/lib/command-menu-search-data"
+/**
+ * Root layout (replaces both `app/layout.tsx` and `app/(app)/layout.tsx`
+ * from the Next template).
+ *
+ * Cookie reading: Next read `cookies()` server-side. In Vite/SPA we read
+ * `document.cookie` synchronously on first render — the API is identical
+ * (default true if absent, otherwise the persisted state). No hydration
+ * mismatch because there's no server render to mismatch against.
+ *
+ * Provider order is preserved verbatim from the Next layout — these
+ * contexts are tightly coupled to DS components (KeyMetrics ↔ Ask Leo,
+ * SecondaryPanel ↔ Sidebar) and reorder would break runtime behaviour.
+ */
+function readCookie(name: string): string | undefined {
+  if (typeof document === "undefined") return undefined
+  const match = document.cookie
+    .split("; ")
+    .find(c => c.startsWith(`${name}=`))
+  return match ? decodeURIComponent(match.split("=")[1]) : undefined
+}
+export function App() {
+  const sidebarDefaultOpen = sidebarDefaultOpenFromCookie(
+    readCookie(SIDEBAR_STATE_COOKIE_NAME),
+  )
+  const commandMenuConfig = buildCommandMenuConfig({
+    dataGroups: COMMAND_MENU_SEARCH_DATA_GROUPS,
+  })
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <ProductProvider>
+        <ThemeColorSync />
+        <TooltipProvider delayDuration={300}>
+          <DashboardViewProvider>
+            <ChartVariantProvider>
+              <AskLeoProvider>
+                <KeyMetricsAskLeoBridge>
+                  <SystemBannerProvider>
+                    <CommandMenuProvider value={commandMenuConfig}>
+                      <SidebarShell
+                        defaultOpen={sidebarDefaultOpen}
+                        wrapperClassName="flex min-h-svh flex-col"
+                      >
+                        <CommandMenu />
+                        <SystemBannerSlot />
+                        <div
+                          className="flex min-h-0 w-full flex-1 items-stretch has-data-[variant=inset]:bg-sidebar"
+                          suppressHydrationWarning
+                        >
+                          <SecondaryPanelProvider>
+                            <AppSidebar variant="inset" />
+                            <SecondaryPanel />
+                            <Outlet />
+                          </SecondaryPanelProvider>
+                          <AskLeoSidebar />
+                        </div>
+                      </SidebarShell>
+                    </CommandMenuProvider>
+                  </SystemBannerProvider>
+                </KeyMetricsAskLeoBridge>
+              </AskLeoProvider>
+            </ChartVariantProvider>
+          </DashboardViewProvider>
+        </TooltipProvider>
+      </ProductProvider>
+    </ThemeProvider>
+  )
+}

package/template-vite/src/main.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { RouterProvider, createBrowserRouter } from "react-router-dom"
+import "@fontsource-variable/inter/index.css"
+import "./styles/globals.css"
+import { App } from "./App"
+import { routes } from "./routes"
+/**
+ * Vite entry — replaces the Next root layout (`app/layout.tsx`).
+ *
+ * The HTML shell, theme-color meta, Adobe Fonts preconnect, and Font
+ * Awesome kit script live in `index.html` (static, no JS needed).
+ *
+ * `App` wraps the route tree with the same provider stack the Next
+ * layout used (Theme, Tooltip, Product, etc.). Per-section providers
+ * (Library secondary panel, dashboard view) live on the route shells
+ * that need them — see `src/App.tsx`.
+ *
+ * `next/font/google` Inter is replaced by `@fontsource-variable/inter`
+ * which loads the same weights as a self-hosted variable font with
+ * zero layout shift. The `--font-sans` CSS variable is set on
+ * `document.documentElement` once on boot so the rest of the DS
+ * (tokens-themes, surfaces) sees the same font-family token Next had.
+ */
+document.documentElement.style.setProperty(
+  "--font-sans",
+  "'Inter Variable', 'Inter', system-ui, sans-serif",
+)
+const router = createBrowserRouter([
+  {
+    element: <App />,
+    children: routes,
+  },
+])
+const rootEl = document.getElementById("root")
+if (!rootEl) {
+  throw new Error("Root element #root not found in index.html")
+}
+createRoot(rootEl).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+)

package/{template/app/(app)/error.tsx → template-vite/src/pages/_error.tsx} RENAMED Viewed

@@ -1,25 +1,22 @@
-"use client"
 import * as React from "react"
+import { useRouteError } from "react-router-dom"
 import { AlertCircle } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { isChunkLoadError } from "@/lib/chunk-load-error"
 /**
- * Route error boundary for the signed-in app shell. Lets users retry without a full reload.
+ * Route error boundary — catches lazy-chunk failures and runtime errors
+ * within a route subtree. `useRouteError()` is React Router's equivalent
+ * of the Next error.tsx `error` prop. Reset = reload the route via
+ * `window.location.reload()` (RR doesn't ship a `reset()` like Next).
  */
-export default function AppRouteError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string }
-  reset: () => void
-}) {
+export function RouteError() {
+  const error = useRouteError() as Error & { digest?: string }
   const chunkStale = isChunkLoadError(error)
   React.useEffect(() => {
-    if (process.env.NODE_ENV === "development") {
+    if (import.meta.env.DEV) {
       console.error(error)
     }
   }, [error])
@@ -35,23 +32,14 @@ export default function AppRouteError({
         <p className="max-w-md text-sm text-muted-foreground">
           {chunkStale
             ? "The app loaded an outdated script bundle (common after a dev-server rebuild). Reload the page to fetch the latest chunks."
-            : process.env.NODE_ENV === "development"
-              ? error.message
+            : import.meta.env.DEV
+              ? error?.message
               : "Please try again. If the problem continues, contact support."}
         </p>
       </div>
       <div className="flex flex-wrap items-center justify-center gap-2">
-        {chunkStale ? (
-          <Button type="button" onClick={() => window.location.reload()}>
-            Reload page
-          </Button>
-        ) : null}
-        <Button
-          type="button"
-          variant={chunkStale ? "outline" : "default"}
-          onClick={() => reset()}
-        >
-          Try again
+        <Button type="button" onClick={() => window.location.reload()}>
+          {chunkStale ? "Reload page" : "Try again"}
         </Button>
       </div>
     </div>

package/{template/app/(app)/loading.tsx → template-vite/src/pages/_loading.tsx} RENAMED Viewed

@@ -1,9 +1,11 @@
 import { Skeleton } from "@/components/ui/skeleton"
 /**
- * Default loading UI for app routes (sidebar chrome stays; main column shows this fallback).
+ * Default loading fallback — sidebar chrome stays mounted; main column
+ * shows skeleton while a route's lazy chunk resolves. Mirrors the Next
+ * `app/(app)/loading.tsx` behaviour.
  */
-export default function AppRouteLoading() {
+export function LoadingFallback() {
   return (
     <div
       className="flex flex-col gap-4 p-6 md:p-8"

package/template-vite/src/pages/_not-found.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom"
+import { Button } from "@/components/ui/button"
+export default function NotFound() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 px-4 py-12 text-center">
+      <h1 className="text-2xl font-semibold text-foreground">Page not found</h1>
+      <p className="max-w-md text-sm text-muted-foreground">
+        The page you’re looking for doesn’t exist or was moved.
+      </p>
+      <Button asChild>
+        <Link to="/dashboard">Back to dashboard</Link>
+      </Button>
+    </div>
+  )
+}

package/template-vite/src/pages/dashboard.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import { lazy, Suspense } from "react"
+import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { Skeleton } from "@/components/ui/skeleton"
+import { DASHBOARD_METRICS, DASHBOARD_INSIGHT } from "@/lib/mock/dashboard"
+/**
+ * `next/dynamic` → `React.lazy`. The skeleton fallback below mirrors the
+ * one the Next page used.
+ */
+const DashboardTabs = lazy(() =>
+  import("@/components/dashboard-tabs").then(m => ({ default: m.DashboardTabs })),
+)
+function DashboardSkeleton() {
+  return (
+    <div
+      className="flex flex-col gap-4 p-4 md:p-6"
+      aria-busy="true"
+      aria-label="Loading dashboard"
+    >
+      <Skeleton className="h-9 w-56 max-w-full" />
+      <Skeleton className="h-11 w-full max-w-xl" />
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <Skeleton className="h-24 rounded-xl" />
+        <Skeleton className="h-24 rounded-xl" />
+        <Skeleton className="h-24 rounded-xl" />
+        <Skeleton className="h-24 rounded-xl" />
+      </div>
+      <Skeleton className="min-h-[320px] w-full rounded-xl" />
+    </div>
+  )
+}
+export default function DashboardPage() {
+  return (
+    <PrimaryPageTemplate siteHeader={{ title: "Dashboard" }}>
+      <Suspense fallback={<DashboardSkeleton />}>
+        <DashboardTabs
+          title="Dashboard"
+          subtitle="Design system shell · sample metrics and charts"
+          metrics={DASHBOARD_METRICS}
+          insight={DASHBOARD_INSIGHT}
+        />
+      </Suspense>
+    </PrimaryPageTemplate>
+  )
+}

package/{template/app/(app)/help/page.tsx → template-vite/src/pages/help.tsx} RENAMED Viewed

@@ -1,4 +1,5 @@
-import Link from "next/link"
+import { Link } from "react-router-dom"
 import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
 import { Button } from "@/components/ui/button"
@@ -25,7 +26,7 @@ export default function HelpPage() {
             </a>
           </Button>
           <Button variant="outline" asChild>
-            <Link href="/settings#appearance">App settings</Link>
+            <Link to="/settings#appearance">App settings</Link>
           </Button>
         </div>
         <section id="more" className="scroll-mt-20 mt-10">