Merge pull request #24 from vovaguguiev/feature/make-sunbeam-context-…

…non-nullable

feature(useSunbeam): make context value non-nullable

package.json

@@ -51,8 +51,8 @@
         "cz-conventional-changelog": "^3.0.2",
         "husky": "^3.0.8",
         "lerna": "^3.17.0",
-        "prettier": "^1.18.2",
-        "pretty-quick": "^1.11.1",
+        "prettier": "^1.19.1",
+        "pretty-quick": "^2.0.1",
         "rimraf": "^3.0.0"
     }
 }

packages/react-sunbeam/README.md

@@ -136,7 +136,7 @@ These are the most important methods of `FocusManager`.
 They move focus to the nearest focusable node in the corresponding direction.
 You can call these methods in response to any events you want: key presses, game controller button presses, scroll events, etc.
 
-#### `setFocus(path: string[])`
+#### `setFocus(path: string[]): void`
 
 Immediately makes focused the focusable node with the given `path`.
 
@@ -184,6 +184,11 @@ render(
 
 ### `Focusable`
 
+### `useSunbeam(): { setFocus(focusPath: readonly string[]): void; moveFocusRight(): void; moveFocusLeft(): void; moveFocusUp(): void; moveFocusDown(): void; }`
+
+This hook provides access to some public methods of `FocusManager` inside the React components.
+It expects `<SunbeamProvider>` to be present in the tree, otherwise it returns no-op versions of the methods
+
 ### `useFocusable`
 
 ### `KeyPressManager`

packages/react-sunbeam/package.json

@@ -38,7 +38,7 @@
         "jest": "^24.9.0",
         "react": "^16.10.2",
         "ts-jest": "^24.1.0",
-        "typescript": "^3.6.4"
+        "typescript": "^3.8.3"
     },
     "peerDependencies": {
         "react": "^16.10.2"

packages/react-sunbeam/src/focus/SunbeamContext.ts

@@ -8,4 +8,20 @@ export interface SunbeamContextValue {
     setFocus: (focusPath: readonly string[]) => void
 }
 
-export const SunbeamContext = createContext<SunbeamContextValue | null>(null)
+export const SunbeamContext = createContext<SunbeamContextValue>({
+    moveFocusRight() {
+        console.warn('Attempted to call "moveFocusRight" without SunbeamContext.Provider present in the tree')
+    },
+    moveFocusLeft() {
+        console.warn('Attempted to call "moveFocusLeft" without SunbeamContext.Provider present in the tree')
+    },
+    moveFocusUp() {
+        console.warn('Attempted to call "moveFocusUp" without SunbeamContext.Provider present in the tree')
+    },
+    moveFocusDown() {
+        console.warn('Attempted to call "moveFocusDown" without SunbeamContext.Provider present in the tree')
+    },
+    setFocus() {
+        console.warn('Attempted to call "setFocus" without SunbeamContext.Provider present in the tree')
+    },
+})

packages/react-sunbeam/src/focus/hooks/useFocusable.spec.tsx

@@ -16,9 +16,14 @@ describe("useFocusable", () => {
                 bottom: style.bottom == null ? 0 : parseInt(style.bottom),
                 height: style.height == null ? 0 : parseInt(style.height),
                 left: style.left == null ? 0 : parseInt(style.left),
+                x: style.left == null ? 0 : parseInt(style.left),
                 right: style.right == null ? 0 : parseInt(style.right),
                 top: style.top == null ? 0 : parseInt(style.top),
+                y: style.top == null ? 0 : parseInt(style.top),
                 width: style.width == null ? 0 : parseInt(style.width),
+                toJSON() {
+                    throw new Error("toJSON not supported")
+                },
             }
         }
     })

packages/react-sunbeam/src/focus/hooks/useSunbeam.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react"
 import { SunbeamContext, SunbeamContextValue } from "../SunbeamContext"
 
-export function useSunbeam(): SunbeamContextValue | null {
+export function useSunbeam(): SunbeamContextValue {
     return useContext(SunbeamContext)
 }

packages/react-sunbeam/src/focus/index.ts

@@ -2,15 +2,13 @@ import getPreferredNode from "./getPreferredNode"
 import { FocusableTreeNode } from "./types"
 import { Direction } from "../spatialNavigation"
 
-export { FocusEvent } from "./types"
+export { FocusEvent, FocusableTreeNode } from "./types"
 export { FocusManager } from "./FocusManager"
 export { Focusable } from "./components/Focusable"
 export { SunbeamProvider } from "./components/SunbeamProvider"
 export { useSunbeam } from "./hooks/useSunbeam"
 export { useFocusable } from "./hooks/useFocusable"
 
-export type FocusableTreeNode = FocusableTreeNode
-
 // eslint-disable-next-line @typescript-eslint/camelcase
 export function unstable_defaultGetPreferredChildOnFocusReceive({
     focusableChildren,