refactor(dashboard-v2): use breakpoint names instead of minWidth in Slider props

packages/dashboard-v2/src/components/Slider/Slider.js

@@ -86,8 +86,20 @@ Slider.propTypes = {
   slides: PropTypes.arrayOf(PropTypes.node.isRequired),
   breakpoints: PropTypes.arrayOf(
     PropTypes.shape({
-      minWidth: PropTypes.number.isRequired,
+      /**
+       * Breakpoint name as defined in Tailwind config. If not defined, config
+       * will be applied to all non-configured screen sizes.
+       */
+      name: PropTypes.string,
+      /**
+       * Number of slides visible for a given breakpoint.
+       */
       visibleSlides: PropTypes.number.isRequired,
+      /**
+       * Whether or not the list should be scrollable horizontally at the given breakpoint.
+       * If set to false, all slides will be visible & rendered in a column.
+       */
+      scrollable: PropTypes.bool.isRequired,
     })
   ),
 };
@@ -95,18 +107,17 @@ Slider.propTypes = {
 Slider.defaultProps = {
   breakpoints: [
     {
-      minWidth: parseInt(theme.screens.xl),
+      name: "xl",
       scrollable: true,
       visibleSlides: 3,
     },
     {
-      minWidth: parseInt(theme.screens.md, 10),
+      name: "md",
       scrollable: true,
       visibleSlides: 2,
     },
     {
       // For the smallest screens, we won't scroll but instead stack the slides vertically.
-      minWidth: -Infinity,
       scrollable: false,
       visibleSlides: 1,
     },

packages/dashboard-v2/src/components/Slider/useActiveBreakpoint.js

@@ -1,11 +1,26 @@
 import { useEffect, useMemo, useCallback, useState } from "react";
 import { useWindowSize } from "react-use";
 
+import theme from "../../lib/theme";
+
+const { screens } = theme;
+
 export default function useActiveBreakpoint(breakpoints) {
   const { width: windowWidth } = useWindowSize();
-  // Since our breakpoints are setup with min-width rule, we need to sort them from largest to smallest
   const monitoredBreakpoints = useMemo(
-    () => breakpoints.slice().sort(({ minWidth: widthA }, { minWidth: widthB }) => widthB - widthA),
+    () =>
+      breakpoints
+        .slice()
+        // Map breakpoint names to their min-width configured in Tailwind
+        .map(({ name, ...config }) => {
+          // If breakpoint name is not configured,
+          // we'll apply this config to all unmatched breakpoints.
+          const minWidth = screens[name] ? parseInt(screens[name], 10) : -Infinity;
+
+          return { minWidth, ...config };
+        })
+        // Since our breakpoints are setup with min-width rule, we need to sort them from largest to smallest
+        .sort(({ minWidth: widthA }, { minWidth: widthB }) => widthB - widthA),
     [breakpoints]
   );
   const findActiveBreakpoint = useCallback(