@servicetitan/navigation 10.6.1 → 11.0.0-canary.237.0c461af.0

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

@@ -0,0 +1,332 @@
+import { Announcement, Page as Anvil2Page, Button, Popover, TextField } from '@servicetitan/anvil2';
+import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
+import SvgAtlas from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
+import SvgSettingsActive from '@servicetitan/anvil2/assets/icons/st/gnav_settings_active.svg';
+import SvgSettings from '@servicetitan/anvil2/assets/icons/st/gnav_settings_inactive.svg';
+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 {
+    CallsNavigationTrigger,
+    LocationInfo,
+    NavLinkMock,
+    items,
+    withAnvil,
+    withDefaultRedirects,
+    withMemoryRouter,
+} from '../../test/data';
+import { SideNavigationLinkWrapperProps } from '../left-navigation';
+import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
+import { ProfileDropdown, TitanLayout, TitanLayoutProps, TitanLayoutState } from './';
+
+interface LayoutContentArgs {
+    header: boolean;
+    sideTop: boolean;
+    extraText: boolean;
+    search: boolean;
+    longContent: boolean;
+    wideContent: boolean;
+}
+
+export default {
+    title: 'Navigation/TitanLayout',
+    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
+    parameters: {},
+    argTypes: {},
+    args: {
+        header: true,
+        sideTop: true,
+        extraText: true,
+        search: true,
+        longContent: true,
+        wideContent: false,
+    } as LayoutContentArgs,
+};
+
+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,
+];
+
+const profile = (
+    <ProfileDropdown>
+        <ProfileDropdown.Link
+            id="first"
+            to="https://google.com"
+            tooltip="Google it"
+            target="_blank"
+        >
+            first link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Section
+            id="second"
+            onClick={() => alert('second click')}
+            tooltip="Second hint"
+        >
+            second link
+        </ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Divider />
+        <ProfileDropdown.Link id="third" to="/third">
+            third link
+        </ProfileDropdown.Link>
+        <ProfileDropdown.Divider />
+    </ProfileDropdown>
+);
+
+const extraLinks = (
+    <Fragment>
+        <HeaderNavigationLink
+            id="search"
+            to="https://google.com"
+            target="_blank"
+            title="Search"
+            hint="Search: for all the questions"
+            tooltip="Search"
+            icon={SvgSearch}
+            iconActive={SvgSearch}
+        />
+
+        <CallsNavigationTrigger />
+
+        <HeaderNavigationLink
+            id="titanAdvisor"
+            to="/titanAdvisor"
+            title="Titan Advisor"
+            icon={SvgRocket}
+            iconActive={SvgRocketActive}
+        />
+
+        <HeaderNavigationLink
+            id="settings"
+            to="/settings"
+            title="Settings"
+            target="_blank"
+            aria-label="search"
+            hint="Settings"
+            icon={SvgSettings}
+            iconActive={SvgSettingsActive}
+        />
+    </Fragment>
+);
+
+const extraLinksTop = (
+    <HeaderNavigationTrigger
+        id="atlas"
+        title="Atlas"
+        icon={SvgAtlas}
+        iconActive={SvgAtlas}
+        data-pendo="atlas-chat-button"
+        data-cy="atlas-chat-button"
+        data-atlas-chat-button
+    />
+);
+
+const SideLinkPopoverWrapper: FC<SideNavigationLinkWrapperProps> = ({ children, context }) => {
+    return (
+        <Popover placement="right" openOnHover>
+            <Popover.Trigger>{(props: any) => <div {...props}>{children}</div>}</Popover.Trigger>
+            <Popover.Content style={context.styles.popoverContent}>popover content</Popover.Content>
+        </Popover>
+    );
+};
+
+const sidebarTop = () => [
+    <TitanLayout.Link key="tasks" {...items.tasks} />,
+    <TitanLayout.Link key="calls" {...items.calls} />,
+    <TitanLayout.Trigger
+        key="marketing"
+        {...items.marketing}
+        isActive={false}
+        wrapper={SideLinkPopoverWrapper}
+        onMobileClick={() => alert('clicked')}
+        counter={50}
+    />,
+];
+const ContentHeader = () => {
+    const [longInfo, setLongInfo] = useState(false);
+
+    return (
+        <Fragment>
+            <Announcement title="Some info" status="info" />
+            <Announcement title="Some warning" status="warning" />
+            <div
+                className="d-f justify-content-center align-items-center bg-purple-100-i"
+                style={{ height: longInfo ? '120px' : '48px' }}
+            >
+                <div className="d-f align-items-center gap-1">
+                    custom content{' '}
+                    <Button onClick={() => setLongInfo(!longInfo)} size="small" aria-label="test">
+                        {longInfo ? '↑' : '↓'}
+                    </Button>
+                </div>
+            </div>
+        </Fragment>
+    );
+};
+const SearchBar = () => <TextField size="small" placeholder="Search" className="w-100-i" />;
+
+const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
+    const [state, setState] = useState<TitanLayoutState | undefined>(undefined);
+
+    return {
+        state,
+        onStateChange: setState,
+
+        navigationComponent: NavLinkMock,
+        navigationMainItems: mainNavItems,
+
+        profile,
+        top: args.search ? <SearchBar /> : undefined,
+        header: args.header ? <ContentHeader /> : undefined,
+
+        extraLinks,
+        extraLinksTop,
+        extraText: args.extraText ? 'EST (-8 hrs)' : undefined,
+
+        sideTop: args.sideTop ? sidebarTop() : undefined,
+    };
+};
+
+const Content = (args: LayoutContentArgs) => {
+    return (
+        <Fragment>
+            <LocationInfo />
+            {args.wideContent && (
+                <div style={{ width: '1200px' }}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+            )}
+
+            {args.longContent && (
+                <div>
+                    <p>Lorem</p>
+                    <p>ipsum</p>
+                    <p>dolor</p>
+                    <p>sit</p>
+                    <p>amet,</p>
+                    <p>consectetur</p>
+                    <p>adipiscing</p>
+                    <p>elit,</p>
+                    <p>sed</p>
+                    <p>do</p>
+                    <p>eiusmod</p>
+                    <p>tempor</p>
+                    <p>incididunt</p>
+                    <p>ut</p>
+                    <p>labore</p>
+                    <p>et</p>
+                    <p>dolore</p>
+                    <p>magna</p>
+                    <p>aliqua.</p>
+                    <p>Ut</p>
+                    <p>enim</p>
+                    <p>ad</p>
+                    <p>minim</p>
+                    <p>veniam,</p>
+                    <p>quis</p>
+                    <p>nostrud</p>
+                    <p>exercitation</p>
+                    <p>ullamco</p>
+                    <p>laboris</p>
+                    <p>nisi</p>
+                    <p>ut</p>
+                    <p>aliquip</p>
+                    <p>ex</p>
+                    <p>ea</p>
+                    <p>commodo</p>
+                    <p>consequat.</p>
+                    <p>Duis</p>
+                    <p>aute</p>
+                    <p>irure</p>
+                    <p>dolor</p>
+                    <p>in</p>
+                    <p>reprehenderit</p>
+                    <p>in</p>
+                    <p>voluptate</p>
+                    <p>velit</p>
+                    <p>esse</p>
+                    <p>cillum</p>
+                    <p>dolore</p>
+                    <p>eu</p>
+                    <p>fugiat</p>
+                    <p>nulla</p>
+                    <p>pariatur.</p>
+                    <p>Excepteur</p>
+                    <p>sint</p>
+                    <p>occaecat</p>
+                    <p>cupidatat</p>
+                    <p>non</p>
+                    <p>proident,</p>
+                    <p>sunt</p>
+                    <p>in</p>
+                    <p>culpa</p>
+                    <p>qui</p>
+                    <p>officia</p>
+                    <p>deserunt</p>
+                    <p>mollit</p>
+                    <p>anim</p>
+                    <p>id</p>
+                    <p>est</p>
+                    <p>laborum.</p>
+                </div>
+            )}
+        </Fragment>
+    );
+};
+
+export const TitanLayoutLegacy = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="legacy">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <div className="p-3">
+                <Content {...args} />
+            </div>
+        </TitanLayout.Content>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil1 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil1">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <Anvil1Page>
+                <Content {...args} />
+            </Anvil1Page>
+        </TitanLayout.Content>
+    </TitanLayout>
+);
+
+export const TitanLayoutAnvil2 = (args: LayoutContentArgs) => (
+    <TitanLayout {...useLayoutProps(args)} appearance="anvil2">
+        <TitanLayout.Logo title />
+        <TitanLayout.Content>
+            <Anvil2Page>
+                <Anvil2Page.Content>
+                    <Content {...args} />
+                </Anvil2Page.Content>
+            </Anvil2Page>
+        </TitanLayout.Content>
+    </TitanLayout>
+);

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

