@olenbetong/synergi-react 0.6.46 → 0.7.0

package/src/ProgressBar/index.scss

@@ -1,86 +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;
+	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-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 {
+		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: "";
+	&::-webkit-progress-value:after {
+		background-color: white;
+		content: "";
 
-    border-radius: 100%;
-    height: 5px;
+		border-radius: 100%;
+		height: 5px;
 
-    position: absolute;
-    right: 7px;
-    top: 7px;
-    width: 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;
-  }
+	&::-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

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

package/src/Sidebar/index.scss

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

@@ -4,114 +4,114 @@ 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;
+	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}
-      />
-    </>
-  );
+	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

@@ -1,71 +1,71 @@
 $bullet-size: 0.5em;
 
 .ObSpinner-root {
-  display: inline-block;
+	display: inline-block;
 }
 
 .ObSpinner-fullPage {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
-  height: 100vh;
-  width: 100vw;
+	height: 100vh;
+	width: 100vw;
 }
 
 .ObSpinner-spinner {
-  display: inline-block;
-  height: $bullet-size * 1.5;
-  position: relative;
-  width: $bullet-size * 5;
+	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;
+	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(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(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(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;
-  }
+	&:nth-child(4) {
+		animation: scaleAnimation 0.6s infinite ease-in-out reverse;
+		left: $bullet-size * 4;
+	}
 }
 
 @keyframes scaleAnimation {
-  from {
-    transform: scale(0);
-  }
+	from {
+		transform: scale(0);
+	}
 
-  to {
-    transform: scale(1);
-  }
+	to {
+		transform: scale(1);
+	}
 }
 
 @keyframes translateAnimation {
-  from {
-    transform: translate(0, 0);
-  }
+	from {
+		transform: translate(0, 0);
+	}
 
-  to {
-    transform: translate($bullet-size * 1.65, 0);
-  }
+	to {
+		transform: translate($bullet-size * 1.65, 0);
+	}
 }

package/src/Spinner/index.tsx

@@ -4,18 +4,18 @@ import clsx from "clsx";
 import React from "react";
 
 export type SpinnerProps = React.HTMLProps<HTMLDivElement> & {
-  fullPage?: boolean;
+	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>
-  );
+	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>
+	);
 }