@servicetitan/marketing-ui 1.15.0 → 1.16.0

package/src/components/ui/action-button/action-button.tsx

@@ -0,0 +1,82 @@
+import { ReactNode, FC, useRef } from 'react';
+import classnames from 'classnames';
+import {
+    Icon,
+    BodyText,
+    IconNameType,
+    Tooltip,
+    useFocusVisible,
+} from '@servicetitan/design-system';
+import * as Styles from './action-button.module.less';
+
+export interface ActionButtonProps {
+    children: ReactNode;
+    iconName?: IconNameType;
+    hover?: 'primary' | 'negative' | 'none';
+    disabled?: boolean;
+    tooltip?: string;
+    qaPrefix?: string;
+    active?: boolean;
+    onClick?(): void;
+}
+
+export const ActionButton: FC<ActionButtonProps> = ({
+    onClick,
+    disabled,
+    children,
+    iconName,
+    hover,
+    qaPrefix,
+    active,
+    tooltip,
+}) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(buttonRef);
+
+    const handleClick = () => {
+        if (disabled) {
+            return;
+        }
+
+        if (onClick) {
+            onClick();
+        }
+    };
+
+    const getButton = () => {
+        const classes = classnames(Styles.actionButton, qaPrefix, {
+            [Styles.primary]: hover === 'primary' && !disabled,
+            [Styles.negative]: hover === 'negative' && !disabled,
+            [Styles.active]: active && !disabled,
+            [Styles.disabled]: disabled,
+            [Styles.focusVisible]: isFocusVisible,
+        });
+
+        return (
+            <button
+                type="button"
+                ref={buttonRef}
+                className={classes}
+                onClick={handleClick}
+                disabled={disabled}
+                onFocus={focusFunction}
+                onBlur={blurFunction}
+            >
+                {iconName && <Icon name={iconName} size="20px" className="m-r-1" />}
+                <BodyText className={classnames(Styles.text, `${qaPrefix}-text`)}>
+                    {children}
+                </BodyText>
+            </button>
+        );
+    };
+
+    if (!tooltip) {
+        return getButton();
+    }
+
+    return (
+        <Tooltip text={tooltip} direction="l" el="div" className={`${qaPrefix}-tooltip`}>
+            {getButton()}
+        </Tooltip>
+    );
+};

package/src/components/ui/title-popover/title-popover.module.less

@@ -0,0 +1,10 @@
+@import (reference) '@servicetitan/tokens/dist/tokens.less';
+
+.popover {
+    padding: @spacing-0;
+
+    :global(.Popover__content) {
+        padding: @spacing-half @spacing-0;
+        overflow: visible;
+    }
+}

package/src/components/ui/title-popover/title-popover.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const popover: string;
+

package/src/components/ui/title-popover/title-popover.stories.tsx

@@ -0,0 +1,28 @@
+import { ReactElement, useState } from 'react';
+import { ActionButton } from '../action-button/action-button';
+import { TitlePopover } from './title-popover';
+
+export default {
+    title: 'Marketing UI/ui/TitlePopover',
+    component: TitlePopover,
+    parameters: {},
+};
+
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
+    <div style={style}>{cb()}</div>;
+
+export const titlePopover = w({}, () => <TitlePopover text="Title text">Content</TitlePopover>);
+export const titlePopoverToggle = w({}, () => {
+    const [isActive, setIsActive] = useState(true);
+    const title = isActive ? 'Entities' : 'Archived Entities';
+    return (
+        <TitlePopover text={title}>
+            <ActionButton hover="primary" active={isActive} onClick={() => setIsActive(true)}>
+                Entities
+            </ActionButton>
+            <ActionButton hover="primary" active={!isActive} onClick={() => setIsActive(false)}>
+                Archived Entities
+            </ActionButton>
+        </TitlePopover>
+    );
+});

package/src/components/ui/title-popover/title-popover.tsx

@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import { createRef, Component } from 'react';
+import { observable, action, makeObservable } from 'mobx';
+import { Popover, Stack, BodyText, Icon } from '@servicetitan/design-system';
+import * as Styles from './title-popover.module.less';
+
+interface TitlePopoverProps {
+    text?: string;
+}
+
+@observer
+export class TitlePopover extends Component<TitlePopoverProps> {
+    @observable isOpen = false;
+
+    wrapElem = createRef<HTMLDivElement>();
+
+    constructor(props: TitlePopoverProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    @action
+    toggle = () => {
+        this.isOpen = !this.isOpen;
+    };
+
+    @action
+    close = () => {
+        this.isOpen = false;
+    };
+
+    @action
+    handleClick = (event: MouseEvent) => {
+        if (!this.wrapElem.current) {
+            return;
+        }
+
+        const isClickedInside = this.wrapElem.current.contains(event.target as Node);
+
+        if (!isClickedInside) {
+            this.close();
+        }
+    };
+
+    componentDidMount() {
+        window.addEventListener('click', this.handleClick);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('click', this.handleClick);
+    }
+
+    render() {
+        const { text, children } = this.props;
+
+        return (
+            <div ref={this.wrapElem} className="qa-title-popover">
+                <Popover
+                    className={classNames(Styles.popover, 'qa-title-popover')}
+                    width="xs"
+                    open={this.isOpen}
+                    direction="br"
+                    trigger={
+                        <Stack
+                            alignItems="center"
+                            className="qa-title-popover-button cursor-pointer"
+                            onClick={this.toggle}
+                        >
+                            <BodyText size="large" className="qa-title-popover-text">
+                                {text}
+                            </BodyText>
+                            <Icon
+                                name="expand_more"
+                                size={20}
+                                className="m-l-1 qa-title-popover-icon"
+                            />
+                        </Stack>
+                    }
+                >
+                    {children}
+                </Popover>
+            </div>
+        );
+    }
+}

package/src/utils/use-target-range-store.ts

@@ -0,0 +1,17 @@
+import { useLocalStore } from 'mobx-react';
+import { action } from 'mobx';
+
+export type OptionalRange = Range | undefined;
+
+export interface TargetRangeStore {
+    targetRange: OptionalRange;
+    setTargetRange: (range: OptionalRange) => void;
+}
+
+export const useTargetRangeStore = () =>
+    useLocalStore<TargetRangeStore>(() => ({
+        targetRange: undefined,
+        setTargetRange: action(function (this: TargetRangeStore, range: OptionalRange) {
+            this.targetRange = range;
+        }),
+    }));