@olenbetong/synergi-react 0.6.7

package/src/PageBanner/index.tsx

@@ -0,0 +1,79 @@
+import "./index.scss";
+
+import clsx from "clsx";
+import React from "react";
+
+export type PageBannerProps = React.HTMLProps<HTMLDivElement> & {
+  as?: "header" | "section" | "div";
+};
+
+export function PageBanner({ as, className, children, ...other }: PageBannerProps) {
+  const Component = as ? as : "section";
+
+  return (
+    <Component className={clsx("ObPageBanner-root", className)} {...other}>
+      <div className="container px-0">
+        <div className={"ObPageBanner-pageBannerInner"}>{children}</div>
+      </div>
+    </Component>
+  );
+}
+
+export type BannerImageProps = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+
+export const BannerImage = React.forwardRef<HTMLImageElement, BannerImageProps>(function BannerImage(
+  props: BannerImageProps,
+  ref
+) {
+  const { className, ...other } = props;
+  return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} {...other} />;
+});
+
+export type TabListProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
+  as?: "ul" | "ol" | "nav" | "div" | "span";
+  sticky?: boolean;
+};
+
+export function TabList({ as, className, children, sticky, ...other }: TabListProps) {
+  const Component = as ? as : "nav";
+
+  return (
+    <Component
+      className={clsx("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className)}
+      {...other}
+    >
+      <div className="container px-0">
+        <div className={"ObPageBanner-tabListInner"}>{children}</div>
+      </div>
+    </Component>
+  );
+}
+
+export type TabProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
+  active?: boolean;
+  as?: "a" | "li" | "div" | "span";
+};
+
+export function Tab({ active, as, className, children, ...other }: TabProps) {
+  const Component = as ? as : "a";
+
+  return (
+    <Component className={clsx("ObPageBanner-tab", active && "active", className)} {...other}>
+      {children}
+    </Component>
+  );
+}
+
+export type TitleProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "p";
+};
+
+export function Title({ as, className, children, ...other }) {
+  const Component = as ? as : "h1";
+
+  return (
+    <Component className={clsx("ObPageBanner-bannerTitle", className)} {...other}>
+      {children}
+    </Component>
+  );
+}

package/src/Portal/index.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+function useForceUpdate() {
+  const [, setVal] = useState(false);
+
+  return () => setVal(val => !val);
+}
+
+export function Portal({ children, root, type = "div" }) {
+  const forceUpdate = useForceUpdate();
+  const mountNode = useRef<HTMLDivElement>(null);
+  const portalNode = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const ownerDocument = mountNode.current?.ownerDocument;
+    let portalElem = portalNode.current;
+    if (ownerDocument && portalElem) {
+      let parent = root ? ownerDocument.querySelector(root) || ownerDocument.body : ownerDocument.body;
+      const node = ownerDocument.createElement(type);
+      portalElem = node;
+      parent.appendChild(node);
+      forceUpdate();
+
+      return () => {
+        parent.removeChild(node);
+      };
+    }
+  }, []);
+
+  if (!portalNode.current) {
+    return <div ref={mountNode} />;
+  } else {
+    return createPortal(children, portalNode.current);
+  }
+}

package/src/ProgressBar/index.scss

