feat(Demo Site): DS Demo Site: Pt. 2

.github/workflows/chromatic.demo.yml

@@ -0,0 +1,22 @@
+name: "ds-demo-site/chromatic"
+on:
+  pull_request:
+    paths:
+      - configs/storybook/**
+      - packages/styles/**
+      - packages/utils/**
+      - packages/react/ds-core/**
+      - apps/react/demo/**
+jobs:
+  test-compile:
+    uses: ./.github/workflows/chromatic._template.yml
+    secrets:
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_TOKEN_CANONICAL_DS_DEMO_SITE }}
+    with:
+      working-directory: apps/react/demo
+      externals: '[
+        "configs/storybook/**",
+        "packages/styles/**",
+        "packages/utils/**",
+        "packages/react/ds-core/**"
+      ]'

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/data/defaultSettings.ts

@@ -0,0 +1,40 @@
+import type { ExampleControl } from "../ui/Example/index.js";
+
+export const FONT_CONTROL: ExampleControl = {
+  name: "fontFamily",
+  label: "Font family",
+  type: "choices",
+  value: "Arial",
+  default: "Arial",
+  choices: ["Arial", "Helvetica", "Times New Roman"],
+};
+
+export const FONT_SIZE_CONTROL: ExampleControl = {
+  name: "fontSize",
+  type: "number",
+  label: "Font size",
+  value: 16,
+  default: 16,
+  min: 12,
+  max: 24,
+  transformer: (fontSize) => `${fontSize}px`,
+};
+
+export const LINE_HEIGHT_CONTROL: ExampleControl = {
+  name: "lineHeight",
+  type: "number",
+  label: "Line height",
+  value: 1.5,
+  default: 1.5,
+  min: 0.5,
+  max: 4,
+  step: 0.5,
+};
+
+const DEFAULT_CONTROLS: ExampleControl[] = [
+  FONT_CONTROL,
+  FONT_SIZE_CONTROL,
+  LINE_HEIGHT_CONTROL,
+];
+
+export default DEFAULT_CONTROLS;

apps/react/demo/src/data/examples.ts

@@ -0,0 +1,21 @@
+import {
+  ButtonExample,
+  TypographicSpecimen,
+} from "../ui/Example/common/index.js";
+import type { ShowcaseExampleOpts } from "../ui/Example/index.js";
+import DEFAULT_CONTROLS from "./defaultSettings.js";
+
+export const SHOWCASE_EXAMPLES: ShowcaseExampleOpts[] = [
+  {
+    name: "Typographic Specimen",
+    description: "A typographic specimen with configurable font settings",
+    Component: TypographicSpecimen,
+    controls: DEFAULT_CONTROLS,
+  },
+  {
+    name: "example1",
+    description: "An example with font settings",
+    Component: ButtonExample,
+    controls: DEFAULT_CONTROLS,
+  },
+];

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

@@ -0,0 +1 @@
+export * from "./examples.js";

apps/react/demo/src/index.ts

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

apps/react/demo/src/routes/__root.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/routes/about.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/about")({
+  component: RouteComponent,
+});
+
+/**
+ * This route is purely for demonstration purposes currently.
+ * There are no links to this route, and `/` redirects to the showcase route.
+ * See the showcase route at ./showcase.tsx for a complete example that separates
+ * route from component logic.
+ */
+function RouteComponent() {
+  return <div>Hello "/about"!</div>;
+}

apps/react/demo/src/routes/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+// index route currently redirect to showcase
+export const Route = createFileRoute("/")({
+  loader: () => redirect({ to: "/showcase" }),
+});

apps/react/demo/src/routes/showcase.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Showcase } from "../ui/index.js";
+
+export const Page = Showcase;
+
+/**
+ * We construct the entire page inside the Showcase component from the UI layer to separate route and component logic.
+ * However, TanStack expects a named export for the route, so we need to re-export it here.
+ */
+export const Route = createFileRoute("/showcase")({
+  // Use the re-export from above
+  component: Page,
+});

apps/react/demo/src/ssr/entry-client.tsx

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