Add new breakpoint-helpers

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/cyan-radios-stand.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add new breakpoint helpers up(), down() and current breakpoint to help you use our breakpoints in your React components.

packages/canon/report.api.md

@@ -1143,6 +1143,13 @@ export const Tooltip: {
   >;
 };
 
+// @public (undocumented)
+export const useBreakpoint: () => {
+  breakpoint: Breakpoint;
+  up: (key: Breakpoint) => boolean;
+  down: (key: Breakpoint) => boolean;
+};
+
 // @public (undocumented)
 export const useIcons: () => IconContextProps;
 

packages/canon/src/hooks/useBreakpoint.ts

@@ -25,18 +25,38 @@ export const breakpoints: { name: string; id: Breakpoint; value: number }[] = [
   { name: 'Extra Large', id: 'xl', value: 1536 },
 ];
 
-export const useBreakpoint = (): Breakpoint => {
-  // TODO: Perhaps refactor for useMediaQuery to accept an array of queries
+const getBreakpointValue = (key: Breakpoint): number => {
+  const breakpoint = breakpoints.find(bp => bp.id === key);
+  if (!breakpoint) {
+    throw new Error(`Invalid breakpoint key: ${key}`);
+  }
+  return breakpoint.value;
+};
+
+/** @public */
+export const useBreakpoint = () => {
   const matches = breakpoints.map(breakpoint => {
     const match = useMediaQuery(`(min-width: ${breakpoint.value}px)`);
     return match;
   });
 
+  let breakpoint: Breakpoint = breakpoints[0].id;
   for (let i = matches.length - 1; i >= 0; i--) {
     if (matches[i]) {
-      return breakpoints[i].id;
+      breakpoint = breakpoints[i].id;
+      break;
     }
   }
 
-  return breakpoints[0].id;
+  return {
+    breakpoint,
+    up: (key: Breakpoint): boolean => {
+      const value = getBreakpointValue(key);
+      return useMediaQuery(`(min-width: ${value}px)`);
+    },
+    down: (key: Breakpoint): boolean => {
+      const value = getBreakpointValue(key);
+      return useMediaQuery(`(max-width: ${value - 1}px)`);
+    },
+  };
 };

packages/canon/src/hooks/useResponsiveValue.ts

@@ -20,12 +20,10 @@ import { useBreakpoint, breakpoints } from './useBreakpoint';
 type ResponsiveValue = string | Partial<Record<Breakpoint, string>>;
 
 export const useResponsiveValue = (value: ResponsiveValue) => {
-  const currentBreakpoint = useBreakpoint();
+  const { breakpoint } = useBreakpoint();
 
   if (typeof value === 'object') {
-    const index = breakpoints.findIndex(
-      breakpoint => breakpoint.id === currentBreakpoint,
-    );
+    const index = breakpoints.findIndex(b => b.id === breakpoint);
 
     for (let i = index; i >= 0; i--) {
       if (value[breakpoints[i].id]) {

packages/canon/src/index.ts

@@ -47,3 +47,6 @@ export * from './components/Select';
 // Types
 export * from './types';
 export * from './props';
+
+// Hooks
+export { useBreakpoint } from './hooks/useBreakpoint';