@@ -0,0 +1,86 @@
+@import "../styles/variables";
+
+.ObProgressBar-root {
+  height: 1.5em;
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: whiteSmoke;
+  border: none;
+  border-radius: 3px;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
+  color: royalblue;
+  position: relative;
+
+  &::-webkit-progress-bar {
+    background-color: whiteSmoke;
+    border-radius: 3px;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
+  }
+
+  &::-webkit-progress-value {
+    background-image: linear-gradient(
+        135deg,
+        transparent,
+        transparent 33%,
+        rgba(0, 0, 0, 0.1) 33%,
+        rgba(0, 0, 0, 0.1) 66%,
+        transparent 66%
+      ),
+      linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
+      linear-gradient(left, var(--brand-primary, $brand-primary), var(--brand-light, $brand-light));
+    background-image: -webkit-linear-gradient(
+        135deg,
+        transparent,
+        transparent 33%,
+        rgba(0, 0, 0, 0.1) 33%,
+        rgba(0, 0, 0, 0.1) 66%,
+        transparent 66%
+      ),
+      -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
+      -webkit-linear-gradient(left, var(--brand-primary), $brand-primary, var(--brand-light, $brand-light));
+    background-size: 35px 20px, 100% 100%, 100% 100%;
+    border-radius: 3px;
+    position: relative;
+    transition: width 0.5s ease-out;
+  }
+
+  &::-webkit-progress-value:after {
+    background-color: white;
+    content: "";
+
+    border-radius: 100%;
+    height: 5px;
+
+    position: absolute;
+    right: 7px;
+    top: 7px;
+    width: 5px;
+  }
+
+  &::-moz-progress-bar {
+    background-image: linear-gradient(
+        135deg,
+        transparent,
+        transparent 33%,
+        rgba(0, 0, 0, 0.1) 33%,
+        rgba(0, 0, 0, 0.1) 66%,
+        transparent 66%
+      ),
+      linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
+      linear-gradient(left, var(--brand-primary), var(--brand-light));
+    background-image: -moz-linear-gradient(
+        135deg,
+        transparent,
+        transparent 33%,
+        rgba(0, 0, 0, 0.1) 33%,
+        rgba(0, 0, 0, 0.1) 66%,
+        transparent 66%
+      ),
+      -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
+      -moz-linear-gradient(left, var(--brand-primary), var(--brand-light));
+    background-size: 35px 20px, 100% 100%, 100% 100%;
+    border-radius: 3px;
+    transition: width 0.5s ease-out;
+  }
+}

package/src/ProgressBar/index.tsx

@@ -0,0 +1,13 @@
+import "./index.scss";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+export type ProgressBarProps = React.HTMLProps<HTMLProgressElement>;
+
+export const ProgressBar = forwardRef<HTMLProgressElement, ProgressBarProps>(function ProgressBar(
+  { className, ...props }: ProgressBarProps,
+  ref
+) {
+  return <progress className={clsx("ObProgressBar-root", className)} {...props} ref={ref} />;
+});

package/src/Sidebar/index.scss

@@ -0,0 +1,53 @@
+.ObSidebar-root {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  z-index: 2;
+
+  background-color: white;
+
+  transform: translateX(-100%);
+  transition: transform 0.2s ease-out;
+  will-change: transform;
+
+  &.Ob-right {
+    left: unset;
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  overflow-y: auto;
+
+  &.Ob-open {
+    transform: translateX(0);
+  }
+
+  &.ObSidebar-shadow {
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
+
+    &.Ob-right {
+      box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
+    }
+  }
+}
+
+.ObSidebar-overlay {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 1;
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  &.Ob-open {
+    opacity: 1;
+    visibility: visible;
+  }
+}

package/src/Sidebar/index.tsx

@@ -0,0 +1,117 @@
+import "./index.scss";
+
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+
+export type SidebarProps = React.HTMLProps<HTMLDivElement> & {
+  open?: boolean;
+  onClose?: () => void;
+  overlayProps: React.HTMLProps<HTMLDivElement>;
+  pullRight?: boolean;
+  shadow?: boolean;
+};
+
+export function Sidebar(props: SidebarProps) {
+  const {
+    children,
+    className,
+    open = false,
+    onClose = () => {},
+    overlayProps = {},
+    pullRight = false,
+    shadow = true,
+    ...other
+  } = props;
+
+  const [hidden, setHidden] = useState(!open);
+  const sidebar = useRef<HTMLDivElement>(null);
+  const prevFocus = useRef<HTMLElement | null>(null);
+
+  function closeSidebar() {
+    if (open && typeof onClose === "function") {
+      onClose();
+    }
+  }
+
+  useEffect(() => {
+    let element = sidebar.current;
+
+    if (open) {
+      setHidden(false);
+    }
+
+    function toggleHiddenContent() {
+      setHidden(!open);
+    }
+
+    element?.addEventListener("transitionend", toggleHiddenContent);
+
+    return () => element?.removeEventListener("transitionend", toggleHiddenContent);
+  }, [open]);
+
+  useEffect(() => {
+    function handleCloseSidebar(evt) {
+      if (evt.key === "Escape") {
+        evt.stopPropagation();
+        closeSidebar();
+      }
+    }
+
+    window.addEventListener("keyup", handleCloseSidebar);
+
+    return () => window.removeEventListener("keyup", handleCloseSidebar);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open) {
+      prevFocus.current = document.activeElement as HTMLElement | null;
+
+      const firstFocusable = sidebar.current?.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      ) as HTMLElement | undefined;
+
+      if (firstFocusable) {
+        firstFocusable.focus();
+      }
+    } else if (prevFocus.current) {
+      prevFocus.current.focus();
+      prevFocus.current = null;
+    }
+
+    let prevFocusElem = prevFocus.current;
+
+    return () => {
+      if (open && prevFocusElem) {
+        prevFocusElem.focus();
+      }
+    };
+  }, [open]);
+
+  const { className: overlayClassName, ...overlayOther } = overlayProps;
+
+  return (
+    <>
+      <div
+        className={clsx(
+          "ObSidebar-root",
+          open && "Ob-open",
+          pullRight && "Ob-right",
+          shadow && "ObSidebar-shadow",
+          className
+        )}
+        ref={sidebar}
+        tabIndex={-1}
+        {...other}
+      >
+        {(open || !hidden) && children}
+      </div>
+      <div
+        role="presentation"
+        tabIndex={-1}
+        className={clsx("ObSidebar-overlay", open && "Ob-open", overlayClassName)}
+        onClick={closeSidebar}
+        {...overlayOther}
+      />
+    </>
+  );
+}

