Feature/add prettier config, ref #1383 (#1384)

* add prettier config

* write files with prettier

* install and configure lint-staged and husky - ref 1.2 in #1383

* feat(style): add prettier configs, ref 1.1 & 1.2 in #1383

src/hooks/useColumns.js

@@ -8,9 +8,9 @@ const propTypes = {
   columns: PropTypes.arrayOf(
     PropTypes.shape({
       Cell: PropTypes.any,
-      Header: PropTypes.any
+      Header: PropTypes.any,
     })
-  )
+  ),
 }
 
 // Find the depth of the columns
@@ -50,7 +50,7 @@ function decorateColumn(column, parent) {
     ...column,
     id,
     accessor,
-    parent
+    parent,
   }
 
   return column
@@ -81,7 +81,7 @@ function makeHeaderGroups(columns, maxDepth) {
 
   const buildGroup = (columns, depth = 0) => {
     const headerGroup = {
-      headers: []
+      headers: [],
     }
 
     const parentColumns = []
@@ -98,7 +98,7 @@ function makeHeaderGroups(columns, maxDepth) {
           parentColumns.push({
             ...column.parent,
             originalID: column.parent.id,
-            id: [column.parent.id, parentColumns.length].join('_')
+            id: [column.parent.id, parentColumns.length].join('_'),
           })
         }
       } else if (hasParents) {
@@ -109,8 +109,8 @@ function makeHeaderGroups(columns, maxDepth) {
             column.id,
             'placeholder',
             maxDepth - depth,
-            parentColumns.length
-          ].join('_')
+            parentColumns.length,
+          ].join('_'),
         })
         if (
           isFirst ||
@@ -148,7 +148,7 @@ export const useColumns = props => {
   const {
     debug,
     columns: userColumns,
-    state: [{ groupBy }]
+    state: [{ groupBy }],
   } = props
 
   PropTypes.checkPropTypes(propTypes, props, 'property', 'useColumns')
@@ -164,7 +164,7 @@ export const useColumns = props => {
 
     columns = [
       ...groupBy.map(g => columns.find(col => col.id === g)),
-      ...columns.filter(col => !groupBy.includes(col.id))
+      ...columns.filter(col => !groupBy.includes(col.id)),
     ]
 
     // Get headerGroups
@@ -174,7 +174,7 @@ export const useColumns = props => {
     return {
       columns,
       headerGroups,
-      headers
+      headers,
     }
   }, [debug, groupBy, userColumns])
 
@@ -182,7 +182,7 @@ export const useColumns = props => {
     ...props,
     columns,
     headerGroups,
-    headers
+    headers,
   }
 
   function flattenBy(columns, childKey) {
@@ -202,5 +202,4 @@ export const useColumns = props => {
 
     return flatColumns
   }
-
 }

src/hooks/useExpanded.js

@@ -9,12 +9,12 @@ defaultState.expanded = {}
 
 addActions({
   toggleExpanded: '__toggleExpanded__',
-  useExpanded: '__useExpanded__'
+  useExpanded: '__useExpanded__',
 })
 
 const propTypes = {
   expandedKey: PropTypes.string,
-  paginateSubRows: PropTypes.bool
+  paginateSubRows: PropTypes.bool,
 }
 
 export const useExpanded = props => {
@@ -26,7 +26,7 @@ export const useExpanded = props => {
     expandedKey = 'expanded',
     hooks,
     state: [{ expanded }, setState],
-    paginateSubRows = true
+    paginateSubRows = true,
   } = props
 
   const toggleExpandedByPath = (path, set) => {
@@ -36,7 +36,7 @@ export const useExpanded = props => {
       set = getFirstDefined(set, !existing)
       return {
         ...old,
-        expanded: setBy(expanded, path, set)
+        expanded: setBy(expanded, path, set),
       }
     }, actions.toggleExpanded)
   }
@@ -85,7 +85,7 @@ export const useExpanded = props => {
     ...props,
     toggleExpandedByPath,
     expandedDepth,
-    rows: expandedRows
+    rows: expandedRows,
   }
 }
 

src/hooks/useFilters.js

@@ -8,7 +8,7 @@ import { defaultState } from './useTableState'
 defaultState.filters = {}
 addActions({
   setFilter: '__setFilter__',
-  setAllFilters: '__setAllFilters__'
+  setAllFilters: '__setAllFilters__',
 })
 
 const propTypes = {
@@ -18,12 +18,12 @@ const propTypes = {
       filterFn: PropTypes.func,
       filterAll: PropTypes.bool,
       canFilter: PropTypes.bool,
-      Filter: PropTypes.any
+      Filter: PropTypes.any,
     })
   ),
 
   filterFn: PropTypes.func,
