chore: #26 Refactor React Router example usage

[kurtdoherty]

fixes: #26

Scope

• Refactor example pages to use RR6's nested routing;
• Restructure pages to encourage better domain boundaries.

note: I've also smuggled in an upgrade to React 19

Out-of-scope

The following changes have been explicitly de-scoped for now:

• Refactoring of data loading architecture to reduce request waterfalls;
• Use of route loaders to initiative retrieval of page data early.

Changes

The main changes to the folder structure are as follows:

Before	After
components/contacts/list	components/contacts/ContactListPage
components/contacts/edit	components/contacts/ContactDetailPage
components/contacts/form	components/contacts/common/ContactForm
components/contacts/new	components/contacts/CreateContactPage
components/contacts/page	components/contacts/ViewContactDesktopRedirect
components/contacts/view	components/contacts/ContactDetailPage/FullContactDetails
components/contacts/routes.ts	❌
components/login	components/LoginPage
components/login/routes.ts	❌
components/new/page	components/new/NewPage
components/new/routes.ts	❌
constants/routes.ts	❌
core/router.tsx	❌
—	routes.tsx

[kurtdoherty]

note: small scout to bump React and TypeScript to the their most recent minor versions. A React 19 upgrade for this template is not in scope for this work.

[kurtdoherty]

note: You'll see many changes like this where I've updated the name of the exported component to align with that component's updated folder name.

[kurtdoherty]

note: FC is generally not needed, so I've removed it where I've made other changes.

note: As noted in the test file, you'll see lots of renaming of the components I've moved so they're component name matches their folder name.

[kurtdoherty]

note: This was originally components/contacts/edit. The design of this page is weird as it combines both a "detail" page AND a series of edit/update forms 🤷 This is not aligned in anyway with the design system, but it's beyond the scope of this work to change it here.

The only changes I've made to this file, like most of the other page components, is replacing the use of the old "routes" constants with the new URL builders.

[kurtdoherty]

note: This used to be components/contacts/page. It's now solely responsible for handling the redirect to the detail page from (I assume) the Agency Cloud desktop application.

[kurtdoherty]

note: PrivateRouteWrapper no longer accepts children as it renders an Outlet instead.

[kurtdoherty]

note: Extra route for one of the tests so we don't need to assert on a function being called, but can instead assert on DOM content

[kurtdoherty]

note: redirect is not intended for use in components; that's what Navigate is for.

[kurtdoherty]

note: new top-level route config. Maintains lazy loading of all routes except the login page.

[kurtdoherty]

note: This file enables all the contact pages to be lazy loaded by RR6's router. When we upgrade to RR7, these "route prop" objects will move to individual files. For now though, this is a simple way of enabling lazy loading without having to jump through too many hoops in our route config (routes.tsx)

There's one of these for the "new page" as well.

[kurtdoherty]

@ksolanki7 Apologies for the size of this PR 😬 It was going to take too long to stage it all nicely. For the most part, I don't think there's a whole lot here that needs your review, but I've added comments throughout.

[ksolanki7]

@kurtdoherty Changes look good to me,

• I have run this locally, there are no issues found so far.
• I'll approve the PR now and then play with this new architecture for building routes over ABX project.

Note: I'll approach you if have any concerns or suggestion while working on the project.