@servicetitan/marketing-ui 1.15.0 → 1.18.0

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

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { ActionButton } from './action-button';
+
+export default {
+    title: 'Marketing UI/ui/ActionButton',
+    component: ActionButton,
+    parameters: {},
+};
+
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
+    <div style={style}>{cb()}</div>;
+
+export const actionButtonHoverPrimary = w({}, () => (
+    <ActionButton hover="primary">Button</ActionButton>
+));
+
+export const actionButtonHoverNegative = w({}, () => (
+    <ActionButton hover="negative">Button</ActionButton>
+));

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/action-button/index.tsx

@@ -0,0 +1 @@
+export * from './action-button';

package/src/components/ui/label-with-hint/label-with-hint.stories.tsx

@@ -0,0 +1,29 @@
+import { Fragment } from 'react';
+import { LabelWithHint } from './label-with-hint';
+
+export default {
+    title: 'Marketing UI/ui/LabelWithHint',
+    component: LabelWithHint,
+    parameters: {},
+};
+
+export const Basic = () => <LabelWithHint label="Label" hint="Hint" />;
+
+export const Custom = () => (
+    <LabelWithHint
+        label="Label"
+        hint="Hint"
+        textClassName="text-red-500"
+        className="bg-blue-500"
+        textSize="large"
+    />
+);
+
+export const Sizes = () => (
+    <Fragment>
+        <LabelWithHint label="Label" hint="Hint" textSize="large" />
+        <LabelWithHint label="Label" hint="Hint" textSize="medium" />
+        <LabelWithHint label="Label" hint="Hint" textSize="small" />
+        <LabelWithHint label="Label" hint="Hint" textSize="xsmall" />
+    </Fragment>
+);

package/src/components/ui/label-with-hint/label-with-hint.tsx

@@ -0,0 +1,30 @@
+import { BodyText, Icon, Stack, Tooltip } from '@servicetitan/design-system';
+import tokens from '@servicetitan/tokens';
+import { FC } from 'react';
+
+export interface LabelWithHintProps {
+    label: string;
+    hint?: string;
+    textClassName?: string;
+    className?: string;
+    textSize?: 'large' | 'medium' | 'small' | 'xsmall';
+}
+
+export const LabelWithHint: FC<LabelWithHintProps> = ({
+    label,
+    textClassName,
+    className,
+    hint,
+    textSize = 'small',
+}) => (
+    <Stack spacing={1} alignItems="flex-start" className={className}>
+        <BodyText size={textSize} bold className={textClassName}>
+            {label}
+        </BodyText>
+        {!!hint && (
+            <Tooltip direction="tr" text={hint}>
+                <Icon name="info" size={18} color={tokens.colorNeutral80} />
+            </Tooltip>
+        )}
+    </Stack>
+);

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

@@ -0,0 +1 @@
+export * from './title-popover';

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/index.ts

@@ -1,8 +1,11 @@
 export * from './components/stat/stat-card';
 export * from './components/stat/stat-extended-card';
 export * from './components/ads/ads-stat';
-export * from './components/ui/centered-spinner';
+export * from './components/ui/action-button';
+export * from './components/ui/centered-spinner/centered-spinner';
+export * from './components/ui/label-with-hint/label-with-hint';
 export * from './components/ui/line-text';
+export * from './components/ui/title-popover';
 export * from './components/image-cropper/image-cropper';
 
 export * from './utils/ads-texts';
@@ -11,3 +14,4 @@ export * from './utils/string-case';
 export * from './utils/use-client-rect';
 export * from './utils/helpers';
 export * from './utils/format-big-numbers';
+export * from './utils/use-target-range-store';

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;
+        }),
+    }));

package/dist/components/ui/centered-spinner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"centered-spinner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/centered-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,MAAM,WAAW,0BAA0B;IACvC,oBAAoB;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,0BAA0B,CAgB1D,CAAC"}

