@servicetitan/marketing-ui 1.8.0 → 1.9.0

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/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);