@rpcbase/client 0.227.0 → 0.231.0

package/ui/nav/AccountsDropdown/accounts-dropdown.scss

@@ -1,51 +0,0 @@
-@import "../../helpers/helpers";
-@import "helpers";
-
-// #nav-account-dropdown {
-//   .accounts-glyph > svg {
-//     fill: $gray-200;
-//
-//     &:hover {
-//       fill: $white;
-//     }
-//   }
-// }
-
-#accounts-dropdown-menu {
-  color: $gray-100;
-
-  .menu-header {
-    color: $gray-500;
-  }
-
-  .account-list-item {
-    @include px(2);
-    @include py(2);
-
-    cursor: pointer;
-    color: $gray-400;
-
-    &:hover {
-      background: $gray-800;
-    }
-
-    &:active {
-      background: $black;
-    }
-  }
-}
-
-.account-dropdown-icon {
-  width: 18px;
-  height: 18px;
-
-  & path {
-    fill: $gray-400;
-  }
-}
-
-.account-dropdown-item:hover {
-  .account-dropdown-icon path {
-    fill: $white;
-  }
-}

package/ui/nav/AccountsDropdown/index.tsx

@@ -1,90 +0,0 @@
-import {useTranslation} from "react-i18next"
-import Dropdown from "react-bootstrap/Dropdown"
-
-import {getUid} from "../../../auth/getUid"
-import {useHashState} from "../../../hashState"
-
-import {UserAvatar} from "../../UserAvatar"
-
-import * as MorphingDropdown from "../MorphingDropdown"
-
-import {AddAccountIcon, BillingIcon, OrganizationIcon, SignoutIcon} from "../../icons"
-
-import {SwitchAccounts} from "./SwitchAccounts"
-
-import "./accounts-dropdown.scss"
-
-
-export const AccountsDropdown = ({id, accounts}) => {
-  const {t} = useTranslation("rb.nav")
-
-  const uid = getUid()
-
-  const {serializeHashState} = useHashState()
-
-  const showAccountSettings = () => {
-    serializeHashState({
-      showAccountSettingsModal: true,
-    })
-  }
-
-  return (
-    <MorphingDropdown.Menu id={id}>
-      <div
-        id="accounts-dropdown-menu"
-        className="list-group"
-        data-bs-theme="dark"
-        style={{width: 200}}
-      >
-        <div>{t("account_settings")}</div>
-        <div
-          id="btn-dd-account-settings"
-          role="button"
-          className="list-group-item account-dropdown-item ps-1 d-flex align-items-center justify-content-start cursor-pointer"
-          onClick={showAccountSettings}
-        >
-          <div className="me-1">
-            <UserAvatar userId={uid} />
-          </div>
-          {t("account_settings")}
-        </div>
-
-        <div className="list-group-item account-dropdown-item" role="button">
-          <OrganizationIcon
-            className="account-dropdown-icon me-2"
-            style={{marginLeft: -10, marginTop: -2}}
-          />
-          {t("organization")}
-        </div>
-        <div className="list-group-item account-dropdown-item" role="button">
-          <BillingIcon
-            className="account-dropdown-icon me-2"
-            style={{marginLeft: -10, marginTop: -2}}
-          />
-          Billing
-        </div>
-        <Dropdown.Divider />
-
-        <SwitchAccounts accounts={accounts} />
-
-        <Dropdown.Divider />
-
-        <a href="/signin" className="list-group-item account-dropdown-item">
-          <AddAccountIcon
-            className="account-dropdown-icon me-2"
-            style={{marginLeft: -10, marginTop: -2}}
-          />
-          Add Account
-        </a>
-        <Dropdown.Divider />
-        <a href="/signout" className="list-group-item account-dropdown-item">
-          <SignoutIcon
-            className="account-dropdown-icon me-2"
-            style={{marginLeft: -10, marginTop: -2}}
-          />
-          Sign Out
-        </a>
-      </div>
-    </MorphingDropdown.Menu>
-  )
-}

package/ui/nav/AccountsToggle/index.tsx

