Removed deprecated recompose lib and old context-api implementation

.eslintrc

@@ -1,6 +1,8 @@
 {
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "rules": {
-    "comma-dangle": 0
+    "comma-dangle": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
   }
 }

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "printWidth": 100
 }

.storybook/webpack.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-module.exports = (baseConfig, env, config) => {
+module.exports = ({ baseConfig, env, config }) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     use: [

.travis.yml

@@ -1,10 +1,10 @@
 language: node_js
 node_js:
-  - '9'
+  - '12'
 
 branches:
   only:
-  - master
+    - master
 
 install:
   - 'npm install'

package.json

@@ -33,51 +33,50 @@
     "react": ">=16"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.3",
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
-    "@storybook/addon-info": "^4.1.13",
-    "@storybook/react": "^4.1.13",
-    "@types/jest": "^24.0.6",
-    "@types/node": "^11.9.5",
-    "@types/prop-types": "15.5.9",
-    "@types/react": "^16.8.4",
-    "@types/react-redux": "^5.0.21",
-    "@types/recompose": "^0.30.4",
-    "@types/storybook__react": "^4.0.1",
-    "ava": "^1.2.1",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.8.7",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/register": "^7.8.6",
+    "@storybook/addon-info": "^5.3.14",
+    "@storybook/react": "^5.3.14",
+    "@types/jest": "^25.1.4",
+    "@types/node": "^12.12.29",
+    "@types/prop-types": "15.7.3",
+    "@types/react": "^16.9.23",
+    "@types/react-redux": "^7.1.7",
+    "@types/storybook__react": "^5.2.1",
+    "ava": "^3.5.0",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.5",
+    "babel-loader": "^8.0.6",
     "babel-plugin-lodash": "^3.3.4",
-    "core-js": "^2.6.5",
-    "cross-env": "^5.2.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.9.1",
-    "eslint": "^5.14.1",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.12.4",
-    "jest": "^24.1.0",
-    "jsdom": "^13.2.0",
+    "core-js": "^3.6.4",
+    "cross-env": "^7.0.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "jest": "^25.1.0",
+    "jsdom": "^16.2.1",
     "jsdom-global": "^3.0.2",
     "lodash-webpack-plugin": "^0.11.5",
-    "node-libs-browser": "^2.2.0",
-    "react": "^16.8.3",
-    "react-docgen-typescript-loader": "^3.0.1",
+    "node-libs-browser": "^2.2.1",
+    "react": "^16.13.0",
+    "react-docgen-typescript-loader": "^3.7.1",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
-    "react-dom": "^16.8.3",
-    "rimraf": "^2.6.3",
-    "ts-jest": "^24.0.0",
-    "ts-loader": "^5.3.3",
-    "typescript": "^3.3.3333",
-    "uglifyjs-webpack-plugin": "^2.1.1",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.0"
+    "react-dom": "^16.13.0",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^25.2.1",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.7.5",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   },
   "dependencies": {
     "immutable": "^3.8.2",
@@ -91,17 +90,15 @@
     "lodash.isequal": "^4.5.0",
     "lodash.isfinite": "^3.3.2",
     "lodash.isstring": "^4.0.1",
-    "lodash.merge": "^4.6.1",
+    "lodash.merge": "^4.6.2",
     "lodash.pick": "^4.4.0",
     "lodash.pickby": "^4.6.0",
     "lodash.range": "^3.2.0",
     "lodash.union": "^4.6.0",
     "lodash.uniq": "^4.5.0",
-    "max-safe-integer": "^2.0.0",
     "prop-types": "^15.7.2",
-    "react-redux": "^5.1.1",
-    "recompose": "^0.30.0",
-    "redux": "^4.0.1",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5",
     "reselect": "^4.0.0"
   },
   "ava": {

src/actions/index.js

@@ -7,19 +7,19 @@ import {
   GRIDDLE_TOGGLE_SETTINGS,
   GRIDDLE_TOGGLE_COLUMN,
   GRIDDLE_SET_PAGE_SIZE,
-  GRIDDLE_UPDATE_STATE,
+  GRIDDLE_UPDATE_STATE
 } from '../constants';
 
 export function getNext() {
   return {
     type: GRIDDLE_NEXT_PAGE
-  }
+  };
 }
 
 export function getPrevious() {
   return {
     type: GRIDDLE_PREVIOUS_PAGE
-  }
+  };
 }
 
 export function setPage(pageNumber) {
@@ -33,39 +33,39 @@ export function setFilter(filter) {
   return {
     type: GRIDDLE_SET_FILTER,
     filter
-  }
+  };
 }
 
 export function setSortColumn(sortProperties) {
   return {
     type: GRIDDLE_SET_SORT,
     sortProperties
-  }
+  };
 }
 
 export function toggleSettings() {
   return {
     type: GRIDDLE_TOGGLE_SETTINGS
-  }
+  };
 }
 
 export function toggleColumn(columnId) {
   return {
     type: GRIDDLE_TOGGLE_COLUMN,
     columnId
-  }
+  };
 }
 
 export function setPageSize(pageSize) {
   return {
     type: GRIDDLE_SET_PAGE_SIZE,
     pageSize
-  }
+  };
 }
 
 export function updateState(newState) {
   return {
     type: GRIDDLE_UPDATE_STATE,
     newState
-  }
+  };
 }

