fix import/export, remove need for .alias.js, closes #74

hyperglass/ui/context/HyperglassProvider.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { createContext, useContext, useMemo } from "react";
+import dynamic from "next/dynamic";
+import { CSSReset, ThemeProvider } from "@chakra-ui/core";
+import { MediaProvider } from "./MediaProvider";
+import { StateProvider } from "./StateProvider";
+import { makeTheme, defaultTheme } from "app/util";
+
+// Disable SSR for ColorModeProvider
+const ColorModeProvider = dynamic(
+  () => import("@chakra-ui/core").then(mod => mod.ColorModeProvider),
+  { ssr: false }
+);
+
+const HyperglassContext = createContext(null);
+
+export const HyperglassProvider = ({ config, children }) => {
+  const value = useMemo(() => config, [config]);
+  const userTheme = value && makeTheme(value.web.theme);
+  const theme = value ? userTheme : defaultTheme;
+  return (
+    <ThemeProvider theme={theme}>
+      <ColorModeProvider value={config.web.theme.default_color_mode ?? null}>
+        <CSSReset />
+        <MediaProvider theme={theme}>
+          <HyperglassContext.Provider value={value}>
+            <StateProvider>{children}</StateProvider>
+          </HyperglassContext.Provider>
+        </MediaProvider>
+      </ColorModeProvider>
+    </ThemeProvider>
+  );
+};
+
+export const useConfig = () => useContext(HyperglassContext);

hyperglass/ui/context/MediaProvider.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { createContext, useContext, useMemo } from "react";
+import { useMediaLayout } from "use-media";
+
+const MediaContext = createContext(null);
+
+export const MediaProvider = ({ theme, children }) => {
+  const { sm, md, lg, xl } = theme.breakpoints;
+  const isSm = useMediaLayout({ maxWidth: md });
+  const isMd = useMediaLayout({ minWidth: md, maxWidth: lg });
+  const isLg = useMediaLayout({ minWidth: lg, maxWidth: xl });
+  const isXl = useMediaLayout({ minWidth: xl });
+  let mediaSize = false;
+  switch (true) {
+    case isSm:
+      mediaSize = "sm";
+      break;
+    case isMd:
+      mediaSize = "md";
+      break;
+    case isLg:
+      mediaSize = "lg";
+      break;
+    case isXl:
+      mediaSize = "xl";
+      break;
+  }
+  const value = useMemo(
+    () => ({
+      isSm: isSm,
+      isMd: isMd,
+      isLg: isLg,
+      isXl: isXl,
+      mediaSize: mediaSize
+    }),
+    [isSm, isMd, isLg, isXl, mediaSize]
+  );
+  return (
+    <MediaContext.Provider value={value}>{children}</MediaContext.Provider>
+  );
+};
+
+export const useMedia = () => useContext(MediaContext);

hyperglass/ui/context/StateProvider.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { createContext, useContext, useMemo, useState } from "react";
+import { useSessionStorage } from "app/hooks";
+
+const StateContext = createContext(null);
+
+export const StateProvider = ({ children }) => {
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [formData, setFormData] = useState({});
+  const [greetingAck, setGreetingAck] = useSessionStorage(
+    "hyperglass-greeting-ack",
+    false
+  );
+  const resetForm = layoutRef => {
+    layoutRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    setSubmitting(false);
+    setFormData({});
+  };
+  const value = useMemo(() => ({
+    isSubmitting,
+    setSubmitting,
+    formData,
+    setFormData,
+    greetingAck,
+    setGreetingAck,
+    resetForm
+  }));
+  return (
+    <StateContext.Provider value={value}>{children}</StateContext.Provider>
+  );
+};
+
+export const useHyperglassState = () => useContext(StateContext);

hyperglass/ui/context/index.mjs

@@ -0,0 +1,3 @@
+export * from "./HyperglassProvider";
+export * from "./MediaProvider";
+export * from "./StateProvider";