@@ -1,24 +0,0 @@
-import {useEffect} from "react"
-import {getUid} from "../../../auth/getUid"
-
-import {UserAvatar} from "../../UserAvatar"
-
-import * as MorphingDropdown from "../MorphingDropdown"
-
-
-export const AccountsToggle = () => {
-  const uid = getUid()
-
-  useEffect(() => {
-    console.log("WOWOWO", uid)
-  })
-
-  return (
-    <MorphingDropdown.Toggle
-      id="accounts"
-      className="ps-1 pe-2 h-100 d-flex justify-content-center align-items-center"
-    >
-      <UserAvatar userId={uid} size={"medium"} />
-    </MorphingDropdown.Toggle>
-  )
-}

package/ui/nav/ContentView/ContentViewContext.ts

@@ -1,23 +0,0 @@
-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>>;
-  headerHeight: number;
-};
-
-export const ContentViewContext = createContext<ContentViewContextType>(
-  undefined!,
-)
-
-export default ContentViewContext
-
-export const useContentViewContext = () => useContext(ContentViewContext)

package/ui/nav/ContentView/index.tsx

@@ -1,115 +0,0 @@
-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(
-  ({
-    header,
-    headerHeight = 45,
-    children,
-    storageKeyPrefix: _storageKeyPrefix,
-  }: {
-    header: ReactNode;
-    headerHeight?: number;
-    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,
-          headerHeight,
-        }}
-      >
-        {header}
-        <div
-          className=""
-          style={{
-            display: "flex",
-            flexDirection: "row",
-          }}
-        >
-          <div id="sidebar-container" style={{top: headerHeight}} />
-
-          <div
-            ref={contentViewRef}
-            key={`content-wrapper-${"content_view_"}`}
-            style={{
-              width: `calc(100vw - ${contentWidthOffset}px)`,
-              height: `calc(100vh - ${headerHeight}px)`,
-              marginTop: headerHeight,
-              overflowY: "scroll",
-              marginLeft: sidebarWidth,
-            }}
-          >
-            {children}
-          </div>
-        </div>
-
-        <div id="slideout-container" />
-      </ContentViewContext>
-    )
-  },
-)

package/ui/nav/HeaderContainer/header.scss

@@ -1,52 +0,0 @@
-@import "helpers";
-
-@import "./variables";
-
-$brand-v-padding: 11px;
-$account-max-width: 160px;
-$img-size: 32px;
-$img-border-radius: 3px;
-
-#header-container {
-  border-bottom: 1px solid $black;
-  background-color: $black !important;
-
-  .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/HeaderContainer/index.tsx

@@ -1,23 +0,0 @@
-import {ReactNode} from "react"
-
-import "./header.scss"
-import {useContentViewContext} from "../ContentView/ContentViewContext"
-
-
-export const HeaderContainer = ({children}: { children: ReactNode }) => {
-  const contentViewContext = useContentViewContext()
-
-  if (!children || !contentViewContext) return null
-
-  return (
-    <nav
-      id="header-container"
-      className={
-        "d-flex align-items-center fixed-top bg-dark flex-md-nowrap shadow p-0 text-light"
-      }
-      style={{height: contentViewContext.headerHeight}}
-    >
-      {children}
-    </nav>
-  )
-}

package/ui/nav/HeaderContainer/variables.scss

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

package/ui/nav/MorphingDropdown/MorphingDropdownContext.tsx

