lint

mongodb · Jan 12, 2023 · f61df48 · f61df48
1 parent 98eb371
commit f61df48
Show file tree

Hide file tree

Showing 33 changed files with 305 additions and 263 deletions.
diff --git a/packages/table/README.md b/packages/table/README.md
@@ -3,10 +3,16 @@
 ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/table.svg)
 
 #### Temp todos
+
+- ensure parity between v10 and v11 functionalities
 - propTypes for all exported components
 - import all react-table and react-virtual exports and export them from our package
 - styles for disabled rows and clickable rows
-
+- remove unused imports
+- replace all instances of unnecessary `any` types
+- ensure TS types are failsafe
+- resolve any UI discrepancies
+- write tests
 
 ## Installation
 
@@ -25,7 +31,14 @@ npm install @leafygreen-ui/table
 ## Example
 
 ```js
-import { Table, TableHead, HeaderRow, TableBody, Row, Cell } from '@leafygreen-ui/table';
+import {
+  Table,
+  TableHead,
+  HeaderRow,
+  TableBody,
+  Row,
+  Cell,
+} from '@leafygreen-ui/table';
 
 <Table {...args}>
   <TableHead>
@@ -44,19 +57,17 @@ import { Table, TableHead, HeaderRow, TableBody, Row, Cell } from '@leafygreen-u
       </Row>
     ))}
   </TableBody>
-</Table>
+</Table>;
 ```
 
 ## Overview
 
