Merge pull request #18 from intuit/ssr

make it ssr friendly
intuit · Apr 25, 2021 · b349f62 · b349f62
2 parents e4e49d7 + 57142c5
commit b349f62
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 12 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -165,7 +165,3 @@ workflows:
           requires:
             - lint
             - unit-tests
-          filters:
-            branches:
-              only:
-                - master
diff --git a/components/Table/src/index.tsx b/components/Table/src/index.tsx
@@ -114,7 +114,7 @@ export const HeadCell = (props: Element<"th">) => {
 
   /** Enable resizing and set defaults when click starts */
   const mouseDownHandler = (e: React.MouseEvent) => {
-    if (!window || !headRef.current) return;
+    if (typeof window === "undefined" || !headRef.current) return;
     const s = window.getComputedStyle(headRef.current);
     setWidth(parseInt(s.width, 10));
     setStartingX(e.clientX);

diff --git a/packages/storybook-theme-addon/src/theme/theme.tsx b/packages/storybook-theme-addon/src/theme/theme.tsx
@@ -13,6 +13,8 @@ import FireFox from "./icons/firefox";
 
 import { THEME_SELECT_TOOL_ID, PARAMETER_NAME } from "../constants";
 
+const isWindowDefined = typeof window !== "undefined";
+
 interface TooltipProps {
   /** Called when the tooltip hides */
   onHide: () => void;
@@ -38,12 +40,18 @@ const STORAGE_TOKEN = `${THEME_SELECT_TOOL_ID}-storage`;
 
 /** Persist the theme settings in localStorage */
 const saveLocalStorage = (data: State) => {
+  if (!isWindowDefined) {
+    return;
+  }
+
   window.localStorage.setItem(STORAGE_TOKEN, JSON.stringify(data));
 };
 
 /** Restore theme settings from localStorage */
 const restoreLocalStorage = (defaultTheme?: Partial<State>): State => {
-  const data = window.localStorage.getItem(STORAGE_TOKEN);
+  const data = isWindowDefined
+    ? window.localStorage.getItem(STORAGE_TOKEN)
+    : undefined;
 
   if (data) {
     const storedTheme = JSON.parse(data) as State;

diff --git a/packages/themes/src/AutoThemeProvider.tsx b/packages/themes/src/AutoThemeProvider.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { all } from "./themes";
 import { ThemeableElement, ThemeContext } from "./utils";
 
+const isWindowDefined = typeof window !== "undefined";
+
 /** Determine if the current browser is FireFox */
-const isFirefox = () => {
-  if (window?.navigator?.userAgent) {
+export const isFirefox = () => {
+  if (isWindowDefined && window?.navigator?.userAgent) {
     if (window.navigator.userAgent.toLowerCase().includes("firefox")) {
       return true;
     }
@@ -26,11 +28,13 @@ export interface AutoThemeProviderProps extends ThemeableElement<"div"> {
  */
 const useDarkMode = () => {
   const [darkMode, setDarkMode] = React.useState(
-    window ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+    isWindowDefined && window
+      ? window.matchMedia("(prefers-color-scheme: dark)").matches
+      : false
   );
 
   React.useEffect(() => {
-    if (!window) {
+    if (!isWindowDefined) {
       return;
     }
 

diff --git a/packages/themes/src/utils.tsx b/packages/themes/src/utils.tsx
@@ -8,6 +8,8 @@ export type ColorScheme = typeof colorSchemes[number];
 export const themes = ["chrome", "firefox"] as const;
 export type Theme = typeof themes[number];
 
+const isWindowDefined = typeof window !== "undefined";
+
 /**
  * Get all of the props for an HTML element + add the theme props.
  * Used to easily type the rest props of a component and add theming.
@@ -40,11 +42,13 @@ export const ThemeContext = React.createContext<Themeable>({
  */
 const useDarkMode = () => {
   const [darkMode, setDarkMode] = React.useState(
-    window ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+    isWindowDefined && window
+      ? window.matchMedia("(prefers-color-scheme: dark)").matches
+      : false
   );
 
   React.useEffect(() => {
-    if (!window) {
+    if (!isWindowDefined) {
       return;
     }