diff --git a/package.json b/package.json index 05456593..4a51fb02 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gnosis.pm/safe-react-components", - "version": "0.9.5", + "version": "0.9.6", "description": "Gnosis UI components", "main": "dist/index.min.js", "typings": "dist/index.d.ts", @@ -25,8 +25,8 @@ "author": "Gnosis (https://gnosis.pm)", "license": "MIT", "dependencies": { - "web3-utils": "^1.6.0", - "react-media": "^1.10.0" + "react-media": "^1.10.0", + "web3-utils": "^1.6.0" }, "devDependencies": { "@babel/core": "^7.16.0", @@ -53,7 +53,6 @@ "@typescript-eslint/eslint-plugin": "^4.31.0", "@typescript-eslint/parser": "^4.31.0", "copy-webpack-plugin": "^6.3.0", - "react-qr-reader": "2.2.1", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", @@ -67,9 +66,11 @@ "prettier": "^2.4.1", "react": "^16.14.0", "react-dom": "^16.14.0", + "react-qr-reader": "2.2.1", "rimraf": "^3.0.2", "storybook-addon-react-docgen": "^1.2.42", "styled-components": "^5.3.3", + "@mui/x-data-grid": "4.0.2", "ts-loader": "^8.2.0", "typescript": "^4.5.0", "url-loader": "^4.1.1", @@ -79,6 +80,7 @@ }, "peerDependencies": { "@material-ui/core": "4.X.X", + "@mui/x-data-grid": "^4.X.X", "react": "16.x.x || 17.x.x", "react-dom": "16.x.x || 17.x.x", "styled-components": "5.x.x" diff --git a/src/dataDisplay/DataTable/dataTable.stories.tsx b/src/dataDisplay/DataTable/dataTable.stories.tsx new file mode 100644 index 00000000..25b12fd3 --- /dev/null +++ b/src/dataDisplay/DataTable/dataTable.stories.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { GridDensityTypes, GridRowsProp } from '@mui/x-data-grid'; +import DataTable from './index'; + +export default { + title: 'Data Display/Data Table', + component: DataTable, + parameters: { + componentSubtitle: + 'Advanced tables. Wrapper around Material UI x-data-grid', + docs: { + description: { + component: + 'Check the official DataGrid docs for options and API', + }, + }, + }, +}; + +const COLUMN_CONFIG = [ + { + field: 'asset', + headerName: 'Asset', + flex: 1, + }, + { + field: 'amount', + headerName: 'Amount', + sortable: false, + flex: 1, + }, + { + field: 'value', + headerName: 'Value', + flex: 1, + }, +]; + +const randomIntFromInterval = (min: number, max: number): number => { + return Math.floor(Math.random() * (max - min + 1) + min); +}; + +const generateTestData = (howMany: number): GridRowsProp => { + const testData = []; + + for (let index = 0; index < howMany; index++) { + testData.push({ + id: index, + asset: `Token ${index}`, + amount: randomIntFromInterval(1, 100), + value: `$${randomIntFromInterval(0, 10000)}`, + }); + } + + return testData; +}; + +export const DataGrid = (): React.ReactElement => { + return ( + + ); +}; + +export const PaginatedDataGrid = (): React.ReactElement => { + return ( + + ); +}; diff --git a/src/dataDisplay/DataTable/index.tsx b/src/dataDisplay/DataTable/index.tsx new file mode 100644 index 00000000..28733c50 --- /dev/null +++ b/src/dataDisplay/DataTable/index.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { DataGrid as DataGridMui, DataGridProps } from '@mui/x-data-grid'; +import theme from '../../theme'; + +const DataTable = (props: DataGridProps): React.ReactElement => { + const classes = useStyles(); + + return ; +}; + +const useStyles = makeStyles({ + row: { + '&.Mui-selected': { + backgroundColor: 'transparent !important', + }, + }, + cell: { + '&:focus,&:focus-within,&.MuiDataGrid-cellCheckbox:focus': { + backgroundColor: 'rgba(0, 0, 0, 0.04)', + outline: 'none !important', + }, + '&.MuiDataGrid-cellCheckbox .Mui-checked': { + color: theme.colors.primary, + }, + }, + columnHeader: { + '&:focus,&:focus-within': { + backgroundColor: 'rgba(0, 0, 0, 0.04)', + outline: 'none !important', + }, + '&.MuiDataGrid-columnHeader .Mui-checked': { + color: theme.colors.primary, + }, + }, +}); + +export default DataTable; diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts index c97ae5c9..df3b7784 100644 --- a/src/dataDisplay/index.ts +++ b/src/dataDisplay/index.ts @@ -12,3 +12,4 @@ export * from './Tooltip'; export { default as Text } from './Text'; export { default as Title } from './Title'; export { default as Section } from './Section'; +export { default as DataTable } from './DataTable'; diff --git a/src/inputs/AddressInput/AddressInput.stories.tsx b/src/inputs/AddressInput/AddressInput.stories.tsx index dd40a849..5199f5b1 100644 --- a/src/inputs/AddressInput/AddressInput.stories.tsx +++ b/src/inputs/AddressInput/AddressInput.stories.tsx @@ -145,13 +145,13 @@ export const SimpleAddressInput = ({ onError={() => { console.log('error:'); }} - onScan={(value) => { + onScan={(value: string) => { if (value) { setAddress(value); setOpenQRModal(false); } }} - onImageLoad={(address) => setAddress(address)} + onImageLoad={(address: string) => setAddress(address)} /> diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 241f358d..4d86516c 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -10,3 +10,4 @@ declare module '*.svg' { declare module '*.ttf'; declare module '*.woff2'; +declare module 'react-qr-reader'; diff --git a/tests/dataDisplay/DataTable/__snapshots__/dataTable.stories.storyshot b/tests/dataDisplay/DataTable/__snapshots__/dataTable.stories.storyshot new file mode 100644 index 00000000..ae42d093 --- /dev/null +++ b/tests/dataDisplay/DataTable/__snapshots__/dataTable.stories.storyshot @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Data Display/Data Table Data Grid 1`] = `null`; + +exports[`Storyshots Data Display/Data Table Paginated Data Grid 1`] = `null`; diff --git a/tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot b/tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot index d8178fed..f76c6aaa 100644 --- a/tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot +++ b/tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot @@ -183,7 +183,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] = > diff --git a/tests/inputs/Checkbox/__snapshots__/checkbox.stories.storyshot b/tests/inputs/Checkbox/__snapshots__/checkbox.stories.storyshot index 78fd3c74..6fa63baf 100644 --- a/tests/inputs/Checkbox/__snapshots__/checkbox.stories.storyshot +++ b/tests/inputs/Checkbox/__snapshots__/checkbox.stories.storyshot @@ -9,7 +9,7 @@ exports[`Storyshots Inputs/Checkbox Simple Checkbox 1`] = ` > diff --git a/tests/inputs/TextFieldInput/__snapshots__/TextFieldInput.stories.storyshot b/tests/inputs/TextFieldInput/__snapshots__/TextFieldInput.stories.storyshot index 86712586..65e56845 100644 --- a/tests/inputs/TextFieldInput/__snapshots__/TextFieldInput.stories.storyshot +++ b/tests/inputs/TextFieldInput/__snapshots__/TextFieldInput.stories.storyshot @@ -412,7 +412,7 @@ exports[`Storyshots Inputs/TextFieldInput Text Field With Errors In The Label 1` > @@ -454,7 +454,7 @@ exports[`Storyshots Inputs/TextFieldInput Text Field With Errors In The Label 1` > @@ -496,7 +496,7 @@ exports[`Storyshots Inputs/TextFieldInput Text Field With Errors In The Label 1` > @@ -588,7 +588,7 @@ exports[`Storyshots Inputs/TextFieldInput Text Field With Hidden Label 1`] = ` >