feat: breakpoints js and scss media variables exported (#89)

* feat: breakpoints js and scss media variables exported

fix #87

* feat: breakpoints withou validation

fix #87

* feat: validations breakpoints

* fix: change incorrect names and created a foreach to make it more simplified

87

src/styles/breakpoints.module.scss

@@ -0,0 +1,9 @@
+@import 'breakpoints';
+
+:export {
+  extraSmallSize: $extraSmallDeviceSizeMin;
+  smallSize: $smallDeviceSizeMin;
+  mediumSize: $mediumDeviceSizeMin;
+  largeSize: $largeDeviceSizeMin;
+  largestSize: $largestDeviceSizeMin;
+}

src/utils/breakpoints/breakpoints.js

@@ -0,0 +1,42 @@
+import variables from '../../styles/breakpoints.module.scss';
+
+const { extraSmallSize, smallSize, mediumSize, largeSize, largestSize } = variables;
+
+const events = new Map();
+events.set('from320', new Set());
+events.set('from360', new Set());
+events.set('from667', new Set());
+events.set('from1024', new Set());
+events.set('from1280', new Set());
+
+export function listenBreakpoint(breakpoint, callback) {
+  const callbacks = events.get(breakpoint);
+  if (!callbacks) {
+    console.warn('callback not found: ', breakpoint);
+    return;
+  }
+  callbacks.add(callback);
+}
+
+export function unlistenBreakpoint(breakpoint, callback) {
+  const callbacks = events.get(breakpoint);
+  if (!callbacks) {
+    console.warn('callback not found: ', breakpoint);
+    return;
+  }
+  callbacks.delete(callback);
+}
+const obj = {
+  from320: window.matchMedia(`(min-width: ${extraSmallSize})`),
+  from360: window.matchMedia(`(min-width: ${smallSize})`),
+  from667: window.matchMedia(`(min-width: ${mediumSize})`),
+  from1024: window.matchMedia(`(min-width: ${largeSize})`),
+  from1280: window.matchMedia(`(min-width: ${largestSize})`),
+};
+
+Object.keys(obj).forEach((key) => {
+  obj[key].addEventListener('change', (e) => {
+    const callbacks = events.get(key);
+    callbacks.forEach((callback) => callback(e.matches));
+  });
+});