Grouped iOS API reference hosting files by SDK (#1817)

Added API references for HMSRoomModels SDK

---------

Co-authored-by: Pawan Dixit <[email protected]>
Co-authored-by: KaustubhKumar05 <[email protected]>

api-references.js

@@ -0,0 +1,16 @@
+export const references = {
+    Web: '/api-reference/javascript/v2/home/content',
+    Android: '/api-reference/android/v2/index.html',
+    'React Native': '/api-reference/react-native/v2/modules.html',
+    Flutter:
+        'https://pub.dev/documentation/hmssdk_flutter/latest/hmssdk_flutter/hmssdk_flutter-library.html',
+    iOS: [
+        { name: 'HMSSDK Reference', link: '/api-reference/ios/v2/documentation/hmssdk' },
+
+        {
+            name: 'HMSRoomModels SDK Reference',
+            link: '/api-reference/ios/HMSRoomModelsSDK/documentation/hmsroommodels/hmsroommodel'
+        }
+    ]
+    // 'Server side': ''
+};

common.js

@@ -0,0 +1,8 @@
+export const exposedPlatformNames = {
+    FLUTTER: 'Flutter',
+    IOS: 'iOS',
+    ANDROID: 'Android',
+    WEB: 'Web',
+    SERVER: 'Server side',
+    REACTNATIVE: 'React Native'
+};

components/Header.tsx

@@ -13,6 +13,9 @@ import { Flex, Text, useTheme } from '@100mslive/react-ui';
 import ActiveLink, { ActiveLinkProps } from './ActiveLink';
 import SearchModal from './SearchModal';
 import { WebsiteLink, DashboardLink, GitHubLink, DiscordLink, ContactLink } from '@/lib/utils';
+import { references } from 'api-references';
+import { exposedPlatformNames } from 'common';
+import { NavAPIReference } from './NavAPIReference';
 
 interface Props {
     menuState: {
@@ -21,13 +24,13 @@ interface Props {
     };
     setModal: React.Dispatch<React.SetStateAction<boolean>>;
     modal: boolean;
-    // docs: { url: string; title: string; description: string; nav: number; content: string }[];
     showMobileMenu?: boolean;
     showReference?: boolean;
     onHomePage?: boolean;
 }
 
 const iconStyle = { height: '24px', width: '24px', color: 'inherit' };
+
 const linkCSS = {
     color: '$textMedEmp',
     display: 'flex',
@@ -74,30 +77,18 @@ const Header: React.FC<Props> = ({
 
         return currentTech || 'javascript';
     };
-    const currentTech = getCurrentTech();
-    const routeAPIRef = () => {
-        if (currentTech === 'react-native') {
-            return `/api-reference/react-native/v2/modules.html`;
-        }
-        if (currentTech === 'flutter') {
-            return `https://pub.dev/documentation/hmssdk_flutter/latest/hmssdk_flutter/hmssdk_flutter-library.html`;
-        }
-        if (currentTech === 'android') {
-            return `/api-reference/android/v2/index.html`;
-        }
-        if (currentTech === 'ios') {
-            return `/api-reference/ios/v2/documentation/hmssdk`;
-        }
-        const routeLink = `/api-reference/${currentTech}/v2/home/content`;
-        if (router.query.slug && router.query.slug[0] === 'api-reference') {
-            return router.asPath;
-        }
-        return routeLink;
+
+    const converter = {
+        'react-native': exposedPlatformNames.REACTNATIVE,
+        flutter: exposedPlatformNames.FLUTTER,
+        android: exposedPlatformNames.ANDROID,
+        javascript: exposedPlatformNames.WEB,
+        ios: exposedPlatformNames.IOS
     };
 
-    const isNonApiRef =
-        router.query.slug &&
-        (router.query.slug.includes('server-side') || router.query.slug.includes('get-started'));
+    const currentTechReference = references[converter?.[getCurrentTech()]];
+
+    const isNonApiRef = !currentTechReference;
 
     return renderComponent ? (
         <Flex
@@ -155,17 +146,7 @@ const Header: React.FC<Props> = ({
                         Examples
                     </HeaderLink>
                     {!isNonApiRef && showReference ? (
-                        <HeaderLink
-                            URLincludes={['/docs/api-reference/']}
-                            onClick={() =>
-                                window.analytics.track('link.clicked', {
-                                    btnId: 'api.reference.clicked',
-                                    currentPage: window.location.href
-                                })
-                            }
-                            href={routeAPIRef()}>
-                            API Reference
-                        </HeaderLink>
+                        <NavAPIReference reference={currentTechReference} />
                     ) : null}
                 </Flex>
             </Flex>

components/LinkItem.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link';
+import { Text } from '@100mslive/react-ui';
+
+export const LinkItem = ({ reference, text, css = {} }) => (
+    <Link passHref href={reference}>
+        <Text
+            as="a"
+            variant="sm"
+            css={{
+                pl: '$12',
+                my: '$8',
+                color: 'var(--docs_text_primary)',
+                display: 'block',
+                ...css
+            }}>
+            {text}
+        </Text>
+    </Link>
+);

components/NavAPIReference.tsx

@@ -0,0 +1,59 @@
+import { Box, Flex, Text } from '@100mslive/react-ui';
+import { useState } from 'react';
+import { ChevronDownIcon } from '@100mslive/react-icons';
+import { LinkItem } from './LinkItem';
+
+export const NavAPIReference = ({ reference }) => {
+    const isLink = typeof reference === 'string';
+    const text = 'API Reference';
+
+    const [showOptions, setShowOptions] = useState(false);
+    return isLink ? (
+        <LinkItem text={text} reference={reference} css={{ p: '0', m: '0' }} />
+    ) : (
+        <Box css={{ position: 'relative' }}>
+            <Flex
+                onClick={() => setShowOptions(true)}
+                justify="between"
+                align="center"
+                css={{
+                    w: '100%',
+                    cursor: 'pointer',
+                    gap: '$3',
+                    '&:hover': { opacity: '0.8' }
+                }}>
+                <Text variant="sm">{text}</Text>
+                <ChevronDownIcon
+                    height={16}
+                    width={16}
+                    style={{
+                        transform: showOptions ? 'rotate(180deg)' : 'rotate(0deg)',
+                        transition: 'transform 0.3s ease'
+                    }}
+                />
+            </Flex>
+            <Box
+                onMouseLeave={() => setShowOptions(false)}
+                css={{
+                    position: 'absolute',
+                    maxHeight: showOptions ? '100vh' : '0',
+                    overflow: 'hidden',
+                    transition: 'max-height 0.3s ease',
+                    bg: '$surfaceDefault',
+                    top: '$14',
+                    w: '$48',
+                    px: '$4',
+                    borderRadius: '$1'
+                }}>
+                {reference.map((item) => (
+                    <LinkItem
+                        key={item.name}
+                        text={item.name}
+                        reference={item.link}
+                        css={{ p: '$2' }}
+                    />
+                ))}
+            </Box>
+        </Box>
+    );
+};

components/PlatformAccordion.tsx

@@ -3,16 +3,8 @@ import Link from 'next/link';
 import { ChevronDownIcon } from '@100mslive/react-icons';
 import { Flex, Text } from '@100mslive/react-ui';
 import { titleCasing } from '../lib/utils';
-
-const references = {
-    Web: '/api-reference/javascript/v2/home/content',
-    Android: '/api-reference/android/v2/index.html',
-    'React Native': '/api-reference/react-native/v2/modules.html',
-    Flutter:
-        'https://pub.dev/documentation/hmssdk_flutter/latest/hmssdk_flutter/hmssdk_flutter-library.html',
-    iOS: '/api-reference/ios/v2/documentation/hmssdk'
-    // 'Server side': ''
-};
+import { SidebarAPIReference } from './SidebarAPIReference';
+import { references } from '../api-references';
 
 const PlatformAccordion = ({
     title,
@@ -81,19 +73,7 @@ const PlatformAccordion = ({
                     </Link>
                 ))}
                 {title !== 'Server side' ? (
-                    <Link passHref href={references[title]}>
-                        <Text
-                            as="a"
-                            variant="sm"
-                            css={{
-                                pl: '$12',
-                                my: '$8',
-                                color: 'var(--docs_text_primary)',
-                                display: 'block'
-                            }}>
-                            API Reference
-                        </Text>
-                    </Link>
+                    <SidebarAPIReference reference={references[title]} />
                 ) : null}
             </div>
         </div>

components/SidebarAPIReference.tsx

@@ -0,0 +1,42 @@
+import { Box, Flex, Text } from '@100mslive/react-ui';
+import { useState } from 'react';
+import { ChevronDownIcon } from '@100mslive/react-icons';
+import { LinkItem } from './LinkItem';
+
+// Can be link or array of links
+export const SidebarAPIReference = ({ reference }) => {
+    const isLink = typeof reference === 'string';
+    const text = 'API Reference';
+    const [openAccordion, setOpenAccordion] = useState(false);
+
+    return isLink ? (
+        <LinkItem reference={reference} text={text} />
+    ) : (
+        <Box>
+            <Flex
+                justify="between"
+                align="center"
+                css={{ w: '100%', pl: '$12', cursor: 'pointer', '&:hover': { opacity: '0.8' } }}
+                onClick={() => setOpenAccordion((prev) => !prev)}>
+                <Text variant="sm">{text}</Text>
+                <ChevronDownIcon
+                    style={{
+                        transform: openAccordion ? 'rotate(180deg)' : 'rotate(0deg)',
+                        transition: 'transform 0.3s ease'
+                    }}
+                />
+            </Flex>
+            <Box
+                css={{
+                    maxHeight: openAccordion ? '100vh' : '0',
+                    overflow: 'hidden',
+                    transition: 'max-height 0.4s ease',
+                    pl: '$4'
+                }}>
+                {reference.map((item) => (
+                    <LinkItem key={item.link} reference={item.link} text={item.name} />
+                ))}
+            </Box>
+        </Box>
+    );
+};