meticulous-ui 3.3.0 → 3.4.0

package/components/components/Image/Image.jsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import Shimmer from '../Shimmer';
+import { ImageWrapper, StyledImage, ShimmerOverlay, LowResImage } from './styles';
+
+const toRem = (val) => {
+  if (val === undefined || val === null) return undefined;
+  return typeof val === 'number' ? `${val}rem` : val;
+};
+
+const Image = ({
+  src,
+  alt = '',
+  width = '100%',
+  height = '100%',
+  borderRadius = '0.4rem',
+  loadLow = false,
+  lowSrc,
+  ...rest
+}) => {
+  const [lowLoaded, setLowLoaded] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  const onLowLoad = () => setLowLoaded(true);
+  const onLoad = () => setLoaded(true);
+  const onError = () => setError(true);
+
+  const shimmerDone = loadLow ? lowLoaded : loaded;
+
+  return (
+    <ImageWrapper $width={toRem(width)} $height={toRem(height)} $borderRadius={toRem(borderRadius)}>
+      {!error && (
+        <ShimmerOverlay $loaded={shimmerDone}>
+          <Shimmer borderRadius={borderRadius} />
+        </ShimmerOverlay>
+      )}
+      {loadLow && lowSrc && !error && (
+        <LowResImage
+          src={lowSrc}
+          alt=''
+          aria-hidden='true'
+          $lowLoaded={lowLoaded}
+          $loaded={loaded}
+          $borderRadius={toRem(borderRadius)}
+          onLoad={onLowLoad}
+        />
+      )}
+      {!error && (
+        <StyledImage
+          src={src}
+          alt={alt}
+          aria-hidden={alt === '' ? 'true' : undefined}
+          $loaded={loaded}
+          $borderRadius={toRem(borderRadius)}
+          onLoad={onLoad}
+          onError={onError}
+          {...rest}
+        />
+      )}
+    </ImageWrapper>
+  );
+};
+
+export default Image;

package/components/components/Image/index.js

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

