@rpcbase/client 0.209.0 → 0.211.0

package/ui/nav/MorphingDropdown/morphing-dropdown.scss

@@ -0,0 +1,35 @@
+@import "helpers";
+
+$transition-duration: 60ms;
+
+.morphing-dropdown-wrapper {
+  background: $gray-900;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+
+  &.docked-right {
+    border-bottom-right-radius: 0;
+  }
+
+  &.docked-left {
+    border-bottom-left-radius: 0;
+  }
+}
+
+.header-dropdown-fade-enter {
+  opacity: 0;
+}
+
+.header-dropdown-fade-enter-active {
+  opacity: 1;
+  transition: opacity $transition-duration;
+}
+
+.header-dropdown-fade-exit {
+  opacity: 1;
+}
+
+.header-dropdown-fade-exit-active {
+  opacity: 00;
+  transition: opacity $transition-duration;
+}

package/ui/nav/index.ts

@@ -1,4 +1,9 @@
-export * from "./Header"
+export * from "./HeaderContainer"
 export * from "./SidebarContainer"
 export * from "./SlideoutContainer"
 export * from "./ContentView"
+
+import * as MorphingDropdown from "./MorphingDropdown"
+
+
+export {MorphingDropdown}

package/ui/ExpandableFloatView/index.js

@@ -1,120 +0,0 @@
-/* @flow */
-import {motion} from "framer-motion"
-import {useRef, useState, useImperativeHandle, forwardRef} from "react"
-
-import {SPRING_DEFAULT} from "../springs"
-import useBackdrop from "./useBackdrop"
-
-import "./exp.scss"
-
-
-export const ExpandableFloatView = forwardRef(
-  ({renderContent, containerRef, onGetExpandedRect, targetRef, ...props}, ref) => {
-    const parentRef = useRef(null)
-    const wrapperRef = useRef(null)
-
-    const isOpen = useRef(false)
-    const openedFromRect = useRef(null)
-
-    const [animatedVals, setAnimatedVals] = useState({})
-
-    const getRect = () => {
-      const boundingRect = containerRef.current.getBoundingClientRect()
-      const rect = {
-        left: `${boundingRect.x}px`,
-        top: `${boundingRect.top}px`,
-        right: `${window.innerWidth - boundingRect.right}px`,
-        bottom: `${window.innerHeight - boundingRect.bottom}px`,
-      }
-
-      return rect
-    }
-
-    const onOpen = () => {
-      showBackdrop()
-
-      isOpen.current = true
-
-      const expandedRect = onGetExpandedRect()
-
-      requestAnimationFrame(() => {
-        // set the wrapper ref to current + fixed
-        const rect = getRect()
-        openedFromRect.current = rect
-
-        const newStyle = {
-          position: "fixed",
-          top: rect.top,
-          right: rect.right,
-          bottom: rect.bottom,
-          left: rect.left,
-          zIndex: 1000,
-        }
-        Object.keys(newStyle).forEach((k) => {
-          wrapperRef.current.style[k] = newStyle[k]
-        })
-
-        document.body.appendChild(wrapperRef.current)
-
-        setAnimatedVals(expandedRect)
-      })
-    }
-
-    const onClose = () => {
-      isOpen.current = false
-
-      const returnToRect = openedFromRect.current
-      setAnimatedVals({
-        top: returnToRect.top,
-        right: returnToRect.right,
-        bottom: returnToRect.bottom,
-        left: returnToRect.left,
-        zIndex: "unset",
-      })
-    }
-
-    const onToggle = () => {
-      if (isOpen.current) {
-        onClose()
-      } else {
-        onOpen()
-      }
-    }
-
-    // BACKDROP
-    const {showBackdrop} = useBackdrop(isOpen, onToggle)
-    // BACKDROP
-
-    useImperativeHandle(ref, () => {
-      return {
-        open: () => {
-          onOpen()
-        },
-        toggle: () => {
-          onToggle()
-        },
-        close: () => onClose(),
-      }
-    })
-
-    return (
-      <>
-        <div ref={parentRef}>
-          <motion.div
-            ref={wrapperRef}
-            style={{
-              inset: "unset",
-              // zIndex: 10000,
-              // ...styleProps,
-            }}
-            transition={SPRING_DEFAULT}
-            animate={{...animatedVals}}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {renderContent({})}
-          </motion.div>
-        </div>
-      </>
-    )
-  },
-)

package/ui/View/index.js

@@ -1,12 +0,0 @@
-/* @flow */
-import {forwardRef} from "react"
-import {View as RNView} from "react-native"
-
-
-export const View = forwardRef(({children, ...props}, ref) => {
-  return (
-    <RNView ref={ref} {...props}>
-      {children}
-    </RNView>
-  )
-})

package/ui/nav/Header/index.tsx

@@ -1,150 +0,0 @@
-/* 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>
-  )
-}