diff --git a/packages/form/.jest/helpers.tsx b/packages/form/.jest/helpers.tsx index d2be1fa65c..3fb407418a 100644 --- a/packages/form/.jest/helpers.tsx +++ b/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: () => ( - -
{}} errors={mockErrors}> - {children} -
- - ), - }) - export const mockRandom = () => jest.spyOn(global.Math, 'random').mockReturnValue(0.4155913669444804) diff --git a/packages/form/src/components/CheckboxField/index.tsx b/packages/form/src/components/CheckboxField/index.tsx index de43757ea6..3c39989437 100644 --- a/packages/form/src/components/CheckboxField/index.tsx +++ b/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 diff --git a/packages/form/src/components/DateField/index.tsx b/packages/form/src/components/DateField/index.tsx index ef6de34916..8cd9888910 100644 --- a/packages/form/src/components/DateField/index.tsx +++ b/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 & diff --git a/packages/form/src/components/RadioField/__tests__/index.spec.tsx b/packages/form/src/components/RadioField/__tests__/index.spec.tsx index d24d83c449..9e6d1c48a0 100644 --- a/packages/form/src/components/RadioField/__tests__/index.spec.tsx +++ b/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', () => { diff --git a/packages/form/src/components/RadioField/index.tsx b/packages/form/src/components/RadioField/index.tsx index b26a768f18..cea96e700f 100644 --- a/packages/form/src/components/RadioField/index.tsx +++ b/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['value']> diff --git a/packages/form/src/components/RichSelectField/index.tsx b/packages/form/src/components/RichSelectField/index.tsx index eb2cfb5c90..1190d83e4b 100644 --- a/packages/form/src/components/RichSelectField/index.tsx +++ b/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 diff --git a/packages/form/src/components/SelectNumberField/__stories__/index.stories.tsx b/packages/form/src/components/SelectNumberField/__stories__/index.stories.tsx index 6d2f7bc22d..93b28ec421 100644 --- a/packages/form/src/components/SelectNumberField/__stories__/index.stories.tsx +++ b/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, diff --git a/packages/form/src/components/SelectNumberField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/SelectNumberField/__tests__/__snapshots__/index.spec.tsx.snap index f82b621c27..13f8c16a35 100644 --- a/packages/form/src/components/SelectNumberField/__tests__/__snapshots__/index.spec.tsx.snap +++ b/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`] = ` > = () => (
({ [FORM_ERROR]: 'An error occured' })} + onRawSubmit={() => ({ [FORM_ERROR]: 'An error occurred' })} > diff --git a/packages/form/src/components/TextInputField/__stories__/index.stories.tsx b/packages/form/src/components/TextInputField/__stories__/index.stories.tsx index 05c6ddcb24..d7f3d9e113 100644 --- a/packages/form/src/components/TextInputField/__stories__/index.stories.tsx +++ b/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, diff --git a/packages/form/src/components/TextInputField/index.tsx b/packages/form/src/components/TextInputField/index.tsx index d5e098cb2b..6d66c2934b 100644 --- a/packages/form/src/components/TextInputField/index.tsx +++ b/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['value']> diff --git a/packages/ui/README.md b/packages/ui/README.md index aeb97966fa..c9d341f93b 100644 --- a/packages/ui/README.md +++ b/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. diff --git a/packages/ui/src/__stories__/HowToMakeBreakingChanges.stories.mdx b/packages/ui/src/__stories__/HowToMakeBreakingChanges.stories.mdx index fadd066a51..a5e85668af 100644 --- a/packages/ui/src/__stories__/HowToMakeBreakingChanges.stories.mdx +++ b/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.
diff --git a/packages/ui/src/__stories__/Testing.stories.mdx b/packages/ui/src/__stories__/Testing.stories.mdx index cbf6909ede..963a72be48 100644 --- a/packages/ui/src/__stories__/Testing.stories.mdx +++ b/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 () => diff --git a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap index 006b8cfd09..03e070ed33 100644 --- a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap +++ b/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`] = ` .cache-1cix5ac-Stack-StyledStackContainer-alertStyles { display: -webkit-box; @@ -89,7 +89,7 @@ exports[`Alert renders correctly unknow theme variant and fallback to defaults 1 `; -exports[`Alert renders correctly unknow variant and fallback to standard 1`] = ` +exports[`Alert renders correctly unknown variant and fallback to standard 1`] = ` .cache-1cix5ac-Stack-StyledStackContainer-alertStyles { display: -webkit-box; diff --git a/packages/ui/src/components/Alert/__tests__/index.test.tsx b/packages/ui/src/components/Alert/__tests__/index.test.tsx index 13fe699d0e..f1918f1e91 100644 --- a/packages/ui/src/components/Alert/__tests__/index.test.tsx +++ b/packages/ui/src/components/Alert/__tests__/index.test.tsx @@ -19,17 +19,17 @@ describe('Alert', () => { test('renders correctly with title', () => shouldMatchEmotionSnapshot(Sample 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(Sample 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(Sample Alert)) ;(['info', 'warning', 'danger', 'success'] as const).forEach(variant => { test(`renders correctly variant ${variant}`, () => shouldMatchEmotionSnapshot(Sample 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(Sample Alert)) + shouldMatchEmotionSnapshot(Sample Alert)) }) diff --git a/packages/ui/src/components/Avatar/__stories__/TextSize.stories.tsx b/packages/ui/src/components/Avatar/__stories__/TextSize.stories.tsx index 8e0f688d01..d229389156 100644 --- a/packages/ui/src/components/Avatar/__stories__/TextSize.stories.tsx +++ b/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.', }, } diff --git a/packages/ui/src/components/BarChart/index.tsx b/packages/ui/src/components/BarChart/index.tsx index 4a0536ae76..996fca75bd 100644 --- a/packages/ui/src/components/BarChart/index.tsx +++ b/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 +type Formatter = ValueFormat type TickSpec = NonNullable< ComponentProps['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> + pointFormatters?: Partial> tickValues?: Partial> keys?: string[] tooltipFunction?: ( diff --git a/packages/ui/src/components/Breadcrumbs/index.tsx b/packages/ui/src/components/Breadcrumbs/index.tsx index 00d952c8b2..1ab8328079 100644 --- a/packages/ui/src/components/Breadcrumbs/index.tsx +++ b/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?: ( diff --git a/packages/ui/src/components/Button/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/Button/__tests__/__snapshots__/index.tsx.snap index 8f07895060..5659c60df3 100644 --- a/packages/ui/src/components/Button/__tests__/__snapshots__/index.tsx.snap +++ b/packages/ui/src/components/Button/__tests__/__snapshots__/index.tsx.snap @@ -3045,7 +3045,7 @@ exports[`Button variant render info 1`] = ` exports[`Button variant render info-bordered 1`] = ` - .cache-1sgi366-StyledButton { + .cache-qi8vud-StyledButton { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3083,30 +3083,30 @@ exports[`Button variant render info-bordered 1`] = ` color: #3f6ed8; } -.cache-1sgi366-StyledButton:hover, -.cache-1sgi366-StyledButton:focus { +.cache-qi8vud-StyledButton:hover, +.cache-qi8vud-StyledButton:focus { -webkit-text-decoration: none; text-decoration: none; } -.cache-1sgi366-StyledButton svg { +.cache-qi8vud-StyledButton svg { fill: #3f6ed8; pointer-events: none; } -.cache-1sgi366-StyledButton:hover, -.cache-1sgi366-StyledButton:focus { +.cache-qi8vud-StyledButton:hover, +.cache-qi8vud-StyledButton:focus { border: 1px solid #1a4dbf; color: #ffffff; background-color: #1a4dbf; } -.cache-1sgi366-StyledButton:hover svg, -.cache-1sgi366-StyledButton:focus svg { +.cache-qi8vud-StyledButton:hover svg, +.cache-qi8vud-StyledButton:focus svg { fill: #ffffff; } -.cache-1sgi366-StyledButton:focus { +.cache-qi8vud-StyledButton:focus { box-shadow: 0 0 0 2px #1a4dbf40; } @@ -3128,7 +3128,7 @@ exports[`Button variant render info-bordered 1`] = ` , diff --git a/packages/ui/src/components/SelectNumber/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/SelectNumber/__tests__/__snapshots__/index.tsx.snap index 5a2dda9ec5..0bcc969ccc 100644 --- a/packages/ui/src/components/SelectNumber/__tests__/__snapshots__/index.tsx.snap +++ b/packages/ui/src/components/SelectNumber/__tests__/__snapshots__/index.tsx.snap @@ -82,22 +82,22 @@ exports[`SelectNumber should click on center button 1`] = ` border: 1px solid #4f0599; } -.cache-22zdf5-StyledInput { +.cache-kk0u3u-StyledInput { 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-22zdf5-StyledInput::-webkit-outer-spin-button, -.cache-22zdf5-StyledInput::-webkit-inner-spin-button { +.cache-kk0u3u-StyledInput::-webkit-outer-spin-button, +.cache-kk0u3u-StyledInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @@ -126,7 +126,7 @@ exports[`SelectNumber should click on center button 1`] = ` > theme.colors.neutral.text}; background-color: transparent; - font-size: 16; + font-size: ${({ theme }) => theme.typography.bodyStrong.fontSize}; border: none; outline: none; position: relative; - margin-right: 4; + margin-right: ${({ theme }) => theme.space['0.5']}; max-width: 100%; - font-weight: 500; + font-weight: ${({ theme }) => theme.typography.bodyStrong.weight}; text-align: center; &::-webkit-outer-spin-button, diff --git a/packages/ui/src/components/TagsPoplist/__stories__/Multiline.stories.tsx b/packages/ui/src/components/TagsPoplist/__stories__/Multiline.stories.tsx index eec704d987..6c4ff629c9 100644 --- a/packages/ui/src/components/TagsPoplist/__stories__/Multiline.stories.tsx +++ b/packages/ui/src/components/TagsPoplist/__stories__/Multiline.stories.tsx @@ -5,7 +5,7 @@ export const Multiline = Template.bind({}) Multiline.parameters = { docs: { description: { - story: '`multiline` can be used to allow a multilined tag container.', + story: '`multiline` can be used to allow a multiline tag container.', }, }, } diff --git a/packages/ui/src/components/TagsPoplist/index.tsx b/packages/ui/src/components/TagsPoplist/index.tsx index 4bb15d1adb..98a6e12c4b 100644 --- a/packages/ui/src/components/TagsPoplist/index.tsx +++ b/packages/ui/src/components/TagsPoplist/index.tsx @@ -47,7 +47,7 @@ type TagsPoplistProps = { */ threshold?: number /** - * This property define maximum width of each tags. This doesn't apply for tags in tooltip. + * This property define maximum width of each tag. This doesn't apply for tags in tooltip. */ multiline?: boolean } diff --git a/packages/ui/src/components/TextInput/__stories__/Placeholder.stories.tsx b/packages/ui/src/components/TextInput/__stories__/Placeholder.stories.tsx index 1bb11c5aaf..aa263d7177 100644 --- a/packages/ui/src/components/TextInput/__stories__/Placeholder.stories.tsx +++ b/packages/ui/src/components/TextInput/__stories__/Placeholder.stories.tsx @@ -10,6 +10,6 @@ Placeholder.args = { Placeholder.parameters = { docs: { storyDescription: - 'Set a placeholder using `placeholder` property. It is only visibled if the `TextInput` has been visited (an input is considered as visited after the first focus).', + 'Set a placeholder using `placeholder` property. It is only visible if the `TextInput` has been visited (an input is considered as visited after the first focus).', }, } diff --git a/packages/ui/src/components/Toaster/index.tsx b/packages/ui/src/components/Toaster/index.tsx index b62483031b..d000e1118f 100644 --- a/packages/ui/src/components/Toaster/index.tsx +++ b/packages/ui/src/components/Toaster/index.tsx @@ -110,7 +110,7 @@ export const toast = { type ToastContainerProps = { /** - * Whether or not to display the newest toast on top. + * Whether to display the newest toast on top. * `Default: false` */ newestOnTop?: boolean diff --git a/packages/ui/src/utils/responsive/__stories__/Breakpoint.stories.mdx b/packages/ui/src/utils/responsive/__stories__/Breakpoint.stories.mdx index eb8c5788da..ee744e1937 100644 --- a/packages/ui/src/utils/responsive/__stories__/Breakpoint.stories.mdx +++ b/packages/ui/src/utils/responsive/__stories__/Breakpoint.stories.mdx @@ -6,7 +6,7 @@ import Breakpoint from '../Breakpoint' # Breakpoint - Breakpoint is a tiny React component to toggle the display of its chdilren at + Breakpoint is a tiny React component to toggle the display of its children at a specified breakpoint