docs: create version switch toolbar button (v1) (#6271)

Co-authored-by: Marcus Notheis <[email protected]>

Author: Lukas742

.storybook/addons/version-switch/manager.ts

@@ -0,0 +1 @@
+import '../../components/VersionSwitch.js';

.storybook/components/VersionSwitch.tsx

@@ -0,0 +1,60 @@
+import { IconButton } from '@storybook/components';
+import { addons, types } from '@storybook/manager-api';
+import { ActionSheet, Button, ThemeProvider } from '@ui5/webcomponents-react';
+import * as React from 'react';
+
+const ADDON_ID = 'version-switch';
+const TOOL_ID = `${ADDON_ID}/toolbar`;
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(TOOL_ID, {
+    type: types.TOOLEXTRA,
+    title: 'Version Switch',
+    render: () => {
+      const [open, setOpen] = React.useState(false);
+
+      const handleVersionSelect = (e) => {
+        const { slug } = e.target.dataset;
+        window.location.href = `https://sap.github.io/ui5-webcomponents-react/${slug}/`;
+      };
+
+      const activeVersionSlug =
+        window.location.pathname.replace('/ui5-webcomponents-react/', '').replaceAll('/', '') || 'nightly';
+      const activeVersion = activeVersionSlug.at(0).toUpperCase() + activeVersionSlug.slice(1);
+      return (
+        <ThemeProvider>
+          <IconButton
+            active
+            key={TOOL_ID}
+            id={TOOL_ID}
+            title="Version Switch"
+            style={{ order: -1 }}
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            Version: {activeVersion}
+          </IconButton>
+          <ActionSheet
+            placementType="Bottom"
+            open={open}
+            opener={TOOL_ID}
+            onAfterClose={() => {
+              setOpen(false);
+            }}
+          >
+            <Button onClick={handleVersionSelect} data-slug={'v2'}>
+              Version 2
+            </Button>
+            <Button onClick={handleVersionSelect} data-slug={'v1'}>
+              Version 1
+            </Button>
+            <Button onClick={handleVersionSelect} data-slug={'nightly'}>
+              🚧 Nightly
+            </Button>
+          </ActionSheet>
+        </ThemeProvider>
+      );
+    }
+  });
+});

.storybook/main.ts

@@ -6,6 +6,7 @@ import { isChromatic } from './utils';
 const isDevMode = process.env.NODE_ENV === 'development';
 
 const addons = [
+  './addons/version-switch',
   {
     name: '@storybook/addon-essentials',
     options: {

package.json

@@ -11,7 +11,7 @@
     "start:storybook": "storybook dev -p 6006",
     "setup": "lerna run build:i18n && lerna run build:css && lerna run build:css-bundle && rimraf node_modules/@types/mocha",
     "build": "yarn setup && tsc --build && lerna run build:client && lerna run build:wrapper && lerna run build:ssr",
-    "build:storybook": "lerna run build:i18n && yarn create-cypress-commands-docs && storybook build -o .out",
+    "build:storybook": "yarn build && yarn create-cypress-commands-docs && storybook build -o .out",
     "build:storybook-sitemap": "node ./scripts/create-storybook-sitemap.js --directory .out",
     "test:prepare": "rimraf temp && lerna run build",
     "test:cypress": "cypress run --component --browser chrome",