@@ -1,151 +0,0 @@
-import assert from "assert"
-import {
-  ReactNode,
-  createContext,
-  useContext,
-  useId,
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-} from "react"
-
-
-const TOGGLE_OFF_DELAY = 180
-
-export const MorphingDropdownContext = createContext(undefined!)
-
-export const useMorphingDropdown = () => useContext(MorphingDropdownContext)
-
-export const MorphingDropdownProvider = ({
-  children,
-  side,
-}: {
-  children: ReactNode;
-  side: "left" | "right";
-}) => {
-  const portalId = useId()
-
-  const setNextMountedRectRef = useRef(() => null)
-  const onResetStateRef = useRef(() => null)
-  const mousePosRef = useRef({x: 0, y: 0})
-  const isMouseOverToggleRef = useRef(false)
-
-  const [activeId, _setActiveId] = useState()
-
-  useEffect(() => {
-    assert(["left", "right"].includes(side))
-  }, [])
-
-  useEffect(() => {
-    const listener = (e) => {
-      mousePosRef.current = {
-        x: e.pageX,
-        y: e.pageY,
-      }
-    }
-
-    document.addEventListener("mousemove", listener)
-
-    return () => {
-      document.removeEventListener("mousemove", listener)
-    }
-  }, [])
-
-  const setActiveId = useCallback((nextId) => {
-    let shouldReset = false
-    _setActiveId((currentId) => {
-      if (nextId === currentId || nextId === null) {
-        shouldReset = true
-
-        return null
-      } else return nextId
-    })
-
-    if (shouldReset) {
-      const fn = onResetStateRef.current
-      if (typeof fn === "function") {
-        fn()
-      }
-    }
-  }, [])
-
-  const close = useCallback(() => {
-    setActiveId(null)
-  }, [setActiveId])
-
-  const hideAfterMouseLeave = useCallback(() => {
-    // hovering a toggle, skip
-    if (isMouseOverToggleRef.current) return
-
-    // check if we are hovering the menu's portal
-    const portalEl = document.getElementById(portalId)
-
-    if (!portalEl) {
-      setActiveId(null)
-      return
-    }
-
-    // portal exists, check if cursor is hovering it
-    const rect = portalEl.getBoundingClientRect()
-    const {x: mouseX, y: mouseY} = mousePosRef.current
-
-    const isHovering =
-      mouseX >= rect.left &&
-      mouseX <= rect.right &&
-      mouseY >= rect.top &&
-      mouseY <= rect.bottom
-
-    if (!isHovering) {
-      setActiveId(null)
-      return
-    }
-  }, [])
-
-  const registerSetNextMountedHandler = (fn) => {
-    setNextMountedRectRef.current = fn
-  }
-
-  const registerOnResetState = (fn) => {
-    onResetStateRef.current = fn
-  }
-
-  // when a toggle is hovered
-  const applyMouseEnterToggle = (id) => {
-    isMouseOverToggleRef.current = true
-    _setActiveId(id)
-  }
-
-  const applyMouseLeaveToggle = () => {
-    isMouseOverToggleRef.current = false
-    setTimeout(() => {
-      hideAfterMouseLeave()
-    }, TOGGLE_OFF_DELAY)
-  }
-
-  const applyMouseLeaveMenu = () => {
-    setTimeout(() => {
-      hideAfterMouseLeave()
-    }, TOGGLE_OFF_DELAY)
-  }
-
-  return (
-    <MorphingDropdownContext.Provider
-      value={{
-        registerSetNextMountedHandler,
-        setNextMountedRect: setNextMountedRectRef.current,
-        registerOnResetState,
-        applyMouseEnterToggle,
-        applyMouseLeaveToggle,
-        applyMouseLeaveMenu,
-        activeId,
-        setActiveId,
-        close,
-        side,
-        portalId,
-      }}
-    >
-      {children}
-    </MorphingDropdownContext.Provider>
-  )
-}

package/ui/nav/MorphingDropdown/MorphingDropdownMenu.tsx

@@ -1,38 +0,0 @@
-import assert from "assert"
-import {useRef, useLayoutEffect} from "react"
-
-import {useMorphingDropdown} from "./MorphingDropdownContext"
-
-
-export const MorphingDropdownMenu = ({
-  ref: parentRef,
-  id,
-  style = {},
-  children,
-  className = "",
-  ...props
-}) => {
-  assert(id, "missing dropdown menu id")
-
-  const selfRef = useRef(null)
-
-  const dropdownContext = useMorphingDropdown()
-
-  const ref = parentRef || selfRef
-
-  useLayoutEffect(() => {
-    const rect = ref.current.getBoundingClientRect()
-    dropdownContext.setNextMountedRect(id, rect)
-  }, [])
-
-  return (
-    <div
-      ref={ref}
-      {...props}
-      className={cx("text-light", className)}
-      style={{...style}}
-    >
-      {children}
-    </div>
-  )
-}