-  manualFilters: PropTypes.bool
+  manualFilters: PropTypes.bool,
 }
 
 export const useFilters = props => {
@@ -37,17 +37,17 @@ export const useFilters = props => {
     manualFilters,
     disableFilters,
     hooks,
-    state: [{ filters }, setState]
+    state: [{ filters }, setState],
   } = props
 
   columns.forEach(column => {
     const { id, accessor, canFilter } = column
     column.canFilter = accessor
       ? getFirstDefined(
-        canFilter,
-        disableFilters === true ? false : undefined,
-        true
-      )
+          canFilter,
+          disableFilters === true ? false : undefined,
+          true
+        )
       : false
     // Was going to add this to the filter hook
     column.filterValue = filters[id]
@@ -60,8 +60,8 @@ export const useFilters = props => {
         return {
           ...old,
           filters: {
-            ...rest
-          }
+            ...rest,
+          },
         }
       }
 
@@ -69,8 +69,8 @@ export const useFilters = props => {
         ...old,
         filters: {
           ...filters,
-          [id]: val
-        }
+          [id]: val,
+        },
       }
     }, actions.setFilter)
   }
@@ -79,7 +79,7 @@ export const useFilters = props => {
     return setState(old => {
       return {
         ...old,
-        filters
+        filters,
       }
     }, actions.setAllFilters)
   }
@@ -134,7 +134,7 @@ export const useFilters = props => {
         }
         return {
           ...row,
-          subRows: filterRows(row.subRows)
+          subRows: filterRows(row.subRows),
         }
       })
 
@@ -156,6 +156,6 @@ export const useFilters = props => {
     ...props,
     setFilter,
     setAllFilters,
-    rows: filteredRows
+    rows: filteredRows,
   }
 }

src/hooks/useFlexLayout.js

