@servicetitan/marketing-ui 1.6.0 → 1.9.0

package/src/components/charts/pie-chart/components/pie.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, FC, Fragment } from 'react';
 import tokens from '@servicetitan/tokens';
 import { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';
 
@@ -9,7 +9,7 @@ import { PieChartPopoverContentType, PiePiece } from '../utils/interface';
 const chartPadding = 8;
 const px = (value?: number) => `${value ?? 0}px`;
 
-const PiePieceSvg: React.FC<{
+const PiePieceSvg: FC<{
     piece: PiePiece;
     selected?: boolean;
 }> = ({ piece: { id, color, opacity, points, text, path }, selected }) =>
@@ -48,7 +48,7 @@ const PiePieceSvg: React.FC<{
         </g>
     ) : null;
 
-const PiePieceHover: React.FC<{
+const PiePieceHover: FC<{
     piece: PiePiece;
     onMouse(id: string, isEnter: boolean): void;
 }> = ({ piece, onMouse }) => {
@@ -66,7 +66,7 @@ const PiePieceHover: React.FC<{
     );
 };
 
-const PieSvg: React.FC<{
+const PieSvg: FC<{
     pieces: PiePiece[];
     selectedIndex: number;
 }> = ({ pieces, selectedIndex }) => (
@@ -87,7 +87,7 @@ const PieSvg: React.FC<{
     </svg>
 );
 
-const PieSvgHover: React.FC<{
+const PieSvgHover: FC<{
     pieces: PiePiece[];
     onMouse(id: string, isEnter: boolean): void;
 }> = ({ pieces, onMouse }) => (
@@ -104,7 +104,7 @@ const PieSvgHover: React.FC<{
     </svg>
 );
 
-export const Pie: React.FC<{
+export const Pie: FC<{
     title: string;
     pieces: PiePiece[];
     popoverContent?: PieChartPopoverContentType;
@@ -163,7 +163,7 @@ export const Pie: React.FC<{
                     No Data
                 </Stack>
             ) : (
-                <React.Fragment>
+                <Fragment>
                     {triggersStyles
                         .filter(ts => !!ts.left && !!ts.top)
                         .map((ts, ind) => (
@@ -202,7 +202,7 @@ export const Pie: React.FC<{
 
                     <PieSvg pieces={pieces} selectedIndex={selectedIndex} />
                     <PieSvgHover pieces={pieces} onMouse={onMouse} />
-                </React.Fragment>
+                </Fragment>
             )}
         </div>
     );

package/src/components/charts/pie-chart/pie-chart.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PieChart } from './index';
 
 export default {

package/src/components/charts/pie-chart/utils/interface.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 
 export interface PieChartSection<T> {
     title: string;
@@ -7,7 +7,7 @@ export interface PieChartSection<T> {
     data?: T;
 }
 
-export type PieChartPopoverContentType<T = any> = React.FC<{
+export type PieChartPopoverContentType<T = any> = FC<{
     index: number;
     value: number;
     data?: T;

package/src/components/image-cropper/image-cropper.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC, ChangeEvent, useRef, useState, Fragment } from 'react';
 import { ImageCropper } from './image-cropper';
 
 export default {
@@ -7,13 +7,13 @@ export default {
     parameters: {},
 };
 
-const BasicExample: React.FC = () => {
-    const [imageToEdit, setImageToEdit] = React.useState<File>();
-    const [croppedImage, setCroppedImage] = React.useState<string>();
+const BasicExample: FC = () => {
+    const [imageToEdit, setImageToEdit] = useState<File>();
+    const [croppedImage, setCroppedImage] = useState<string>();
 
-    const imageCropper = React.useRef<ImageCropper>(null);
+    const imageCropper = useRef<ImageCropper>(null);
 
-    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
         if (!file) {
             return;
@@ -38,7 +38,7 @@ const BasicExample: React.FC = () => {
     };
 
     return (
-        <React.Fragment>
+        <Fragment>
             <input type="file" accept="image/png, image/jpeg" onChange={handleFileChange} />
             {imageToEdit && (
                 <div style={{ marginTop: 30 }}>
@@ -62,7 +62,7 @@ const BasicExample: React.FC = () => {
                     </div>
                 </div>
             )}
-        </React.Fragment>
+        </Fragment>
     );
 };
 

package/src/components/image-cropper/image-cropper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import { observable, action, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import ReactCrop, { Crop } from 'react-image-crop';
@@ -13,7 +13,7 @@ interface ImageCropperProps {
 }
 
 @observer
-export class ImageCropper extends React.Component<ImageCropperProps> {
+export class ImageCropper extends Component<ImageCropperProps> {
     @observable private src?: string;
     @observable private crop?: Crop;
     @observable private image?: HTMLImageElement;

package/src/components/stat/stat-card.module.less

@@ -2,6 +2,13 @@
 
 .stat-diff {
     white-space: nowrap;
+    span {
+        font-size: @typescale-0;
+    }
+}
+
+.stat-extended-diff {
+    margin-bottom: 2px;
 }
 
 .title {

package/src/components/stat/stat-card.module.less.d.ts

@@ -1,4 +1,5 @@
 export const __esModule: true;
 export const statDiff: string;
+export const statExtendedDiff: string;
 export const title: string;
 

package/src/components/stat/stat-card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import {
     BodyText,
@@ -44,7 +44,7 @@ interface StatDiffProps {
     className?: string;
 }
 
-export const StatDiff: React.FC<StatDiffProps> = ({
+export const StatDiff: FC<StatDiffProps> = ({
     value,
     prev,
     size,
@@ -55,7 +55,8 @@ export const StatDiff: React.FC<StatDiffProps> = ({
 }) => {
     const percents = format === 'percent';
     const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);
-    let text = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
+    const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
+    let text = '';
 
     if (percents) {
         text += formatDifferencePercentage(absDiff, isIncrease);
@@ -80,6 +81,7 @@ export const StatDiff: React.FC<StatDiffProps> = ({
             )}
             size={size ?? 'small'}
         >
+            <span>{diff}</span>
             {value === undefined ? '\u00A0' : text}
         </BodyText>
     );
@@ -101,7 +103,7 @@ export interface StatCardProps {
     className?: string;
 }
 
-export const StatCard: React.FC<StatCardProps> = ({
+export const StatCard: FC<StatCardProps> = ({
     title,
     description,
     value,

package/src/components/stat/stat-cards.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { StatCard } from './stat-card';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (cb: () => React.ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
+const w = (cb: () => ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
 
 export const statCardNumber = w(() => <StatCard title="number" value={133} prev={1000} />);
 export const statCardMoney = w(() => <StatCard title="money" value={10000} prev={11000} money />);

package/src/components/stat/stat-extended-card.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { StatExtendedCard } from './stat-extended-card';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (cb: () => React.ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
+const w = (cb: () => ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
 
 export const statCardMoneyWithPrev = w(() => (
     <StatExtendedCard

package/src/components/stat/stat-extended-card.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan/design-system';
 import { formatValue } from '../../utils/formatters';
 import { StatDiff } from './stat-card';
+import * as Styles from './stat-card.module.less';
 
 export interface StatExtendedCardProps {
     title: string;
@@ -54,11 +55,11 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
                     </Tooltip>
                 )}
             </Stack>
-            <Eyebrow size="small" className="m-t-3 c-black">
+            <Eyebrow size="small" className="m-t-2 c-black">
                 {title2}
             </Eyebrow>
 
-            <Stack justifyContent="space-between">
+            <Stack justifyContent="space-between" className="m-t-half">
                 <Stack alignItems="flex-end" className="flex-grow-1 flex-basis-0">
                     <Headline className="m-b-0-i m-r-half fw-normal-i" size="xlarge">
                         {formatValue(value, format)}
@@ -72,7 +73,7 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
                             format={format}
                             inverted={inverted}
                             neutral={neutral}
-                            className="m-l-1"
+                            className={classNames(Styles.statExtendedDiff, 'm-l-1')}
                         />
                     ) : undefined}
                 </Stack>

package/src/components/ui/centered-spinner.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { CenteredSpinner } from './centered-spinner';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string; height?: string }, cb: () => React.ReactElement) => () =>
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
     <div style={style}>{cb()}</div>;
 
 export const centeredSpinnerTiny = w({}, () => <CenteredSpinner size="tiny" />);

package/src/components/ui/centered-spinner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import classnames from 'classnames';
 import { BodyText, Stack, Spinner } from '@servicetitan/design-system';
 
@@ -9,11 +9,7 @@ export interface CenteredSpinnerPropsStrict {
     info?: string;
 }
 
-export const CenteredSpinner: React.FC<CenteredSpinnerPropsStrict> = ({
-    size,
-    className,
-    info,
-}) => {
+export const CenteredSpinner: FC<CenteredSpinnerPropsStrict> = ({ size, className, info }) => {
     return (
         <Stack
             justifyContent="center"

package/src/components/ui/date-range-picker/date-range-picker.module.less

@@ -13,7 +13,7 @@
         }
 
         .FormField__label {
-            margin: 0;
+            margin: @spacing-0;
         }
 
         .DateRangeTrigger__shortLabel {

package/src/components/ui/date-range-picker/date-range-picker.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { DateRangePicker } from './date-range-picker';
 import { DateRangePickerState, DateRangePickerOptionsTenantAds } from '../../../utils/date';
 
@@ -11,7 +11,7 @@ export default {
 const tz = { UtcOffset: 0 };
 const state = DateRangePickerState.createWithOptions(DateRangePickerOptionsTenantAds.create(tz));
 
-const w = (style: { width?: string; height?: string }, Component: React.FC) => () =>
+const w = (style: { width?: string; height?: string }, Component: FC) => () =>
     (
         <div style={style}>
             <Component />

package/src/components/ui/date-range-picker/date-range-picker.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { BodyText, Form, Stack } from '@servicetitan/design-system';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { Button, ButtonProps, Tooltip } from '@servicetitan/design-system';
 
 interface DisabledButtonProps extends Omit<ButtonProps, 'disabled'> {
@@ -14,7 +14,7 @@ interface DisabledButtonProps extends Omit<ButtonProps, 'disabled'> {
  *   <DisabledButton disabled="This button is disabled">knock knock</Button>
  * )
  */
-export const DisabledButton: React.FC<DisabledButtonProps> = props => {
+export const DisabledButton: FC<DisabledButtonProps> = props => {
     return props.disabled && props.disabled !== true ? (
         <Tooltip text={props.disabled}>
             <Button {...props} disabled />

package/src/components/ui/line-text/line-text-body.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { BodyTextLine } from './line-text';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string }, cb: () => React.ReactElement) => () =>
+const w = (style: { width?: string }, cb: () => ReactElement) => () =>
     <div style={style}>{cb()}</div>;
 
 export const bodyTextLineUnlimited = w({}, () => <BodyTextLine>just a simple text</BodyTextLine>);

package/src/components/ui/line-text/line-text-head.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { HeadlineLine } from './line-text';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string }, cb: () => React.ReactElement) => () =>
+const w = (style: { width?: string }, cb: () => ReactElement) => () =>
     <div style={style}>{cb()}</div>;
 
 export const headlineLineUnlimited = w({}, () => <HeadlineLine>just a simple text</HeadlineLine>);

package/src/components/ui/line-text/line-text.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo, FC } from 'react';
 import classNames from 'classnames';
 import {
     BodyText,
@@ -30,11 +30,7 @@ export interface BodyTextLineProps extends BodyTextPropsStrict {
     children?: string;
 }
 
-export const BodyTextLine: React.FC<BodyTextLineProps> = ({
-    children,
-    wrapperClassName,
-    ...props
-}) => {
+export const BodyTextLine: FC<BodyTextLineProps> = ({ children, wrapperClassName, ...props }) => {
     const [ref1, ref2, limited] = useLimited();
 
     return (
@@ -79,11 +75,7 @@ export interface HeadlineLineProps extends HeadlinePropsStrict {
     children?: string;
 }
 
-export const HeadlineLine: React.FC<HeadlineLineProps> = ({
-    children,
-    wrapperClassName,
-    ...props
-}) => {
+export const HeadlineLine: FC<HeadlineLineProps> = ({ children, wrapperClassName, ...props }) => {
     const [ref1, ref2, limited] = useLimited();
 
     return (

package/src/utils/__tests__/formatters.test.ts

@@ -35,7 +35,7 @@ describe('formatPercent', () => {
         [0, '0%'],
         [0.1, '10%'],
         [0.0011, '0.1%'],
-        [0.9999, '99%'],
+        [0.9999, '100%'],
     ];
 
     tc.map(([value, result]) =>

package/src/utils/formatters.ts

@@ -7,7 +7,7 @@ const formatPercentValue = (value: number): string => {
         return '0';
     }
 
-    const valueMain = value ? Math.abs(Math.floor(value)) : 0;
+    const valueMain = value ? Math.abs(Math.round(value)) : 0;
 
     if (valueMain > 0) {
         return accounting.formatNumber(valueMain, 0);

package/src/utils/use-client-rect.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const useClientRect = (): [
     DOMRect | null,
@@ -41,7 +41,7 @@ export const useClientRect = (): [
         return () => clearTimeout(to);
     });
 
-    const ref = React.useCallback(
+    const ref = useCallback(
         (node: HTMLElement | null) => {
             if (node !== null) {
                 window.addEventListener('resize', handleResize);