Merge pull request #5 from smooth-code/breakpoints

feat: add up, down and between

Author: gregberge

.babelrc

@@ -0,0 +1,32 @@
+const config = {
+  presets: [
+    ['@babel/preset-env', { loose: true, modules: false }],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-object-rest-spread',
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+  ],
+}
+
+if (process.env.NODE_ENV === 'lib') {
+  module.exports = Object.assign({}, config, {
+    plugins: [
+      ...config.plugins,
+      ['@babel/plugin-transform-modules-commonjs', { loose: true }],
+    ],
+  })
+} else if (process.env.NODE_ENV === 'rollup') {
+  module.exports = Object.assign({}, config, {
+    plugins: [...config.plugins, '@babel/plugin-external-helpers'],
+  })
+} else if (process.env.NODE_ENV === 'test') {
+  module.exports = Object.assign({}, config, {
+    plugins: [
+      ...config.plugins,
+      ['@babel/plugin-transform-modules-commonjs', { loose: true }],
+    ],
+  })
+} else {
+  module.exports = config
+}

.babelrc.js

@@ -4,6 +4,7 @@ module.exports = {
   parser: 'babel-eslint',
   env: {
     browser: true,
+    jest: true,
   },
   rules: {
     'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupTestFrameworkScriptFile: './unit/setupTests.js',
+}

jest.config.js

@@ -13,47 +13,54 @@
     "build:lib": "cross-env BABEL_ENV=lib babel --out-dir build src",
     "build:rollup": "cross-env BABEL_ENV=rollup rollup -c",
     "build:watch": "yarn build:lib --watch",
-    "ci": "yarn lint",
+    "ci": "yarn lint && yarn test",
     "deploy:docs": "firebase deploy",
     "dev": "styleguidist server",
     "lint": "eslint .",
     "prebuild": "shx rm -rf build",
-    "release": "standard-version && conventional-github-releaser -p angular && yarn build && yarn deploy:docs"
+    "release": "standard-version && conventional-github-releaser -p angular && yarn build && yarn deploy:docs",
+    "test": "jest"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
+    "@babel/cli": "^7.0.0-beta.46",
+    "@babel/core": "^7.0.0-beta.46",
+    "@babel/plugin-external-helpers": "^7.0.0-beta.46",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.46",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.46",
+    "@babel/preset-env": "^7.0.0-beta.46",
+    "@babel/preset-react": "^7.0.0-beta.46",
+    "babel-core": "^7.0.0-0",
+    "babel-eslint": "^8.2.3",
+    "babel-jest": "^22.4.3",
+    "babel-loader": "^8.0.0-beta.2",
     "conventional-github-releaser": "^2.0.2",
     "cross-env": "^5.1.4",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
     "jest": "^22.4.3",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
-    "react-styleguidist": "^7.0.1",
-    "rollup": "^0.57.1",
-    "rollup-plugin-babel": "^3.0.3",
+    "jest-styled-components": "^5.0.1",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-styleguidist": "^7.0.8",
+    "react-test-renderer": "^16.3.2",
+    "rollup": "^0.58.2",
+    "rollup-plugin-babel": "^4.0.0-beta.4",
     "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^3.0.0",
     "shx": "^0.2.2",
     "standard-version": "^4.3.0",
-    "styled-components": "^3.2.5",
-    "uglifyjs-webpack-plugin": "^1.2.4",
-    "webpack": "^4.4.1"
+    "styled-components": "^3.2.6",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "webpack": "^4.6.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",

package.json

@@ -14,7 +14,7 @@ function generateBreakPoint(breakpoint) {
       width: 100%;
       min-height: 1px;
 
-      @media (min-width: ${props => props.theme.breakPoints[breakpoint]}px) {
+      @media (min-width: ${props => props.theme.breakpoints[breakpoint]}px) {
         flex-basis: 0;
         flex-grow: 1;
         max-width: 100%;
@@ -37,7 +37,7 @@ function generateBreakPoint(breakpoint) {
           min-height: 1px;
 
           @media (min-width: ${props =>
-            props.theme.breakPoints[breakpoint]}px) {
+            props.theme.breakpoints[breakpoint]}px) {
               flex: 0 0 ${width};
               max-width: ${width === 'auto' ? 'none' : width};
               ${width === 'auto' ? 'width: auto;' : ''}
@@ -74,7 +74,7 @@ const ColComponent = ({ className, xs, sm, md, lg, xl, theme, ...props }) => (
 const Col = styled(handleRef(ColComponent))`
   padding-left: 15px;
   padding-right: 15px;
-  ${props => Object.keys(props.theme.breakPoints).map(generateBreakPoint)};
+  ${props => Object.keys(props.theme.breakpoints).map(generateBreakPoint)};
 `
 
 Col.propTypes = {

src/Col.js

@@ -0,0 +1,7 @@
+export default {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+}

src/style/defaultBreakpoints.js

@@ -8,6 +8,7 @@ import {
   parseToRgb,
   mix,
 } from 'polished'
+import defaultBreakpoints from './defaultBreakpoints'
 import { th, mixin } from '../utils'
 
 /* eslint-disable no-unused-expressions */
@@ -173,13 +174,7 @@ export const transitionBase = 'all .2s ease-in-out'
 
 // Breakpoints
 
-export const breakPoints = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-}
+export const breakpoints = defaultBreakpoints
 
 // Color levels
 

src/style/defaultTheme.js

@@ -1,14 +1,91 @@
 import { css } from 'styled-components'
-import { breakPoints as defaultBreakPoints } from './style/defaultTheme'
+import defaultBreakpoints from './style/defaultBreakpoints'
 
-const getBreakPoints = props =>
-  (props.theme && props.theme.breakPoints) || defaultBreakPoints
+export const getBreakpoints = props =>
+  (props && props.theme && props.theme.breakpoints) || defaultBreakpoints
 
-export const upTo = (breakPoint, code) => css`
-  @media (min-width: ${props => getBreakPoints(props)[breakPoint]}px) {
-    ${code};
+export const getBreakpointsEntries = props => {
+  const breakpoints = getBreakpoints(props)
+  const entries = Object.keys(breakpoints).reduce(
+    (entries, key) => [...entries, [key, breakpoints[key]]],
+    [],
+  )
+  return entries.sort((a, b) => a[1] > b[1])
+}
+
+export const getNextBreakpoint = (name, props) => {
+  const entries = getBreakpointsEntries(props)
+  const index = entries.findIndex(([key]) => key === name)
+  return index < entries.length - 1 ? entries[index + 1][0] : null
+}
+
+export const getPreviousBreakpoint = (name, props) => {
+  const entries = getBreakpointsEntries(props)
+  const index = entries.findIndex(([key]) => key === name)
+  return index >= 1 ? entries[index - 1][0] : null
+}
+
+/**
+ * Minimum breakpoint width.
+ * Null for the smallest breakpoint.
+ */
+export const getBreakpointMin = (name, props) => {
+  const breakpoints = getBreakpoints(props)
+  const breakPoint = breakpoints[name]
+  return breakPoint !== 0 ? breakPoint : null
+}
+
+/**
+ * Maximum breakpoint width. Null for the largest (last) breakpoint.
+ * The maximum value is calculated as the minimum of the next one less 0.02px
+ * to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+ * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+ * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+ * See https://bugs.webkit.org/show_bug.cgi?id=178261
+ */
+export const getBreakpointMax = (name, props) => {
+  const next = getNextBreakpoint(name, props)
+  return next ? getBreakpointMin(next, props) - 0.02 : null
+}
+
+export const up = (name, code) => props => {
+  const value = getBreakpointMin(name, props)
+  if (value === null) return code
+  return css`
+    @media (min-width: ${value}px) {
+      ${code};
+    }
+  `
+}
+
+export const down = (name, code) => props => {
+  const value = getBreakpointMax(name, props)
+  if (value === null) return code
+  return css`
+    @media (max-width: ${value}px) {
+      ${code};
+    }
+  `
+}
+
+export const between = (lower, upper, code) => props => {
+  const min = getBreakpointMin(lower, props)
+  const max = getBreakpointMax(upper, props)
+  const upperPrevious = getPreviousBreakpoint(upper, props)
+  const previousMax = getBreakpointMax(upperPrevious, props)
+
+  if (min !== null && max !== null) {
+    return css`
+      @media (min-width: ${min}px) and (max-width: ${previousMax}px) {
+        ${code};
+      }
+    `
   }
-`
+  if (max === null) return up(lower, code)(props)
+  if (min === null) return down(upperPrevious, code)(props)
+  return null
+}
+
 export const th = (name, modifier = x => x) => props => {
   function run(fn) {
     const next = fn(props)