@@ -5,7 +5,7 @@ import { getFirstDefined, sum } from '../utils'
 export const actions = {}
 
 const propTypes = {
-  defaultFlex: PropTypes.number
+  defaultFlex: PropTypes.number,
 }
 
 export const useFlexLayout = props => {
@@ -18,8 +18,8 @@ export const useFlexLayout = props => {
       getRowProps,
       getHeaderRowProps,
       getHeaderProps,
-      getCellProps
-    }
+      getCellProps,
+    },
   } = props
 
   columnsHooks.push((columns, api) => {
@@ -47,8 +47,8 @@ export const useFlexLayout = props => {
     const rowStyles = {
       style: {
         display: 'flex',
-        minWidth: `${sumWidth}px`
-      }
+        minWidth: `${sumWidth}px`,
+      },
     }
 
     api.rowStyles = rowStyles
@@ -59,8 +59,8 @@ export const useFlexLayout = props => {
     getHeaderProps.push(column => ({
       style: {
         boxSizing: 'border-box',
-        ...getStylesForColumn(column, columnMeasurements, defaultFlex, api)
-      }
+        ...getStylesForColumn(column, columnMeasurements, defaultFlex, api),
+      },
       // [refKey]: el => {
       //   renderedCellInfoRef.current[key] = {
       //     column,
@@ -80,8 +80,8 @@ export const useFlexLayout = props => {
             defaultFlex,
             undefined,
             api
-          )
-        }
+          ),
+        },
         // [refKey]: el => {
         //   renderedCellInfoRef.current[columnPathStr] = {
         //     column,
@@ -110,7 +110,7 @@ function getStylesForColumn(column, columnMeasurements, defaultFlex, api) {
   return {
     flex: `${flex} 0 auto`,
     width: `${width}px`,
-    maxWidth: `${maxWidth}px`
+    maxWidth: `${maxWidth}px`,
   }
 }
 
@@ -138,7 +138,7 @@ function getSizesForColumn(
     return {
       flex,
       width,
-      maxWidth
+      maxWidth,
     }
   }
 
@@ -148,7 +148,7 @@ function getSizesForColumn(
       width === 'auto'
         ? columnMeasurements[id] || defaultFlex
         : getFirstDefined(width, minWidth, defaultFlex),
-    maxWidth
+    maxWidth,
   }
 }
 

src/hooks/useGroupBy.js

@@ -8,13 +8,13 @@ import {
   mergeProps,
   applyPropHooks,
   defaultGroupByFn,
-  getFirstDefined
+  getFirstDefined,
 } from '../utils'
 
 defaultState.groupBy = []
 
 addActions({
-  toggleGroupBy: '__toggleGroupBy__'
+  toggleGroupBy: '__toggleGroupBy__',
 })
 
 const propTypes = {
@@ -23,12 +23,12 @@ const propTypes = {
     PropTypes.shape({
       aggregate: PropTypes.func,
       canGroupBy: PropTypes.bool,
-      Aggregated: PropTypes.any
+      Aggregated: PropTypes.any,
     })
   ),
   groupByFn: PropTypes.func,
   manualGrouping: PropTypes.bool,
-  aggregations: PropTypes.object
+  aggregations: PropTypes.object,
 }
 
 export const useGroupBy = props => {
@@ -43,7 +43,7 @@ export const useGroupBy = props => {
     disableGrouping,
     aggregations: userAggregations = {},
     hooks,
-    state: [{ groupBy }, setState]
+    state: [{ groupBy }, setState],
   } = props
 
   columns.forEach(column => {
@@ -52,10 +52,10 @@ export const useGroupBy = props => {
 
     column.canGroupBy = accessor
       ? getFirstDefined(
-        canGroupBy,
-        disableGrouping === true ? false : undefined,
-        true
-      )
+          canGroupBy,
+          disableGrouping === true ? false : undefined,
+          true
+        )
       : false
 
     column.Aggregated = column.Aggregated || column.Cell
@@ -68,12 +68,12 @@ export const useGroupBy = props => {
       if (resolvedToggle) {
         return {
           ...old,
-          groupBy: [...groupBy, id]
+          groupBy: [...groupBy, id],
         }
       }
       return {
         ...old,
-        groupBy: groupBy.filter(d => d !== id)
+        groupBy: groupBy.filter(d => d !== id),
       }
     }, actions.toggleGroupBy)
   }
@@ -97,14 +97,14 @@ export const useGroupBy = props => {
           {
             onClick: canGroupBy
               ? e => {
-                e.persist()
-                column.toggleGroupBy()
-              }
+                  e.persist()
+                  column.toggleGroupBy()
+                }
               : undefined,
             style: {
-              cursor: canGroupBy ? 'pointer' : undefined
+              cursor: canGroupBy ? 'pointer' : undefined,
             },
-            title: 'Toggle GroupBy'
+            title: 'Toggle GroupBy',
           },
           applyPropHooks(api.hooks.getGroupByToggleProps, column, api),
           props
@@ -169,7 +169,7 @@ export const useGroupBy = props => {
             values,
             subRows,
             depth,
-            index
+            index,
           }
           return row
         }
@@ -180,10 +180,18 @@ export const useGroupBy = props => {
 
     // Assign the new data
     return groupRecursively(rows, groupBy)
-  }, [manualGroupBy, groupBy, debug, rows, columns, userAggregations, groupByFn])
+  }, [
+    manualGroupBy,
+    groupBy,
+    debug,
+    rows,
+    columns,
+    userAggregations,
+    groupByFn,
+  ])
 
   return {
     ...props,
-    rows: groupedRows
+    rows: groupedRows,
   }
 }

src/hooks/usePagination.js

@@ -9,12 +9,12 @@ defaultState.pageSize = 10
 defaultState.pageIndex = 0
 
 addActions({
-  pageChange: '__pageChange__'
+  pageChange: '__pageChange__',
 })
 
 const propTypes = {
   // General
-  manualPagination: PropTypes.bool
+  manualPagination: PropTypes.bool,
 }
 
 export const usePagination = props => {
@@ -32,31 +32,34 @@ export const usePagination = props => {
         pageCount: userPageCount,
         filters,
         groupBy,
-        sortBy
+        sortBy,
       },
-      setState
-    ]
+      setState,
+    ],
   } = props
 