package/components/components/Image/styles.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+export const ImageWrapper = styled.span`
+  position: relative;
+  display: inline-block;
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+  border-radius: ${({ $borderRadius }) => $borderRadius};
+  overflow: hidden;
+`;
+
+export const StyledImage = styled.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: ${({ $borderRadius }) => $borderRadius};
+  opacity: ${({ $loaded }) => ($loaded ? 1 : 0)};
+  transition: opacity 0.5s ease-in-out;
+`;
+
+export const ShimmerOverlay = styled.div`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  opacity: ${({ $loaded }) => ($loaded ? 0 : 1)};
+  transition: opacity 0.35s ease-out;
+  pointer-events: none;
+`;
+
+export const LowResImage = styled.img`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.05);
+  filter: ${({ $loaded }) => ($loaded ? 'blur(0px)' : 'blur(12px)')};
+  opacity: ${({ $lowLoaded, $loaded }) => ($lowLoaded && !$loaded ? 1 : 0)};
+  transition:
+    opacity 0.5s ease-in-out,
+    filter 0.5s ease-in-out;
+`;

package/components/components/Input/Checkbox/Checkbox.jsx

@@ -0,0 +1,78 @@
+import { useState, useRef } from 'react';
+import grey from '../../../colors/grey';
+import P from '../../Typography/P';
+import white from '../../../colors/white';
+import blue from '../../../colors/blue';
+import { Box, Wrapper, CbInput } from './styles';
+import { getColor } from './helpers';
+
+const Checkbox = ({
+  label,
+  value,
+  color = 'blue',
+  textColor = grey.m700,
+  disabled,
+  onChange,
+  tabIndex,
+  innerShade: innerShadeOverride,
+  outerShade: outerShadeOverride,
+  ...rest
+}) => {
+  const [focused, setFocused] = useState(false);
+
+  const shade = getColor(color);
+  const innerShade = innerShadeOverride ?? shade?.m500 ?? blue.m500;
+  const outerShade = outerShadeOverride ?? shade?.m600 ?? blue.m600;
+  const lastKeyPressRef = useRef(0);
+
+  const changeHandler = (e) => onChange(e.target.checked);
+  const keyDownHandler = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      const now = Date.now();
+      if (now - lastKeyPressRef.current < 500) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      lastKeyPressRef.current = now;
+      if (e.key === ' ') {
+        e.preventDefault();
+        onChange(!value);
+        return;
+      }
+      onChange(!value);
+      setFocused(false);
+    }
+    if (e.key === 'Escape') setFocused(false);
+  };
+  const focusHandler = (val) => () => setFocused(val);
+
+  return (
+    <Wrapper as='label' $disabled={disabled} {...rest}>
+      <CbInput
+        type='checkbox'
+        checked={value}
+        onChange={changeHandler}
+        onKeyDown={keyDownHandler}
+        onFocus={focusHandler(true)}
+        onBlur={focusHandler(false)}
+        disabled={disabled}
+        tabIndex={tabIndex}
+      />
+      <Box
+        $value={value}
+        $focused={focused}
+        size={6}
+        color={white}
+        $innerShade={innerShade}
+        $outerShade={outerShade}
+        aria-hidden='true'
+      />
+      <P color={textColor} size='1.92rem'>
+        {label}
+      </P>
+    </Wrapper>
+  );
+};
+
+export default Checkbox;

package/components/components/Input/Checkbox/helpers.js

@@ -0,0 +1,27 @@
+import blue from '../../../colors/blue';
+import green from '../../../colors/green';
+import red from '../../../colors/red';
+import yellow from '../../../colors/yellow';
+import orange from '../../../colors/orange';
+import black from '../../../colors/black';
+import grey from '../../../colors/grey';
+import violet from '../../../colors/violet';
+import teal from '../../../colors/teal';
+import purple from '../../../colors/purple';
+import pink from '../../../colors/pink';
+
+const COLOR_SHADE_MAP = {
+  blue,
+  green,
+  red,
+  yellow,
+  orange,
+  black,
+  grey,
+  violet,
+  teal,
+  purple,
+  pink,
+};
+
+export const getColor = (clr) => COLOR_SHADE_MAP[clr] ?? blue.m500;

package/components/components/Input/Checkbox/index.js

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

package/components/components/Input/Checkbox/styles.js

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components';
+import Check from '../../Icons/Check';
+import grey from '../../../colors/grey';
+
+export const Wrapper = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 1.28rem;
+  width: max-content;
+  position: relative;
+
+  ${({ $disabled }) =>
+    $disabled &&
+    css`
+      pointer-events: none;
+      opacity: 0.4;
+    `}
+`;
+
+export const Box = styled(Check)`
+  width: 1.92rem;
+  height: 1.92rem;
+  border: 1px solid ${({ $value, $outerShade }) => ($value ? $outerShade : grey.m800)};
+  border-radius: 0.32rem;
+  background-color: ${({ $value, $innerShade }) => ($value ? $innerShade : 'transparent')};
+  transition:
+    background-color 0.5s ease,
+    border-color 0.5s ease,
+    box-shadow 0.5s ease;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1px ${({ $focused, $outerShade }) => ($focused ? $outerShade : 'transparent')};
+
+  path {
+    stroke-width: 3;
+    transform-box: fill-box;
+    transform-origin: center;
+    transform: scale(${({ $value }) => ($value ? 1 : 0)});
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+`;
+
+export const CbInput = styled.input`
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  whitespace: nowrap;
+`;

package/components/components/Input/FileUploader/FileUploader.jsx

@@ -0,0 +1,98 @@
+import { useRef } from 'react';
+import { UploadBtnContainer, Wrapper, PWrapper, HiddenInput } from './styles';
+import white from '../../../colors/white';
+import blue from '../../../colors/blue';
+import grey from '../../../colors/grey';
+import Link from '../../Icons/Link';
+import colors from '../../../colors/colorMap';
+import Ripple from '../../Ripple';
+import { MEDIUM, SIZE } from './constants';
+
+const Rippled = ({ theme, children }) => <Ripple rippleColor={theme['m100']}>{children}</Ripple>;
+
+const FileUploader = ({
+  label,
+  labelColor,
+  theme = blue,
+  size = MEDIUM,
+  width,
+  isLoading,
+  disabled,
+  prefixIcon: PrefixIcon = Link,
+  suffixIcon: SuffixIcon,
+  type = 'file',
+  accept,
+  isMultiple,
+  onChange,
+  ...rest
+}) => {
+  const inputRef = useRef(null);
+  const { m400: $selectedColor, m500: $hoverColor, m600: $activeColor } = colors[theme] ?? blue;
+  const { height: $height, width: $width, font: $font } = SIZE[size] || {};
+  const txtClr = labelColor || ['white', 'yellow'].includes(theme) ? grey.m600 : white;
+
+  const lastKeyPressRef = useRef(0);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const now = Date.now();
+      if (now - lastKeyPressRef.current < 500) {
+        e.stopPropagation();
+        return;
+      }
+      lastKeyPressRef.current = now;
+      if (!disabled && !isLoading) inputRef.current?.click();
+    }
+  };
+
+  const btnChild = (
+    <Wrapper
+      {...{
+        $selectedColor,
+        $hoverColor,
+        $height,
+        $width: width || $width,
+        $activeColor,
+        disabled,
+        $isLoading: isLoading,
+      }}
+      tabIndex={0}
+      aria-disabled={disabled}
+      onKeyDown={handleKeyDown}
+    >
+      <HiddenInput
+        ref={inputRef}
+        type={type}
+        accept={accept}
+        multiple={isMultiple}
+        disabled={disabled}
+        onChange={onChange}
+        tabIndex={-1}
+      />
+      {PrefixIcon && <PrefixIcon color={txtClr} size={$font + 19} />}
+      <PWrapper
+        color={txtClr}
+        size={`${$font}rem`}
+        $prefixIcon={!!PrefixIcon}
+        $suffixIcon={!!SuffixIcon}
+        $iconSize={$font + 19}
+        title={label}
+      >
+        {label}
+      </PWrapper>
+      {SuffixIcon && <SuffixIcon color={txtClr} size={$font + 19} />}
+    </Wrapper>
+  );
+
+  return (
+    <UploadBtnContainer
+      {...{ $height, $width: width || $width, disabled, $isLoading: isLoading }}
+      {...rest}
+    >
+      {isLoading || disabled ? btnChild : <Rippled theme={theme}>{btnChild}</Rippled>}
+    </UploadBtnContainer>
+  );
+};
+
+export default FileUploader;

