From 7503c1e3bc2866f12f9d77a96d5b6849aafe2a6f Mon Sep 17 00:00:00 2001 From: Saswata Mukherjee Date: Wed, 28 Oct 2020 18:15:19 +0530 Subject: [PATCH 1/2] Add Table Component Signed-off-by: Saswata Mukherjee --- .../Table/BasicTable/BasicTable.stories.tsx | 77 +++++++++++++++++++ src/core/Table/BasicTable/BasicTable.tsx | 60 +++++++++++++++ .../BasicTable/__tests__/BasicTable.test.tsx | 29 +++++++ src/core/Table/BasicTable/data.tsx | 35 +++++++++ src/core/Table/BasicTable/index.ts | 1 + src/core/Table/BasicTable/style.ts | 34 ++++++++ src/core/Table/index.ts | 1 + 7 files changed, 237 insertions(+) create mode 100644 src/core/Table/BasicTable/BasicTable.stories.tsx create mode 100644 src/core/Table/BasicTable/BasicTable.tsx create mode 100644 src/core/Table/BasicTable/__tests__/BasicTable.test.tsx create mode 100644 src/core/Table/BasicTable/data.tsx create mode 100644 src/core/Table/BasicTable/index.ts create mode 100644 src/core/Table/BasicTable/style.ts create mode 100644 src/core/Table/index.ts diff --git a/src/core/Table/BasicTable/BasicTable.stories.tsx b/src/core/Table/BasicTable/BasicTable.stories.tsx new file mode 100644 index 0000000..f954baf --- /dev/null +++ b/src/core/Table/BasicTable/BasicTable.stories.tsx @@ -0,0 +1,77 @@ +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { ThemedBackground } from '../../../utils/storybook'; +import { BasicTable } from '../BasicTable'; +import { + tableHead, + tableData, + pageCount, + paginationData, + onChangePage, +} from './data'; + +storiesOf('Table/Basic Table', module) + // Litmus Portal + .add('Litmus Portal', () => ( + + + + )) + + // Kubera Chaos + .add('Kubera Chaos', () => ( + + + + )) + + // Kubera Propel + .add('Kubera Propel', () => ( + + {' '} + + )) + + // Kubera Portal + .add('Kubera Portal', () => ( + + + + )) + + // Kubera Core + .add('Kubera Core', () => ( + + + + )); diff --git a/src/core/Table/BasicTable/BasicTable.tsx b/src/core/Table/BasicTable/BasicTable.tsx new file mode 100644 index 0000000..2cf53c3 --- /dev/null +++ b/src/core/Table/BasicTable/BasicTable.tsx @@ -0,0 +1,60 @@ +import { + Table, + TableBody, + TableContainer, + TableHead, + TableProps, + TablePagination, + Paper, +} from '@material-ui/core'; +import React from 'react'; +import { useStyles } from './style'; + +interface PaginationData { + pageNo: number; + rowsPerPage: number; +} + +interface BasicTableProps extends TableProps { + tableHead: React.ReactNode; + tableData: React.ReactNode; + paginationData: PaginationData; + pageCount: number; + onChangePage: (_: any, page: number) => any; + onChangeRowsPerPage?: ( + event: React.ChangeEvent + ) => void; +} + +const BasicTable: React.FC = ({ + tableHead, + tableData, + paginationData, + pageCount, + onChangePage, + onChangeRowsPerPage, +}) => { + const classes = useStyles(); + + return ( + + + + {tableHead} + {tableData} +
+ + + + ); +}; + +export { BasicTable }; diff --git a/src/core/Table/BasicTable/__tests__/BasicTable.test.tsx b/src/core/Table/BasicTable/__tests__/BasicTable.test.tsx new file mode 100644 index 0000000..0e2f674 --- /dev/null +++ b/src/core/Table/BasicTable/__tests__/BasicTable.test.tsx @@ -0,0 +1,29 @@ +import { render } from '@testing-library/react'; +import React from 'react'; +import { KuberaThemeProvider } from '../../../../theme'; +import { BasicTable } from '../BasicTable'; +import { + tableHead, + tableData, + pageCount, + paginationData, + onChangePage, +} from '../data'; + +describe('Basic Table Component', () => { + it('Renders', () => { + const { getByTestId } = render( + + + + ); + + expect(getByTestId('table')).toBeTruthy(); + }); +}); diff --git a/src/core/Table/BasicTable/data.tsx b/src/core/Table/BasicTable/data.tsx new file mode 100644 index 0000000..975de7b --- /dev/null +++ b/src/core/Table/BasicTable/data.tsx @@ -0,0 +1,35 @@ +import { TableCell, TableRow, Typography } from '@material-ui/core'; +import React from 'react'; + +const tableHead = ( + + Status + Workflow Name + Target Cluster + Reliability Details + # of Steps + Last Run + + +); + +const tableData = ( + + + No records available + + +); + +const pageCount = 0; + +const paginationData = { + pageNo: 0, + rowsPerPage: 5, +}; + +const onChangePage = (_: any, page: number) => { + console.log(page); +}; + +export { tableHead, tableData, pageCount, paginationData, onChangePage }; diff --git a/src/core/Table/BasicTable/index.ts b/src/core/Table/BasicTable/index.ts new file mode 100644 index 0000000..955a269 --- /dev/null +++ b/src/core/Table/BasicTable/index.ts @@ -0,0 +1 @@ +export * from './BasicTable'; diff --git a/src/core/Table/BasicTable/style.ts b/src/core/Table/BasicTable/style.ts new file mode 100644 index 0000000..aa33c7d --- /dev/null +++ b/src/core/Table/BasicTable/style.ts @@ -0,0 +1,34 @@ +import { makeStyles, Theme } from '@material-ui/core'; + +const useStyles = makeStyles((theme: Theme) => ({ + root: { + backgroundColor: theme.palette.background.default, + }, + tableMain: { + marginTop: theme.spacing(4.25), + backgroundColor: theme.palette.background.default, + height: '29.219rem', + '&::-webkit-scrollbar': { + width: '0.2em', + }, + '&::-webkit-scrollbar-track': { + webkitBoxShadow: `inset 0 0 6px ${theme.palette.border.main}`, + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.palette.secondary.dark, + }, + }, + tableHead: { + '& p': { + fontWeight: 'bold', + fontSize: '0.8125rem', + }, + '& th': { + fontWeight: 'bold', + fontSize: '0.8125rem', + backgroundColor: theme.palette.background.default, + }, + }, +})); + +export { useStyles }; diff --git a/src/core/Table/index.ts b/src/core/Table/index.ts new file mode 100644 index 0000000..955a269 --- /dev/null +++ b/src/core/Table/index.ts @@ -0,0 +1 @@ +export * from './BasicTable'; From 53f4f92cd391bb4c2521420aa345ea4808812405 Mon Sep 17 00:00:00 2001 From: Saswata Mukherjee Date: Thu, 29 Oct 2020 18:24:03 +0530 Subject: [PATCH 2/2] Implement requested changes Signed-off-by: Saswata Mukherjee --- src/core/Table/BasicTable/index.ts | 1 - ...asicTable.stories.tsx => Table.stories.tsx} | 18 +++++++++--------- .../{BasicTable/BasicTable.tsx => Table.tsx} | 16 ++++++++-------- .../Table.test.tsx} | 6 +++--- src/core/Table/base.ts | 3 +++ src/core/Table/{BasicTable => }/data.tsx | 7 ++++--- src/core/Table/index.ts | 2 +- src/core/Table/{BasicTable => }/style.ts | 2 +- src/core/index.ts | 1 + 9 files changed, 30 insertions(+), 26 deletions(-) delete mode 100644 src/core/Table/BasicTable/index.ts rename src/core/Table/{BasicTable/BasicTable.stories.tsx => Table.stories.tsx} (87%) rename src/core/Table/{BasicTable/BasicTable.tsx => Table.tsx} (81%) rename src/core/Table/{BasicTable/__tests__/BasicTable.test.tsx => __tests__/Table.test.tsx} (83%) create mode 100644 src/core/Table/base.ts rename src/core/Table/{BasicTable => }/data.tsx (76%) rename src/core/Table/{BasicTable => }/style.ts (91%) diff --git a/src/core/Table/BasicTable/index.ts b/src/core/Table/BasicTable/index.ts deleted file mode 100644 index 955a269..0000000 --- a/src/core/Table/BasicTable/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './BasicTable'; diff --git a/src/core/Table/BasicTable/BasicTable.stories.tsx b/src/core/Table/Table.stories.tsx similarity index 87% rename from src/core/Table/BasicTable/BasicTable.stories.tsx rename to src/core/Table/Table.stories.tsx index f954baf..d31e1c5 100644 --- a/src/core/Table/BasicTable/BasicTable.stories.tsx +++ b/src/core/Table/Table.stories.tsx @@ -1,7 +1,7 @@ import { storiesOf } from '@storybook/react'; import React from 'react'; -import { ThemedBackground } from '../../../utils/storybook'; -import { BasicTable } from '../BasicTable'; +import { ThemedBackground } from '../../utils/storybook'; +import { Table } from '../Table'; import { tableHead, tableData, @@ -10,11 +10,11 @@ import { onChangePage, } from './data'; -storiesOf('Table/Basic Table', module) +storiesOf('Table', module) // Litmus Portal .add('Litmus Portal', () => ( - ( - ( - {' '} + /> )) // Kubera Portal .add('Kubera Portal', () => ( - ( - any; + onChangePage: (_: any, page: number) => void; onChangeRowsPerPage?: ( event: React.ChangeEvent ) => void; } -const BasicTable: React.FC = ({ +const Table: React.FC = ({ tableHead, tableData, paginationData, @@ -39,10 +39,10 @@ const BasicTable: React.FC = ({ return ( - + {tableHead} {tableData} -
+ = ({ ); }; -export { BasicTable }; +export { Table }; diff --git a/src/core/Table/BasicTable/__tests__/BasicTable.test.tsx b/src/core/Table/__tests__/Table.test.tsx similarity index 83% rename from src/core/Table/BasicTable/__tests__/BasicTable.test.tsx rename to src/core/Table/__tests__/Table.test.tsx index 0e2f674..c32ac76 100644 --- a/src/core/Table/BasicTable/__tests__/BasicTable.test.tsx +++ b/src/core/Table/__tests__/Table.test.tsx @@ -1,7 +1,7 @@ import { render } from '@testing-library/react'; import React from 'react'; -import { KuberaThemeProvider } from '../../../../theme'; -import { BasicTable } from '../BasicTable'; +import { KuberaThemeProvider } from '../../../theme'; +import { Table } from '../Table'; import { tableHead, tableData, @@ -14,7 +14,7 @@ describe('Basic Table Component', () => { it('Renders', () => { const { getByTestId } = render( - @@ -15,8 +16,8 @@ const tableHead = ( const tableData = ( - - No records available + + No records available ); diff --git a/src/core/Table/index.ts b/src/core/Table/index.ts index 955a269..75193ad 100644 --- a/src/core/Table/index.ts +++ b/src/core/Table/index.ts @@ -1 +1 @@ -export * from './BasicTable'; +export * from './Table'; diff --git a/src/core/Table/BasicTable/style.ts b/src/core/Table/style.ts similarity index 91% rename from src/core/Table/BasicTable/style.ts rename to src/core/Table/style.ts index aa33c7d..f422f87 100644 --- a/src/core/Table/BasicTable/style.ts +++ b/src/core/Table/style.ts @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) => ({ width: '0.2em', }, '&::-webkit-scrollbar-track': { - webkitBoxShadow: `inset 0 0 6px ${theme.palette.border.main}`, + webkitBoxShadow: `inset 0 0 0.375rem ${theme.palette.border.main}`, }, '&::-webkit-scrollbar-thumb': { backgroundColor: theme.palette.secondary.dark, diff --git a/src/core/index.ts b/src/core/index.ts index a8cb84f..ea7d6e1 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -6,3 +6,4 @@ export * from './Link'; export * from './ButtonGroup'; export * from './Search'; export * from './Modal'; +export * from './Table';