fix(components): add default handler props and sort props & type (#86)

* fix(components): add default handler props and sort props & type

* fix(components): add default handler props and sort props & type on RadioField

package.json

@@ -172,7 +172,7 @@
   },
   "dependencies": {
     "@babel/runtime": "7.17.2",
-    "@scaleway/ui": "0.136.1",
+    "@scaleway/ui": "0.136.3",
     "final-form": "4.20.6",
     "final-form-arrays": "3.0.2",
     "final-form-focus": "1.1.2",

src/components/CheckboxField/index.tsx

@@ -2,10 +2,6 @@ import { Checkbox } from '@scaleway/ui'
 import { FieldState } from 'final-form'
 import React, {
   ComponentProps,
-  FocusEvent,
-  FocusEventHandler,
-  FormEvent,
-  FormEventHandler,
   ReactNode,
   Ref,
   forwardRef,
@@ -19,26 +15,29 @@ import { BaseFieldProps } from '../../types'
 
 type CheckboxValue = NonNullable<ComponentProps<typeof Checkbox>['checked']>
 
-type CheckboxFieldProps<T = CheckboxValue, K = string> = BaseFieldProps<
-  T,
-  K
-> & {
-  name: string
-  label?: string
-  valid?: boolean
-  size?: number
-  progress?: boolean
-  disabled?: boolean
-  required?: boolean
-  typographyVariant?: string
-  checked?: CheckboxValue | undefined
-  id?: string
-  className?: string
-  children?: ReactNode
-  onChange?: FormEventHandler<HTMLInputElement>
-  onBlur?: FocusEventHandler<HTMLInputElement>
-  onFocus?: FocusEventHandler<HTMLInputElement>
-}
+type CheckboxFieldProps<T = CheckboxValue, K = string> = BaseFieldProps<T, K> &
+  Partial<
+    Pick<
+      ComponentProps<typeof Checkbox>,
+      | 'checked'
+      | 'disabled'
+      | 'id'
+      | 'onBlur'
+      | 'onChange'
+      | 'onFocus'
+      | 'progress'
+      | 'readOnly'
+      | 'required'
+      | 'size'
+      | 'typographyVariant'
+      | 'valid'
+    >
+  > & {
+    name: string
+    label?: string
+    className?: string
+    children?: ReactNode
+  }
 
 const CheckboxField = forwardRef(
   (
@@ -95,15 +94,15 @@ const CheckboxField = forwardRef(
     return (
       <Checkbox
         name={input.name}
-        onChange={(event: FormEvent<HTMLInputElement>) => {
+        onChange={event => {
           input.onChange(event)
           onChange?.(event)
         }}
-        onBlur={(event: FocusEvent<HTMLInputElement>) => {
+        onBlur={event => {
           input.onBlur(event)
           onBlur?.(event)
         }}
-        onFocus={(event: FocusEvent<HTMLInputElement>) => {
+        onFocus={event => {
           input.onFocus(event)
           onFocus?.(event)
         }}

src/components/RadioBorderedBoxField/index.tsx

@@ -1,14 +1,6 @@
 import { RadioBorderedBox } from '@scaleway/ui'
 import { FieldState } from 'final-form'
-import React, {
-  ComponentProps,
-  FocusEvent,
-  FocusEventHandler,
-  FormEvent,
-  FormEventHandler,
-  ReactNode,
-  useMemo,
-} from 'react'
+import React, { ComponentProps, ReactNode, useMemo } from 'react'
 import { useField, useFormState } from 'react-final-form'
 import pickValidators from '../../helpers/pickValidators'
 import useValidation from '../../hooks/useValidation'
@@ -26,38 +18,42 @@ type RadioBorderedBoxFieldProps<
   Partial<
     Pick<
       ComponentProps<typeof RadioBorderedBox>,
-      'labelDescription' | 'badgeSize' | 'badgeText' | 'badgeVariant' | 'size'
+      | 'badgeSize'
+      | 'badgeText'
+      | 'badgeVariant'
+      | 'disabled'
+      | 'labelDescription'
+      | 'size'
+      | 'valid'
+      | 'value'
+      | 'onChange'
+      | 'onBlur'
+      | 'onFocus'
     >
   > & {
+    children?: ReactNode
     label: string
     name: string
-    valid?: boolean
-    disabled?: boolean
     required?: boolean
-    value: RadioBorderedBoxValue
-    children?: ReactNode
-    onChange?: FormEventHandler<HTMLInputElement>
-    onBlur?: FocusEventHandler<HTMLInputElement>
-    onFocus?: FocusEventHandler<HTMLInputElement>
   }
 
 const RadioBorderedBoxField = ({
-  validate,
-  name,
-  valid,
-  label,
-  labelDescription,
   badgeSize,
   badgeText,
   badgeVariant,
-  size,
-  disabled,
-  required,
-  value,
   children,
-  onChange,
+  disabled,
+  label,
+  labelDescription,
+  name,
   onBlur,
+  onChange,
   onFocus,
+  required,
+  size,
+  valid,
+  validate,
+  value,
 }: RadioBorderedBoxFieldProps): JSX.Element => {
   const { values } = useFormState()
   const { getFirstError } = useErrors()
@@ -97,15 +93,15 @@ const RadioBorderedBoxField = ({
       badgeText={badgeText}
       badgeVariant={badgeVariant}
       name={input.name}
-      onChange={(event: FormEvent<HTMLInputElement>) => {
+      onChange={event => {
         input.onChange(event)
         onChange?.(event)
       }}
-      onBlur={(event: FocusEvent<HTMLInputElement>) => {
+      onBlur={event => {
         input.onBlur(event)
         onBlur?.(event)
       }}
-      onFocus={(event: FocusEvent<HTMLInputElement>) => {
+      onFocus={event => {
         input.onFocus(event)
         onFocus?.(event)
       }}

src/components/RadioField/index.tsx

@@ -1,14 +1,6 @@
 import { Radio } from '@scaleway/ui'
 import { FieldState } from 'final-form'
-import React, {
-  ComponentProps,
-  FocusEvent,
-  FocusEventHandler,
-  FormEvent,
-  FormEventHandler,
-  ReactNode,
-  useMemo,
-} from 'react'
+import React, { ComponentProps, ReactNode, useMemo } from 'react'
 import { useField, useFormState } from 'react-final-form'
 import pickValidators from '../../helpers/pickValidators'
 import useValidation from '../../hooks/useValidation'
@@ -17,40 +9,42 @@ import { BaseFieldProps } from '../../types'
 
 type RadioValue = NonNullable<ComponentProps<typeof Radio>['value']>
 
-type RadioFieldProps<T = RadioValue, K = string> = BaseFieldProps<
-  T,
-  K
-> & {
-  name: string
-  label?: string
-  size?: number
-  valid?: boolean
-  disabled?: boolean
-  required?: boolean
-  value: RadioValue
-  id?: string
-  className?: string
-  children?: ReactNode
-  onChange?: FormEventHandler<HTMLInputElement>
-  onBlur?: FocusEventHandler<HTMLInputElement>
-  onFocus?: FocusEventHandler<HTMLInputElement>
-}
+type RadioFieldProps<T = RadioValue, K = string> = BaseFieldProps<T, K> &
+  Partial<
+    Pick<
+      ComponentProps<typeof Radio>,
+      | 'disabled'
+      | 'id'
+      | 'onBlur'
+      | 'onChange'
+      | 'onFocus'
+      | 'size'
+      | 'valid'
+      | 'value'
+    >
+  > & {
+    children?: ReactNode
+    className?: string
+    label?: string
+    name: string
+    required?: boolean
+  }
 
 const RadioField = ({
-  validate,
-  name,
-  valid,
-  label = '',
-  size,
+  children,
+  className,
   disabled,
-  required,
   id,
-  value,
-  className,
-  children,
-  onChange,
+  label = '',
+  name,
   onBlur,
+  onChange,
   onFocus,
+  required,
+  size,
+  valid,
+  validate,
+  value,
 }: RadioFieldProps): JSX.Element => {
   const { values } = useFormState()
   const { getFirstError } = useErrors()
@@ -84,29 +78,29 @@ const RadioField = ({
 
   return (
     <Radio
+      checked={input.checked}
+      className={className}
+      disabled={disabled}
+      error={error}
+      id={id}
       name={input.name}
-      onChange={(event: FormEvent<HTMLInputElement>) => {
+      onChange={event => {
         input.onChange(event)
         onChange?.(event)
       }}
-      onBlur={(event: FocusEvent<HTMLInputElement>) => {
+      onBlur={event => {
         input.onBlur(event)
         onBlur?.(event)
       }}
-      onFocus={(event: FocusEvent<HTMLInputElement>) => {
+      onFocus={event => {
         input.onFocus(event)
         onFocus?.(event)
       }}
-      type={input.type}
-      size={size}
-      disabled={disabled}
       required={required}
-      checked={input.checked}
-      value={input.value}
-      id={id}
-      error={error}
+      size={size}
+      type={input.type}
       valid={valid}
-      className={className}
+      value={input.value}
     >
       {children}
     </Radio>

src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap

@@ -116,7 +116,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   flex: 1;
 }
 
-.cache-1vtfjnf-StyledText-styles-variantStyles-colorStyles {
+.cache-26whco-StyledText-bodyA-variantStyles-colorStyles {
   color: #4a4f62;
   font-weight: 400;
   margin-bottom: 0;
@@ -157,7 +157,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
         class="cache-db05j6-AlertContainer eenhiht0"
       >
         <p
-          class="e1g1zfwd0 cache-1vtfjnf-StyledText-styles-variantStyles-colorStyles"
+          class="e1g1zfwd0 cache-26whco-StyledText-bodyA-variantStyles-colorStyles"
         >
           hello
         </p>