-  const pageOptions = useMemo(() => [...new Array(userPageCount)].map((d, i) => i), [userPageCount])
+  const pageOptions = useMemo(
+    () => [...new Array(userPageCount)].map((d, i) => i),
+    [userPageCount]
+  )
 
   const rowDep = disablePageResetOnDataChange ? null : rows
-  
+
   useLayoutEffect(() => {
     setState(
       old => ({
         ...old,
-        pageIndex: 0
+        pageIndex: 0,
       }),
       actions.pageChange
     )
   }, [setState, rowDep, filters, groupBy, sortBy])
-  
+
   const { pages, pageCount } = useMemo(() => {
     if (manualPagination) {
       return {
         pages: [rows],
-        pageCount: userPageCount
+        pageCount: userPageCount,
       }
     }
     if (debug) console.info('getPages')
@@ -77,7 +80,7 @@ export const usePagination = props => {
     return {
       pages,
       pageCount,
-      pageOptions
+      pageOptions,
     }
   }, [manualPagination, debug, rows, pageOptions, userPageCount, pageSize])
 
@@ -93,7 +96,7 @@ export const usePagination = props => {
       }
       return {
         ...old,
-        pageIndex
+        pageIndex,
       }
     }, actions.pageChange)
   }
@@ -113,7 +116,7 @@ export const usePagination = props => {
       return {
         ...old,
         pageIndex,
-        pageSize
+        pageSize,
       }
     }, actions.setPageSize)
   }
@@ -130,6 +133,6 @@ export const usePagination = props => {
     nextPage,
     setPageSize,
     pageIndex,
-    pageSize
+    pageSize,
   }
 }