package/dist/components/ui/centered-spinner.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CenteredSpinner = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const design_system_1 = require("@servicetitan/design-system");
-const CenteredSpinner = ({ size, className, info }) => {
-    return ((0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ justifyContent: "center", alignItems: "center", direction: "column", className: (0, classnames_1.default)(className, 'h-100 w-100') }, { children: [(0, jsx_runtime_1.jsx)(design_system_1.Spinner, { className: "of-hidden", size: size }, void 0), !!info && ((0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ size: "small", className: "m-t-1", subdued: true }, { children: info }), void 0))] }), void 0));
-};
-exports.CenteredSpinner = CenteredSpinner;
-//# sourceMappingURL=centered-spinner.js.map

package/dist/components/ui/centered-spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"centered-spinner.js","sourceRoot":"","sources":["../../../src/components/ui/centered-spinner.tsx"],"names":[],"mappings":";;;;;;;AACA,4DAAoC;AACpC,+DAAuE;AAShE,MAAM,eAAe,GAAmC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE;IACzF,OAAO,CACH,wBAAC,qBAAK,kBACF,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,aAAa,CAAC,iBAE/C,uBAAC,uBAAO,IAAC,SAAS,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,WAAI,EAC5C,CAAC,CAAC,IAAI,IAAI,CACP,uBAAC,wBAAQ,kBAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,OAAO,sBAC3C,IAAI,YACE,CACd,aACG,CACX,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,eAAe,mBAgB1B"}

package/dist/components/ui/centered-spinner.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"centered-spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ui/centered-spinner.stories.tsx"],"names":[],"mappings":";;;;;;AAGA,wBAIE;AAKF,eAAO,MAAM,mBAAmB,mBAA+C,CAAC;AAChF,eAAO,MAAM,eAAe,mBAAoE,CAAC;AACjG,eAAO,MAAM,qBAAqB,mBAEhC,CAAC"}

package/dist/components/ui/centered-spinner.stories.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.centeredSpinnerTitled = exports.centeredSpinner = exports.centeredSpinnerTiny = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const centered_spinner_1 = require("./centered-spinner");
-exports.default = {
-    title: 'Marketing UI/ui/CenteredSpinner',
-    component: centered_spinner_1.CenteredSpinner,
-    parameters: {},
-};
-const w = (style, cb) => () => (0, jsx_runtime_1.jsx)("div", Object.assign({ style: style }, { children: cb() }), void 0);
-exports.centeredSpinnerTiny = w({}, () => (0, jsx_runtime_1.jsx)(centered_spinner_1.CenteredSpinner, { size: "tiny" }, void 0));
-exports.centeredSpinner = w({ width: '400px', height: '400px' }, () => (0, jsx_runtime_1.jsx)(centered_spinner_1.CenteredSpinner, {}, void 0));
-exports.centeredSpinnerTitled = w({ width: '400px', height: '400px' }, () => ((0, jsx_runtime_1.jsx)(centered_spinner_1.CenteredSpinner, { info: "Wait for data fetch" }, void 0)));
-//# sourceMappingURL=centered-spinner.stories.js.map

package/dist/components/ui/centered-spinner.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"centered-spinner.stories.js","sourceRoot":"","sources":["../../../src/components/ui/centered-spinner.stories.tsx"],"names":[],"mappings":";;;;AACA,yDAAqD;AAErD,kBAAe;IACX,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,kCAAe;IAC1B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,GAAG,CAAC,KAA0C,EAAE,EAAsB,EAAE,EAAE,CAAC,GAAG,EAAE,CACnF,8CAAK,KAAK,EAAE,KAAK,gBAAG,EAAE,EAAE,YAAO,CAAC;AAEvB,QAAA,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,uBAAC,kCAAe,IAAC,IAAI,EAAC,MAAM,WAAG,CAAC,CAAC;AACnE,QAAA,eAAe,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,uBAAC,kCAAe,aAAG,CAAC,CAAC;AACpF,QAAA,qBAAqB,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,CAC9E,uBAAC,kCAAe,IAAC,IAAI,EAAC,qBAAqB,WAAG,CACjD,CAAC,CAAC"}