diff --git a/.github/workflows/chromatic.demo.yml b/.github/workflows/chromatic.demo.yml
new file mode 100644
index 00000000..a4aacaf4
--- /dev/null
+++ b/.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/**"
+ ]'
\ No newline at end of file
diff --git a/apps/react/demo/package.json b/apps/react/demo/package.json
index cdf52d0c..9b901f51 100644
--- a/apps/react/demo/package.json
+++ b/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",
diff --git a/apps/react/demo/src/.gitignore b/apps/react/demo/src/.gitignore
new file mode 100644
index 00000000..d7467f2e
--- /dev/null
+++ b/apps/react/demo/src/.gitignore
@@ -0,0 +1,2 @@
+# Routing tree generated by TanStack
+routeTree.gen.ts
\ No newline at end of file
diff --git a/apps/react/demo/src/Application.tsx b/apps/react/demo/src/Application.tsx
index 616b5fdb..4e7f70ff 100644
--- a/apps/react/demo/src/Application.tsx
+++ b/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 (
- <>
-
- Canonical Design System
- React Vite template
-
-
-
-
-
-
-
- Edit src/App.tsx
and save to test HMR
-
-
- >
- );
+function App() {
+ return ;
}
export default App;
diff --git a/apps/react/demo/src/ExampleComponent/ExampleComponent.stories.tsx b/apps/react/demo/src/ExampleComponent/ExampleComponent.stories.tsx
deleted file mode 100644
index 6e763eab..00000000
--- a/apps/react/demo/src/ExampleComponent/ExampleComponent.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/* @canonical/generator-ds 0.9.0-experimental.9 */
-
-// Needed for function-based story, safe to remove otherwise
-// import type { ExampleComponentProps } from './types.js'
-import type { Meta, StoryObj } from "@storybook/react";
-import Component from "./ExampleComponent.js";
-// Needed for template-based story, safe to remove otherwise
-// import type { StoryFn } from '@storybook/react'
-
-const meta = {
- title: "ExampleComponent",
- component: Component,
-} satisfies Meta;
-
-export default meta;
-
-/*
- CSF3 story
- Uses object-based story declarations with strong TS support (`Meta` and `StoryObj`).
- Uses the latest storybook format.
-*/
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- children: Hello world!,
- },
-};
-
-/*
- Function-based story
- Direct arguments passed to the component
- Simple, but can lead to repetition if used across multiple stories with similar configurations
-
- export const Default = (args: ExampleComponentProps) => ;
- Default.args = { children: Hello world! };
-*/
-
-/*
- Template-Based story
- Uses a template function to bind story variations, making it more reusable
- Slightly more boilerplate but more flexible for creating multiple stories with different configurations
-
- const Template: StoryFn = (args) => ;
- export const Default: StoryFn = Template.bind({});
- Default.args = {
- children: Hello world!
- };
-*/
-
-/*
- Static story
- Simple and straightforward, but offers the least flexibility and reusability
-
- export const Default: StoryFn = () => (
- Hello world!
- );
-*/
diff --git a/apps/react/demo/src/ExampleComponent/ExampleComponent.tests.tsx b/apps/react/demo/src/ExampleComponent/ExampleComponent.tests.tsx
deleted file mode 100644
index 25ca7841..00000000
--- a/apps/react/demo/src/ExampleComponent/ExampleComponent.tests.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-/* @canonical/generator-ds 0.9.0-experimental.9 */
-
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import Component from "./ExampleComponent.js";
-
-describe("ExampleComponent component", () => {
- it("renders", () => {
- render(ExampleComponent);
- expect(screen.getByText("ExampleComponent")).toBeInTheDocument();
- });
-
- it("applies className", () => {
- render(ExampleComponent);
- expect(screen.getByText("ExampleComponent")).toHaveClass("test-class");
- });
-});
diff --git a/apps/react/demo/src/ExampleComponent/ExampleComponent.tsx b/apps/react/demo/src/ExampleComponent/ExampleComponent.tsx
deleted file mode 100644
index 6cd877c8..00000000
--- a/apps/react/demo/src/ExampleComponent/ExampleComponent.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/* @canonical/generator-ds 0.9.0-experimental.9 */
-import type React from "react";
-import type { ExampleComponentProps } from "./types.js";
-import "./styles.css";
-
-const componentCssClassName = "ds example-component";
-
-/**
- * description of the ExampleComponent component
- * @returns {React.ReactElement} - Rendered ExampleComponent
- */
-const ExampleComponent = ({
- id,
- children,
- className,
- style,
-}: ExampleComponentProps): React.ReactElement => {
- return (
-
- {children}
-
- );
-};
-
-export default ExampleComponent;
diff --git a/apps/react/demo/src/ExampleComponent/index.ts b/apps/react/demo/src/ExampleComponent/index.ts
deleted file mode 100644
index 9094f213..00000000
--- a/apps/react/demo/src/ExampleComponent/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/* @canonical/generator-ds 0.9.0-experimental.9 */
-export { default as ExampleComponent } from "./ExampleComponent.js";
-export * from "./types.js";
diff --git a/apps/react/demo/src/ExampleComponent/styles.css b/apps/react/demo/src/ExampleComponent/styles.css
deleted file mode 100644
index 2f9c6792..00000000
--- a/apps/react/demo/src/ExampleComponent/styles.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* @canonical/generator-ds 0.9.0-experimental.9 */
-
-/*
-.ds.example-component {
-
-}
-*/
diff --git a/apps/react/demo/src/ExampleComponent/types.ts b/apps/react/demo/src/ExampleComponent/types.ts
deleted file mode 100644
index 1bf992ee..00000000
--- a/apps/react/demo/src/ExampleComponent/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/* @canonical/generator-ds 0.9.0-experimental.9 */
-import type React from "react";
-
-export interface ExampleComponentProps {
- /* A unique identifier for the ExampleComponent */
- id?: string;
- /* Additional CSS classes */
- className?: string;
- /* Child elements */
- children?: React.ReactNode;
- /* Inline styles */
- style?: React.CSSProperties;
-}
diff --git a/apps/react/demo/src/LazyComponent.tsx b/apps/react/demo/src/LazyComponent.tsx
deleted file mode 100644
index 8b80fd2a..00000000
--- a/apps/react/demo/src/LazyComponent.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Button } from "@canonical/react-ds-core";
-
-function LazyComponent() {
- return (
-