feat(landingpage): reflect elements storybook version in URL (#1380)

Closes #1338 

---------

Co-authored-by: Jan-Niklas Voß <[email protected]>

packages/landingpage/app/[lang]/_components/layout/header/versionSelect.tsx

@@ -1,20 +1,39 @@
-import React from 'react';
-import { useVersion } from '@hooks/useVersion';
+import React, { useCallback } from 'react';
 import { InoOption, InoSelect } from '@inovex.de/elements-react';
+import { useVersion } from '@hooks/useVersion';
 import styles from './versionSelect.module.scss';
+import { usePathname, useSearchParams, useRouter } from 'next/navigation';
 
 const VersionSelect = () => {
-  const { selectedVersion, setSelectedVersion, versions } = useVersion();
+  const { versions } = useVersion();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
 
-  const handleVersionChange = (e: CustomEvent) => {
-    setSelectedVersion(e.detail);
-  };
+  // Utility function to create a query string
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+      return params.toString();
+    },
+    [searchParams],
+  );
+
+  const handleVersionChange = useCallback(
+    (e: CustomEvent) => {
+      const newVersion = e.detail;
+      // Navigate using router with the new query string
+      router.push(`${pathname}?${createQueryString('version', newVersion)}`);
+    },
+    [createQueryString, pathname, router],
+  );
 
   return (
     <InoSelect
       name="select-version"
       label="Version"
-      value={selectedVersion}
+      value={searchParams.get('version') || versions[0]}
       onValueChange={handleVersionChange}
       outline
       className={styles.versionSelect}

packages/landingpage/utils/context/VersionContext.tsx

@@ -1,33 +1,19 @@
 import { createContext, ReactNode, useState, useEffect } from 'react';
 
 export interface VersionContextType {
-  selectedVersion: string | undefined;
-  setSelectedVersion: (value: string | undefined) => void;
   versions: string[];
 }
 
 export const VersionContext = createContext<VersionContextType | undefined>(undefined);
 
 export const VersionProvider = ({ children }: { children: ReactNode }) => {
-  const [selectedVersion, setSelectedVersion] = useState<string | undefined>(undefined);
   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]);
-        }
-      });
+      .then(data => setVersions(data.reverse()));
   }, []);
 
-  return (
-    <VersionContext.Provider value={{ selectedVersion, setSelectedVersion, versions }}>
-      {children}
-    </VersionContext.Provider>
-  );
+  return <VersionContext.Provider value={{ versions }}>{children}</VersionContext.Provider>;
 };

packages/landingpage/utils/hooks/useStorybookUrl.ts

@@ -1,29 +1,22 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { useVersion } from '@hooks/useVersion';
 
 export const WELCOME_PAGE_PLACEHOLDER = 'docs-welcome--docs';
+
 export const useStorybookUrl = () => {
-  const { selectedVersion } = useVersion();
   const searchParams = useSearchParams();
-  const [initialStorybookUrl, setInitialStorybookUrl] = useState<string | null>(null);
+  const version = searchParams.get('version');
+  const storybookUrl = useMemo(() => {
+    const version = searchParams.get('version') || 'latest'; // Default to 'latest'
+    const element = searchParams.get('element') || WELCOME_PAGE_PLACEHOLDER;
+    const url = process.env.NEXT_PUBLIC_STORYBOOK_URL;
 
-  useEffect(() => {
-    if (!process.env.NEXT_PUBLIC_STORYBOOK_URL)
+    if (!url) {
       throw new Error('NEXT_PUBLIC_STORYBOOK_URL not found in environment variables.');
-
-    let baseStorybookUrl = process.env.NEXT_PUBLIC_STORYBOOK_URL;
-
-    if (selectedVersion) {
-      baseStorybookUrl = baseStorybookUrl.replace('latest', selectedVersion);
     }
 
-    const newUrl = [baseStorybookUrl, '?path=/docs/', searchParams?.get('element') ?? WELCOME_PAGE_PLACEHOLDER].join(
-      '',
-    );
-
-    setInitialStorybookUrl(newUrl);
-  }, [selectedVersion]);
+    return `${url.replace('latest', version)}?path=/docs/${element}`;
+  }, [version]);
 
-  return initialStorybookUrl;
+  return storybookUrl;
 };