refa: unify route structure (#62)

* cleanup index/app

* moved index route, yay

* migrate state management

* move compound components

* make demo link typesafe

* remove old stuff

* add smoketest

* move smoketest

.gitignore

@@ -23,4 +23,7 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# tanstack/router
 **/routeTree.gen.ts
+src/route-tree.ts

package.json

@@ -36,6 +36,7 @@
  "@testing-library/jest-dom": "6.4.5",
  "@testing-library/react": "^15.0.6",
  "@types/jest": "^29.5.12",
+ "@types/node": "^20.14.1",
  "@types/react": "^18.3.1",
  "@types/react-dom": "^18.3.0",
  "@types/react-test-renderer": "^18.3.0",

src/App.tsx

@@ -0,0 +1,34 @@
+import { StrictMode } from 'react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+
+import { MarigoldProvider } from '@marigold/components';
+import theme from '@marigold/theme-core';
+
+import { routeTree } from './route-tree';
+
+// Router
+// ---------------
+const router = createRouter({ routeTree });
+
+declare module '@tanstack/react-router' {
+ interface Register {
+ router: typeof router;
+ }
+}
+
+// Query
+// ---------------
+const queryClient = new QueryClient();
+
+// App
+// ---------------
+export const App = () => (
+ <StrictMode>
+ <QueryClientProvider client={queryClient}>
+ <MarigoldProvider theme={theme}>
+ <RouterProvider router={router} />
+ </MarigoldProvider>
+ </QueryClientProvider>
+ </StrictMode>
+);

src/components/DemoLink.tsx

@@ -1,19 +1,17 @@
 import { Link } from '@tanstack/react-router';
 import { ExternalLink } from '@marigold/icons';
-import { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
-const DemoLink = ({
- destination,
- children,
-}: {
- destination: string;
- children: ReactNode;
-}) => {
+export interface DemoLinkProps extends ComponentProps<typeof Link> {
+ children?: ReactNode;
+}
+
+const DemoLink = ({ children, ...props }: DemoLinkProps) => {
  return (
  <div className="w-fit">
  <Link
+ {...props}
  target="_blank"
- to={destination}
  search=""
  className="flex-1 cursor-pointer rounded-md border-2 border-solid bg-white p-2 align-baseline font-black text-gray-800 hover:bg-gray-300"
  >

src/components/Devtools.tsx

@@ -0,0 +1,18 @@
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Suspense, lazy } from 'react';
+
+const TanStackRouterDevtools =
+ process.env.NODE_ENV === 'production'
+ ? () => null
+ : lazy(() =>
+ import('@tanstack/router-devtools').then(res => ({
+ default: res.TanStackRouterDevtools,
+ }))
+ );
+
+export const Devtools = () => (
+ <Suspense>
+ <TanStackRouterDevtools />
+ <ReactQueryDevtools />
+ </Suspense>
+);