Merge pull request #905 from jbetancur/feature/7-0-1-various

Feature/7 0 1 various
jbetancur · Sep 11, 2021 · c2dcc2e · c2dcc2e
2 parents c247903 + d2e9b39
commit c2dcc2e
Show file tree

Hide file tree

Showing 34 changed files with 1,120 additions and 644 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,36 +2,45 @@ const prettierConfig = require('../.prettierrc.js');
 
 module.exports = {
 	stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+	typescript: {
+		check: false,
+		checkOptions: {},
+		reactDocgen: 'react-docgen-typescript',
+		reactDocgenTypescriptOptions: {
+			shouldExtractLiteralValuesFromEnum: true,
+			propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+		},
+	},
 	addons: [
-    {
-      name: '@storybook/addon-storysource',
-      options: {
-        loaderOptions: {
-          prettierConfig: prettierConfig,
-          injectStoryParameters: false,
-        },
-      },
-    },
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        sourceLoaderOptions: {
-          injectStoryParameters: false,
-        },
-      },
-    },
-    {
-      name: "@storybook/addon-essentials",
-      options: {}
-    },
-    {
-        name: "@storybook/addon-a11y",
-        options: {
-            runOnly: {
-                type: "tag",
-                values: ["wcag2a", "wcag2aa"]
-            }
-        }
-    },
+		{
+			name: '@storybook/addon-storysource',
+			options: {
+				loaderOptions: {
+					prettierConfig: prettierConfig,
+					injectStoryParameters: false,
+				},
+			},
+		},
+		{
+			name: '@storybook/addon-docs',
+			options: {
+				sourceLoaderOptions: {
+					injectStoryParameters: false,
+				},
+			},
+		},
+		{
+			name: '@storybook/addon-essentials',
+			options: {},
+		},
+		{
+			name: '@storybook/addon-a11y',
+			options: {
+				runOnly: {
+					type: 'tag',
+					values: ['wcag2a', 'wcag2aa'],
+				},
+			},
+		},
 	],
 };
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,26 +1,52 @@
-import "./base.css";
+import './base.css';
 
 export const parameters = {
-  // controls: { expanded: true },
-  viewMode: 'docs',
-  options: {
-    storySort: {
-      method: 'alphabetical',
-      order: ['Getting Started', ['Introduction', 'Installation', 'Basic Examples', 'Kitchen Sink',  'Code of Conduct', 'Features & Issues', '*'], 'API Reference', ['Columns', 'Properties'], 'Columns', 'Sorting', 'Selectable', 'Expandable', 'Pagination', 'Headers', 'Loading', '*', 'Performance', ['Optimization', '*'], 'Contributing'],
-    },
-  },
-  a11y: {
-    element: "#root",
-    config: {},
-    options: {},
-    manual: true,
-  },
+	// controls: { expanded: true },
+	viewMode: 'docs',
+	options: {
+		storySort: {
+			method: 'alphabetical',
+			order: [
+				'Getting Started',
+				[
+					'Introduction',
+					'Installation',
+					'Basic Examples',
+					'Patterns',
+					'Kitchen Sink',
+					'Kitchen Sink TS',
+					'Code of Conduct',
+					'Features & Issues',
+					'*',
+				],
+				'API Reference',
+				['Columns', 'Properties'],
+				'Columns',
+				'Sorting',
+				'Selectable',
+				'Expandable',
+				'Pagination',
+				'Headers',
+				'Loading',
+				'*',
+				'Performance',
+				['Optimization', '*'],
+				'Contributing',
+			],
+		},
+	},
+	a11y: {
+		element: '#root',
+		config: {},
+		options: {},
+		manual: true,
+	},
 };
 
 export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'light',