package/components/components/Input/FileUploader/constants.js

@@ -0,0 +1,27 @@
+export const SMALL = 'small';
+export const MEDIUM = 'medium';
+export const LARGE = 'large';
+export const EX_LARGE = 'ex-large';
+
+export const SIZE = {
+  [SMALL]: {
+    height: 4.48,
+    width: 8.4,
+    font: 1.6,
+  },
+  [MEDIUM]: {
+    height: 5.12,
+    width: 9.6,
+    font: 1.92,
+  },
+  [LARGE]: {
+    height: 5.76,
+    width: 10.8,
+    font: 2.24,
+  },
+  [EX_LARGE]: {
+    height: 6.4,
+    width: 12,
+    font: 2.56,
+  },
+};

package/components/components/Input/FileUploader/index.js

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

package/components/components/Input/FileUploader/styles.js

@@ -0,0 +1,88 @@
+import styled, { css } from 'styled-components';
+import P from '../../Typography/P';
+import grey from '../../../colors/grey';
+
+export const UploadBtnContainer = styled.div`
+  height: ${({ $height }) => $height}rem;
+  width: fit-content;
+  max-width: ${({ $width }) => $width}rem;
+  display: inline-block;
+  position: relative;
+  border-radius: 0.96rem;
+
+  ${({ disabled, $isLoading }) =>
+    !(disabled || $isLoading) &&
+    css`
+      box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
+      transition:
+        transform 0.2s,
+        box-shadow 0.2s;
+
+      &:hover,
+      &:focus-within {
+        box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
+        transform: translateY(-2px);
+      }
+    `};
+`;
+
+export const Wrapper = styled.label`
+  height: ${({ $height }) => `${$height}rem`};
+  width: ${({ $width }) => `${$width}rem`};
+  border-radius: 0.96rem;
+  border: none;
+  padding: 0 0.8rem;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  outline: none;
+  background-color: ${({ $selectedColor, disabled }) => (disabled ? grey.m500 : $selectedColor)};
+  cursor: ${({ disabled, $isLoading }) =>
+    disabled ? 'not-allowed' : $isLoading ? 'auto' : 'pointer'};
+
+  ${({ $isLoading }) =>
+    $isLoading &&
+    css`
+      pointer-events: none;
+    `};
+
+  ${({ disabled, $isLoading }) =>
+    !(disabled || $isLoading) &&
+    css`
+      &:hover {
+        background-color: ${({ $hoverColor }) => $hoverColor};
+      }
+
+      &:active {
+        background-color: ${({ $activeColor }) => $activeColor};
+      }
+    `};
+`;
+
+export const PWrapper = styled(P)`
+  color: ${({ color }) => color};
+  font-size: ${({ size }) => size};
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(
+    100%
+      ${({ $prefixIcon, $iconSize }) => ($prefixIcon ? ` - ${$iconSize}px - 0.8rem` : '')}${({
+        $suffixIcon,
+        $iconSize,
+      }) => ($suffixIcon ? ` - ${$iconSize}px - 0.8rem` : '')}
+  );
+`;
+
+export const HiddenInput = styled.input`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+`;

