meticulous-ui 3.2.9 → 3.3.1

package/components/components/Loader/styles.js

@@ -0,0 +1,62 @@
+import styled, { keyframes, css } from 'styled-components';
+
+const pulse = keyframes`
+  0% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+  20% {
+    transform: scale(1.6);
+    animation-timing-function: ease-in;
+  }
+  40%, 100% {
+    transform: scale(1);
+  }
+`;
+
+const bounce = keyframes`
+  0%, 100% {
+    transform: translateY(0) scale(1);
+    animation-timing-function: ease-in;
+  }
+  50% {
+    transform: translateY(-160%) scale(1.4);
+    animation-timing-function: ease-out;
+  }
+`;
+
+export const LoaderWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ $gap }) => $gap};
+`;
+
+export const VisuallyHidden = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
+export const Dot = styled.span`
+  display: inline-block;
+  width: ${({ $size }) => $size};
+  height: ${({ $size }) => $size};
+  border-radius: 50%;
+  background-color: ${({ $color }) => $color};
+  flex-shrink: 0;
+
+  ${({ $delay, $isBounce }) => css`
+    animation: ${$isBounce ? bounce : pulse} ${$isBounce ? 1.2 : 1.3}s ease-in-out infinite;
+    animation-delay: ${$delay}s;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  `}
+`;

package/components/components/MenuItem/MenuItem.jsx

@@ -0,0 +1,69 @@
+import grey from '../../colors/grey';
+import blue from '../../colors/blue';
+import white from '../../colors/white';
+import { PWrapper, Wrapper } from './styles';
+
+const getColor = ({ isSelected, isDisabled }) => {
+  if (isSelected) {
+    return grey.m700;
+  }
+
+  if (isDisabled) {
+    return grey.m300;
+  }
+
+  return grey.m500;
+};
+
+const MenuItem = ({
+  id,
+  value,
+  label,
+  width = '32rem',
+  isSelected,
+  defaultColor = white,
+  selectedColor = blue.m200,
+  hoverColor = blue.m50,
+  activeColor = blue.m100,
+  isHighlighted,
+  size = '1.92rem',
+  onSelect,
+  isDisabled,
+  onMouseEnter,
+  ...rest
+}) => {
+  const handleClick = () => {
+    if (!isDisabled) {
+      onSelect(value);
+    }
+  };
+
+  return (
+    <Wrapper
+      {...{
+        $isSelected: isSelected,
+        $width: width,
+        $defaultColor: defaultColor,
+        $selectedColor: selectedColor,
+        $hoverColor: hoverColor,
+        $activeColor: activeColor,
+        $isDisabled: isDisabled,
+        $isHighlighted: isHighlighted,
+      }}
+      id={id}
+      role='option'
+      {...rest}
+      aria-selected={isSelected}
+      aria-disabled={isDisabled || undefined}
+      onClick={handleClick}
+      onMouseEnter={onMouseEnter}
+      title={label}
+    >
+      <PWrapper size={size} color={getColor({ isSelected, isDisabled })} $width={width}>
+        {label}
+      </PWrapper>
+    </Wrapper>
+  );
+};
+
+export default MenuItem;

package/components/components/MenuItem/index.js

@@ -0,0 +1,3 @@
+import MenuItem from './MenuItem';
+
+export default MenuItem;

package/components/components/MenuItem/styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import P from '../Typography/P';
+
+export const Wrapper = styled.div`
+  width: ${({ $width }) => $width};
+  background-color: ${({
+    $isSelected,
+    $defaultColor,
+    $isHighlighted,
+    $hoverColor,
+    $selectedColor,
+  }) => ($isSelected ? $selectedColor : $isHighlighted ? $hoverColor : $defaultColor)};
+
+  cursor: ${({ $isSelected, $isDisabled }) =>
+    $isSelected ? 'auto' : $isDisabled ? 'not-allowed' : 'pointer'};
+  padding: 0.96rem 0 1.28rem 1.6rem;
+  margin-top: 0.16rem;
+  pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'auto')};
+
+  &:active {
+    background-color: ${({ $isSelected, $activeColor, $selectedColor }) =>
+      $isSelected ? $selectedColor : $activeColor};
+  }
+`;
+
+export const PWrapper = styled(P)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: calc(${({ $width }) => $width} - 3.2rem);
+`;

