@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.b43c6d7.0

package/src/components/titan-layout/layout-sidebar-links.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactElement } from 'react';
 import { getCounterTag } from '../../utils/side-nav';
-import { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
 import { useTitanLayoutContext } from './layout-context';
 import {
     InternalSideNavigationLink,
@@ -10,62 +10,76 @@ import { useNotificationsContext } from './notifications-context';
 
 const WrappedLink: FC<{
     children: ReactElement<any>;
-    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;
-}> = ({ children, wrapper: WrapperComponent }) => {
+    wrapper: NonNullable<TitanLayoutLinkProps['wrapper']>;
+    isMobile: boolean;
+}> = ({ children, isMobile, wrapper: WrapperComponent }) => {
     const { sidebar } = useTitanLayoutContext();
-    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;
+    return (
+        <WrapperComponent isMobile={isMobile} context={sidebar}>
+            {children}
+        </WrapperComponent>
+    );
 };
 
 /** Side Navigation menu link */
-export function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {
+export function LayoutSidebarLink({
+    counter,
+    tag,
+    tooltip,
+    wrapper,
+    ...props
+}: TitanLayoutLinkProps) {
     const {
         NavigationComponent,
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
+    const tagData = getCounterTag(counter, tag);
 
-    onNotificationsUpdate(props.id, !!tag);
+    onNotificationsUpdate(props.id, !!tagData);
 
     const element = (
         <InternalSideNavigationLink
             {...props}
             navigationComponent={NavigationComponent}
             submenuExpanded={undefined}
-            dataPrefix="navigation-item"
-            tag={tag}
+            tag={tagData}
         />
     );
 
-    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;
+    return wrapper && !isMobile ? (
+        <WrappedLink isMobile={isMobile} wrapper={wrapper}>
+            {element}
+        </WrappedLink>
+    ) : (
+        element
+    );
 }
 
 /** Side Navigation menu trigger */
-export function TitanLayoutSidebarTrigger({
+export function LayoutSidebarTrigger({
+    counter,
+    tag,
+    tooltip,
     wrapper,
-    onMobileClick,
     onClick,
     ...props
-}: TitanLayoutSidebarTriggerProps) {
+}: TitanLayoutTriggerProps) {
     const {
         breakpoint: { isMobile },
     } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
+    const tagData = getCounterTag(counter, tag);
 
-    onNotificationsUpdate(props.id, !!tag);
+    onNotificationsUpdate(props.id, !!tagData);
 
     const element = (
-        <InternalSideNavigationTrigger
-            {...props}
-            submenuExpanded={undefined}
-            dataPrefix="navigation-trigger"
-            tag={tag}
-            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}
-        />
+        <InternalSideNavigationTrigger {...props} submenuExpanded={undefined} tag={tagData} />
     );
-    return wrapper && (!isMobile || !onMobileClick) ? (
-        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>
+    return wrapper ? (
+        <WrappedLink isMobile={isMobile} wrapper={wrapper}>
+            {element}
+        </WrappedLink>
     ) : (
         element
     );

package/src/components/titan-layout/layout-sidebar.tsx

@@ -103,10 +103,10 @@ export const LayoutSidebar: FC<LayoutSidebarProps> = ({
                                 />
                             ) : (
                                 <InternalSideNavigationLink
+                                    {...item}
                                     key={item.id}
                                     submenuExpanded={undefined}
                                     navigationComponent={navigationComponent}
-                                    {...item}
                                     tag={getSubmenuGroupTag(
                                         item.submenu,
                                         getCounterTag(item.counter, item.tag)

package/src/components/titan-layout/titan-layout-links.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
+import { useTitanLayoutPlacementContext } from './layout-context';
+import { LayoutHeaderNavigationLink, LayoutHeaderNavigationTrigger } from './layout-header-links';
+import { LayoutSidebarLink, LayoutSidebarTrigger } from './layout-sidebar-links';
+
+export const TitanLayoutLink: FC<TitanLayoutLinkProps> = props => {
+    const placement = useTitanLayoutPlacementContext();
+
+    if (placement === 'top') {
+        return <LayoutHeaderNavigationLink {...props} />;
+    }
+
+    if (placement === 'side') {
+        return <LayoutSidebarLink {...props} />;
+    }
+
+    return null;
+};
+
+export const TitanLayoutTrigger: FC<TitanLayoutTriggerProps> = props => {
+    const placement = useTitanLayoutPlacementContext();
+
+    if (placement === 'top') {
+        return <LayoutHeaderNavigationTrigger {...props} />;
+    }
+
+    if (placement === 'side') {
+        return <LayoutSidebarTrigger {...props} />;
+    }
+
+    return null;
+};

package/src/components/titan-layout/titan-layout.stories.tsx

@@ -6,19 +6,23 @@ import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inac
 import SvgRocketActive from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_active.svg';
 import SvgRocket from '@servicetitan/anvil2/assets/icons/st/gnav_titan_advisor_inactive.svg';
 import { Page as Anvil1Page } from '@servicetitan/design-system';
-import { FC, Fragment, useState } from 'react';
+import { Fragment, useState } from 'react';
 import {
     CallsNavigationTrigger,
     LocationInfo,
     NavLinkMock,
-    items,
+    navItems,
     withAnvil,
     withDefaultRedirects,
     withMemoryRouter,
 } from '../../test/data';
-import { SideNavigationLinkWrapperProps } from '../left-navigation';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
-import { ProfileDropdown, TitanLayout, TitanLayoutProps, TitanLayoutState } from './';
+import {
+    ProfileDropdown,
+    TitanLayout,
+    TitanLayoutLinkWrapper,
+    TitanLayoutProps,
+    TitanLayoutState,
+} from './';
 
 interface LayoutContentArgs {
     header: boolean;
@@ -49,25 +53,25 @@ export default {
 };
 
 const mainNavItems = [
-    items.dashboard,
-    items.calendar,
-    items.calls,
-    items.accountingWithSubmenu,
-    items.dispatch,
-
-    items.fleet,
-    items.followUps,
-    items.inventory,
-
-    items.marketing,
-    items.priceBook,
-    items.pointOfSale,
-    items.reports,
+    navItems.dashboard,
+    navItems.calendar,
+    navItems.calls,
+    navItems.accountingWithSubmenu,
+    navItems.dispatch,
+
+    navItems.fleet,
+    navItems.followUps,
+    navItems.inventory,
+
+    navItems.marketing,
+    navItems.priceBook,
+    navItems.pointOfSale,
+    navItems.reports,
 ];
 
 const overflowNavItems = [
-    { ...items.accounting, id: 'accounting-overflow', title: 'Other Accounting' },
-    { ...items.reports, id: 'reports-overflow', title: 'Other Reports' },
+    { ...navItems.accounting, id: 'accounting-overflow', title: 'Other Accounting' },
+    { ...navItems.reports, id: 'reports-overflow', title: 'Other Reports' },
 ];
 
 const profile = (
@@ -103,12 +107,11 @@ const profile = (
 
 const extraLinks = (
     <Fragment>
-        <HeaderNavigationLink
+        <TitanLayout.Link
             id="search"
             to="https://google.com"
             target="_blank"
             title="Search"
-            hint="Search: for all the questions"
             tooltip="Search"
             icon={SvgSearch}
             iconActive={SvgSearch}
@@ -116,7 +119,7 @@ const extraLinks = (
 
         <CallsNavigationTrigger />
 
-        <HeaderNavigationLink
+        <TitanLayout.Link
             id="titanAdvisor"
             to="/titanAdvisor"
             title="Titan Advisor"
@@ -124,13 +127,12 @@ const extraLinks = (
             iconActive={SvgRocketActive}
         />
 
-        <HeaderNavigationLink
+        <TitanLayout.Link
             id="settings"
             to="/settings"
             title="Settings"
             target="_blank"
-            aria-label="search"
-            hint="Settings"
+            aria-label="settings"
             icon={SvgSettings}
             iconActive={SvgSettingsActive}
         />
@@ -138,7 +140,7 @@ const extraLinks = (
 );
 
 const extraLinksTop = (
-    <HeaderNavigationTrigger
+    <TitanLayout.Trigger
         id="atlas"
         title="Atlas"
         icon={SvgAtlas}
@@ -149,7 +151,7 @@ const extraLinksTop = (
     />
 );
 
-const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children, context }) => {
+const SideLinkPopoverWrapper: TitanLayoutLinkWrapper = ({ children, context }) => {
     return (
         <Popover placement="right" openOnHover>
             <Popover.Trigger>{(props: any) => <div {...props}>{children}</div>}</Popover.Trigger>
@@ -159,14 +161,13 @@ const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children,
 };
 
 const sidebarTop = () => [
-    <TitanLayout.Link key="tasks" {...items.tasks} />,
-    <TitanLayout.Link key="calls" {...items.calls} />,
+    <TitanLayout.Link key="tasks" {...navItems.tasks} />,
+    <TitanLayout.Link key="calls" {...navItems.calls} />,
     <TitanLayout.Trigger
         key="marketing"
-        {...items.marketing}
+        {...navItems.marketing}
         isActive={false}
         wrapper={SideLinkPopoverWrapper}
-        onMobileClick={() => alert('clicked')}
         counter={50}
     />,
 ];

package/src/components/titan-layout/titan-layout.tsx

@@ -4,6 +4,7 @@ import {
     ComponentPropsWithoutRef,
     FC,
     Fragment,
+    MouseEvent,
     ReactElement,
     ReactNode,
     useCallback,
@@ -26,9 +27,9 @@ import { LayoutHeader } from './layout-header';
 import { LayoutHeaderDark } from './layout-header-dark';
 import { TitanLayoutLogoProps } from './layout-logo';
 import { LayoutSidebar } from './layout-sidebar';
-import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
 import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
 import { useNotificationsState } from './notifications-context';
+import { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';
 import * as Styles from './titan-layout.module.less';
 
 export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
@@ -148,7 +149,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
         }
     }, [view.isAnvil1]);
 
-    const onBurgerClick = useCallback((e: MouseEvent) => {
+    const onBurgerClick = useCallback((e: MouseEvent<never>) => {
         setMobileDrawerOpened(true);
         e.stopPropagation();
     }, []);
@@ -445,6 +446,6 @@ const LayoutContentLegacy: FC<{
 };
 
 export const TitanLayout = Object.assign(TitanLayoutComponent, {
-    Link: TitanLayoutSidebarLink,
-    Trigger: TitanLayoutSidebarTrigger,
+    Link: TitanLayoutLink,
+    Trigger: TitanLayoutTrigger,
 });

package/src/index.ts

@@ -1,19 +1,9 @@
-export * from './components/header-navigation';
 export * from './components/logo/logo-company-title';
 export * from './components/logo/logo-titan';
 export * from './components/logo/logo-titan-text';
 export * from './components/counter-tag';
-export * from './components/left-navigation';
 export * from './components/titan-layout';
-export * from './components/links';
 export type * from './utils/navigation';
-export type {
-    NavLinkComponentPropsStrict,
-    NavLinkComponentProps,
-    NavigationLocationContextType,
-    NavigationLocationInfo,
-    NavigationActiveLinkMatcher,
-} from './utils/navigation-context';
-export { NavigationComponentContext, NavigationLocationContext } from './utils/navigation-context';
+export type { NavLinkComponentProps } from './utils/navigation-context';
 export type * from './utils/navigation-legacy';
 export * from './utils/use-breakpoint';

package/src/test/data.tsx

@@ -33,25 +33,17 @@ import SvgTasks from '@servicetitan/anvil2/assets/icons/st/gnav_tasks_inactive.s
 import { BodyText, Popover } from '@servicetitan/design-system';
 
 import classNames from 'classnames';
-import { FC, Fragment, forwardRef, useMemo, useState } from 'react';
+import { FC, Fragment, forwardRef, useState } from 'react';
 // needed only for storybook and added in root dependencies
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { MemoryRouter, Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
+import { TitanLayout } from '../components/titan-layout';
 import {
-    MemoryRouter,
-    Redirect,
-    Switch,
-    matchPath,
-    useHistory,
-    useLocation,
-} from 'react-router-dom';
-import { HeaderNavigationTrigger } from '../components/links';
-import { NavigationSubmenuGroupData, NavigationSubmenuItemData } from '../utils/navigation';
-import {
-    NavLinkComponentProps,
-    NavigationComponentContext,
-    NavigationLocationContext,
-    NavigationLocationContextType,
-} from '../utils/navigation-context';
+    NavigationItemData,
+    NavigationSubmenuGroupData,
+    NavigationSubmenuItemData,
+} from '../utils/navigation';
+import { NavLinkComponentProps } from '../utils/navigation-context';
 import { HeaderNavigationItemData } from '../utils/navigation-legacy';
 import * as Styles from './data-stories.module.less';
 
@@ -87,29 +79,9 @@ export const LocationInfo: FC<{ className?: string }> = ({ className }) => {
     return <BodyText className={className}>current location - {location.pathname}</BodyText>;
 };
 
-const LocationProvider: FC<{ children: any }> = ({ children }) => {
-    const location = useLocation();
-    const context: NavigationLocationContextType = useMemo(
-        () => ({
-            location: { pathname: location.pathname },
-            isLinkActive: (location, item) => !!matchPath(location.pathname, item.to),
-        }),
-        [location.pathname]
-    );
-
-    return (
-        <NavigationLocationContext.Provider value={context}>
-            {children}
-        </NavigationLocationContext.Provider>
-    );
-};
 export const withMemoryRouter = (Story: any) => (
     <MemoryRouter>
-        <NavigationComponentContext.Provider value={NavLinkMock}>
-            <LocationProvider>
-                <Story />
-            </LocationProvider>
-        </NavigationComponentContext.Provider>
+        <Story />
     </MemoryRouter>
 );
 
@@ -168,6 +140,27 @@ const getItem = (
         : undefined,
 });
 
+const getNavItem = (id: string, data: Partial<NavigationItemData>): NavigationItemData => ({
+    id,
+    to: '/' + id,
+    title: id[0].toUpperCase() + id.substring(1),
+    icon: undefined,
+    iconActive: undefined,
+    ...data,
+    submenu: data.submenu
+        ? {
+              ...data.submenu,
+              groups: data.submenu.groups.map(group => ({
+                  ...group,
+                  links: group.links.map(link => ({
+                      ...link,
+                      to: `/${id}/${link.to}`,
+                  })),
+              })),
+          }
+        : undefined,
+});
+
 const getSubItem = (
     id: string,
     data: Partial<NavigationSubmenuItemData>
@@ -325,6 +318,127 @@ export const items = {
     }),
 };
 
+export const navItems = {
+    calendar: getNavItem('calendar', {
+        icon: SvgSchedule,
+        iconActive: SvgScheduleActive,
+    }),
+    schedule: getNavItem('schedule', {
+        icon: SvgSchedule,
+        iconActive: SvgScheduleActive,
+    }),
+    calls: getNavItem('calls', {
+        icon: SvgCalls,
+        iconActive: SvgCallsActive,
+        counter: 1234,
+    }),
+    dashboard: getNavItem('dashboard', {
+        icon: SvgDashboard,
+        iconActive: SvgDashboardActive,
+    }),
+    dispatch: getNavItem('dispatch', {
+        icon: SvgDispatch,
+        iconActive: SvgDispatchActive,
+        tag: { value: 3 },
+    }),
+    fleet: getNavItem('fleet', {
+        icon: SvgFleetPro,
+        iconActive: SvgFleetProActive,
+        title: 'Fleet Pro',
+    }),
+    followUps: getNavItem('followUps', {
+        icon: SvgFollowUp,
+        iconActive: SvgFollowUpActive,
+        title: 'Follow Up',
+    }),
+    followUpsWithSubmenu: getNavItem('followUps', {
+        icon: SvgFollowUp,
+        iconActive: SvgFollowUpActive,
+        title: 'Follow Up',
+        submenu: {
+            groups: [
+                getGroup('', [
+                    getSubItem('estimates', { title: 'Unsold Estimates' }),
+                    getSubItem('sold', { title: 'Sold Estimates' }),
+                    getSubItem('surveys', { title: 'Surveys' }),
+                ]),
+            ],
+        },
+    }),
+    inventory: getNavItem('inventory', {
+        icon: SvgInventory,
+        iconActive: SvgInventoryActive,
+    }),
+    purchasing: getNavItem('purchasing', {}),
+    purchasingWithSubmenu: getNavItem('purchasing', {
+        icon: SvgInventory,
+        iconActive: SvgInventoryActive,
+        counter: true,
+        submenu: {
+            groups: [
+                getGroup('Purchase', [
+                    getSubItem('repl', { title: 'Replenishment' }),
+                    getSubItem('orders', { title: 'Purchase Orders' }),
+                    getSubItem('receipts', { title: 'Receipts' }),
+                    getSubItem('returns', { title: 'Returns' }),
+                ]),
+            ],
+        },
+    }),
+    accounting: getNavItem('accounting', {
+        icon: SvgAccounting,
+        iconActive: SvgAccountingActive,
+        counter: true,
+    }),
+    accountingWithSubmenu: getNavItem('accounting', {
+        icon: SvgAccounting,
+        iconActive: SvgAccountingActive,
+        counter: 1,
+        submenu: {
+            groups: [
+                getGroup('Accounts Receivable', [
+                    getSubItem('export', {
+                        title: 'Batch/Export Transactions',
+                        counter: true,
+                    }),
+                    getSubItem('ar', { title: 'AR Management' }),
+                    getSubItem('invoices', { title: 'Invoices', counter: 3 }),
+                    getSubItem('payments', { title: 'Customer Payments', counter: 2 }),
+                    getSubItem('deposits', { title: 'Bank Deposits' }),
+                ]),
+                getGroup('Accounts Payable', [getSubItem('bills', { title: 'Bills' })]),
+                getGroup('Financing', [getSubItem('dashboard', { title: 'Dashboard' })]),
+                getGroup('Others', [getSubItem('at', { title: 'Accounting Audit Trail' })]),
+            ],
+        },
+    }),
+    marketing: getNavItem('marketing', {
+        icon: SvgMarketing,
+        iconActive: SvgMarketingActive,
+    }),
+    priceBook: getNavItem('pricebook', {
+        icon: SvgPriceBook,
+        iconActive: SvgPriceBookActive,
+    }),
+    pointOfSale: getNavItem('pointOfSale', {
+        icon: SvgPos,
+        iconActive: SvgPosActive,
+        title: 'Point Of Sale',
+    }),
+    projects: getNavItem('projects', {
+        icon: SvgProjects,
+        iconActive: SvgProjectsActive,
+    }),
+    reports: getNavItem('reports', {
+        icon: SvgReports,
+        iconActive: SvgReportsActive,
+    }),
+    tasks: getNavItem('tasks', {
+        icon: SvgTasks,
+        iconActive: SvgTasksActive,
+    }),
+};
+
 export const CallsNavigationTrigger = () => {
     const [open, setOpen] = useState(false);
 
@@ -334,9 +448,8 @@ export const CallsNavigationTrigger = () => {
             onClickOutside={() => setOpen(false)}
             direction="bl"
             trigger={
-                <HeaderNavigationTrigger
+                <TitanLayout.Trigger
                     id="dialpad"
-                    iconName="phone"
                     counter={2}
                     title="Calls"
                     icon={SvgPhone}

package/src/utils/navigation-context.tsx

@@ -1,45 +1,19 @@
-import { FC, HTMLAttributeAnchorTarget, ReactNode, createContext } from 'react';
-import { NavigationLinkData } from './navigation';
+import { ComponentPropsWithoutRef, FC } from 'react';
 
-export interface NavLinkComponentPropsStrict {
+export type NavLinkComponentProps = ComponentPropsWithoutRef<'a'> & {
     to: string;
-    title?: string;
-    className?: string;
     activeClassName?: string;
-    children: ReactNode;
     isActive?: (pathname: string) => boolean;
-    target?: HTMLAttributeAnchorTarget;
-}
-
-export interface NavLinkComponentProps extends NavLinkComponentPropsStrict {
-    [key: string]: any;
-}
+};
 
 export const DefaultNavLinkComponent: FC<NavLinkComponentProps> = ({
     children,
+    to,
     activeClassName,
     isActive,
     ...props
-}) => <a {...props}>{children}</a>;
-
-export interface NavigationLocationInfo {
-    pathname: string;
-}
-
-export type NavigationActiveLinkMatcher = (
-    location: NavigationLocationInfo,
-    link: NavigationLinkData
-) => boolean;
-
-export interface NavigationLocationContextType {
-    location: NavigationLocationInfo;
-    isLinkActive: NavigationActiveLinkMatcher;
-}
-
-export const NavigationComponentContext =
-    createContext<FC<NavLinkComponentProps>>(DefaultNavLinkComponent);
-export const NavigationLegacyContext = createContext(false);
-export const NavigationLocationContext = createContext<NavigationLocationContextType>({
-    location: { pathname: '' },
-    isLinkActive: () => false,
-});
+}) => (
+    <a href={to} {...props}>
+        {children}
+    </a>
+);

package/src/utils/navigation.ts

@@ -1,23 +1,16 @@
 import { IconProps } from '@servicetitan/anvil2';
-import { FC } from 'react';
 import { CounterTagData, CounterTagValue } from './counter-tag';
 
 export interface NavigationItemData extends NavigationLinkData {
     /** flag if the link is not shown (based on FG and/or user permissions) */
     isHidden?: boolean;
 
-    /** custom className (can be used for mdi icons) */
-    iconClassName?: string;
-
     /** svg icon (anvil2) of inactive item */
     icon: IconProps['svg'] | undefined;
 
     /** svg icon (anvil2) of active item */
     iconActive: IconProps['svg'] | undefined;
 
-    /** icon component of item (<svg />) */
-    iconComponent?: FC;
-
     /** item tag (optional). shown if it is set and true or greater than 0 */
     counter?: CounterTagValue;
     tag?: CounterTagData;
@@ -27,6 +20,9 @@ export interface NavigationItemData extends NavigationLinkData {
 
     /** optional submenu of link item */
     submenu?: NavigationSubmenuData;
+
+    iconClassName?: never;
+    iconComponent?: never;
 }
 
 export interface NavigationLinkData {