theme-ui#Box JavaScript Examples

CodeWrapper = ({ value, language = 'jsx', showLineNumbers, ...otherProps }) => {
  return (
    <Box variant="styles.code" {...otherProps}>
      <SyntaxHighlighter
        codeTagProps={''}
        useInlineStyles={false}
        language={language}
        showLineNumbers={showLineNumbers}
      >
        {value}
      </SyntaxHighlighter>
    </Box>
  );
}

export default function Identicon({
  diameter = 32,
  address,
  sx,
  svgSx,
  ...rest
}) {
  return (
    <Box
      as={(props) => (
        <ReactJazzicon
          diameter={diameter}
          seed={jsNumberForAddress(address)}
          paperStyles={{ ...sx }}
          svgStyles={{ ...svgSx }}
          {...rest}
          {...props}
        />
      )}
      {...rest}
    />
  );
}

Infobar = ({ resourcePath, slug, toc }) => {
  return (
    <Box>
      <Box
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          border: 'solid',
          borderColor: 'muted',
          borderWidth: '0 0 1px 0',
          width: '100%',
          p: 3,
        }}
      >
        <Text sx={{ fontFamily: 'FT Base', pl: 3 }} variant="microText">
          Contents
        </Text>
      </Box>
      <Box sx={{ pl: 0, pr: 3, pt: 3 }}>
        <Text sx={{ pl: [2, 2, 2, 4], pt: 0, pb: 2, color: 'textMuted' }} variant="caps">
          On This Page
        </Text>
        <FileContents resourcePath={resourcePath} slug={slug} toc={toc} />
      </Box>
    </Box>
  );
}

Code = ({ sx, ...props }) => (
  <Box
    as='pre'
    sx={{
      cursor: 'pointer',
      borderRadius: 2,
      overflow: 'auto',
      border: 1,
      width: '100%',
      p: 3,
      userSelect: 'all',
      ...sx
    }}
    {...props}
  />
)

GuideCard = ({ title, link, linkText, description, icon, tags, ...props }) => {
  return (
    <Box {...props}>
      <Link href={link} passHref>
        <Grid sx={{ height: '100%', gap: 3, gridTemplateRows: '50px auto 1fr auto' }}>
          <Icon color="mutedAlt" name={icon} size={5}></Icon>
          <Heading sx={{ cursor: 'pointer' }} variant="smallHeading">
            {title}
          </Heading>
          <Text
            sx={{
              cursor: 'pointer',
              display: '-webkit-inline-box',
              overflow: 'hidden',
              maxHeight: '70px',
              WebkitLineClamp: 3,
              WebkitBoxOrient: 'vertical',
            }}
          >
            {description}
          </Text>
          <TagList tags={tags} />
          <Flex sx={{ alignItems: 'center', alignSelf: 'end' }}>
            <Icon name="arrow_right" color="primary" mr={2} />
            <ThemeLink>{linkText}</ThemeLink>
          </Flex>
        </Grid>
      </Link>
    </Box>
  );
}

App = () => {
  return (
    <Flex
      sx={{
        maxWidth: 1400,
        margin: 'auto',
        flexDirection: 'column',
        alignItems: 'center',
        paddingBottom: 20
      }}
    >
      <h1>Store</h1>
      <Flex sx={{ justifyContent: 'space-evenly', gap: 80 }}>
        <Box>
          <h2>Products not created in the Stripe Dashboard</h2>
          <Products products={fakeData} />
          <br />
          <br />
          <h2>Products made on Stripe Dashboard using Price API</h2>
          <PriceProducts products={priceProducts} />
        </Box>
        <CartDisplay />
      </Flex>
    </Flex>
  )
}

MobileSidebar = ({ open, onClick }) => {
  return (
    <Box
      sx={{
        border: open ? undefined : 'light',
        borderColor: 'muted',
        borderWidth: '0 0 1px 0',
        p: 2,
      }}
      onClick={() => onClick(!open)}
    >
      <Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
        <NavLink sx={{ px: 0 }}>Topics</NavLink>
        <Icon
          name={open ? 'dp_arrow_up' : 'dp_arrow_down'}
          size="auto"
          color="primary"
          sx={{
            cursor: 'pointer',
            height: 20,
            width: 20,
          }}
        />
      </Flex>
    </Box>
  );
}

Option = ({ innerRef, innerProps, children, value, ...props }) => (
  <components.Option {...props}>
    <Flex
      ref={innerRef}
      sx={{
        alignItems: 'center',
        justifyContent: 'space-between'
      }}
      {...innerProps}
    >
      <Text
        sx={{
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          pr: 3,
          flex: 1
        }}
        title={children}
      >
        {children}
      </Text>
      <Box>
        <Image
          placeholder='blur'
          src={previews[value]}
          width={128}
          height={72}
        />
      </Box>
    </Flex>
  </components.Option>
)

