feat!: support react 19, storybook 10 and styled-components 6

.github/ISSUE_TEMPLATE/bug_report.md

@@ -14,7 +14,11 @@ about: Bugs, missing documentation, or unexpected behavior 🤔.
 
 -->
 
--   `@freenow/wave` version:
+- `@freenow/wave` version:
+- `react` and `react-dom` versions:
+- `styled-components` version:
+- Node version (if the bug happens during the build, tests or server-side rendering):
+- Browser and version:
 
 ### Relevant code
 

.github/PREVIEW_TEMPLATE/minimal/README.md

@@ -1,3 +1,24 @@
-# Wave Design System
+# Wave preview template
 
-This template provides a minimal setup to get the Wave Design System working.
+A minimal Vite app for trying a pull request's build of `@freenow/wave`. The Package Preview workflow
+(`.github/workflows/preview.yml`) publishes every pull request with [pkg-pr-new](https://github.com/stackblitz-labs/pkg.pr.new),
+adds that build of `@freenow/wave` to this app, and links to it on StackBlitz in a comment on the pull request.
+
+## What it contains
+
+- React 19, React DOM and styled-components 6: the peer dependencies of Wave
+- `src/main.tsx` renders the global style that loads the CSS variables of the experimental components
+- `src/App.tsx` renders an experimental `Button`. Replace it with the components you want to check
+
+To check components from `@freenow/wave` instead of `@freenow/wave/experimental`, render `ModernColors` (maroon) or
+`ClassicColors` (blue) from `@freenow/wave` in `src/main.tsx` instead of the experimental global style.
+
+## Run it locally
+
+Install the preview build with the command from the pull request comment, then start the app:
+
+```sh
+npm install
+npm install <preview package URL from the pull request comment>
+npm run dev
+```

.github/PREVIEW_TEMPLATE/minimal/package.json

@@ -10,7 +10,8 @@
     },
     "dependencies": {
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "styled-components": "^6.5.3"
     },
     "devDependencies": {
         "@eslint/js": "^9.25.0",

.github/PREVIEW_TEMPLATE/minimal/src/main.tsx

@@ -1,10 +1,20 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { ColorPalette, createGlobalStyle } from '@freenow/wave/experimental';
 import './index.css';
 import App from './App.tsx';
 
+// Loads the CSS variables the experimental components are styled with.
+// Components from '@freenow/wave' need ModernColors or ClassicColors from '@freenow/wave' instead.
+const WaveColors = createGlobalStyle({
+    accent: ColorPalette.red['50'],
+    onAccent: ColorPalette.neutral['100'],
+    accentDark: ColorPalette.red['60']
+});
+
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
+        <WaveColors />
         <App />
     </StrictMode>
 );

.github/PULL_REQUEST_TEMPLATE.md

@@ -26,3 +26,13 @@ Please fill out the information below to expedite the review and (hopefully) mer
 ## How
 
 <!-- Often a list of things to describe the process to accomplish this PR -->
+
+## Checklist
+
+<!-- Tick what applies, and strike through or remove what does not -->
+
+- [ ] Tests cover the change, and `npm test` passes without console errors or warnings
+- [ ] New or changed components have a story, and their documentation is updated
+- [ ] New form components are added to `src/components/FormComponents.spec.tsx`
+- [ ] Checked with React 18 and React 19 (`npm run test:fixture` runs the consumer apps)
+- [ ] Breaking changes have a `BREAKING CHANGE:` footer in the commit message that explains what consumers need to change