package/src/Spinner/index.scss

@@ -0,0 +1,71 @@
+$bullet-size: 0.5em;
+
+.ObSpinner-root {
+  display: inline-block;
+}
+
+.ObSpinner-fullPage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 100vh;
+  width: 100vw;
+}
+
+.ObSpinner-spinner {
+  display: inline-block;
+  height: $bullet-size * 1.5;
+  position: relative;
+  width: $bullet-size * 5;
+}
+
+.ObSpinner-bullet {
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  background: #666;
+  border-radius: 50%;
+  height: $bullet-size;
+  position: absolute;
+  top: 0.2rem;
+  width: $bullet-size;
+
+  &:nth-child(1) {
+    animation: scaleAnimation 0.6s infinite ease-in-out;
+    left: $bullet-size * 0.5;
+  }
+
+  &:nth-child(2) {
+    animation: translateAnimation 0.6s infinite ease-in-out;
+    left: $bullet-size * 0.5;
+  }
+
+  &:nth-child(3) {
+    animation: translateAnimation 0.6s infinite ease-in-out;
+    left: $bullet-size * 2.4;
+  }
+
+  &:nth-child(4) {
+    animation: scaleAnimation 0.6s infinite ease-in-out reverse;
+    left: $bullet-size * 4;
+  }
+}
+
+@keyframes scaleAnimation {
+  from {
+    transform: scale(0);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes translateAnimation {
+  from {
+    transform: translate(0, 0);
+  }
+
+  to {
+    transform: translate($bullet-size * 1.65, 0);
+  }
+}

package/src/Spinner/index.tsx

@@ -0,0 +1,21 @@
+import "./index.scss";
+
+import clsx from "clsx";
+import React from "react";
+
+export type SpinnerProps = React.HTMLProps<HTMLDivElement> & {
+  fullPage?: boolean;
+};
+
+export function Spinner({ className = "", fullPage = false, ...rest }) {
+  return (
+    <div className={clsx(className, fullPage ? "ObSpinner-fullPage" : "ObSpinner-wrapper")} {...rest}>
+      <div className={"ObSpinner-spinner"}>
+        <div className={"ObSpinner-bullet"} />
+        <div className={"ObSpinner-bullet"} />
+        <div className={"ObSpinner-bullet"} />
+        <div className={"ObSpinner-bullet"} />
+      </div>
+    </div>
+  );
+}

package/src/SplitContainer/index.scss

@@ -0,0 +1,43 @@
+/**
+Hacky solution to sass output for some reason getting a zero-width space at the beginning, which breaks the first selector
+*/
+.😖 {
+  display: initial;
+}
+
+.ObSplitContainer-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  &.horizontal {
+    flex-direction: row;
+  }
+}
+
+.ObSplitContainer-panel {
+  overflow: hidden;
+}
+
+.ObSplitContainer-divider {
+  flex: 0 0 0.5rem;
+  background-color: transparent;
+  line-height: 0.75;
+  cursor: ns-resize;
+
+  &:focus {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &::before {
+    content: "•••";
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  .ObSplitContainer-root.horizontal & {
+    cursor: ew-resize;
+  }
+}