SVG = forwardRef(
  (
    { fill = "none", size = 16, xmlns = "http://www.w3.org/2000/svg", ...rest },
    ref
  ) => (
    <Box
      ref={ref}
      as="svg"
      fill={fill}
      height={size}
      width={size}
      xmlns={xmlns}
      {...rest}
    />
  )
)

CodeContainer = ({ value, language }) => {
  return (
    <Box sx={{}}>
      <Flex
        sx={{
          ml: 3,
          borderRadius: '4px 4px 0px 0px',
          py: 2,
          bg: 'surface',
          width: 6,
        }}
      >
        <Text sx={{ mx: 'auto' }}>{capitalize(language || 'code')}</Text>
      </Flex>
      <CodeWrapper
        sx={{ p: 3, maxHeight: 8, borderRadius: 'small' }}
        value={value}
        language={language}
      />
    </Box>
  );
}

export function TabList({ sx, ...rest }) {
  const [tabIndex, setTabIndex] = useState(0);
  useEffect(() => {
    const _tabIndex = rest.children.findIndex((tab) => tab.props.selected);
    if (tabIndex !== _tabIndex) setTabIndex(_tabIndex);
  }, [rest.children, tabIndex]);

  const [measureRef, { width: _width, left }] = useMeasure();
  const width = _width / rest.children.length;
  const animatedStyle = useSpring({
    left: tabIndex * width,
  });
  return (
    <Box key={left} ref={measureRef} sx={{ position: "relative" }}>
      <Box
        as={_TabList}
        sx={{
          cursor: "pointer",
          display: "flex",
          listStyle: "none",
          variant: "tabs.tabList",
          ...sx,
        }}
        {...rest}
      />
      <AnimatedBox
        style={animatedStyle}
        sx={{
          backgroundColor: "primary",
          bottom: 0,
          height: 2,
          position: "absolute",
          width,
        }}
      />
    </Box>
  );
}

SideBarFade = styled(Box)`
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--side-bar-width) - 1px);
  height: 50px;
  pointer-events: none;
  box-shadow: inset 0 50px 25px calc(-1 * 25px) white;
`

export default function Video({
  variant = "responsive",
  sx,
  controls = true,
  ...rest
}) {
  return (
    <Box variant={`video.${variant}`} sx={{ position: "relative", ...sx }}>
      <Box
        as={(props) =>
          rest.url ? (
            <ReactPlayerLazy controls={controls} {...rest} {...props} />
          ) : (
            <ReactLoadingSkeleton {...rest} {...props} />
          )
        }
        sx={{
          height: "100% !important",
          left: 0,
          position: "absolute",
          top: 0,
          width: "100% !important",
        }}
      />
    </Box>
  );
}

SignupCta = () => {
  const placeholder = 'We saved a slot for your email';
  return (
    <Container>
      <Grid columns={2} sx={{ mb: 6, mx: 5 }}>
        <Box sx={{ p: 5 }}>
          <Heading variant="largeHeading">
            Want Maker dev updates dripping into your mailbox?
          </Heading>
        </Box>
        <Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>
          <EmailSignup placeholder={placeholder} />
        </Flex>
      </Grid>
    </Container>
  );
}

ChevronDown = ({ fill = "darkContrast", styles }) => {
  return (
    <Box
      as="svg"
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      sx={{
        ...styles,
        alignSelf: "center",
        pointerEvents: "none",
        fill: `${fill}`,
      }}
    >
      <path d="M7.41 7.84l4.59 4.58 4.59-4.58 1.41 1.41-6 6-6-6z" />
    </Box>
  )
}

export default function Accordion({
  allowMultipleExpanded = true,
  allowZeroExpanded = true,
  ...rest
}) {
  return (
    <Box
      as={(props) => (
        <_Accordion
          allowMultipleExpanded={allowMultipleExpanded}
          allowZeroExpanded={allowZeroExpanded}
          {...rest}
          {...props}
        />
      )}
      {...rest}
    />
  );
}

JsonContainer = ({ json, header, language, allowCopy }) => {
  const jsonRef = useRef()

  const codeClass = language
    ? language === "shell"
      ? "language-shell"
      : "language-json"
    : "language-json"

  //INVESTIGATE: @theme-ui/prism might be a better solution
  useEffect(() => {
    if (jsonRef.current) {
      Prism.highlightAllUnder(jsonRef.current)
    }
  }, [])

  if (typeof json !== "string" || json === "{}") return null

  return (
    <Box ref={jsonRef} sx={{ position: "sticky", top: "20px" }}>
      <CodeBox
        allowCopy={allowCopy}
        content={json}
        shell={language === "shell"}
        header={header}
      >
        <pre>
          <code className={codeClass}>{json}</code>
        </pre>
      </CodeBox>
    </Box>
  )
}