package/components/components/Input/Input/Input.jsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { InputBox, Wrapper, Label, HelperText, LeftIconWrapper, RightIconWrapper } from './styles';
+import { getColor, getIcon } from './helpers';
+import white from '../../../colors/white';
+import grey from '../../../colors/grey';
+import SvgIcon from '../Textarea/SvgIcon';
+
+const Input = ({
+  label,
+  onChange,
+  value,
+  type,
+  hasError,
+  name = 'input',
+  color = 'blue',
+  size = '20',
+  disableAutoComplete,
+  helperText = '',
+  background = 'transparent',
+  outerBackground = white,
+  leftIcon,
+  rightIcon,
+  placeholder,
+  ...params
+}) => {
+  const [$isFocused, setIsFocused] = useState(false);
+  const $shade = getColor(color);
+
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+
+  const handleChange = (e) => {
+    onChange(e);
+  };
+
+  const iconStyles = { color: grey.m500, size: 22 };
+
+  const leftIconRef = getIcon(leftIcon);
+  const rightIconRef = getIcon(rightIcon);
+
+  const $hasLeftIcon = !!leftIconRef;
+  const $hasRightIcon = !!rightIconRef;
+
+  const $hasError = hasError;
+  const $background = background;
+  const inputId = `input-${name}`;
+  const helperId = helperText ? `${inputId}-helper` : undefined;
+
+  return (
+    <Wrapper>
+      <InputBox
+        {...{
+          type,
+          name,
+          $hasError,
+          size,
+          value,
+          $isFocused,
+          $shade,
+          $background,
+          $hasLeftIcon,
+          $hasRightIcon,
+        }}
+        id={inputId}
+        aria-invalid={$hasError ? true : undefined}
+        aria-describedby={helperId}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        autoComplete={disableAutoComplete ? 'off' : 'on'}
+        {...params}
+      />
+      {leftIconRef && (
+        <LeftIconWrapper aria-hidden='true'>
+          <SvgIcon svgIcon={leftIconRef} iconStyles={iconStyles} />
+        </LeftIconWrapper>
+      )}
+      {rightIconRef && (
+        <RightIconWrapper aria-hidden='true'>
+          <SvgIcon svgIcon={rightIconRef} iconStyles={iconStyles} />
+        </RightIconWrapper>
+      )}
+      {(label || (placeholder && !value)) && (
+        <Label
+          as='label'
+          htmlFor={inputId}
+          {...{
+            $hasError,
+            $isFocused,
+            $shade,
+            value,
+            $outerBackground: $isFocused || !!value ? outerBackground : background,
+            $hasLeftIcon,
+            $hasRightIcon,
+            $onlyPh: placeholder && !label,
+          }}
+        >
+          {label || placeholder}
+        </Label>
+      )}
+      {helperText && (
+        <HelperText id={helperId} {...{ $hasError, $isFocused, $shade, $hasLeftIcon }}>
+          {helperText}
+        </HelperText>
+      )}
+    </Wrapper>
+  );
+};
+
+export default Input;

package/components/components/Input/Input/helpers.js

@@ -0,0 +1,58 @@
+import blue from '../../../colors/blue';
+import green from '../../../colors/green';
+import red from '../../../colors/red';
+import yellow from '../../../colors/yellow';
+import orange from '../../../colors/orange';
+import black from '../../../colors/black';
+import grey from '../../../colors/grey';
+import violet from '../../../colors/violet';
+import teal from '../../../colors/teal';
+import purple from '../../../colors/purple';
+import pink from '../../../colors/pink';
+import allIcons from '../../Icons/iconsMap';
+
+const COLOR_SHADE_MAP = {
+  blue: blue.m500,
+  red: red.m500,
+  green: green.m500,
+  yellow: yellow.m500,
+  orange: orange.m500,
+  black: black.m500,
+  grey: grey.m500,
+  violet: violet.m500,
+  teal: teal.m500,
+  purple: purple.m500,
+  pink: pink.m500,
+};
+
+export const getColor = (clr) => COLOR_SHADE_MAP[clr] ?? grey.m500;
+
+export const getCssShade = ({ $hasError, $shade, $isFocused, value, $onlyPh }) => {
+  if ($hasError) {
+    return typeof value === 'string' && !value && !$isFocused ? grey.m500 : red.m400;
+  }
+
+  if ($isFocused && !$onlyPh) {
+    return $shade;
+  }
+
+  return grey.m500;
+};
+
+export const getIcon = (iconName) => allIcons[iconName] ?? null;
+
+export const getPadding = ({ $hasLeftIcon, $hasRightIcon }) => {
+  if ($hasLeftIcon && $hasRightIcon) {
+    return '0 3.84rem';
+  }
+
+  if ($hasLeftIcon) {
+    return '0 0.96rem 0 3.84rem';
+  }
+
+  if ($hasRightIcon) {
+    return '0 3.84rem 0 0.96rem';
+  }
+
+  return '0 0.96rem';
+};

package/components/components/Input/Input/index.js

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