Update to react router 7

.gitignore

@@ -8,3 +8,13 @@ node_modules
 /functions
 /.netlify
 /.wrangler
+
+.DS_Store
+/node_modules/
+*.tsbuildinfo
+
+# React Router
+/.react-router/
+/build/
+
+.env

.node-version

@@ -1 +1 @@
-18.18.2
+20.0.0

app/components/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import { HomeIcon } from '@heroicons/react/24/solid';
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 export function Breadcrumbs({

app/components/FormElement.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
-import { useField } from 'remix-validated-form';
+import { useField } from '@rvf/react-router';
 
 type FormElementProps = {
   name: string;
@@ -27,7 +27,7 @@ const FormElement: React.FC<PropsWithChildren<FormElementProps>> = ({
       <div className={label && "mt-1"}>{children}</div>
       {error && (
         <div className="pt-1 text-rose-500 text-sm">
-          <span>{error}</span>
+          <span>{error()}</span>
         </div>
       )}
     </div>

app/components/Input.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
-import { useField } from 'remix-validated-form';
+import { useField } from '@rvf/react-router';
 import FormElement from './FormElement';
 
 type InputProps = Omit<

app/components/Pagination.tsx

@@ -2,7 +2,7 @@ import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import { Select } from '~/components/Select';
 import { Button } from '~/components/Button';
 import { ComponentProps } from 'react';
-import { useNavigation } from '@remix-run/react';
+import { useNavigation } from 'react-router';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 

app/components/Select.tsx

@@ -1,5 +1,5 @@
 import React, { SelectHTMLAttributes } from 'react';
-import { useField } from 'remix-validated-form';
+import { useField } from '@rvf/react-router';
 import FormElement from './FormElement';
 import { useTranslation } from 'react-i18next';
 

app/components/account/AddAddressCard.tsx

@@ -1,5 +1,5 @@
 import { PlusIcon } from '@heroicons/react/24/outline';
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 export default function AddAddressCard() {

app/components/account/CustomerAddressForm.tsx

@@ -1,7 +1,7 @@
-import { withZod } from '@remix-validated-form/with-zod';
+import { withZod } from '@rvf/zod';
 import { z } from 'zod';
 import { RefObject } from 'react';
-import { ValidatedForm } from 'remix-validated-form';
+import { ValidatedForm } from '@rvf/react-router';
 import { Address, AvailableCountriesQuery } from '~/generated/graphql';
 import { Input } from '~/components/Input';
 import { Select } from '~/components/Select';

app/components/account/EditAddressCard.tsx

@@ -5,7 +5,7 @@ import {
   TrashIcon,
   TruckIcon,
 } from '@heroicons/react/24/outline';
-import { Link, useFetcher } from '@remix-run/react';
+import { Link, useFetcher } from 'react-router';
 import clsx from 'clsx';
 import { useState } from 'react';
 import { Address, ErrorResult } from '~/generated/graphql';

app/components/account/OrderHistoryItem.tsx

@@ -5,7 +5,7 @@ import { ActiveCustomerOrderListQuery } from '~/generated/graphql';
 import { OrderStateBadge } from '~/components/account/OrderStateBadge';
 import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 type OrderHistoryItemProps = {

app/components/cart/CartContents.tsx

@@ -1,4 +1,4 @@
-import { Form, Link } from '@remix-run/react';
+import { Form, Link } from 'react-router';
 import { Price } from '~/components/products/Price';
 import { ActiveOrderQuery, CurrencyCode } from '~/generated/graphql';
 import { useTranslation } from 'react-i18next';

app/components/cart/CartTray.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { CartContents } from './CartContents';
-import { Link, useLocation } from '@remix-run/react';
+import { Link, useLocation } from 'react-router';
 import { Price } from '~/components/products/Price';
 import { CartLoaderData } from '~/routes/api.active-order';
 import { CurrencyCode } from '~/generated/graphql';

app/components/checkout/DummyPayments.tsx

@@ -1,5 +1,5 @@
 import { CreditCardIcon, XCircleIcon } from '@heroicons/react/24/solid';
-import { Form } from '@remix-run/react';
+import { Form } from 'react-router';
 import { EligiblePaymentMethodsQuery } from '~/generated/graphql';
 import { useTranslation } from 'react-i18next';
 

app/components/checkout/braintree/BraintreePayments.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import dropin, { Dropin } from 'braintree-web-drop-in';
 import { classNames } from '~/utils/class-names';
-import { useSubmit } from '@remix-run/react';
+import { useSubmit } from 'react-router';
 import { addPaymentToOrder } from '~/providers/checkout/checkout';
 import { CurrencyCode } from '~/generated/graphql';
 import { useTranslation } from 'react-i18next';

app/components/collections/CollectionCard.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { CollectionsQuery } from '~/generated/graphql';
 
 export function CollectionCard({

app/components/facet-filter/FacetFilterControls.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { Dialog, Disclosure, Transition } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { MinusSmallIcon, PlusSmallIcon } from '@heroicons/react/24/solid';
-import { useSearchParams } from '@remix-run/react';
+import { useSearchParams } from 'react-router';
 import { FacetFilterTracker } from '~/components/facet-filter/facet-filter-tracker';
 import { useTranslation } from 'react-i18next';
 

app/components/footer/Footer.tsx

@@ -1,5 +1,5 @@
 import { RootLoaderData } from '~/root';
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 const navigation = {
@@ -76,7 +76,7 @@ export default function Footer({
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
                 <h3 className="text-sm font-semibold text-gray-500 tracking-wider uppercase">
-                  {t('account.company')}
+                  {t('address.company')}
                 </h3>
                 <ul role="list" className="mt-4 space-y-4">
                   {navigation.company.map(({ page, href }) => (

app/components/header/Header.tsx

@@ -1,4 +1,4 @@
-import { Link, useLoaderData } from '@remix-run/react';
+import { Link, useLoaderData } from 'react-router';
 import { ShoppingBagIcon } from '@heroicons/react/24/outline';
 import { SearchBar } from '~/components/header/SearchBar';
 import { useRootLoader } from '~/utils/use-root-loader';

app/components/header/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { Form } from '@remix-run/react';
+import { Form } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 export function SearchBar() {

app/components/products/ProductCard.tsx

@@ -1,5 +1,5 @@
 import { SearchQuery } from '~/generated/graphql';
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { Price } from './Price';
 
 export type ProductCardProps = SearchQuery['search']['items'][number];

app/components/tabs/Tab.tsx

@@ -1,5 +1,5 @@
-import { NavLink, useMatches, useResolvedPath } from '@remix-run/react';
-import { To } from '@remix-run/router';
+import { NavLink, useMatches, useResolvedPath } from 'react-router';
+import { To } from 'react-router';
 
 type IconElement = React.SVGProps<SVGSVGElement> & {
   title?: string;

app/entry-1.client.tsx

@@ -0,0 +1,50 @@
+// import { hydrateRoot } from 'react-dom/client';
+// import { RemixBrowser } from '@remix-run/react';
+// import { startTransition, StrictMode } from 'react';
+// import i18n from './i18n';
+// import i18next from 'i18next';
+// import { I18nextProvider, initReactI18next } from 'react-i18next';
+// import LanguageDetector from 'i18next-browser-languagedetector';
+// import { getInitialNamespaces } from 'remix-i18next';
+// import HttpBackend from 'i18next-http-backend';
+
+// async function hydrate() {
+//   await i18next
+//     .use(initReactI18next) // Tell i18next to use the react-i18next plugin
+//     .use(LanguageDetector) // Setup a client-side language detector
+//     .use(HttpBackend) // Setup your backend
+//     .init({
+//       ...i18n, // spread the configuration
+//       // This function detects the namespaces your routes rendered while SSR use
+//       ns: getInitialNamespaces(),
+//       backend: { loadPath: '/locales/{{lng}}.json' },
+//       detection: {
+//         // Here only enable htmlTag detection, we'll detect the language only
+//         // server-side with remix-i18next, by using the `<html lang>` attribute
+//         // we can communicate to the client the language detected server-side
+//         order: ['htmlTag'],
+//         // Because we only use htmlTag, there's no reason to cache the language
+//         // on the browser, so we disable it
+//         caches: [],
+//       },
+//     });
+
+//   startTransition(() => {
+//     hydrateRoot(
+//       document,
+//       <I18nextProvider i18n={i18next}>
+//         <StrictMode>
+//           <RemixBrowser />
+//         </StrictMode>
+//       </I18nextProvider>,
+//     );
+//   });
+// }
+
+// if (window.requestIdleCallback) {
+//   window.requestIdleCallback(hydrate);
+// } else {
+//   // Safari doesn't support requestIdleCallback
+//   // https://caniuse.com/requestidlecallback
+//   window.setTimeout(hydrate, 1);
+// }

app/entry-1.server.tsx

@@ -0,0 +1,136 @@
+// import type { EntryContext } from '@remix-run/server-runtime';
+// import { RemixServer } from '@remix-run/react';
+// import isbot from 'isbot';
+
+// import ReactDOM from 'react-dom/server';
+
+// import { createInstance } from 'i18next';
+// import { getI18NextServer, getPlatformBackend } from './i18next.server';
+// import { I18nextProvider, initReactI18next } from 'react-i18next';
+// import i18n from './i18n';
+// import {
+//   IS_CF_PAGES,
+//   safeRequireNodeDependency,
+// } from '~/utils/platform-adapter';
+
+// const ABORT_DELAY = 5000;
+
+// type PlatformRequestHandler = (
+//   arg0: Request,
+//   arg1: number,
+//   arg2: Headers,
+//   arg3: EntryContext,
+//   arg4: JSX.Element,
+// ) => Response | Promise<Response>;
+
+// async function handleCfRequest(
+//   request: Request,
+//   responseStatusCode: number,
+//   responseHeaders: Headers,
+//   remixContext: EntryContext,
+//   jsx: JSX.Element,
+// ) {
+//   const body = await ReactDOM.renderToReadableStream(jsx, {
+//     signal: request.signal,
+//     onError(error: unknown) {
+//       // Log streaming rendering errors from inside the shell
+//       console.error(error);
+//       responseStatusCode = 500;
+//     },
+//   });
+
+//   if (isbot(request.headers.get('user-agent'))) {
+//     await body.allReady;
+//   }
+
+//   responseHeaders.set('Content-Type', 'text/html');
+//   return new Response(body, {
+//     headers: responseHeaders,
+//     status: responseStatusCode,
+//   });
+// }
+
+// async function handleNodeRequest(
+//   request: Request,
+//   responseStatusCode: number,
+//   responseHeaders: Headers,
+//   remixContext: EntryContext,
+//   jsx: JSX.Element,
+// ): Promise<Response> {
+//   let callbackName = isbot(request.headers.get('user-agent'))
+//     ? 'onAllReady'
+//     : 'onShellReady';
+
+//   return new Promise((resolve, reject) => {
+//     let didError = false;
+
+//     let { pipe, abort } = ReactDOM.renderToPipeableStream(jsx, {
+//       [callbackName]: async () => {
+//         const { PassThrough } = await safeRequireNodeDependency('node:stream');
+
+//         const { createReadableStreamFromReadable } =
+//           await safeRequireNodeDependency('@remix-run/node');
+
+//         const body = new PassThrough();
+//         const stream = createReadableStreamFromReadable(body);
+//         responseHeaders.set('Content-Type', 'text/html');
+
+//         resolve(
+//           new Response(stream, {
+//             headers: responseHeaders,
+//             status: didError ? 500 : responseStatusCode,
+//           }),
+//         );
+//         pipe(body);
+//       },
+//       onShellError(error: unknown) {
+//         reject(error);
+//       },
+//       onError(error: unknown) {
+//         didError = true;
+
+//         console.error(error);
+//       },
+//     });
+
+//     setTimeout(abort, ABORT_DELAY);
+//   });
+// }
+
+// export default async function handleRequest(
+//   request: Request,
+//   responseStatusCode: number,
+//   responseHeaders: Headers,
+//   remixContext: EntryContext,
+// ) {
+//   let instance = createInstance();
+//   let lng = await getI18NextServer().then((i18next) =>
+//     i18next.getLocale(request),
+//   );
+
+//   await instance
+//     .use(initReactI18next)
+//     .use(await getPlatformBackend())
+//     .init({
+//       ...i18n,
+//       lng,
+//     });
+
+//   const jsx = (
+//     <I18nextProvider i18n={instance}>
+//       <RemixServer context={remixContext} url={request.url} />
+//     </I18nextProvider>
+//   );
+
+//   const requestHandler: PlatformRequestHandler = IS_CF_PAGES
+//     ? handleCfRequest
+//     : handleNodeRequest;
+
+//   return requestHandler(
+//     request,
+//     responseStatusCode,
+//     responseHeaders,
+//     remixContext,
+//     jsx,
+//   );
+// }