@aminnairi/react-router 3.0.0 → 3.0.1

package/README.md

@@ -88,7 +88,7 @@ touch src/router/fallback.tsx
 ```
 
 ```tsx
-import { useNavigateToPage } from "@aminnairi/react-router";
+import { useNavigateToPage } from ".";
 import { home } from "./pages/home";
 
 export const Fallback = () => {
@@ -104,7 +104,7 @@ touch src/router/issue.tsx
 
 ```tsx
 import { Fragment } from "react";
-import { useNavigateToPage } from "@aminnairi/react-router";
+import { useNavigateToPage } from ".";
 import { home } from "./pages/home";
 
 export const Issue = () => {
@@ -129,7 +129,7 @@ import { Fallback } from "./fallback";
 import { Issue } from "./issue";
 import { home } from "./pages/home";
 
-export const { RouterProvider, RouterView } = createRouter({
+export const { RouterProvider, RouterView, useNavigateToPage } = createRouter({
   fallback: Fallback,
   issue: Issue,
   pages: [home],
@@ -301,7 +301,7 @@ And you can of course navigate to pages that have dynamic parameters as well.
 
 ```tsx
 import { Fragment } from "react";
-import { createPage, useNavigateToPage } from "@aminnairi/react-router";
+import { createPage, createRouter } from "@aminnairi/react-router";
 
 const user = createPage({
   path: "/users/:user",
@@ -310,6 +310,12 @@ const user = createPage({
   },
 });
 
+const { useNavigateToPage } = createRouter({
+  fallback: () => <h1>Not found</h1>,
+  issue: () => <h1>An error occurred</h1>,
+  pages: [user],
+});
+
 createPage({
   path: "/",
   element: function Home() {
@@ -502,7 +508,7 @@ You can also define the issue component from the outside.
 ```tsx
 import { Fragment, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { createRouter, createPage } from "@aminnairi/react-router";
+import { createRouter, createPage, IssueProps } from "@aminnairi/react-router";
 
 const home = createPage({
   path: "/",
@@ -515,7 +521,7 @@ const Fallback = () => {
   return <h1>Not found</h1>;
 };
 
-const Issue = ({ error, resetError }: { error: Error; resetError: () => void }) => (
+const Issue = ({ error, resetError }: IssueProps) => (
   <Fragment>
     <h1>Error</h1>
     <p>{error.message}</p>
@@ -570,7 +576,7 @@ import { createRoot } from "react-dom/client";
 import {
   createRouter,
   createPage,
-  useNavigateToPage,
+  IssueProps,
 } from "@aminnairi/react-router";
 
 const home = createPage({
@@ -591,7 +597,7 @@ const Fallback = () => {
   );
 };
 
-const Issue = ({ error, resetError }: { error: Error; resetError: () => void }) => (
+const Issue = ({ error, resetError }: IssueProps) => (
   <Fragment>
     <h1>Error</h1>
     <p>{error.message}</p>
@@ -599,7 +605,7 @@ const Issue = ({ error, resetError }: { error: Error; resetError: () => void })
   </Fragment>
 );
 
-const { RouterProvider, RouterView } = createRouter({
+const { RouterProvider, RouterView, useNavigateToPage } = createRouter({
   prefix: "/portfolio",
   fallback: Fallback,
   issue: Issue,
@@ -716,42 +722,53 @@ Allow you to check if a page is currently active.
 Note: This hook is returned from `createRouter`, not imported directly from the library.
 
 ```tsx
-import { Fragment } from "react";
+// router/index.ts
 import { createPage, createRouter } from "@aminnairi/react-router";
 
-const home = createPage({
+export const home = createPage({
   path: "/",
   element: function Home() {
     return <h1>Home</h1>;
   },
 });
 
-const about = createPage({
+export const about = createPage({
   path: "/about",
   element: function About() {
     return <h1>About</h1>;
   },
 });
 
-const { useIsActivePage } = createRouter({
+export const { useIsActivePage } = createRouter({
   fallback: () => <h1>Not found</h1>,
   issue: () => <h1>An error occurred</h1>,
   pages: [home, about],
 });
+```
 
-createPage({
-  path: "/",
-  element: function Home() {
-    const isAboutActive = useIsActivePage(about);
+```tsx
+// components/layout.tsx
+import { Fragment } from "react";
+import { useIsActivePage, useNavigateToPage } from "../router";
+import { home, about } from "../router";
 
-    return (
-      <Fragment>
-        <h1>Home</h1>
-        <p>About page is {isAboutActive ? "active" : "not active"}</p>
-      </Fragment>
-    );
-  },
-});
+export default function Layout() {
+  const isHomeActive = useIsActivePage(home);
+  const isAboutActive = useIsActivePage(about);
+
+  return (
+    <Fragment>
+      <nav>
+        <button style={{ fontWeight: isHomeActive ? "bold" : "normal" }}>
+          Home
+        </button>
+        <button style={{ fontWeight: isAboutActive ? "bold" : "normal" }}>
+          About
+        </button>
+      </nav>
+    </Fragment>
+  );
+}
 ```
 
 ### useLocale
@@ -761,26 +778,17 @@ Allow you to get and set the current locale for internationalization.
 Note: This hook is returned from `createRouter`, not imported directly from the library.
 
 ```tsx
-import { Fragment } from "react";
+// router/index.ts
 import { createPage, createRouter } from "@aminnairi/react-router";
 
-const home = createPage({
+export const home = createPage({
   path: "/",
   element: function Home() {
-    const { locale, setLocale } = useLocale();
-
-    return (
-      <Fragment>
-        <h1>Home</h1>
-        <p>Current locale: {locale ?? "none"}</p>
-        <button onClick={() => setLocale("en")}>English</button>
-        <button onClick={() => setLocale("fr")}>Français</button>
-      </Fragment>
-    );
+    return <h1>Home</h1>;
   },
 });
 
-const { RouterProvider, RouterView, useLocale } = createRouter({
+export const { RouterProvider, RouterView, useLocale } = createRouter({
   locales: ["en", "fr"],
   fallback: () => <h1>Not found</h1>,
   issue: () => <h1>An error occurred</h1>,
@@ -788,6 +796,26 @@ const { RouterProvider, RouterView, useLocale } = createRouter({
 });
 ```
 
+```tsx
+// components/layout.tsx
+import { Fragment } from "react";
+import { useLocale } from "../router";
+
+export default function Layout() {
+  const { locale, setLocale } = useLocale();
+
+  return (
+    <Fragment>
+      <nav>
+        <p>Current locale: {locale ?? "none"}</p>
+        <button onClick={() => setLocale("en")}>English</button>
+        <button onClick={() => setLocale("fr")}>Français</button>
+      </nav>
+    </Fragment>
+  );
+}
+```
+
 ### usePrefix
 
 Allow you to get the current route prefix.
@@ -795,24 +823,17 @@ Allow you to get the current route prefix.
 Note: This hook is returned from `createRouter`, not imported directly from the library.
 
 ```tsx
-import { Fragment } from "react";
+// router/index.ts
 import { createPage, createRouter } from "@aminnairi/react-router";
 
-const home = createPage({
+export const home = createPage({
   path: "/",
   element: function Home() {
-    const { prefix } = usePrefix();
-
-    return (
-      <Fragment>
-        <h1>Home</h1>
-        <p>Current prefix: {prefix ?? "none"}</p>
-      </Fragment>
-    );
+    return <h1>Home</h1>;
   },
 });
 
-const { RouterProvider, RouterView, usePrefix } = createRouter({
+export const { RouterProvider, RouterView, usePrefix } = createRouter({
   prefix: "/portfolio",
   fallback: () => <h1>Not found</h1>,
   issue: () => <h1>An error occurred</h1>,
@@ -820,6 +841,24 @@ const { RouterProvider, RouterView, usePrefix } = createRouter({
 });
 ```
 
+```tsx
+// components/layout.tsx
+import { Fragment } from "react";
+import { usePrefix } from "../router";
+
+export default function Layout() {
+  const { prefix } = usePrefix();
+
+  return (
+    <Fragment>
+      <nav>
+        <p>Current prefix: {prefix ?? "none"}</p>
+      </nav>
+    </Fragment>
+  );
+}
+```
+
 ### usePath
 
 Allow you to get the current path.
@@ -827,30 +866,41 @@ Allow you to get the current path.
 Note: This hook is returned from `createRouter`, not imported directly from the library.
 
 ```tsx
-import { Fragment } from "react";
+// router/index.ts
 import { createPage, createRouter } from "@aminnairi/react-router";
 
-const home = createPage({
+export const home = createPage({
   path: "/",
   element: function Home() {
-    const { path } = usePath();
-
-    return (
-      <Fragment>
-        <h1>Home</h1>
-        <p>Current path: {path}</p>
-      </Fragment>
-    );
+    return <h1>Home</h1>;
   },
 });
 
-const { RouterProvider, RouterView, usePath } = createRouter({
+export const { RouterProvider, RouterView, usePath } = createRouter({
   fallback: () => <h1>Not found</h1>,
   issue: () => <h1>An error occurred</h1>,
   pages: [home],
 });
 ```
 
+```tsx
+// components/layout.tsx
+import { Fragment } from "react";
+import { usePath } from "../router";
+
+export default function Layout() {
+  const { path } = usePath();
+
+  return (
+    <Fragment>
+      <nav>
+        <p>Current path: {path}</p>
+      </nav>
+    </Fragment>
+  );
+}
+```
+
 ## Features
 
 ### TypeScript
@@ -885,6 +935,7 @@ See [`LICENSE`](./LICENSE).
 
 ### Versions
 
+- [`3.0.1`](#301)
 - [`3.0.0`](#300)
 - [`2.1.0`](#210)
 - [`2.0.1`](#201)
@@ -895,6 +946,22 @@ See [`LICENSE`](./LICENSE).
 - [`0.1.1`](#011)
 - [`0.1.0`](#010)
 
+### 3.0.1
+
+#### Major changes
+
+None.
+
+#### Minor changes
+
+None.
+
+#### Bug & security fixes
+
+- Fixed incorrect imports in documentation - hooks like `useNavigateToPage`, `useIsActivePage`, `useLocale`, `usePrefix`, and `usePath` are returned from `createRouter` and should not be imported directly from the package
+- Fixed file structure in documentation setup guide to properly separate files and avoid duplicate code definitions
+- Updated issue component examples to use exported `IssueProps` type instead of inline type definitions
+
 ### 3.0.0
 
 #### Major changes

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@aminnairi/react-router",
   "description": "Type-safe router for the React library",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "homepage": "https://github.com/aminnairi/react-router#readme",
   "license": "MIT",
   "files": [