refactor(context): Switch to new context API

.babelrc

@@ -34,9 +34,6 @@
     ]
   ],
   "env": {
-    "development": {
-      "plugins": ["flow-react-proptypes"]
-    },
     "test": {
       "plugins": [
         [

.eslintrc

@@ -31,7 +31,6 @@
   "rules": {
     "no-console": 2,
     "jsx-a11y/href-no-hash": 0,
-    "react/prop-types": 0,
     "react/no-deprecated": 2,
     "react/jsx-filename-extension": 0,
     "react/require-default-props": 0,

package.json

@@ -89,8 +89,8 @@
     "postcss-nesting": "4.2.1",
     "prettier": "1.10.2",
     "raw-loader": "0.5.1",
-    "react": "16.2.0",
-    "react-dom": "16.2.0",
+    "react": "16.3.0-alpha.0",
+    "react-dom": "16.3.0-alpha.0",
     "react-element-to-jsx-string": "13.1.0",
     "react-test-renderer": "16.2.0",
     "regenerator-runtime": "0.11.1",
@@ -140,7 +140,7 @@
     "commit": "git-cz",
     "contributors:add": "all-contributors add",
     "contributors:gen": "all-contributors generate",
-    "format-all": "git ls-files {src,test,storybook}*.{js,css} | xargs yarn format",
+    "format-all": "git ls-files {src,test,storybook,flow-typed}*.{js,css} | xargs yarn format",
     "format": "prettier --write --single-quote --no-semi --trailing-comma es5",
     "lint:css": "stylelint src/*.css stories/*.css",
     "lint:flow": "flow stop && flow --show-all-errors --include-warnings",
@@ -166,8 +166,7 @@
     }
   },
   "peerDependencies": {
-    "prop-types": ">=15",
-    "react": ">=15"
+    "react": ">=16.3"
   },
   "dependencies": {
     "cxs": "https://github.com/arahansen/cxs#d593d14e708c4f5c17cb2105cb9435ae87ade362",

scripts/webpack.config.js

@@ -46,7 +46,6 @@ module.exports = {
   devtool: 'source-map',
   externals: {
     react: 'react',
-    'prop-types': 'prop-types',
   },
   module: {
     rules: [

src/asGrid/index.js

@@ -1,33 +1,46 @@
 // @flow
 import * as React from 'react'
 import { compact } from 'lodash'
-import type {
-  OneResolutionGrid,
-  ConfigProviderContext,
-  GridProps,
-} from '../types'
+import type { OneResolutionGrid, GridProps } from '../types'
 import { styles, getCol } from './grid.styles'
 import { getValue } from '../utils'
 import asCore from '../core/asCore'
+import { configProviderContext } from '../configProvider'
 
 const resolutionProperties = ['align', 'justify', 'size']
 
 export default function asGrid(
   Component: React.ComponentType<*> | string
 ): React.ComponentType<GridProps> {
-  function Grid(
-    { align, className, justify, size, innerRef, ...props }: OneResolutionGrid,
-    context: ConfigProviderContext
-  ) {
-    const classes = compact([
-      styles.grid,
-      getCol(size, getValue(context, 'columns')),
-      className,
-      align && styles[`${align}Align`],
-      justify && styles[`${justify}Justify`],
-    ])
+  function Grid({
+    align,
+    className,
+    justify,
+    size,
+    innerRef,
+    ...props
+  }: OneResolutionGrid) {
+    return (
+      <configProviderContext.Consumer>
+        {context => {
+          const classes = compact([
+            styles.grid,
+            getCol(size, getValue(context, 'columns')),
+            className,
+            align && styles[`${align}Align`],
+            justify && styles[`${justify}Justify`],
+          ])
 
-    return <Component {...props} ref={innerRef} className={classes.join(' ')} />
+          return (
+            <Component
+              {...props}
+              ref={innerRef}
+              className={classes.join(' ')}
+            />
+          )
+        }}
+      </configProviderContext.Consumer>
+    )
   }
 
   return asCore(Grid, resolutionProperties)

src/asLayout/index.js

@@ -1,41 +1,47 @@
 // @flow
 import * as React from 'react'
 import { compact } from 'lodash'
-import type {
-  OneResolutionLayout,
-  ConfigProviderContext,
-  LayoutProps,
-} from '../types'
+import type { OneResolutionLayout, LayoutProps } from '../types'
 import getStyles from './layout.styles'
 import asCore from '../core/asCore'
 import { getValues } from '../utils/index'
+import { configProviderContext } from '../configProvider'
 
 const resolutionProperties = ['fixed', 'height', 'overflow']
 
 export default function asLayout(
   Component: React.ComponentType<*> | string
 ): React.ComponentType<LayoutProps> {
-  function Layout(
-    {
-      className,
-      fixed,
-      height,
-      overflow,
-      innerRef,
-      ...props
-    }: OneResolutionLayout,
-    context: ConfigProviderContext
-  ) {
-    const styles = getStyles(getValues(context, props))
-    const classes = compact([
-      className,
-      fixed && styles[`${fixed}Fixed`],
-      height ? styles[`${height}Height`] : styles.fitHeight,
-      overflow && styles.overflow,
-      styles.layout,
-    ])
+  function Layout({
+    className,
+    fixed,
+    height,
+    overflow,
+    innerRef,
+    ...props
+  }: OneResolutionLayout) {
+    return (
+      <configProviderContext.Consumer>
+        {context => {
+          const styles = getStyles(getValues(context, props))
+          const classes = compact([
+            className,
+            fixed && styles[`${fixed}Fixed`],
+            height ? styles[`${height}Height`] : styles.fitHeight,
+            overflow && styles.overflow,
+            styles.layout,
+          ])
 
-    return <Component ref={innerRef} {...props} className={classes.join(' ')} />
+          return (
+            <Component
+              ref={innerRef}
+              {...props}
+              className={classes.join(' ')}
+            />
+          )
+        }}
+      </configProviderContext.Consumer>
+    )
   }
   return asCore(Layout, resolutionProperties)
 }

src/col/index.js

@@ -2,23 +2,30 @@
 import * as React from 'react'
 import Grid from '../grid'
 import { getValues } from '../utils'
-import type { GridProps, ConfigProviderContext } from '../types'
+import type { GridProps } from '../types'
+import { configProviderContext } from '../configProvider'
 
-export default function Col(props: GridProps, context: ConfigProviderContext) {
+export default function Col(props: GridProps) {
   if (typeof props.margin !== 'undefined') {
     return <Grid {...props} />
   }
 
-  const { gutter, verticalGutter } = getValues(context, props)
   return (
-    <Grid
-      {...{
-        marginTop: 0,
-        marginRight: gutter / 2,
-        marginBottom: verticalGutter,
-        marginLeft: gutter / 2,
+    <configProviderContext.Consumer>
+      {context => {
+        const { gutter, verticalGutter } = getValues(context, props)
+        return (
+          <Grid
+            {...{
+              marginTop: 0,
+              marginRight: gutter / 2,
+              marginBottom: verticalGutter,
+              marginLeft: gutter / 2,
+            }}
+            {...props}
+          />
+        )
       }}
-      {...props}
-    />
+    </configProviderContext.Consumer>
   )
 }

src/configProvider/index.js

@@ -1,7 +1,8 @@
 // @flow
+/* eslint-disable react/no-unused-prop-types */
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import type {
+  Context,
   ConfigProviderContext,
   DisplayAliases,
   SpacingAliases,
@@ -24,42 +25,27 @@ type Props = {
   verticalGutter?: number,
 }
 
-export const ConfigContextPropTypes = {
-  gymnast: PropTypes.shape({
-    base: PropTypes.number,
-    columns: PropTypes.number,
-    displayAliases: PropTypes.shape({}),
-    fallbackDisplayKey: PropTypes.string,
-    gutter: PropTypes.number,
-    maxPageWidth: PropTypes.number,
-    minPageWidth: PropTypes.number,
-    pageMargin: PropTypes.shape({}),
-    spacingAliases: PropTypes.shape({}),
-    verticalGutter: PropTypes.number,
-  }),
-}
-
-export default class ConfigProvider extends React.Component<Props> {
-  static contextTypes = ConfigContextPropTypes
-  static childContextTypes = ConfigContextPropTypes
-
-  getChildContext(): ConfigProviderContext {
-    const {
-      gutter = defaults.gutter,
-      verticalGutter = gutter,
-      children,
-      ...props
-    } = this.props
+/* eslint-disable flowtype/generic-spacing */
+export const configProviderContext: Context<
+  ConfigProviderContext
+> = React.createContext({})
+/* eslint-enable flowtype/generic-spacing */
 
-    return {
-      gymnast: {
+export default function ConfigProvider({
+  gutter = defaults.gutter,
+  verticalGutter = gutter,
+  children,
+  ...props
+}: Props) {
+  return (
+    <configProviderContext.Provider
+      value={{
         gutter,
         verticalGutter,
         ...props,
-      },
-    }
-  }
-  render() {
-    return this.props.children || null
-  }
+      }}
+    >
+      {children}
+    </configProviderContext.Provider>
+  )
 }