chore: Add forwardRef everywhere (#108)

* chore: add `forwardRef` (almost) everywhere
* docs: add refs docs

Author: anucreative

.eslintrc

@@ -13,6 +13,7 @@
     "sort-imports": [
       "warn",
       {
+        "ignoreCase": true,
         "ignoreDeclarationSort": true,
         "memberSyntaxSortOrder": ["single", "all", "multiple", "none"]
       }

src/components/Badge/index.js

@@ -1,5 +1,7 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import { Tag } from '../Tag'
 
-export const Badge = props => <Tag size="sm" {...props} />
+export const Badge = forwardRef((props, ref) => <Tag ref={ref} size="sm" {...props} />)
+
+Badge.displayName = 'Badge'

src/components/Button/index.js

@@ -1,31 +1,32 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import { bool, node, oneOf } from 'prop-types'
 
 import { IconButton } from '../IconButton'
 
 import * as S from './styles'
 
-const Button = ({ children, disabled, size = 'md', variant = 'primary', ...props }) => {
-  return (
+const Button = forwardRef(
+  ({ children, disabled, size = 'md', variant = 'primary', ...rest }, ref) => (
     <S.Button
       data-testid="button"
       disabled={disabled}
+      ref={ref}
       size={size}
       variant={disabled ? 'disabled' : variant}
-      {...props}
+      {...rest}
     >
       {children}
     </S.Button>
   )
-}
+)
+
+Button.displayName = 'Button'
 
 Button.propTypes = {
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  /** To set the button size */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  /** To set a rounded button */
-  variant: PropTypes.oneOf([
+  children: node,
+  disabled: bool,
+  size: oneOf(['xs', 'sm', 'md', 'lg']),
+  variant: oneOf([
     'primary',
     'secondary',
     'tertiary',

src/components/ConnectedField/index.js

@@ -1,19 +1,21 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { bool, func, object, shape, string } from 'prop-types'
 import { Field as FinalField } from 'react-final-form'
 
 import { Field } from '../Field'
 import { getBaseType } from '../../utils/fields'
 
-export const ConnectedField = ({ component, type, ...rest }) => (
+export const ConnectedField = forwardRef(({ component, type, ...rest }, ref) => (
   <FinalField
     type={getBaseType(component.type || type)}
     {...rest}
     render={({ input, meta }) => (
-      <Field {...rest} {...input} {...meta} component={component} connected />
+      <Field {...rest} {...input} {...meta} component={component} connected inputRef={ref} />
     )}
   />
-)
+))
+
+ConnectedField.displayName = 'WelcomeField'
 
 ConnectedField.propTypes = {
   component: func,

src/components/Field/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { forwardRef, Fragment } from 'react'
 import PropTypes from 'prop-types'
 
 // Common
@@ -12,97 +12,105 @@ import { Hint } from '../Hint'
 // Fields
 import { StyledField } from './styles'
 
-export const Field = ({
-  autoFocus,
-  checked,
-  children,
-  component: Component,
-  connected,
-  disabled,
-  disabledIcon,
-  error,
-  flexDirection,
-  hint,
-  label,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  onKeyDown,
-  options,
-  placeholder,
-  required,
-  touched,
-  type,
-  value,
-  warning,
-  ...props
-}) => {
-  // Return early if no component
-  if (!Component) {
-    return null
-  }
+export const Field = forwardRef(
+  (
+    {
+      autoFocus,
+      checked,
+      children,
+      component: Component,
+      connected,
+      disabled,
+      disabledIcon,
+      error,
+      flexDirection,
+      hint,
+      label,
+      name,
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      options,
+      placeholder,
+      required,
+      touched,
+      type,
+      value,
+      warning,
+      ...props
+    },
+    ref
+  ) => {
+    // Return early if no component
+    if (!Component) {
+      return null
+    }
 
-  const baseType = getBaseType(Component.type || type)
-  const variant = getVariant({ connected, touched, warning, error })
-  const hintText = getHintText({ connected, touched, warning, error, hint })
-  const isRadio = baseType === 'radio'
-  const isCheckable = ['checkbox', 'radio'].includes(baseType)
+    const baseType = getBaseType(Component.type || type)
+    const variant = getVariant({ connected, touched, warning, error })
+    const hintText = getHintText({ connected, touched, warning, error, hint })
+    const isRadio = baseType === 'radio'
+    const isCheckable = ['checkbox', 'radio'].includes(baseType)
 
-  const isShowRequired = isRadio ? null : required
-  const layout = flexDirection || (isCheckable ? 'row' : 'column')
-  const Container = layout === 'row' ? RowContainer : Fragment
-  const htmlFor = isRadio ? value : name
+    const isShowRequired = isRadio ? null : required
+    const layout = flexDirection || (isCheckable ? 'row' : 'column')
+    const Container = layout === 'row' ? RowContainer : Fragment
+    const htmlFor = isRadio ? value : name
 
-  const field = (
-    <Component
-      autoFocus={autoFocus}
-      checked={checked}
-      disabled={disabled}
-      flexDirection={layout}
-      name={name}
-      onBlur={onBlur}
-      onChange={onChange}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
-      options={options}
-      placeholder={placeholder}
-      required={required}
-      type={baseType}
-      value={value}
-      variant={variant}
-      {...props}
-    >
-      {children}
-    </Component>
-  )
+    const field = (
+      <Component
+        autoFocus={autoFocus}
+        checked={checked}
+        disabled={disabled}
+        flexDirection={layout}
+        inputRef={ref}
+        name={name}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+        options={options}
+        placeholder={placeholder}
+        required={required}
+        type={baseType}
+        value={value}
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Component>
+    )
 
-  return (
-    <StyledField
-      checkableField={isCheckable}
-      checked={checked}
-      fieldType={Component.type}
-      flexDirection={layout}
-    >
-      <Container>
-        {label && (
-          <Label
-            disabled={disabled}
-            disabledIcon={disabledIcon}
-            htmlFor={htmlFor}
-            required={isShowRequired}
-            variant={variant}
-          >
-            {isCheckable && field}
-            {label}
-          </Label>
-        )}
-        {!isCheckable && field}
-      </Container>
-      {hintText && <Hint variant={variant}>{hintText}</Hint>}
-    </StyledField>
-  )
-}
+    return (
+      <StyledField
+        checkableField={isCheckable}
+        checked={checked}
+        fieldType={Component.type}
+        flexDirection={layout}
+      >
+        <Container>
+          {label && (
+            <Label
+              disabled={disabled}
+              disabledIcon={disabledIcon}
+              htmlFor={htmlFor}
+              required={isShowRequired}
+              variant={variant}
+            >
+              {isCheckable && field}
+              {label}
+            </Label>
+          )}
+          {!isCheckable && field}
+        </Container>
+        {hintText && <Hint variant={variant}>{hintText}</Hint>}
+      </StyledField>
+    )
+  }
+)
+
+Field.displayName = 'Field'
 
 Field.propTypes = {
   autoFocus: PropTypes.bool,

src/components/FieldGroup/index.js

@@ -1,18 +1,19 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+import { node, string } from 'prop-types'
 
 import { Label } from '../Label'
 
 import { StyledFieldGroup } from './styles'
 
-export const FieldGroup = ({ children, label }) => (
-  <StyledFieldGroup>
+export const FieldGroup = forwardRef(({ children, label }, ref) => (
+  <StyledFieldGroup ref={ref}>
     <Label as="legend">{label}</Label>
     {children}
   </StyledFieldGroup>
-)
+))
 
+FieldGroup.displayName = 'FieldGroup'
 FieldGroup.propTypes = {
-  children: PropTypes.node,
-  label: PropTypes.string
+  children: node,
+  label: string
 }

src/components/FileUpload/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
+import { bool, func, node, number, oneOfType, string } from 'prop-types'
 import { useDropzone } from 'react-dropzone'
 
 // Common
@@ -24,6 +24,7 @@ export const FileUpload = ({
   children = DefaultContent,
   disabled,
   input,
+  inputRef,
   maxSize = DEFAULT_MAX_FILE_SIZE,
   multiple,
   onAddFile,
@@ -90,7 +91,7 @@ export const FileUpload = ({
     <StyledFileUpload
       {...getRootProps({ handleRemoveFile, isDragActive, isDragAccept, isDragReject, disabled })}
     >
-      <input {...getInputProps({ name: input && input.name })} />
+      <input {...getInputProps({ name: input && input.name })} ref={inputRef} />
       <FilePreview>
         {children({
           fileUrl: file && getPreviewUrl(file.preview),
@@ -115,15 +116,16 @@ export const FileUpload = ({
 }
 
 FileUpload.propTypes = {
-  accept: PropTypes.string,
-  children: PropTypes.func,
-  disabled: PropTypes.bool,
-  input: PropTypes.node,
-  maxSize: PropTypes.number,
-  multiple: PropTypes.bool,
-  onAddFile: PropTypes.func,
-  onChange: PropTypes.func,
-  onError: PropTypes.func,
-  onRemoveFile: PropTypes.func,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  accept: string,
+  children: func,
+  disabled: bool,
+  input: node,
+  inputRef: node,
+  maxSize: number,
+  multiple: bool,
+  onAddFile: func,
+  onChange: func,
+  onError: func,
+  onRemoveFile: func,
+  title: oneOfType([string, node])
 }