1import { RouterLogo } from '@expo/styleguide';
2import {
3  Cube01Icon,
4  CpuChip01Icon,
5  EasMetadataIcon,
6  LayersTwo02Icon,
7  Rocket01Icon,
8  TerminalBrowserIcon,
9  EasSubmitIcon,
10  Bell03Icon,
11  PlanEnterpriseIcon,
12  PaletteIcon,
13  DataIcon,
14} from '@expo/styleguide-icons';
15
16import { SidebarNodeProps } from './Sidebar';
17import { SidebarTitle, SidebarLink, SidebarSection } from './index';
18
19import { NavigationRoute } from '~/types/common';
20import { HandWaveIcon } from '~/ui/components/CustomIcons/HandWaveIcon';
21
22export const SidebarGroup = ({ route, parentRoute }: SidebarNodeProps) => {
23  const title = route.sidebarTitle ?? route.name;
24  const Icon = getIconElement(title);
25  return (
26    <div className="mb-5">
27      {!shouldSkipTitle(route, parentRoute) && <SidebarTitle Icon={Icon}>{title}</SidebarTitle>}
28      {(route.children || []).map(child =>
29        child.type === 'page' ? (
30          <SidebarLink key={`${route.name}-${child.name}`} info={child}>
31            {child.sidebarTitle || child.name}
32          </SidebarLink>
33        ) : (
34          <SidebarSection
35            key={`group-${child.name}-${route.name}`}
36            route={child}
37            parentRoute={route}
38          />
39        )
40      )}
41    </div>
42  );
43};
44
45function shouldSkipTitle(info: NavigationRoute, parentGroup?: NavigationRoute) {
46  if (info.name === parentGroup?.name) {
47    // If the title of the group is Expo SDK and the section within it has the same name
48    // then we shouldn't show the title twice. You might want to organize your group like
49    // so it is collapsable
50    return true;
51  } else if (
52    info.children &&
53    ((info.children[0] || {}).sidebarTitle || (info.children[0] || {}).name) === info.name
54  ) {
55    // If the first child post in the group has the same name as the group, then hide the
56    // group title, lest we be very repetitive
57    return true;
58  }
59
60  return false;
61}
62
63function getIconElement(iconName?: string) {
64  switch (iconName) {
65    case 'Develop':
66      return TerminalBrowserIcon;
67    case 'Deploy':
68      return Rocket01Icon;
69    case 'EAS Build':
70      return Cube01Icon;
71    case 'EAS Submit':
72      return EasSubmitIcon;
73    case 'EAS Update':
74      return LayersTwo02Icon;
75    case 'EAS Metadata':
76      return EasMetadataIcon;
77    case 'EAS Insights':
78      return DataIcon;
79    case 'Expo Modules API':
80      return CpuChip01Icon;
81    case 'Expo Router':
82      return RouterLogo;
83    case 'Push notifications':
84      return Bell03Icon;
85    case 'UI programming':
86      return PaletteIcon;
87    case 'EAS':
88      return PlanEnterpriseIcon;
89    case 'Get started':
90      return HandWaveIcon;
91    default:
92      return undefined;
93  }
94}
95