@rpcbase/client 0.207.0 → 0.208.0-nav.0

package/helpers/useStoredValue/index.js

@@ -13,7 +13,7 @@ import setStoredValues from "./setStoredValues"
 const DEFAULT_REMOTE = true
 const UPDATE_THROTTLE_DELAY = 300
 
-const useStoredValue = (_key, defaultValueOrFn = null, options = {}) => {
+export const useStoredValue = (_key, defaultValueOrFn = null, options = {}) => {
   const uid = getUid()
   const key = `${uid}.${_key}`
 

package/notifications/NotificationsSettingsModal/SettingsForm.js

@@ -2,7 +2,7 @@
 import Form from "react-bootstrap/Form"
 import TimePicker from "react-time-picker"
 
-import {useStoredValue} from "@rpcbase/client"
+import {useStoredValue} from "../../helpers/useStoredValue"
 
 
 const TIME_FORMAT = "HH:mm"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.207.0",
+  "version": "0.208.0-nav.0",
   "scripts": {
     "build": "../../node_modules/.bin/wireit",
     "test": "../../node_modules/.bin/wireit"

package/ui/Tabs/{index.js → index.tsx}

@@ -1,16 +1,15 @@
-/* @flow */
 import React, {useState, useEffect, useRef} from "react"
 import _isEmpty from "lodash/isEmpty"
 
 import stopEventPropagation from "../helpers/stopEventPropagation"
-import useThrottledMeasure from "..//helpers/useThrottledMeasure"
+import {useThrottledMeasure} from "..//helpers/useThrottledMeasure"
 
 import "./tabs.scss"
 
 
 type Props = {
   active: boolean,
-  onChange: Function,
+  onChange: () => void,
   scrollIntoView: boolean
 }
 

package/ui/helpers/SizeContext/index.tsx

@@ -0,0 +1,11 @@
+import {createContext, useContext} from "react"
+
+
+type SizeContextType = {
+  width: number,
+  height: number,
+}
+
+export const SizeContext = createContext<SizeContextType>(undefined!)
+
+export const useSizeContext = () => useContext(SizeContext)

package/ui/helpers/useThrottledMeasure/index.js

@@ -6,7 +6,7 @@ import isEqual from "fast-deep-equal/react"
 
 const DEFAULT_THROTTLE_TIME = 16
 
-const useThrottledMeasure = (throttleDuration = DEFAULT_THROTTLE_TIME) => {
+export const useThrottledMeasure = (throttleDuration = DEFAULT_THROTTLE_TIME) => {
   const hasInitialMeasure = useRef(false)
 
   const [ref, measuredRect] = useMeasure()
@@ -45,5 +45,3 @@ const useThrottledMeasure = (throttleDuration = DEFAULT_THROTTLE_TIME) => {
 
   return [ref, rect]
 }
-
-export default useThrottledMeasure

package/ui/nav/ContentView/ContentViewContext.ts

@@ -0,0 +1,22 @@
+import {Dispatch, SetStateAction, createContext, useContext} from "react"
+
+
+type ContentViewContextType = {
+  storageKeyPrefix: string;
+  isDocked: boolean;
+  setIsDocked: (value: boolean) => void;
+  sideItemViewWidth: number;
+  onUpdateSlideoutViewWidth: () => void;
+  contentViewWidth: number;
+  contentViewHeight: number;
+  sidebarWidth: number;
+  setSidebarWidth: Dispatch<SetStateAction<number>>;
+};
+
+export const ContentViewContext = createContext<ContentViewContextType>(
+  undefined!,
+)
+
+export default ContentViewContext
+
+export const useContentViewContext = () => useContext(ContentViewContext)

package/ui/nav/ContentView/index.tsx

@@ -0,0 +1,109 @@
+import {useState, memo, ReactNode, useMemo} from "react"
+
+import {useStoredValue} from "../../../helpers/useStoredValue"
+import {useThrottledMeasure} from "../../helpers/useThrottledMeasure"
+
+import ContentViewContext from "./ContentViewContext"
+import getUid from "../../../auth/getUid"
+
+
+const DEFAULT_SIDEBAR_WIDTH = 200
+
+const SIDEVIEW_WIDTH = "sideview_width"
+
+export const ContentView = memo(
+  ({
+    children,
+    storageKeyPrefix: _storageKeyPrefix,
+  }: {
+    children: ReactNode;
+    storageKeyPrefix?: string;
+  }) => {
+    const uid = getUid()
+
+    const [isDocked, setIsDocked] = useState(false)
+
+    const [
+      contentViewRef,
+      {width: contentViewWidth, height: contentViewHeight},
+    ] = useThrottledMeasure()
+
+    const storageKeyPrefix = _storageKeyPrefix
+      ? _storageKeyPrefix
+      : uid || "unknown"
+
+    const sidebarWidthKey = `${storageKeyPrefix}.sidebar_width`
+    const [sidebarWidth, setSidebarWidth] = useStoredValue(
+      sidebarWidthKey,
+      DEFAULT_SIDEBAR_WIDTH,
+    )
+
+    const getKey = (k) => `${storageKeyPrefix}.content_view.${k}`
+
+    const [sideItemViewWidth, setSlideoutViewWidth] = useStoredValue(
+      getKey(SIDEVIEW_WIDTH),
+      320,
+    )
+
+    const onUpdateSlideoutViewWidth = (width) => {
+      setSlideoutViewWidth(width)
+    }
+
+    const contentWidthOffset = useMemo(() => {
+      if (isDocked) {
+        return sidebarWidth + sideItemViewWidth
+      } else {
+        return sidebarWidth
+      }
+    }, [isDocked, sidebarWidth, sideItemViewWidth])
+
+    // don't render anything before values are initialized
+    if (
+      typeof sidebarWidth === "undefined" ||
+      typeof sideItemViewWidth === "undefined"
+    )
+      return null
+
+    return (
+      <ContentViewContext
+        value={{
+          storageKeyPrefix,
+          isDocked,
+          setIsDocked,
+          sideItemViewWidth,
+          onUpdateSlideoutViewWidth,
+          contentViewWidth,
+          contentViewHeight,
+          sidebarWidth,
+          setSidebarWidth,
+        }}
+      >
+        <div
+          className=""
+          style={{
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <div id="sidebar-container" />
+
+          <div
+            ref={contentViewRef}
+            key={`content-wrapper-${"content_view_"}`}
+            style={{
+              width: `calc(100vw - ${contentWidthOffset}px)`,
+              height: "calc(100vh - 45px)",
+              marginTop: 45,
+              overflowY: "scroll",
+              marginLeft: sidebarWidth,
+            }}
+          >
+            {children}
+          </div>
+        </div>
+
+        <div id="slideout-container" />
+      </ContentViewContext>
+    )
+  },
+)

package/ui/nav/Header/header.scss

@@ -0,0 +1,53 @@
+@import "helpers";
+
+@import "./variables";
+
+$brand-v-padding: 11px;
+$account-max-width: 160px;
+$img-size: 32px;
+$img-border-radius: 3px;
+
+#main-header-nav {
+  border-bottom: 1px solid $black;
+  background-color: $black !important;
+  height: 45px;
+
+  .nav-link {
+    color: $gray-200;
+
+    &.active {
+      font-weight: bold;
+      color: $white;
+      text-shadow: lighten(rgba($blue, 0.6), 80%) 1px 0 8px;
+    }
+  }
+}
+
+.current-account-subtitle {
+  color: $gray-900;
+  max-width: $account-max-width;
+}
+
+.accounts-list-item {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+
+  .text-truncate {
+    max-width: $account-max-width;
+  }
+
+  img {
+    width: $img-size;
+    height: $img-size;
+    border-radius: $img-border-radius;
+  }
+
+  .account-info {
+    max-width: 130px;
+  }
+
+  .account-info-small {
+    color: $gray-600;
+  }
+}

package/ui/nav/Header/index.tsx

@@ -0,0 +1,150 @@
+/* eslint-disable */
+import assert from "assert"
+import {useState, useEffect} from "react"
+
+import apiClient from "../../../apiClient"
+
+// import SearchAnything from "components/search/SearchAnything"
+
+// import LogoNav from "./components/LogoNav"
+
+// Env Selector
+// import useFilteredEnvs from "./components/EnvSelector/useFilteredEnvs"
+// import EnvSelectorToggle from "./components/EnvSelector/Toggle"
+// import EnvSelectorDropdown from "./components/EnvSelector/Dropdown"
+// Group Selector
+// import useFilteredGroups from "./components/GroupSelector/useFilteredGroups"
+// import GroupSelectorToggle from "./components/GroupSelector/Toggle"
+// import GroupSelectorDropdown from "./components/GroupSelector/Dropdown"
+
+// import MorphingDropdown from "./components/MorphingDropdown"
+
+// import AccountsToggle from "./components/AccountsToggle"
+// import NotificationsToggle from "./components/NotificationsToggle"
+// import EnvSettingsToggle from "./components/EnvSettingsToggle"
+// import PublishControl from "./components/PublishControl"
+
+// import AccountsDropdown from "./components/AccountsDropdown"
+// import NotificationsDropdown from "./components/NotificationsDropdown"
+// import PhoneDropdown from "components/phone/PhoneDropdown"
+// import EnvSettingsDropdown from "./components/EnvSettingsDropdown"
+
+import "./header.scss"
+
+
+const DefaultHeader = () => {
+  return (
+    <>
+      <LogoNav isSignedIn={false} />
+
+      <div className="nav-default d-flex flex-row justify-content-between w-100">
+        <div className="d-flex flex-row"></div>
+
+        <div className="d-flex flex-row">
+          <a className="nav-link px-2 me-2 fw-bold" href="/signin">
+            Sign In
+          </a>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const SignedInHeader = () => {
+  const loc = window.location.pathname
+
+  const [accounts, setAccounts] = useState([])
+
+  const {envs, activeEnv, setFilter: setEnvsFilter} = useFilteredEnvs()
+  const {groups, activeGroup, setFilter: setGroupsFilter} = useFilteredGroups()
+
+  useEffect(() => {
+    // TODO: useapi hook with cache
+    const load = async() => {
+      const res = await apiClient.post("/api/v1/auth/get_accounts")
+      assert(res.data.status === "ok")
+      setAccounts(res.data.accounts)
+      // console.log("accounts", res.data.accounts)
+    }
+
+    load()
+  }, [])
+
+  return (
+    <>
+      <MorphingDropdown.Provider side="left">
+        <LogoNav isSignedIn={true} />
+
+        <EnvSelectorToggle activeEnv={activeEnv} />
+        <GroupSelectorToggle activeGroup={activeGroup} />
+
+        <MorphingDropdown.Portal>
+          <EnvSelectorDropdown
+            id="env-selector"
+            envs={envs}
+            activeEnv={activeEnv}
+            setFilter={setEnvsFilter}
+          />
+
+          <GroupSelectorDropdown
+            id="group-selector"
+            groups={groups}
+            activeGroup={activeGroup}
+            setFilter={setGroupsFilter}
+          />
+        </MorphingDropdown.Portal>
+      </MorphingDropdown.Provider>
+
+      {/* Search anything */}
+      <SearchAnything />
+
+      <div className="ms-auto d-none d-md-flex flex-row text-truncate">
+        <a className="nav-link mx-2 px-1" href="/docs">
+          Docs
+        </a>
+        <a
+          className={cx("nav-link px-1", {active: loc.startsWith("/marketplace")})}
+          href="/marketplace"
+        >
+          Marketplace
+        </a>
+      </div>
+
+      <PublishControl />
+
+      {/* Phone */}
+      <PhoneDropdown />
+
+      <MorphingDropdown.Provider side="right">
+        {/* WARNING: update the anchor-${ids} on the toggle to match the menus if adding or removing */}
+        <NotificationsToggle />
+
+        <EnvSettingsToggle />
+
+        <AccountsToggle />
+
+        <MorphingDropdown.Portal>
+          {/* Notifications */}
+          <NotificationsDropdown id="notifications" />
+
+          {/* Env Settings */}
+          <EnvSettingsDropdown id="env-setup" />
+
+          {/* Accounts + Org */}
+          <AccountsDropdown id="accounts" accounts={accounts} />
+        </MorphingDropdown.Portal>
+      </MorphingDropdown.Provider>
+    </>
+  )
+}
+
+export const Header = ({isSignedIn}) => {
+  return (
+    <nav
+      id="main-header-nav"
+      className={"d-flex align-items-center fixed-top bg-dark flex-md-nowrap shadow p-0 text-light"}
+    >
+    this is my header yo
+    </nav>
+  )
+}

package/ui/nav/Header/variables.scss

@@ -0,0 +1 @@
+$header-height: 44px;

package/ui/nav/SidebarContainer/index.tsx

@@ -0,0 +1,104 @@
+import {useState, useRef} from "react"
+import {createPortal} from "react-dom"
+import {ResizableBox} from "react-resizable"
+
+import {useStoredValue} from "../../../helpers/useStoredValue"
+import {useContentViewContext} from "../ContentView/ContentViewContext"
+
+import "./sidebar-container.scss"
+
+
+const COLLAPSED_MIN_WIDTH = 40
+const OPENED_MIN_WIDTH = 60
+
+export const SidebarContainer = ({children}) => {
+  const {sidebarWidth, setSidebarWidth, storageKeyPrefix} = useContentViewContext()
+
+  const previousWidthRef = useRef(sidebarWidth)
+
+  // TODO: store this ?? (no we already store the sidebarWidth)
+  const [isCollapsed, setIsCollapsed] = useState(
+    sidebarWidth === COLLAPSED_MIN_WIDTH,
+  )
+
+  const storageKey = `${storageKeyPrefix}.sidebar_uncollapsed_width`
+
+  const [uncollapsedSidebarWidth, setUncollapsedSidebarWidth] = useStoredValue(
+    storageKey,
+    sidebarWidth,
+  )
+
+
+  const onResize = (e, data) => {
+    const width = data.size.width
+
+    const delta = previousWidthRef.current - width
+
+    let direction
+
+    if (delta < 0) direction = "right"
+    else if (delta > 0) direction = "left"
+
+    // sidebar opening
+    if (width > COLLAPSED_MIN_WIDTH && direction === "right" && isCollapsed) {
+      setSidebarWidth(OPENED_MIN_WIDTH)
+      setIsCollapsed(false)
+    }
+    // collapsing
+    else if (
+      width <= OPENED_MIN_WIDTH &&
+      direction === "left" &&
+      !isCollapsed
+    ) {
+      setSidebarWidth(COLLAPSED_MIN_WIDTH)
+      setIsCollapsed(true)
+    }
+    // normal case, but only apply new width if different from previous one
+    else if (width !== sidebarWidth) {
+      setSidebarWidth(width)
+      setUncollapsedSidebarWidth(width)
+    }
+
+    // save width to compare on next event
+    previousWidthRef.current = width
+  }
+
+  // quick collapse by double clicking on sidebar resize bar
+  const onDoubleClickResizeHandle = () => {
+    if (isCollapsed) {
+      setSidebarWidth(uncollapsedSidebarWidth)
+      setIsCollapsed(false)
+    } else {
+      setSidebarWidth(COLLAPSED_MIN_WIDTH)
+      setIsCollapsed(true)
+    }
+  }
+
+  const containerElement = document.getElementById("sidebar-container")
+
+  if (!containerElement) return null
+
+  return createPortal((
+    <ResizableBox
+      id="sidebar"
+      width={sidebarWidth}
+      // height={height}
+      // style={{ position: "fixed", top: 45, bottom: 0, overflowX: "visible" }}
+      draggableOpts={{}}
+      handle={
+        <div
+          className="sidebar-resize-handle"
+          onDoubleClick={onDoubleClickResizeHandle}
+        />
+      }
+      resizeHandles={["e"]}
+      axis="x"
+      minConstraints={[isCollapsed ? COLLAPSED_MIN_WIDTH : OPENED_MIN_WIDTH]}
+      maxConstraints={[600]}
+      onResize={onResize}
+      style={{overflow: "hidden"}}
+    >
+      {children}
+    </ResizableBox>
+  ), containerElement)
+}

package/ui/nav/SidebarContainer/sidebar-container.scss

@@ -0,0 +1,23 @@
+@import "helpers";
+
+#sidebar-container {
+  position: fixed;
+  top: 45px;
+  left: 0;
+  /* background-color: red; */
+  max-height: calc(100vh - 45px);
+
+  .sidebar-resize-handle {
+    z-index: 3;
+
+    // transform: translateX(2px);
+    position: absolute;
+    right: -2px;
+    top: 0;
+    display: block;
+    height: 100%;
+    width: 4px;
+    cursor: ew-resize;
+  }
+
+}

package/ui/nav/SlideoutContainer/components/Body.tsx

@@ -0,0 +1,19 @@
+import {useContext} from "react"
+import Offcanvas from "react-bootstrap/Offcanvas"
+
+import ContentViewContext from "../../ContentView/ContentViewContext"
+
+
+export const Body = ({children}) => {
+  const contentViewContext = useContext(ContentViewContext)
+
+  if (contentViewContext.isDocked) {
+    return children
+  }
+
+  return (
+    <Offcanvas.Body className="d-flex flex-column px-0 pb-0">
+      {children}
+    </Offcanvas.Body>
+  )
+}

package/ui/nav/SlideoutContainer/components/Header.tsx

@@ -0,0 +1,24 @@
+/* @flow */
+import {useContext} from "react"
+import Offcanvas from "react-bootstrap/Offcanvas"
+
+import {ContentViewContext} from "../../ContentView/ContentViewContext"
+
+
+export const Header = ({children}) => {
+  const contentViewContext = useContext(ContentViewContext)
+
+  if (contentViewContext.isDocked) {
+    return (
+      <div className="bg-light" style={{height: 41}}>
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <Offcanvas.Header closeButton>
+      <Offcanvas.Title>{children}</Offcanvas.Title>
+    </Offcanvas.Header>
+  )
+}

package/ui/nav/SlideoutContainer/components/Wrapper.tsx

@@ -0,0 +1,46 @@
+import Offcanvas from "react-bootstrap/Offcanvas"
+import {ResizableBox} from "react-resizable"
+
+import {useContentViewContext} from "../../ContentView/ContentViewContext"
+
+
+export const Wrapper = ({onUpdateWidth, show, onHide, children}) => {
+  const contentViewContext = useContentViewContext()
+
+
+  const onResize = (e, data) => {
+    const val = data.size.width
+    onUpdateWidth(val)
+  }
+
+  if (contentViewContext.isDocked) {
+    return (
+      <ResizableBox
+        id="slideout-view-wrapper"
+        width={contentViewContext.sideItemViewWidth}
+        style={{position: "fixed", top: 45, right: 0, bottom: 0, overflowX: "visible"}}
+        draggableOpts={{}}
+        handle={<div className="slideout-view-resize-handle" />}
+        resizeHandles={["w"]}
+        axis="x"
+        minConstraints={[120]}
+        maxConstraints={[768]}
+        onResize={onResize}
+      >
+        <div className="h-100">{children}</div>
+      </ResizableBox>
+    )
+  } else {
+    return (
+      <Offcanvas
+        className="slideout-view-offcanvas"
+        placement="end"
+        backdropClassName="slideout-view-backdrop"
+        show={show}
+        onHide={onHide}
+      >
+        {children}
+      </Offcanvas>
+    )
+  }
+}

package/ui/nav/SlideoutContainer/index.tsx

@@ -0,0 +1,50 @@
+import {memo, ReactNode, useEffect} from "react"
+import {createPortal} from "react-dom"
+
+import {useContentViewContext} from "../ContentView/ContentViewContext"
+
+import {Wrapper} from "./components/Wrapper"
+import {Header} from "./components/Header"
+import {Body} from "./components/Body"
+
+import "./slideout-container.scss"
+
+
+export const SlideoutContainer = memo(
+  ({
+    children,
+    onHide,
+    isDocked = false,
+    header,
+  }: {
+    children: ReactNode;
+    onHide?: () => void;
+    isDocked?: boolean;
+    header?: ReactNode | string;
+  }) => {
+    const contentViewContext = useContentViewContext()
+
+    const {onUpdateSlideoutViewWidth: onUpdateWidth} = contentViewContext
+
+    useEffect(() => {
+      contentViewContext.setIsDocked(isDocked)
+
+      return () => contentViewContext.setIsDocked(false)
+    }, [isDocked])
+
+    // if (!contentViewContext.isDocked) return null
+    // if (contentViewContext.isCollapsed && contentViewContext.isDocked) return null
+
+    const containerElement = document.getElementById("slideout-container")
+    if (!containerElement) return null
+
+    return createPortal(
+      <Wrapper onUpdateWidth={onUpdateWidth} show={true} onHide={onHide}>
+        {header && <Header>{header}</Header>}
+
+        <Body>{children}</Body>
+      </Wrapper>,
+      containerElement,
+    )
+  },
+)

package/ui/nav/SlideoutContainer/slideout-container.scss

@@ -0,0 +1,40 @@
+@import "helpers";
+
+#slideout-view-wrapper {
+  border-left: 1px solid $border-color;
+}
+
+
+.slideout-view-resize-handle {
+  z-index: 3;
+
+  position: absolute;
+  left: -2px;
+  top: 0;
+  display: block;
+  height: 100%;
+  width: 4px;
+  cursor: ew-resize;
+}
+
+.slideout-view-offcanvas.offcanvas {
+  transition: none;
+
+  .offcanvas-header {
+    height: 45px;
+  }
+
+  .offcanvas-title {
+    font-size: 1rem;
+  }
+
+  .offcanvas-body {
+    border-top: 1px solid $border-color;
+    font-size: $font-size-base;
+  }
+}
+
+.slideout-view-backdrop.offcanvas-backdrop {
+  transition-duration: 80ms;
+  color: $red-800;
+}

package/ui/nav/index.ts

@@ -0,0 +1,4 @@
+export * from "./Header"
+export * from "./SidebarContainer"
+export * from "./SlideoutContainer"
+export * from "./ContentView"