src/hooks/useRows.js

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 
 const propTypes = {
-  subRowsKey: PropTypes.string
+  subRowsKey: PropTypes.string,
 }
 
 export const useRows = props => {
@@ -29,7 +29,7 @@ export const useRows = props => {
         path: [i], // used to create a key for each row even if not nested
         subRows,
         depth,
-        cells: [{}] // This is a dummy cell
+        cells: [{}], // This is a dummy cell
       }
 
       // Override common array functions (and the dummy cell's getCellProps function)
@@ -61,6 +61,6 @@ export const useRows = props => {
 
   return {
     ...props,
-    rows: accessedRows
+    rows: accessedRows,
   }
 }

src/hooks/useSimpleLayout.js

@@ -1,14 +1,14 @@
 export const useSimpleLayout = props => {
   const {
-    hooks: { columns: columnsHooks, getHeaderProps, getCellProps }
+    hooks: { columns: columnsHooks, getHeaderProps, getCellProps },
   } = props
 
   columnsHooks.push(columns => {
     getHeaderProps.push(column => ({
       style: {
         boxSizing: 'border-box',
-        width: column.width !== undefined ? `${column.width}px` : 'auto'
-      }
+        width: column.width !== undefined ? `${column.width}px` : 'auto',
+      },
     }))
 
     getCellProps.push(cell => {
@@ -16,8 +16,8 @@ export const useSimpleLayout = props => {
         style: {
           boxSizing: 'border-box',
           width:
-            cell.column.width !== undefined ? `${cell.column.width}px` : 'auto'
-        }
+            cell.column.width !== undefined ? `${cell.column.width}px` : 'auto',
+        },
       }
     })
 

src/hooks/useSortBy.js

@@ -8,13 +8,13 @@ import {
   applyPropHooks,
   getFirstDefined,
   defaultOrderByFn,
-  defaultSortByFn
+  defaultSortByFn,
 } from '../utils'
 
 defaultState.sortBy = []
 
 addActions({
-  sortByChange: '__sortByChange__'
+  sortByChange: '__sortByChange__',
 })
 
 const propTypes = {
@@ -22,7 +22,7 @@ const propTypes = {
   columns: PropTypes.arrayOf(
     PropTypes.shape({
       sortByFn: PropTypes.func,
-      defaultSortDesc: PropTypes.bool
+      defaultSortDesc: PropTypes.bool,
     })
   ),
   sortByFn: PropTypes.func,
@@ -30,7 +30,7 @@ const propTypes = {
   disableSorting: PropTypes.bool,
   defaultSortDesc: PropTypes.bool,
   disableMultiSort: PropTypes.bool,
-  disableSortRemove: PropTypes.bool
+  disableSortRemove: PropTypes.bool,
 }
 
 export const useSortBy = props => {
@@ -47,7 +47,7 @@ export const useSortBy = props => {
     defaultSortDesc,
     disableSortRemove,
     hooks,
-    state: [{ sortBy }, setState]
+    state: [{ sortBy }, setState],
   } = props
 
   columns.forEach(column => {
@@ -84,9 +84,11 @@ export const useSortBy = props => {
 
       if (!multi) {
         if (sortBy.length <= 1 && existingSortBy) {
-          if ((existingSortBy.desc && !resolvedDefaultSortDesc) ||
-            (!existingSortBy.desc && resolvedDefaultSortDesc)) {
-            action = disableSortRemove? 'toggle' : 'remove'
+          if (
+            (existingSortBy.desc && !resolvedDefaultSortDesc) ||
+            (!existingSortBy.desc && resolvedDefaultSortDesc)
+          ) {
+            action = disableSortRemove ? 'toggle' : 'remove'
           } else {
             action = 'toggle'
           }
@@ -109,23 +111,23 @@ export const useSortBy = props => {
         newSortBy = [
           {
             id: columnID,
-            desc: hasDescDefined ? desc : resolvedDefaultSortDesc
-          }
+            desc: hasDescDefined ? desc : resolvedDefaultSortDesc,
+          },
         ]
       } else if (action === 'add') {
         newSortBy = [
           ...sortBy,
           {
             id: columnID,
-            desc: hasDescDefined ? desc : resolvedDefaultSortDesc
-          }
+            desc: hasDescDefined ? desc : resolvedDefaultSortDesc,
+          },
         ]
       } else if (action === 'set') {
         newSortBy = sortBy.map(d => {
           if (d.id === columnID) {
             return {
               ...d,
-              desc
+              desc,
             }
           }
           return d
@@ -135,7 +137,7 @@ export const useSortBy = props => {
           if (d.id === columnID) {
             return {
               ...d,
-              desc: !existingSortBy.desc
+              desc: !existingSortBy.desc,
             }
           }
           return d
@@ -146,7 +148,7 @@ export const useSortBy = props => {
 
       return {
         ...old,
-        sortBy: newSortBy
+        sortBy: newSortBy,
       }
     }, actions.sortByChange)
   }
@@ -179,9 +181,9 @@ export const useSortBy = props => {
                 }
               : undefined,
             style: {
-              cursor: canSortBy ? 'pointer' : undefined
+              cursor: canSortBy ? 'pointer' : undefined,
             },
-            title: 'Toggle SortBy'
+            title: 'Toggle SortBy',
           },
           applyPropHooks(api.hooks.getSortByToggleProps, column, api),
           props
@@ -254,6 +256,6 @@ export const useSortBy = props => {
 
   return {
     ...props,
-    rows: sortedRows
+    rows: sortedRows,
   }
 }

src/hooks/useTable.js

@@ -10,7 +10,7 @@ const renderErr =
 const propTypes = {
   // General
   data: PropTypes.array.isRequired,
-  debug: PropTypes.bool
+  debug: PropTypes.bool,
 }
 
 export const useTable = (props, ...plugins) => {
@@ -41,7 +41,7 @@ export const useTable = (props, ...plugins) => {
     getRowProps: [],
     getHeaderRowProps: [],
     getHeaderProps: [],
-    getCellProps: []
+    getCellProps: [],
   }
 
   // The initial api
@@ -49,7 +49,7 @@ export const useTable = (props, ...plugins) => {
     ...props,
     data,
     state,
-    hooks
+    hooks,
   }
 
   if (debug) console.time('hooks')
@@ -83,7 +83,7 @@ export const useTable = (props, ...plugins) => {
       return flexRender(column[type], {
         ...api,
         ...column,
-        ...userProps
+        ...userProps,
       })
     }
 
@@ -92,7 +92,7 @@ export const useTable = (props, ...plugins) => {
       mergeProps(
         {
           key: ['header', column.id].join('_'),
-          colSpan: column.columns ? column.columns.length : 1
+          colSpan: column.columns ? column.columns.length : 1,
         },
         applyPropHooks(api.hooks.getHeaderProps, column, api),
         props
@@ -125,7 +125,7 @@ export const useTable = (props, ...plugins) => {
       headerGroup.getRowProps = (props = {}) =>
         mergeProps(
           {
-            key: [`header${i}`].join('_')
+            key: [`header${i}`].join('_'),
           },
           applyPropHooks(api.hooks.getHeaderRowProps, headerGroup, api),
           props
@@ -164,14 +164,14 @@ export const useTable = (props, ...plugins) => {
       const cell = {
         column,
         row,
-        value: row.values[column.id]
+        value: row.values[column.id],
       }
 
       cell.getCellProps = props => {
         const columnPathStr = [path, column.id].join('_')
         return mergeProps(
           {
-            key: ['cell', columnPathStr].join('_')
+            key: ['cell', columnPathStr].join('_'),
           },
           applyPropHooks(api.hooks.getCellProps, cell, api),
           props
@@ -187,7 +187,7 @@ export const useTable = (props, ...plugins) => {
         return flexRender(column[type], {
           ...api,
           ...cell,
-          ...userProps
+          ...userProps,
         })
       }
 

src/hooks/useTableState.js

@@ -11,12 +11,12 @@ export const useTableState = (
 ) => {
   let [state, setState] = userUseState({
     ...defaultState,
-    ...initialState
+    ...initialState,
   })
 
   const overriddenState = React.useMemo(() => {
     const newState = {
-      ...state
+      ...state,
     }
     if (overrides) {
       Object.keys(overrides).forEach(key => {
@@ -38,6 +38,6 @@ export const useTableState = (
 
   return React.useMemo(() => [overriddenState, reducedSetState], [
     overriddenState,
-    reducedSetState
+    reducedSetState,
   ])
 }

src/hooks/useTokenPagination.js

@@ -46,6 +46,6 @@ export const useTokenPagination = () => {
     nextPage,
     canPreviousPage,
     canNextPage,
-    resetPagination
+    resetPagination,
   }
 }

src/utils.js

@@ -70,8 +70,8 @@ export function defaultGroupByFn(rows, grouper) {
 export function defaultFilterFn(row, id, value, column) {
   return row.values[id] !== undefined
     ? String(row.values[id])
-      .toLowerCase()
-      .includes(String(value).toLowerCase())
+        .toLowerCase()
+        .includes(String(value).toLowerCase())
     : true
 }
 
@@ -83,7 +83,7 @@ export function setBy(obj = {}, path, value) {
       depth === path.length - 1 ? value : recurse(target, depth + 1)
     return {
       ...obj,
-      [key]: subValue
+      [key]: subValue,
     }
   }
 
@@ -95,11 +95,11 @@ export function getElementDimensions(element) {
   const style = window.getComputedStyle(element)
   const margins = {
     left: parseInt(style.marginLeft),
-    right: parseInt(style.marginRight)
+    right: parseInt(style.marginRight),
   }
   const padding = {
     left: parseInt(style.paddingLeft),
-    right: parseInt(style.paddingRight)
+    right: parseInt(style.paddingRight),
   }
   return {
     left: Math.ceil(rect.left),
@@ -111,7 +111,7 @@ export function getElementDimensions(element) {
     marginRight: margins.right,
     paddingLeft: padding.left,
     paddingRight: padding.right,
-    scrollWidth: element.scrollWidth
+    scrollWidth: element.scrollWidth,
   }
 }
 
@@ -134,9 +134,9 @@ export const mergeProps = (...groups) => {
       ...rest,
       style: {
         ...(props.style || {}),
-        ...style
+        ...style,
       },
-      className: [props.className, className].filter(Boolean).join(' ')
+      className: [props.className, className].filter(Boolean).join(' '),
     }
   })
   return props
@@ -152,7 +152,7 @@ export const warnUnknownProps = props => {
   if (Object.keys(props).length) {
     throw new Error(
       `Unknown options passed to useReactTable:
-      
+
 ${JSON.stringify(props, null, 2)}`
     )
   }