From acb0409ee083e5b0cdce1fca6b26c8abdc69375e Mon Sep 17 00:00:00 2001
From: Chandelier Axel <axelchandelier0@gmail.com>
Date: Sat, 17 Jul 2021 18:58:45 +0200
Subject: [PATCH 1/2] feat: createMedia API now accepting either strings or
 integers for breakpoints

---
 src/Media.tsx              | 13 ++++++++---
 src/Utils.ts               | 17 +++++++++++++++
 src/__test__/Utils.test.ts | 44 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/__test__/Utils.test.ts

diff --git a/src/Media.tsx b/src/Media.tsx
index ae75251..cdbac24 100644
--- a/src/Media.tsx
+++ b/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 || {}
   )
 
diff --git a/src/Utils.ts b/src/Utils.ts
index ebe6de9..ee79cf5 100644
--- a/src/Utils.ts
+++ b/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]),
+    }),
+    {}
+  )
+}
diff --git a/src/__test__/Utils.test.ts b/src/__test__/Utils.test.ts
new file mode 100644
index 0000000..3b93093
--- /dev/null
+++ b/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)
+    })
+  })
+})

From 0f213c24bd64538dced6c3ea0aec45c5c4e44abd Mon Sep 17 00:00:00 2001
From: Chandelier Axel <axelchandelier0@gmail.com>
Date: Sat, 17 Jul 2021 19:01:22 +0200
Subject: [PATCH 2/2] documentation: updated the basic example to indicate the
 change

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 8002390..c87228e 100644
--- a/README.md
+++ b/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,