From abfe1162361f461b10c04a33487da563af2de7ea Mon Sep 17 00:00:00 2001
From: Arne Molland <arne@molland.sh>
Date: Sat, 23 Jul 2022 17:51:49 +0200
Subject: [PATCH] foundation: rename screens -> breakpoints

---
 src/foundation/gameflow.ts                    |  6 +++---
 .../types/{screens.ts => breakpoints.ts}      |  2 +-
 src/foundation/types/index.ts                 |  2 +-
 src/foundation/types/theme.ts                 |  4 ++--
 src/react/hooks/useBreakpoints.ts             | 20 +++++++++----------
 src/tailwind/config.ts                        |  4 ++--
 6 files changed, 19 insertions(+), 19 deletions(-)
 rename src/foundation/types/{screens.ts => breakpoints.ts} (93%)

diff --git a/src/foundation/gameflow.ts b/src/foundation/gameflow.ts
index 3f7e159..424bc8d 100644
--- a/src/foundation/gameflow.ts
+++ b/src/foundation/gameflow.ts
@@ -2,9 +2,9 @@
 import {
   Animations,
   BorderRadius,
+  Breakpoints,
   Colors,
   Motion,
-  Screens,
   Shadows,
   Spacing,
   Theme,
@@ -75,7 +75,7 @@ export const spacing: Spacing = {
   xxl: '48px',
 }
 
-const screens: Screens = {
+const breakpoints: Breakpoints = {
   default: '0rem',
   xs: '29rem',
   sm: '36rem',
@@ -174,7 +174,7 @@ export const animations: Animations = {
 
 export const gameflowTheme: Theme = {
   colors,
-  screens,
+  breakpoints,
   borderRadius,
   motion,
   shadows,
diff --git a/src/foundation/types/screens.ts b/src/foundation/types/breakpoints.ts
similarity index 93%
rename from src/foundation/types/screens.ts
rename to src/foundation/types/breakpoints.ts
index 96263f4..d0f402c 100644
--- a/src/foundation/types/screens.ts
+++ b/src/foundation/types/breakpoints.ts
@@ -1,7 +1,7 @@
 /**
  * Flume breakpoints.
  */
-export interface Screens {
+export interface Breakpoints {
   /**
    * String index signature for type compat.
    */
diff --git a/src/foundation/types/index.ts b/src/foundation/types/index.ts
index ead821e..0996b5f 100644
--- a/src/foundation/types/index.ts
+++ b/src/foundation/types/index.ts
@@ -5,5 +5,5 @@ export * from './shadows.js'
 export * from './spacing.js'
 export * from './theme.js'
 export * from './typography.js'
-export * from './screens.js'
+export * from './breakpoints.js'
 export * from './animations.js'
diff --git a/src/foundation/types/theme.ts b/src/foundation/types/theme.ts
index 48f61a1..7a7636a 100644
--- a/src/foundation/types/theme.ts
+++ b/src/foundation/types/theme.ts
@@ -5,7 +5,7 @@ import { Motion } from './motion.js'
 import { Shadows } from './shadows.js'
 import { Spacing } from './spacing.js'
 import { Typography } from './typography.js'
-import { Screens } from './screens.js'
+import { Breakpoints } from './breakpoints.js'
 
 export interface Theme {
   colors: Colors
@@ -15,5 +15,5 @@ export interface Theme {
   animations: Animations
   borderRadius: BorderRadius
   typography: Typography
-  screens: Screens
+  breakpoints: Breakpoints
 }
diff --git a/src/react/hooks/useBreakpoints.ts b/src/react/hooks/useBreakpoints.ts
index cb19b01..3ea64e6 100644
--- a/src/react/hooks/useBreakpoints.ts
+++ b/src/react/hooks/useBreakpoints.ts
@@ -1,12 +1,12 @@
 import { useTheme, useWindowDimensions } from './index.js'
-import { Screens } from '~/foundation/index.js'
+import { Breakpoints } from '~/foundation/index.js'
 
 type NumberedBreakpoints = {
   // eslint-disable-next-line no-unused-vars
-  [key in keyof Screens]: number
+  [key in keyof Breakpoints]: number
 }
 
-const parseBreakpoints = (breakpoints: Screens): NumberedBreakpoints => {
+const parseBreakpoints = (breakpoints: Breakpoints): NumberedBreakpoints => {
   const parsed: any = {}
 
   for (const key in breakpoints) {
@@ -19,7 +19,7 @@ const parseBreakpoints = (breakpoints: Screens): NumberedBreakpoints => {
 
 export interface BreakpointsProps {
   breakpoints: NumberedBreakpoints
-  current: keyof Screens
+  current: keyof Breakpoints
   isMobile: boolean
   isDesktop: boolean
 }
@@ -27,7 +27,7 @@ export interface BreakpointsProps {
 /** Retrieves a numbered version of the current Theme's breakpoints as well as the currently exceeded breakpoint */
 export const useBreakpoints = () => {
   const theme = useTheme()
-  const breakpoints = parseBreakpoints(theme.screens)
+  const breakpoints = parseBreakpoints(theme.breakpoints)
   const current = useCurrentBreakpoint()
   const dimensions = useWindowDimensions()
 
@@ -45,17 +45,17 @@ export const useBreakpoints = () => {
 
 /** Retrieves the current Theme's breakpoints and returns them as numbers.*/
 export const useNumberedBreakpoints = (): NumberedBreakpoints => {
-  const { screens } = useTheme()
-  return parseBreakpoints(screens)
+  const { breakpoints } = useTheme()
+  return parseBreakpoints(breakpoints)
 }
 
 /** Retrieves the currently exceeded breakpoint */
-export const useCurrentBreakpoint = (): keyof Screens => {
+export const useCurrentBreakpoint = (): keyof Breakpoints => {
   const dimensions = useWindowDimensions()
   const width = dimensions?.width
 
-  const { screens } = useTheme()
-  const parsed = parseBreakpoints(screens)
+  const { breakpoints } = useTheme()
+  const parsed = parseBreakpoints(breakpoints)
 
   if (!width) {
     return 'default'
diff --git a/src/tailwind/config.ts b/src/tailwind/config.ts
index cb9b525..3482b09 100644
--- a/src/tailwind/config.ts
+++ b/src/tailwind/config.ts
@@ -10,7 +10,7 @@ export const getConfig = (theme: Theme = gameflowTheme): Partial<TailwindConfig>
     shadows,
     borderRadius,
     animations: animation,
-    screens,
+    breakpoints,
     typography,
     motion,
   } = theme
@@ -24,7 +24,7 @@ export const getConfig = (theme: Theme = gameflowTheme): Partial<TailwindConfig>
         fontWeight,
         borderRadius,
       },
-      screens,
+      screens: breakpoints,
       colors,
       spacing,
       animation,