Merge branch 'main' into fix/react-table-copy

Author: Lukas742

.github/workflows/chromatic.yml

@@ -25,7 +25,7 @@ jobs:
         run: yarn install --immutable
 
       - name: Publish to Chromatic
-        uses: chromaui/action@42839e8c28caf61a16433fa96a03b312bbc47ab5 # v16.6.3
+        uses: chromaui/action@a200f3ba3ff81232c47ac7942347fb212b1a67dc # v16.8.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/codeql-analysis.yml

@@ -121,7 +121,7 @@ jobs:
         run: npx cypress install
 
       - name: Cypress run
-        uses: cypress-io/github-action@c495c3ddffba403ba11be95fffb67e25203b3799 # v7.1.10
+        uses: cypress-io/github-action@dace029018fcdf86e0df89a31bc3cfa5b32570d8 # v7.3.0
         with:
           browser: chrome
           component: true

.github/workflows/test.yml

@@ -0,0 +1,45 @@
+import { SearchIcon } from '@storybook/icons';
+import * as React from 'react';
+import { IconButton } from 'storybook/internal/components';
+import { addons, types } from 'storybook/manager-api';
+
+const ADDON_ID = 'content-search';
+const TOOL_ID = `${ADDON_ID}/toolbar`;
+const isMac = navigator.platform.toUpperCase().includes('MAC');
+const shortcut = isMac ? '⌘⇧F' : 'Ctrl+Shift+F';
+
+function SearchButton() {
+  const openSearch = React.useCallback(() => {
+    const dialog = document.getElementById('pagefind-search-container');
+    if (dialog && dialog instanceof HTMLDialogElement && !dialog.open) {
+      dialog.showModal();
+      setTimeout(() => dialog.querySelector<HTMLInputElement>('.pagefind-ui__search-input')?.focus(), 50);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'f') {
+        e.preventDefault();
+        openSearch();
+      }
+    };
+    document.addEventListener('keydown', handleKeydown);
+    return () => document.removeEventListener('keydown', handleKeydown);
+  }, [openSearch]);
+
+  return (
+    <IconButton key={TOOL_ID} title={`Search docs (${shortcut})`} style={{ order: -2 }} onClick={openSearch}>
+      <SearchIcon />
+      Search Docs (Beta)
+    </IconButton>
+  );
+}
+
+addons.register(ADDON_ID, () => {
+  addons.add(TOOL_ID, {
+    type: types.TOOLEXTRA,
+    title: 'Search documentation content',
+    render: () => <SearchButton />,
+  });
+});

.storybook/components/ContentSearch.tsx

@@ -0,0 +1,17 @@
+#pagefind-search-container {
+  border: none;
+  padding: 1rem;
+  max-width: 80vw;
+  max-height: 80vh;
+  width: 100%;
+  overflow-y: auto;
+  background: var(--sapBackgroundColor);
+  border-radius: var(--sapElement_BorderCornerRadius);
+  box-shadow: var(--sapContent_Shadow3);
+}
+#pagefind-search-container::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+#pagefind-search-container .pagefind-ui__result-link {
+  color: var(--sapLinkColor);
+}

.storybook/content-search/content-search.css

@@ -0,0 +1,21 @@
+/* global PagefindUI */
+
+const container = document.getElementById('pagefind-search-container');
+
+if (container) {
+  try {
+    new PagefindUI({
+      element: '#pagefind-ui',
+      bundlePath: new URL('./pagefind/', import.meta.url).pathname,
+      showSubResults: true,
+      showImages: false,
+      showEmptyFilters: false,
+    });
+  } catch {
+    // PagefindUI may not be available in dev mode (index only exists after build)
+  }
+
+  container.addEventListener('click', (e) => {
+    if (e.target === container) container.close();
+  });
+}

.storybook/content-search/content-search.js

@@ -81,7 +81,7 @@ const config: StorybookConfig = {
       shouldRemoveUndefinedFromOptional: true,
     },
   },
-  staticDirs: isDevMode ? ['images-dev'] : ['images'],
+  staticDirs: isDevMode ? ['images-dev', 'content-search'] : ['images', 'content-search'],
   viteFinal: (viteConfig) =>
     mergeConfig(viteConfig, {
       build: {

.storybook/main.ts

@@ -52,3 +52,13 @@
   }
 </script>
 <link rel="icon" href="favicon.ico" />
+
+<!-- Pagefind content search (index built by scripts/storybook-search/build-index.ts) -->
+<link href="./pagefind/pagefind-ui.css" rel="stylesheet">
+<link href="./content-search.css" rel="stylesheet">
+
+<dialog id="pagefind-search-container" aria-label="Search documentation">
+  <div id="pagefind-ui"></div>
+</dialog>
+<script src="./pagefind/pagefind-ui.js" type="module"></script>
+<script src="./content-search.js" type="module"></script>

.storybook/manager-head.html

@@ -5,6 +5,7 @@ import { addons } from 'storybook/manager-api';
 import { Badge } from './components/Badge.js';
 import { Fiori4ReactTheme } from './theme.js';
 import './components/VersionSwitch.js';
+import './components/ContentSearch.js';
 
 const customTags = new Set(['package:@ui5/webcomponents-react-charts', 'custom']);