meticulous-ui 3.3.0 → 3.4.0

package/components/components/Timer/styles.js

@@ -0,0 +1,238 @@
+import styled, { css, keyframes } from 'styled-components';
+
+import Add from '../../components/Icons/Add';
+import MediaStopFilled from '../../components/Icons/MediaStopFilled';
+import MediaPauseFilled from '../../components/Icons/MediaPauseFilled';
+import MediaPlayFilled from '../../components/Icons/MediaPlayFilled';
+
+import white from '../../colors/white';
+import black from '../../colors/black';
+import red from '../../colors/red';
+
+import { COLOR_MAPPING } from './constants';
+import { getSize } from './helpers';
+
+const WRAPPER_RATIO = 1;
+const WRAPPER_BR_RATIO = 16.67;
+const DIMMER_RATIO = 1.67;
+const TRANSFORM_ORIGIN_RATIO = 3.404;
+
+const getColor = ({ $color }) => COLOR_MAPPING[$color];
+
+const HAND_CSS = css`
+  position: absolute;
+  bottom: 50%;
+  transform-origin: bottom;
+  border-radius: 4px;
+  transition: rotate 0.3s ease-in-out;
+  rotate: var(--hand-rotate);
+`;
+
+export const Wrapper = styled.div`
+  position: relative;
+  height: ${getSize(WRAPPER_RATIO)}rem;
+  width: ${getSize(WRAPPER_RATIO)}rem;
+  border-radius: ${getSize(WRAPPER_BR_RATIO)}rem;
+  background-color: ${getColor};
+`;
+
+export const Dimmer = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  width: ${getSize(DIMMER_RATIO)}rem;
+  height: ${getSize(DIMMER_RATIO)}rem;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.16);
+  pointer-events: none;
+`;
+
+export const Time = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  transform: translate(-50%, -50%);
+`;
+
+export const TimeTxt = styled.div`
+  color: ${white};
+  font-size: ${getSize(13.33)}rem;
+  font-weight: 600;
+  text-align: center;
+  opacity: 0.8;
+`;
+
+export const Dots = styled.span`
+  position: absolute;
+  width: ${getSize(120)}rem;
+  height: ${getSize(120)}rem;
+  background: rgba(255, 255, 255, 0.4);
+  transform-origin: ${getSize(TRANSFORM_ORIGIN_RATIO)}rem;
+  border-radius: 2px;
+  rotate: ${({ $i }) => `${$i * 6}deg`};
+
+  &:nth-child(5n) {
+    width: ${getSize(90)}rem;
+    height: ${getSize(90)}rem;
+    background: rgba(255, 255, 255, 0.7);
+  }
+
+  &:nth-child(15n) {
+    width: ${getSize(50)}rem;
+    height: ${getSize(130)}rem;
+    background: rgba(255, 255, 255);
+  }
+`;
+
+export const DotsWrapper = styled.div`
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
+
+export const AllDots = styled.div`
+  position: absolute;
+  left: 1.6%;
+  top: 43.8%;
+  transform: translate(-50%, -50%) rotate(6.7deg);
+`;
+
+export const HourHand = styled.div`
+  ${HAND_CSS};
+  width: ${getSize(50)}rem;
+  height: ${getSize(5.33)}rem;
+  background: ${white};
+`;
+
+export const MinuteHand = styled.div`
+  ${HAND_CSS};
+  width: ${getSize(80)}rem;
+  height: ${getSize(4)}rem;
+  background: ${black.m200};
+`;
+
+export const SecondHand = styled.div`
+  ${HAND_CSS};
+  width: ${getSize(133.33)}rem;
+  height: ${getSize(3.64)}rem;
+  background: ${red.m800};
+`;
+
+const dismissAnimation = keyframes`
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.9); }
+`;
+
+export const AlarmRing = styled.div`
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  ${({ $dismissing }) =>
+    $dismissing &&
+    css`
+      animation: ${dismissAnimation} 0.6s ease-out forwards;
+    `}
+`;
+
+export const LeftActions = styled.div`
+  position: absolute;
+  bottom: 6%;
+  left: 8%;
+  display: flex;
+  align-items: center;
+  gap: ${getSize(50)}rem;
+
+  ${({ $noActions }) =>
+    $noActions &&
+    css`
+      pointer-events: none;
+      opacity: 0.5;
+    `}
+`;
+
+export const RightActions = styled.div`
+  position: absolute;
+  bottom: 6%;
+  right: 8%;
+  border-radius: ${getSize(50)}rem;
+`;
+
+export const ActionBtn = styled.button`
+  position: relative;
+  height: ${getSize(8.33)}rem;
+  width: ${getSize(8.33)}rem;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.4);
+  border: none;
+  border-radius: ${getSize(50)}rem;
+  padding: 0;
+
+  &:focus-visible {
+    outline: 2px solid ${white};
+    outline-offset: 2px;
+  }
+`;
+
+export const AddWrapper = styled(Add)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const MediaStopFilledWrapper = styled(MediaStopFilled)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const MediaPauseFilledWrapper = styled(MediaPauseFilled)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const MediaPlayFilledWrapper = styled(MediaPlayFilled)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;
+
+export const VisuallyHidden = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+`;
+
+export const Bullet = styled.div`
+  position: absolute;
+  width: ${getSize(35)}rem;
+  height: ${getSize(35)}rem;
+  border-radius: 50%;
+  background-color: ${white};
+  left: calc(-${getSize(70)}rem);
+  top: calc(-${getSize(100 / 33)}rem - ${getSize(70)}rem);
+`;
+
+export const BulletRing = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  width: 0;
+  height: 0;
+  rotate: var(--bullet-rotate);
+  transform-origin: 0 0;
+  transition: rotate 0.3s ease;
+  ${({ $dismissing }) =>
+    $dismissing &&
+    css`
+      animation: ${dismissAnimation} 0.6s ease-out forwards;
+    `}
+`;

package/components/components/Toast/Toast.jsx

@@ -0,0 +1,134 @@
+// Libraries
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+const noop = () => {};
+
+// helpers
+import { Logo } from './helpers';
+
+// constants
+import grey from '../../colors/grey';
+import { COLOR_MAP, INFO_COLORS, INFO, ERROR } from './constants';
+
+// styles
+import {
+  ToastWrapper,
+  CloseWrapper,
+  CloseButtonContainer,
+  ProgressRing,
+  Title,
+  Subtitle,
+  Message,
+  ToastsContainer,
+} from './styles';
+
+export const ToastContainer = ({ toasts, ...rest }) => {
+  const [allToasts, setAllToasts] = useState(toasts);
+
+  useEffect(() => {
+    setAllToasts(toasts);
+  }, [toasts]);
+
+  const renderToasts = ({ type, id, title, subtitle, duration, onExpire = noop }, i) => (
+    <Toast {...{ type, title, subtitle, duration }} key={id} onExpire={onExpire} />
+  );
+
+  return createPortal(
+    <ToastsContainer {...rest}>{[...allToasts].reverse().map(renderToasts)}</ToastsContainer>,
+    document.body
+  );
+};
+
+const remove = (setFadeOut, setShow, onExpire) => () => {
+  setFadeOut(true);
+  setTimeout(() => {
+    setShow(false);
+    onExpire();
+  }, 500);
+};
+
+const Toast = ({
+  type = INFO,
+  visible = true,
+  duration = 5,
+  onExpire = noop,
+  title,
+  subtitle,
+  ...rest
+}) => {
+  const [show, setShow] = useState(visible);
+  const [fadeOut, setFadeOut] = useState(false);
+  const [paused, setPaused] = useState(false);
+
+  const timerRef = useRef(null);
+  const remainingRef = useRef((duration - 0.5) * 1000);
+  const startTimeRef = useRef(null);
+
+  const startTimer = (ms) => {
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(remove(setFadeOut, setShow, onExpire), ms);
+  };
+
+  useEffect(() => {
+    setShow(visible);
+  }, [visible]);
+
+  useEffect(() => {
+    startTimer(remainingRef.current);
+    return () => clearTimeout(timerRef.current);
+  }, []);
+
+  const handleMouseEnter = () => {
+    clearTimeout(timerRef.current);
+    remainingRef.current -= Date.now() - startTimeRef.current;
+    setPaused(true);
+  };
+
+  const handleMouseLeave = () => {
+    setPaused(false);
+    startTimer(remainingRef.current);
+  };
+
+  const { main: $main, side: $side, bg } = COLOR_MAP[type] ?? INFO_COLORS;
+
+  if (show) {
+    return (
+      <ToastWrapper
+        $bg={bg}
+        role={type === ERROR ? 'alert' : 'status'}
+        aria-live={type === ERROR ? 'assertive' : 'polite'}
+        aria-atomic='true'
+        className={`${fadeOut ? 'fade-out' : 'fade-in'}`}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...rest}
+      >
+        <Logo {...{ type, $main, $side }} />
+        <Message>
+          <Title>{title}</Title>
+          {subtitle && <Subtitle>{subtitle}</Subtitle>}
+        </Message>
+        <CloseButtonContainer>
+          <ProgressRing
+            aria-hidden='true'
+            viewBox='0 0 28 28'
+            $duration={duration}
+            $color={$main}
+            $paused={paused}
+          >
+            <circle cx='14' cy='14' r='12' />
+            <circle cx='14' cy='14' r='12' />
+          </ProgressRing>
+          <CloseWrapper
+            aria-label='Close notification'
+            size={13}
+            color={grey.m600}
+            onClick={remove(setFadeOut, setShow, onExpire)}
+          />
+        </CloseButtonContainer>
+      </ToastWrapper>
+    );
+  }
+};
+
+export default Toast;

package/components/components/Toast/constants.js

@@ -0,0 +1,34 @@
+import green from '../../colors/green';
+import orange from '../../colors/orange';
+import red from '../../colors/red';
+import blue from '../../colors/blue';
+
+export const SUCCESS = 'success';
+export const WARNING = 'warning';
+export const INFO = 'info';
+export const ERROR = 'error';
+
+export const INFO_COLORS = {
+  main: blue.m500,
+  side: blue.m100,
+  bg: blue.m50,
+};
+
+export const COLOR_MAP = {
+  [SUCCESS]: {
+    main: green.m500,
+    side: green.m100,
+    bg: green.m50,
+  },
+  [WARNING]: {
+    main: orange.m500,
+    side: orange.m100,
+    bg: orange.m50,
+  },
+  [INFO]: INFO_COLORS,
+  [ERROR]: {
+    main: red.m500,
+    side: red.m100,
+    bg: red.m50,
+  },
+};

package/components/components/Toast/helpers.jsx

@@ -0,0 +1,54 @@
+import { ERROR, SUCCESS, WARNING } from './constants';
+import Close from '../Icons/Close';
+import Check from '../Icons/Check';
+import Info from '../Icons/Info';
+import WarningTriangleFilled from '../Icons/WarningTriangleFilled';
+import white from '../../colors/white';
+import { Icon, LogoContainer, Outer, OuterChild } from './styles';
+
+const getLogoImage = (type, main) => {
+  if (type === ERROR) {
+    return <Close size={16} color={main} />;
+  }
+
+  if (type === SUCCESS) {
+    return <Check size={18} color={main} />;
+  }
+
+  if (type === WARNING) {
+    return <WarningTriangleFilled size={28} color={white} />;
+  }
+
+  return <Info size={22} color={main} />;
+};
+
+const getLogoContainerSize = (type) => {
+  if (type === ERROR) {
+    return 1.6;
+  }
+
+  if (type === SUCCESS) {
+    return 1.76;
+  }
+
+  if (type === WARNING) {
+    return 2.8;
+  }
+
+  return 2.08;
+};
+
+export const Logo = ({ type, $main, $side }) => {
+  const logoImg = getLogoImage(type, $main);
+  const isWarning = type === WARNING;
+
+  return (
+    <Outer aria-hidden='true' {...{ $side }}>
+      <OuterChild {...{ $main }} />
+      {!isWarning && <LogoContainer {...{ $main, type }} />}
+      <Icon size={getLogoContainerSize(type)} $isWarning={isWarning}>
+        {logoImg}
+      </Icon>
+    </Outer>
+  );
+};

package/components/components/Toast/index.js

@@ -0,0 +1,4 @@
+import Toast, { ToastContainer } from './Toast';
+
+export { ToastContainer };
+export default Toast;