@igstack/app-catalog-frontend-core 0.6.1 → 0.6.2

package/dist/esm/modules/auth/AuthContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { use, createContext, useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, createContext, use } from "react";
 const AuthContext = createContext(void 0);
 const STORAGE_KEY = "ac_auth_user";
 function AuthProvider({ children }) {

package/dist/esm/modules/auth/AuthModalContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { use, createContext, useState, useMemo } from "react";
+import { useState, useMemo, createContext, use } from "react";
 const AuthModalContext = createContext(
   void 0
 );

package/dist/esm/routes/__root.js

@@ -3,11 +3,17 @@ import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 import { RootErrorPage } from "../ui/components/error/RootErrorPage.js";
 import { NotFoundError } from "../ui/error/NotFoundError.js";
 import { LoadingScreen } from "../ui/layout/LoadingScreen.js";
+import { TopLevelProvidersForErrors } from "../ui/layout/TopLevelProvidersForErrors.js";
 const Route = createRootRouteWithContext()({
   component: RootRoute,
   errorComponent: RootErrorPage,
-  pendingComponent: () => /* @__PURE__ */ jsx(LoadingScreen, { label: "root pending" }),
-  notFoundComponent: () => /* @__PURE__ */ jsx(NotFoundError, {}),
+  // These fallbacks render MainLayout → Header → useAuth(), so they must be
+  // wrapped in the providers (Auth + AuthModal + Theme + Tooltip). The router
+  // renders pending/notFound OUTSIDE the route-component subtree, i.e. outside
+  // the app's TopLevelProviders — without this wrap they throw
+  // "useAuth must be used within AuthProvider" (see #6/#7).
+  pendingComponent: () => /* @__PURE__ */ jsx(TopLevelProvidersForErrors, { children: /* @__PURE__ */ jsx(LoadingScreen, { label: "root pending" }) }),
+  notFoundComponent: () => /* @__PURE__ */ jsx(TopLevelProvidersForErrors, { children: /* @__PURE__ */ jsx(NotFoundError, {}) }),
   wrapInSuspense: true
 });
 function RootRoute() {

package/dist/esm/routes/__root.js.map

@@ -1 +1 @@
-{"version":3,"file":"__root.js","sources":["../../../src/routes/__root.tsx"],"sourcesContent":["import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\nimport type { AcRouterContext } from '~/types/types'\nimport { RootErrorPage } from '~/ui/components/error/RootErrorPage'\nimport { NotFoundError } from '~/ui/error/NotFoundError'\nimport { LoadingScreen } from '~/ui/layout/LoadingScreen'\n\nexport const Route = createRootRouteWithContext<AcRouterContext>()({\n  component: RootRoute,\n  errorComponent: RootErrorPage,\n  pendingComponent: () => <LoadingScreen label=\"root pending\" />,\n  notFoundComponent: () => <NotFoundError />,\n  wrapInSuspense: true,\n})\n\nfunction RootRoute() {\n  return (\n    <div className=\"min-h-screen bg-base-200\">\n      <Outlet />\n      {import.meta.env.MODE === 'dev' ? <TanStackRouterDevtools /> : null}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAOO,MAAM,QAAQ,6BAA8C;AAAA,EACjE,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,kBAAkB,MAAM,oBAAC,eAAA,EAAc,OAAM,gBAAe;AAAA,EAC5D,mBAAmB,MAAM,oBAAC,eAAA,EAAc;AAAA,EACxC,gBAAgB;AAClB,CAAC;AAED,SAAS,YAAY;AACnB,SACE,qBAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO;AAAA,IACuD;AAAA,EAAA,GACjE;AAEJ;"}
+{"version":3,"file":"__root.js","sources":["../../../src/routes/__root.tsx"],"sourcesContent":["import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\nimport type { AcRouterContext } from '~/types/types'\nimport { RootErrorPage } from '~/ui/components/error/RootErrorPage'\nimport { NotFoundError } from '~/ui/error/NotFoundError'\nimport { LoadingScreen } from '~/ui/layout/LoadingScreen'\nimport { TopLevelProvidersForErrors } from '~/ui/layout/TopLevelProvidersForErrors'\n\nexport const Route = createRootRouteWithContext<AcRouterContext>()({\n  component: RootRoute,\n  errorComponent: RootErrorPage,\n  // These fallbacks render MainLayout → Header → useAuth(), so they must be\n  // wrapped in the providers (Auth + AuthModal + Theme + Tooltip). The router\n  // renders pending/notFound OUTSIDE the route-component subtree, i.e. outside\n  // the app's TopLevelProviders — without this wrap they throw\n  // \"useAuth must be used within AuthProvider\" (see #6/#7).\n  pendingComponent: () => (\n    <TopLevelProvidersForErrors>\n      <LoadingScreen label=\"root pending\" />\n    </TopLevelProvidersForErrors>\n  ),\n  notFoundComponent: () => (\n    <TopLevelProvidersForErrors>\n      <NotFoundError />\n    </TopLevelProvidersForErrors>\n  ),\n  wrapInSuspense: true,\n})\n\nfunction RootRoute() {\n  return (\n    <div className=\"min-h-screen bg-base-200\">\n      <Outlet />\n      {import.meta.env.MODE === 'dev' ? <TanStackRouterDevtools /> : null}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,QAAQ,6BAA8C;AAAA,EACjE,WAAW;AAAA,EACX,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMhB,kBAAkB,MAChB,oBAAC,4BAAA,EACC,8BAAC,eAAA,EAAc,OAAM,eAAA,CAAe,GACtC;AAAA,EAEF,mBAAmB,MACjB,oBAAC,4BAAA,EACC,UAAA,oBAAC,iBAAc,GACjB;AAAA,EAEF,gBAAgB;AAClB,CAAC;AAED,SAAS,YAAY;AACnB,SACE,qBAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO;AAAA,IACuD;AAAA,EAAA,GACjE;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -134,8 +134,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.6.1",
-    "@igstack/app-catalog-shared-core": "0.6.1"
+    "@igstack/app-catalog-backend-core": "0.6.2",
+    "@igstack/app-catalog-shared-core": "0.6.2"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "e83dc91aa65e1699c3fe578db7a62d81c4b27857",
+  "gitHead": "dcc2b0acf435e115ec42861ec79064c6394b1ada",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/integration/harness/given.tsx

@@ -174,7 +174,14 @@ export async function given(
       const hasTanstackError = document.body.textContent.includes(
         'Something went wrong',
       )
-      if (!hasAlert && !hasTable && !hasSearchbox && !hasTanstackError) {
+      const hasNotFound = document.body.textContent.includes('404 Not Found')
+      if (
+        !hasAlert &&
+        !hasTable &&
+        !hasSearchbox &&
+        !hasTanstackError &&
+        !hasNotFound
+      ) {
         throw new Error('Still loading...')
       }
     },

package/src/__tests__/integration/notFoundRoute.integration.test.tsx

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+
+import { given } from './harness/given'
+import { magazine } from './mock-backend/magazines'
+
+/**
+ * Regression for #7 (root cause in #6): the root route's `notFoundComponent`
+ * (`NotFoundError`) renders `MainLayout → Header → useAuth()`. Before the fix
+ * the fallback rendered OUTSIDE `AuthProvider`, so any unknown URL threw
+ * `useAuth must be used within AuthProvider` and the app showed its "Ooops!"
+ * error page instead of a clean 404.
+ */
+describe('Unknown URL renders NotFound without a useAuth error', () => {
+  it('shows the 404 page (not the useAuth error) for a bogus URL', async () => {
+    const { ui } = await given(magazine.full(), {
+      initialRoute: '/nonexistent-xyz',
+    })
+
+    // The clean NotFound UI is rendered.
+    await waitFor(() => {
+      expect(screen.getByText('404 Not Found')).toBeInTheDocument()
+    })
+
+    // And crucially: NO useAuth error surfaced. The header (which calls
+    // useAuth) must render inside a provider, so the global error page must
+    // not appear at all.
+    expect(
+      screen.queryByText(/useAuth must be used within AuthProvider/),
+    ).not.toBeInTheDocument()
+    expect(() => ui.globalError()).toThrow(/No global error found/)
+  })
+})

package/src/routes/__root.tsx

@@ -4,12 +4,26 @@ import type { AcRouterContext } from '~/types/types'
 import { RootErrorPage } from '~/ui/components/error/RootErrorPage'
 import { NotFoundError } from '~/ui/error/NotFoundError'
 import { LoadingScreen } from '~/ui/layout/LoadingScreen'
+import { TopLevelProvidersForErrors } from '~/ui/layout/TopLevelProvidersForErrors'
 
 export const Route = createRootRouteWithContext<AcRouterContext>()({
   component: RootRoute,
   errorComponent: RootErrorPage,
-  pendingComponent: () => <LoadingScreen label="root pending" />,
-  notFoundComponent: () => <NotFoundError />,
+  // These fallbacks render MainLayout → Header → useAuth(), so they must be
+  // wrapped in the providers (Auth + AuthModal + Theme + Tooltip). The router
+  // renders pending/notFound OUTSIDE the route-component subtree, i.e. outside
+  // the app's TopLevelProviders — without this wrap they throw
+  // "useAuth must be used within AuthProvider" (see #6/#7).
+  pendingComponent: () => (
+    <TopLevelProvidersForErrors>
+      <LoadingScreen label="root pending" />
+    </TopLevelProvidersForErrors>
+  ),
+  notFoundComponent: () => (
+    <TopLevelProvidersForErrors>
+      <NotFoundError />
+    </TopLevelProvidersForErrors>
+  ),
   wrapInSuspense: true,
 })