React 19 upgrade

.github/workflows/docs.yml

@@ -11,15 +11,19 @@ on:
 jobs:
     build:
         runs-on: ubuntu-latest
+        timeout-minutes: 20
+        permissions:
+            contents: read
         steps:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: 18
+                  node-version: 24
+                  cache: 'npm'
             - name: Install dependencies
               uses: bahmutov/npm-install@v1
               with:
-                  install-command: npm i --legacy-peer-deps
+                  install-command: npm ci --legacy-peer-deps
             - name: Build docs
               run: npm run build:documentation
             - uses: actions/upload-artifact@v4
@@ -31,13 +35,16 @@ jobs:
         if: github.ref == 'refs/heads/main'
         needs: build
         runs-on: ubuntu-latest
+        timeout-minutes: 10
+        permissions:
+            contents: write
         steps:
             - uses: actions/download-artifact@v4
               with:
                   name: storybook-dist
                   path: public
             - name: Deploy
-              uses: peaceiris/actions-gh-pages@v3
+              uses: peaceiris/actions-gh-pages@v4
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}
                   publish_dir: public

.github/workflows/library.yml

@@ -12,15 +12,21 @@ jobs:
     build:
         if: github.ref != 'refs/heads/main'
         runs-on: ubuntu-latest
+        timeout-minutes: 15
+        permissions:
+            contents: read
         steps:
             - uses: actions/checkout@v4
               with:
                   fetch-depth: 0
             - uses: actions/setup-node@v4
               with:
                   node-version: 24
+                  cache: 'npm'
             - name: Install dependencies
               uses: bahmutov/npm-install@v1
+              with:
+                  install-command: npm ci --legacy-peer-deps
             - name: Run linter
               run: npm run lint
             - name: Run build
@@ -31,6 +37,7 @@ jobs:
     release:
         if: github.ref == 'refs/heads/main'
         runs-on: ubuntu-latest
+        timeout-minutes: 15
         permissions:
             contents: write # to be able to publish a GitHub release
             issues: write # to be able to comment on released issues
@@ -43,8 +50,11 @@ jobs:
             - uses: actions/setup-node@v4
               with:
                   node-version: 24
+                  cache: 'npm'
             - name: Install dependencies
               uses: bahmutov/npm-install@v1
+              with:
+                  install-command: npm ci --legacy-peer-deps
             - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
               run: npm audit signatures
             - name: Run build
@@ -57,6 +67,9 @@ jobs:
     merge-main:
         if: github.ref == 'refs/heads/main'
         runs-on: ubuntu-latest
+        timeout-minutes: 5
+        permissions:
+            contents: write
         steps:
             - uses: actions/checkout@v4
               with:

.github/workflows/preview.yml

@@ -9,20 +9,25 @@ on:
 jobs:
     build:
         runs-on: ubuntu-latest
+        timeout-minutes: 15
+        permissions:
+            contents: read
+            pull-requests: write # to post the preview comment
         steps:
             - name: Checkout code
               uses: actions/checkout@v4
 
             - name: Setup node
               uses: actions/setup-node@v4
+              with:
+                  node-version: 24
+                  cache: 'npm'
 
             - name: Install deps
-              run: npm install
+              run: npm ci --legacy-peer-deps
 
             - name: Build package
               run: npm run build
 
             - name: Publish preview
-              # TODO: use the commented line below when package is react19 compatible
-              # run: npx pkg-pr-new publish --compact --comment=update --template './.github/PREVIEW_TEMPLATE/*'
-              run: npx pkg-pr-new publish --compact --comment=update
+              run: npx pkg-pr-new publish --compact --comment=update --template './.github/PREVIEW_TEMPLATE/*'

.husky/commit-msg

@@ -0,0 +1,2 @@
+#!/bin/sh
+npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/bin/sh
+npm run husky:precommit

.storybook/main.ts

@@ -1,25 +1,14 @@
-import { StorybookConfig } from '@storybook/react-webpack5';
+import { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
     stories: ['../**/*.storybook.mdx', '../src/**/*.stories.@(ts|tsx)'],
-
-    addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        '@storybook/addon-interactions',
-        '@storybook/addon-viewport',
-        'storybook-dark-mode'
-    ],
+    addons: ['storybook-dark-mode', '@storybook/addon-docs'],
 
     framework: {
-        name: '@storybook/react-webpack5',
+        name: '@storybook/react-vite',
         options: {}
     },
 