function AnimatedAccordionItemPanel({ expanded, ...rest }) {
  const [measureRef, { height }] = useMeasure();
  const animatedStyle = useSpring({
    height: expanded ? height : 0,
    overflow: "hidden",
  });
  return (
    <animated.div style={animatedStyle}>
      <Box ref={measureRef}>
        <Box as={_AccordionItemPanel} variant="accordion.panel" {...rest} />
      </Box>
    </animated.div>
  );
}

Description = ({ children }) => {
  return (
    <Box
      sx={{
        code: {
          backgroundColor: "faded",
          borderRadius: "4px",
          p: "3px",
        },
      }}
    >
      {children}
    </Box>
  )
}

export default function Alert({ type = "info", title, children, sx, ...rest }) {
  const Icon = { info: Info, warning: Warning, muted: Info }[type];
  return (
    <Flex
      variant={`alert.${type}`}
      sx={{ ...sx, alignItems: "center", backgroundColor: "background" }}
      {...rest}
    >
      <Icon variant={`alert.${type}.icon`} size={24} />
      <Box sx={{ marginLeft: 2 }}>
        <Text variant={`alert.${type}.title`}>{title}</Text>
        <Text>{children}</Text>
      </Box>
    </Flex>
  );
}

ContentBox = styled(Box)`
  @media screen and (min-width: 849px) {
    width: calc(100% - var(--side-bar-width));
  }

  @media screen and (max-width: 848px) {
    width: 100%;
  }
`

Header = props => {
  const { onOpen } = props
  const {
    repository,
    themeConfig: { showDarkModeSwitch, showMarkdownEditButton },
  } = useConfig()
  const { edit = true, ...doc } = useCurrentDoc()

  return (
    <div sx={styles.wrapper} data-testid="header">
      <Box sx={styles.menuIcon}>
        <button sx={styles.menuButton} onClick={onOpen}>
          <Menu size={25} />
        </button>
      </Box>
      <div sx={styles.innerContainer}>
        <Logo />
        <Flex sx={{alignItems: 'baseline'}}>
          <h5 sx={{m: '0', mr: '20px'}}>{'v' + data.version}</h5>
          {repository && (
            <Box sx={{ mr: 2 }}>
              <a
                href={repository}
                sx={styles.headerButton}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Github size={15} />
              </a>
            </Box>
          )}
        </Flex>
      </div>
    </div>
  )
}

CopyToClipboard = ({text, copyText, tooltipText}) => {
  const [copied, setCopied] = useState(false)
  const id = (Math.random()*1000000).toString()
  const forceTooltipRemount = copied ? "content-1" : "content-2"

  const onCopyClicked = () => {
    copy(copyText || tooltipText, {format: 'text/plain'})
  }

  return (
    <Box
      mr={1}
      onMouseLeave={() => {setCopied(false)}}
      onClick={() => {
        setCopied(true)
        onCopyClicked()
      }} 
      data-for={id}
      data-tip={forceTooltipRemount}
      key={forceTooltipRemount}
      sx={{cursor: 'pointer'}}
      >
        {
          text && (
            <Text variant="small" mr={2} sx={{ fontWeight: "300" }}>
              {text.toUpperCase()}
            </Text>)
        }
        <Clipboard/> 
        {copied ? 
          <StyledTooltip id={id} text={"Copied!"} />
          : 
          <StyledTooltip id={id} text={tooltipText} />
          }
    </Box>)
}

Filter = ({ options, activeGroup, onChange, count, mobile }) => {
  return (
    <Box sx={{ mb: 6 }}>
      <Box sx={{ border: 'light', borderColor: 'muted', borderWidth: '1px 0 1px 0', mb: 2 }}>
        <Container sx={{ p: 0 }}>
          <Grid columns={[2, '1fr 2fr 1fr']}>
            <Text variant="plainText" sx={{ fontSize: 3, p: 2, my: 'auto' }}>
              Show me guides about:
            </Text>
            <Flex
              sx={{
                border: 'light',
                borderColor: 'muted',
                borderWidth: mobile ? '0 0 0 1px' : '0 1px 0 1px',
                px: 4,
                py: 2,
              }}
            >
              <Dropdown
                sx={{ width: [7, 8] }}
                options={options}
                activeGroup={activeGroup}
                onChange={onChange}
              />
            </Flex>
            {!mobile && <FeaturedCount count={count} sx={{ py: 2, px: 4 }} />}
          </Grid>
        </Container>
      </Box>
      {mobile && <FeaturedCount count={count} sx={{ px: 2 }} />}
    </Box>
  );
}

