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

package/src/components/left-navigation/side-navigation.stories.tsx

@@ -1,226 +0,0 @@
-import { Popover } from '@servicetitan/anvil2';
-import { Page } from '@servicetitan/design-system';
-import { ComponentType, FC, useState } from 'react';
-import {
-    LocationInfo,
-    items,
-    withAnvil,
-    withDefaultRedirects,
-    withMemoryRouter,
-} from '../../test/data';
-import {
-    SideNavigation,
-    SideNavigationExpandedState,
-    SideNavigationLink,
-    SideNavigationLinkWrapperProps,
-    SideNavigationTrigger,
-} from './';
-
-const layout = (Story: ComponentType) => {
-    return (
-        <div className="d-f border" style={{ height: '800px' }}>
-            <Story />
-            <div className="flex-grow-1 flex-basis-0">
-                <Page>
-                    <LocationInfo />
-                </Page>
-            </div>
-        </div>
-    );
-};
-export default {
-    title: 'Navigation/SideNavigation',
-    component: SideNavigation,
-    decorators: [layout, withDefaultRedirects, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-
-export const DefaultSideNavigation = () => {
-    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
-    return (
-        <SideNavigation
-            expanded={expanded}
-            onExpandedChange={setExpanded}
-            items={[
-                items.dashboard,
-                items.calendar,
-                items.calls,
-                items.accounting,
-                items.dispatch,
-
-                items.fleet,
-                items.followUps,
-                items.inventory,
-
-                items.marketing,
-                items.priceBook,
-                items.pointOfSale,
-                items.reports,
-            ]}
-        >
-            <SideNavigation.Top>
-                <SideNavigationLink {...items.tasks} />
-            </SideNavigation.Top>
-        </SideNavigation>
-    );
-};
-
-export const SideNavigationLinksOnly = () => {
-    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
-    return (
-        <SideNavigation
-            expanded={expanded}
-            onExpandedChange={setExpanded}
-            items={[
-                items.dashboard,
-                items.calls,
-                items.schedule,
-                items.dispatch,
-
-                items.accounting,
-                items.inventory,
-
-                items.followUps,
-                items.reports,
-                items.marketing,
-                items.priceBook,
-
-                items.projects,
-            ]}
-        />
-    );
-};
-
-export const SideNavigationWithSubmenu = () => {
-    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
-
-    return (
-        <SideNavigation
-            expanded={expanded}
-            onExpandedChange={setExpanded}
-            items={[
-                items.dashboard,
-                items.calls,
-                items.schedule,
-                items.dispatch,
-
-                items.accountingWithSubmenu,
-
-                items.purchasingWithSubmenu,
-
-                items.followUpsWithSubmenu,
-                items.reports,
-                items.marketing,
-                items.priceBook,
-
-                items.projects,
-            ]}
-        />
-    );
-};
-
-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>
-    );
-};
-
-export const SideNavigationWithCustomTopElements = () => {
-    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
-    return (
-        <SideNavigation
-            expanded={expanded}
-            onExpandedChange={setExpanded}
-            items={[
-                items.dashboard,
-                items.schedule,
-                items.dispatch,
-
-                items.accountingWithSubmenu,
-                items.purchasingWithSubmenu,
-
-                items.followUpsWithSubmenu,
-                items.reports,
-                items.marketing,
-                items.priceBook,
-
-                items.projects,
-            ]}
-        >
-            <SideNavigation.Top>
-                <SideNavigationLink {...items.calls} />
-                <SideNavigationLink {...items.tasks} />
-                <SideNavigationTrigger
-                    {...items.marketing}
-                    isActive={false}
-                    wrapper={SideLinkPopoverWrapper}
-                    counter={50}
-                />
-            </SideNavigation.Top>
-        </SideNavigation>
-    );
-};
-
-export const SideNavigationWithSubmenuBar = () => {
-    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
-
-    return (
-        <SideNavigation
-            expanded={expanded}
-            onExpandedChange={setExpanded}
-            appearance="v2"
-            items={[
-                items.dashboard,
-                items.calls,
-                items.schedule,
-                items.dispatch,
-
-                items.accountingWithSubmenu,
-                items.purchasingWithSubmenu,
-
-                items.followUpsWithSubmenu,
-                items.reports,
-                items.marketing,
-                items.priceBook,
-
-                items.projects,
-            ]}
-        />
-    );
-};
-
-export const SideNavigationWithSubmenuBarAndTop = () => {
-    const [expanded, setExpanded] = useState<SideNavigationExpandedState | undefined>(undefined);
-
-    return (
-        <SideNavigation
-            expanded={expanded}
-            onExpandedChange={setExpanded}
-            appearance="v2"
-            items={[
-                items.dashboard,
-                items.calls,
-                items.schedule,
-                items.dispatch,
-
-                items.accountingWithSubmenu,
-                items.purchasingWithSubmenu,
-
-                items.followUpsWithSubmenu,
-                items.reports,
-                items.marketing,
-                items.priceBook,
-
-                items.projects,
-            ]}
-        >
-            <SideNavigation.Top>
-                <SideNavigationLink {...items.calls} />
-                <SideNavigationLink {...items.tasks} />
-            </SideNavigation.Top>
-        </SideNavigation>
-    );
-};