Demo site part 2

Author: jmuzina

apps/react/demo/biome.json

@@ -2,6 +2,7 @@
   "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "extends": ["@canonical/biome-config"],
   "files": {
-    "include": ["src", "*.json", "vite.config.ts"]
+    "include": ["src", "*.json", "vite.config.ts"],
+    "ignore": ["src/routeTree.gen.ts"]
   }
 }

apps/react/demo/package.json

@@ -20,20 +20,24 @@
     "check:biome": "biome check",
     "check:biome:fix": "biome check --write",
     "check:ts": "tsc --noEmit",
-    "storybook": "storybook dev -p 6010 --no-open --host 0.0.0.0"
+    "storybook": "storybook dev -p 6011 --no-open --host 0.0.0.0"
   },
   "dependencies": {
     "@canonical/storybook-config": "^0.9.0-experimental.5",
     "@canonical/react-ssr": "^0.9.0-experimental.10",
     "@canonical/styles": "^0.9.0-experimental.9",
+    "@tanstack/react-router": "^1.114.25",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-shadow": "^20.6.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@canonical/biome-config": "^0.9.0-experimental.2",
     "@canonical/react-ds-core": "^0.9.0-experimental.11",
     "@canonical/typescript-config-react": "^0.9.0-experimental.2",
+    "@tanstack/react-router-devtools": "^1.114.25",
+    "@tanstack/router-plugin": "^1.114.25",
     "@chromatic-com/storybook": "^3.2.2",
     "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",

apps/react/demo/src/.gitignore

@@ -0,0 +1,2 @@
+# Routing tree generated by TanStack
+routeTree.gen.ts

apps/react/demo/src/Application.tsx

@@ -1,56 +1,18 @@
-import { Button, TooltipArea } from "@canonical/react-ds-core";
-import React, { Suspense, useState, lazy } from "react";
-import canonicalLogo from "./assets/canonical.svg";
-import reactLogo from "./assets/react.svg";
-import "./Application.css";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
 
-const LazyButton = lazy(
-  () =>
-    new Promise((resolve) => {
-      // @ts-ignore
-      setTimeout(() => resolve(import("./LazyComponent.js")), 2000);
-    }),
-);
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen.js";
 
-function App() {
-  const [count, setCount] = useState(0);
+const router = createRouter({ routeTree });
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
 
-  return (
-    <>
-      <div>
-        <a
-          href="https://canonical.com"
-          target="_blank"
-          referrerPolicy="no-referrer"
-          rel="noreferrer"
-        >
-          <img src={canonicalLogo} className="logo" alt="Canonical logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Canonical Design System</h1>
-      <h2>React Vite template</h2>
-      <Suspense fallback={"Loading..."}>
-        <LazyButton />
-      </Suspense>
-      <div className="card">
-        <TooltipArea
-          preferredDirections={["right", "bottom"]}
-          Message={`Increment count to ${count + 1}`}
-        >
-          <Button
-            label={`Count: ${count}`}
-            onClick={() => setCount((count) => count + 1)}
-          />
-        </TooltipArea>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-    </>
-  );
+function App() {
+  return <RouterProvider router={router} />;
 }
 
 export default App;

apps/react/demo/src/ExampleComponent/ExampleComponent.stories.tsx

@@ -1 +1 @@
-export * from "./ExampleComponent/index.js";
+export * from "./ui/index.js";

apps/react/demo/src/ExampleComponent/ExampleComponent.tests.tsx

@@ -0,0 +1,11 @@
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools position={"top-right"} />
+    </>
+  ),
+});

apps/react/demo/src/ExampleComponent/ExampleComponent.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/about")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/about"!</div>;
+}

apps/react/demo/src/ExampleComponent/index.ts

@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Showcase } from "./showcase.js";
+
+// For now, redirect all requests to the showcase
+export const Route = createFileRoute("/")({
+  component: Showcase,
+});
+
+function Index() {
+  return <span>Home</span>;
+}

apps/react/demo/src/ExampleComponent/styles.css

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ShowcaseComponent } from "../ui/index.js";
+export const Route = createFileRoute("/showcase")({
+  component: Showcase,
+});
+
+export function Showcase() {
+  return <ShowcaseComponent />;
+}

apps/react/demo/src/ExampleComponent/types.ts

@@ -3,5 +3,3 @@ import "../index.css";
 import Application from "../Application.js";
 
 hydrateRoot(document.getElementById("root") as HTMLElement, <Application />);
-
-console.log("hydrated");

apps/react/demo/src/LazyComponent.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Component from "./Showcase.js";
+
+const meta = {
+  title: "Showcase",
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

apps/react/demo/src/index.ts

@@ -0,0 +1,25 @@
+import {
+  ConfigProvider,
+  ExampleControls,
+  ExampleRenderer,
+  SHOWCASE_EXAMPLES,
+} from "./index.js";
+
+const Showcase = () => {
+  return (
+    <ConfigProvider examples={SHOWCASE_EXAMPLES}>
+      <div>
+        <ExampleRenderer />
+        <ExampleControls
+          style={{
+            position: "fixed",
+            left: 0,
+            bottom: 0,
+          }}
+        />
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default Showcase;