-  },
-};
+	theme: {
+		name: 'Theme',
+		description: 'Global theme for components',
+		defaultValue: 'light',
+	},
+};
diff --git a/jest.config.js b/jest.config.js
@@ -3,6 +3,7 @@ module.exports = {
 	transform: {
 		'^.+\\.(ts|tsx)$': 'ts-jest',
 	},
+	testEnvironment: 'jsdom',
 	collectCoverageFrom: [
 		'src/**/*.{js,jsx,ts,tsx}',
 		'!src/**/*.d.ts',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "A simple to use declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -48,12 +48,12 @@
     "@storybook/addons": "^6.3.8",
     "@storybook/react": "^6.3.8",
     "@storybook/theming": "^6.3.8",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.0",
     "@types/faker": "^5.5.8",
     "@types/jest": "^27.0.1",
     "@types/lodash-es": "^4.17.4",
     "@types/lodash.orderby": "^4.6.6",
-    "@types/node": "^16.7.11",
+    "@types/node": "^16.9.1",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.14",
@@ -73,13 +73,13 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "faker": "^5.5.3",
     "gh-pages": "^3.2.3",
-    "jest": "^27.1.0",
+    "jest": "^27.1.1",
     "jest-styled-components": "^7.0.5",
     "jest-watch-typeahead": "^0.6.4",
     "lodash-es": "^4.17.21",
     "memoize-one": "^5.2.1",
     "moment": "^2.29.1",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.0",
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
     "react-dom": "^17.0.2",
@@ -96,7 +96,7 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.0.5",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.3"
   },
   "dependencies": {
     "deepmerge": "^4.2.2",

diff --git a/src/DataTable/Cell.ts b/src/DataTable/Cell.ts
@@ -21,7 +21,7 @@ export type CellProps = Pick<
 >;
 
 // Flex calculations
-export const Cell = styled(CellBase)<CellProps>`
+export const CellExtended = styled(CellBase)<CellProps>`
 	flex-grow: ${({ button, grow }) => (grow === 0 || button ? 0 : grow || 1)};
 	flex-shrink: 0;
 	flex-basis: 0;

diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
@@ -2,29 +2,29 @@ import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { tableReducer } from './tableReducer';
 import Table from './Table';
-import TableHead from './TableHead';
-import TableHeadRow from './TableHeadRow';
-import TableRow from './TableRow';
-import TableCol from './TableCol';
-import TableColCheckbox from './TableColCheckbox';
-import TableHeader from './TableHeader';
-import TableSubheader from './TableSubheader';
-import TableBody from './TableBody';
+import Head from './TableHead';
+import HeadRow from './TableHeadRow';
+import Row from './TableRow';
+import Column from './TableCol';
+import ColumnCheckbox from './TableColCheckbox';
+import Header from './TableHeader';
+import Subheader from './TableSubheader';
+import Body from './TableBody';
 import ResponsiveWrapper from './ResponsiveWrapper';
 import ProgressWrapper from './ProgressWrapper';
-import TableWrapper from './TableWrapper';
-import TableColExpander from './TableColExpander';
+import Wrapper from './TableWrapper';
+import ColumnExpander from './TableColExpander';
 import { CellBase } from './Cell';
 import NoData from './NoDataWrapper';
 import NativePagination from './Pagination';
 import useDidUpdateEffect from '../hooks/useDidUpdateEffect';
 import { getNumberOfPages, setRowData, isEmpty, isRowSelected, recalculatePage } from './util';
 import { defaultProps } from './defaultProps';
 import { createStyles } from './styles';
-import { Action, AllRowsAction, SingleRowAction, RowRecord, SortAction, TableProps, TableState } from './types';
+import { Action, AllRowsAction, SingleRowAction, TableRow, SortAction, TableProps, TableState } from './types';
 import useColumns from '../hooks/useColumns';
 
-function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
+function DataTable<T extends TableRow>(props: TableProps<T>): JSX.Element {
 	const {
 		data = defaultProps.data,
 		columns = defaultProps.columns,
@@ -305,7 +305,7 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 	return (
 		<ThemeProvider theme={currentTheme}>
 			{showHeader() && (
-				<TableHeader
+				<Header
 					title={title}
 					actions={actions}
 					showMenu={!noContextMenu}
@@ -318,9 +318,9 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 			)}
 
 			{subHeader && (
-				<TableSubheader align={subHeaderAlign} wrapContent={subHeaderWrap}>
+				<Subheader align={subHeaderAlign} wrapContent={subHeaderWrap}>
 					{subHeaderComponent}
-				</TableSubheader>
+				</Subheader>
 			)}
 
 			<ResponsiveWrapper
@@ -329,18 +329,18 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 				fixedHeaderScrollHeight={fixedHeaderScrollHeight}
 				{...wrapperProps}
 			>
-				<TableWrapper>
+				<Wrapper>
 					{progressPending && !persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
 
 					<Table disabled={disabled} className="rdt_Table" role="table">
 						{showTableHead() && (
-							<TableHead className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
-								<TableHeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
+							<Head className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
+								<HeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
 									{selectableRows &&
 										(showSelectAll ? (
 											<CellBase style={{ flex: '0 0 48px' }} />
 										) : (
-											<TableColCheckbox
+											<ColumnCheckbox
 												allSelected={allSelected}
 												selectedRows={selectedRows}
 												selectableRowsComponent={selectableRowsComponent}
@@ -352,9 +352,9 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 												onSelectAllRows={handleSelectAllRows}
 											/>
 										))}
-									{expandableRows && !expandableRowsHideExpander && <TableColExpander />}
+									{expandableRows && !expandableRowsHideExpander && <ColumnExpander />}
 									{tableColumns.map(column => (
-										<TableCol
+										<Column
 											key={column.id}
 											column={column}
 											selectedColumn={selectedColumn}
@@ -377,24 +377,26 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 											draggingColumnId={draggingColumnId}
 										/>
 									))}
-								</TableHeadRow>
-							</TableHead>
+								</HeadRow>
+							</Head>
 						)}
 
 						{!rows.length && !progressPending && <NoData>{noDataComponent}</NoData>}
 
 						{progressPending && persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
 
 						{!progressPending && rows.length > 0 && (
-							<TableBody className="rdt_TableBody" role="rowgroup">
+							<Body className="rdt_TableBody" role="rowgroup">
 								{tableRows.map((row, i) => {
-									const id = (isEmpty(row[keyField] as string | number) ? i : row[keyField]) as string | number;
+									// we need to cast key since the type is unknown beforehand
+									const key = row[keyField] as string | number;
+									const id = isEmpty(key) ? i : key;
 									const selected = isRowSelected(row, selectedRows, keyField);
 									const expanderExpander = !!(expandableRows && expandableRowExpanded && expandableRowExpanded(row));
 									const expanderDisabled = !!(expandableRows && expandableRowDisabled && expandableRowDisabled(row));
 
 									return (
-										<TableRow
+										<Row
 											id={id}
 											key={id}
 											keyField={keyField}
@@ -438,10 +440,10 @@ function DataTable<T extends RowRecord>(props: TableProps<T>): JSX.Element {
 										/>
 									);
 								})}
-							</TableBody>
+							</Body>
 						)}
 					</Table>
-				</TableWrapper>
+				</Wrapper>
 			</ResponsiveWrapper>
 
 			{enabledPagination && (

diff --git a/src/DataTable/TableBody.tsx b/src/DataTable/TableBody.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-const TableBody = styled.div`
+const Body = styled.div`
 	display: flex;
 	flex-direction: column;
 `;
 
-export default TableBody;
+export default Body;