From 2bb1736ba7d72da078504313223c14b7d09cd289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Wed, 1 Jul 2020 11:21:18 -0300 Subject: [PATCH 01/28] Add table component --- src/dataDisplay/Table/index.tsx | 131 ++++++++++++++++++++++++ src/dataDisplay/Table/table.stories.tsx | 17 +++ src/dataDisplay/index.ts | 1 + 3 files changed, 149 insertions(+) create mode 100644 src/dataDisplay/Table/index.tsx create mode 100644 src/dataDisplay/Table/table.stories.tsx diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx new file mode 100644 index 00000000..a54a4963 --- /dev/null +++ b/src/dataDisplay/Table/index.tsx @@ -0,0 +1,131 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; +// import Box from '@material-ui/core/Box'; +// import Collapse from '@material-ui/core/Collapse'; +// import IconButton from '@material-ui/core/IconButton'; +import styled from 'styled-components'; + +import theme from '../../theme'; +import Icon from '../Icon'; +import Text from '../Text'; + +const useStyles = makeStyles({ + table: { + // minWidth: 450 + + '& .MuiTableRow-root:hover': { + backgroundColor: theme.colors.background, + cursor: 'pointer' + }, + } +}); + +const TextTHead = styled(Text)` + text-transform: uppercase; +`; + +const StyledTableCell = styled(TableCell)` + border-bottom: 2px solid ${({ theme }) => theme.colors.separator} !important; +`; + +function createData( + name: string, + spent: number, + reset: number, + other1: number, + other: number +) { + return { + name, + spent, + reset, + other, + other1: ( + + {other1} + + ), + other2: ( + <> + + + + ) + }; +} + +const rows = [ + createData('Owner #1', 159, 6.0, 24, 4.0), + createData('Owner #2', 237, 9.0, 37, 4.3), + createData('Owner #3', 262, 16.0, 24, 6.0), + createData('Owner #4', 305, 3.7, 67, 4.3), + createData('Owner #5', 356, 16.0, 49, 3.9) +]; + +export default function SimpleTable() { + const classes = useStyles(); + + return ( + + + + + + + Beneficiary + + + + + Spent + + + + + Reset time + + + + + Other + + + + + Actions + + + + + + {rows.map((row) => ( + + + {row.name} + + + {row.spent} + + + {row.reset} + + + {row.other1} + + + {row.other2} + + + ))} + +
+ + ); +} diff --git a/src/dataDisplay/Table/table.stories.tsx b/src/dataDisplay/Table/table.stories.tsx new file mode 100644 index 00000000..6de0d132 --- /dev/null +++ b/src/dataDisplay/Table/table.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import Table from './index'; + +export default { + title: 'Data Display/Table', + component: Table, + parameters: { + componentSubtitle: 'Used to tabular information.' + } +}; + +export const section = () => ( + <> + + +); diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts index 2f27a0f3..9e3c6279 100644 --- a/src/dataDisplay/index.ts +++ b/src/dataDisplay/index.ts @@ -5,6 +5,7 @@ export { default as FixedDialog } from './FixedDialog'; export { default as Icon } from './Icon'; export { default as IconText } from './IconText'; export { default as Layout } from './Layout'; +export { default as Table } from './Table'; export { default as Text } from './Text'; export { default as Title } from './Title'; export { default as Section } from './Section'; From d2d598ec9f982ac0db398faaa9d2e5ccc152aee0 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Mon, 13 Jul 2020 16:16:28 -0300 Subject: [PATCH 02/28] refactor Table --- src/dataDisplay/Table/index.tsx | 190 ++++++++++++------------ src/dataDisplay/Table/table.stories.tsx | 116 ++++++++++++++- 2 files changed, 200 insertions(+), 106 deletions(-) diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index a54a4963..42ce7619 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Table from '@material-ui/core/Table'; +//import { makeStyles } from '@material-ui/core/styles'; +import TableMui from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; +import TableSortLabel from '@material-ui/core/TableSortLabel'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; @@ -10,122 +11,115 @@ import Paper from '@material-ui/core/Paper'; // import Box from '@material-ui/core/Box'; // import Collapse from '@material-ui/core/Collapse'; // import IconButton from '@material-ui/core/IconButton'; -import styled from 'styled-components'; +//import styled from 'styled-components'; -import theme from '../../theme'; -import Icon from '../Icon'; -import Text from '../Text'; +// import theme from '../../theme'; +//import Icon from '../Icon'; +//import Text from '../Text'; -const useStyles = makeStyles({ - table: { - // minWidth: 450 +// const useStyles = makeStyles({ +// table: { +// // minWidth: 450 +// // '& .MuiTableRow-root:hover': { +// // backgroundColor: theme.colors.background, +// // cursor: 'pointer' +// // }, +// } +// }); - '& .MuiTableRow-root:hover': { - backgroundColor: theme.colors.background, - cursor: 'pointer' - }, - } -}); +// const TextTHead = styled(Text)` +// text-transform: uppercase; +// `; -const TextTHead = styled(Text)` - text-transform: uppercase; -`; +// const StyledTableCell = styled(TableCell)` +// border-bottom: 2px solid ${({ theme }) => theme.colors.separator} !important; +// `; -const StyledTableCell = styled(TableCell)` - border-bottom: 2px solid ${({ theme }) => theme.colors.separator} !important; -`; +export enum Alignment { + left = 'left', + right = 'right' +} -function createData( - name: string, - spent: number, - reset: number, - other1: number, - other: number -) { - return { - name, - spent, - reset, - other, - other1: ( - - {other1} - - ), - other2: ( - <> - - - - ) - }; +export enum SortDirection { + asc = 'asc', + desc = 'desc' } -const rows = [ - createData('Owner #1', 159, 6.0, 24, 4.0), - createData('Owner #2', 237, 9.0, 37, 4.3), - createData('Owner #3', 262, 16.0, 24, 6.0), - createData('Owner #4', 305, 3.7, 67, 4.3), - createData('Owner #5', 356, 16.0, 49, 3.9) -]; +export type Header = { + id: string; + alignment?: Alignment; + label: string; +}; + +export type Row = { + id: string; + cells: Array<{ + id?: string; + alignment?: Alignment; + content: React.ReactNode; + }>; +}; + +type Props = { + headers?: Header[]; + rows: Row[]; + className?: string; + selectedRowIds?: Set; + sortedByHeaderId?: string; + sortDirection?: SortDirection; + onHeaderClick?: (id: string) => void; + onRowClick?: (id: string) => void; +}; -export default function SimpleTable() { - const classes = useStyles(); +const Table = ({ + headers, + rows, + className, + selectedRowIds, + sortedByHeaderId, + sortDirection, + onHeaderClick +}: Props) => { + //const classes = useStyles(); return ( -
+ + {/* HEADER CELLS */} - - - Beneficiary - - - - - Spent - - - - - Reset time - - - - - Other - - - - - Actions - - + {headers?.map((header) => ( + + onHeaderClick && onHeaderClick(header.id)}> + {header.label} + + + ))} + + {/* TABLE BODY */} {rows.map((row) => ( - - - {row.name} - - - {row.spent} - - - {row.reset} - - - {row.other1} - - - {row.other2} - + + {row.cells.map((c, index) => ( + + {c.content} + + ))} ))} -
+ ); -} +}; + +export default Table; diff --git a/src/dataDisplay/Table/table.stories.tsx b/src/dataDisplay/Table/table.stories.tsx index 6de0d132..ae3eb218 100644 --- a/src/dataDisplay/Table/table.stories.tsx +++ b/src/dataDisplay/Table/table.stories.tsx @@ -1,17 +1,117 @@ -import React from 'react'; +import React, { useState } from 'react'; -import Table from './index'; +import Table, { Alignment, SortDirection } from './index'; +import { Icon } from '../../'; export default { title: 'Data Display/Table', component: Table, parameters: { - componentSubtitle: 'Used to tabular information.' + componentSubtitle: + 'Used for tabular information. It allows sorting by a single column.' } }; -export const section = () => ( - <> - - -); +export const section = () => { + const [selectedRowIds, setSelectedRowIds] = useState>(new Set()); + const [sortedByHeaderId, setSortedByHeaderId] = useState( + 'col2' + ); + const [sortDirection, setSortDirection] = useState( + SortDirection.asc + ); + + const onRowClick = (rowId: string) => { + const cp = new Set(selectedRowIds); + if (cp.has(rowId)) { + cp.delete(rowId); + } else { + cp.add(rowId); + } + setSelectedRowIds(cp); + }; + + const onHeaderClick = (headerId: string) => { + if (!['col2'].includes(headerId)) { + return; + } + + let newDirection = + sortedByHeaderId === headerId && sortDirection === SortDirection.asc + ? SortDirection.desc + : SortDirection.asc; + + setSortDirection(newDirection); + setSortedByHeaderId(headerId); + }; + + const getSortedRows = () => { + const cp = [...rows]; + return cp.sort((a, b) => { + return sortDirection === SortDirection.asc + ? Number(a.cells[1].content) - Number(b.cells[1].content) + : Number(b.cells[1].content) - Number(a.cells[1].content); + }); + }; + + const headerCells = [ + { + id: 'col1', + label: 'col1' + }, + { + id: 'col2', + alignment: Alignment.right, + label: 'col2' + }, + { + id: 'col3', + label: 'col3' + } + ]; + + const rows = [ + { + id: '1', + cells: [ + { + content: + }, + { + content: 1, + alignment: Alignment.right + }, + { + content: 'safe' + } + ] + }, + { + id: '2', + cells: [ + { + content: + }, + { + content: 2, + alignment: Alignment.right + }, + { + content: 'gnosis' + } + ] + } + ]; + + return ( +
+ ); +}; From bda7d52a9a88944769c3f99df1e98da25883687c Mon Sep 17 00:00:00 2001 From: nicosampler Date: Tue, 14 Jul 2020 14:32:44 -0300 Subject: [PATCH 03/28] add collapsible functionality --- src/dataDisplay/Table/index.tsx | 128 ++++++++++++++++----- src/dataDisplay/Table/table.stories.tsx | 143 ++++++++++++++---------- 2 files changed, 180 insertions(+), 91 deletions(-) diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index 42ce7619..a89c0309 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -1,5 +1,4 @@ import React from 'react'; -//import { makeStyles } from '@material-ui/core/styles'; import TableMui from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableSortLabel from '@material-ui/core/TableSortLabel'; @@ -8,14 +7,12 @@ import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; -// import Box from '@material-ui/core/Box'; -// import Collapse from '@material-ui/core/Collapse'; -// import IconButton from '@material-ui/core/IconButton'; +import Box from '@material-ui/core/Box'; +import Collapse from '@material-ui/core/Collapse'; +//import { makeStyles } from '@material-ui/core/styles'; //import styled from 'styled-components'; -// import theme from '../../theme'; -//import Icon from '../Icon'; -//import Text from '../Text'; +import { FixedIcon } from '../..'; // const useStyles = makeStyles({ // table: { @@ -37,7 +34,8 @@ import Paper from '@material-ui/core/Paper'; export enum Alignment { left = 'left', - right = 'right' + right = 'right', + center = 'center' } export enum SortDirection { @@ -51,18 +49,22 @@ export type Header = { label: string; }; +type RowCells = { + id?: string; + alignment?: Alignment; + content: React.ReactNode; +}; + export type Row = { id: string; - cells: Array<{ - id?: string; - alignment?: Alignment; - content: React.ReactNode; - }>; + collapsibleContent?: React.ReactNode; + cells: RowCells[]; }; type Props = { - headers?: Header[]; rows: Row[]; + headers?: Header[]; + isCollapsible?: boolean; className?: string; selectedRowIds?: Set; sortedByHeaderId?: string; @@ -71,14 +73,52 @@ type Props = { onRowClick?: (id: string) => void; }; +const getHeaders = (headers: Header[], isCollapsible: boolean): Header[] => { + if (!isCollapsible) { + return headers; + } + + return [ + ...headers, + { + id: 'chevron', + label: '' + } + ]; +}; + +const getRowCells = ( + cells: RowCells[], + isSelected: boolean, + isCollapsible: boolean +) => { + if (!isCollapsible) { + return cells; + } + + return [ + ...cells, + { + alignment: Alignment.center, + content: isSelected ? ( + + ) : ( + + ) + } + ]; +}; + const Table = ({ - headers, rows, + headers, + isCollapsible, className, selectedRowIds, sortedByHeaderId, sortDirection, - onHeaderClick + onRowClick = () => {}, + onHeaderClick = () => {} }: Props) => { //const classes = useStyles(); @@ -88,14 +128,14 @@ const Table = ({ {/* HEADER CELLS */} - {headers?.map((header) => ( + {getHeaders(headers || [], isCollapsible || false).map((header) => ( onHeaderClick && onHeaderClick(header.id)}> + onClick={() => onHeaderClick(header.id)}> {header.label} @@ -105,17 +145,47 @@ const Table = ({ {/* TABLE BODY */} - {rows.map((row) => ( - - {row.cells.map((c, index) => ( - - {c.content} - - ))} - - ))} + {rows.map((row) => { + return ( + <> + onRowClick(row.id)}> + {getRowCells( + row.cells, + selectedRowIds?.has(row.id) || false, + isCollapsible || false + ).map((c, index) => { + return ( + + {c.content} + + ); + })} + + + {/* Collapsible content */} + {isCollapsible && ( + + + + {row.collapsibleContent} + + + + )} + + ); + })} diff --git a/src/dataDisplay/Table/table.stories.tsx b/src/dataDisplay/Table/table.stories.tsx index ae3eb218..c3325e5d 100644 --- a/src/dataDisplay/Table/table.stories.tsx +++ b/src/dataDisplay/Table/table.stories.tsx @@ -12,8 +12,63 @@ export default { } }; -export const section = () => { - const [selectedRowIds, setSelectedRowIds] = useState>(new Set()); +const headerCells = [ + { + id: 'col1', + label: 'col1' + }, + { + id: 'col2', + alignment: Alignment.right, + label: 'col2' + }, + { + id: 'col3', + alignment: Alignment.right, + label: 'col3' + } +]; + +const rows = [ + { + id: '1', + collapsibleContent:
content 1
, + cells: [ + { + content: + }, + { + content: 1, + alignment: Alignment.right + }, + { + content: 'safe', + alignment: Alignment.right + } + ] + }, + { + id: '2', + collapsibleContent:
content 2
, + cells: [ + { + content: + }, + { + content: 2, + alignment: Alignment.right + }, + { + content: 'gnosis', + alignment: Alignment.right + } + ] + } +]; + +export const table = () =>
; + +export const sortable = () => { const [sortedByHeaderId, setSortedByHeaderId] = useState( 'col2' ); @@ -21,16 +76,6 @@ export const section = () => { SortDirection.asc ); - const onRowClick = (rowId: string) => { - const cp = new Set(selectedRowIds); - if (cp.has(rowId)) { - cp.delete(rowId); - } else { - cp.add(rowId); - } - setSelectedRowIds(cp); - }; - const onHeaderClick = (headerId: string) => { if (!['col2'].includes(headerId)) { return; @@ -54,64 +99,38 @@ export const section = () => { }); }; - const headerCells = [ - { - id: 'col1', - label: 'col1' - }, - { - id: 'col2', - alignment: Alignment.right, - label: 'col2' - }, - { - id: 'col3', - label: 'col3' - } - ]; + return ( +
+ ); +}; + +export const collapsible = () => { + const [selectedRowIds, setSelectedRowIds] = useState>(new Set()); - const rows = [ - { - id: '1', - cells: [ - { - content: - }, - { - content: 1, - alignment: Alignment.right - }, - { - content: 'safe' - } - ] - }, - { - id: '2', - cells: [ - { - content: - }, - { - content: 2, - alignment: Alignment.right - }, - { - content: 'gnosis' - } - ] + const onRowClick = (rowId: string) => { + const cp = new Set(selectedRowIds); + if (cp.has(rowId)) { + cp.delete(rowId); + } else { + cp.add(rowId); } - ]; + setSelectedRowIds(cp); + }; return (
); }; From 522f294acd75f703453074a5845cde52b61a9643 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Tue, 14 Jul 2020 14:35:10 -0300 Subject: [PATCH 04/28] remove makeStyles --- src/dataDisplay/Table/index.tsx | 148 +++++++++++++++----------------- 1 file changed, 67 insertions(+), 81 deletions(-) diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index a89c0309..c73a8f0a 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -9,21 +9,11 @@ import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import Box from '@material-ui/core/Box'; import Collapse from '@material-ui/core/Collapse'; -//import { makeStyles } from '@material-ui/core/styles'; + //import styled from 'styled-components'; import { FixedIcon } from '../..'; -// const useStyles = makeStyles({ -// table: { -// // minWidth: 450 -// // '& .MuiTableRow-root:hover': { -// // backgroundColor: theme.colors.background, -// // cursor: 'pointer' -// // }, -// } -// }); - // const TextTHead = styled(Text)` // text-transform: uppercase; // `; @@ -119,77 +109,73 @@ const Table = ({ sortDirection, onRowClick = () => {}, onHeaderClick = () => {} -}: Props) => { - //const classes = useStyles(); - - return ( - - - {/* HEADER CELLS */} - - - {getHeaders(headers || [], isCollapsible || false).map((header) => ( - - onHeaderClick(header.id)}> - {header.label} - - - ))} - - - - {/* TABLE BODY */} - - {rows.map((row) => { - return ( - <> - onRowClick(row.id)}> - {getRowCells( - row.cells, - selectedRowIds?.has(row.id) || false, - isCollapsible || false - ).map((c, index) => { - return ( - - {c.content} - - ); - })} - - - {/* Collapsible content */} - {isCollapsible && ( - +}: Props) => ( + + + {/* HEADER CELLS */} + + + {getHeaders(headers || [], isCollapsible || false).map((header) => ( + + onHeaderClick(header.id)}> + {header.label} + + + ))} + + + + {/* TABLE BODY */} + + {rows.map((row) => { + return ( + <> + onRowClick(row.id)}> + {getRowCells( + row.cells, + selectedRowIds?.has(row.id) || false, + isCollapsible || false + ).map((c, index) => { + return ( - - {row.collapsibleContent} - + key={c.id || index} + align={c.alignment || Alignment.left}> + {c.content} - - )} - - ); - })} - - - - ); -}; + ); + })} + + + {/* Collapsible content */} + {isCollapsible && ( + + + + {row.collapsibleContent} + + + + )} + + ); + })} + + + +); export default Table; From 8bcc943a4511ff1c0b2054f98c2ad6c3b4719e6d Mon Sep 17 00:00:00 2001 From: nicosampler Date: Wed, 15 Jul 2020 14:34:44 -0300 Subject: [PATCH 05/28] rename types --- src/dataDisplay/Table/table.stories.tsx | 28 +++++++++++++------------ src/dataDisplay/index.ts | 2 +- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/dataDisplay/Table/table.stories.tsx b/src/dataDisplay/Table/table.stories.tsx index c3325e5d..9d15c114 100644 --- a/src/dataDisplay/Table/table.stories.tsx +++ b/src/dataDisplay/Table/table.stories.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import Table, { Alignment, SortDirection } from './index'; +import { Table, TableAlignment, TableSortDirection } from './index'; import { Icon } from '../../'; export default { @@ -19,12 +19,12 @@ const headerCells = [ }, { id: 'col2', - alignment: Alignment.right, + alignment: TableAlignment.right, label: 'col2' }, { id: 'col3', - alignment: Alignment.right, + alignment: TableAlignment.right, label: 'col3' } ]; @@ -39,11 +39,11 @@ const rows = [ }, { content: 1, - alignment: Alignment.right + alignment: TableAlignment.right }, { content: 'safe', - alignment: Alignment.right + alignment: TableAlignment.right } ] }, @@ -56,11 +56,11 @@ const rows = [ }, { content: 2, - alignment: Alignment.right + alignment: TableAlignment.right }, { content: 'gnosis', - alignment: Alignment.right + alignment: TableAlignment.right } ] } @@ -68,12 +68,14 @@ const rows = [ export const table = () =>
; +export const withoutHeader = () =>
; + export const sortable = () => { const [sortedByHeaderId, setSortedByHeaderId] = useState( 'col2' ); - const [sortDirection, setSortDirection] = useState( - SortDirection.asc + const [sortDirection, setSortDirection] = useState( + TableSortDirection.asc ); const onHeaderClick = (headerId: string) => { @@ -82,9 +84,9 @@ export const sortable = () => { } let newDirection = - sortedByHeaderId === headerId && sortDirection === SortDirection.asc - ? SortDirection.desc - : SortDirection.asc; + sortedByHeaderId === headerId && sortDirection === TableSortDirection.asc + ? TableSortDirection.desc + : TableSortDirection.asc; setSortDirection(newDirection); setSortedByHeaderId(headerId); @@ -93,7 +95,7 @@ export const sortable = () => { const getSortedRows = () => { const cp = [...rows]; return cp.sort((a, b) => { - return sortDirection === SortDirection.asc + return sortDirection === TableSortDirection.asc ? Number(a.cells[1].content) - Number(b.cells[1].content) : Number(b.cells[1].content) - Number(a.cells[1].content); }); diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts index 9e3c6279..42c2b3cd 100644 --- a/src/dataDisplay/index.ts +++ b/src/dataDisplay/index.ts @@ -5,7 +5,7 @@ export { default as FixedDialog } from './FixedDialog'; export { default as Icon } from './Icon'; export { default as IconText } from './IconText'; export { default as Layout } from './Layout'; -export { default as Table } from './Table'; +export * from './Table'; export { default as Text } from './Text'; export { default as Title } from './Title'; export { default as Section } from './Section'; From 30622e58f332365e6a20aa1a45d65bc9a7b35de9 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Wed, 15 Jul 2020 14:34:52 -0300 Subject: [PATCH 06/28] change export --- src/dataDisplay/Table/index.tsx | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index c73a8f0a..5995d288 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -22,48 +22,51 @@ import { FixedIcon } from '../..'; // border-bottom: 2px solid ${({ theme }) => theme.colors.separator} !important; // `; -export enum Alignment { +export enum TableAlignment { left = 'left', right = 'right', center = 'center' } -export enum SortDirection { +export enum TableSortDirection { asc = 'asc', desc = 'desc' } -export type Header = { +export type TableHeader = { id: string; - alignment?: Alignment; + alignment?: TableAlignment; label: string; }; type RowCells = { id?: string; - alignment?: Alignment; + alignment?: TableAlignment; content: React.ReactNode; }; -export type Row = { +export type TableRow = { id: string; collapsibleContent?: React.ReactNode; cells: RowCells[]; }; type Props = { - rows: Row[]; - headers?: Header[]; + rows: TableRow[]; + headers?: TableHeader[]; isCollapsible?: boolean; className?: string; selectedRowIds?: Set; sortedByHeaderId?: string; - sortDirection?: SortDirection; + sortDirection?: TableSortDirection; onHeaderClick?: (id: string) => void; onRowClick?: (id: string) => void; }; -const getHeaders = (headers: Header[], isCollapsible: boolean): Header[] => { +const getHeaders = ( + headers: TableHeader[], + isCollapsible: boolean +): TableHeader[] => { if (!isCollapsible) { return headers; } @@ -89,7 +92,7 @@ const getRowCells = ( return [ ...cells, { - alignment: Alignment.center, + alignment: TableAlignment.center, content: isSelected ? ( ) : ( @@ -99,7 +102,7 @@ const getRowCells = ( ]; }; -const Table = ({ +export const Table = ({ rows, headers, isCollapsible, @@ -118,7 +121,7 @@ const Table = ({ {getHeaders(headers || [], isCollapsible || false).map((header) => ( + align={header.alignment || TableAlignment.left}> + align={c.alignment || TableAlignment.left}> {c.content} ); @@ -177,5 +180,3 @@ const Table = ({ ); - -export default Table; From 80d841d583b5c38f9ef2bc6420b82837c37427bf Mon Sep 17 00:00:00 2001 From: nicosampler Date: Wed, 15 Jul 2020 15:46:12 -0300 Subject: [PATCH 07/28] headers fix --- src/dataDisplay/Table/index.tsx | 34 +++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index 5995d288..44199267 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -116,22 +116,24 @@ export const Table = ({ {/* HEADER CELLS */} - - - {getHeaders(headers || [], isCollapsible || false).map((header) => ( - - onHeaderClick(header.id)}> - {header.label} - - - ))} - - + {headers && ( + + + {getHeaders(headers || [], isCollapsible || false).map((header) => ( + + onHeaderClick(header.id)}> + {header.label} + + + ))} + + + )} {/* TABLE BODY */} From 321731880597eaaf8d5398a56b02f436f4ac23a5 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Thu, 16 Jul 2020 11:47:03 -0300 Subject: [PATCH 08/28] default values and content colspan --- src/dataDisplay/Table/index.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index 44199267..7ab43060 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -105,9 +105,9 @@ const getRowCells = ( export const Table = ({ rows, headers, - isCollapsible, + isCollapsible = false, className, - selectedRowIds, + selectedRowIds = new Set(), sortedByHeaderId, sortDirection, onRowClick = () => {}, @@ -119,7 +119,7 @@ export const Table = ({ {headers && ( - {getHeaders(headers || [], isCollapsible || false).map((header) => ( + {getHeaders(headers || [], isCollapsible).map((header) => ( @@ -138,18 +138,20 @@ export const Table = ({ {/* TABLE BODY */} {rows.map((row) => { + const rowCells = getRowCells( + row.cells, + selectedRowIds.has(row.id), + isCollapsible + ); + return ( <> onRowClick(row.id)}> - {getRowCells( - row.cells, - selectedRowIds?.has(row.id) || false, - isCollapsible || false - ).map((c, index) => { + {rowCells.map((c, index) => { return ( - + {row.collapsibleContent} From 5ff0268b98be664f00505e60b9fc17221900b7c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 17 Jul 2020 11:13:11 -0300 Subject: [PATCH 09/28] fix collapsable padding --- src/dataDisplay/Table/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index 7ab43060..84a3a7fe 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -165,7 +165,7 @@ export const Table = ({ {/* Collapsible content */} {isCollapsible && ( - + Date: Fri, 17 Jul 2020 11:56:15 -0300 Subject: [PATCH 10/28] Icon tooltip --- src/dataDisplay/Icon/icon.stories.tsx | 4 +++ src/dataDisplay/Icon/index.tsx | 35 +++++++++++++++++++++++---- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx index c4992229..8d64764a 100644 --- a/src/dataDisplay/Icon/icon.stories.tsx +++ b/src/dataDisplay/Icon/icon.stories.tsx @@ -133,3 +133,7 @@ export const customColor = () => ( ); + +export const withTooltip = () => ( + +); diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx index 17f8b1e8..543a122b 100644 --- a/src/dataDisplay/Icon/index.tsx +++ b/src/dataDisplay/Icon/index.tsx @@ -1,5 +1,7 @@ import React from 'react'; import styled from 'styled-components'; +import Tooltip from '@material-ui/core/Tooltip'; +import { withStyles } from '@material-ui/core/styles'; import add from './images/add'; import addressBook from './images/addressBook'; @@ -68,8 +70,9 @@ import transactionsInactive from './images/transactionsInactive'; import unlocked from './images/unlocked'; import userEdit from './images/userEdit'; import wallet from './images/wallet'; +import { rgba } from 'polished'; -import { Theme } from '../../theme'; +import theme, { Theme } from '../../theme'; const StyledIcon = styled.span` .icon-color { @@ -78,6 +81,15 @@ const StyledIcon = styled.span` } `; +const StyledTooltip = withStyles(() => ({ + tooltip: { + backgroundColor: theme.colors.overlay.color, + border: `1px solid ${theme.colors.icon}`, + boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`, + color: theme.colors.text + } +}))(Tooltip); + const icons = { add, addressBook, @@ -145,23 +157,36 @@ const icons = { transactionsInactive, unlocked, userEdit, - wallet, + wallet }; export type IconType = typeof icons; type Props = { type: keyof IconType; - color?: keyof Theme['colors']; size: keyof Theme['icons']['size']; + color?: keyof Theme['colors']; + tooltip?: string; + className?: string; }; /** * The `Icon` renders an icon, it can be one already defined specified by * the type props or custom one using the customUrl. */ -function Icon({ type, size, color }: Props) { - return {icons[type][size]}; +function Icon({ type, size, color, tooltip, className }: Props) { + const IconElement = ( + + {icons[type][size]} + + ); + return tooltip === undefined ? ( + IconElement + ) : ( + + {IconElement} + + ); } export default Icon; From d98efcc5d1d5dcf5e476fad4f8a55f8e494493b0 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Fri, 17 Jul 2020 11:56:31 -0300 Subject: [PATCH 11/28] Text tooltip --- src/dataDisplay/Text/index.tsx | 35 ++++++++++++++++++++++++--- src/dataDisplay/Text/text.stories.tsx | 24 +++++++++++------- 2 files changed, 46 insertions(+), 13 deletions(-) diff --git a/src/dataDisplay/Text/index.tsx b/src/dataDisplay/Text/index.tsx index 24e94273..4549e1ea 100644 --- a/src/dataDisplay/Text/index.tsx +++ b/src/dataDisplay/Text/index.tsx @@ -1,7 +1,10 @@ import React from 'react'; import styled from 'styled-components'; +import Tooltip from '@material-ui/core/Tooltip'; +import { withStyles } from '@material-ui/core/styles'; +import { rgba } from 'polished'; -import { Theme } from '../../theme'; +import theme, { Theme } from '../../theme'; type Props = { children: any; @@ -9,10 +12,14 @@ type Props = { color?: keyof Theme['colors']; strong?: boolean; center?: boolean; + tooltip?: string; + className?: string; }; const StyledText = styled.p` font-family: 'Averta'; + display: ${({ tooltip }) => + tooltip === undefined ? 'inline-block' : 'block'}; color: ${({ color, theme }) => color ? theme.colors[color] : theme.colors.text}; margin: 0; @@ -22,8 +29,28 @@ const StyledText = styled.p` text-align: ${({ center }) => (center ? 'center' : 'start')}; `; -const Text = ({ children, ...rest }: Props) => ( - {children} -); +const StyledTooltip = withStyles(() => ({ + tooltip: { + backgroundColor: theme.colors.white, + color: theme.colors.text, + boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}` + }, + arrow: { + color: theme.colors.white, + boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}` + } +}))(Tooltip); + +const Text = ({ children, tooltip, ...rest }: Props) => { + const TextElement = {children}; + + return tooltip === undefined ? ( + TextElement + ) : ( + + {TextElement} + + ); +}; export default Text; diff --git a/src/dataDisplay/Text/text.stories.tsx b/src/dataDisplay/Text/text.stories.tsx index dcf5f711..a0e51db9 100644 --- a/src/dataDisplay/Text/text.stories.tsx +++ b/src/dataDisplay/Text/text.stories.tsx @@ -1,12 +1,12 @@ -import React from "react"; +import React from 'react'; -import Text from "./index"; +import Text from './index'; export default { - title: "Data Display/Text", + title: 'Data Display/Text', component: Text, parameters: { - componentSubtitle: "Text component, it allows several configurations" + componentSubtitle: 'Text component, it allows several configurations' } }; @@ -25,7 +25,7 @@ export const centered = () => ( ); export const customSize = () => ( - <> + <> Some Text... Some Text... Some Text... @@ -33,8 +33,14 @@ export const customSize = () => ( ); -export const color = () => ( - <> - Some Text... - +export const customColor = () => ( + + Some Text... + +); + +export const withTooltip = () => ( + + Some Text... + ); From a3a1d6b3d4dabcfe1c25b855e1d9a8c8a4f23e64 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Fri, 17 Jul 2020 11:56:43 -0300 Subject: [PATCH 12/28] Loader color --- src/feedback/Loader/index.tsx | 36 ++++++++++++++++++++------ src/feedback/Loader/loader.stories.tsx | 10 ++++--- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/src/feedback/Loader/index.tsx b/src/feedback/Loader/index.tsx index cf6249e2..dd4f4d5b 100644 --- a/src/feedback/Loader/index.tsx +++ b/src/feedback/Loader/index.tsx @@ -2,24 +2,44 @@ import React from 'react'; import styled from 'styled-components'; import CircularProgress from '@material-ui/core/CircularProgress'; +import { Text } from '../../'; + import theme, { Theme } from '../../theme'; +type TextType = typeof Text; + +type Props = { + size: keyof Theme['loader']['size']; + color?: keyof Theme['colors']; + className?: string; +}; + const Wrapper = styled.div` display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; + + .p { + margin-right: 5px; + } `; -type Props = { - size: keyof Theme['loader']['size']; -}; +const StyledCircularProgress = styled(({ size, className }: Props) => ( + +))` + &.MuiCircularProgress-colorPrimary { + color: ${({ theme, color = 'primary' }) => theme.colors[color]}; + } +`; -const Loader = ({ size }: Props) => ( - - - -); +const Loader = ({ className, size, color }: Props) => { + return ( + + + + ); +}; export default Loader; diff --git a/src/feedback/Loader/loader.stories.tsx b/src/feedback/Loader/loader.stories.tsx index 0f5f98d1..3e1332f6 100644 --- a/src/feedback/Loader/loader.stories.tsx +++ b/src/feedback/Loader/loader.stories.tsx @@ -1,12 +1,12 @@ -import React from "react"; +import React from 'react'; -import Loader from "./index"; +import Loader from './index'; export default { - title: "Feedback/Loader", + title: 'Feedback/Loader', component: Loader, parameters: { - componentSubtitle: "Loader component" + componentSubtitle: 'Loader component' } }; @@ -18,3 +18,5 @@ export const loader = () => ( ); + +export const withColor = () => ; \ No newline at end of file From f396ff5f86d082db85a082b3196eb05e124b3b9e Mon Sep 17 00:00:00 2001 From: nicosampler Date: Fri, 17 Jul 2020 11:56:58 -0300 Subject: [PATCH 13/28] Adding StatusDot --- src/feedback/StatusDot/index.stories.tsx | 17 ++++++ src/feedback/StatusDot/index.tsx | 21 +++++++ src/theme.ts | 74 +++++++++++++----------- 3 files changed, 78 insertions(+), 34 deletions(-) create mode 100644 src/feedback/StatusDot/index.stories.tsx create mode 100644 src/feedback/StatusDot/index.tsx diff --git a/src/feedback/StatusDot/index.stories.tsx b/src/feedback/StatusDot/index.stories.tsx new file mode 100644 index 00000000..3e81340a --- /dev/null +++ b/src/feedback/StatusDot/index.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import StatusDot from './index'; + +export default { + title: 'Feedback/StatusDot', + component: StatusDot, + parameters: {} +}; + +export const statusDot = () => ( + <> + +
+ + +); diff --git a/src/feedback/StatusDot/index.tsx b/src/feedback/StatusDot/index.tsx new file mode 100644 index 00000000..dfa6ec52 --- /dev/null +++ b/src/feedback/StatusDot/index.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; + +import styled from 'styled-components'; +import { Theme } from '../../theme'; + +type Props = { + color: keyof Theme['colors']; + size: keyof Theme['statusDot']['size']; + className?: string; +}; + +const StyledDot = styled.div` + border-radius: 50%; + background-color: ${({ theme, color }) => theme.colors[color]}; + height: ${({ theme, size }) => theme.statusDot.size[size]}; + width: ${({ theme, size }) => theme.statusDot.size[size]}; +`; + +const StatusDot = (props: Props) => ; + +export default StatusDot; diff --git a/src/theme.ts b/src/theme.ts index 6cce6dce..bbc6486e 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,7 +1,9 @@ const theme = { - fonts: { - fontFamily: `'Averta', 'Roboto', 'Helvetica Neue', 'Arial', 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', '-apple-system', 'BlinkMacSystemFont', sans-serif`, - fontFamilyCode: `source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace` + buttons: { + size: { + md: { height: '36px', padding: '0 16px' }, + lg: { height: '52px', padding: '0 25px' } + } }, colors: { primary: '#008C73', @@ -25,7 +27,7 @@ const theme = { pendingTagHover: '#FBE5C5', tag: '#D4D5D3', background: '#F7F5F5', - white: '#ffffff', + white: '#ffffff', disabled: { opacity: 0.5 @@ -40,10 +42,41 @@ const theme = { color: '#28363D' } }, - buttons: { + statusDot: { size: { - md: { height: '36px', padding: '0 16px'}, - lg: { height: '52px', padding: '0 25px'} + sm: '5px', + md: '10px' + } + }, + fonts: { + fontFamily: `'Averta', 'Roboto', 'Helvetica Neue', 'Arial', 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', '-apple-system', 'BlinkMacSystemFont', sans-serif`, + fontFamilyCode: `source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace` + }, + icons: { + size: { + sm: '16', + md: '24' + } + }, + iconText: { + size: { + sm: null, + md: null + } + }, + identicon: { + size: { + sm: '16px', + md: '32px', + lg: '60px' + } + }, + loader: { + size: { + xs: '10px', + sm: '30px', + md: '50px', + lg: '70px' } }, text: { @@ -66,12 +99,6 @@ const theme = { } } }, - iconText: { - size: { - sm: null, - md: null - } - }, title: { size: { xs: { @@ -95,27 +122,6 @@ const theme = { lineHeight: '64px' } } - }, - loader: { - size: { - xs: '10px', - sm: '30px', - md: '50px', - lg: '70px' - } - }, - icons: { - size: { - sm: '16', - md: '24' - } - }, - identicon: { - size: { - sm: '16px', - md: '32px', - lg: '60px' - } } }; From adb83948bd80b8dbdb17903255bca02cf9ae840c Mon Sep 17 00:00:00 2001 From: nicosampler Date: Mon, 20 Jul 2020 10:08:43 -0300 Subject: [PATCH 14/28] remove unused code --- src/feedback/Loader/index.tsx | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/src/feedback/Loader/index.tsx b/src/feedback/Loader/index.tsx index dd4f4d5b..fe1ab3d1 100644 --- a/src/feedback/Loader/index.tsx +++ b/src/feedback/Loader/index.tsx @@ -14,18 +14,6 @@ type Props = { className?: string; }; -const Wrapper = styled.div` - display: flex; - height: 100%; - width: 100%; - justify-content: center; - align-items: center; - - .p { - margin-right: 5px; - } -`; - const StyledCircularProgress = styled(({ size, className }: Props) => ( ))` @@ -36,9 +24,7 @@ const StyledCircularProgress = styled(({ size, className }: Props) => ( const Loader = ({ className, size, color }: Props) => { return ( - - - + ); }; From a090eab8e9dd5d0615be8389d4db18734e83bfef Mon Sep 17 00:00:00 2001 From: nicosampler Date: Mon, 20 Jul 2020 15:50:32 -0300 Subject: [PATCH 15/28] functions types --- src/dataDisplay/Icon/index.tsx | 2 +- src/dataDisplay/Table/index.tsx | 4 ++-- src/dataDisplay/Text/index.tsx | 2 +- src/feedback/Loader/index.tsx | 14 ++++---------- src/feedback/StatusDot/index.tsx | 2 +- 5 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx index 543a122b..cbee31fd 100644 --- a/src/dataDisplay/Icon/index.tsx +++ b/src/dataDisplay/Icon/index.tsx @@ -174,7 +174,7 @@ type Props = { * The `Icon` renders an icon, it can be one already defined specified by * the type props or custom one using the customUrl. */ -function Icon({ type, size, color, tooltip, className }: Props) { +function Icon({ type, size, color, tooltip, className }: Props): React.ReactElement { const IconElement = ( {icons[type][size]} diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index 84a3a7fe..910ab779 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -84,7 +84,7 @@ const getRowCells = ( cells: RowCells[], isSelected: boolean, isCollapsible: boolean -) => { +): RowCells[] => { if (!isCollapsible) { return cells; } @@ -112,7 +112,7 @@ export const Table = ({ sortDirection, onRowClick = () => {}, onHeaderClick = () => {} -}: Props) => ( +}: Props): React.ReactElement => ( {/* HEADER CELLS */} diff --git a/src/dataDisplay/Text/index.tsx b/src/dataDisplay/Text/index.tsx index 4549e1ea..17159645 100644 --- a/src/dataDisplay/Text/index.tsx +++ b/src/dataDisplay/Text/index.tsx @@ -41,7 +41,7 @@ const StyledTooltip = withStyles(() => ({ } }))(Tooltip); -const Text = ({ children, tooltip, ...rest }: Props) => { +const Text = ({ children, tooltip, ...rest }: Props): React.ReactElement => { const TextElement = {children}; return tooltip === undefined ? ( diff --git a/src/feedback/Loader/index.tsx b/src/feedback/Loader/index.tsx index fe1ab3d1..f14fcdf8 100644 --- a/src/feedback/Loader/index.tsx +++ b/src/feedback/Loader/index.tsx @@ -2,19 +2,15 @@ import React from 'react'; import styled from 'styled-components'; import CircularProgress from '@material-ui/core/CircularProgress'; -import { Text } from '../../'; - import theme, { Theme } from '../../theme'; -type TextType = typeof Text; - type Props = { size: keyof Theme['loader']['size']; color?: keyof Theme['colors']; className?: string; }; -const StyledCircularProgress = styled(({ size, className }: Props) => ( +const StyledCircularProgress = styled(({ size, className }: Props): React.ReactElement => ( ))` &.MuiCircularProgress-colorPrimary { @@ -22,10 +18,8 @@ const StyledCircularProgress = styled(({ size, className }: Props) => ( } `; -const Loader = ({ className, size, color }: Props) => { - return ( - - ); -}; +const Loader = ({ className, size, color }: Props): React.ReactElement => ( + +); export default Loader; diff --git a/src/feedback/StatusDot/index.tsx b/src/feedback/StatusDot/index.tsx index dfa6ec52..538ab1b8 100644 --- a/src/feedback/StatusDot/index.tsx +++ b/src/feedback/StatusDot/index.tsx @@ -16,6 +16,6 @@ const StyledDot = styled.div` width: ${({ theme, size }) => theme.statusDot.size[size]}; `; -const StatusDot = (props: Props) => ; +const StatusDot = (props: Props): React.ReactElement => ; export default StatusDot; From 78d4c76b30ecfefd5a8c9faf67f37d4df2947205 Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Tue, 21 Jul 2020 11:54:03 +0400 Subject: [PATCH 16/28] add eslint-plugin-flowtype --- package.json | 1 + yarn.lock | 13 +++++++++++++ 2 files changed, 14 insertions(+) diff --git a/package.json b/package.json index 62792a57..bfe579db 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "eslint": "7.3.1", "eslint-config-prettier": "6.11.0", "eslint-config-react-app": "5.2.1", + "eslint-plugin-flowtype": "^5.2.0", "eslint-plugin-import": "2.22.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "3.1.4", diff --git a/yarn.lock b/yarn.lock index c4a25219..df8c3e32 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4964,6 +4964,14 @@ eslint-module-utils@^2.6.0: debug "^2.6.9" pkg-dir "^2.0.0" +eslint-plugin-flowtype@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.2.0.tgz#a4bef5dc18f9b2bdb41569a4ab05d73805a3d261" + integrity sha512-z7ULdTxuhlRJcEe1MVljePXricuPOrsWfScRXFhNzVD5dmTHWjIF57AxD0e7AbEoLSbjSsaA5S+hCg43WvpXJQ== + dependencies: + lodash "^4.17.15" + string-natural-compare "^3.0.1" + eslint-plugin-import@2.22.0: version "2.22.0" resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.0.tgz#92f7736fe1fde3e2de77623c838dd992ff5ffb7e" @@ -10133,6 +10141,11 @@ string-convert@^0.2.0: resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97" integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c= +string-natural-compare@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" + integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== + string-width@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3" From e41835672ac0535f876a2f232e615053b23aacdf Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Tue, 21 Jul 2020 14:16:15 +0400 Subject: [PATCH 17/28] dep bump, update eslint config --- .eslintrc | 18 +- package.json | 24 +-- src/dataDisplay/Icon/index.tsx | 8 +- yarn.lock | 361 ++++++++------------------------- 4 files changed, 112 insertions(+), 299 deletions(-) diff --git a/.eslintrc b/.eslintrc index e5559d1a..ae97fd7e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,11 +1,17 @@ { "parser": "@typescript-eslint/parser", "extends": [ - "react-app", - "prettier", - "prettier/react", - "plugin:import/errors", - "plugin:@typescript-eslint/recommended" + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "prettier/@typescript-eslint", + "plugin:prettier/recommended" ], - "plugins": ["prettier", "import"] + "plugins": ["react-hooks"], + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + } } diff --git a/package.json b/package.json index bfe579db..b4c1ab42 100644 --- a/package.json +++ b/package.json @@ -40,35 +40,31 @@ "@testing-library/user-event": "10.3.1", "@types/big.js": "^4.0.5", "@types/classnames": "^2.2.10", - "@types/jest": "26.0.3", + "@types/jest": "26.0.5", "@types/material-ui": "^0.21.7", - "@types/node": "14.0.14", - "@types/react": "16.9.41", + "@types/node": "14.0.24", + "@types/react": "16.9.43", "@types/react-dom": "16.9.8", - "@types/styled-components": "5.1.0", + "@types/styled-components": "5.1.1", "@types/yup": "0.29.3", - "@typescript-eslint/eslint-plugin": "^3.5.0", - "@typescript-eslint/parser": "^3.5.0", + "@typescript-eslint/eslint-plugin": "^3.7.0", + "@typescript-eslint/parser": "^3.7.0", "awesome-typescript-loader": "^5.2.1", "babel-eslint": "^10.0.3", "babel-loader": "8.1.0", "copy-webpack-plugin": "^5.1.1", - "eslint": "7.3.1", + "eslint": "7.5.0", "eslint-config-prettier": "6.11.0", - "eslint-config-react-app": "5.2.1", - "eslint-plugin-flowtype": "^5.2.0", - "eslint-plugin-import": "2.22.0", - "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "3.1.4", - "eslint-plugin-react": "7.20.2", - "eslint-plugin-react-hooks": "4.0.4", + "eslint-plugin-react": "7.20.3", + "eslint-plugin-react-hooks": "4.0.8", "ethereum-blockies-base64": "^1.0.2", "prettier": "2.0.5", "react": "16.13.1", "react-dom": "16.13.1", "rimraf": "^3.0.2", "styled-components": "5.1.1", - "typescript": "3.9.5", + "typescript": "3.9.7", "webpack": "4.43.0", "webpack-cli": "^3.3.10", "webpack-node-externals": "^1.7.2" diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx index cbee31fd..acf85f99 100644 --- a/src/dataDisplay/Icon/index.tsx +++ b/src/dataDisplay/Icon/index.tsx @@ -174,7 +174,13 @@ type Props = { * The `Icon` renders an icon, it can be one already defined specified by * the type props or custom one using the customUrl. */ -function Icon({ type, size, color, tooltip, className }: Props): React.ReactElement { +function Icon({ + type, + size, + color, + tooltip, + className +}: Props): React.ReactElement { const IconElement = ( {icons[type][size]} diff --git a/yarn.lock b/yarn.lock index df8c3e32..0303a842 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2050,10 +2050,10 @@ jest-diff "^25.2.1" pretty-format "^25.2.1" -"@types/jest@26.0.3": - version "26.0.3" - resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.3.tgz#79534e0e94857171c0edc596db0ebe7cb7863251" - integrity sha512-v89ga1clpVL/Y1+YI0eIu1VMW+KU7Xl8PhylVtDKVWaSUHBHYPLXMQGBdrpHewaKoTvlXkksbYqPgz8b4cmRZg== +"@types/jest@26.0.5": + version "26.0.5" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.5.tgz#23a8eecf4764a770ea8d3a0d1ea16b96c822035d" + integrity sha512-heU+7w8snfwfjtcj2H458aTx3m5unIToOJhx75ebHilBiiQ39OIdA18WkG4LP08YKeAoWAGvWg8s+22w/PeJ6w== dependencies: jest-diff "^25.2.1" pretty-format "^25.2.1" @@ -2063,11 +2063,6 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd" integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ== -"@types/json5@^0.0.29": - version "0.0.29" - resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" - integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= - "@types/material-ui@^0.21.7": version "0.21.7" resolved "https://registry.yarnpkg.com/@types/material-ui/-/material-ui-0.21.7.tgz#2a4ab77a56a16adef044ba607edde5214151a5d8" @@ -2088,10 +2083,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.13.tgz#ee1128e881b874c371374c1f72201893616417c9" integrity sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA== -"@types/node@14.0.14": - version "14.0.14" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.14.tgz#24a0b5959f16ac141aeb0c5b3cd7a15b7c64cbce" - integrity sha512-syUgf67ZQpaJj01/tRTknkMNoBBLWJOBODF0Zm4NrXmiSuxjymFrxnTu1QVYRubhVkRcZLYZG8STTwJRdVm/WQ== +"@types/node@14.0.24": + version "14.0.24" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.24.tgz#b0f86f58564fa02a28b68f8b55d4cdec42e3b9d6" + integrity sha512-btt/oNOiDWcSuI721MdL8VQGnjsKjlTMdrKyTcLCKeQp/n4AAMFJ961wMbp+09y8WuGPClDEv07RIItdXKIXAA== "@types/npmlog@^4.1.2": version "4.1.2" @@ -2171,10 +2166,10 @@ "@types/prop-types" "*" csstype "^2.2.0" -"@types/react@16.9.41": - version "16.9.41" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.41.tgz#925137ee4d2ff406a0ecf29e8e9237390844002e" - integrity sha512-6cFei7F7L4wwuM+IND/Q2cV1koQUvJ8iSV+Gwn0c3kvABZ691g7sp3hfEQHOUBJtccl1gPi+EyNjMIl9nGA0ug== +"@types/react@16.9.43": + version "16.9.43" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.43.tgz#c287f23f6189666ee3bebc2eb8d0f84bcb6cdb6b" + integrity sha512-PxshAFcnJqIWYpJbLPriClH53Z2WlJcVZE+NP2etUtWQs2s7yIMj3/LDKZT/5CHJ/F62iyjVCDu2H3jHEXIxSg== dependencies: "@types/prop-types" "*" csstype "^2.2.0" @@ -2189,10 +2184,10 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== -"@types/styled-components@5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6" - integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ== +"@types/styled-components@5.1.1": + version "5.1.1" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.1.tgz#17c3b3a299aa38254189e04a72a8ee009a22e42d" + integrity sha512-fIjKvDU1LJExBZWEQilHqzfpOK4KUwBsj5zC79lxa94ekz8oDQSBNcayMACBImxIuevF+NbBGL9O/2CQ67Zhig== dependencies: "@types/hoist-non-react-statics" "*" "@types/react" "*" @@ -2273,52 +2268,52 @@ resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.29.3.tgz#5a85024796bffe0eb01601bfc180fe218356dba4" integrity sha512-XxZFKnxzTfm+DR8MMBA35UUXfUPmjPpi8HJ90VZg7q/LIbtiOhVGJ26gNnATcflcpnIyf2Qm9A+oEhswaqoDpA== -"@typescript-eslint/eslint-plugin@^3.5.0": - version "3.5.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.5.0.tgz#e7736e0808b5fb947a5f9dd949ae6736a7226b84" - integrity sha512-m4erZ8AkSjoIUOf8s4k2V1xdL2c1Vy0D3dN6/jC9d7+nEqjY3gxXCkgi3gW/GAxPaA4hV8biaCoTVdQmfAeTCQ== +"@typescript-eslint/eslint-plugin@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.7.0.tgz#0f91aa3c83d019591719e597fbdb73a59595a263" + integrity sha512-4OEcPON3QIx0ntsuiuFP/TkldmBGXf0uKxPQlGtS/W2F3ndYm8Vgdpj/woPJkzUc65gd3iR+qi3K8SDQP/obFg== dependencies: - "@typescript-eslint/experimental-utils" "3.5.0" + "@typescript-eslint/experimental-utils" "3.7.0" debug "^4.1.1" functional-red-black-tree "^1.0.1" regexpp "^3.0.0" semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/experimental-utils@3.5.0": - version "3.5.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.5.0.tgz#d09f9ffb890d1b15a7ffa9975fae92eee05597c4" - integrity sha512-zGNOrVi5Wz0jcjUnFZ6QUD0MCox5hBuVwemGCew2qJzUX5xPoyR+0EzS5qD5qQXL/vnQ8Eu+nv03tpeFRwLrDg== +"@typescript-eslint/experimental-utils@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.7.0.tgz#0ee21f6c48b2b30c63211da23827725078d5169a" + integrity sha512-xpfXXAfZqhhqs5RPQBfAFrWDHoNxD5+sVB5A46TF58Bq1hRfVROrWHcQHHUM9aCBdy9+cwATcvCbRg8aIRbaHQ== dependencies: "@types/json-schema" "^7.0.3" - "@typescript-eslint/types" "3.5.0" - "@typescript-eslint/typescript-estree" "3.5.0" + "@typescript-eslint/types" "3.7.0" + "@typescript-eslint/typescript-estree" "3.7.0" eslint-scope "^5.0.0" eslint-utils "^2.0.0" -"@typescript-eslint/parser@^3.5.0": - version "3.5.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.5.0.tgz#9ff8c11877c48df24e10e19d7bf542ee0359500d" - integrity sha512-sU07VbYB70WZHtgOjH/qfAp1+OwaWgrvD1Km1VXqRpcVxt971PMTU7gJtlrCje0M+Sdz7xKAbtiyIu+Y6QdnVA== +"@typescript-eslint/parser@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.7.0.tgz#3e9cd9df9ea644536feb6e5acdb8279ecff96ce9" + integrity sha512-2LZauVUt7jAWkcIW7djUc3kyW+fSarNEuM3RF2JdLHR9BfX/nDEnyA4/uWz0wseoWVZbDXDF7iF9Jc342flNqQ== dependencies: "@types/eslint-visitor-keys" "^1.0.0" - "@typescript-eslint/experimental-utils" "3.5.0" - "@typescript-eslint/types" "3.5.0" - "@typescript-eslint/typescript-estree" "3.5.0" + "@typescript-eslint/experimental-utils" "3.7.0" + "@typescript-eslint/types" "3.7.0" + "@typescript-eslint/typescript-estree" "3.7.0" eslint-visitor-keys "^1.1.0" -"@typescript-eslint/types@3.5.0": - version "3.5.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.5.0.tgz#4e3d2a2272268d8ec3e3e4a37152a64956682639" - integrity sha512-Dreqb5idi66VVs1QkbAwVeDmdJG+sDtofJtKwKCZXIaBsINuCN7Jv5eDIHrS0hFMMiOvPH9UuOs4splW0iZe4Q== +"@typescript-eslint/types@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.7.0.tgz#09897fab0cb95479c01166b10b2c03c224821077" + integrity sha512-reCaK+hyKkKF+itoylAnLzFeNYAEktB0XVfSQvf0gcVgpz1l49Lt6Vo9x4MVCCxiDydA0iLAjTF/ODH0pbfnpg== -"@typescript-eslint/typescript-estree@3.5.0": - version "3.5.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.5.0.tgz#dfc895db21a381b84f24c2a719f5bf9c600dcfdc" - integrity sha512-Na71ezI6QP5WVR4EHxwcBJgYiD+Sre9BZO5iJK2QhrmRPo/42+b0no/HZIrdD1sjghzlYv7t+7Jis05M1uMxQg== +"@typescript-eslint/typescript-estree@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.7.0.tgz#66872e6da120caa4b64e6b4ca5c8702afc74738d" + integrity sha512-xr5oobkYRebejlACGr1TJ0Z/r0a2/HUf0SXqPvlgUMwiMqOCu/J+/Dr9U3T0IxpE5oLFSkqMx1FE/dKaZ8KsOQ== dependencies: - "@typescript-eslint/types" "3.5.0" - "@typescript-eslint/visitor-keys" "3.5.0" + "@typescript-eslint/types" "3.7.0" + "@typescript-eslint/visitor-keys" "3.7.0" debug "^4.1.1" glob "^7.1.6" is-glob "^4.0.1" @@ -2326,10 +2321,10 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/visitor-keys@3.5.0": - version "3.5.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.5.0.tgz#73c1ea2582f814735e4afdc1cf6f5e3af78db60a" - integrity sha512-7cTp9rcX2sz9Z+zua9MCOX4cqp5rYyFD5o8LlbSpXrMTXoRdngTtotRZEkm8+FNMHPWYFhitFK+qt/brK8BVJQ== +"@typescript-eslint/visitor-keys@3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.7.0.tgz#ac0417d382a136e4571a0b0dcfe52088cb628177" + integrity sha512-k5PiZdB4vklUpUX4NBncn5RBKty8G3ihTY+hqJsCdMuD0v4jofI5xuqwnVcWxfv6iTm2P/dfEa2wMUnsUY8ODw== dependencies: eslint-visitor-keys "^1.1.0" @@ -2540,7 +2535,7 @@ acorn@^6.4.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474" integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA== -acorn@^7.1.0, acorn@^7.2.0: +acorn@^7.1.0, acorn@^7.3.1: version "7.3.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd" integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA== @@ -2781,7 +2776,7 @@ array-unique@^0.3.2: resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg= -array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3: +array.prototype.flat@^1.2.1: version "1.2.3" resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b" integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ== @@ -2840,11 +2835,6 @@ assign-symbols@^1.0.0: resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367" integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c= -ast-types-flow@^0.0.7: - version "0.0.7" - resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad" - integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0= - ast-types@0.11.3: version "0.11.3" resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.3.tgz#c20757fe72ee71278ea0ff3d87e5c2ca30d9edf8" @@ -2902,16 +2892,6 @@ awesome-typescript-loader@^5.2.1: source-map-support "^0.5.3" webpack-log "^1.2.0" -axe-core@^3.5.4: - version "3.5.5" - resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227" - integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q== - -axobject-query@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.2.tgz#2bdffc0371e643e5f03ba99065d5179b9ca79799" - integrity sha512-ICt34ZmrVt8UQnvPl6TVyDTkmhXmAyAT4Jh5ugfGUX4MOrZ+U/ZY6/sdylRw3qGNr9Ub5AJsaHeDMzNLehRdOQ== - babel-code-frame@^6.22.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" @@ -3998,11 +3978,6 @@ concat-stream@^1.5.0: readable-stream "^2.2.2" typedarray "^0.0.6" -confusing-browser-globals@^1.0.9: - version "1.0.9" - resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd" - integrity sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw== - console-browserify@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336" @@ -4028,11 +4003,6 @@ constants-browserify@^1.0.0: resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U= -contains-path@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a" - integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo= - content-disposition@0.5.3: version "0.5.3" resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd" @@ -4374,17 +4344,12 @@ d@1, d@^1.0.1: es5-ext "^0.10.50" type "^1.0.1" -damerau-levenshtein@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz#143c1641cb3d85c60c32329e26899adea8701791" - integrity sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug== - de-indent@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0= -debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: +debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== @@ -4556,14 +4521,6 @@ dir-glob@^2.0.0: dependencies: path-type "^3.0.0" -doctrine@1.5.0: - version "1.5.0" - resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa" - integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo= - dependencies: - esutils "^2.0.2" - isarray "^1.0.0" - doctrine@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d" @@ -4756,11 +4713,6 @@ emoji-regex@^8.0.0: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== -emoji-regex@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.0.0.tgz#48a2309cc8a1d2e9d23bc6a67c39b63032e76ea4" - integrity sha512-6p1NII1Vm62wni/VR/cUMauVQoxmLVb9csqQlvLz+hO2gk8U2UYDfXHQSUYIBKmZwAKz867IDqG7B+u0mj+M6w== - emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" @@ -4825,7 +4777,7 @@ errno@^0.1.3, errno@~0.1.7: dependencies: prr "~1.0.1" -error-ex@^1.2.0, error-ex@^1.3.1: +error-ex@^1.3.1: version "1.3.2" resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g== @@ -4941,73 +4893,6 @@ eslint-config-prettier@6.11.0: dependencies: get-stdin "^6.0.0" -eslint-config-react-app@5.2.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df" - integrity sha512-pGIZ8t0mFLcV+6ZirRgYK6RVqUIKRIi9MmgzUEmrIknsn3AdO0I32asO86dJgloHq+9ZPl8UIg8mYrvgP5u2wQ== - dependencies: - confusing-browser-globals "^1.0.9" - -eslint-import-resolver-node@^0.3.3: - version "0.3.4" - resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717" - integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA== - dependencies: - debug "^2.6.9" - resolve "^1.13.1" - -eslint-module-utils@^2.6.0: - version "2.6.0" - resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6" - integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA== - dependencies: - debug "^2.6.9" - pkg-dir "^2.0.0" - -eslint-plugin-flowtype@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.2.0.tgz#a4bef5dc18f9b2bdb41569a4ab05d73805a3d261" - integrity sha512-z7ULdTxuhlRJcEe1MVljePXricuPOrsWfScRXFhNzVD5dmTHWjIF57AxD0e7AbEoLSbjSsaA5S+hCg43WvpXJQ== - dependencies: - lodash "^4.17.15" - string-natural-compare "^3.0.1" - -eslint-plugin-import@2.22.0: - version "2.22.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.0.tgz#92f7736fe1fde3e2de77623c838dd992ff5ffb7e" - integrity sha512-66Fpf1Ln6aIS5Gr/55ts19eUuoDhAbZgnr6UxK5hbDx6l/QgQgx61AePq+BV4PP2uXQFClgMVzep5zZ94qqsxg== - dependencies: - array-includes "^3.1.1" - array.prototype.flat "^1.2.3" - contains-path "^0.1.0" - debug "^2.6.9" - doctrine "1.5.0" - eslint-import-resolver-node "^0.3.3" - eslint-module-utils "^2.6.0" - has "^1.0.3" - minimatch "^3.0.4" - object.values "^1.1.1" - read-pkg-up "^2.0.0" - resolve "^1.17.0" - tsconfig-paths "^3.9.0" - -eslint-plugin-jsx-a11y@^6.2.3: - version "6.3.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.3.1.tgz#99ef7e97f567cc6a5b8dd5ab95a94a67058a2660" - integrity sha512-i1S+P+c3HOlBJzMFORRbC58tHa65Kbo8b52/TwCwSKLohwvpfT5rm2GjGWzOHTEuq4xxf2aRlHHTtmExDQOP+g== - dependencies: - "@babel/runtime" "^7.10.2" - aria-query "^4.2.2" - array-includes "^3.1.1" - ast-types-flow "^0.0.7" - axe-core "^3.5.4" - axobject-query "^2.1.2" - damerau-levenshtein "^1.0.6" - emoji-regex "^9.0.0" - has "^1.0.3" - jsx-ast-utils "^2.4.1" - language-tags "^1.0.5" - eslint-plugin-prettier@3.1.4: version "3.1.4" resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz#168ab43154e2ea57db992a2cd097c828171f75c2" @@ -5015,15 +4900,15 @@ eslint-plugin-prettier@3.1.4: dependencies: prettier-linter-helpers "^1.0.0" -eslint-plugin-react-hooks@4.0.4: - version "4.0.4" - resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58" - integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA== +eslint-plugin-react-hooks@4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.8.tgz#a9b1e3d57475ccd18276882eff3d6cba00da7a56" + integrity sha512-6SSb5AiMCPd8FDJrzah+Z4F44P2CdOaK026cXFV+o/xSRzfOiV1FNFeLl2z6xm3yqWOQEZ5OfVgiec90qV2xrQ== -eslint-plugin-react@7.20.2: - version "7.20.2" - resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.2.tgz#b0d72abcd94c59c842338aa09c800808219ea77d" - integrity sha512-J3BdtsPNbcF/CG9HdyLx7jEtC7tuODODGldkS9P1zU2WMoHPdcsN2enUopgIaec5f9eYhSFI5zQAaWA/dgv2zw== +eslint-plugin-react@7.20.3: + version "7.20.3" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.3.tgz#0590525e7eb83890ce71f73c2cf836284ad8c2f1" + integrity sha512-txbo090buDeyV0ugF3YMWrzLIUqpYTsWSDZV9xLSmExE1P/Kmgg9++PD931r+KEWS66O1c9R4srLVVHmeHpoAg== dependencies: array-includes "^3.1.1" array.prototype.flatmap "^1.2.3" @@ -5053,22 +4938,22 @@ eslint-scope@^5.0.0, eslint-scope@^5.1.0: esrecurse "^4.1.0" estraverse "^4.1.1" -eslint-utils@^2.0.0: +eslint-utils@^2.0.0, eslint-utils@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27" integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg== dependencies: eslint-visitor-keys "^1.1.0" -eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.2.0: +eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e" integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ== -eslint@7.3.1: - version "7.3.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.3.1.tgz#76392bd7e44468d046149ba128d1566c59acbe19" - integrity sha512-cQC/xj9bhWUcyi/RuMbRtC3I0eW8MH0jhRELSvpKYkWep3C6YZ2OkvcvJVUeO6gcunABmzptbXBuDoXsjHmfTA== +eslint@7.5.0: + version "7.5.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.5.0.tgz#9ecbfad62216d223b82ac9ffea7ef3444671d135" + integrity sha512-vlUP10xse9sWt9SGRtcr1LAC67BENcQMFeV+w5EvLEoFe3xJ8cF1Skd0msziRx/VMC+72B4DxreCE+OR12OA6Q== dependencies: "@babel/code-frame" "^7.0.0" ajv "^6.10.0" @@ -5078,9 +4963,9 @@ eslint@7.3.1: doctrine "^3.0.0" enquirer "^2.3.5" eslint-scope "^5.1.0" - eslint-utils "^2.0.0" - eslint-visitor-keys "^1.2.0" - espree "^7.1.0" + eslint-utils "^2.1.0" + eslint-visitor-keys "^1.3.0" + espree "^7.2.0" esquery "^1.2.0" esutils "^2.0.2" file-entry-cache "^5.0.1" @@ -5094,7 +4979,7 @@ eslint@7.3.1: js-yaml "^3.13.1" json-stable-stringify-without-jsonify "^1.0.1" levn "^0.4.1" - lodash "^4.17.14" + lodash "^4.17.19" minimatch "^3.0.4" natural-compare "^1.4.0" optionator "^0.9.1" @@ -5107,14 +4992,14 @@ eslint@7.3.1: text-table "^0.2.0" v8-compile-cache "^2.0.3" -espree@^7.1.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/espree/-/espree-7.1.0.tgz#a9c7f18a752056735bf1ba14cb1b70adc3a5ce1c" - integrity sha512-dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Qw== +espree@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/espree/-/espree-7.2.0.tgz#1c263d5b513dbad0ac30c4991b93ac354e948d69" + integrity sha512-H+cQ3+3JYRMEIOl87e7QdHX70ocly5iW4+dttuR8iYSPr/hXKFb+7dBsZ7+u1adC4VrnPlTkv0+OwuPnDop19g== dependencies: - acorn "^7.2.0" + acorn "^7.3.1" acorn-jsx "^5.2.0" - eslint-visitor-keys "^1.2.0" + eslint-visitor-keys "^1.3.0" esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0: version "4.0.1" @@ -5482,7 +5367,7 @@ find-up@3.0.0, find-up@^3.0.0: dependencies: locate-path "^3.0.0" -find-up@^2.0.0, find-up@^2.1.0: +find-up@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7" integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c= @@ -7132,18 +7017,6 @@ kleur@^4.0.1: resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.0.1.tgz#3d4948534b666e2578f93b6fafb62108e64f05ef" integrity sha512-Qs6SqCLm63rd0kNVh+wO4XsWLU6kgfwwaPYsLiClWf0Tewkzsa6MvB21bespb8cz+ANS+2t3So1ge3gintzhlw== -language-subtag-registry@~0.3.2: - version "0.3.20" - resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.20.tgz#a00a37121894f224f763268e431c55556b0c0755" - integrity sha512-KPMwROklF4tEx283Xw0pNKtfTj1gZ4UByp4EsIFWLgBavJltF4TiYPc39k06zSTsLzxTVXXDSpbwaQXaFB4Qeg== - -language-tags@^1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a" - integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo= - dependencies: - language-subtag-registry "~0.3.2" - lazy-cache@^0.2.3: version "0.2.7" resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65" @@ -7198,16 +7071,6 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= -load-json-file@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8" - integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg= - dependencies: - graceful-fs "^4.1.2" - parse-json "^2.2.0" - pify "^2.0.0" - strip-bom "^3.0.0" - load-json-file@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b" @@ -7293,7 +7156,7 @@ lodash.uniq@4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5: +lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5: version "4.17.19" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b" integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ== @@ -8232,13 +8095,6 @@ parse-entities@^2.0.0: is-decimal "^1.0.0" is-hexadecimal "^1.0.0" -parse-json@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9" - integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck= - dependencies: - error-ex "^1.2.0" - parse-json@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0" @@ -8330,13 +8186,6 @@ path-to-regexp@0.1.7: resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= -path-type@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73" - integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM= - dependencies: - pify "^2.0.0" - path-type@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f" @@ -8365,11 +8214,6 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== -pify@^2.0.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" - integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= - pify@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176" @@ -8387,13 +8231,6 @@ pirates@^4.0.0, pirates@^4.0.1: dependencies: node-modules-regexp "^1.0.0" -pkg-dir@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b" - integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s= - dependencies: - find-up "^2.1.0" - pkg-dir@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3" @@ -9160,14 +8997,6 @@ react@16.13.1, react@^16.8.3: object-assign "^4.1.1" prop-types "^15.6.2" -read-pkg-up@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be" - integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4= - dependencies: - find-up "^2.0.0" - read-pkg "^2.0.0" - read-pkg-up@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978" @@ -9176,15 +9005,6 @@ read-pkg-up@^4.0.0: find-up "^3.0.0" read-pkg "^3.0.0" -read-pkg@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8" - integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg= - dependencies: - load-json-file "^2.0.0" - normalize-package-data "^2.3.2" - path-type "^2.0.0" - read-pkg@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389" @@ -9534,7 +9354,7 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo= -resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.3.2: +resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.3.2: version "1.17.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444" integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w== @@ -10141,11 +9961,6 @@ string-convert@^0.2.0: resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97" integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c= -string-natural-compare@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" - integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== - string-width@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3" @@ -10624,16 +10439,6 @@ ts-pnp@^1.1.2, ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== -tsconfig-paths@^3.9.0: - version "3.9.0" - resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b" - integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw== - dependencies: - "@types/json5" "^0.0.29" - json5 "^1.0.1" - minimist "^1.2.0" - strip-bom "^3.0.0" - tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.13.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" @@ -10703,10 +10508,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@3.9.5: - version "3.9.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36" - integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ== +typescript@3.9.7: + version "3.9.7" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" + integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== uglify-js@^2.6.1: version "2.8.29" From 81f1d2f4602c3f02e9454715c5df3d598515b35b Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Tue, 21 Jul 2020 14:20:28 +0400 Subject: [PATCH 18/28] turn off proptypes in eslint --- .eslintrc | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.eslintrc b/.eslintrc index ae97fd7e..e6c6a2ae 100644 --- a/.eslintrc +++ b/.eslintrc @@ -13,5 +13,10 @@ "ecmaFeatures": { "jsx": true } + }, + "rules": { + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", + "react/prop-types": "off" } } From bd6f16250f32ec147ff2f3f8745d45523ecd1cae Mon Sep 17 00:00:00 2001 From: Mikhail Mikheev Date: Tue, 21 Jul 2020 14:22:31 +0400 Subject: [PATCH 19/28] prettier fixes --- src/dataDisplay/Icon/icon.stories.tsx | 2 +- src/dataDisplay/Table/index.tsx | 6 ++++-- src/feedback/Loader/index.tsx | 8 +++++--- src/feedback/Loader/loader.stories.tsx | 2 +- src/feedback/StatusDot/index.tsx | 4 +++- 5 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx index 8d64764a..6c97dad8 100644 --- a/src/dataDisplay/Icon/icon.stories.tsx +++ b/src/dataDisplay/Icon/icon.stories.tsx @@ -135,5 +135,5 @@ export const customColor = () => ( ); export const withTooltip = () => ( - + ); diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index 910ab779..d5b112bc 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -143,7 +143,7 @@ export const Table = ({ selectedRowIds.has(row.id), isCollapsible ); - + return ( <> - + ( - -))` +const StyledCircularProgress = styled( + ({ size, className }: Props): React.ReactElement => ( + + ) +)` &.MuiCircularProgress-colorPrimary { color: ${({ theme, color = 'primary' }) => theme.colors[color]}; } diff --git a/src/feedback/Loader/loader.stories.tsx b/src/feedback/Loader/loader.stories.tsx index 3e1332f6..11a66b78 100644 --- a/src/feedback/Loader/loader.stories.tsx +++ b/src/feedback/Loader/loader.stories.tsx @@ -19,4 +19,4 @@ export const loader = () => ( ); -export const withColor = () => ; \ No newline at end of file +export const withColor = () => ; diff --git a/src/feedback/StatusDot/index.tsx b/src/feedback/StatusDot/index.tsx index 538ab1b8..2f5b616b 100644 --- a/src/feedback/StatusDot/index.tsx +++ b/src/feedback/StatusDot/index.tsx @@ -16,6 +16,8 @@ const StyledDot = styled.div` width: ${({ theme, size }) => theme.statusDot.size[size]}; `; -const StatusDot = (props: Props): React.ReactElement => ; +const StatusDot = (props: Props): React.ReactElement => ( + +); export default StatusDot; From b37f7ed2e3d8f3ec7534408a64ad227044239b55 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Tue, 21 Jul 2020 11:07:01 -0300 Subject: [PATCH 20/28] lint fixes --- .prettierrc | 2 +- package.json | 1 + src/dataDisplay/Table/index.tsx | 16 ++++----- src/dataDisplay/Table/table.stories.tsx | 46 +++++++++++++------------ 4 files changed, 34 insertions(+), 31 deletions(-) diff --git a/.prettierrc b/.prettierrc index eccaf745..7f0a1dfc 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,7 +3,7 @@ "jsxBracketSameLine": true, "printWidth": 80, "singleQuote": true, - "trailingComma": "none", + "trailingComma": "es5", "tabWidth": 2, "useTabs": false } \ No newline at end of file diff --git a/package.json b/package.json index b4c1ab42..f7f0fa87 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "build": "rimraf dist && webpack --mode production", "build-storybook": "build-storybook -s public --docs", "storybook": "start-storybook -p 9009 -s public --docs", + "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'", "prepare": "yarn build" }, "author": "Gnosis (https://gnosis.pm)", diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx index d5b112bc..015a847f 100644 --- a/src/dataDisplay/Table/index.tsx +++ b/src/dataDisplay/Table/index.tsx @@ -25,12 +25,12 @@ import { FixedIcon } from '../..'; export enum TableAlignment { left = 'left', right = 'right', - center = 'center' + center = 'center', } export enum TableSortDirection { asc = 'asc', - desc = 'desc' + desc = 'desc', } export type TableHeader = { @@ -75,8 +75,8 @@ const getHeaders = ( ...headers, { id: 'chevron', - label: '' - } + label: '', + }, ]; }; @@ -97,8 +97,8 @@ const getRowCells = ( ) : ( - ) - } + ), + }, ]; }; @@ -110,8 +110,8 @@ export const Table = ({ selectedRowIds = new Set(), sortedByHeaderId, sortDirection, - onRowClick = () => {}, - onHeaderClick = () => {} + onRowClick = () => undefined, + onHeaderClick = () => undefined, }: Props): React.ReactElement => ( diff --git a/src/dataDisplay/Table/table.stories.tsx b/src/dataDisplay/Table/table.stories.tsx index 9d15c114..4991180b 100644 --- a/src/dataDisplay/Table/table.stories.tsx +++ b/src/dataDisplay/Table/table.stories.tsx @@ -8,25 +8,25 @@ export default { component: Table, parameters: { componentSubtitle: - 'Used for tabular information. It allows sorting by a single column.' - } + 'Used for tabular information. It allows sorting by a single column.', + }, }; const headerCells = [ { id: 'col1', - label: 'col1' + label: 'col1', }, { id: 'col2', alignment: TableAlignment.right, - label: 'col2' + label: 'col2', }, { id: 'col3', alignment: TableAlignment.right, - label: 'col3' - } + label: 'col3', + }, ]; const rows = [ @@ -35,42 +35,44 @@ const rows = [ collapsibleContent:
content 1
, cells: [ { - content: + content: , }, { content: 1, - alignment: TableAlignment.right + alignment: TableAlignment.right, }, { content: 'safe', - alignment: TableAlignment.right - } - ] + alignment: TableAlignment.right, + }, + ], }, { id: '2', collapsibleContent:
content 2
, cells: [ { - content: + content: , }, { content: 2, - alignment: TableAlignment.right + alignment: TableAlignment.right, }, { content: 'gnosis', - alignment: TableAlignment.right - } - ] - } + alignment: TableAlignment.right, + }, + ], + }, ]; -export const table = () =>
; +export const SimpleTable = (): React.ReactElement => ( +
+); -export const withoutHeader = () =>
; +export const WithoutHeader = (): React.ReactElement =>
; -export const sortable = () => { +export const Sortable = (): React.ReactElement => { const [sortedByHeaderId, setSortedByHeaderId] = useState( 'col2' ); @@ -83,7 +85,7 @@ export const sortable = () => { return; } - let newDirection = + const newDirection = sortedByHeaderId === headerId && sortDirection === TableSortDirection.asc ? TableSortDirection.desc : TableSortDirection.asc; @@ -113,7 +115,7 @@ export const sortable = () => { ); }; -export const collapsible = () => { +export const Collapsible = (): React.ReactElement => { const [selectedRowIds, setSelectedRowIds] = useState>(new Set()); const onRowClick = (rowId: string) => { From 57c318757fe2541d527c99e470bc73305aa8eb5d Mon Sep 17 00:00:00 2001 From: nicosampler Date: Tue, 21 Jul 2020 11:30:38 -0300 Subject: [PATCH 21/28] run lint with --fix --- src/dataDisplay/Card/card.stories.tsx | 4 +- src/dataDisplay/Divider/divider.stories.tsx | 4 +- .../FixedDialog/FixedDialog.stories.tsx | 4 +- .../FixedIcon/fixedIcon.stories.tsx | 9 +-- .../FixedIcon/images/arrowReceived.tsx | 24 +++---- .../FixedIcon/images/arrowSent.tsx | 24 +++---- .../FixedIcon/images/arrowSort.tsx | 24 +++---- src/dataDisplay/FixedIcon/images/bullit.tsx | 24 +++---- .../FixedIcon/images/chevronDown.tsx | 24 +++---- .../FixedIcon/images/chevronLeft.tsx | 24 +++---- .../FixedIcon/images/chevronRight.tsx | 24 +++---- .../FixedIcon/images/chevronUp.tsx | 24 +++---- .../FixedIcon/images/connectedRinkeby.tsx | 22 +++---- .../FixedIcon/images/connectedWallet.tsx | 22 +++---- .../FixedIcon/images/creatingInProgress.tsx | 30 ++++----- .../FixedIcon/images/dropdownArrowSmall.tsx | 22 +++---- src/dataDisplay/FixedIcon/images/options.tsx | 24 +++---- src/dataDisplay/FixedIcon/images/plus.tsx | 24 +++---- .../FixedIcon/images/settingsChange.tsx | 24 +++---- .../FixedIcon/images/threeDots.tsx | 24 +++---- src/dataDisplay/FixedIcon/index.tsx | 3 +- src/dataDisplay/Icon/icon.stories.tsx | 6 +- src/dataDisplay/Icon/images/add.tsx | 2 +- src/dataDisplay/Icon/images/addressBook.tsx | 2 +- .../Icon/images/addressBookAdd.tsx | 2 +- src/dataDisplay/Icon/images/alert.tsx | 2 +- src/dataDisplay/Icon/images/allowances.tsx | 2 +- src/dataDisplay/Icon/images/apps.tsx | 2 +- src/dataDisplay/Icon/images/arrowDown.tsx | 2 +- src/dataDisplay/Icon/images/assets.tsx | 2 +- .../Icon/images/awaitingConfirmations.tsx | 2 +- src/dataDisplay/Icon/images/camera.tsx | 2 +- src/dataDisplay/Icon/images/chain.tsx | 2 +- src/dataDisplay/Icon/images/check.tsx | 2 +- src/dataDisplay/Icon/images/circleCheck.tsx | 2 +- src/dataDisplay/Icon/images/circleCross.tsx | 2 +- .../Icon/images/circleDropdown.tsx | 2 +- src/dataDisplay/Icon/images/code.tsx | 2 +- src/dataDisplay/Icon/images/collectibles.tsx | 2 +- src/dataDisplay/Icon/images/copy.tsx | 2 +- src/dataDisplay/Icon/images/cross.tsx | 2 +- src/dataDisplay/Icon/images/currency.tsx | 2 +- src/dataDisplay/Icon/images/delete.tsx | 2 +- .../Icon/images/devicePassword.tsx | 2 +- src/dataDisplay/Icon/images/edit.tsx | 2 +- src/dataDisplay/Icon/images/error.tsx | 2 +- src/dataDisplay/Icon/images/eth.tsx | 2 +- src/dataDisplay/Icon/images/externalLink.tsx | 2 +- src/dataDisplay/Icon/images/eye.tsx | 2 +- src/dataDisplay/Icon/images/eyeOff.tsx | 2 +- src/dataDisplay/Icon/images/filledCross.tsx | 2 +- src/dataDisplay/Icon/images/fingerPrint.tsx | 2 +- src/dataDisplay/Icon/images/getInTouch.tsx | 2 +- src/dataDisplay/Icon/images/home.tsx | 2 +- src/dataDisplay/Icon/images/info.tsx | 11 +++- src/dataDisplay/Icon/images/knowledge.tsx | 2 +- src/dataDisplay/Icon/images/licenses.tsx | 2 +- src/dataDisplay/Icon/images/loadSafe.tsx | 2 +- src/dataDisplay/Icon/images/locked.tsx | 2 +- src/dataDisplay/Icon/images/mobileConfirm.tsx | 2 +- src/dataDisplay/Icon/images/noInternet.tsx | 2 +- src/dataDisplay/Icon/images/owners.tsx | 2 +- src/dataDisplay/Icon/images/paste.tsx | 2 +- src/dataDisplay/Icon/images/paymentToken.tsx | 2 +- src/dataDisplay/Icon/images/privacyPolicy.tsx | 2 +- src/dataDisplay/Icon/images/qrCode.tsx | 2 +- src/dataDisplay/Icon/images/question.tsx | 2 +- src/dataDisplay/Icon/images/rateApp.tsx | 2 +- src/dataDisplay/Icon/images/received.tsx | 2 +- src/dataDisplay/Icon/images/recover.tsx | 2 +- src/dataDisplay/Icon/images/replaceOwner.tsx | 2 +- .../Icon/images/requiredConfirmations.tsx | 2 +- src/dataDisplay/Icon/images/restricted.tsx | 2 +- src/dataDisplay/Icon/images/resync.tsx | 2 +- src/dataDisplay/Icon/images/rocket.tsx | 2 +- src/dataDisplay/Icon/images/scan.tsx | 11 +++- src/dataDisplay/Icon/images/search.tsx | 2 +- src/dataDisplay/Icon/images/sendAgain.tsx | 2 +- src/dataDisplay/Icon/images/sent.tsx | 2 +- src/dataDisplay/Icon/images/serverError.tsx | 14 +++-- src/dataDisplay/Icon/images/settings.tsx | 2 +- .../Icon/images/settingsChange.tsx | 2 +- src/dataDisplay/Icon/images/settingsTool.tsx | 2 +- src/dataDisplay/Icon/images/share.tsx | 2 +- src/dataDisplay/Icon/images/termsOfUse.tsx | 2 +- .../Icon/images/transactionsInactive.tsx | 2 +- src/dataDisplay/Icon/images/unlocked.tsx | 2 +- src/dataDisplay/Icon/images/userEdit.tsx | 2 +- src/dataDisplay/Icon/images/wallet.tsx | 2 +- src/dataDisplay/Icon/index.tsx | 8 +-- src/dataDisplay/IconText/index.stories.tsx | 4 +- src/dataDisplay/IconText/index.tsx | 2 +- src/dataDisplay/Layout/index.tsx | 41 ++++++------ src/dataDisplay/Layout/layout.stories.tsx | 10 +-- src/dataDisplay/Section/index.tsx | 4 +- src/dataDisplay/Text/index.tsx | 6 +- src/dataDisplay/Text/text.stories.tsx | 4 +- src/dataDisplay/Title/title.stories.tsx | 4 +- src/feedback/Loader/loader.stories.tsx | 4 +- src/feedback/StatusDot/index.stories.tsx | 2 +- src/feedback/index.ts | 2 +- src/inputs/Button/button.stories.tsx | 4 +- src/inputs/Button/index.tsx | 8 +-- src/inputs/ButtonLink/buttonLink.stories.tsx | 4 +- src/inputs/ButtonLink/index.tsx | 4 +- src/inputs/Checkbox/checkbox.stories.tsx | 4 +- src/inputs/Checkbox/index.tsx | 3 +- src/inputs/RadioButtons/index.tsx | 2 +- src/inputs/Select/select.stories.tsx | 8 +-- src/inputs/Switch/switch.stories.tsx | 4 +- src/inputs/TextField/index.tsx | 4 +- src/inputs/TextField/textField.stories.tsx | 18 +++--- src/navigation/Menu/menu.stories.tsx | 4 +- src/navigation/Stepper/DotStep.tsx | 12 ++-- src/navigation/Stepper/stepper.stories.tsx | 20 +++--- src/navigation/Tab/index.tsx | 22 +++---- src/navigation/Tab/tab.stories.tsx | 8 +-- src/theme.ts | 62 +++++++++---------- src/typings/index.d.ts | 2 +- src/typings/styled-components.d.ts | 4 +- src/utils/Identicon/index.stories.tsx | 4 +- src/utils/index.ts | 2 +- .../GenericModal/genericModal.stories.tsx | 6 +- src/utils/modals/GenericModal/index.tsx | 10 +-- .../ManageListModal.stories.tsx | 12 ++-- src/utils/modals/ManageListModal/index.tsx | 4 +- src/utils/modals/utils.stories.tsx | 4 +- src/utils/modals/utils.tsx | 2 +- 128 files changed, 465 insertions(+), 445 deletions(-) diff --git a/src/dataDisplay/Card/card.stories.tsx b/src/dataDisplay/Card/card.stories.tsx index b77d8b6e..72bf766b 100644 --- a/src/dataDisplay/Card/card.stories.tsx +++ b/src/dataDisplay/Card/card.stories.tsx @@ -7,8 +7,8 @@ export default { title: 'Data Display/Card', component: Card, parameters: { - componentSubtitle: 'Useful to wrap content inside a styled container.' - } + componentSubtitle: 'Useful to wrap content inside a styled container.', + }, }; export const card = () => ( diff --git a/src/dataDisplay/Divider/divider.stories.tsx b/src/dataDisplay/Divider/divider.stories.tsx index aac78fd4..ad380ce0 100644 --- a/src/dataDisplay/Divider/divider.stories.tsx +++ b/src/dataDisplay/Divider/divider.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Data Display/Divider', component: Divider, parameters: { - componentSubtitle: 'Used to separate content.' - } + componentSubtitle: 'Used to separate content.', + }, }; export const section = () => ( diff --git a/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx b/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx index fe96227d..9e22f766 100644 --- a/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx +++ b/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx @@ -8,8 +8,8 @@ export default { parameters: { componentSubtitle: `It shows a Dialog, with a modal look and feels, but only being rendered inside a container instead of taking position absolute. - ` - } + `, + }, }; export const fixedDialog = () => ( diff --git a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx index 86dad44e..9e24a7dc 100644 --- a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx +++ b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx @@ -8,8 +8,8 @@ export default { component: FixedIcon, parameters: { componentSubtitle: `Components that renders an icon customized for Safe Multisig app, this icon is not - customizable by props. If you need generic purposes Icons, try Icon component.` - } + customizable by props. If you need generic purposes Icons, try Icon component.`, + }, }; export const icons = () => { @@ -51,9 +51,7 @@ export const icons = () => { 'chevronDown', 'settingsChange', 'creatingInProgress', - 'notOwner' - - + 'notOwner', ].map((type: any, index) => ( @@ -63,4 +61,3 @@ export const icons = () => { ); }; - diff --git a/src/dataDisplay/FixedIcon/images/arrowReceived.tsx b/src/dataDisplay/FixedIcon/images/arrowReceived.tsx index 426c7ea0..19e5ee26 100644 --- a/src/dataDisplay/FixedIcon/images/arrowReceived.tsx +++ b/src/dataDisplay/FixedIcon/images/arrowReceived.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/arrowSent.tsx b/src/dataDisplay/FixedIcon/images/arrowSent.tsx index 35652e8e..bfdf83ba 100644 --- a/src/dataDisplay/FixedIcon/images/arrowSent.tsx +++ b/src/dataDisplay/FixedIcon/images/arrowSent.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/arrowSort.tsx b/src/dataDisplay/FixedIcon/images/arrowSort.tsx index 1f8bc114..52a5e371 100644 --- a/src/dataDisplay/FixedIcon/images/arrowSort.tsx +++ b/src/dataDisplay/FixedIcon/images/arrowSort.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/bullit.tsx b/src/dataDisplay/FixedIcon/images/bullit.tsx index 7f487dc0..fa50f3f7 100644 --- a/src/dataDisplay/FixedIcon/images/bullit.tsx +++ b/src/dataDisplay/FixedIcon/images/bullit.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/chevronDown.tsx b/src/dataDisplay/FixedIcon/images/chevronDown.tsx index 8c0aa4f3..4ad8f8d1 100644 --- a/src/dataDisplay/FixedIcon/images/chevronDown.tsx +++ b/src/dataDisplay/FixedIcon/images/chevronDown.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/chevronLeft.tsx b/src/dataDisplay/FixedIcon/images/chevronLeft.tsx index 51d9e418..5dd9168b 100644 --- a/src/dataDisplay/FixedIcon/images/chevronLeft.tsx +++ b/src/dataDisplay/FixedIcon/images/chevronLeft.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/chevronRight.tsx b/src/dataDisplay/FixedIcon/images/chevronRight.tsx index 98731a23..5d2f868a 100644 --- a/src/dataDisplay/FixedIcon/images/chevronRight.tsx +++ b/src/dataDisplay/FixedIcon/images/chevronRight.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/chevronUp.tsx b/src/dataDisplay/FixedIcon/images/chevronUp.tsx index 3235d893..6122d200 100644 --- a/src/dataDisplay/FixedIcon/images/chevronUp.tsx +++ b/src/dataDisplay/FixedIcon/images/chevronUp.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - - ) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/connectedRinkeby.tsx b/src/dataDisplay/FixedIcon/images/connectedRinkeby.tsx index d62b726f..32471f9b 100644 --- a/src/dataDisplay/FixedIcon/images/connectedRinkeby.tsx +++ b/src/dataDisplay/FixedIcon/images/connectedRinkeby.tsx @@ -1,16 +1,16 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/connectedWallet.tsx b/src/dataDisplay/FixedIcon/images/connectedWallet.tsx index bec90f84..6c8c1ca3 100644 --- a/src/dataDisplay/FixedIcon/images/connectedWallet.tsx +++ b/src/dataDisplay/FixedIcon/images/connectedWallet.tsx @@ -1,16 +1,16 @@ import React from 'react'; const icon = ( - - - - ) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/creatingInProgress.tsx b/src/dataDisplay/FixedIcon/images/creatingInProgress.tsx index 7f656d40..19ff2035 100644 --- a/src/dataDisplay/FixedIcon/images/creatingInProgress.tsx +++ b/src/dataDisplay/FixedIcon/images/creatingInProgress.tsx @@ -1,20 +1,20 @@ import React from 'react'; const icon = ( - - - - - - -) + + + + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/dropdownArrowSmall.tsx b/src/dataDisplay/FixedIcon/images/dropdownArrowSmall.tsx index 6f9be316..19bde4e6 100644 --- a/src/dataDisplay/FixedIcon/images/dropdownArrowSmall.tsx +++ b/src/dataDisplay/FixedIcon/images/dropdownArrowSmall.tsx @@ -1,16 +1,16 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/options.tsx b/src/dataDisplay/FixedIcon/images/options.tsx index 1332e21d..532c6412 100644 --- a/src/dataDisplay/FixedIcon/images/options.tsx +++ b/src/dataDisplay/FixedIcon/images/options.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - - - - - -) + + + + + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/plus.tsx b/src/dataDisplay/FixedIcon/images/plus.tsx index e3477b92..4a7a73cf 100644 --- a/src/dataDisplay/FixedIcon/images/plus.tsx +++ b/src/dataDisplay/FixedIcon/images/plus.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/settingsChange.tsx b/src/dataDisplay/FixedIcon/images/settingsChange.tsx index 1cc3a811..24a5bece 100644 --- a/src/dataDisplay/FixedIcon/images/settingsChange.tsx +++ b/src/dataDisplay/FixedIcon/images/settingsChange.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/threeDots.tsx b/src/dataDisplay/FixedIcon/images/threeDots.tsx index a907c0dc..fdfd26dc 100644 --- a/src/dataDisplay/FixedIcon/images/threeDots.tsx +++ b/src/dataDisplay/FixedIcon/images/threeDots.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - - - - - -) + + + + + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/index.tsx b/src/dataDisplay/FixedIcon/index.tsx index 17cb521d..7c08600d 100644 --- a/src/dataDisplay/FixedIcon/index.tsx +++ b/src/dataDisplay/FixedIcon/index.tsx @@ -18,7 +18,6 @@ import settingsChange from './images/settingsChange'; import creatingInProgress from './images/creatingInProgress'; import notOwner from './images/notOwner'; - const icons = { arrowSort, connectedRinkeby, @@ -52,4 +51,4 @@ function FixedIcon({ type }: Props) { return {icons[type]}; } -export default FixedIcon; \ No newline at end of file +export default FixedIcon; diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx index 6c97dad8..b900f48f 100644 --- a/src/dataDisplay/Icon/icon.stories.tsx +++ b/src/dataDisplay/Icon/icon.stories.tsx @@ -8,8 +8,8 @@ export default { component: Icon, parameters: { componentSubtitle: - 'Icon component, you can select one of the set of icons we already have configured.' - } + 'Icon component, you can select one of the set of icons we already have configured.', + }, }; export const icons = () => { @@ -108,7 +108,7 @@ export const icons = () => { 'transactionsInactive', 'unlocked', 'userEdit', - 'wallet' + 'wallet', ].map((type: any, index) => ( diff --git a/src/dataDisplay/Icon/images/add.tsx b/src/dataDisplay/Icon/images/add.tsx index adce7474..7f4c07cf 100644 --- a/src/dataDisplay/Icon/images/add.tsx +++ b/src/dataDisplay/Icon/images/add.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/addressBook.tsx b/src/dataDisplay/Icon/images/addressBook.tsx index f1e90ebb..a8ca04a2 100644 --- a/src/dataDisplay/Icon/images/addressBook.tsx +++ b/src/dataDisplay/Icon/images/addressBook.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/addressBookAdd.tsx b/src/dataDisplay/Icon/images/addressBookAdd.tsx index e0a8f7e6..1806a32e 100644 --- a/src/dataDisplay/Icon/images/addressBookAdd.tsx +++ b/src/dataDisplay/Icon/images/addressBookAdd.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/alert.tsx b/src/dataDisplay/Icon/images/alert.tsx index e26f9bda..ecd0ca98 100644 --- a/src/dataDisplay/Icon/images/alert.tsx +++ b/src/dataDisplay/Icon/images/alert.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/allowances.tsx b/src/dataDisplay/Icon/images/allowances.tsx index 299f4825..2d5812fb 100644 --- a/src/dataDisplay/Icon/images/allowances.tsx +++ b/src/dataDisplay/Icon/images/allowances.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/apps.tsx b/src/dataDisplay/Icon/images/apps.tsx index 28a851f4..c3d5d9c5 100644 --- a/src/dataDisplay/Icon/images/apps.tsx +++ b/src/dataDisplay/Icon/images/apps.tsx @@ -44,5 +44,5 @@ export default { - ) + ), }; diff --git a/src/dataDisplay/Icon/images/arrowDown.tsx b/src/dataDisplay/Icon/images/arrowDown.tsx index b25f3051..d5720705 100644 --- a/src/dataDisplay/Icon/images/arrowDown.tsx +++ b/src/dataDisplay/Icon/images/arrowDown.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/assets.tsx b/src/dataDisplay/Icon/images/assets.tsx index 982be10e..749e96ba 100644 --- a/src/dataDisplay/Icon/images/assets.tsx +++ b/src/dataDisplay/Icon/images/assets.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/awaitingConfirmations.tsx b/src/dataDisplay/Icon/images/awaitingConfirmations.tsx index fc9bb7ef..b70ecdd2 100644 --- a/src/dataDisplay/Icon/images/awaitingConfirmations.tsx +++ b/src/dataDisplay/Icon/images/awaitingConfirmations.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/camera.tsx b/src/dataDisplay/Icon/images/camera.tsx index f73114a0..a1c5766e 100644 --- a/src/dataDisplay/Icon/images/camera.tsx +++ b/src/dataDisplay/Icon/images/camera.tsx @@ -41,5 +41,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/chain.tsx b/src/dataDisplay/Icon/images/chain.tsx index cd2119ce..a058610e 100644 --- a/src/dataDisplay/Icon/images/chain.tsx +++ b/src/dataDisplay/Icon/images/chain.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/check.tsx b/src/dataDisplay/Icon/images/check.tsx index 495cf105..a8151a14 100644 --- a/src/dataDisplay/Icon/images/check.tsx +++ b/src/dataDisplay/Icon/images/check.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/circleCheck.tsx b/src/dataDisplay/Icon/images/circleCheck.tsx index 5f33a2e9..83eb9ba1 100644 --- a/src/dataDisplay/Icon/images/circleCheck.tsx +++ b/src/dataDisplay/Icon/images/circleCheck.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/circleCross.tsx b/src/dataDisplay/Icon/images/circleCross.tsx index b0a58f5e..4b6442ce 100644 --- a/src/dataDisplay/Icon/images/circleCross.tsx +++ b/src/dataDisplay/Icon/images/circleCross.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/circleDropdown.tsx b/src/dataDisplay/Icon/images/circleDropdown.tsx index e32174b5..ac362730 100644 --- a/src/dataDisplay/Icon/images/circleDropdown.tsx +++ b/src/dataDisplay/Icon/images/circleDropdown.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/code.tsx b/src/dataDisplay/Icon/images/code.tsx index 63c99a12..2c20439e 100644 --- a/src/dataDisplay/Icon/images/code.tsx +++ b/src/dataDisplay/Icon/images/code.tsx @@ -31,5 +31,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/collectibles.tsx b/src/dataDisplay/Icon/images/collectibles.tsx index bf362eb4..26072e69 100644 --- a/src/dataDisplay/Icon/images/collectibles.tsx +++ b/src/dataDisplay/Icon/images/collectibles.tsx @@ -42,5 +42,5 @@ export default { - ) + ), }; diff --git a/src/dataDisplay/Icon/images/copy.tsx b/src/dataDisplay/Icon/images/copy.tsx index 3563173d..7fcfb458 100644 --- a/src/dataDisplay/Icon/images/copy.tsx +++ b/src/dataDisplay/Icon/images/copy.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/cross.tsx b/src/dataDisplay/Icon/images/cross.tsx index 64295c27..49a04252 100644 --- a/src/dataDisplay/Icon/images/cross.tsx +++ b/src/dataDisplay/Icon/images/cross.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/currency.tsx b/src/dataDisplay/Icon/images/currency.tsx index 06ea0cd9..56d2a830 100644 --- a/src/dataDisplay/Icon/images/currency.tsx +++ b/src/dataDisplay/Icon/images/currency.tsx @@ -34,5 +34,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/delete.tsx b/src/dataDisplay/Icon/images/delete.tsx index 37c6b79b..d13a6da9 100644 --- a/src/dataDisplay/Icon/images/delete.tsx +++ b/src/dataDisplay/Icon/images/delete.tsx @@ -34,5 +34,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/devicePassword.tsx b/src/dataDisplay/Icon/images/devicePassword.tsx index 36f5c4de..7e37242c 100644 --- a/src/dataDisplay/Icon/images/devicePassword.tsx +++ b/src/dataDisplay/Icon/images/devicePassword.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/edit.tsx b/src/dataDisplay/Icon/images/edit.tsx index 3d57be0b..47f3f94a 100644 --- a/src/dataDisplay/Icon/images/edit.tsx +++ b/src/dataDisplay/Icon/images/edit.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/error.tsx b/src/dataDisplay/Icon/images/error.tsx index c02ff88d..0dd76846 100644 --- a/src/dataDisplay/Icon/images/error.tsx +++ b/src/dataDisplay/Icon/images/error.tsx @@ -44,5 +44,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/eth.tsx b/src/dataDisplay/Icon/images/eth.tsx index bfccdb65..9512f4e8 100644 --- a/src/dataDisplay/Icon/images/eth.tsx +++ b/src/dataDisplay/Icon/images/eth.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/externalLink.tsx b/src/dataDisplay/Icon/images/externalLink.tsx index 5ccbd07b..d1f2492a 100644 --- a/src/dataDisplay/Icon/images/externalLink.tsx +++ b/src/dataDisplay/Icon/images/externalLink.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/eye.tsx b/src/dataDisplay/Icon/images/eye.tsx index 07c96c91..58a7c741 100644 --- a/src/dataDisplay/Icon/images/eye.tsx +++ b/src/dataDisplay/Icon/images/eye.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/eyeOff.tsx b/src/dataDisplay/Icon/images/eyeOff.tsx index 2435366d..bc8ab58a 100644 --- a/src/dataDisplay/Icon/images/eyeOff.tsx +++ b/src/dataDisplay/Icon/images/eyeOff.tsx @@ -34,5 +34,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/filledCross.tsx b/src/dataDisplay/Icon/images/filledCross.tsx index 3aa38aaf..f361f603 100644 --- a/src/dataDisplay/Icon/images/filledCross.tsx +++ b/src/dataDisplay/Icon/images/filledCross.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/fingerPrint.tsx b/src/dataDisplay/Icon/images/fingerPrint.tsx index cfca49d7..7195239e 100644 --- a/src/dataDisplay/Icon/images/fingerPrint.tsx +++ b/src/dataDisplay/Icon/images/fingerPrint.tsx @@ -50,5 +50,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/getInTouch.tsx b/src/dataDisplay/Icon/images/getInTouch.tsx index 0ad18fe9..468ead6f 100644 --- a/src/dataDisplay/Icon/images/getInTouch.tsx +++ b/src/dataDisplay/Icon/images/getInTouch.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/home.tsx b/src/dataDisplay/Icon/images/home.tsx index 26413300..029e2cfb 100644 --- a/src/dataDisplay/Icon/images/home.tsx +++ b/src/dataDisplay/Icon/images/home.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/info.tsx b/src/dataDisplay/Icon/images/info.tsx index ef1d6c8e..62180e49 100644 --- a/src/dataDisplay/Icon/images/info.tsx +++ b/src/dataDisplay/Icon/images/info.tsx @@ -31,7 +31,14 @@ export default { viewBox="0 0 24 24"> - + - ) + ), }; diff --git a/src/dataDisplay/Icon/images/knowledge.tsx b/src/dataDisplay/Icon/images/knowledge.tsx index c92930bf..676a9b89 100644 --- a/src/dataDisplay/Icon/images/knowledge.tsx +++ b/src/dataDisplay/Icon/images/knowledge.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/licenses.tsx b/src/dataDisplay/Icon/images/licenses.tsx index 676a0dd4..d0c78931 100644 --- a/src/dataDisplay/Icon/images/licenses.tsx +++ b/src/dataDisplay/Icon/images/licenses.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/loadSafe.tsx b/src/dataDisplay/Icon/images/loadSafe.tsx index af8fb4bc..54e9d904 100644 --- a/src/dataDisplay/Icon/images/loadSafe.tsx +++ b/src/dataDisplay/Icon/images/loadSafe.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/locked.tsx b/src/dataDisplay/Icon/images/locked.tsx index e65bd8bb..6b593150 100644 --- a/src/dataDisplay/Icon/images/locked.tsx +++ b/src/dataDisplay/Icon/images/locked.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/mobileConfirm.tsx b/src/dataDisplay/Icon/images/mobileConfirm.tsx index 3517fad9..c8e48317 100644 --- a/src/dataDisplay/Icon/images/mobileConfirm.tsx +++ b/src/dataDisplay/Icon/images/mobileConfirm.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/noInternet.tsx b/src/dataDisplay/Icon/images/noInternet.tsx index d574cc07..ab165541 100644 --- a/src/dataDisplay/Icon/images/noInternet.tsx +++ b/src/dataDisplay/Icon/images/noInternet.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/owners.tsx b/src/dataDisplay/Icon/images/owners.tsx index 4c034a49..96ac09fc 100644 --- a/src/dataDisplay/Icon/images/owners.tsx +++ b/src/dataDisplay/Icon/images/owners.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/paste.tsx b/src/dataDisplay/Icon/images/paste.tsx index 8b193430..5ad469a0 100644 --- a/src/dataDisplay/Icon/images/paste.tsx +++ b/src/dataDisplay/Icon/images/paste.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/paymentToken.tsx b/src/dataDisplay/Icon/images/paymentToken.tsx index 5c827b2f..d5c5882a 100644 --- a/src/dataDisplay/Icon/images/paymentToken.tsx +++ b/src/dataDisplay/Icon/images/paymentToken.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/privacyPolicy.tsx b/src/dataDisplay/Icon/images/privacyPolicy.tsx index c75cd60b..f5f93fbd 100644 --- a/src/dataDisplay/Icon/images/privacyPolicy.tsx +++ b/src/dataDisplay/Icon/images/privacyPolicy.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/qrCode.tsx b/src/dataDisplay/Icon/images/qrCode.tsx index 88a4379f..2948087d 100644 --- a/src/dataDisplay/Icon/images/qrCode.tsx +++ b/src/dataDisplay/Icon/images/qrCode.tsx @@ -82,5 +82,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/question.tsx b/src/dataDisplay/Icon/images/question.tsx index 92d9f51d..5f8e2f09 100644 --- a/src/dataDisplay/Icon/images/question.tsx +++ b/src/dataDisplay/Icon/images/question.tsx @@ -43,5 +43,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/rateApp.tsx b/src/dataDisplay/Icon/images/rateApp.tsx index 082410c2..3469ead3 100644 --- a/src/dataDisplay/Icon/images/rateApp.tsx +++ b/src/dataDisplay/Icon/images/rateApp.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/received.tsx b/src/dataDisplay/Icon/images/received.tsx index cc02dff3..a1e4783a 100644 --- a/src/dataDisplay/Icon/images/received.tsx +++ b/src/dataDisplay/Icon/images/received.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/recover.tsx b/src/dataDisplay/Icon/images/recover.tsx index 888d24c4..52ff33da 100644 --- a/src/dataDisplay/Icon/images/recover.tsx +++ b/src/dataDisplay/Icon/images/recover.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/replaceOwner.tsx b/src/dataDisplay/Icon/images/replaceOwner.tsx index 7cd19560..6a8ac1c1 100644 --- a/src/dataDisplay/Icon/images/replaceOwner.tsx +++ b/src/dataDisplay/Icon/images/replaceOwner.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/requiredConfirmations.tsx b/src/dataDisplay/Icon/images/requiredConfirmations.tsx index 0b2164c1..c4cef5a0 100644 --- a/src/dataDisplay/Icon/images/requiredConfirmations.tsx +++ b/src/dataDisplay/Icon/images/requiredConfirmations.tsx @@ -34,5 +34,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/restricted.tsx b/src/dataDisplay/Icon/images/restricted.tsx index b31f4cb5..96049bdf 100644 --- a/src/dataDisplay/Icon/images/restricted.tsx +++ b/src/dataDisplay/Icon/images/restricted.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/resync.tsx b/src/dataDisplay/Icon/images/resync.tsx index 13fdde23..61f4c598 100644 --- a/src/dataDisplay/Icon/images/resync.tsx +++ b/src/dataDisplay/Icon/images/resync.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/rocket.tsx b/src/dataDisplay/Icon/images/rocket.tsx index cc14cd89..8ce25758 100644 --- a/src/dataDisplay/Icon/images/rocket.tsx +++ b/src/dataDisplay/Icon/images/rocket.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/scan.tsx b/src/dataDisplay/Icon/images/scan.tsx index 655d10c2..5ed956e1 100644 --- a/src/dataDisplay/Icon/images/scan.tsx +++ b/src/dataDisplay/Icon/images/scan.tsx @@ -31,8 +31,15 @@ export default { fillRule="nonzero" d="M22 4v4c0 .552-.448 1-1 1s-1-.448-1-1V4h-4c-.552 0-1-.448-1-1s.448-1 1-1h4c1.105 0 2 .895 2 2zM4 4v4c0 .552-.448 1-1 1s-1-.448-1-1V4c0-1.105.895-2 2-2h4c.552 0 1 .448 1 1s-.448 1-1 1H4zM20 20v-4c0-.552.448-1 1-1s1 .448 1 1v4c0 1.105-.895 2-2 2h-4c-.552 0-1-.448-1-1s.448-1 1-1h4zM4 20h4c.552 0 1 .448 1 1s-.448 1-1 1H4c-1.105 0-2-.895-2-2v-4c0-.552.448-1 1-1s1 .448 1 1v4z" /> - + - ) + ), }; diff --git a/src/dataDisplay/Icon/images/search.tsx b/src/dataDisplay/Icon/images/search.tsx index 3b28d871..635edd84 100644 --- a/src/dataDisplay/Icon/images/search.tsx +++ b/src/dataDisplay/Icon/images/search.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/sendAgain.tsx b/src/dataDisplay/Icon/images/sendAgain.tsx index f5074f75..28830885 100644 --- a/src/dataDisplay/Icon/images/sendAgain.tsx +++ b/src/dataDisplay/Icon/images/sendAgain.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/sent.tsx b/src/dataDisplay/Icon/images/sent.tsx index 41f8c3e7..af16196d 100644 --- a/src/dataDisplay/Icon/images/sent.tsx +++ b/src/dataDisplay/Icon/images/sent.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/serverError.tsx b/src/dataDisplay/Icon/images/serverError.tsx index 365d6538..3593c258 100644 --- a/src/dataDisplay/Icon/images/serverError.tsx +++ b/src/dataDisplay/Icon/images/serverError.tsx @@ -11,10 +11,12 @@ export default { + d="M2 13h10v-2H2v2zm0-5.997h3.213c.21.74.567 1.418 1.043 1.996H2V7.003zm0-4h3.604c-.312.61-.515 1.282-.579 1.997H2V3.003zM14 5.5C14 7.43 12.43 9 10.5 9S7 7.43 7 5.5 8.57 2 10.5 2 14 3.57 14 5.5zm2 0C16 2.462 13.538 0 10.5 0 9.323 0 8.235.373 7.34 1.003H2c-1.105 0-2 .894-2 2v2c0 .365.106.703.277.998-.171.295-.277.633-.277 1v2c0 .365.106.703.277.998-.171.296-.277.634-.277 1v2c0 1.104.895 2 2 2h10c1.104 0 2-.896 2-2v-2c0-.366-.105-.704-.277-1 .013-.022.019-.049.031-.072C15.114 8.927 16 7.318 16 5.5z" + /> + d="M10.5 4.482l1.018-1.02c.281-.28.737-.28 1.018 0 .283.283.283.739 0 1.02L11.52 5.5l1.017 1.018c.281.28.281.737 0 1.019-.282.28-.738.28-1.019 0L10.5 6.518l-1.018 1.02c-.281.28-.738.28-1.018 0-.281-.282-.281-.738 0-1.02L9.48 5.502 8.462 4.48c-.281-.28-.281-.736 0-1.018.28-.281.737-.281 1.019 0L10.5 4.482z" + /> ), @@ -28,11 +30,13 @@ export default { + d="M17.99 18.996c0 .551-.448 1-1 1H4c-.552 0-1-.449-1-1v-2c0-.546.44-.988.983-.997l.017.002h12.99l.017-.002c.543.01.983.451.983.997v2zM3 11.001c0-.552.448-1 1-1h4.151c.318 1.565 1.13 2.948 2.258 3.995H4l-.017.001c-.543-.009-.983-.45-.983-.996v-2zm0-5.995c0-.552.448-1 1-1h5.506C8.66 5.134 8.124 6.506 8.026 8H4c-.552 0-1-.449-1-1V5.006zM21 8.5c0 3.032-2.467 5.5-5.5 5.5-3.032 0-5.5-2.468-5.5-5.5C10 5.467 12.468 3 15.5 3 18.533 3 21 5.467 21 8.5zm2 0C23 4.357 19.642 1 15.5 1c-1.364 0-2.639.37-3.74 1.006H4c-1.657 0-3 1.343-3 3V7c0 .772.3 1.47.78 2.001-.48.531-.78 1.228-.78 2.001v2c0 .77.3 1.466.776 1.997C1.3 15.53 1 16.225 1 16.996v2c0 1.656 1.343 3 3 3h12.99c1.657 0 3-1.344 3-3v-2c0-.768-.296-1.459-.77-1.989C21.475 13.714 23 11.287 23 8.5z" + /> + d="M15.5 7.086l1.414-1.414c.391-.391 1.024-.391 1.414 0 .391.391.391 1.023 0 1.414L16.914 8.5l1.414 1.414c.391.39.391 1.024 0 1.414-.39.391-1.023.391-1.414 0L15.5 9.914l-1.413 1.414c-.391.391-1.025.391-1.415 0-.391-.39-.391-1.024 0-1.414L14.086 8.5l-1.414-1.414c-.391-.391-.391-1.023 0-1.414.39-.391 1.024-.391 1.415 0L15.5 7.086z" + /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/settings.tsx b/src/dataDisplay/Icon/images/settings.tsx index 2a5ecf35..c128e880 100644 --- a/src/dataDisplay/Icon/images/settings.tsx +++ b/src/dataDisplay/Icon/images/settings.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/settingsChange.tsx b/src/dataDisplay/Icon/images/settingsChange.tsx index 22058335..892a79a3 100644 --- a/src/dataDisplay/Icon/images/settingsChange.tsx +++ b/src/dataDisplay/Icon/images/settingsChange.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/settingsTool.tsx b/src/dataDisplay/Icon/images/settingsTool.tsx index e124f17f..4acb8284 100644 --- a/src/dataDisplay/Icon/images/settingsTool.tsx +++ b/src/dataDisplay/Icon/images/settingsTool.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/share.tsx b/src/dataDisplay/Icon/images/share.tsx index abe3454d..1a25a687 100644 --- a/src/dataDisplay/Icon/images/share.tsx +++ b/src/dataDisplay/Icon/images/share.tsx @@ -31,5 +31,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/termsOfUse.tsx b/src/dataDisplay/Icon/images/termsOfUse.tsx index 4ce60f15..a6e15dd3 100644 --- a/src/dataDisplay/Icon/images/termsOfUse.tsx +++ b/src/dataDisplay/Icon/images/termsOfUse.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/transactionsInactive.tsx b/src/dataDisplay/Icon/images/transactionsInactive.tsx index 9544eb3e..0841ad81 100644 --- a/src/dataDisplay/Icon/images/transactionsInactive.tsx +++ b/src/dataDisplay/Icon/images/transactionsInactive.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/unlocked.tsx b/src/dataDisplay/Icon/images/unlocked.tsx index 50247af4..7a4b853a 100644 --- a/src/dataDisplay/Icon/images/unlocked.tsx +++ b/src/dataDisplay/Icon/images/unlocked.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/userEdit.tsx b/src/dataDisplay/Icon/images/userEdit.tsx index 655a2a2d..2de38503 100644 --- a/src/dataDisplay/Icon/images/userEdit.tsx +++ b/src/dataDisplay/Icon/images/userEdit.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/wallet.tsx b/src/dataDisplay/Icon/images/wallet.tsx index 990ac946..b2f82f78 100644 --- a/src/dataDisplay/Icon/images/wallet.tsx +++ b/src/dataDisplay/Icon/images/wallet.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx index acf85f99..3227c63d 100644 --- a/src/dataDisplay/Icon/index.tsx +++ b/src/dataDisplay/Icon/index.tsx @@ -86,8 +86,8 @@ const StyledTooltip = withStyles(() => ({ backgroundColor: theme.colors.overlay.color, border: `1px solid ${theme.colors.icon}`, boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`, - color: theme.colors.text - } + color: theme.colors.text, + }, }))(Tooltip); const icons = { @@ -157,7 +157,7 @@ const icons = { transactionsInactive, unlocked, userEdit, - wallet + wallet, }; export type IconType = typeof icons; @@ -179,7 +179,7 @@ function Icon({ size, color, tooltip, - className + className, }: Props): React.ReactElement { const IconElement = ( diff --git a/src/dataDisplay/IconText/index.stories.tsx b/src/dataDisplay/IconText/index.stories.tsx index 5e0860af..90e6aca1 100644 --- a/src/dataDisplay/IconText/index.stories.tsx +++ b/src/dataDisplay/IconText/index.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Data Display/Icon Text', component: IconText, parameters: { - componentSubtitle: 'IconText, It combines both Icon and Text component.' - } + componentSubtitle: 'IconText, It combines both Icon and Text component.', + }, }; //export const title = () => Title LG; diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx index 26cb76b2..16b6c26f 100644 --- a/src/dataDisplay/IconText/index.tsx +++ b/src/dataDisplay/IconText/index.tsx @@ -32,7 +32,7 @@ const IconText = ({ iconType, text, color, - className + className, }: Props): React.ReactElement => ( diff --git a/src/dataDisplay/Layout/index.tsx b/src/dataDisplay/Layout/index.tsx index b6be356d..bd259e7f 100644 --- a/src/dataDisplay/Layout/index.tsx +++ b/src/dataDisplay/Layout/index.tsx @@ -11,45 +11,44 @@ const Container = styled.div` grid-template-rows: 50px auto 60px; grid-gap: 10px; grid-template-areas: - "title title" - "navbar body" - "footer footer"; + 'title title' + 'navbar body' + 'footer footer'; - @media(max-width: 400px) { + @media (max-width: 400px) { grid-template-columns: 1fr; grid-template-rows: 50px auto 1fr; grid-template-areas: - "title" - "navbar" - "body" - "footer"; + 'title' + 'navbar' + 'body' + 'footer'; } `; const Title = styled.div` - background: rgb(137, 180, 206); - grid-area: title; + background: rgb(137, 180, 206); + grid-area: title; `; const Navbar = styled.div` - background: rgb(139, 131, 127); - grid-area: navbar; + background: rgb(139, 131, 127); + grid-area: navbar; `; const Body = styled.div` - background: rgb(193, 197, 197); - grid-area: body; + background: rgb(193, 197, 197); + grid-area: body; `; const Footer = styled.div` - background: rgb(158, 158, 158); - grid-area: footer; + background: rgb(158, 158, 158); + grid-area: footer; `; - const Layout = () => ( - Title - Navbar - Body -
footer
+ Title + Navbar + Body +
footer
 ); diff --git a/src/dataDisplay/Layout/layout.stories.tsx b/src/dataDisplay/Layout/layout.stories.tsx index 899c6bff..ca52d28f 100644 --- a/src/dataDisplay/Layout/layout.stories.tsx +++ b/src/dataDisplay/Layout/layout.stories.tsx @@ -1,13 +1,13 @@ -import React from "react"; +import React from 'react'; -import Layout from "./index"; +import Layout from './index'; export default { - title: "Data Display/Layout", + title: 'Data Display/Layout', component: Layout, parameters: { - componentSubtitle: "It provides a custom layout used in Safe Multisig" - } + componentSubtitle: 'It provides a custom layout used in Safe Multisig', + }, }; export const layout = () => ; diff --git a/src/dataDisplay/Section/index.tsx b/src/dataDisplay/Section/index.tsx index 915e7639..a21c27f4 100644 --- a/src/dataDisplay/Section/index.tsx +++ b/src/dataDisplay/Section/index.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import styled from "styled-components"; +import React from 'react'; +import styled from 'styled-components'; const StyledSection = styled.div` /* border: 1px solid #e8e7e6; diff --git a/src/dataDisplay/Text/index.tsx b/src/dataDisplay/Text/index.tsx index 17159645..fca3618e 100644 --- a/src/dataDisplay/Text/index.tsx +++ b/src/dataDisplay/Text/index.tsx @@ -33,12 +33,12 @@ const StyledTooltip = withStyles(() => ({ tooltip: { backgroundColor: theme.colors.white, color: theme.colors.text, - boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}` + boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}`, }, arrow: { color: theme.colors.white, - boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}` - } + boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}`, + }, }))(Tooltip); const Text = ({ children, tooltip, ...rest }: Props): React.ReactElement => { diff --git a/src/dataDisplay/Text/text.stories.tsx b/src/dataDisplay/Text/text.stories.tsx index a0e51db9..d1a6e06d 100644 --- a/src/dataDisplay/Text/text.stories.tsx +++ b/src/dataDisplay/Text/text.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Data Display/Text', component: Text, parameters: { - componentSubtitle: 'Text component, it allows several configurations' - } + componentSubtitle: 'Text component, it allows several configurations', + }, }; export const text = () => Some Text...; diff --git a/src/dataDisplay/Title/title.stories.tsx b/src/dataDisplay/Title/title.stories.tsx index 959edf1e..be149b77 100644 --- a/src/dataDisplay/Title/title.stories.tsx +++ b/src/dataDisplay/Title/title.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Data Display/Title', component: Title, parameters: { - componentSubtitle: 'Title Component.' - } + componentSubtitle: 'Title Component.', + }, }; export const title = () => Title LG; diff --git a/src/feedback/Loader/loader.stories.tsx b/src/feedback/Loader/loader.stories.tsx index 11a66b78..06108661 100644 --- a/src/feedback/Loader/loader.stories.tsx +++ b/src/feedback/Loader/loader.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Feedback/Loader', component: Loader, parameters: { - componentSubtitle: 'Loader component' - } + componentSubtitle: 'Loader component', + }, }; export const loader = () => ( diff --git a/src/feedback/StatusDot/index.stories.tsx b/src/feedback/StatusDot/index.stories.tsx index 3e81340a..dd851837 100644 --- a/src/feedback/StatusDot/index.stories.tsx +++ b/src/feedback/StatusDot/index.stories.tsx @@ -5,7 +5,7 @@ import StatusDot from './index'; export default { title: 'Feedback/StatusDot', component: StatusDot, - parameters: {} + parameters: {}, }; export const statusDot = () => ( diff --git a/src/feedback/index.ts b/src/feedback/index.ts index 84c801d8..1fa0f34e 100644 --- a/src/feedback/index.ts +++ b/src/feedback/index.ts @@ -1 +1 @@ -export { default as Loader } from './Loader' +export { default as Loader } from './Loader'; diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx index 6b638748..7bce9241 100644 --- a/src/inputs/Button/button.stories.tsx +++ b/src/inputs/Button/button.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Inputs/Button', component: Button, parameters: { - componentSubtitle: 'Button component with several variants' - } + componentSubtitle: 'Button component with several variants', + }, }; export const button = () => ( diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx index 9f96b5ec..b5a19134 100644 --- a/src/inputs/Button/index.tsx +++ b/src/inputs/Button/index.tsx @@ -39,15 +39,15 @@ const Button = ({ 'background-color': variant === 'contained' ? theme.colors[`${color}Hover` as HoverColor] - : theme.colors.white + : theme.colors.white, }, '&:disabled': { opacity: theme.colors.disabled.opacity, color: - variant === 'contained' ? theme.colors.white : theme.colors[color] - } - } + variant === 'contained' ? theme.colors.white : theme.colors[color], + }, + }, })(ButtonMUI); return ( diff --git a/src/inputs/ButtonLink/buttonLink.stories.tsx b/src/inputs/ButtonLink/buttonLink.stories.tsx index cf06e532..ceeb1e87 100644 --- a/src/inputs/ButtonLink/buttonLink.stories.tsx +++ b/src/inputs/ButtonLink/buttonLink.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'inputs/ButtonLink', component: ButtonLink, parameters: { - componentSubtitle: 'Button component as a Link.' - } + componentSubtitle: 'Button component as a Link.', + }, }; export const buttonLink = () => ( diff --git a/src/inputs/ButtonLink/index.tsx b/src/inputs/ButtonLink/index.tsx index 4ea29537..88726d32 100644 --- a/src/inputs/ButtonLink/index.tsx +++ b/src/inputs/ButtonLink/index.tsx @@ -9,7 +9,7 @@ export interface Props extends React.ComponentPropsWithoutRef<'button'> { iconType?: keyof IconType; color: keyof Theme['colors']; children: any; -}; +} const StyledButtonLink = styled.button` background: transparent; @@ -20,7 +20,7 @@ const StyledButtonLink = styled.button` font-family: inherit; display: flex; align-items: center; - + :focus { outline: none; } diff --git a/src/inputs/Checkbox/checkbox.stories.tsx b/src/inputs/Checkbox/checkbox.stories.tsx index 5fb2ecf2..464f39e5 100644 --- a/src/inputs/Checkbox/checkbox.stories.tsx +++ b/src/inputs/Checkbox/checkbox.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Inputs/Checkbox', component: Checkbox, parameters: { - componentSubtitle: 'Checkbox Input.' - } + componentSubtitle: 'Checkbox Input.', + }, }; export const checkbox = () => { diff --git a/src/inputs/Checkbox/index.tsx b/src/inputs/Checkbox/index.tsx index 2e72406e..0ad563b4 100644 --- a/src/inputs/Checkbox/index.tsx +++ b/src/inputs/Checkbox/index.tsx @@ -8,7 +8,6 @@ import styled from 'styled-components'; import theme from '../../theme'; - export interface Props { label: string; checked: boolean; @@ -27,7 +26,7 @@ const CustomCheckbox = withStyles({ '&$checked': { color: theme.colors.primary, }, - } + }, })((props: any) => ); const StyledFormHelperText = styled(FormHelperText)` diff --git a/src/inputs/RadioButtons/index.tsx b/src/inputs/RadioButtons/index.tsx index fc159717..cfa04120 100644 --- a/src/inputs/RadioButtons/index.tsx +++ b/src/inputs/RadioButtons/index.tsx @@ -30,7 +30,7 @@ const RadioButtons = ({ value={value} onChange={onChangeInternal} {...rest}> - {options.map(o => ( + {options.map((o) => ( { @@ -18,7 +18,7 @@ export const select = () => { { id: '1', label: 'DAI', subLabel: 'stablecoin', iconUrl: daiIcon }, { id: '2', label: 'GNO', iconUrl: gnoIcon }, { id: '2', label: 'BrokenImage', iconUrl: 'https://broken-image.test' }, - { id: '3', label: 'without icon' } + { id: '3', label: 'without icon' }, ]; const [activeItemId, setActiveItemId] = useState(''); @@ -28,7 +28,7 @@ export const select = () => { activeItemId={activeItemId} onItemClick={(id) => { setActiveItemId(id); - }} + }} fallbackImage={tokenPlaceholder} // image source or URL /> ); diff --git a/src/inputs/Switch/switch.stories.tsx b/src/inputs/Switch/switch.stories.tsx index b892327d..9b6c45e0 100644 --- a/src/inputs/Switch/switch.stories.tsx +++ b/src/inputs/Switch/switch.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Inputs/Switch', component: Switch, parameters: { - componentSubtitle: 'Switch input component.' - } + componentSubtitle: 'Switch input component.', + }, }; export const switchInput = () => { diff --git a/src/inputs/TextField/index.tsx b/src/inputs/TextField/index.tsx index 30148b66..a87d49d6 100644 --- a/src/inputs/TextField/index.tsx +++ b/src/inputs/TextField/index.tsx @@ -63,10 +63,10 @@ function TextField({ ) : null, endAdornment: endAdornment ? ( {endAdornment} - ) : null + ) : null, }, disabled: readOnly, - readOnly: readOnly + readOnly: readOnly, }; if (input) { diff --git a/src/inputs/TextField/textField.stories.tsx b/src/inputs/TextField/textField.stories.tsx index ef346820..77bfbe9a 100644 --- a/src/inputs/TextField/textField.stories.tsx +++ b/src/inputs/TextField/textField.stories.tsx @@ -7,8 +7,8 @@ export default { title: 'Inputs/TextField', component: TextField, parameters: { - componentSubtitle: 'Text field input with several variants' - } + componentSubtitle: 'Text field input with several variants', + }, }; const onSubmit = (e: React.FormEvent) => e.preventDefault(); @@ -59,14 +59,16 @@ export const readOnly = () => { export const startAdornment = () => { const [value, setValue] = useState(''); - const adornment = ; + const adornment = ; return (
) => setValue(e.target.value)} + onChange={(e: React.ChangeEvent) => + setValue(e.target.value) + } startAdornment={adornment} /> @@ -75,16 +77,18 @@ export const startAdornment = () => { export const endAdornment = () => { const [value, setValue] = useState(''); - const adornment = ; + const adornment = ; return (
) => setValue(e.target.value)} + onChange={(e: React.ChangeEvent) => + setValue(e.target.value) + } endAdornment={adornment} /> ); -}; \ No newline at end of file +}; diff --git a/src/navigation/Menu/menu.stories.tsx b/src/navigation/Menu/menu.stories.tsx index ebb1e4a5..622b82e1 100644 --- a/src/navigation/Menu/menu.stories.tsx +++ b/src/navigation/Menu/menu.stories.tsx @@ -7,8 +7,8 @@ export default { title: 'navigation/Menu', component: Menu, parameters: { - componentSubtitle: 'Menu component used in Safe Multisig.' - } + componentSubtitle: 'Menu component used in Safe Multisig.', + }, }; export const loader = () => ( diff --git a/src/navigation/Stepper/DotStep.tsx b/src/navigation/Stepper/DotStep.tsx index e897c211..63f48caa 100644 --- a/src/navigation/Stepper/DotStep.tsx +++ b/src/navigation/Stepper/DotStep.tsx @@ -1,7 +1,7 @@ -import React from "react"; -import styled from "styled-components"; +import React from 'react'; +import styled from 'styled-components'; -import { Icon } from "../../index"; +import { Icon } from '../../index'; const Circle = styled.div<{ disabled: boolean; error?: boolean }>` background-color: ${({ disabled, error, theme }) => { @@ -35,7 +35,11 @@ type Props = { const DotStep = ({ currentIndex, dotIndex, error }: Props) => { return ( currentIndex} error={error}> - {dotIndex < currentIndex ? : dotIndex + 1} + {dotIndex < currentIndex ? ( + + ) : ( + dotIndex + 1 + )} ); }; diff --git a/src/navigation/Stepper/stepper.stories.tsx b/src/navigation/Stepper/stepper.stories.tsx index 6ed09d11..535a4c65 100644 --- a/src/navigation/Stepper/stepper.stories.tsx +++ b/src/navigation/Stepper/stepper.stories.tsx @@ -1,21 +1,21 @@ -import React from "react"; +import React from 'react'; -import Stepper from "./index"; +import Stepper from './index'; export default { - title: "Navigation/Stepper", + title: 'Navigation/Stepper', component: Stepper, parameters: { - componentSubtitle: "Stepper component used in Safe Multisig." - } + componentSubtitle: 'Stepper component used in Safe Multisig.', + }, }; const steps = [ - { id: "1", label: "Transaction submitted" }, - { id: "2", label: "Validating transaction" }, - { id: "3", label: "Deploying smart contract" }, - { id: "4", label: "Generating your Safe" }, - { id: "5", label: "Result" } + { id: '1', label: 'Transaction submitted' }, + { id: '2', label: 'Validating transaction' }, + { id: '3', label: 'Deploying smart contract' }, + { id: '4', label: 'Generating your Safe' }, + { id: '5', label: 'Result' }, ]; export const stepper = () => ( diff --git a/src/navigation/Tab/index.tsx b/src/navigation/Tab/index.tsx index 5e0b9d3b..4988bc79 100644 --- a/src/navigation/Tab/index.tsx +++ b/src/navigation/Tab/index.tsx @@ -51,25 +51,25 @@ const CustomTabs = ({ variantStyle, ...rest }: CustomTabsProps) => { '& .MuiTabs-indicator': { backgroundColor: - variantStyle === 'outlined' ? theme.colors.primary : 'transparent' + variantStyle === 'outlined' ? theme.colors.primary : 'transparent', }, '& .MuiTab-wrapper svg': { - marginTop: '4px' + marginTop: '4px', }, '& .MuiTab-root.Mui-selected': { backgroundColor: variantStyle === 'contained' ? theme.colors.inputField - : theme.colors.white + : theme.colors.white, }, '& .MuiTab-textColorInherit.Mui-selected p': { color: theme.colors.primary, - fontWeight: '700' + fontWeight: '700', }, '& .MuiTabs-root.MuiTabs-vertical p': { - textAlign: 'left' - } - } + textAlign: 'left', + }, + }, })(TabsMui); return ; @@ -93,10 +93,10 @@ const CustomTab = ({ variantStyle, ...rest }: CustomTabProps) => { ? '1px solid' + theme.colors.separator : 'inherit', '& .MuiTabs-indicator': { - backgroundColor: variantStyle === 'contained' ? 'none' : 'inherit' + backgroundColor: variantStyle === 'contained' ? 'none' : 'inherit', }, - textTransform: variantStyle === 'contained' ? 'capitalize' : 'uppercase' - } + textTransform: variantStyle === 'contained' ? 'capitalize' : 'uppercase', + }, })(TabMui); return ; @@ -107,7 +107,7 @@ const Tab = ({ items, selectedTab, variant = 'outlined', - fullWidth + fullWidth, }: Props): JSX.Element => { const handleChange = (_event: React.ChangeEvent<{}>, value: string): void => { onChange(value); diff --git a/src/navigation/Tab/tab.stories.tsx b/src/navigation/Tab/tab.stories.tsx index 8d4777a3..d4ac67b8 100644 --- a/src/navigation/Tab/tab.stories.tsx +++ b/src/navigation/Tab/tab.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Navigation/Tab', component: Tab, parameters: { - componentSubtitle: 'Tab component used in Safe Multisig.' - } + componentSubtitle: 'Tab component used in Safe Multisig.', + }, }; const items: Item[] = [ @@ -15,7 +15,7 @@ const items: Item[] = [ { id: '2', label: 'Transactions', icon: 'transactionsInactive' }, { id: '3', label: 'Apps', icon: 'apps' }, { id: '4', label: 'Address Book', icon: 'addressBook', disabled: true }, - { id: '5', label: 'Settings', customContent:
custom
} + { id: '5', label: 'Settings', customContent:
custom
}, ]; export const tab = () => { @@ -65,4 +65,4 @@ export const tabContainedFull = () => { {selected} ); -}; \ No newline at end of file +}; diff --git a/src/theme.ts b/src/theme.ts index bbc6486e..79446b4a 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -2,8 +2,8 @@ const theme = { buttons: { size: { md: { height: '36px', padding: '0 16px' }, - lg: { height: '52px', padding: '0 25px' } - } + lg: { height: '52px', padding: '0 25px' }, + }, }, colors: { primary: '#008C73', @@ -30,99 +30,99 @@ const theme = { white: '#ffffff', disabled: { - opacity: 0.5 + opacity: 0.5, }, overlay: { opacity: 0.75, - color: '#E8E7E6' + color: '#E8E7E6', }, shadow: { blur: '18px', opacity: 0.75, - color: '#28363D' - } + color: '#28363D', + }, }, statusDot: { size: { sm: '5px', - md: '10px' - } + md: '10px', + }, }, fonts: { fontFamily: `'Averta', 'Roboto', 'Helvetica Neue', 'Arial', 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', '-apple-system', 'BlinkMacSystemFont', sans-serif`, - fontFamilyCode: `source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace` + fontFamilyCode: `source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace`, }, icons: { size: { sm: '16', - md: '24' - } + md: '24', + }, }, iconText: { size: { sm: null, - md: null - } + md: null, + }, }, identicon: { size: { sm: '16px', md: '32px', - lg: '60px' - } + lg: '60px', + }, }, loader: { size: { xs: '10px', sm: '30px', md: '50px', - lg: '70px' - } + lg: '70px', + }, }, text: { size: { sm: { fontSize: '11px', - lineHeight: '14px' + lineHeight: '14px', }, md: { fontSize: '12px', - lineHeight: '16px' + lineHeight: '16px', }, lg: { fontSize: '14px', - lineHeight: '20px' + lineHeight: '20px', }, xl: { fontSize: '16px', - lineHeight: '22px' - } - } + lineHeight: '22px', + }, + }, }, title: { size: { xs: { fontSize: '20px', - lineHeight: '26px' + lineHeight: '26px', }, sm: { fontSize: '24px', - lineHeight: '30px' + lineHeight: '30px', }, md: { fontSize: '32px', - lineHeight: '36px' + lineHeight: '36px', }, lg: { fontSize: '44px', - lineHeight: '52px' + lineHeight: '52px', }, xl: { fontSize: '60px', - lineHeight: '64px' - } - } - } + lineHeight: '64px', + }, + }, + }, }; export type Theme = typeof theme; diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 9d85b1f8..1f17fc28 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -1,4 +1,4 @@ -declare module "*.png" +declare module '*.png'; declare module '*.svg' { import React = require('react'); diff --git a/src/typings/styled-components.d.ts b/src/typings/styled-components.d.ts index a1c6e39f..fb701e24 100644 --- a/src/typings/styled-components.d.ts +++ b/src/typings/styled-components.d.ts @@ -1,7 +1,7 @@ -import 'styled-components' +import 'styled-components'; import { Theme } from '../theme'; -declare module "styled-components" { +declare module 'styled-components' { export interface DefaultTheme extends Theme {} } diff --git a/src/utils/Identicon/index.stories.tsx b/src/utils/Identicon/index.stories.tsx index 44ff269a..fce1b75e 100644 --- a/src/utils/Identicon/index.stories.tsx +++ b/src/utils/Identicon/index.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Utils/Identicon', component: Identicon, parameters: { - componentSubtitle: 'Identicon Component.' - } + componentSubtitle: 'Identicon Component.', + }, }; export const sizes = () => { diff --git a/src/utils/index.ts b/src/utils/index.ts index 12d1530e..cfcbcc08 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,2 +1,2 @@ export { default as Identicon } from './Identicon'; -export * from './modals' \ No newline at end of file +export * from './modals'; diff --git a/src/utils/modals/GenericModal/genericModal.stories.tsx b/src/utils/modals/GenericModal/genericModal.stories.tsx index a9bd0e03..3b524267 100644 --- a/src/utils/modals/GenericModal/genericModal.stories.tsx +++ b/src/utils/modals/GenericModal/genericModal.stories.tsx @@ -7,8 +7,8 @@ export default { title: 'Utils/Modals/Generic', component: GenericModal, parameters: { - componentSubtitle: 'A generic modal with custom Title, Body and Footer' - } + componentSubtitle: 'A generic modal with custom Title, Body and Footer', + }, }; export const modal = () => { @@ -22,7 +22,7 @@ export const modal = () => { setIsOpen(false)} title="This is the title" - body={
This is the body
} + body={
This is the body
} footer={
This is the footer
} /> )} diff --git a/src/utils/modals/GenericModal/index.tsx b/src/utils/modals/GenericModal/index.tsx index 11c35bba..63ecded3 100644 --- a/src/utils/modals/GenericModal/index.tsx +++ b/src/utils/modals/GenericModal/index.tsx @@ -66,7 +66,7 @@ const useStyles = makeStyles({ alignItems: 'center', justifyContent: 'center', overflowY: 'scroll', - background: rgba(theme.colors.overlay.color, theme.colors.overlay.opacity) + background: rgba(theme.colors.overlay.color, theme.colors.overlay.opacity), }, paper: { @@ -82,9 +82,9 @@ const useStyles = makeStyles({ boxShadow: `0 0 ${theme.colors.shadow.opacity} 0 ${theme.colors.shadow.color}`, '&:focus': { - outline: 'none' - } - } + outline: 'none', + }, + }, }); const GenericModal = ({ @@ -93,7 +93,7 @@ const GenericModal = ({ onClose, title, withoutBodyPadding, - smallHeight + smallHeight, }: GenericModalProps & { smallHeight: boolean }) => { const classes = useStyles({ smallHeight }); console.log('smallHeight: ', smallHeight); diff --git a/src/utils/modals/ManageListModal/ManageListModal.stories.tsx b/src/utils/modals/ManageListModal/ManageListModal.stories.tsx index 33f90496..3e02f4c6 100644 --- a/src/utils/modals/ManageListModal/ManageListModal.stories.tsx +++ b/src/utils/modals/ManageListModal/ManageListModal.stories.tsx @@ -8,8 +8,8 @@ export default { component: ManageListModal, parameters: { componentSubtitle: - 'A Modal to Manage a list by enabling/disabled list items' - } + 'A Modal to Manage a list by enabling/disabled list items', + }, }; export const modal = () => { @@ -20,14 +20,14 @@ export const modal = () => { iconUrl: 'someUrl', name: 'one', description: 'Lorem Ipsum has been the industry', - checked: true + checked: true, }, { id: '2', iconUrl: 'someUrl2', name: 'two', description: 'unknown printer took a galley of type', - checked: true + checked: true, }, { id: '3', @@ -35,8 +35,8 @@ export const modal = () => { name: 'three', description: 'Long desc ever since the 1500s do not finish over the ocean of this', - checked: true - } + checked: true, + }, ]); const onItemToggle = (itemId: string | number, checked: boolean) => { diff --git a/src/utils/modals/ManageListModal/index.tsx b/src/utils/modals/ManageListModal/index.tsx index c00b0caa..6c2e3446 100644 --- a/src/utils/modals/ManageListModal/index.tsx +++ b/src/utils/modals/ManageListModal/index.tsx @@ -7,7 +7,7 @@ import { Text, Button, Switch, - ModalFooterConfirmation + ModalFooterConfirmation, } from '../../../index'; const SearchInput = styled.input` @@ -103,7 +103,7 @@ const ManageList = ({ isSubmitFormDisabled = false, onSubmitForm, onItemToggle, - onClose + onClose, }: Props): JSX.Element => { const [search, setSearch] = useState(''); const [isFormMode, setIsFormMode] = useState(false); diff --git a/src/utils/modals/utils.stories.tsx b/src/utils/modals/utils.stories.tsx index 96751529..5b1a95f7 100644 --- a/src/utils/modals/utils.stories.tsx +++ b/src/utils/modals/utils.stories.tsx @@ -6,8 +6,8 @@ export default { title: 'Utils/Modals/utils/FooterConfirmation', component: ModalFooterConfirmation, parameters: { - componentSubtitle: 'A generic confirmation footer for modals' - } + componentSubtitle: 'A generic confirmation footer for modals', + }, }; export const modalFooter = () => { diff --git a/src/utils/modals/utils.tsx b/src/utils/modals/utils.tsx index 2515b26c..88d693b9 100644 --- a/src/utils/modals/utils.tsx +++ b/src/utils/modals/utils.tsx @@ -21,7 +21,7 @@ export const ModalFooterConfirmation = ({ handleCancel, okDisabled, handleOk, - okText = 'Confirm' + okText = 'Confirm', }: Props) => { return ( From 5212fa6a9ca33aeba2080d03eb46f7fc1daaf19f Mon Sep 17 00:00:00 2001 From: nicosampler Date: Tue, 21 Jul 2020 12:11:09 -0300 Subject: [PATCH 22/28] more lint fixes --- src/dataDisplay/Card/index.tsx | 12 ++++++++++-- src/dataDisplay/Divider/divider.stories.tsx | 2 +- src/dataDisplay/Divider/index.tsx | 12 ++++++++++-- src/dataDisplay/FixedDialog/FixedDialog.stories.tsx | 6 +++--- src/inputs/Checkbox/checkbox.stories.tsx | 4 ++-- src/inputs/Select/select.stories.tsx | 2 +- src/inputs/Switch/switch.stories.tsx | 2 +- src/inputs/TextField/index.tsx | 2 +- src/inputs/TextField/textField.stories.tsx | 10 +++++----- src/navigation/Menu/menu.stories.tsx | 2 +- src/navigation/Stepper/DotStep.tsx | 6 +++++- src/navigation/Stepper/index.tsx | 7 ++++++- src/navigation/Stepper/stepper.stories.tsx | 6 +++--- src/navigation/Tab/index.tsx | 5 ++++- src/navigation/Tab/tab.stories.tsx | 6 +++--- src/typings/styled-components.d.ts | 2 +- src/utils/Identicon/index.stories.tsx | 2 +- src/utils/Identicon/index.tsx | 6 +++++- .../modals/GenericModal/genericModal.stories.tsx | 2 +- src/utils/modals/GenericModal/index.tsx | 4 ++-- .../ManageListModal/ManageListModal.stories.tsx | 4 ++-- src/utils/modals/utils.stories.tsx | 12 ++++++------ src/utils/modals/utils.tsx | 2 +- 23 files changed, 75 insertions(+), 43 deletions(-) diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx index be470af1..c5ba7162 100644 --- a/src/dataDisplay/Card/index.tsx +++ b/src/dataDisplay/Card/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { rgba } from 'polished'; -const Card = styled.div` +const StyledCard = styled.div` box-shadow: 1px 2px 10px 0 ${({ theme }) => rgba(theme.colors.shadow.color, 0.08)}; border-radius: 8px; @@ -10,4 +10,12 @@ const Card = styled.div` background-color: ${({ theme }) => theme.colors.white}; `; -export default ({ ...args }) => ; +type Props = { + className?: string; +}; + +const Card = ({ className }: Props): React.ReactElement => ( + +); + +export default Card; diff --git a/src/dataDisplay/Divider/divider.stories.tsx b/src/dataDisplay/Divider/divider.stories.tsx index ad380ce0..3fe6d54c 100644 --- a/src/dataDisplay/Divider/divider.stories.tsx +++ b/src/dataDisplay/Divider/divider.stories.tsx @@ -10,7 +10,7 @@ export default { }, }; -export const section = () => ( +export const Section = (): React.ReactElement => ( <>
Some content
diff --git a/src/dataDisplay/Divider/index.tsx b/src/dataDisplay/Divider/index.tsx index d2bb56fe..84ee31c8 100644 --- a/src/dataDisplay/Divider/index.tsx +++ b/src/dataDisplay/Divider/index.tsx @@ -1,9 +1,17 @@ import React from 'react'; import styled from 'styled-components'; -const Divider = styled.div` +const StyledDivider = styled.div` border-top: 2px solid ${({ theme }) => theme.colors.separator}; margin: 16px 0; `; -export default ({ ...args }) => ; +type Props = { + className?: string; +}; + +const Divider = ({ className }: Props): React.ReactElement => ( + +); + +export default Divider; diff --git a/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx b/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx index 9e22f766..591daae4 100644 --- a/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx +++ b/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx @@ -12,11 +12,11 @@ export default { }, }; -export const fixedDialog = () => ( +export const SimpleFixedDialog = (): React.ReactElement => ( Some Body} - onCancel={() => {}} - onConfirm={() => {}} + onCancel={() => undefined} + onConfirm={() => undefined} /> ); diff --git a/src/inputs/Checkbox/checkbox.stories.tsx b/src/inputs/Checkbox/checkbox.stories.tsx index 464f39e5..8221bf3c 100644 --- a/src/inputs/Checkbox/checkbox.stories.tsx +++ b/src/inputs/Checkbox/checkbox.stories.tsx @@ -10,7 +10,7 @@ export default { }, }; -export const checkbox = () => { +export const SimpleCheckbox = (): React.ReactElement => { const [enabled, setEnabled] = useState(true); return ( { ); }; -export const error = () => { +export const WithError = (): React.ReactElement => { const [enabled, setEnabled] = useState(false); return ( { +export const SimpleSelect = (): React.ReactElement => { const items: Array = [ { id: '1', label: 'DAI', subLabel: 'stablecoin', iconUrl: daiIcon }, { id: '2', label: 'GNO', iconUrl: gnoIcon }, diff --git a/src/inputs/Switch/switch.stories.tsx b/src/inputs/Switch/switch.stories.tsx index 9b6c45e0..4e2aae44 100644 --- a/src/inputs/Switch/switch.stories.tsx +++ b/src/inputs/Switch/switch.stories.tsx @@ -10,7 +10,7 @@ export default { }, }; -export const switchInput = () => { +export const SwitchInput = (): React.ReactElement => { const [enabled, setEnabled] = useState(true); return ; }; diff --git a/src/inputs/TextField/index.tsx b/src/inputs/TextField/index.tsx index a87d49d6..9c42548f 100644 --- a/src/inputs/TextField/index.tsx +++ b/src/inputs/TextField/index.tsx @@ -51,7 +51,7 @@ function TextField({ endAdornment, className, ...rest -}: Props) { +}: Props): React.ReactElement { const customProps = { error: meta && !!meta.error, label: (meta && meta.error) || label, diff --git a/src/inputs/TextField/textField.stories.tsx b/src/inputs/TextField/textField.stories.tsx index 77bfbe9a..be7afb03 100644 --- a/src/inputs/TextField/textField.stories.tsx +++ b/src/inputs/TextField/textField.stories.tsx @@ -13,7 +13,7 @@ export default { const onSubmit = (e: React.FormEvent) => e.preventDefault(); -export const textField = () => { +export const SimpleTextField = (): React.ReactElement => { const [value, setValue] = useState(''); return (
@@ -27,7 +27,7 @@ export const textField = () => { ); }; -export const error = () => { +export const Error = (): React.ReactElement => { const [value, setValue] = useState('some incorrect value'); return ( @@ -42,7 +42,7 @@ export const error = () => { ); }; -export const readOnly = () => { +export const ReadOnly = (): React.ReactElement => { const [value, setValue] = useState('some value readOnly'); return ( @@ -57,7 +57,7 @@ export const readOnly = () => { ); }; -export const startAdornment = () => { +export const StartAdornment = (): React.ReactElement => { const [value, setValue] = useState(''); const adornment = ; return ( @@ -75,7 +75,7 @@ export const startAdornment = () => { ); }; -export const endAdornment = () => { +export const EndAdornment = (): React.ReactElement => { const [value, setValue] = useState(''); const adornment = ; return ( diff --git a/src/navigation/Menu/menu.stories.tsx b/src/navigation/Menu/menu.stories.tsx index 622b82e1..eb7b9175 100644 --- a/src/navigation/Menu/menu.stories.tsx +++ b/src/navigation/Menu/menu.stories.tsx @@ -11,7 +11,7 @@ export default { }, }; -export const loader = () => ( +export const Loader = (): React.ReactElement => ( Item 1 diff --git a/src/navigation/Stepper/DotStep.tsx b/src/navigation/Stepper/DotStep.tsx index 63f48caa..8c6992f8 100644 --- a/src/navigation/Stepper/DotStep.tsx +++ b/src/navigation/Stepper/DotStep.tsx @@ -32,7 +32,11 @@ type Props = { currentIndex: number; error?: boolean; }; -const DotStep = ({ currentIndex, dotIndex, error }: Props) => { +const DotStep = ({ + currentIndex, + dotIndex, + error, +}: Props): React.ReactElement => { return ( currentIndex} error={error}> {dotIndex < currentIndex ? ( diff --git a/src/navigation/Stepper/index.tsx b/src/navigation/Stepper/index.tsx index e6de6707..97aa6ae5 100644 --- a/src/navigation/Stepper/index.tsx +++ b/src/navigation/Stepper/index.tsx @@ -33,7 +33,12 @@ type Props = { orientation: 'vertical' | 'horizontal'; }; -const Stepper = ({ steps, error, activeStepIndex, orientation }: Props) => { +const Stepper = ({ + steps, + error, + activeStepIndex, + orientation, +}: Props): React.ReactElement => { return ( {steps.map((s, index) => { diff --git a/src/navigation/Stepper/stepper.stories.tsx b/src/navigation/Stepper/stepper.stories.tsx index 535a4c65..9ba51a0d 100644 --- a/src/navigation/Stepper/stepper.stories.tsx +++ b/src/navigation/Stepper/stepper.stories.tsx @@ -18,14 +18,14 @@ const steps = [ { id: '5', label: 'Result' }, ]; -export const stepper = () => ( +export const stepper = (): React.ReactElement => ( ); -export const stepWithError = () => ( +export const stepWithError = (): React.ReactElement => ( ); -export const orientationHorizontal = () => ( +export const orientationHorizontal = (): React.ReactElement => ( ); diff --git a/src/navigation/Tab/index.tsx b/src/navigation/Tab/index.tsx index 4988bc79..d5891482 100644 --- a/src/navigation/Tab/index.tsx +++ b/src/navigation/Tab/index.tsx @@ -109,7 +109,10 @@ const Tab = ({ variant = 'outlined', fullWidth, }: Props): JSX.Element => { - const handleChange = (_event: React.ChangeEvent<{}>, value: string): void => { + const handleChange = ( + _event: React.ChangeEvent, + value: string + ): void => { onChange(value); }; diff --git a/src/navigation/Tab/tab.stories.tsx b/src/navigation/Tab/tab.stories.tsx index d4ac67b8..a97d482c 100644 --- a/src/navigation/Tab/tab.stories.tsx +++ b/src/navigation/Tab/tab.stories.tsx @@ -18,7 +18,7 @@ const items: Item[] = [ { id: '5', label: 'Settings', customContent:
custom
}, ]; -export const tab = () => { +export const SimpleTab = (): React.ReactElement => { const [selected, setSelected] = useState('3'); return ( @@ -34,7 +34,7 @@ export const tab = () => { ); }; -export const tabContained = () => { +export const TabContained = (): React.ReactElement => { const [selected, setSelected] = useState('3'); return ( @@ -50,7 +50,7 @@ export const tabContained = () => { ); }; -export const tabContainedFull = () => { +export const TabContainedFull = (): React.ReactElement => { const [selected, setSelected] = useState('3'); return ( diff --git a/src/typings/styled-components.d.ts b/src/typings/styled-components.d.ts index fb701e24..0bf22a6c 100644 --- a/src/typings/styled-components.d.ts +++ b/src/typings/styled-components.d.ts @@ -3,5 +3,5 @@ import 'styled-components'; import { Theme } from '../theme'; declare module 'styled-components' { - export interface DefaultTheme extends Theme {} + export interface DefaultTheme extends Theme {} // eslint-disable-line } diff --git a/src/utils/Identicon/index.stories.tsx b/src/utils/Identicon/index.stories.tsx index fce1b75e..3c26494e 100644 --- a/src/utils/Identicon/index.stories.tsx +++ b/src/utils/Identicon/index.stories.tsx @@ -10,7 +10,7 @@ export default { }, }; -export const sizes = () => { +export const sizes = (): React.ReactElement => { return ( <> diff --git a/src/utils/Identicon/index.tsx b/src/utils/Identicon/index.tsx index b224db86..e33d28f6 100644 --- a/src/utils/Identicon/index.tsx +++ b/src/utils/Identicon/index.tsx @@ -17,7 +17,11 @@ const StyledImg = styled.img<{ size: IdenticonSize }>` border-radius: 50%; `; -const Identicon = ({ size = 'md', address, ...rest }: Props) => { +const Identicon = ({ + size = 'md', + address, + ...rest +}: Props): React.ReactElement => { const iconSrc = React.useMemo(() => makeBlockie(address), [address]); return ; diff --git a/src/utils/modals/GenericModal/genericModal.stories.tsx b/src/utils/modals/GenericModal/genericModal.stories.tsx index 3b524267..93482830 100644 --- a/src/utils/modals/GenericModal/genericModal.stories.tsx +++ b/src/utils/modals/GenericModal/genericModal.stories.tsx @@ -11,7 +11,7 @@ export default { }, }; -export const modal = () => { +export const SimpleModal = (): React.ReactElement => { const [isOpen, setIsOpen] = useState(false); return ( <> diff --git a/src/utils/modals/GenericModal/index.tsx b/src/utils/modals/GenericModal/index.tsx index 63ecded3..85dfb233 100644 --- a/src/utils/modals/GenericModal/index.tsx +++ b/src/utils/modals/GenericModal/index.tsx @@ -57,7 +57,7 @@ export type GenericModalProps = { body: React.ReactNode; withoutBodyPadding?: boolean; footer?: React.ReactNode; - onClose: () => any; + onClose: () => void; }; const useStyles = makeStyles({ @@ -122,7 +122,7 @@ const GenericModal = ({ ); }; -const MediaModal = (props: GenericModalProps) => ( +const MediaModal = (props: GenericModalProps): React.ReactElement => ( {(matches) => } diff --git a/src/utils/modals/ManageListModal/ManageListModal.stories.tsx b/src/utils/modals/ManageListModal/ManageListModal.stories.tsx index 3e02f4c6..c6c77214 100644 --- a/src/utils/modals/ManageListModal/ManageListModal.stories.tsx +++ b/src/utils/modals/ManageListModal/ManageListModal.stories.tsx @@ -12,7 +12,7 @@ export default { }, }; -export const modal = () => { +export const SimpleModal = (): React.ReactElement => { const [isOpen, setIsOpen] = useState(false); const [items, setItems] = useState([ { @@ -60,7 +60,7 @@ export const modal = () => { itemList={items} addButtonLabel="Add custom app" formBody={
some form
} - onSubmitForm={() => {}} + onSubmitForm={() => undefined} onClose={() => setIsOpen(false)} onItemToggle={onItemToggle} /> diff --git a/src/utils/modals/utils.stories.tsx b/src/utils/modals/utils.stories.tsx index 5b1a95f7..9fe8d815 100644 --- a/src/utils/modals/utils.stories.tsx +++ b/src/utils/modals/utils.stories.tsx @@ -10,25 +10,25 @@ export default { }, }; -export const modalFooter = () => { +export const ModalFooter = (): React.ReactElement => { return ( {}} - handleOk={() => {}} + handleCancel={() => undefined} + handleOk={() => undefined} /> ); }; -export const okDisabled = () => { +export const OkDisabled = (): React.ReactElement => { return ( {}} - handleOk={() => {}} + handleCancel={() => undefined} + handleOk={() => undefined} /> ); }; diff --git a/src/utils/modals/utils.tsx b/src/utils/modals/utils.tsx index 88d693b9..70a8c3ed 100644 --- a/src/utils/modals/utils.tsx +++ b/src/utils/modals/utils.tsx @@ -22,7 +22,7 @@ export const ModalFooterConfirmation = ({ okDisabled, handleOk, okText = 'Confirm', -}: Props) => { +}: Props): React.ReactElement => { return (