feat: Search bar revamp (#126)

medusajs · Oct 20, 2021 · 0da1411 · 0da1411
1 parent d6a65dd
commit 0da1411
Show file tree

Hide file tree

Showing 20 changed files with 581 additions and 327 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,6 +1,7 @@
 import React from "react"
 import { CacheProvider } from "./src/context/cache"
 import { AccountProvider } from "./src/context/account"
+import { InterfaceProvider } from "./src/context/interface"
 import { ThemeProvider as Provider } from "./src/theme"
 import { ToastProvider } from "react-toast-notifications"
 
@@ -13,9 +14,11 @@ export const wrapPageElement = ({ element }) => {
   return (
     <CacheProvider>
       <AccountProvider>
-        <ToastProvider autoDismiss={true} placement="bottom-left">
-          <Provider>{element}</Provider>
-        </ToastProvider>
+        <InterfaceProvider>
+          <ToastProvider autoDismiss={true} placement="bottom-left">
+            <Provider>{element}</Provider>
+          </ToastProvider>
+        </InterfaceProvider>
       </AccountProvider>
     </CacheProvider>
   )

diff --git a/src/assets/svg/loop.svg b/src/assets/svg/loop.svg
diff --git a/src/assets/svg/profile.svg b/src/assets/svg/profile.svg
diff --git a/src/components/layout/elements.js b/src/components/layout/elements.js
@@ -1,7 +1,10 @@
 import styled from "@emotion/styled"
 import { Flex, Box, Text } from "rebass"
 
+import Input from "../input"
+
 export const Container = styled(Flex)`
+  position: relative;
   flex-direction: column;
   min-height: 100vh;
 `
@@ -10,7 +13,6 @@ export const Main = styled(Box)`
   display: grid;
   grid-template-columns: 325px 1fr;
   grid-template-rows: 1fr;
-
   min-height: 100vh;
   flex: 1;
 `
@@ -22,10 +24,28 @@ export const Body = styled(Box)`
 `
 
 export const Content = styled(Flex)`
+  position: relative;
+  flex-direction: column;
   overflow-y: scroll;
   // overflow-x: hidden;
   height: 100vh;
   background-color: ${props => props.theme.colors.lightest};
   box-shadow: rgba(0, 0, 0, 0.03) -1px 0px 99px 0px,
     rgba(0, 0, 0, 0.02) -1px 0px 2px 0px;
 `
+
+export const SearchBar = styled(Input)`
+  margin-left: -8px;
+  input {
+    border: none !important;
+    box-shadow: none !important;
+    height: 42px;
+    border-radius: 0;
+    margin: auto;
+    max-width: 1200px;
+    ::placeholder {
+      color: black;
+      font-weight: 400;
+    }
+  }
+`
diff --git a/src/components/layout/index.js b/src/components/layout/index.js
@@ -3,6 +3,7 @@ import { useStaticQuery, graphql } from "gatsby"
 import PropTypes from "prop-types"
 
 import Sidebar from "../sidebar"
+import TopBar from "./topbar"
 
 import { Container, Main, Content, Body } from "./elements"
 
@@ -24,6 +25,7 @@ const Layout = ({ children }) => {
       <Main>
         <Sidebar />
         <Content fontFamily={"body"} pb={4} pl={4} pr={4}>
+          <TopBar />
           <Body pl={3} pr={3} pb={3} mx="auto">
             {children}
           </Body>

diff --git a/src/components/layout/popover.js b/src/components/layout/popover.js
@@ -0,0 +1,96 @@
+import styled from "@emotion/styled"
+import React, { useRef } from "react"
+import ReactTooltip from "react-tooltip"
+import Typography from "../typography"
+
+const Tooltip = styled(ReactTooltip)`
+  ${Typography.Base};
+  box-shadow: ${props => props.theme.shadows.popover} !important;
+  padding: 0 !important;
+  border: none !important;
+  overflow: hidden;
+  &.show {
+    opacity: 1 !important;
+  }
+  &.place-bottom::before {
+    border-bottom: 5.9px solid #e1e1e1 !important;
+    border-left-width: 9px !important;
+    border-right-width: 9px !important;
+    margin-left: -9px !important;
+  }
+  &.place-bottom::after {
+    border-bottom-width: 6px !important;
+  }
+`
+
+const computePosition = (position, event, triggerElement, tooltipElement) => {
+  const id = triggerElement.getAttribute("aria-describedby")
+  const arrowLeft =
+    triggerElement.getBoundingClientRect().left + triggerElement.offsetWidth / 2
+  const arrowTop =
+    triggerElement.getBoundingClientRect().top + triggerElement.offsetHeight + 2
+  const leftPosition = arrowLeft - (tooltipElement.clientWidth - 30)
+
+  const oldSheet = document.getElementById(`tooltip-styles-${id}`)
+  if (oldSheet) document.body.removeChild(oldSheet)
+
+  const sheet = document.createElement("style")
+  sheet.setAttribute("id", "tooltip-styles")
+
+  sheet.innerHTML = `
+    .__react_component_tooltip.${id}.place-bottom::after {
+      position: fixed;
+      top: ${arrowTop}px;
+      left: ${arrowLeft}px;
+    }
+    .__react_component_tooltip.${id}.place-bottom::before {
+      position: fixed;
+      top: ${arrowTop - 1}px;
+      left: ${arrowLeft}px;
+    }
+  `
+  document.body.appendChild(sheet)
+  return {
+    top: position.top - 2,
+    left: leftPosition,
+  }
+}
+
+const Popover = ({ children, id }) => {
+  const ref = useRef()
+  const forceClose = e => {
+    const current = ref.current
+    current.tooltipRef = null
+    ReactTooltip.hide()
+  }
+
+  const rebuildPopover = e => {
+    ReactTooltip.rebuild()
+  }
+
+  return (
+    <Tooltip
+      border="true"
+      ref={ref}
+      textColor="black"
+      backgroundColor="white"
+      arrowColor="white"
+      effect="solid"
+      clickable={true}
+      globalEventOff={"click"}
+      isCapture={true}
+      id={id}
+      place="bottom"
+      overridePosition={computePosition}
+    >
+      {React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { forceClose, rebuildPopover })
+        }
+        return child
+      })}
+    </Tooltip>
+  )
+}
+
+export default Popover