src/components/CellContainer.js

@@ -1,9 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from '../utils/griddleConnect';
-import getContext from 'recompose/getContext';
-import mapProps from 'recompose/mapProps';
-import compose from 'recompose/compose';
 
 import {
   customComponentSelector,
@@ -19,7 +16,9 @@ function hasWidthOrStyles(cellProperties) {
 }
 
 function getCellStyles(cellProperties, originalStyles) {
-  if (!hasWidthOrStyles(cellProperties)) { return originalStyles; }
+  if (!hasWidthOrStyles(cellProperties)) {
+    return originalStyles;
+  }
 
   let styles = originalStyles;
 
@@ -43,27 +42,25 @@ const mapStateToProps = () => {
       customComponent: customComponentSelector(state, props),
       cellProperties: cellPropertiesSelector(state, props),
       className: classNamesForComponentSelector(state, 'Cell'),
-      style: stylesForComponentSelector(state, 'Cell'),
+      style: stylesForComponentSelector(state, 'Cell')
     };
   };
-}
+};
 
-const ComposedCellContainer = OriginalComponent => compose(
-  connect(mapStateToProps),
-  mapProps(props => {
-    return ({
-    ...props.cellProperties.extraData,
-    ...props,
-    className: valueOrResult(props.cellProperties.cssClassName, props) || props.className,
-    style: getCellStyles(props.cellProperties, props.style),
-    value: props.customComponent ?
-      <props.customComponent {...props.cellProperties.extraData} {...props} /> :
-      props.value
-  })}),
-)(props =>
-  <OriginalComponent
-    {...props}
-  />
-);
+const ComposedCellContainer = (OriginalComponent) =>
+  connect(mapStateToProps)((props) => {
+    const cellContainerProps = {
+      ...props.cellProperties.extraData,
+      ...props,
+      className: valueOrResult(props.cellProperties.cssClassName, props) || props.className,
+      style: getCellStyles(props.cellProperties, props.style),
+      value: props.customComponent ? (
+        <props.customComponent {...props.cellProperties.extraData} {...props} />
+      ) : (
+        props.value
+      )
+    };
+    return <OriginalComponent {...cellContainerProps} />;
+  });
 
 export default ComposedCellContainer;

src/components/FilterEnhancer.js

@@ -1,18 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import compose from 'recompose/compose';
-import mapProps from 'recompose/mapProps';
-import getContext from 'recompose/getContext';
 import { combineHandlers } from '../utils/compositionUtils';
 
-const EnhancedFilter = OriginalComponent => compose(
-  getContext({
-    events: PropTypes.object
-  }),
-  mapProps(({ events: { onFilter }, ...props }) => ({
+const EnhancedFilter = (OriginalComponent) => (props) => {
+  const { onFilter } = props.context.events;
+  const filterProps = {
     ...props,
-    setFilter: combineHandlers([onFilter, props.setFilter]),
-  }))
-)(props => <OriginalComponent {...props} />);
+    setFilter: combineHandlers([onFilter, props.setFilter])
+  };
+  return <OriginalComponent {...filterProps} />;
+};
 
 export default EnhancedFilter;

src/components/Layout.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
-const component = ({Table, Pagination, Filter, SettingsWrapper, Style, className, style}) => (
+const component = ({ Table, Pagination, Filter, SettingsWrapper, Style, className, style }) => (
   <div className={className} style={style}>
     {Style && <Style />}
     <Filter />
     <SettingsWrapper />
     <Table />
     <Pagination />
   </div>
-)
+);
 
 export default component;

src/components/LayoutContainer.js

@@ -1,35 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from '../utils/griddleConnect';
-import getContext from 'recompose/getContext';
-import mapProps from 'recompose/mapProps';
-import compose from 'recompose/compose';
 
-import { classNamesForComponentSelector, stylesForComponentSelector } from '../selectors/dataSelectors';
+import {
+  classNamesForComponentSelector,
+  stylesForComponentSelector
+} from '../selectors/dataSelectors';
 
-const EnhancedLayout = OriginalComponent => compose(
-  getContext({
-    components: PropTypes.object,
-  }),
-  connect(
-    (state, props) => ({
-      className: classNamesForComponentSelector(state, 'Layout'),
-      style: stylesForComponentSelector(state, 'Layout'),
-    })
-  ),
-  mapProps( props => ({
-    Table: props.components.Table,
-    Pagination: props.components.Pagination,
-    Filter: props.components.Filter,
-    SettingsWrapper: props.components.SettingsWrapper,
-    Style: props.components.Style,
-    className: props.className,
-    style: props.style,
-  })),
-)(props => (
-  <OriginalComponent
-    {...props}
-  />
-));
+const EnhancedLayout = (OriginalComponent) =>
+  connect((state, props) => ({
+    className: classNamesForComponentSelector(state, 'Layout'),
+    style: stylesForComponentSelector(state, 'Layout')
+  }))((props) => {
+    const layoutProps = {
+      Table: props.context.components.Table,
+      Pagination: props.context.components.Pagination,
+      Filter: props.context.components.Filter,
+      SettingsWrapper: props.context.components.SettingsWrapper,
+      Style: props.context.components.Style,
+      className: props.className,
+      style: props.style
+    };
+    return <OriginalComponent {...layoutProps} />;
+  });
 
 export default EnhancedLayout;