feat(storybook): allow to choose different versions in storybook

packages/landingpage/components/layout/header/desktop/header.desktop.module.scss

@@ -20,11 +20,10 @@ $header-height--shrunk: 70px;
   width: 100%;
 
   display: grid;
-  grid-template-columns: auto 1fr auto auto;
+  grid-template-columns: auto auto 1fr auto auto;
   grid-template-rows: 1fr;
   column-gap: 30px;
-  grid-template-areas:
-    "logo navbar github language";
+  grid-template-areas: 'logo versionSelect navbar github language';
   align-items: center;
 }
 
@@ -51,16 +50,20 @@ $header-height--shrunk: 70px;
     text-transform: uppercase;
     padding: 5px;
 
-    &:hover, &.selected {
+    &:hover,
+    &.selected {
       text-decoration-line: underline;
       text-underline-offset: 5px;
     }
 
     &.selected {
-      color: #2C02FF;
+      color: #2c02ff;
     }
   }
 }
+.versionContainer {
+  grid-area: versionSelect;
+}
 
 .navbar {
   grid-area: navbar;

packages/landingpage/components/layout/header/desktop/header.desktop.tsx

@@ -2,12 +2,16 @@ import ElementsLogo from '@assets/elements.svg';
 import Image from 'next/image';
 import Link from 'next/link';
 import useTranslation from '../../../../utils/hooks/useTranslation';
+import VersionSelect from 'components/shared/versionSelect';
+import { useRouter } from 'next/router';
 import styles from './header.desktop.module.scss';
 import LocaleSwitcher from './localeSwitcher';
 import Navbar from './navbar';
 
 export default function HeaderDesktop() {
   const { locale } = useTranslation();
+  const router = useRouter();
+  const isLibraryPage = router.pathname.endsWith('/library/components');
 
   return (
     <header className={styles.header}>
@@ -28,6 +32,11 @@ export default function HeaderDesktop() {
             />
           </Link>
         </div>
+        {isLibraryPage && (
+          <div className={styles.versionContainer}>
+            <VersionSelect />
+          </div>
+        )}
         <div className={styles.language}>
           <LocaleSwitcher />
         </div>

packages/landingpage/components/layout/header/mobile/header.mobile.module.scss

@@ -1,7 +1,14 @@
-.icon {
+.menuIconContainer {
+  display: flex;
+  align-items: center;
   position: fixed;
   top: 25px;
   left: 25px;
+  gap: 25px;
+  z-index: 1;
+}
+
+.icon {
   cursor: pointer;
   color: var(--inovex-elements-n-7);
   transition: color 300ms;

packages/landingpage/components/layout/header/mobile/header.mobile.tsx

@@ -11,6 +11,7 @@ import LinkItem from '../../linkItem';
 import useTranslation from '../../../../utils/hooks/useTranslation';
 import { useRouter } from 'next/router';
 import { ContactButton } from '../../../shared/contactButton';
+import VersionSelect from 'components/shared/versionSelect';
 
 const MenuIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
@@ -49,7 +50,10 @@ export default function HeaderMobile() {
 
   return (
     <>
-      <MenuIcon className={styles.icon} onClick={toggleMenu} />
+      <div className={styles.menuIconContainer}>
+        <MenuIcon className={styles.icon} onClick={toggleMenu} />
+        <VersionSelect />
+      </div>
       <div
         ref={ref}
         className={classNames({

packages/landingpage/components/shared/versionSelect.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { InoSelect, InoOption } from '@elements';
+import { useVersion } from 'utils/context/VersionContext';
+
+export default function VersionSelect() {
+  const { selectedVersion, setSelectedVersion, versions } = useVersion();
+
+  const handleVersionChange = (e: CustomEvent) => {
+    setSelectedVersion(e.detail);
+  };
+
+  return (
+    <InoSelect
+      name="select-version"
+      label="Version"
+      value={selectedVersion}
+      onValueChange={handleVersionChange}
+      outline
+    >
+      <div style={{ maxHeight: '200px' }}>
+        {versions.map((version, i) => (
+          <InoOption key={i} value={version}>
+            {version}
+          </InoOption>
+        ))}
+      </div>
+    </InoSelect>
+  );
+}

packages/landingpage/pages/[lang]/library/components/index.module.scss

@@ -19,3 +19,19 @@
     --ino-icon-color-primary: white;
   }
 }
+
+.versionSelect {
+  position: fixed;
+  height: 80px;
+  bottom: 120px;
+  z-index: 10;
+  right: -190px;
+  transition: right 200ms;
+  &:hover {
+    right: 0;
+  }
+
+  ino-select {
+    width: 170px;
+  }
+}

packages/landingpage/pages/[lang]/library/components/index.tsx

@@ -14,11 +14,13 @@ import {
 import { useStorybookUrl } from '../../../../utils/hooks/useStorybookUrl';
 import { useStorybookUrlSyncer } from '../../../../utils/hooks/useStorybookUrlSyncer';
 import useTranslation from '../../../../utils/hooks/useTranslation';
+import { useVersion } from '../../../../utils/context/VersionContext';
 import styles from './index.module.scss';
 
 const StoryBookPage: NextPage<void> = () => {
   const { t } = useTranslation();
   const { hideFooter } = useContext(UiContext) as UiContextType;
+  const {selectedVersion} = useVersion();
 
   const { initialUrl, fromLandingpageToStorybookUrl } = useStorybookUrl();
   const currentStory = useStorybookUrlSyncer();
@@ -27,8 +29,8 @@ const StoryBookPage: NextPage<void> = () => {
     [currentStory]
   );
 
-  // prevent scrolling of body while in storybook
   useEffect(() => {
+    // prevent scrolling of body while in storybook
     document.body.style.overflow = 'clip';
     hideFooter(true);
 
@@ -38,6 +40,10 @@ const StoryBookPage: NextPage<void> = () => {
     };
   }, []);
 
+  const iframeUrl = selectedVersion
+    ? `https://elements.inovex.de/version/${selectedVersion}/?path=/story/docs-welcome--page`
+    : initialUrl;
+
   return (
     <Page title={[t('common.meta.library')]}>
       <div className={styles.container}>
@@ -59,9 +65,9 @@ const StoryBookPage: NextPage<void> = () => {
           </a>
         )}
         {!initialUrl && <InoSpinner type="circle"></InoSpinner>}
-        {initialUrl && (
+        {iframeUrl && (
           <iframe
-            src={initialUrl}
+            src={iframeUrl}
             style={{
               position: 'absolute',
               left: 0,

packages/landingpage/pages/_app.tsx

@@ -12,6 +12,7 @@ import { LanguageProvider } from 'utils/context/LanguageContext';
 import useDefaultLocale from '../translations/useDefaultLocale';
 import { useMount } from 'react-use';
 import UiContextProvider from '../utils/context/UiContext';
+import { VersionProvider } from '../utils/context/VersionContext';
 
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
@@ -26,9 +27,11 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <UiContextProvider>
       <LanguageProvider localization={pageProps.localization}>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
+        <VersionProvider>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </VersionProvider>
       </LanguageProvider>
     </UiContextProvider>
   );

packages/landingpage/utils/context/VersionContext.tsx

@@ -0,0 +1,43 @@
+import { createContext, ReactNode, useContext, useState, useEffect } from 'react';
+
+export interface VersionContextType {
+  selectedVersion: string;
+  setSelectedVersion: (value: string) => void;
+  versions: string[];
+}
+
+export const VersionContext = createContext<VersionContextType | null>(null);
+
+export const VersionProvider = ({ children }: { children: ReactNode }) => {
+  const [selectedVersion, setSelectedVersion] = useState<string>('');
+  const [versions, setVersions] = useState<string[]>([]);
+
+  useEffect(() => {
+    fetch('https://raw.githubusercontent.com/inovex/elements/pages/hosted-versions.json')
+      .then((response) => response.json())
+      .then((data) => {
+        const reversedVersions = data.reverse();
+        setVersions(reversedVersions);
+
+        if (reversedVersions.length > 0) {
+          setSelectedVersion(reversedVersions[0]);
+        }
+      });
+  }, []);  
+
+  return (
+    <VersionContext.Provider value={{ selectedVersion, setSelectedVersion, versions }}>
+      {children}
+    </VersionContext.Provider>
+  );
+};
+
+export const useVersion = (): VersionContextType => {
+  const context = useContext(VersionContext);
+
+  if (!context) {
+    throw new Error('useVersion must be used within a VersionProvider');
+  }
+
+  return context;
+}