@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.5761ed1.0

package/src/components/header-navigation/header-navigation.tsx

@@ -1,327 +0,0 @@
-import { Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
-import classNames from 'classnames';
-import { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { NavigationLegacyContext } from '../../utils/navigation-context';
-import { HeaderNavigationItemData } from '../../utils/navigation-legacy';
-import { HeaderNavigationItem } from './header-navigation-content';
-import * as Styles from './header-navigation.module.less';
-
-function useForceUpdate() {
-    const [, setTick] = useState(0);
-    return useCallback(() => {
-        setTick(tick => tick + 1);
-    }, []);
-}
-
-export interface HeaderNavigationOverflowProps {
-    direction: PopoverPropsStrict['direction'];
-    width: PopoverPropsStrict['width'];
-    portal?: boolean;
-}
-
-const HeaderNavigationOverflow: FC<{
-    items: HeaderNavigationItemData[];
-    overflow?: HeaderNavigationOverflowProps;
-}> = ({ items, overflow }) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <Popover
-            open={isOpen}
-            trigger={
-                <Icon
-                    name="more_vert"
-                    size="24px"
-                    className="c-pointer"
-                    onClick={() => setIsOpen(true)}
-                    color="white"
-                    data-cy="navigation-overflow-trigger"
-                    data-pendo="navigation-overflow-trigger"
-                />
-            }
-            direction={overflow?.direction ?? 'bl'}
-            width={overflow?.width ?? 'xs'}
-            portal={overflow?.portal}
-            onClickOutside={() => setIsOpen(false)}
-            wrapperClassName="d-if-i align-items-center"
-            popoverContentClassName={Styles.overflowPopover}
-        >
-            <div
-                onClick={() => setIsOpen(false)}
-                className={Styles.navigationOverflow}
-                data-cy="navigation-overflow-content"
-            >
-                {items.map(item => (
-                    <HeaderNavigationItem {...item} key={item.id} minimized={false} main={false} />
-                ))}
-            </div>
-        </Popover>
-    );
-};
-
-export interface HeaderNavigationProps {
-    /** extra navigation */
-    children?: ReactNode;
-    /** container class name */
-    className?: string;
-    /** extra navigation container class name */
-    rightClassName?: string;
-    /** container id */
-    id?: string;
-    /** left content (usually used for logo) */
-    left?: ReactElement;
-    /** left container class name */
-    leftClassName?: string;
-    /** minimal width for navigation bar */
-    minWidth?: number;
-    /** main navigation items */
-    items?: HeaderNavigationItemData[];
-    /** main navigation overflow items */
-    itemsOverflow?: HeaderNavigationItemData[];
-    /** props for main items overflow component */
-    overflow?: HeaderNavigationOverflowProps;
-}
-
-enum MinimizedState {
-    Calculating,
-    Minimized,
-    Full,
-}
-
-export const HeaderNavigation: FC<HeaderNavigationProps> = ({
-    children,
-    className,
-    id,
-    items,
-    itemsOverflow,
-    left,
-    leftClassName,
-    rightClassName,
-    minWidth = 800,
-    overflow,
-}) => {
-    const leftRef = useRef<HTMLDivElement>(null);
-    const rightRef = useRef<HTMLDivElement>(null);
-    const centerRef = useRef<HTMLDivElement>(null);
-    const navigationRef = useRef<HTMLDivElement>(null);
-    const forceUpdate = useForceUpdate();
-    const [minimized, setMinimized] = useState(MinimizedState.Calculating);
-
-    useEffect(() => {
-        const handleResize = () => {
-            setMinimized(MinimizedState.Calculating);
-            forceUpdate();
-        };
-
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [forceUpdate]);
-
-    useEffect(() => {
-        setMinimized(MinimizedState.Calculating);
-        forceUpdate();
-    }, [items, itemsOverflow, forceUpdate]);
-
-    const updateIsMinimized = () => {
-        if (centerRef.current && navigationRef.current) {
-            if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
-                setMinimized(MinimizedState.Minimized);
-            } else if (minimized === MinimizedState.Calculating) {
-                setMinimized(MinimizedState.Full);
-            }
-        }
-    };
-
-    useEffect(() => {
-        updateIsMinimized();
-    });
-
-    return (
-        <NavigationLegacyContext.Provider value>
-            <div
-                className={classNames(Styles.header, className, {
-                    [Styles.calculating]: minimized === MinimizedState.Calculating,
-                })}
-                style={{ minWidth: `${minWidth}px` }}
-                id={id}
-                data-cy="header-navigation"
-            >
-                <div className={leftClassName} ref={leftRef} data-cy="navigation-left">
-                    {left}
-                </div>
-                <div
-                    ref={centerRef}
-                    className={classNames(
-                        'd-if flex-grow-1 flex-basis-0 justify-content-center',
-                        Styles.center
-                    )}
-                    data-cy="navigation-items"
-                >
-                    <div ref={navigationRef} className={classNames('d-if')}>
-                        {items?.map(item => (
-                            <HeaderNavigationItem
-                                {...item}
-                                minimized={minimized === MinimizedState.Minimized}
-                                main
-                                key={item.id}
-                            />
-                        ))}
-                        {!!itemsOverflow?.length && (
-                            <HeaderNavigationOverflow items={itemsOverflow} overflow={overflow} />
-                        )}
-                    </div>
-                </div>
-                <div
-                    className={classNames(
-                        'd-f flex-row justify-content-end align-items-center',
-                        Styles.right,
-                        rightClassName
-                    )}
-                    ref={rightRef}
-                    data-cy="navigation-right"
-                >
-                    {children}
-                </div>
-            </div>
-        </NavigationLegacyContext.Provider>
-    );
-};
-
-export interface HeaderNavigationStackedProps {
-    /** container class name */
-    className?: string;
-    /** extra navigation */
-    right?: ReactNode;
-    /** extra navigation container class name */
-    rightClassName?: string;
-    /** container id */
-    id?: string;
-    /** left content (usually used for logo) */
-    left?: ReactElement;
-    /** left container class name */
-    leftClassName?: string;
-    /** center content */
-    center?: ReactElement;
-    /** center container class name */
-    centerClassName?: string;
-    /** minimal width for navigation bar */
-    minWidth?: number;
-    /** main navigation items */
-    items?: HeaderNavigationItemData[];
-    /** main navigation overflow items */
-    itemsOverflow?: HeaderNavigationItemData[];
-    /** props for main items overflow component */
-    overflow?: HeaderNavigationOverflowProps;
-}
-
-export const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({
-    className,
-    id,
-    items,
-    itemsOverflow,
-    left,
-    leftClassName,
-    right,
-    rightClassName,
-    center,
-    centerClassName,
-    minWidth = 800,
-    overflow,
-}) => {
-    const bottomRef = useRef<HTMLDivElement>(null);
-    const navigationRef = useRef<HTMLDivElement>(null);
-    const forceUpdate = useForceUpdate();
-    const [minimized, setMinimized] = useState(MinimizedState.Calculating);
-
-    useEffect(() => {
-        const handleResize = () => {
-            setMinimized(MinimizedState.Calculating);
-            forceUpdate();
-        };
-
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, [forceUpdate]);
-
-    useEffect(() => {
-        setMinimized(MinimizedState.Calculating);
-        forceUpdate();
-    }, [items, itemsOverflow, forceUpdate]);
-
-    const updateIsMinimized = () => {
-        if (bottomRef.current && navigationRef.current) {
-            if (navigationRef.current.clientWidth + 16 > bottomRef.current.clientWidth) {
-                setMinimized(MinimizedState.Minimized);
-            } else if (minimized === MinimizedState.Calculating) {
-                setMinimized(MinimizedState.Full);
-            }
-        }
-    };
-
-    useEffect(() => {
-        updateIsMinimized();
-    });
-
-    return (
-        <NavigationLegacyContext.Provider value>
-            <div
-                className={classNames(
-                    Styles.headerStacked,
-                    {
-                        [Styles.calculating]: minimized === MinimizedState.Calculating,
-                    },
-                    className
-                )}
-                style={{ minWidth: `${minWidth}px` }}
-                id={id}
-                data-cy="header-navigation"
-            >
-                <div
-                    className={classNames(Styles.heTopLeft, leftClassName)}
-                    data-cy="navigation-left"
-                >
-                    {left}
-                </div>
-                <div
-                    className={classNames(Styles.heTopCenter, centerClassName)}
-                    data-cy="navigation-center"
-                >
-                    {center}
-                </div>
-                <div
-                    className={classNames(
-                        'd-f flex-row justify-content-end align-items-center',
-                        Styles.heTopRight,
-                        rightClassName
-                    )}
-                    data-cy="navigation-right"
-                >
-                    {right}
-                </div>
-                <div
-                    ref={bottomRef}
-                    className={classNames(
-                        Styles.heBottom,
-                        'd-if flex-grow-1 flex-basis-0 justify-content-center',
-                        Styles.center
-                    )}
-                    data-cy="navigation-items"
-                >
-                    <div ref={navigationRef} className={classNames('d-if')}>
-                        {items?.map(item => (
-                            <HeaderNavigationItem
-                                {...item}
-                                minimized={minimized === MinimizedState.Minimized}
-                                main
-                                key={item.id}
-                            />
-                        ))}
-                        {!!itemsOverflow?.length && (
-                            <HeaderNavigationOverflow items={itemsOverflow} overflow={overflow} />
-                        )}
-                    </div>
-                </div>
-            </div>
-        </NavigationLegacyContext.Provider>
-    );
-};

package/src/components/header-navigation/index.ts

@@ -1 +0,0 @@
-export * from './header-navigation';

package/src/components/header-navigation/with-tooltip.tsx

@@ -1,15 +0,0 @@
-import { Tooltip, TooltipPropsStrict } from '@servicetitan/design-system';
-import { ReactNode } from 'react';
-
-export const withTooltip = (
-    element: ReactNode,
-    tooltip: string | undefined,
-    direction: TooltipPropsStrict['direction'] = 'b'
-) =>
-    tooltip ? (
-        <Tooltip el="div" direction={direction} text={tooltip}>
-            {element}
-        </Tooltip>
-    ) : (
-        element
-    );

package/src/components/layout.stories.tsx

@@ -1,103 +0,0 @@
-import { Page, Sidebar } from '@servicetitan/design-system';
-import { LocationInfo, withAnvil, withDefaultRedirects, withMemoryRouter } from '../test/data';
-import {
-    WithAllMonolithData,
-    WithAllMonolithDataCommercial,
-} from './left-navigation/header-navigation-tiny.stories';
-import {
-    DefaultSideNavigation,
-    SideNavigationLinksOnly,
-    SideNavigationWithSubmenu,
-    SideNavigationWithSubmenuBar,
-    SideNavigationWithSubmenuBarAndTop,
-} from './left-navigation/side-navigation.stories';
-
-export default {
-    title: 'Navigation/Layout',
-    parameters: {},
-    decorators: [withDefaultRedirects, withMemoryRouter, withAnvil],
-};
-
-export const LeftNavLayout = () => {
-    return (
-        <div className="d-f border flex-column" style={{ height: '800px' }}>
-            <WithAllMonolithData />
-            <div className="flex-grow-1 flex-basis-0 d-f">
-                <DefaultSideNavigation />
-                <div className="flex-grow-1 flex-basis-0" />
-            </div>
-        </div>
-    );
-};
-
-export const LeftNavLayoutCommercial = () => {
-    return (
-        <div className="d-f border flex-column" style={{ height: '800px' }}>
-            <WithAllMonolithDataCommercial />
-            <div className="flex-grow-1 flex-basis-0 d-f">
-                <DefaultSideNavigation />
-                <div className="flex-grow-1 flex-basis-0" />
-            </div>
-        </div>
-    );
-};
-
-export const LeftNavLayoutOnlyLinks = () => {
-    return (
-        <div className="d-f border flex-column" style={{ height: '800px' }}>
-            <WithAllMonolithDataCommercial />
-            <div className="flex-grow-1 flex-basis-0 d-f">
-                <SideNavigationLinksOnly />
-                <div className="flex-grow-1 flex-basis-0" />
-            </div>
-        </div>
-    );
-};
-
-export const LeftNavLayoutSubmenu = () => {
-    return (
-        <div className="d-f border flex-column" style={{ height: '800px' }}>
-            <WithAllMonolithDataCommercial />
-            <div className="flex-grow-1 flex-basis-0 d-f">
-                <SideNavigationWithSubmenu />
-                <div className="flex-grow-1 flex-basis-0">
-                    <Page sidebar={<Sidebar localStorageKey="undefined">sidebar</Sidebar>}>
-                        <LocationInfo />
-                    </Page>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export const LeftNavLayoutSubmenuBar = () => {
-    return (
-        <div className="d-f border flex-column" style={{ height: '800px' }}>
-            <WithAllMonolithDataCommercial />
-            <div className="flex-grow-1 flex-basis-0 d-f">
-                <SideNavigationWithSubmenuBar />
-                <div className="flex-grow-1 flex-basis-0">
-                    <Page sidebar={<Sidebar localStorageKey="undefined">sidebar</Sidebar>}>
-                        <LocationInfo />
-                    </Page>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export const LeftNavLayoutSubmenuBarWithTop = () => {
-    return (
-        <div className="d-f border flex-column" style={{ height: '800px' }}>
-            <WithAllMonolithDataCommercial />
-            <div className="flex-grow-1 flex-basis-0 d-f">
-                <SideNavigationWithSubmenuBarAndTop />
-                <div className="flex-grow-1 flex-basis-0">
-                    <Page sidebar={<Sidebar localStorageKey="undefined">sidebar</Sidebar>}>
-                        <LocationInfo />
-                    </Page>
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/components/left-navigation/header-navigation-extra-tiny.stories.tsx

@@ -1,21 +0,0 @@
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationLink } from '../links';
-import { HeaderNavigationTiny } from './header-navigation-tiny';
-
-const withHeaderNavigationTiny = (Story: any) => (
-    <HeaderNavigationTiny className="border" right={<Story />} />
-);
-
-export default {
-    title: 'Navigation/Extra/Tiny',
-    component: HeaderNavigationLink,
-    decorators: [withHeaderNavigationTiny, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-
-export {
-    ExtraWithTooltip,
-    ExtraLink,
-    ExtraTrigger,
-    ExtraWithLabel,
-} from '../header-navigation/header-navigation-extra.stories';

package/src/components/left-navigation/header-navigation-tiny-links.tsx

@@ -1,145 +0,0 @@
-import { Icon, IconProps } from '@servicetitan/anvil2';
-import classNames from 'classnames';
-import { FC, Fragment, useContext } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
-import {
-    HeaderNavigationLinkProps,
-    HeaderNavigationTriggerProps,
-} from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
-import { CounterTag, CounterTagProps } from '../counter-tag';
-// use v1 tooltips due to bug with v2 in monolith
-import { withTooltip } from '../header-navigation/with-tooltip';
-import * as Styles from './header-navigation-tiny.module.less';
-
-/** Content for navigation items */
-export const HeaderNavigationItemContent: FC<{
-    tag?: CounterTagProps;
-    counterClassName?: string;
-    icon: IconProps['svg'] | undefined;
-    iconActive: IconProps['svg'] | undefined;
-    label?: string;
-    labelClassName?: string;
-}> = ({ counterClassName, icon, iconActive, label, labelClassName, tag }) => {
-    return (
-        <Fragment>
-            {!!icon && <Icon svg={icon} className={Styles.navigationIcon} />}
-            {!!iconActive && (
-                <Icon
-                    svg={iconActive}
-                    className={classNames(Styles.navigationIcon, Styles.navigationIconActive)}
-                />
-            )}
-
-            {!!label && (
-                <span className={classNames(Styles.navigationItemLabel, labelClassName)}>
-                    {label}
-                </span>
-            )}
-
-            {!!tag && (
-                <CounterTag
-                    data={tag}
-                    className={classNames(Styles.navigationItemCounter, counterClassName)}
-                    longClassName={Styles.navigationItemCounterLong}
-                />
-            )}
-        </Fragment>
-    );
-};
-
-/** Navigation extra item with link */
-export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
-    id,
-    to,
-    hint,
-    tooltip,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    label,
-    labelClassName,
-    tag,
-    target,
-    ...rest
-}) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
-
-    return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-link-${id}`}
-            data-pendo={`navigation-link-${id}`}
-            {...rest}
-            key={id}
-            to={to}
-            title={hint}
-            className={classNames(Styles.navigationLink, className, {
-                [Styles.navigationItemActive]: isActive === true,
-                [Styles.navigationItemIconState]: !!icon && !!iconActive,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-            target={target}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                icon={icon}
-                iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
-            />
-        </NavigationComponent>,
-        tooltip
-    );
-};
-
-/** Navigation extra item with icon button */
-export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconName,
-    isActive,
-    hint,
-    label,
-    labelClassName,
-    tag,
-    tooltip,
-    title,
-    titleClassName,
-    ...rest
-}) => {
-    return withTooltip(
-        <div
-            data-cy={`navigation-trigger-${id}`}
-            data-pendo={`navigation-trigger-${id}`}
-            {...rest}
-            title={hint}
-            className={classNames(
-                Styles.navigationLink,
-                {
-                    [Styles.navigationItemActive]: isActive === true,
-                    [Styles.navigationItemIconState]: !!icon && !!iconActive,
-                },
-                'cursor-pointer',
-                className
-            )}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                icon={icon}
-                iconActive={iconActive}
-                label={label}
-                labelClassName={labelClassName}
-            />
-        </div>,
-        tooltip
-    );
-};