package/components/components/OtpInput/OtpInput.jsx

@@ -0,0 +1,119 @@
+import { useState, useRef, useEffect } from 'react';
+import { OTPWrapper } from './styles';
+import { renderNums } from './helpers';
+
+const OtpInput = ({ length = 6, value = '', onChange, onComplete, ...rest }) => {
+  const [otp, setOtp] = useState(Array(length).fill(''));
+  const inputsRef = useRef([]);
+  const otpRef = useRef(otp);
+  const programmaticFocusRef = useRef(false);
+
+  const focusCell = (index) => {
+    programmaticFocusRef.current = true;
+    inputsRef.current[index]?.focus();
+  };
+
+  // When external value changes
+  useEffect(() => {
+    if (!value) return;
+
+    const str = String(value).replace(/\D/g, '').slice(0, length);
+    const newOtp = str.split('');
+
+    // Fill remaining empty boxes with ""
+    while (newOtp.length < length) newOtp.push('');
+
+    setOtp(newOtp);
+
+    // If complete OTP provided, trigger onComplete
+    if (str.length === length) {
+      onComplete?.(str);
+    }
+  }, [value, length, onComplete]);
+
+  const updateOtp = (newOtp) => {
+    otpRef.current = newOtp;
+    setOtp(newOtp);
+    const joined = newOtp.join('');
+
+    onChange?.(joined);
+
+    if (joined.length === length) {
+      onComplete?.(joined);
+    }
+  };
+
+  const handleChange = (val, index) => {
+    val = val.replace(/\D/g, '').slice(-1);
+
+    const newOtp = [...otp];
+    newOtp[index] = val;
+    updateOtp(newOtp);
+
+    if (val && index < length - 1) {
+      focusCell(index + 1);
+    }
+  };
+
+  const handleKeyDown = (e, index) => {
+    const firstEmpty = otp.findIndex((d) => d === '');
+    const lastValid = firstEmpty === -1 ? length - 1 : firstEmpty;
+
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      if (otp[index]) {
+        const newOtp = [...otp];
+        newOtp[index] = '';
+        updateOtp(newOtp);
+      }
+      if (index > 0) focusCell(index - 1);
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault();
+      focusCell(index - 1);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      if (index + 1 <= lastValid) focusCell(index + 1);
+    } else if (e.key === 'Tab') {
+      e.preventDefault();
+      if (e.shiftKey) {
+        if (index > 0) focusCell(index - 1);
+      } else {
+        focusCell(lastValid);
+      }
+    }
+  };
+
+  const handleFocus = (index) => {
+    if (programmaticFocusRef.current) {
+      programmaticFocusRef.current = false;
+      return;
+    }
+    const firstEmpty = otpRef.current.findIndex((d) => d === '');
+    const target = firstEmpty === -1 ? length - 1 : firstEmpty;
+    if (index !== target) focusCell(target);
+  };
+
+  const handlePaste = (e) => {
+    const pasted = e.clipboardData.getData('text').replace(/\D/g, '');
+    if (!pasted) return;
+
+    const newOtp = Array(length).fill('');
+    pasted
+      .slice(0, length)
+      .split('')
+      .forEach((char, i) => (newOtp[i] = char));
+
+    updateOtp(newOtp);
+
+    const lastIndex = Math.min(pasted.length - 1, length - 1);
+    focusCell(lastIndex);
+  };
+
+  return (
+    <OTPWrapper onPaste={handlePaste} {...rest}>
+      {otp.map(renderNums({ inputsRef, handleChange, handleKeyDown, handleFocus, length }))}
+    </OTPWrapper>
+  );
+};
+
+export default OtpInput;

package/components/components/OtpInput/helpers.jsx

