diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea7824..b5c68e55be 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,7 +4,6 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7d61..2f28cead03 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,7 +4,6 @@ about: Suggest an idea for this project title: '' labels: '' assignees: '' - --- **Is your feature request related to a problem? Please describe.** diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index b86d0c015b..2448331264 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -27,10 +27,7 @@ ## Relevant logs and/or screenshots -Page | Before | After -:- | :-: | -: -url | screenshot | screenshot -url | screenshot | screenshot - - - +| Page | Before | After | +| :--- | :--------: | ---------: | +| url | screenshot | screenshot | +| url | screenshot | screenshot | diff --git a/.github/renovate.json b/.github/renovate.json index ca2207f2b3..857984f787 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -1,9 +1,6 @@ { "enabledManagers": ["dockerfile", "npm"], - "extends": [ - "config:base", - ":combinePatchMinorReleases" - ], + "extends": ["config:base", ":combinePatchMinorReleases"], "reviewers": ["team:scaleway/console"], "prHourlyLimit": 5, "prConcurrentLimit": 10, diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 15b34b79a7..daa97f4e4d 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation. Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting ## Our Responsibilities @@ -73,4 +73,4 @@ available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.ht [homepage]: https://www.contributor-covenant.org For answers to common questions about this code of conduct, see -https://www.contributor-covenant.org/faq \ No newline at end of file +https://www.contributor-covenant.org/faq diff --git a/README.md b/README.md index 8898dade67..047f1a8ff8 100644 --- a/README.md +++ b/README.md @@ -22,16 +22,16 @@ $ yarn add @scaleway/ui @emotion/react @emotion/styled ``` ```js -import { theme, Button } from "@scaleway/ui"; -import { ThemeProvider } from "@emotion/react"; +import { theme, Button } from '@scaleway/ui' +import { ThemeProvider } from '@emotion/react' const App = () => ( - -); +) ``` N.B. To allow typescript theme typings with `@emotion/styled` components, @@ -40,6 +40,7 @@ you'll have to define the `@emotion/react` module `Theme` interface in your proj Example, in a `global.d.ts` file: - Declaration to use the default Scaleway theme + ```ts declare module '@emotion/react' { import type { SCWUITheme } from '@scaleway/ui' @@ -47,9 +48,10 @@ declare module '@emotion/react' { // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface Theme extends SCWUITheme {} } - ``` -- Declaration to use your custom theme + +- Declaration to use your custom theme + ```ts import type { MyTheme } from './src/theme' @@ -58,7 +60,6 @@ declare module '@emotion/react' { // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface Theme extends MyTheme {} } - ``` ## Development @@ -73,7 +74,7 @@ $ yarn run start ### Test -#### Unit +#### Unit ```sh $ yarn run test # Will run all tests @@ -84,6 +85,7 @@ $ yarn run test:coverage --coverageReporters lcov && open coverage/lcov-report/i ``` #### Accessibility + ```sh $ yarn run test:a11y # Will run all accessibility tests $ yarn run test:a11y src/components/Alert # Will run accessibility test of Alert component only diff --git a/babel.config.json b/babel.config.json index 2a1a7be1ea..b87dcfbc44 100644 --- a/babel.config.json +++ b/babel.config.json @@ -1,7 +1,10 @@ { "presets": [ "@babel/preset-typescript", - ["@babel/preset-env", { "shippedProposals": true, "targets": { "node": "current" } }], + [ + "@babel/preset-env", + { "shippedProposals": true, "targets": { "node": "current" } } + ], "@babel/preset-react", [ "@emotion/babel-preset-css-prop", diff --git a/package.json b/package.json index a3e56a7983..c8fe4d7a20 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,7 @@ "jest-junit": "13.0.0", "lint-staged": "12.1.2", "postcss": "8.3.11", - "prettier": "2.4.1", + "prettier": "2.5.0", "react": "17.0.2", "react-dom": "17.0.2", "react-router-dom": "6.0.2", diff --git a/src/__stories__/components/ErrorTransition.tsx b/src/__stories__/components/ErrorTransition.tsx index 0125719e04..c81d5fb368 100644 --- a/src/__stories__/components/ErrorTransition.tsx +++ b/src/__stories__/components/ErrorTransition.tsx @@ -1,7 +1,10 @@ import PropTypes from 'prop-types' import React, { VoidFunctionComponent, useLayoutEffect, useState } from 'react' -const ErrorTransition: VoidFunctionComponent<{ error: unknown, Component: React.ElementType }> = ({ error, Component, ...props }) => { +const ErrorTransition: VoidFunctionComponent<{ + error: unknown + Component: React.ElementType +}> = ({ error, Component, ...props }) => { const [err, setErr] = useState() useLayoutEffect(() => { const timer = setTimeout(() => setErr(error), 2000) diff --git a/src/components/Box/__stories__/index.stories.tsx b/src/components/Box/__stories__/index.stories.tsx index 9eaab58d18..2ffee8fa2d 100644 --- a/src/components/Box/__stories__/index.stories.tsx +++ b/src/components/Box/__stories__/index.stories.tsx @@ -25,23 +25,19 @@ Default.parameters = { export const Bordered = Template.bind({}) Bordered.parameters = { docs: { - storyDescription: 'Using prop `bordered` you can add a border and some padding on a Box.', + storyDescription: + 'Using prop `bordered` you can add a border and some padding on a Box.', }, } -Bordered.decorators = [ - () => ( - This is a bordered box - ), -] +Bordered.decorators = [() => This is a bordered box] export const OtherElement = Template.bind({}) OtherElement.parameters = { docs: { - storyDescription: 'Using prop `as` you can specify another html or React element instead of the default div.', + storyDescription: + 'Using prop `as` you can specify another html or React element instead of the default div.', }, } OtherElement.decorators = [ - () => ( - This is a Box as a span tag - ), + () => This is a Box as a span tag, ] diff --git a/src/components/Boxer/__stories__/index.stories.tsx b/src/components/Boxer/__stories__/index.stories.tsx index e545018840..bcafb7650e 100644 --- a/src/components/Boxer/__stories__/index.stories.tsx +++ b/src/components/Boxer/__stories__/index.stories.tsx @@ -7,10 +7,12 @@ export default { title: 'Components/Container/Boxer', } as Meta -const Template: Story> = args => -
Children 1 - I'm in a box component
- Children 2 - I'm in a box component too - +const Template: Story> = args => ( + +
Children 1 - I'm in a box component
+ Children 2 - I'm in a box component too + +) export const Default = Template.bind({}) diff --git a/src/components/Breadcrumbs/__stories__/index.stories.tsx b/src/components/Breadcrumbs/__stories__/index.stories.tsx index ff6502c450..d6890c29c4 100644 --- a/src/components/Breadcrumbs/__stories__/index.stories.tsx +++ b/src/components/Breadcrumbs/__stories__/index.stories.tsx @@ -24,8 +24,8 @@ Default.parameters = { Creates a Breadcrumbs of hierarchical pages. Link are automatically supported with \`to\` prop using the \`linkComponent\` from your theme configuration. - ` - } + `, + }, } export const Variants = Template.bind({}) @@ -55,7 +55,8 @@ Variants.decorators = [ export const Selected = Template.bind({}) Selected.parameters = { docs: { - storyDescription: 'Selected is automatically determined as the last element. One can be specified using `selected` prop.', + storyDescription: + 'Selected is automatically determined as the last element. One can be specified using `selected` prop.', }, } diff --git a/src/components/BulletList/index.tsx b/src/components/BulletList/index.tsx index b628093d16..0b66d55848 100644 --- a/src/components/BulletList/index.tsx +++ b/src/components/BulletList/index.tsx @@ -33,7 +33,10 @@ export interface BulletListProps { children: ReactNode } -const BulletList: FunctionComponent = ({ children, keyPrefix }) => ( +const BulletList: FunctionComponent = ({ + children, + keyPrefix, +}) => ( {Children.toArray(children).map((child, index) => ( diff --git a/src/components/Modal/__stories__/index.stories.tsx b/src/components/Modal/__stories__/index.stories.tsx index 38aafabd7c..f2f9a48bdb 100644 --- a/src/components/Modal/__stories__/index.stories.tsx +++ b/src/components/Modal/__stories__/index.stories.tsx @@ -169,10 +169,7 @@ PreventBodyScroll.parameters = { } PreventBodyScroll.decorators = [ () => ( - preventBodyScroll} - preventBodyScroll - > + preventBodyScroll} preventBodyScroll> Try to scroll on body ( outside of the Modal ) preventBodyScroll is available only when modal props is enabled diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx index b6c48a8152..29e3555a2a 100644 --- a/src/components/Pagination/index.tsx +++ b/src/components/Pagination/index.tsx @@ -31,8 +31,9 @@ export const usePaginationContext = (): PaginationState => useContext(PaginationContext) as PaginationState // START - Default Components -const DefaultLeftComponent: VoidFunctionComponent = - () => null +const DefaultLeftComponent: VoidFunctionComponent< + PaginationComponentProps +> = () => null const StyledPageButton = styled(Button, { shouldForwardProp: prop => !['current'].includes(prop.toString()), @@ -53,91 +54,94 @@ export type PaginationComponentProps = { paginationState: PaginationState } -const DefaultMiddleComponent: VoidFunctionComponent = - ({ pageTabCount, paginationState }) => { - const { - isLoadingPage, - page, - maxPage, - canLoadMore, - goToNextPage, - goToFirstPage, - goToLastPage, - goToPage, - goToPreviousPage, - } = paginationState - - const pageNumbersToDisplay = useMemo( - () => (maxPage > 1 ? getPageNumbers(page, maxPage, pageTabCount) : [1]), - [page, maxPage, pageTabCount], - ) +const DefaultMiddleComponent: VoidFunctionComponent< + PaginationComponentProps +> = ({ pageTabCount, paginationState }) => { + const { + isLoadingPage, + page, + maxPage, + canLoadMore, + goToNextPage, + goToFirstPage, + goToLastPage, + goToPage, + goToPreviousPage, + } = paginationState + + const pageNumbersToDisplay = useMemo( + () => (maxPage > 1 ? getPageNumbers(page, maxPage, pageTabCount) : [1]), + [page, maxPage, pageTabCount], + ) - const handlePageClick = useCallback( - (pageNumber: number) => () => { - goToPage(pageNumber) - }, - [goToPage], - ) + const handlePageClick = useCallback( + (pageNumber: number) => () => { + goToPage(pageNumber) + }, + [goToPage], + ) - return ( -
- - - {pageNumbersToDisplay.map(pageNumber => ( - - {pageNumber} - - ))} - + + {pageNumbersToDisplay.map(pageNumber => ( + - Next - - -
- ) - } + {pageNumber} + + ))} + + + + ) +} -const DefaultRightComponent: VoidFunctionComponent = - ({ paginationState: { page } }) =>
Current : {page}
+const DefaultRightComponent: VoidFunctionComponent< + PaginationComponentProps +> = ({ paginationState: { page } }) =>
Current : {page}
-const DefaultLoaderComponent: VoidFunctionComponent = - () => ( - - - - ) +const DefaultLoaderComponent: VoidFunctionComponent< + PaginationComponentProps +> = () => ( + + + +) const StyledMainContainer = styled.div` display: grid; diff --git a/src/components/PasswordStrengthMeter/__stories__/UncontrolledPasswordStrengthMeter.tsx b/src/components/PasswordStrengthMeter/__stories__/UncontrolledPasswordStrengthMeter.tsx index 277f78749f..22dc92c281 100644 --- a/src/components/PasswordStrengthMeter/__stories__/UncontrolledPasswordStrengthMeter.tsx +++ b/src/components/PasswordStrengthMeter/__stories__/UncontrolledPasswordStrengthMeter.tsx @@ -3,7 +3,9 @@ import React, { VoidFunctionComponent, useState } from 'react' import PasswordStrengthMeter, { PasswordStrengthMeterProps } from '..' import { TextBox } from '../..' -const UncontrolledPasswordStrengthMeter: VoidFunctionComponent<{ name: string } & PasswordStrengthMeterProps> = ({ name, ...props }) => { +const UncontrolledPasswordStrengthMeter: VoidFunctionComponent< + { name: string } & PasswordStrengthMeterProps +> = ({ name, ...props }) => { const [value, setValue] = useState('') return ( diff --git a/src/components/PasswordStrengthMeter/index.tsx b/src/components/PasswordStrengthMeter/index.tsx index ebace33c97..3450a5ba42 100644 --- a/src/components/PasswordStrengthMeter/index.tsx +++ b/src/components/PasswordStrengthMeter/index.tsx @@ -78,7 +78,8 @@ const PasswordStrengthMeter: FunctionComponent = ({ const [width, setWidth] = useState(0) const getScore = useCallback( - (passwordToTest: string) => estimate(passwordToTest || '', userInputs)?.score || 0, + (passwordToTest: string) => + estimate(passwordToTest || '', userInputs)?.score || 0, [estimate, userInputs], ) diff --git a/src/components/ProgressBar/__stories__/UncontrolledProgressBar.tsx b/src/components/ProgressBar/__stories__/UncontrolledProgressBar.tsx index aaf951bec3..cba5247fdc 100644 --- a/src/components/ProgressBar/__stories__/UncontrolledProgressBar.tsx +++ b/src/components/ProgressBar/__stories__/UncontrolledProgressBar.tsx @@ -1,7 +1,14 @@ -import React, { ComponentProps, FunctionComponent, useEffect, useState } from 'react' +import React, { + ComponentProps, + FunctionComponent, + useEffect, + useState, +} from 'react' import ProgressBar from '..' -const UncontrolledProgressBar: FunctionComponent> = props => { +const UncontrolledProgressBar: FunctionComponent< + ComponentProps +> = props => { const [value, setValue] = useState(0) useEffect(() => { const handler = setInterval(() => { diff --git a/src/components/Radio/__stories__/index.stories.tsx b/src/components/Radio/__stories__/index.stories.tsx index 3ca96a405d..583fdc3911 100644 --- a/src/components/Radio/__stories__/index.stories.tsx +++ b/src/components/Radio/__stories__/index.stories.tsx @@ -6,10 +6,10 @@ import ControlValue from '../../../__stories__/components/ControlValue' export default { args: { checked: false, - children: "Choice 1", + children: 'Choice 1', disabled: false, - name: "basic", - value:"choice-1", + name: 'basic', + value: 'choice-1', }, argTypes: { checked: { @@ -35,10 +35,7 @@ export default { title: 'Components/Data Entry/Radio', } as Meta -const Template: Story = args => ( - -) - +const Template: Story = args => export const Default = Template.bind({}) @@ -75,4 +72,3 @@ Controlled.decorators = [ ), ] - diff --git a/src/components/RichSelect/index.tsx b/src/components/RichSelect/index.tsx index 2d59c52606..3c06c4e705 100644 --- a/src/components/RichSelect/index.tsx +++ b/src/components/RichSelect/index.tsx @@ -636,18 +636,21 @@ ClearIndicator.propTypes = { selectProps: SelectContainer.propTypes?.selectProps, } -const MultiValueContainer: FunctionComponent> = - props => - -const MultiValueLabel: FunctionComponent> = - props => - -const MultiValueRemove: FunctionComponent> = - props => ( - - - - ) +const MultiValueContainer: FunctionComponent< + MultiValueProps +> = props => + +const MultiValueLabel: FunctionComponent< + MultiValueProps +> = props => + +const MultiValueRemove: FunctionComponent< + MultiValueProps +> = props => ( + + + +) type SelectComponents = SelectProps['components'] diff --git a/src/components/Switch/__stories__/index.stories.tsx b/src/components/Switch/__stories__/index.stories.tsx index 2ebed845dc..1bd82828d2 100644 --- a/src/components/Switch/__stories__/index.stories.tsx +++ b/src/components/Switch/__stories__/index.stories.tsx @@ -104,7 +104,6 @@ const Template: Story = args => export const Default = Template.bind({}) - export const CustomLabelRender = Template.bind({}) CustomLabelRender.parameters = { docs: { diff --git a/src/components/SwitchButton/__stories__/index.stories.tsx b/src/components/SwitchButton/__stories__/index.stories.tsx index af1bc0214f..8eac936f33 100644 --- a/src/components/SwitchButton/__stories__/index.stories.tsx +++ b/src/components/SwitchButton/__stories__/index.stories.tsx @@ -9,7 +9,7 @@ export default { checked: false, children: 'This is a children', disabled: false, - name:'default', + name: 'default', onChange: (value: any) => console.log(value), tooltip: undefined, value: 'a', @@ -53,7 +53,7 @@ Template.args = { checked: false, children: 'This is a children', disabled: false, - name:'default', + name: 'default', onChange: value => console.log(value), tooltip: undefined, value: 'a', @@ -64,67 +64,63 @@ export const Default = Template.bind({}) const DefaultShowcase: Story<{ controlValue: string | number - variant?: 'segment' + variant?: 'segment' disabled: boolean -}> = ({ - controlValue = 'a', - disabled = false, - variant, -}) => ( +}> = ({ controlValue = 'a', disabled = false, variant }) => ( - {({ value, onChange }) => ( - - - - - - ) => - onChange(e.currentTarget.value) - } - > - This is A - - - - ) => - onChange(e.currentTarget.value) - } - > - This is B - - - - ) => - onChange(e.currentTarget.value) - } - > - This is C - - - - - - - )} - + {({ value, onChange }) => ( + + + + + + ) => + onChange(e.currentTarget.value) + } + > + This is A + + + + ) => + onChange(e.currentTarget.value) + } + > + This is B + + + + ) => + onChange(e.currentTarget.value) + } + > + This is C + + + + + + + )} + ) export const Showcase = DefaultShowcase.bind({}) diff --git a/src/components/Table/__stories__/index.stories.tsx b/src/components/Table/__stories__/index.stories.tsx index f86a4a6670..32bd36e502 100644 --- a/src/components/Table/__stories__/index.stories.tsx +++ b/src/components/Table/__stories__/index.stories.tsx @@ -36,55 +36,54 @@ Template.args = { export const Default = Template.bind({}) Default.args = { - ...Template.args + ...Template.args, } -export const Hoverable = Template.bind({}) +export const Hoverable = Template.bind({}) Hoverable.args = { children: [ - - ID - Date - Action - - - , + + ID + Date + Action + + , - - 999 - Just now - -