wip: extract react router chart functionality

Author: iamogbz

.nvmrc

@@ -1 +1 @@
-18.13.0
+18.14.0

demo/src/components/pages/Account.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
+import { $ } from "react-router-chart";
 
 import { Copy } from "../../constants";
 import { namedRoutes } from "../../routes";
-import { $ } from "../../utils/createNamedRoutes";
 import { Link } from "../buttons/Link";
 import { useAuthState } from "../hooks/useAuthState";
 import { usePageState } from "../hooks/usePageState";

demo/src/components/pages/Landing.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
+import { $ } from "react-router-chart";
 
 import { Copy } from "../../constants";
 import { namedRoutes } from "../../routes";
-import { $ } from "../../utils/createNamedRoutes";
 import { Link } from "../buttons/Link";
 import { PingPong } from "../ping-pong/PingPong";
 import { AUTH_CONTAINER_STYLE } from "./constants";

demo/src/components/pages/SignIn.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
+import { $ } from "react-router-chart";
 import { useNavigate } from "react-router-dom";
 
 import { Copy } from "../../constants";
 import { namedRoutes } from "../../routes";
-import { $ } from "../../utils/createNamedRoutes";
 import { resolveTimeout } from "../../utils/resolveTimeout";
 import { Link } from "../buttons/Link";
 import { TextInput } from "../forms/TextInput";

demo/src/components/pages/SignOut.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
+import { $ } from "react-router-chart";
 import { useNavigate } from "react-router-dom";
 
 import { Copy } from "../../constants";
 import { namedRoutes } from "../../routes";
-import { $ } from "../../utils/createNamedRoutes";
 import { resolveTimeout } from "../../utils/resolveTimeout";
 import { Link } from "../buttons/Link";
 import { useAuthState } from "../hooks/useAuthState";

demo/src/components/pages/SignUp.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
+import { $ } from "react-router-chart";
 import { useNavigate } from "react-router-dom";
 
 import { Copy } from "../../constants";
 import { namedRoutes } from "../../routes";
-import { $ } from "../../utils/createNamedRoutes";
 import { resolveTimeout } from "../../utils/resolveTimeout";
 import { Link } from "../buttons/Link";
 import { TextInput } from "../forms/TextInput";

demo/src/routes.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { $, Chart, NamedRoute } from "react-router-chart";
 import { createBrowserRouter, redirect, RouteObject } from "react-router-dom";
 
 import { Account } from "./components/pages/Account";
@@ -7,7 +8,6 @@ import { Landing } from "./components/pages/Landing";
 import { SignIn } from "./components/pages/SignIn";
 import { SignOut } from "./components/pages/SignOut";
 import { SignUp } from "./components/pages/SignUp";
-import { $, createNamedRoutes, NamedRoute } from "./utils/createNamedRoutes";
 
 export const ROOT_PATH = "/";
 export const BASE_NAME = "react-state-url-fragment";
@@ -52,6 +52,6 @@ export const routes: RouteObject[] = [
   },
 ];
 
-Object.assign(namedRoutes, createNamedRoutes(routes)[ROOT_PATH][BASE_NAME]);
+Object.assign(namedRoutes, Chart.describe(...routes)[ROOT_PATH][BASE_NAME]);
 
 export const router = createBrowserRouter(routes);