@servicetitan/marketing-ui 1.8.0 → 1.9.0

package/dist/utils/use-client-rect.js

@@ -1,26 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClientRect = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const useClientRect = () => {
     const element = (0, react_1.useRef)(null);
     const [rect, setRect] = (0, react_1.useState)(null);
@@ -51,7 +32,7 @@ const useClientRect = () => {
         }, 0);
         return () => clearTimeout(to);
     });
-    const ref = react_1.default.useCallback((node) => {
+    const ref = (0, react_1.useCallback)((node) => {
         if (node !== null) {
             window.addEventListener('resize', handleResize);
             setRect(node.getBoundingClientRect());

package/dist/utils/use-client-rect.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-client-rect.js","sourceRoot":"","sources":["../../src/utils/use-client-rect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwE;AAEjE,MAAM,aAAa,GAAG,GAI3B,EAAE;IACA,MAAM,OAAO,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAiB,IAAI,CAAC,CAAC;IAEvD,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAClC,IAAI,OAAO,CAAC,OAAO,EAAE;YACjB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACpD;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI,EAAE;YACP,OAAO;SACV;QAED;;;WAGG;QACH,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;;YACvB,MAAM,OAAO,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YAEzD,IACI,OAAO;gBACP,IAAI;gBACJ,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;oBACzB,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;oBAC9B,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;oBACpB,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAC3B;gBACE,OAAO,CAAC,OAAO,CAAC,CAAC;aACpB;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,eAAK,CAAC,WAAW,CACzB,CAAC,IAAwB,EAAE,EAAE;QACzB,IAAI,IAAI,KAAK,IAAI,EAAE;YACf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACzC;aAAM;YACH,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACnD,OAAO,CAAC,IAAI,CAAC,CAAC;SACjB;QACD,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAC3B,CAAC,EACD,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;AACxC,CAAC,CAAC;AAxDW,QAAA,aAAa,iBAwDxB"}
+{"version":3,"file":"use-client-rect.js","sourceRoot":"","sources":["../../src/utils/use-client-rect.ts"],"names":[],"mappings":";;;AAAA,iCAAiE;AAE1D,MAAM,aAAa,GAAG,GAI3B,EAAE;IACA,MAAM,OAAO,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAiB,IAAI,CAAC,CAAC;IAEvD,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAClC,IAAI,OAAO,CAAC,OAAO,EAAE;YACjB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACpD;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI,EAAE;YACP,OAAO;SACV;QAED;;;WAGG;QACH,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;;YACvB,MAAM,OAAO,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YAEzD,IACI,OAAO;gBACP,IAAI;gBACJ,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;oBACzB,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM;oBAC9B,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;oBACpB,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,EAC3B;gBACE,OAAO,CAAC,OAAO,CAAC,CAAC;aACpB;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;QAEN,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,IAAA,mBAAW,EACnB,CAAC,IAAwB,EAAE,EAAE;QACzB,IAAI,IAAI,KAAK,IAAI,EAAE;YACf,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAChD,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACzC;aAAM;YACH,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACnD,OAAO,CAAC,IAAI,CAAC,CAAC;SACjB;QACD,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAC3B,CAAC,EACD,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;AACxC,CAAC,CAAC;AAxDW,QAAA,aAAa,iBAwDxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -50,5 +50,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "fbd5f09b2656da18e7dd0e03d6a7aa05cc4f8cc6"
+    "gitHead": "3c8665339ec145e4faccdc601d2d1864ad2dda5a"
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { StatCard, StatCardProps } from '../stat/stat-card';
 import { StatExtendedCard, StatExtendedCardProps } from '../stat/stat-extended-card';
 import { adsStatDescriptions, AdsStatType } from '../../utils/ads-texts';
@@ -9,7 +9,7 @@ interface AdsPerformanceStatProps extends Omit<StatCardProps, 'title'> {
     title?: string;
 }
 
-export const AdsPerformanceStatCard: React.FC<AdsPerformanceStatProps> = props => {
+export const AdsPerformanceStatCard: FC<AdsPerformanceStatProps> = props => {
     const titleText = props.title ?? camelCaseToTitleCase(props.stat);
     const hintText = props.description ?? adsStatDescriptions[props.stat];
 
@@ -22,7 +22,7 @@ interface AdsPerformanceStatExtendedProps extends Omit<StatExtendedCardProps, 't
     title2: string;
 }
 
-export const AdsPerformanceStatExtendedCard: React.FC<AdsPerformanceStatExtendedProps> = props => {
+export const AdsPerformanceStatExtendedCard: FC<AdsPerformanceStatExtendedProps> = props => {
     const titleText = props.title ?? camelCaseToTitleCase(props.stat);
     const hintText = props.description ?? adsStatDescriptions[props.stat];
 

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState, FC } from 'react';
 import classNames from 'classnames';
 import {
     BodyText,
@@ -19,7 +19,7 @@ import { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';
 import { FunnelPyramidSvg } from './funnel-svg';
 import * as Styles from './funnel-chart.module.less';
 
-export const FunnelChart: React.FC<FunnelChartProps> = ({
+export const FunnelChart: FC<FunnelChartProps> = ({
     sections,
     format,
     topSideLength = defaultTopSideLength,

package/src/components/charts/funnel-chart/components/funnel-svg.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo, FC } from 'react';
 import tokens from '@servicetitan/tokens';
 import { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';
 
@@ -10,7 +10,7 @@ export interface FunnelPyramidSvgProps {
     bottomSideLength?: number;
 }
 
-export const FunnelPyramidSvg: React.FC<FunnelPyramidSvgProps> = ({
+export const FunnelPyramidSvg: FC<FunnelPyramidSvgProps> = ({
     colors,
     topSideLength = defaultTopSideLength,
     bottomSideLength = defaultBottomSideLength,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { FunnelChart, FunnelChartPopoverContentType, FunnelChartSection } from './index';
 import { BodyText } from '@servicetitan/design-system';
 
@@ -7,7 +7,7 @@ export default {
     component: FunnelChart,
     parameters: {},
 };
-const w = (cb: () => React.ReactElement) => () =>
+const w = (cb: () => ReactElement) => () =>
     <div style={{ height: '300px', width: '420px' }}>{cb()}</div>;
 
 const sections3 = (): FunnelChartSection<{ info: string[] }>[] => [

package/src/components/charts/line-chart/components/body.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, FC, Fragment } from 'react';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
 import { Stack } from '@servicetitan/design-system';
@@ -15,7 +15,7 @@ import { SvgBody, SvgBodyHover } from './svg-body';
 import { HoverPopover } from './hover-popover';
 import * as Styles from './body.module.less';
 
-export const Body: React.FC<{ classNameTitle?: string }> = provide({ singletons: [SvgStore] })(
+export const Body: FC<{ classNameTitle?: string }> = provide({ singletons: [SvgStore] })(
     observer(({ classNameTitle }) => {
         const [{ display, metrics, left, right, periods, resolution, setHoveredIndex }, svgStore] =
             useDependencies(LineChartStore, SvgStore);
@@ -53,7 +53,7 @@ export const Body: React.FC<{ classNameTitle?: string }> = provide({ singletons:
                             })}
                         >
                             {periods.length ? (
-                                <React.Fragment>
+                                <Fragment>
                                     {periods.length !== labels.length && (
                                         <div className={Styles.labelBorders}>
                                             {labels
@@ -70,7 +70,7 @@ export const Body: React.FC<{ classNameTitle?: string }> = provide({ singletons:
                                         onValueHover={onBarHover}
                                         onValueLeave={onBarLeave}
                                     />
-                                </React.Fragment>
+                                </Fragment>
                             ) : (
                                 <Stack
                                     className="h-100"

package/src/components/charts/line-chart/components/container.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import { useEffect, FC } from 'react';
 import { observer } from 'mobx-react';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { LineChartProps } from '../utils/interfaces';
 import { LineChartStore } from '../stores/line-chart.store';
 import { Body } from './body';
 
-export const LineChart: React.FC<LineChartProps> = provide({
+export const LineChart: FC<LineChartProps> = provide({
     singletons: [LineChartStore],
 })(
     observer(props => {

package/src/components/charts/line-chart/components/hover-popover.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, FC, Fragment } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { useDependencies } from '@servicetitan/react-ioc';
@@ -10,7 +10,7 @@ import { periodDateTitleFormatter } from '../utils/labels';
 import * as Styles from './hover-popover.module.less';
 import { ColorTag } from './stuff';
 
-export const HoverPopover: React.FC = observer(() => {
+export const HoverPopover: FC = observer(() => {
     const [{ periods, resolution, hoveredIndex, metrics, display }, svgStore] = useDependencies(
         LineChartStore,
         SvgStore
@@ -42,7 +42,7 @@ export const HoverPopover: React.FC = observer(() => {
     const partialWeek = !!period.partial;
 
     return (
-        <React.Fragment>
+        <Fragment>
             <div
                 className={Styles.line}
                 style={{ left: svgStore.fpx(svgStore.periodX(hoveredIndex)) + '%' }}
@@ -73,6 +73,6 @@ export const HoverPopover: React.FC = observer(() => {
                         )
                 )}
             </div>
-        </React.Fragment>
+        </Fragment>
     );
 });

package/src/components/charts/line-chart/components/sidebar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import { Stack } from '@servicetitan/design-system';
 import * as Styles from './sidebar.module.less';
@@ -12,7 +12,7 @@ interface SidebarProps {
     right?: boolean;
 }
 
-export const Sidebar: React.FC<SidebarProps> = ({ settings, right, className, classNameTitle }) => {
+export const Sidebar: FC<SidebarProps> = ({ settings, right, className, classNameTitle }) => {
     const sidebarTitle = settings.title ? (
         <Stack.Item
             className={classNames(

package/src/components/charts/line-chart/components/stuff.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useMemo } from 'react';
+import { CSSProperties, useMemo, FC } from 'react';
 import classNames from 'classnames';
 import { BodyText, Stack } from '@servicetitan/design-system';
 import * as Styles from './stuff.module.less';
@@ -13,7 +13,7 @@ interface ColorTagProps {
     dashed?: boolean;
 }
 
-export const ColorTag: React.FC<ColorTagProps> = ({ label, color, className, small, dashed }) => (
+export const ColorTag: FC<ColorTagProps> = ({ label, color, className, small, dashed }) => (
     <Stack alignItems="center" className={className}>
         <div
             style={
@@ -39,7 +39,7 @@ interface MetricsTitleProps {
     metrics: LineChartMetric[];
 }
 
-export const MetricsTitle: React.FC<MetricsTitleProps> = ({ metrics }) => (
+export const MetricsTitle: FC<MetricsTitleProps> = ({ metrics }) => (
     <Stack alignItems="center">
         {metrics.map(m => (
             <ColorTag
@@ -53,7 +53,7 @@ export const MetricsTitle: React.FC<MetricsTitleProps> = ({ metrics }) => (
     </Stack>
 );
 
-export const XAxisLabels: React.FC<{
+export const XAxisLabels: FC<{
     labels: ChartXLabels;
     width: number;
     left: number;

package/src/components/charts/line-chart/components/svg-bars.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { observer } from 'mobx-react';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { ChartMetric } from '../utils/internal-interfaces';
@@ -10,7 +10,7 @@ interface SvgBarsProps {
     isStackedBarChart?: boolean;
 }
 
-export const SvgBars: React.FC<SvgBarsProps> = observer(({ metrics, isStackedBarChart }) => {
+export const SvgBars: FC<SvgBarsProps> = observer(({ metrics, isStackedBarChart }) => {
     const [store] = useDependencies(SvgStore);
     const { fpx, fpy, barWidth, length } = store;
     const barWidthHalf = barWidth / 2;
@@ -65,7 +65,7 @@ interface SvgBarsHoverProps {
     onLeave(ind: number): void;
 }
 
-export const SvgBarsHover: React.FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {
+export const SvgBarsHover: FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {
     const [store] = useDependencies(SvgStore);
     const { fpx, fpy, barWidth, length } = store;
     const barWidthHalf = barWidth / 2;

package/src/components/charts/line-chart/components/svg-body.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { observer } from 'mobx-react';
 import tokens from '@servicetitan/tokens';
 import { useDependencies } from '@servicetitan/react-ioc';
@@ -11,7 +11,7 @@ import { SvgBars, SvgBarsHover } from './svg-bars';
 import { SvgLines } from './svg-lines';
 import * as Styles from './svg.module.less';
 
-const SvgGrid: React.FC = () => {
+const SvgGrid: FC = () => {
     const lines = [];
 
     for (let i = 1; i <= 10; i += 1) {
@@ -39,7 +39,7 @@ interface SvgBodyProps {
     metrics: ChartMetric[];
 }
 
-export const SvgBody: React.FC<SvgBodyProps> = observer(({ horizontalGrid, metrics }) => {
+export const SvgBody: FC<SvgBodyProps> = observer(({ horizontalGrid, metrics }) => {
     const [{ key }] = useDependencies(SvgStore);
     const barMetrics = metrics.filter(m => m.type === 'bar');
     const stackedBarMetrics = metrics.filter(m => m.type === 'stacked-bar');
@@ -71,7 +71,7 @@ interface SvgBodyHoverProps {
     onValueLeave(ind: number): void;
 }
 
-export const SvgBodyHover: React.FC<SvgBodyHoverProps> = ({ onValueHover, onValueLeave }) => (
+export const SvgBodyHover: FC<SvgBodyHoverProps> = ({ onValueHover, onValueLeave }) => (
     <svg className={Styles.svgHover} viewBox="0 0 100 100" preserveAspectRatio="none">
         <SvgBarsHover onHover={onValueHover} onLeave={onValueLeave} />
     </svg>

package/src/components/charts/line-chart/components/svg-lines.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo, FC } from 'react';
 import { observer } from 'mobx-react';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { ChartMetric } from '../utils/internal-interfaces';
@@ -11,7 +11,7 @@ interface SvgLineProps {
     dashed: boolean;
 }
 
-const SvgLine: React.FC<SvgLineProps> = ({ color, points, dashed }) => (
+const SvgLine: FC<SvgLineProps> = ({ color, points, dashed }) => (
     <path
         className={Styles.line}
         d={points.map(([px, py], ind) => (ind === 0 ? 'M' : 'L') + `${px} ${py}`).join(' ')}
@@ -26,7 +26,7 @@ interface SvgLinesProps {
     metrics: ChartMetric[];
 }
 
-export const SvgLines: React.FC<SvgLinesProps> = observer(({ metrics }) => {
+export const SvgLines: FC<SvgLinesProps> = observer(({ metrics }) => {
     const [store] = useDependencies(SvgStore);
 
     const lines = useMemo(

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

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 import { Form } from '@servicetitan/design-system';
 import { LineChart, LineChartPeriod } from './index';
 

package/src/components/charts/line-chart/utils/interfaces.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 
 export type LineChartResolution = 'hour' | 'day' | 'week' | 'month';
 export type LineChartMetricType = 'line' | 'bar' | 'stacked-bar';
@@ -74,7 +74,7 @@ export interface LineChartProps extends LineChartData {
 
 export interface LineChartCardProps extends LineChartProps {
     title: string;
-    headerRight?: React.ReactElement;
+    headerRight?: ReactElement;
     loading?: boolean;
     grayControls?: boolean;
 }

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo, FC } from 'react';
 import classNames from 'classnames';
 import { BodyText, Stack, StatusLight } from '@servicetitan/design-system';
 import { PieChartProps, PiePiece } from '../utils/interface';
@@ -6,7 +6,7 @@ import { convertSessionsToPieces } from '../utils/const';
 import { Pie } from './pie';
 import * as Styles from './pie-chart.module.less';
 
-const PieTitles: React.FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {
+const PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {
     return (
         <div className={classNames(Styles.titleWrapper, 'of-y-auto p-t-2')}>
             <div>
@@ -28,13 +28,7 @@ const PieTitles: React.FC<{ title: string; pieces: PiePiece[] }> = ({ title, pie
     );
 };
 
-export const PieChart: React.FC<PieChartProps> = ({
-    height,
-    width,
-    title,
-    sections,
-    popoverContent,
-}) => {
+export const PieChart: FC<PieChartProps> = ({ height, width, title, sections, popoverContent }) => {
     const pieces = useMemo(() => convertSessionsToPieces(sections), [sections]);
     const style = useMemo(() => ({ height, width }), [height, width]);
 

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.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,
@@ -103,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,4 +1,4 @@
-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';

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"