-    docs: {
-        autodocs: true
-    },
-
     staticDirs: ['../public'],
 
     typescript: {

.storybook/preview.tsx

@@ -1,15 +1,24 @@
-import React, { useLayoutEffect } from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { I18nProvider } from 'react-aria-components';
-import { Preview } from '@storybook/react';
-import { themes } from '@storybook/theming';
-import { DocsContainer } from '@storybook/addon-docs';
-import { useDarkMode } from 'storybook-dark-mode';
+import { Preview } from '@storybook/react-vite';
+import { themes } from 'storybook/theming';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { addons } from 'storybook/preview-api';
+import { useDarkMode, DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+
+const STORAGE_KEY = 'sb-addon-themes-3';
+
+const getInitialDarkMode = (): boolean => {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) return JSON.parse(stored).current === 'dark';
+    } catch {}
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+};
 
 import { GlobalStyle as ClassicColors } from '../src/essentials/Colors/Colors';
 import { GlobalStyle as ModernColors } from '../src/essentials/Colors/ModernColors';
 import { createGlobalStyle, ColorPalette as ExperimentalColors } from '../src/essentials/experimental/Colors';
-import { DarkScheme, LightScheme } from '../src/components/ColorScheme';
-
 import { LightTheme, DarkTheme } from '../src/docs/storybook-theme/FreenowTheme';
 
 const THEMES = {
@@ -46,7 +55,7 @@ export const withTheme = (Story, context) => {
 
     useLayoutEffect(() => {
         document.body.style.fontFamily = font;
-    }, []);
+    }, [font]);
 
     return (
         <>
@@ -57,12 +66,17 @@ export const withTheme = (Story, context) => {
 };
 
 export const withColorScheme = (Story, context) => {
-    const SchemeWrapper = useDarkMode() ? DarkScheme : LightScheme;
+    // useDarkMode from storybook-dark-mode works inside decorators (preview hook context)
+    const isDark = useDarkMode();
+    const schemeClass = isDark ? 'dark-scheme' : 'light-scheme';
 
     return (
-        <SchemeWrapper>
+        <div
+            className={`${schemeClass} wave`}
+            style={{ background: 'var(--wave-background-page-default)', minHeight: '100%' }}
+        >
             <Story {...context} />
-        </SchemeWrapper>
+        </div>
     );
 };
 
@@ -106,9 +120,20 @@ export const preview: Preview = {
         },
         docs: {
             container: props => {
-                const scheme = useDarkMode() ? DarkTheme : LightTheme;
-                const globals = props.context.store.globals.get();
-                const { Colors } = THEMES[globals.theme];
+                // Use React hooks + channel to track dark mode in docs context.
+                // storybook-dark-mode's useDarkMode() uses preview-api hooks which
+                // only work in decorator/story context, not here.
+                const [isDark, setIsDark] = useState(getInitialDarkMode);
+                useEffect(() => {
+                    const channel = addons.getChannel();
+                    channel.on(DARK_MODE_EVENT_NAME, setIsDark);
+                    return () => channel.off(DARK_MODE_EVENT_NAME, setIsDark);
+                }, []);
+
+                const scheme = isDark ? DarkTheme : LightTheme;
+                const globals = props.context.globals ?? {};
+                const theme = (globals.theme as keyof typeof THEMES) ?? 'modern';
+                const { Colors } = THEMES[theme] ?? THEMES.modern;
 
                 return (
                     <>
@@ -122,10 +147,10 @@ export const preview: Preview = {
             }
         },
         backgrounds: {
-            disable: true
+            disabled: true
         },
         viewport: {
-            viewports: {
+            options: {
                 mobile: {
                     name: 'Mobile',
                     styles: {
@@ -191,7 +216,9 @@ export const preview: Preview = {
                 dynamicTitle: true
             }
         }
-    }
+    },
+
+    tags: ['autodocs']
 };
 
 export default preview;