fix: address feedback

cypress/component/Page.spec.tsx

@@ -1,37 +1,11 @@
 import React from 'react'
 import type { PageSidebarProps } from '@toptal/picasso'
 import { Container, Menu, Page, Typography } from '@toptal/picasso'
-import type { BreakpointKeys } from '@toptal/picasso-provider/Picasso/config'
-import { PicassoBreakpoints } from '@toptal/picasso-provider/Picasso/config'
+import { getCheckpoints } from '@toptal/picasso/test-utils'
 
 const component = 'Page'
 const containerHeight = '30rem'
 
-/**
- * Produces an array of checkpoints – screen size values, needed for covering
- * all existing breakpoints in tests (checkpoints are different from breakpoints
- * by certain offset).
- *
- * @returns {number[]} Array of checkpoints
- */
-const getCheckpoints = () => {
-  const offset = 1
-  const breakpoints = PicassoBreakpoints.breakpoints.values
-  const breakpointKeys = Object.keys(breakpoints)
-
-  return [
-    ...breakpointKeys
-      // Skip the first breakpoint as it equals to 0
-      .slice(1)
-      // Genereate checkpoints by subtsracting offset from each breakpoint
-      .map(
-        breakpointKey => breakpoints[breakpointKey as BreakpointKeys] - offset
-      ),
-    // Add the last checkpoint that covers screens wider that the last breakpoint
-    breakpoints[breakpointKeys.slice(-1) as unknown as BreakpointKeys] + offset,
-  ]
-}
-
 const checkpoints = getCheckpoints()
 
 // Sidebar menu has custom breakpoint at 1280px that changes its behavior, so 1280px

packages/picasso/src/test-utils/get-checkpoints.ts

@@ -0,0 +1,27 @@
+import type { BreakpointKeys } from '@toptal/picasso-provider/index'
+import { PicassoBreakpoints } from '@toptal/picasso-provider/index'
+
+/**
+ * Produces an array of checkpoints – screen size values, needed for covering
+ * all existing breakpoints in tests (checkpoints are different from breakpoints
+ * by certain offset).
+ *
+ * @returns {number[]} Array of checkpoints
+ */
+export const getCheckpoints = () => {
+  const offset = 1
+  const breakpoints = PicassoBreakpoints.breakpoints.values
+  const breakpointKeys = Object.keys(breakpoints)
+
+  return [
+    ...breakpointKeys
+      // Skip the first breakpoint as it equals to 0
+      .slice(1)
+      // Genereate checkpoints by subtsracting offset from each breakpoint
+      .map(
+        breakpointKey => breakpoints[breakpointKey as BreakpointKeys] - offset
+      ),
+    // Add the last checkpoint that covers screens wider that the last breakpoint
+    breakpoints[breakpointKeys.slice(-1) as unknown as BreakpointKeys] + offset,
+  ]
+}

packages/picasso/src/test-utils/index.tsx

@@ -31,3 +31,4 @@ const customRender = (
 
 export * from '@testing-library/react'
 export { customRender as render, TestingPicasso }
+export { getCheckpoints } from './get-checkpoints'

tsconfig.build.json

@@ -6,6 +6,7 @@
       "*": ["@types/*"],
       "~/*": ["./*"],
       "@toptal/picasso/*": ["node_modules/@toptal/picasso/src/*"],
+      "@toptal/picasso-provider/*": ["node_modules/@toptal/picasso-provider/src/*"],
       "@toptal/*": ["node_modules/@toptal/*/src"]
     }
   },