refactor: better types for withRef (#1054)

onfido · Oct 12, 2021 · 8a3664d · 8a3664d · vercel · Oct 12, 2021
1 parent 41a23ef
commit 8a3664d
Show file tree

Hide file tree

Showing 19 changed files with 33 additions and 34 deletions.
diff --git a/packages/react/src/components/asterisk/asterisk.tsx b/packages/react/src/components/asterisk/asterisk.tsx
@@ -7,7 +7,7 @@ import { withRef } from '../../utils';
  */
 export const Asterisk = withRef(function Asterisk(
   { className, ...restProps }: AsteriskProps,
-  ref?: AsteriskProps['ref']
+  ref: AsteriskProps['ref']
 ) {
   return (
     <abbr {...restProps} ref={ref} className={classy(c('asterisk'), className)}>

diff --git a/packages/react/src/components/button/button.stories.tsx b/packages/react/src/components/button/button.stories.tsx
@@ -50,9 +50,12 @@ export const Disabled = reactMatrix(Button, { disabled });
 Disabled.argTypes = omit('disabled');
 
 export const AsAnchor: Story<ButtonProps<'a'>> = (props) => (
-  <Button href="javascript:void 0" {...props} />
+  <Button {...props} />
 );
 AsAnchor.argTypes = omit('href');
+AsAnchor.args = {
+  href: 'javascript:void 0',
+};
 
 const [firstIconName] = iconNames;
 

diff --git a/packages/react/src/components/button/button.tsx b/packages/react/src/components/button/button.tsx
@@ -1,6 +1,6 @@
 import { ButtonProps as BaseProps, c, classy, m } from '@onfido/castor';
 import { useField } from '@onfido/castor-react';
-import React, { HTMLAttributes } from 'react';
+import React, { ForwardedRef, HTMLAttributes } from 'react';
 import { withRef } from '../../utils';
 
 export const Button: ButtonComponent = withRef(function Button(
@@ -10,7 +10,7 @@ export const Button: ButtonComponent = withRef(function Button(
     className,
     ...restProps
   }: ButtonProps<'a'> | ButtonProps<'button'>,
-  ref?: AnchorRef | ButtonRef
+  ref: AnchorRef | ButtonRef
 ) {
   const { disabled } = useField();
 
@@ -32,11 +32,11 @@ export type ButtonProps<T extends 'a' | 'button' = 'button'> = BaseProps &
   (T extends 'a' ? AnchorElementProps : ButtonElementProps);
 
 type ButtonComponent = {
-  (props: BaseProps & AnchorElementProps, ref?: AnchorRef): JSX.Element;
-  (props: BaseProps & ButtonElementProps, ref?: ButtonRef): JSX.Element;
+  (props: BaseProps & AnchorElementProps, ref: AnchorRef): JSX.Element;
+  (props: BaseProps & ButtonElementProps, ref: ButtonRef): JSX.Element;
 };
 
-type AnchorElementProps = JSX.IntrinsicElements['a'];
-type ButtonElementProps = JSX.IntrinsicElements['button'];
-type AnchorRef = AnchorElementProps['ref'];
-type ButtonRef = ButtonElementProps['ref'];
+type AnchorElementProps = JSX.IntrinsicElements['a'] & { ref?: AnchorRef };
+type ButtonElementProps = JSX.IntrinsicElements['button'] & { ref?: ButtonRef };
+type AnchorRef = ForwardedRef<HTMLAnchorElement>;
+type ButtonRef = ForwardedRef<HTMLButtonElement>;
diff --git a/packages/react/src/components/checkbox/checkbox.tsx b/packages/react/src/components/checkbox/checkbox.tsx
@@ -16,7 +16,7 @@ export const Checkbox = withRef(function Checkbox(
     style,
     ...restProps
   }: CheckboxProps,
-  ref?: CheckboxProps['ref']
+  ref: CheckboxProps['ref']
 ) {
   const { disabled, touched } = useField();
   const [containerProps, inputProps] = splitContainerProps(restProps);

diff --git a/packages/react/src/components/field-label/field-label.tsx b/packages/react/src/components/field-label/field-label.tsx
@@ -11,7 +11,7 @@ import { withRef } from '../../utils';
  */
 export const FieldLabel = withRef(function FieldLabel(
   { className, ...restProps }: FieldLabelProps,
-  ref?: FieldLabelProps['ref']
+  ref: FieldLabelProps['ref']
 ) {
   return (
     <label

diff --git a/packages/react/src/components/field/field.tsx b/packages/react/src/components/field/field.tsx
@@ -29,7 +29,7 @@ export const Field = withRef(function Field(
     className,
     ...restProps
   }: FieldProps,
-  ref?: FieldProps['ref']
+  ref: FieldProps['ref']
 ) {
   const [field, setField] = useState<FieldState>(initial);
 

diff --git a/packages/react/src/components/fieldset-legend/fieldset-legend.tsx b/packages/react/src/components/fieldset-legend/fieldset-legend.tsx
@@ -7,7 +7,7 @@ import { withRef } from '../../utils';
  */
 export const FieldsetLegend = withRef(function FieldsetLegend(
   { className, ...restProps }: FieldsetLegendProps,
-  ref?: FieldsetLegendProps['ref']
+  ref: FieldsetLegendProps['ref']
 ) {
   return (
     <legend

diff --git a/packages/react/src/components/fieldset/fieldset.tsx b/packages/react/src/components/fieldset/fieldset.tsx
@@ -5,7 +5,7 @@ import { withRef } from '../../utils';
 
 export const Fieldset = withRef(function Fieldset(
   { className, ...restProps }: FieldsetProps,
-  ref?: FieldsetProps['ref']
+  ref: FieldsetProps['ref']
 ) {
   const { disabled } = useField();
 

diff --git a/packages/react/src/components/form/form.tsx b/packages/react/src/components/form/form.tsx
@@ -1,5 +1,5 @@
 import { c, classy, FormProps as BaseProps, m } from '@onfido/castor';
-import React, { FormEvent, useState } from 'react';
+import React, { FormEvent, ForwardedRef, useState } from 'react';
 import { withRef } from '../../utils';
 import { getFormValues } from './getFormValues';
 import { FormProvider } from './useForm';
@@ -15,7 +15,7 @@ export const Form = withRef(function Form<T extends Values>(
     className,
     ...restProps
   }: FormProps<T>,
-  ref?: FormProps<T>['ref']
+  ref: ForwardedRef<HTMLFormElement>
 ) {
   const [touched, setTouched] = useState<boolean>();
 

diff --git a/packages/react/src/components/helper-text/helper-text.tsx b/packages/react/src/components/helper-text/helper-text.tsx
@@ -7,7 +7,7 @@ import { withRef } from '../../utils';
  */
 export const HelperText = withRef(function HelperText(
   { disabled, className, ...restProps }: HelperTextProps,
-  ref?: HelperTextProps['ref']
+  ref: HelperTextProps['ref']
 ) {
   return (
     <span

diff --git a/packages/react/src/components/icon/icon.tsx b/packages/react/src/components/icon/icon.tsx
@@ -13,7 +13,7 @@ import { withRef } from '../../utils';
  */
 export const Icon = withRef(function Icon(
   { name, color: token, className, ...restProps }: IconProps,
-  ref?: IconProps['ref']
+  ref: IconProps['ref']
 ) {
   return (
     <svg

diff --git a/packages/react/src/components/input/input.tsx b/packages/react/src/components/input/input.tsx
@@ -13,7 +13,7 @@ export const Input = withRef(function Input(
     className,
     ...restProps
   }: InputProps,
-  ref?: InputProps['ref']
+  ref: InputProps['ref']
 ) {
   const { disabled, touched } = useField();
 

diff --git a/packages/react/src/components/progress/progress.tsx b/packages/react/src/components/progress/progress.tsx
@@ -21,7 +21,7 @@ export const Progress = withRef(function Progress(
     'aria-valuetext': ariaValuetext,
     ...restProps
   }: ProgressProps,
-  ref?: ProgressProps['ref']
+  ref: ProgressProps['ref']
 ) {
   const percentValue = useMemo(
     () => `${Math.round(((value - min) * 100) / (max - min))}%`,

diff --git a/packages/react/src/components/radio/radio.tsx b/packages/react/src/components/radio/radio.tsx
@@ -16,7 +16,7 @@ export const Radio = withRef(function Radio(
     style,
     ...restProps
   }: RadioProps,
-  ref?: RadioProps['ref']
+  ref: RadioProps['ref']
 ) {
   const { disabled, touched } = useField();
   const [containerProps, inputProps] = splitContainerProps(restProps);

diff --git a/packages/react/src/components/search/search.tsx b/packages/react/src/components/search/search.tsx
@@ -11,7 +11,7 @@ import { withRef } from '../../utils';
  */
 export const Search = withRef(function Search(
   { className, style, ...restProps }: SearchProps,
-  ref?: SearchProps['ref']
+  ref: SearchProps['ref']
 ) {
   return (
     <div className={classy(c('search'), className)} style={style}>

diff --git a/packages/react/src/components/spinner/spinner.tsx b/packages/react/src/components/spinner/spinner.tsx
@@ -4,7 +4,7 @@ import { withRef } from '../../utils';
 
 export const Spinner = withRef(function Spinner(
   { size = 'medium', children, className, ...restProps }: SpinnerProps,
-  ref?: SpinnerProps['ref']
+  ref: SpinnerProps['ref']
 ) {
   return (
     <div

diff --git a/packages/react/src/components/textarea/textarea.tsx b/packages/react/src/components/textarea/textarea.tsx
@@ -15,7 +15,7 @@ export const Textarea = withRef(function Textarea(
     style,
     ...restProps
   }: TextareaProps,
-  ref?: TextareaProps['ref']
+  ref: TextareaProps['ref']
 ) {
   const { disabled, touched } = useField();
 

diff --git a/packages/react/src/components/validation/validation.tsx b/packages/react/src/components/validation/validation.tsx
@@ -20,7 +20,7 @@ export const Validation = withRef(function Validation(
     className,
     ...restProps
   }: ValidationProps,
-  ref?: ValidationProps['ref']
+  ref: ValidationProps['ref']
 ) {
   const { disabled, touched, validity } = useField();
 

diff --git a/packages/react/src/utils/withRef/withRef.ts b/packages/react/src/utils/withRef/withRef.ts
@@ -1,15 +1,11 @@
-import { FC, forwardRef } from 'react';
+import { ForwardedRef, forwardRef, ReactElement } from 'react';
 
 /**
  * Same as `forwardRef` except it returns the type of `component`.
  *
  * @param component Component to `forwardRef`.
  */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export const withRef = <C extends FC<any>>(component: C): C & Named =>
-  forwardRef(component as any) as any;
-/* eslint-enable @typescript-eslint/no-explicit-any */
+export const withRef = <C extends Forwarded<T, P>, T, P>(component: C): C =>
+  forwardRef(component) as never;
 
-interface Named {
-  displayName?: string;
-}
+type Forwarded<T, P> = (props: P, ref: ForwardedRef<T>) => ReactElement | null;