Dragger = styled(Box).attrs(({ $isDraggable, $isHorizontal }) => ({
  style: {
    [!$isHorizontal ? 'width' : 'height']: !$isDraggable ? '10px' : 'initial',
    position: !$isDraggable ? 'absolute' : 'fixed',
    zIndex: !$isDraggable ? 1 : 9999,
    transform: !$isDraggable
      ? `translate${!$isHorizontal ? 'X' : 'Y'}(-50%)`
      : 'none',
    ...(!$isDraggable ? {} : fullScreenStyle)
  }
}))`
  left: 0;
  top: 0;
  bottom: 0;
  cursor: ew-resize;
  will-change: transform, position, width, height, z-index;

  ${({ isHorizontal }) => css`
    ${!isHorizontal ? 'bottom' : 'right'}: 0;
    cursor: ${!isHorizontal ? 'ew-resize' : 'ns-resize'};
  `}
`

GuidesLayout = ({ subnav, infobar, mobile, router, children }) => {
  return (
    <Box>
      <Header subnav={subnav} mobile={mobile} router={router} />
      {!mobile && <aside sx={{ float: 'right', width: '20%' }}>{infobar}</aside>}
      {children}
      <Footer />
    </Box>
  );
}

Container = styled(Box)`
  div.Collapsible span.Collapsible__trigger.is-open {
    svg {
      transform: rotate(180deg);
    }
  }
`

PageLayout = ({
  data,
  children,
  isShowModal,
  isShowSearch,
  toggleModal,
  searchCompProps,
}) => {
  const siteData = data.siteData

  return (
    <Flex
      sx={{
        flexDirection: 'column',
        height: '100vh',
        overflow: 'hidden',
        backgroundColor: `background`,
        filter: `blur(${isShowModal ? 3 : 0}px)`,
      }}
    >
      <Header
        sx={{}}
        toggleModal={toggleModal}
        isShowSearch={isShowSearch}
        searchCompProps={searchCompProps}
        title={siteData.siteMetadata.description}
      />
      <Flex
        as="main"
        sx={{
          flex: 1,
          overflowY: 'scroll',
          flexDirection: 'column',
          alignItems: 'center',
          p: ['20px 0'],
          position: 'relative',
        }}
      >
        <Box
          sx={{
            px: '15px',
            maxWidth: ['100%', '768px', '992px', '1400px'],
          }}
        >
          <TransitionState>
            {({ transitionStatus, exit, entry, mount }) => {
              return (
                <WrapperStyle pose={mount ? 'visible' : 'hidden'}>
                  {children}
                </WrapperStyle>
              )
            }}
          </TransitionState>
        </Box>
      </Flex>
      <Footer />
    </Flex>
  )
}

Header = ({ query, subnav, mobile, router }) => {
  const [mobileOpened, setMobileOpened] = useState(false);

  useEffect(() => {
    setMobileOpened(false);
  }, [router?.asPath]);
  return (
    <Box
      sx={{ width: '100%', zIndex: 1, position: [mobileOpened ? 'fixed' : undefined, undefined] }}
    >
      {mobileOpened ? (
        <MobileMenu close={() => setMobileOpened(false)} bannerData={bannerData} />
      ) : (
        <>
          {!mobile && <Banners bannerData={bannerData} />}
          <Container as="header" mt={[0, 2]} sx={{ bg: 'background' }}>
            <Flex
              sx={{
                alignItems: 'center',
                justifyContent: 'space-between',
                mb: [0, 3],
                py: [2, 0],
              }}
            >
              <Link href="/" passHref>
                <ThemeLink>
                  <Icon name="maker" color="text" size={4} />
                </ThemeLink>
              </Link>
              <Flex sx={{ alignItems: 'center' }}>
                <Flex
                  as="nav"
                  sx={{
                    alignItems: 'center',
                  }}
                >
                  {LINKS.map(({ name, url }) => (
                    <Link href={{ pathname: url, query }} passHref key={name}>
                      <NavLink
                        key={name}
                        sx={{
                          display: ['none', 'none', 'block'],
                          pr: 4,
                          '&:last-child': { pr: [null, 0] },
                        }}
                        variant="links.nav"
                      >
                        {name}
                      </NavLink>
                    </Link>
                  ))}
                </Flex>
                <IconButton sx={{ display: ['block', 'block', 'none'], cursor: 'pointer' }}>
                  <Icon
                    name="dp_menu"
                    size="auto"
                    color="text"
                    sx={{
                      height: 24,
                      width: 19,
                    }}
                    onClick={() => setMobileOpened(!mobileOpened)}
                  />
                </IconButton>
              </Flex>
            </Flex>
          </Container>
        </>
      )}
      {subnav ?? null}
    </Box>
  );
}