@@ -0,0 +1,43 @@
+import { Input } from './styles';
+
+const changeHandler = (handleChange, index) => (e) => {
+  handleChange(e.target.value, index);
+};
+
+const keyDownHandler = (handleKeyDown, index) => (e) => handleKeyDown(e, index);
+
+const Num = ({ inputsRef, handleChange, handleKeyDown, handleFocus, digit, index, length }) => {
+  const getRef = (el) => (inputsRef.current[index] = el);
+
+  return (
+    <Input
+      key={`key-${index}`}
+      ref={getRef}
+      maxLength={1}
+      inputMode='numeric'
+      autoComplete='one-time-code'
+      aria-label={`Digit ${index + 1} of ${length}`}
+      value={digit}
+      onChange={changeHandler(handleChange, index)}
+      onKeyDown={keyDownHandler(handleKeyDown, index)}
+      onFocus={() => handleFocus(index)}
+    />
+  );
+};
+
+export const renderNums =
+  ({ inputsRef, handleChange, handleKeyDown, handleFocus, length }) =>
+  (digit, index) => (
+    <Num
+      key={`otp-num-${index}`}
+      {...{
+        inputsRef,
+        handleChange,
+        handleKeyDown,
+        handleFocus,
+        digit,
+        index,
+        length,
+      }}
+    />
+  );

package/components/components/OtpInput/index.js

@@ -0,0 +1,3 @@
+import OtpInput from './OtpInput';
+
+export default OtpInput;

