fix: code clean up (#2210)

packages/form/.jest/helpers.tsx

@@ -1,9 +1,8 @@
 import { ThemeProvider } from '@emotion/react'
 import makeHelpers from '@scaleway/jest-helpers'
 import { theme as lightTheme } from '@scaleway/ui'
-import { render } from '@testing-library/react'
-import type { ComponentProps, ReactElement, ReactNode } from 'react'
-import { Form } from '../src/components'
+import type { ComponentProps, ReactNode } from 'react'
+import { Form } from '../src'
 import { mockErrors } from '../src/mocks'
 
 type WrapperProps = {
@@ -40,17 +39,6 @@ export const shouldMatchEmotionSnapshotFormWrapper = (
   )
 }
 
-export const renderWithWrapper = (children: ReactElement) =>
-  render(children, {
-    wrapper: () => (
-      <ThemeProvider theme={lightTheme}>
-        <Form onRawSubmit={() => {}} errors={mockErrors}>
-          {children}
-        </Form>
-      </ThemeProvider>
-    ),
-  })
-
 export const mockRandom = () =>
   jest.spyOn(global.Math, 'random').mockReturnValue(0.4155913669444804)
 

packages/form/src/components/CheckboxField/index.tsx

@@ -3,7 +3,7 @@ import type { FieldState } from 'final-form'
 import type { ComponentProps, ReactNode, Ref } from 'react'
 import { forwardRef } from 'react'
 import { useFormField } from '../../hooks'
-import { useErrors } from '../../providers/ErrorContext'
+import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
 type CheckboxValue = string

packages/form/src/components/DateField/index.tsx

@@ -2,7 +2,7 @@ import { DateInput } from '@scaleway/ui'
 import type { FieldState } from 'final-form'
 import type { ComponentProps, FocusEvent } from 'react'
 import { useFormField } from '../../hooks'
-import { useErrors } from '../../providers/ErrorContext'
+import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
 type DateFieldProps = BaseFieldProps<Date> &

packages/form/src/components/RadioField/__tests__/index.spec.tsx

@@ -6,7 +6,7 @@ import {
   shouldMatchEmotionSnapshot,
   shouldMatchEmotionSnapshotFormWrapper,
 } from '../../../../.jest/helpers'
-import { mockErrors } from '../../../mocks/mockErrors'
+import { mockErrors } from '../../../mocks'
 import { Form } from '../../Form'
 
 describe('RadioField', () => {

packages/form/src/components/RadioField/index.tsx

@@ -2,7 +2,7 @@ import { Radio } from '@scaleway/ui'
 import type { FieldState } from 'final-form'
 import type { ComponentProps, ReactNode } from 'react'
 import { useFormField } from '../../hooks'
-import { useErrors } from '../../providers/ErrorContext'
+import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
 type RadioValue = NonNullable<ComponentProps<typeof Radio>['value']>

packages/form/src/components/RichSelectField/index.tsx

@@ -11,7 +11,7 @@ import { Children, useCallback, useMemo } from 'react'
 import type { CommonProps, GroupBase, OptionProps, Props } from 'react-select'
 import type Select from 'react-select'
 import { useFormField } from '../../hooks'
-import { useErrors } from '../../providers/ErrorContext'
+import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
 // Here we duplicate RichSelect types as they are using interfaces which are not portable

packages/form/src/components/SelectNumberField/__stories__/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react'
 import { Form, SelectNumberField } from '../..'
-import { mockErrors } from '../../../mocks/mockErrors'
+import { mockErrors } from '../../../mocks'
 
 export default {
   component: SelectNumberField,

packages/form/src/components/SelectNumberField/__tests__/__snapshots__/index.spec.tsx.snap

@@ -82,22 +82,22 @@ exports[`SelectNumberField should render correctly 1`] = `
   border: 1px solid #4f0599;
 }
 
-.cache-1afrum9 {
+.cache-1lq3jx2 {
   color: #4a4f62;
   background-color: transparent;
-  font-size: 16;
+  font-size: 16px;
   border: none;
   outline: none;
   position: relative;
-  margin-right: 4;
+  margin-right: 4px;
   max-width: 100%;
   font-weight: 500;
   text-align: center;
   -moz-appearance: textfield;
 }
 
-.cache-1afrum9::-webkit-outer-spin-button,
-.cache-1afrum9::-webkit-inner-spin-button {
+.cache-1lq3jx2::-webkit-outer-spin-button,
+.cache-1lq3jx2::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
@@ -144,7 +144,7 @@ exports[`SelectNumberField should render correctly 1`] = `
       >
         <input
           aria-label="Input"
-          class="cache-1afrum9 ermgxlz2"
+          class="cache-1lq3jx2 ermgxlz2"
           name="test"
           style="width: 25px;"
           type="number"
@@ -262,22 +262,22 @@ exports[`SelectNumberField should render correctly disabled 1`] = `
   border: 1px solid #4f0599;
 }
 
-.cache-1afrum9 {
+.cache-1lq3jx2 {
   color: #4a4f62;
   background-color: transparent;
-  font-size: 16;
+  font-size: 16px;
   border: none;
   outline: none;
   position: relative;
-  margin-right: 4;
+  margin-right: 4px;
   max-width: 100%;
   font-weight: 500;
   text-align: center;
   -moz-appearance: textfield;
 }
 
-.cache-1afrum9::-webkit-outer-spin-button,
-.cache-1afrum9::-webkit-inner-spin-button {
+.cache-1lq3jx2::-webkit-outer-spin-button,
+.cache-1lq3jx2::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
@@ -311,7 +311,7 @@ exports[`SelectNumberField should render correctly disabled 1`] = `
       >
         <input
           aria-label="Input"
-          class="cache-1afrum9 ermgxlz2"
+          class="cache-1lq3jx2 ermgxlz2"
           disabled=""
           name="test"
           style="width: 25px;"
@@ -421,22 +421,22 @@ exports[`SelectNumberField should trigger event onMinCrossed & onMaxCrossed 1`]
   border: 1px solid #4f0599;
 }
 
-.cache-1afrum9 {
+.cache-1lq3jx2 {
   color: #4a4f62;
   background-color: transparent;
-  font-size: 16;
+  font-size: 16px;
   border: none;
   outline: none;
   position: relative;
-  margin-right: 4;
+  margin-right: 4px;
   max-width: 100%;
   font-weight: 500;
   text-align: center;
   -moz-appearance: textfield;
 }
 
-.cache-1afrum9::-webkit-outer-spin-button,
-.cache-1afrum9::-webkit-inner-spin-button {
+.cache-1lq3jx2::-webkit-outer-spin-button,
+.cache-1lq3jx2::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
@@ -482,7 +482,7 @@ exports[`SelectNumberField should trigger event onMinCrossed & onMaxCrossed 1`]
       >
         <input
           aria-label="Input"
-          class="cache-1afrum9 ermgxlz2"
+          class="cache-1lq3jx2 ermgxlz2"
           name="test"
           style="width: 35px;"
           type="number"
@@ -591,22 +591,22 @@ exports[`SelectNumberField should trigger events correctly 1`] = `
   border: 1px solid #4f0599;
 }
 
-.cache-1afrum9 {
+.cache-1lq3jx2 {
   color: #4a4f62;
   background-color: transparent;
-  font-size: 16;
+  font-size: 16px;
   border: none;
   outline: none;
   position: relative;
-  margin-right: 4;
+  margin-right: 4px;
   max-width: 100%;
   font-weight: 500;
   text-align: center;
   -moz-appearance: textfield;
 }
 
-.cache-1afrum9::-webkit-outer-spin-button,
-.cache-1afrum9::-webkit-inner-spin-button {
+.cache-1lq3jx2::-webkit-outer-spin-button,
+.cache-1lq3jx2::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
@@ -653,7 +653,7 @@ exports[`SelectNumberField should trigger events correctly 1`] = `
       >
         <input
           aria-label="Input"
-          class="cache-1afrum9 ermgxlz2"
+          class="cache-1lq3jx2 ermgxlz2"
           name="test"
           style="width: 25px;"
           type="number"

packages/form/src/components/SelectableCardField/index.tsx

@@ -2,7 +2,7 @@ import { SelectableCard } from '@scaleway/ui'
 import type { FieldState } from 'final-form'
 import type { ComponentProps } from 'react'
 import { useFormField } from '../../hooks'
-import { useErrors } from '../../providers/ErrorContext'
+import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
 type SelectableCardValue = NonNullable<

packages/form/src/components/SubmitErrorAlert/__stories__/Playground.stories.tsx

@@ -10,7 +10,7 @@ export const Playground: Story<
 > = () => (
   <Form
     errors={mockErrors}
-    onRawSubmit={() => ({ [FORM_ERROR]: 'An error occured' })}
+    onRawSubmit={() => ({ [FORM_ERROR]: 'An error occurred' })}
   >
     <Stack gap={1}>
       <SubmitErrorAlert />

packages/form/src/components/TextInputField/__stories__/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react'
 import { Form, TextInputField } from '../..'
-import { mockErrors } from '../../../mocks/mockErrors'
+import { mockErrors } from '../../../mocks'
 
 export default {
   component: TextInputField,

packages/form/src/components/TextInputField/index.tsx

@@ -3,7 +3,7 @@ import type { FieldState } from 'final-form'
 import type { ComponentProps, Ref } from 'react'
 import { forwardRef } from 'react'
 import { useFormField } from '../../hooks'
-import { useErrors } from '../../providers/ErrorContext'
+import { useErrors } from '../../providers'
 import type { BaseFieldProps } from '../../types'
 
 type TextInputValue = NonNullable<ComponentProps<typeof TextInput>['value']>

packages/ui/README.md

@@ -4,7 +4,7 @@
 
 Scaleway UI is a set of React components and utilities to build fast application.
 
-> :warning: This library is still WIP. We are actively working on it. Our goal is to have an easy to use UI system. This includes an exhaustive documentation, improved DX, confidence in testing and a lot of refactoring to have consistency across our components.
+> :warning: This library is still WIP. We are actively working on it. Our goal is to have an easy-to-use UI system. This includes an exhaustive documentation, improved DX, confidence in testing and a lot of refactoring to have consistency across our components.
 
 > :warning: We are going to break a lot of things towards V1. This library is not yet production ready.
 

packages/ui/src/__stories__/HowToMakeBreakingChanges.stories.mdx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/addon-docs'
 
 # How to make a breaking changes as a maintainer?
 
-How to breaking change a component and what is the process of migration? That's what we will see in this documentation.
+How to break change a component and what is the process of migration? That's what we will see in this documentation.
 
 <br/>
 

packages/ui/src/__stories__/Testing.stories.mdx

@@ -8,7 +8,7 @@ We rely heavily on jest and snapshots to ensure our components behaviour and out
 
 ### Rule of thumb
 
-We tend towards 100% of coverage, this won't be able to cover all edge cases and behavior but it's a good start to avoid regressions and improve confidence in the codebase. Thus all introduced code or feature must have corresponding test cases
+We tend towards 100% of coverage, this won't be able to cover all edge cases and behavior, but it's a good start to avoid regressions and improve confidence in the codebase. Thus, all introduced code or feature must have corresponding test cases
 
 ## Quick start
 
@@ -54,7 +54,7 @@ test(`click checkbox`, async () => {
 
 This will wrap the provided node with an emotion ThemeProvider, render it and snapshot it at the end of the execution
 
-> :warning: This is an async function and need to be either in a async function or directly returned to jest
+> :warning: This is an async function and need to be either in an async function or directly returned to jest
 
 ```jsx
 test(`click and snapshot checkbox`, async () =>

packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Alert renders correctly unknow theme variant and fallback to defaults 1`] = `
+exports[`Alert renders correctly unknown theme variant and fallback to defaults 1`] = `
 <DocumentFragment>
   .cache-1cix5ac-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;
@@ -89,7 +89,7 @@ exports[`Alert renders correctly unknow theme variant and fallback to defaults 1
 </DocumentFragment>
 `;
 
-exports[`Alert renders correctly unknow variant and fallback to standard 1`] = `
+exports[`Alert renders correctly unknown variant and fallback to standard 1`] = `
 <DocumentFragment>
   .cache-1cix5ac-Stack-StyledStackContainer-alertStyles {
   display: -webkit-box;

packages/ui/src/components/Alert/__tests__/index.test.tsx

@@ -19,17 +19,17 @@ describe('Alert', () => {
   test('renders correctly with title', () =>
     shouldMatchEmotionSnapshot(<Alert title="title">Sample Alert</Alert>))
 
-  test(`renders correctly unknow variant and fallback to standard`, () =>
-    // @ts-expect-error "unknow" isn't part of the `variant` variant but we need to test
-    // the fallback to the `standart` variant in this case.
-    shouldMatchEmotionSnapshot(<Alert variant="unknow">Sample Alert</Alert>))
+  test(`renders correctly unknown variant and fallback to standard`, () =>
+    // @ts-expect-error "unknown" isn't part of the `variant` variant, but we need to test
+    // the fallback to the `standard` variant in this case.
+    shouldMatchEmotionSnapshot(<Alert variant="unknown">Sample Alert</Alert>))
   ;(['info', 'warning', 'danger', 'success'] as const).forEach(variant => {
     test(`renders correctly variant ${variant}`, () =>
       shouldMatchEmotionSnapshot(<Alert variant={variant}>Sample Alert</Alert>))
   })
 
-  test(`renders correctly unknow theme variant and fallback to defaults`, () =>
-    // @ts-expect-error "unknow" isn't part of the `variant` variant but we need to test
+  test(`renders correctly unknown theme variant and fallback to defaults`, () =>
+    // @ts-expect-error "unknown" isn't part of the `variant` variant, but we need to test
     // the fallback to the `theme.colors` colors in this case.
-    shouldMatchEmotionSnapshot(<Alert variant="unknow">Sample Alert</Alert>))
+    shouldMatchEmotionSnapshot(<Alert variant="unknown">Sample Alert</Alert>))
 })

packages/ui/src/components/Avatar/__stories__/TextSize.stories.tsx

@@ -30,6 +30,6 @@ TextSize.decorators = [
 TextSize.parameters = {
   docs: {
     storyDescription:
-      'Additionnally you can set the size of the text by using `textSize` prop. Don‘t forget to set the `size` prop to make your text fit into the component.',
+      'Additionally you can set the size of the text by using `textSize` prop. Don‘t forget to set the `size` prop to make your text fit into the component.',
   },
 }

packages/ui/src/components/BarChart/index.tsx

@@ -7,7 +7,7 @@ import { useCallback } from 'react'
 import { getLegendColor } from '../../helpers/legend'
 import BarChartTooltip from './Tooltip'
 
-type Formater = ValueFormat<DatumValue>
+type Formatter = ValueFormat<DatumValue>
 
 type TickSpec = NonNullable<
   ComponentProps<typeof ResponsiveBar>['axisBottom']
@@ -18,9 +18,9 @@ type BarChartProps = {
   margin?: Box
   data?: BarDatum[]
   axisFormatters?: Partial<
-    Record<'bottom' | 'left' | 'right' | 'top', Formater>
+    Record<'bottom' | 'left' | 'right' | 'top', Formatter>
   >
-  pointFormatters?: Partial<Record<'x' | 'y', Formater>>
+  pointFormatters?: Partial<Record<'x' | 'y', Formatter>>
   tickValues?: Partial<Record<'bottom' | 'left' | 'right' | 'top', TickSpec>>
   keys?: string[]
   tooltipFunction?: (

packages/ui/src/components/Breadcrumbs/index.tsx

@@ -136,7 +136,7 @@ type ItemProps = {
    */
   variant?: Variants
   /**
-   * Id of the step, automatically injected by Breadcrumbs parent tag
+   * ID of the step, automatically injected by Breadcrumbs parent tag
    */
   step?: number
   onClick?: (