-*Upgrading from v10 to v11? Check out our [upgrade guide](https://github.com/mongodb/leafygreen-ui/blob/main/packages/table/UPGRADE.md)*
+_Upgrading from v10 to v11? Check out our [upgrade guide](https://github.com/mongodb/leafygreen-ui/blob/main/packages/table/UPGRADE.md)_
 
 ## Exports
 
 #### useLeafygreenTable
 
-
-
 #### TableContainer
 
 #### TableHead
@@ -70,11 +81,13 @@ import { Table, TableHead, HeaderRow, TableBody, Row, Cell } from '@leafygreen-u
 #### Row
 
 #### Cell
+
 ## Feature Examples
 
 ### Virtualized Scrolling
+
 ### Sortable Rows
 
 ### Selectable Rows
 
-### Expandable Content
+### Expandable Content
diff --git a/packages/table/src/Cell/Cell.tsx b/packages/table/src/Cell/Cell.tsx
@@ -13,10 +13,7 @@ const Cell = <T extends unknown>({
   if (hasVS) {
     return (
       // missing props will be provided by cloneElement call from Row
-      <InternalCellWithVS
-        cell={cell}
-        {...rest}
-      />
+      <InternalCellWithVS cell={cell} {...rest} />
     );
   } else {
     return (

diff --git a/packages/table/src/Cell/InternalCellBase.tsx b/packages/table/src/Cell/InternalCellBase.tsx
@@ -3,7 +3,12 @@ import { consoleOnce } from '@leafygreen-ui/lib';
 import React, { PropsWithChildren } from 'react';
 import { useTableContext } from '../TableContext';
 import ToggleExpandedIcon from '../ToggleExpandedIcon/ToggleExpandedIcon';
-import { alignmentStyles, baseStyles, depthPadding, cellContentContainerStyles } from './styles';
+import {
+  alignmentStyles,
+  baseStyles,
+  depthPadding,
+  cellContentContainerStyles,
+} from './styles';
 import { InternalCellBaseProps } from './types';
 
 const InternalCellBase = ({
@@ -29,13 +34,14 @@ const InternalCellBase = ({
       )}
       {...rest}
     >
-      <div className={cx(
-        cellContentContainerStyles,
-        {
+      <div
+        className={cx(cellContentContainerStyles, {
           [depthPadding(depth)]: cellIndex === 0,
-        }
-      )}>
-        {shouldRenderArrow && <ToggleExpandedIcon {...toggleExpandedIconProps} />}
+        })}
+      >
+        {shouldRenderArrow && (
+          <ToggleExpandedIcon {...toggleExpandedIconProps} />
+        )}
         {children}
       </div>
     </td>

diff --git a/packages/table/src/Cell/InternalCellWithVS.tsx b/packages/table/src/Cell/InternalCellWithVS.tsx
@@ -8,7 +8,6 @@ const InternalCellWithVS = <T extends unknown>({
   toggleExpandedIconProps,
   ...rest
 }: PropsWithChildren<InternalCellWithVSProps<T>>) => {
-
   const shouldRenderArrow = cell?.row.getCanExpand() && cellIndex === 0;
 
   return (
@@ -17,7 +16,7 @@ const InternalCellWithVS = <T extends unknown>({
       cellIndex={cellIndex}
       toggleExpandedIconProps={{
         isExpanded: cell.row.getIsExpanded(),
-        toggleExpanded: cell.row.getToggleExpandedHandler()
+        toggleExpanded: cell.row.getToggleExpandedHandler(),
       }}
       {...rest}
     />

diff --git a/packages/table/src/Cell/styles.ts b/packages/table/src/Cell/styles.ts
@@ -26,4 +26,4 @@ export const cellContentContainerStyles = css`
   display: flex;
   align-items: center;
   padding: 10px 8px;
-`;
+`;
diff --git a/packages/table/src/Cell/types.ts b/packages/table/src/Cell/types.ts
@@ -2,19 +2,24 @@ import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 import { Cell } from '@tanstack/table-core';
 import ToggleExpandedIconProps from '../ToggleExpandedIcon/ToggleExpandedIcon.types';
 
-export interface InternalCellBaseProps extends HTMLElementProps<'td'>, DarkModeProps {
+export interface InternalCellBaseProps
+  extends HTMLElementProps<'td'>,
+    DarkModeProps {
   cellIndex: number;
   depth?: number;
   shouldRenderArrow: boolean;
   toggleExpandedIconProps: ToggleExpandedIconProps;
 }
 
-export interface InternalCellWithVSProps<T extends unknown> extends Partial<InternalCellBaseProps> {
+export interface InternalCellWithVSProps<T extends unknown>
+  extends Partial<InternalCellBaseProps> {
   cellIndex: number;
   cell: Cell<T, any>;
 }
 
-export interface InternalCellWithoutVSProps extends Partial<InternalCellBaseProps> {
-}
+export interface InternalCellWithoutVSProps
+  extends Partial<InternalCellBaseProps> {}
 
-export type CellProps<T extends unknown> = Partial<InternalCellWithVSProps<T>> | InternalCellWithoutVSProps;
+export type CellProps<T extends unknown> =
+  | Partial<InternalCellWithVSProps<T>>
+  | InternalCellWithoutVSProps;
diff --git a/packages/table/src/CheckboxCell/CheckboxCell.tsx b/packages/table/src/CheckboxCell/CheckboxCell.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
-import Checkbox from "@leafygreen-ui/checkbox";
+import Checkbox from '@leafygreen-ui/checkbox';
 import { css } from '@leafygreen-ui/emotion';
 import { CheckboxProps } from '@leafygreen-ui/checkbox/src/types';
 
 const CheckboxCell = (props: CheckboxProps) => (
-  <div className={
-    css`
+  <div
+    className={css`
       // break the first-cell padding. would be better to use a className here, but createUniqueClassname would have performance concerns.
       margin-left: -16px;
       width: 36px;
-    `
-  }>
+    `}
+  >
     <Checkbox {...props} />
   </div>
-)
+);
 
-export default CheckboxCell;
+export default CheckboxCell;
diff --git a/packages/table/src/HeaderCell/HeaderCell.tsx b/packages/table/src/HeaderCell/HeaderCell.tsx
@@ -7,10 +7,10 @@ import { baseStyles, alignmentStyles, contentContainerStyles } from './styles';
 import { HeaderCellProps, SortState } from './types';
 
 const HeaderSortState: { [key: string]: SortState } = {
-  'false': SortState.Off,
-  'asc': SortState.Asc,
-  'desc': SortState.Desc,
-}
+  false: SortState.Off,
+  asc: SortState.Asc,
+  desc: SortState.Desc,
+};
 
 const HeaderCell = <T extends unknown>({
   children,
@@ -25,11 +25,12 @@ const HeaderCell = <T extends unknown>({
   let columnName;
   let sortState;
   let onSortIconClick;
+
   if (header && header.column.getCanSort()) {
     columnName = header.column.columnDef.header as string;
-    let headerSortDirection = header.column.getIsSorted().toString();
+    const headerSortDirection = header.column.getIsSorted().toString();
     sortState = HeaderSortState[headerSortDirection];
-    onSortIconClick = header.column.getToggleSortingHandler()
+    onSortIconClick = header.column.getToggleSortingHandler();
   } else {
     columnName = '';
     sortState = SortState.None;
@@ -48,14 +49,19 @@ const HeaderCell = <T extends unknown>({
   }, [cellIndex, align, setColumnAlignments]);
 
   return (
-    <th className={cx(
-      baseStyles,
-      // themeStyles[theme],
-      {
-        [css`width: ${header?.getSize()}px`]: !!header?.getSize(),
-      },
-      className
-    )} {...rest}>
+    <th
+      className={cx(
+        baseStyles,
+        // themeStyles[theme],
+        {
+          [css`
+            width: ${header?.getSize()}px;
+          `]: !!header?.getSize(),
+        },
+        className,
+      )}
+      {...rest}
+    >
       <div className={cx(contentContainerStyles, alignmentStyles(align))}>
         {children}
         {sortState && onSortIconClick && (

diff --git a/packages/table/src/HeaderCell/SortIcon/SortIcon.tsx b/packages/table/src/HeaderCell/SortIcon/SortIcon.tsx
@@ -27,19 +27,19 @@ const themeGlyphColors: Record<Theme, Record<SortState, string>> = {
   },
 };
 
-const SortIcon = ({
-  sortState,
-  onSortIconClick,
-  ...rest
-}: SortIconProps) => {
+const SortIcon = ({ sortState, onSortIconClick, ...rest }: SortIconProps) => {
   const { theme } = useDarkMode();
+
   const handleClick = (e: any) => {
     onSortIconClick && onSortIconClick(e);
   };
 
   return (
     <IconButton onClick={handleClick} {...rest}>
-      <Icon glyph={glyphs[sortState]} fill={themeGlyphColors[theme][sortState]} />
+      <Icon
+        glyph={glyphs[sortState]}
+        fill={themeGlyphColors[theme][sortState]}
+      />
     </IconButton>
   );
 };

diff --git a/packages/table/src/HeaderCell/SortIcon/SortIcon.types.ts b/packages/table/src/HeaderCell/SortIcon/SortIcon.types.ts
@@ -3,5 +3,5 @@ import { SortState } from '../types';
 
 export type SortIconProps = AccessibleIconButtonProps & {
   sortState: SortState;
-  onSortIconClick: ((event: unknown) => void) | undefined
-}
+  onSortIconClick: ((event: unknown) => void) | undefined;
+};
diff --git a/packages/table/src/HeaderCell/styles.ts b/packages/table/src/HeaderCell/styles.ts
@@ -30,6 +30,6 @@ export const alignmentStyles = (align: Align) =>
 //     color: ${palette.grey.light2};
 //   `,
 //   [Theme.Light]: css`
-    
+
 //   `,
 // };
diff --git a/packages/table/src/HeaderCell/types.ts b/packages/table/src/HeaderCell/types.ts
@@ -12,7 +12,9 @@ export const SortState: { [key: string]: string } = {
 
 export type SortState = typeof SortState[keyof typeof SortState];
 
-export interface HeaderCellProps<T extends unknown> extends HTMLElementProps<'th'>, DarkModeProps {
+export interface HeaderCellProps<T extends unknown>
+  extends HTMLElementProps<'th'>,
+    DarkModeProps {
   sortState?: SortState;
   cellIndex?: number;
   header?: Header<T, any>;

diff --git a/packages/table/src/HeaderRow/types.ts b/packages/table/src/HeaderRow/types.ts
@@ -1,5 +1,3 @@
 import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
 
-export interface HeaderRowProps extends HTMLElementProps<'tr'>, DarkModeProps {
-
-}
+export interface HeaderRowProps extends HTMLElementProps<'tr'>, DarkModeProps {}
diff --git a/packages/table/src/Row/InternalRowBase.tsx b/packages/table/src/Row/InternalRowBase.tsx
@@ -5,7 +5,10 @@ import { useTableContext } from '../TableContext';
 import { baseStyles, themeZebraStyles } from './styles';
 import { InternalRowBaseProps } from './types';
 
-const InternalRowBase = ({ className, ...rest }: PropsWithChildren<InternalRowBaseProps>) => {
+const InternalRowBase = ({
+  className,
+  ...rest
+}: PropsWithChildren<InternalRowBaseProps>) => {
   const { theme } = useDarkMode();
   const { shouldAlternateRowColor } = useTableContext();
   return (