Feat/string-breakpoints

README.md

@@ -59,6 +59,7 @@ import ReactDOM from "react-dom"
 import { createMedia } from "@artsy/fresnel"
 
 const { MediaContextProvider, Media } = createMedia({
+  // breakpoints values can be either strings or integers
   breakpoints: {
     sm: 0,
     md: 768,

src/Media.tsx

@@ -3,7 +3,12 @@
 import React from "react"
 import { createResponsiveComponents } from "./DynamicResponsive"
 import { MediaQueries } from "./MediaQueries"
-import { intersection, propKey, createClassName } from "./Utils"
+import {
+  intersection,
+  propKey,
+  createClassName,
+  castBreakpointsToIntegers,
+} from "./Utils"
 import { BreakpointConstraint } from "./Breakpoints"
 
 /**
@@ -214,7 +219,7 @@ export interface CreateMediaConfig {
    *
    * @see {@link createMedia}
    */
-  breakpoints: { [key: string]: number }
+  breakpoints: { [key: string]: number | string }
 
   /**
    * The interaction definitions for your application.
@@ -313,8 +318,10 @@ export function createMedia<
   BreakpointKey extends keyof MediaConfig["breakpoints"],
   Interaction extends keyof MediaConfig["interactions"]
 >(config: MediaConfig): CreateMediaResults<BreakpointKey, Interaction> {
+  const breakpoints = castBreakpointsToIntegers(config.breakpoints)
+
   const mediaQueries = new MediaQueries<BreakpointKey>(
-    config.breakpoints,
+    breakpoints,
     config.interactions || {}
   )
 

src/Utils.ts

@@ -43,3 +43,20 @@ export function createClassName(
     ),
   ].join("-")
 }
+
+/**
+ * Returns an object with every values casted to integers.
+ */
+export function castBreakpointsToIntegers(breakpoints: {
+  [key: string]: number | string
+}): { [key: string]: number } {
+  const keys = Object.keys(breakpoints)
+
+  return keys.reduce(
+    (previous, current, currentIndex) => ({
+      ...previous,
+      [keys[currentIndex]]: Number(breakpoints[current]),
+    }),
+    {}
+  )
+}

src/__test__/Utils.test.ts

@@ -0,0 +1,44 @@
+import { castBreakpointsToIntegers } from "../Utils"
+
+describe("utils functions", () => {
+  describe("casting breakpoints gave as either string or integers into integers", () => {
+    const breakpointsWithStrings = {
+      "extra-small": "0",
+      small: "768",
+      medium: "1024",
+      large: "1120",
+    }
+
+    const breakpointsWithIntegers = {
+      "extra-small": 0,
+      small: 768,
+      medium: 1024,
+      large: 1120,
+    }
+
+    const breakpointsWithMixedValues = {
+      "extra-small": 0,
+      small: 768,
+      medium: 1024,
+      large: 1120,
+    }
+
+    it("should return value as integers if given as strings", () => {
+      const results = castBreakpointsToIntegers(breakpointsWithStrings)
+
+      expect(results).toEqual(breakpointsWithIntegers)
+    })
+
+    it("should not touch the value if they are already numbers", () => {
+      const results = castBreakpointsToIntegers(breakpointsWithIntegers)
+
+      expect(results).toEqual(breakpointsWithIntegers)
+    })
+
+    it("should work the same with a mix of values", () => {
+      const results = castBreakpointsToIntegers(breakpointsWithMixedValues)
+
+      expect(results).toEqual(breakpointsWithIntegers)
+    })
+  })
+})