@@ -0,0 +1,365 @@
+import classNames from 'classnames';
+import {
+    CSSProperties,
+    Children,
+    ComponentPropsWithoutRef,
+    FC,
+    Fragment,
+    ReactElement,
+    ReactNode,
+    isValidElement,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { NavigationItemData } from '../../utils/navigation';
+import { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';
+import { useTitanBreakpoint } from '../../utils/use-breakpoint';
+import { TitanLayoutState } from './interface';
+import {
+    LayoutContext,
+    LayoutPlacementContext,
+    TitanLayoutContextType,
+    TitanLayoutSidebarContextType,
+} from './layout-context';
+import { LayoutHeader } from './layout-header';
+import { TitanLayoutLogo, TitanLayoutLogoProps } from './layout-logo';
+import { LayoutSidebar } from './layout-sidebar';
+import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
+import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
+import * as Styles from './titan-layout.module.less';
+
+type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
+
+export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
+    empty?: boolean;
+
+    appearance?: 'legacy' | 'anvil1' | 'anvil2';
+
+    /** component used for navigation */
+    navigationComponent?: FC<NavLinkComponentProps>;
+
+    /** data for main navigation links */
+    navigationMainItems?: NavigationItemData[];
+
+    /** layout's content */
+    children?: TitanLayoutChild | TitanLayoutChild[];
+
+    state?: TitanLayoutState;
+    onStateChange?: (state: TitanLayoutState) => void;
+
+    header?: ReactElement;
+    top?: ReactElement;
+    sideTop?: ReactElement[];
+    profile?: ReactElement;
+    extraLinks?: ReactElement;
+    extraLinksTop?: ReactElement;
+    extraText?: string;
+    minContentWidth?: number;
+};
+
+const defaultSidebarContext: TitanLayoutSidebarContextType = {
+    styles: {
+        popoverContent: {
+            '--background-color-strong': '#24323C',
+            'color': 'var(--color-white)',
+        } as CSSProperties,
+    },
+};
+
+const useVariant = (appearance: TitanLayoutProps['appearance']) =>
+    useMemo(() => {
+        const isLegacy = appearance === 'legacy';
+        const isAnvil1 = appearance === 'anvil1';
+        const isAnvil2 = appearance === 'anvil2';
+
+        return {
+            isLegacy,
+            isAnvil1,
+            isAnvil2,
+            isSequent: isLegacy || isAnvil2,
+        };
+    }, [appearance]);
+
+const useLayoutChildren = (children: TitanLayoutProps['children']) =>
+    useMemo(
+        () =>
+            Children.toArray(children).reduce(
+                (out, item) => {
+                    if (
+                        item &&
+                        isValidElement(item) &&
+                        item.type &&
+                        typeof item.type !== 'string'
+                    ) {
+                        if (item.type.name === TitanLayoutContent.name) {
+                            out.content = item as any;
+                        } else if (item.type.name === TitanLayoutLogo.name) {
+                            out.logo = item as any;
+                        }
+                    }
+                    return out;
+                },
+                {
+                    logo: <TitanLayoutLogo />,
+                } as {
+                    content?: ReactElement<TitanLayoutContentProps>;
+                    logo: ReactElement<TitanLayoutLogoProps>;
+                }
+            ),
+        [children]
+    );
+
+const TitanLayoutComponent: FC<TitanLayoutProps> = ({
+    appearance = 'anvil2',
+    id,
+    children,
+    navigationComponent,
+    header,
+    top,
+    profile,
+    state,
+    onStateChange,
+    navigationMainItems,
+    extraLinks,
+    extraLinksTop,
+    extraText,
+    minContentWidth,
+    sideTop,
+}) => {
+    const breakpoint = useTitanBreakpoint();
+    const isMobile = breakpoint.isMobile;
+    const context: TitanLayoutContextType = useMemo(
+        () => ({
+            NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,
+            breakpoint,
+            isTitanLayout: true,
+            sidebar: defaultSidebarContext,
+        }),
+        [navigationComponent, breakpoint]
+    );
+    const variant = useVariant(appearance);
+    const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
+    const { content, logo } = useLayoutChildren(children);
+
+    useEffect(() => {
+        if (!isMobile) {
+            setMobileDrawerOpened(false);
+            return;
+        }
+
+        const listener = () => {
+            setMobileDrawerOpened(false);
+        };
+
+        document.addEventListener('click', listener);
+
+        return () => document.removeEventListener('click', listener);
+    }, [isMobile]);
+
+    useEffect(() => {
+        if (variant.isAnvil1) {
+            document.body.classList.add('of-hidden-i');
+            return () => document.body.classList.remove('of-hidden');
+        }
+    }, [variant.isAnvil1]);
+
+    const onBurgerClick = useCallback((e: MouseEvent) => {
+        setMobileDrawerOpened(true);
+        e.stopPropagation();
+    }, []);
+
+    const onBarExpandChange = useCallback(
+        (expanded: boolean) => {
+            if (isMobile) {
+                setMobileDrawerOpened(false);
+            } else {
+                onStateChange?.({ navCollapsed: !expanded });
+            }
+        },
+        [onStateChange, isMobile]
+    );
+    const onSubmenuExpandChange = useCallback(
+        (id: string, expanded: boolean) => {
+            onStateChange?.({
+                navCollapsed: state?.navCollapsed ?? false,
+                submenuExpanded: expanded ? id : undefined,
+            });
+        },
+        [state, onStateChange]
+    );
+
+    const layoutClass = variant.isLegacy
+        ? Styles.layoutLegacy
+        : variant.isAnvil1
+          ? Styles.layoutAnvil1
+          : Styles.layoutAnvil2;
+
+    return (
+        <LayoutContext.Provider value={context}>
+            <LayoutPlacementContext.Provider value="unset">
+                <div
+                    id={id}
+                    className={classNames(
+                        Styles.layout,
+                        isMobile ? Styles.layoutMobile : Styles.layoutDesktop,
+                        !isMobile && state?.navCollapsed
+                            ? Styles.layoutNavSlim
+                            : Styles.layoutNavWide,
+                        layoutClass
+                    )}
+                >
+                    {variant.isSequent && <div className={Styles.topPlaceholder} />}
+                    <LayoutHeader
+                        className={Styles.top}
+                        logo={logo}
+                        profile={isMobile ? undefined : profile}
+                        center={top}
+                        rightText={isMobile ? undefined : extraText}
+                        right={
+                            <Fragment>
+                                {extraLinksTop}
+                                {!isMobile && extraLinks}
+                            </Fragment>
+                        }
+                        onBurgerClick={onBurgerClick}
+                    />
+
+                    <LayoutSidebar
+                        className={Styles.side}
+                        mobile={breakpoint.isMobile}
+                        barExpanded={isMobile ? mobileDrawerOpened : !state?.navCollapsed}
+                        submenuExpanded={state?.submenuExpanded}
+                        onBarExpandChange={onBarExpandChange}
+                        onSubmenuExpandChange={onSubmenuExpandChange}
+                        top={sideTop}
+                        mainItems={navigationMainItems}
+                        navigationComponent={context.NavigationComponent}
+                        bottom={
+                            isMobile ? (
+                                <Fragment>
+                                    {profile}
+                                    {extraLinks}
+                                    {!!extraText && (
+                                        <InternalSideNavigationTrigger
+                                            id="__extra_text"
+                                            title={extraText}
+                                            submenuExpanded={undefined}
+                                            dataPrefix="navigation-extra-text"
+                                            tag={undefined}
+                                            icon={undefined}
+                                            iconActive={undefined}
+                                        />
+                                    )}
+                                </Fragment>
+                            ) : undefined
+                        }
+                    />
+
+                    <LayoutContent
+                        header={header}
+                        anvil2={variant.isAnvil2}
+                        anvil1={variant.isAnvil1}
+                        minWidth={minContentWidth}
+                    >
+                        {content}
+                    </LayoutContent>
+                </div>
+            </LayoutPlacementContext.Provider>
+        </LayoutContext.Provider>
+    );
+};
+
+const TitanLayoutHeaderObserved: FC<{
+    children: ReactNode;
+    heightChange?(value: number): void;
+}> = ({ children, heightChange }) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (ref.current) {
+            const updatePosition = () => {
+                if (ref.current && heightChange) {
+                    const pos = ref.current.getBoundingClientRect();
+                    heightChange(pos.height);
+                }
+            };
+
+            const observer = new ResizeObserver(updatePosition);
+            observer.observe(ref.current);
+
+            updatePosition();
+            return () => observer.disconnect();
+        }
+    }, [heightChange]);
+
+    useEffect(() => {
+        return () => {
+            heightChange?.(0);
+        };
+    }, [heightChange]);
+    return (
+        <div ref={ref} className={Styles.contentHeader} data-cy="layout-content-header">
+            {children}
+        </div>
+    );
+};
+
+export interface TitanLayoutContentProps {
+    children: ReactNode;
+}
+const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
+
+const LayoutContent: FC<{
+    children: ReactNode;
+    header?: ReactNode;
+    anvil1: boolean;
+    anvil2: boolean;
+    minWidth: number | undefined;
+}> = ({ anvil1, anvil2, children, header, minWidth }) => {
+    const [anvil2Styles, setAnvil2Styles] = useState<object>({});
+    const updateIndicatorsHeight = useCallback((offset: number) => {
+        setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
+    }, []);
+
+    const contentStyles = useMemo(
+        () => ({
+            ...(minWidth ? { minWidth: `${minWidth}px` } : {}),
+            ...(anvil2 ? anvil2Styles : {}),
+        }),
+        [anvil2, minWidth, anvil2Styles]
+    );
+
+    return (
+        <Fragment>
+            {!!header &&
+                (anvil2 ? (
+                    <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
+                        {header}
+                    </TitanLayoutHeaderObserved>
+                ) : (
+                    <div className={Styles.contentHeader} data-cy="layout-content-header">
+                        {header}
+                    </div>
+                ))}
+            <div className={Styles.content} style={contentStyles} data-cy="layout-content">
+                {anvil1 ? (
+                    <div className="position-relative d-f flex-grow-1 flex-basis-0 of-hidden">
+                        {children}
+                    </div>
+                ) : (
+                    children
+                )}
+            </div>
+        </Fragment>
+    );
+};
+
+export const TitanLayout = Object.assign(TitanLayoutComponent, {
+    Content: TitanLayoutContent,
+    Logo: TitanLayoutLogo,
+    Link: TitanLayoutSidebarLink,
+    Trigger: TitanLayoutSidebarTrigger,
+});