package/components/components/OtpInput/styles.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import grey from '../../colors/grey';
+
+export const OTPWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  @media screen and (max-width: 768px) {\
+    gap: 0.32rem;
+  }
+`;
+
+export const Input = styled.input`
+  height: 3.2rem;
+  width: 3.2rem;
+  font-size: 1.92rem;
+  text-align: center;
+  color: ${grey.m600};
+  border: 1px solid ${grey.m800};
+  border-radius: 0.32rem;
+`;

package/components/components/PageLoader/PageLoader.jsx

@@ -0,0 +1,21 @@
+import { getColor } from '../Input/Checkbox/helpers';
+import { PageLdr } from './styles';
+import blue from '../../colors/blue';
+
+const PageLoader = ({ theme = 'blue', color, ...props }) => {
+  const shade = getColor(theme);
+  const clr = color || (shade?.m500 ?? blue.m500);
+
+  return (
+    <PageLdr
+      {...props}
+      $color={clr}
+      role='progressbar'
+      aria-label='Loading'
+      aria-valuemin={0}
+      aria-valuemax={100}
+    />
+  );
+};
+
+export default PageLoader;

package/components/components/PageLoader/index.js

@@ -0,0 +1,3 @@
+import PageLoader from './PageLoader';
+
+export default PageLoader;

package/components/components/PageLoader/styles.js

@@ -0,0 +1,14 @@
+import styled, { keyframes } from 'styled-components';
+
+const horizontalGrow = keyframes`
+  0%   { transform: scaleX(0); }
+  100% { transform: scaleX(1); }
+`;
+
+export const PageLdr = styled.div`
+  width: 90%;
+  height: 3px;
+  background-color: ${({ $color }) => $color};
+  transform-origin: left;
+  animation: ${horizontalGrow} 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+`;

package/components/components/Pagination/Pagination.jsx

@@ -0,0 +1,138 @@
+// Libraries
+import { useRef, useEffect } from 'react';
+
+// helpers
+import { renderThreeDots, renderPageNum, PrevArrow, NextArrow } from './helpers.jsx';
+
+// constants
+import colors from '../../colors/colorMap';
+import teal from '../../colors/teal';
+import { ICON_SIZE_MAPPING, MEDIUM, SIZE_REM_MAPPING } from './constants.js';
+
+// styles
+import { AllPages, MiddleLayer } from './styles';
+
+const Pagination = ({
+  pageNumber,
+  setPageNumber,
+  totalPages,
+  theme = 'lime',
+  size = MEDIUM,
+  isDisabled = false,
+  ...rest
+}) => {
+  const navRef = useRef(null);
+  const focusActiveRef = useRef(false);
+
+  useEffect(() => {
+    if (focusActiveRef.current) {
+      focusActiveRef.current = false;
+      navRef.current?.querySelector('[aria-current="page"]')?.focus();
+    }
+  }, [pageNumber]);
+
+  const changePage = (newPage) => {
+    if (newPage !== pageNumber) {
+      setPageNumber(newPage);
+    }
+  };
+
+  const setPrevPage = () => {
+    if (pageNumber > 1) {
+      changePage(pageNumber - 1);
+    }
+  };
+
+  const setNextPage = () => {
+    if (pageNumber < totalPages) {
+      changePage(pageNumber + 1);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (['ArrowLeft', 'ArrowUp'].includes(e.code)) {
+      focusActiveRef.current = true;
+      setPrevPage();
+    }
+
+    if (['ArrowRight', 'ArrowDown'].includes(e.code)) {
+      focusActiveRef.current = true;
+      setNextPage();
+    }
+  };
+
+  const shades = colors[theme] ?? teal;
+  const individualRemSize = SIZE_REM_MAPPING[size];
+  const iconSize = ICON_SIZE_MAPPING[size];
+
+  if (totalPages <= 7) {
+    return (
+      <AllPages
+        ref={navRef}
+        onKeyDown={handleKeyDown}
+        aria-label='Pagination'
+        $isDisabled={isDisabled}
+        {...rest}
+      >
+        <PrevArrow {...{ iconSize, shades, setPrevPage }} />
+        <MiddleLayer size={`${totalPages * individualRemSize}rem`}>
+          {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+            renderPageNum({ size, selected: pageNumber, shades, changePage })
+          )}
+        </MiddleLayer>
+        <NextArrow {...{ iconSize, shades, setNextPage }} />
+      </AllPages>
+    );
+  }
+
+  if (
+    totalPages < 10 ||
+    pageNumber < 4 ||
+    (pageNumber > totalPages - 3 && pageNumber <= totalPages)
+  ) {
+    return (
+      <AllPages
+        ref={navRef}
+        onKeyDown={handleKeyDown}
+        aria-label='Pagination'
+        $isDisabled={isDisabled}
+        {...rest}
+      >
+        <PrevArrow {...{ iconSize, shades, setPrevPage }} />
+        <MiddleLayer size={`${9 * individualRemSize}rem`}>
+          {[1, 2, 3, 4].map(renderPageNum({ size, selected: pageNumber, shades, changePage }))}
+          {renderThreeDots()}
+          {[totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(
+            renderPageNum({ size, selected: pageNumber, shades, changePage })
+          )}
+        </MiddleLayer>
+        <NextArrow {...{ iconSize, shades, setNextPage }} />
+      </AllPages>
+    );
+  }
+
+  return (
+    <AllPages
+      ref={navRef}
+      onKeyDown={handleKeyDown}
+      aria-label='Pagination'
+      $isDisabled={isDisabled}
+    >
+      <PrevArrow {...{ iconSize, shades, setPrevPage }} />
+      <MiddleLayer size={`${9 * individualRemSize}rem`}>
+        {[1, 2].map(renderPageNum({ size, selected: pageNumber, shades, changePage }))}
+        {pageNumber > 4 && renderThreeDots()}
+        {[pageNumber - 1, pageNumber, pageNumber + 1].map(
+          renderPageNum({ size, selected: pageNumber, shades, changePage })
+        )}
+        {pageNumber < totalPages - 3 && renderThreeDots()}
+        {[totalPages - 1, totalPages].map(
+          renderPageNum({ size, selected: pageNumber, shades, changePage })
+        )}
+      </MiddleLayer>
+      <NextArrow {...{ iconSize, shades, setNextPage }} />
+    </AllPages>
+  );
+};
+
+export default Pagination;

package/components/components/Pagination/constants.js

@@ -0,0 +1,37 @@
+const INDIVIDUAL_SMALL_REM_SIZE = 3.4;
+const INDIVIDUAL_MEDIUM_REM_SIZE = 4.2;
+const INDIVIDUAL_LARGE_REM_SIZE = 5.0;
+
+const SMALL_FONT_SIZE = 1.5;
+const MEDIUM_REM_FONT_SIZE = 1.7;
+const LARGE_REM_FONT_SIZE = 1.9;
+
+const SMALL_ICON_SIZE = 23;
+const MEDIUM_ICON_SIZE = 25;
+const LARGE_ICON_SIZE = 27;
+
+export const SMALL = 'small';
+export const MEDIUM = 'medium';
+export const LARGE = 'large';
+
+export const SIZE_REM_MAPPING = {
+  [SMALL]: INDIVIDUAL_SMALL_REM_SIZE,
+  [MEDIUM]: INDIVIDUAL_MEDIUM_REM_SIZE,
+  [LARGE]: INDIVIDUAL_LARGE_REM_SIZE,
+};
+
+export const FONT_SIZE_MAPPING = {
+  [SMALL]: SMALL_FONT_SIZE,
+  [MEDIUM]: MEDIUM_REM_FONT_SIZE,
+  [LARGE]: LARGE_REM_FONT_SIZE,
+};
+
+export const ICON_SIZE_MAPPING = {
+  [SMALL]: SMALL_ICON_SIZE,
+  [MEDIUM]: MEDIUM_ICON_SIZE,
+  [LARGE]: LARGE_ICON_SIZE,
+};
+
+export const SELECTED_BG = 'selected_bg';
+export const NOT_SELECTED_BG = 'not_selected_bg';
+export const ACTIVE_NOT_SELECTED_BG = 'active_not_selected_bg';

package/components/components/Pagination/helpers.jsx

@@ -0,0 +1,66 @@
+// components
+import Ripple from '../Ripple';
+
+// constants
+import { FONT_SIZE_MAPPING, SIZE_REM_MAPPING } from './constants';
+
+// styles
+import { Page, Ellipsis, ArrowButton, ClickableChevronRight, ClickableChevronLeft } from './styles';
+
+export const renderPageNum =
+  ({ size, selected, shades, changePage }) =>
+  (page) => {
+    const $individualRemSize = SIZE_REM_MAPPING[size];
+    const $fontRemSize = FONT_SIZE_MAPPING[size];
+    const $shades = shades;
+    const isSelected = selected === page;
+
+    const clickHandler = () => {
+      changePage(page);
+    };
+
+    const handleKeyDown = (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        clickHandler();
+      }
+    };
+
+    return (
+      <Page
+        data-testid={isSelected ? 'current-page' : `test-${page}`}
+        $isSelected={isSelected}
+        key={`page_${page}`}
+        onClick={clickHandler}
+        onKeyDown={handleKeyDown}
+        tabIndex={isSelected ? 0 : -1}
+        aria-label={`Page ${page}`}
+        aria-current={isSelected ? 'page' : undefined}
+        {...{
+          $shades,
+          $individualRemSize,
+          $fontRemSize,
+        }}
+      >
+        {page}
+      </Page>
+    );
+  };
+
+export const renderThreeDots = () => <Ellipsis aria-hidden='true'>…</Ellipsis>;
+
+export const PrevArrow = ({ iconSize, shades, setPrevPage }) => (
+  <ArrowButton onClick={setPrevPage} aria-label='Previous page' $shades={shades}>
+    <Ripple rippleColor={shades['m50']}>
+      <ClickableChevronLeft size={iconSize} aria-hidden='true' />
+    </Ripple>
+  </ArrowButton>
+);
+
+export const NextArrow = ({ iconSize, shades, setNextPage }) => (
+  <ArrowButton onClick={setNextPage} aria-label='Next page' $shades={shades}>
+    <Ripple rippleColor={shades['m50']}>
+      <ClickableChevronRight size={iconSize} aria-hidden='true' />
+    </Ripple>
+  </ArrowButton>
+);

package/components/components/Pagination/index.js

@@ -0,0 +1,3 @@
+import Pagination from './Pagination';
+
+export default Pagination;