meticulous-ui 3.3.0 → 3.4.0

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

@@ -0,0 +1,97 @@
+import styled, { css } from 'styled-components';
+import black from '../../../colors/black';
+import grey from '../../../colors/grey';
+import red from '../../../colors/red';
+import { getCssShade, getPadding } from './helpers';
+
+export const InputBox = styled.input`
+  height: 4.8rem;
+  border-radius: 0.64rem;
+  font-size: 2.24rem;
+  border: 2px solid ${({ $hasError }) => ($hasError ? red.m400 : black.m200)};
+  padding: ${getPadding};
+  font-weight: 400;
+  transition: border-color 0.3s ease;
+  background-color: ${({ $background }) => $background} !important;
+  overflow: hidden;
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
+    -webkit-text-fill-color: var(--input-text);
+    transition: background-color 9999s ease-in-out 0s;
+  }
+
+  &::placeholder {
+    color: ${grey.m500};
+    font-weight: 300;
+    font-size: 2.24rem;
+    background-color: ${({ $background }) => $background};
+    pointer-events: none;
+  }
+
+  &:focus {
+    border: 2px solid
+      ${({ $shade, $hasError }) => getCssShade({ $shade, $hasError, $isFocused: true })};
+    outline: none;
+  }
+`;
+
+export const HelperText = styled.p`
+  margin-top: 0.64rem;
+  margin-left: 0.64rem;
+  font-size: 1.28rem;
+  color: ${getCssShade};
+`;
+
+export const Wrapper = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const LeftIconWrapper = styled.div`
+  position: absolute;
+  top: 1.28rem;
+  left: 0.96rem;
+`;
+
+export const RightIconWrapper = styled.div`
+  position: absolute;
+  top: 1.28rem;
+  right: 0.96rem;
+`;
+
+export const RightIconParent = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const Label = styled.div`
+  position: absolute;
+  top: -0.64rem;
+  left: 0.8rem;
+  font-size: 1.28rem;
+  background-color: ${({ $outerBackground }) => $outerBackground};
+  border-radius: 0.64rem;
+  margin: 0 0.64rem;
+  transition: 0.25s;
+  font-weight: 400;
+  pointer-events: none;
+  color: ${getCssShade};
+
+  ${({ $isFocused, value, $onlyPh }) =>
+    !$onlyPh && ($isFocused || value)
+      ? css`
+          top: -0.64rem;
+          left: ${({ $hasLeftIcon }) => ($hasLeftIcon ? 3.52 : 0.8)}rem;
+          padding: 0 0.64rem;
+          margin: 0;
+        `
+      : css`
+          top: 1.28rem;
+          left: ${({ $hasLeftIcon }) => ($hasLeftIcon ? 3.52 : 0.8)}rem;
+          font-size: 2.24rem;
+        `}
+`;

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

@@ -0,0 +1,49 @@
+import P from '../../Typography/P';
+import blue from '../../../colors/blue';
+import { Circle, CircleBorder, HiddenInput, Wrapper } from './styles';
+
+const Radio = ({
+  label,
+  value,
+  name,
+  color,
+  textColor,
+  isSelected,
+  disabled,
+  onChange,
+  ...rest
+}) => {
+  const innerShade = color?.m500 ?? blue.m500;
+  const outerShade = color?.m800 ?? blue.m800;
+
+  const changeHandler = () => onChange(value);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (!disabled) onChange(value);
+    }
+  };
+
+  return (
+    <Wrapper $disabled={disabled} $focusShade={outerShade} {...rest}>
+      <HiddenInput
+        type='radio'
+        name={name}
+        value={value}
+        checked={isSelected}
+        disabled={disabled}
+        onChange={changeHandler}
+        onKeyDown={handleKeyDown}
+      />
+      <CircleBorder aria-hidden='true' $isSelected={isSelected} $shade={outerShade}>
+        <Circle $isSelected={isSelected} $shade={innerShade} />
+      </CircleBorder>
+      <P color={textColor} size='1.92rem'>
+        {label}
+      </P>
+    </Wrapper>
+  );
+};
+
+export default Radio;

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

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

package/components/components/Input/Radio/styles.js

@@ -0,0 +1,59 @@
+import styled, { css } from 'styled-components';
+import grey from '../../../colors/grey';
+
+export const Circle = styled.div`
+  position: absolute;
+  width: 1.12rem;
+  height: 1.12rem;
+  border-radius: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${({ $isSelected, $shade }) => ($isSelected ? $shade : 'transparent')};
+  transition: background-color 0.35s ease;
+`;
+
+export const CircleBorder = styled.div`
+  width: 1.76rem;
+  height: 1.76rem;
+  border: 1px solid ${({ $isSelected, $shade }) => ($isSelected ? $shade : grey.m900)};
+  border-radius: 50%;
+  position: relative;
+  transition:
+    border-color 0.5s ease,
+    box-shadow 0.5s ease;
+`;
+
+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;
+  margin: 0;
+`;
+
+export const Wrapper = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 1.28rem;
+  width: max-content;
+
+  &:focus-within ${CircleBorder} {
+    box-shadow: 0 0 0 1px ${({ $focusShade }) => $focusShade || grey.m900};
+  }
+
+  ${({ $disabled }) =>
+    $disabled
+      ? css`
+          pointer-events: none;
+          opacity: 0.4;
+          cursor: not-allowed;
+        `
+      : css`
+          cursor: pointer;
+        `}
+`;

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

@@ -0,0 +1,48 @@
+import { getColor } from '../Checkbox/helpers';
+import Radio from '../Radio/Radio';
+import { Wrapper } from './styles';
+
+const RadioGroup = ({
+  options,
+  color = 'blue',
+  value,
+  onChange,
+  isHorizonatal,
+  label,
+  ariaLabel,
+  name,
+  ...rest
+}) => {
+  const shade = getColor(color);
+
+  const clickHandler = (val) => {
+    if (val !== value) {
+      onChange(val);
+    }
+  };
+
+  const renderOption = (opt) => (
+    <Radio
+      {...opt}
+      key={opt?.value}
+      name={name}
+      color={shade}
+      isSelected={value === opt?.value}
+      onChange={clickHandler}
+    />
+  );
+
+  return (
+    <Wrapper
+      role='radiogroup'
+      aria-label={!label ? ariaLabel : undefined}
+      $isHorizonatal={isHorizonatal}
+      {...rest}
+    >
+      {label && <legend>{label}</legend>}
+      {options.map(renderOption)}
+    </Wrapper>
+  );
+};
+
+export default RadioGroup;

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

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

package/components/components/Input/RadioGroup/styles.js

@@ -0,0 +1,19 @@
+import styled, { css } from 'styled-components';
+
+export const Wrapper = styled.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: ${({ $isHorizonatal }) => ($isHorizonatal ? 'row' : 'column')};
+
+  ${({ $isHorizonatal }) =>
+    $isHorizonatal
+      ? css`
+          flex-wrap: wrap;
+          justify-content: space-between;
+        `
+      : css`
+          gap: 1.92rem;
+        `};
+`;

package/components/components/Input/Textarea/SvgIcon.jsx

@@ -0,0 +1,15 @@
+import { Suspense } from 'react';
+
+const SvgIcon = ({ svgIcon, iconStyles }) => {
+  if (!svgIcon) return null;
+
+  const Icon = svgIcon;
+
+  return (
+    <Suspense fallback={<div style={{ width: '1em', height: '1em' }} />}>
+      <Icon {...iconStyles} />
+    </Suspense>
+  );
+};
+
+export default SvgIcon;

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

@@ -0,0 +1,127 @@
+import { useRef, useState } from 'react';
+import { TextareaBox, Wrapper, Label, HelperText, Parent } from './styles';
+import { LeftIconWrapper, RightIconWrapper } from '../Input/styles';
+import { getColor, getIcon } from './helpers';
+import white from '../../../colors/white';
+import grey from '../../../colors/grey';
+import SvgIcon from './SvgIcon';
+
+const Textarea = ({
+  label,
+  onChange,
+  value,
+  type,
+  hasError,
+  name = 'textarea',
+  color = 'blue',
+  helperText = '',
+  background = 'transparent',
+  outerBackground = white,
+  isDynamic,
+  isResizeNone,
+  rows = '2',
+  cols = '20',
+  leftIcon,
+  rightIcon,
+  placeholder,
+  ...params
+}) => {
+  const [$isFocused, setIsFocused] = useState(false);
+  const $shade = getColor(color);
+  const textAreaRef = useRef(null);
+
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+
+  const handleChange = (e) => {
+    if (isDynamic) {
+      const element = textAreaRef.current;
+      if (element) {
+        element.style.height = '0px';
+        const scrollHeight = element.scrollHeight;
+        element.style.height = `${scrollHeight}px`;
+      }
+    }
+    onChange(e);
+  };
+
+  const iconStyles = { color: grey.m500, size: 20 };
+  const leftIconRef = getIcon(leftIcon);
+  const rightIconRef = getIcon(rightIcon);
+  const $hasLeftIcon = !!leftIconRef;
+  const $hasRightIcon = !!rightIconRef;
+  const $hasError = hasError;
+  const $isDynamic = isDynamic;
+  const $background = background;
+  const rowsObj = isDynamic ? {} : { rows };
+  const textareaId = `textarea-${name}`;
+  const helperId = helperText ? `${textareaId}-helper` : undefined;
+
+  return (
+    <Wrapper>
+      <TextareaBox
+        {...{
+          type,
+          name,
+          $hasError,
+          value,
+          $isFocused,
+          $shade,
+          $isDynamic,
+          $background,
+          cols,
+          $hasLeftIcon,
+          $hasRightIcon,
+          $isResizeNone: isResizeNone,
+          ...rowsObj,
+        }}
+        id={textareaId}
+        aria-invalid={$hasError ? true : undefined}
+        aria-describedby={helperId}
+        ref={textAreaRef}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        {...params}
+      />
+      {leftIconRef && (
+        <LeftIconWrapper aria-hidden='true' style={{ top: '1.2rem', transform: 'none' }}>
+          <SvgIcon svgIcon={leftIconRef} iconStyles={iconStyles} />
+        </LeftIconWrapper>
+      )}
+
+      {rightIconRef && (
+        <RightIconWrapper aria-hidden='true' style={{ top: '1.2rem', transform: 'none' }}>
+          <SvgIcon svgIcon={rightIconRef} iconStyles={iconStyles} />
+        </RightIconWrapper>
+      )}
+      <Parent>
+        {(label || (placeholder && !value)) && (
+          <Label
+            as='label'
+            htmlFor={textareaId}
+            {...{
+              $hasError,
+              $isFocused,
+              $shade,
+              $value: value,
+              $outerBackground: $isFocused || !!value ? outerBackground : background,
+              $hasLeftIcon,
+              $hasRightIcon,
+              $onlyPh: placeholder && !label,
+            }}
+          >
+            {label || placeholder}
+          </Label>
+        )}
+        {helperText && (
+          <HelperText id={helperId} {...{ $hasError, $isFocused, $shade, $hasLeftIcon }}>
+            {helperText}
+          </HelperText>
+        )}
+      </Parent>
+    </Wrapper>
+  );
+};
+
+export default Textarea;

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

@@ -0,0 +1,40 @@
+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 getIcon = (iconName) => allIcons[iconName] ?? null;
+
+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;
+};

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

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

package/components/components/Input/Textarea/styles.js

@@ -0,0 +1,104 @@
+import styled, { css } from 'styled-components';
+import black from '../../../colors/black';
+import grey from '../../../colors/grey';
+import red from '../../../colors/red';
+import { getCssShade } from './helpers';
+
+export const TextareaBox = styled.textarea`
+  border-radius: 0.64rem;
+  font-size: 2.24rem;
+  border: 2px solid ${({ $hasError }) => ($hasError ? red.m400 : black.m200)};
+  padding: 0.96rem;
+  font-weight: 400;
+  transition: border-color 0.3s ease;
+  background-color: ${({ $background }) => $background} !important;
+  min-height: 2.24rem;
+  min-width: 4.8rem;
+
+  ${({ $isResizeNone }) =>
+    $isResizeNone &&
+    css`
+      resize: none;
+    `}
+
+  ${({ $isDynamic }) =>
+    $isDynamic &&
+    css`
+      resize: none;
+      display: block;
+      overflow: hidden;
+    `}
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
+    -webkit-text-fill-color: var(--input-text);
+    transition: background-color 9999s ease-in-out 0s;
+  }
+
+  &::placeholder {
+    color: ${grey.m500};
+    font-weight: 300;
+    font-size: 2.24rem;
+    background-color: ${({ $background }) => $background};
+    pointer-events: none;
+  }
+
+  &:focus {
+    border: 2px solid
+      ${({ $shade, $hasError }) => getCssShade({ $shade, $hasError, $isFocused: true })};
+    outline: none;
+  }
+`;
+
+export const HelperText = styled.p`
+  margin-top: 0.64rem;
+  margin-left: 0.64rem;
+  font-size: 1.28rem;
+  color: ${getCssShade};
+`;
+
+export const Wrapper = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const Label = styled.div`
+  position: absolute;
+  top: -0.64rem;
+  left: 0.8rem;
+  font-size: 1.28rem;
+  background-color: ${({ $outerBackground }) => $outerBackground};
+  border-radius: 0.64rem;
+  margin: 0 0.64rem;
+  transition: 0.25s;
+  font-weight: 400;
+  pointer-events: none;
+  color: ${getCssShade};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: -moz-available; /* Firefox */
+  max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
+  max-width: stretch; /* Modern Standard */
+
+  ${({ $isFocused, $value, $onlyPh }) =>
+    !$onlyPh && ($isFocused || $value)
+      ? css`
+          top: -0.64rem;
+          left: 0.8rem;
+          padding: 0 0.64rem;
+          margin: 0;
+        `
+      : css`
+          top: 1.28rem;
+          left: 0.8rem;
+          font-size: 2.24rem;
+        `}
+`;
+
+export const Parent = styled.div`
+  overflow: hidden;
+`;

package/components/components/Loader/Loader.jsx

@@ -0,0 +1,34 @@
+import { LoaderWrapper, Dot, VisuallyHidden } from './styles';
+import { MEDIUM, BLUE, SIZE, THEME_SHADE, ANIMATION_DELAYS } from './constants';
+import { getTheme } from './helpers';
+
+const Loader = ({ size = MEDIUM, theme = BLUE, isBounce, isMini, isMiniDark, ...rest }) => {
+  const { dot, gap } = SIZE[size] || SIZE[MEDIUM];
+  const colorPallette = getTheme(theme);
+  const delays = ANIMATION_DELAYS;
+  const shades = isMiniDark
+    ? THEME_SHADE.slice(2, 6)
+    : isMini
+      ? THEME_SHADE.slice(0, 3)
+      : THEME_SHADE;
+  const colors = shades.map((shade) => colorPallette[shade] ?? colorPallette.m500);
+  const dots = delays.map(() => dot);
+
+  return (
+    <LoaderWrapper role='status' $gap={gap} {...rest}>
+      <VisuallyHidden>Loading</VisuallyHidden>
+      {dots.map((dotSize, i) => (
+        <Dot
+          key={`dot-${i}`}
+          aria-hidden='true'
+          $size={dotSize}
+          $color={colors[i]}
+          $delay={delays[i]}
+          $isBounce={isBounce}
+        />
+      ))}
+    </LoaderWrapper>
+  );
+};
+
+export default Loader;

package/components/components/Loader/constants.js

@@ -0,0 +1,20 @@
+export const SMALL = 'small';
+export const MEDIUM = 'medium';
+export const LARGE = 'large';
+
+export const SIZE = {
+  [SMALL]: { dot: '0.8rem', gap: '0.48rem' },
+  [MEDIUM]: { dot: '1.2rem', gap: '0.8rem' },
+  [LARGE]: { dot: '1.6rem', gap: '1.12rem' },
+};
+
+export const BLUE = 'blue';
+export const GREEN = 'green';
+export const PURPLE = 'purple';
+export const ORANGE = 'orange';
+export const PINK = 'pink';
+
+export const THEME_SHADE = ['m200', 'm300', 'm400', 'm600', 'm800'];
+
+// Delays evenly distributed across the 0.85s cycle (0.85s / 5 dots = 0.17s apart)
+export const ANIMATION_DELAYS = [0, 0.17, 0.34, 0.51, 0.68];

package/components/components/Loader/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 getTheme = (clr) => COLOR_SHADE_MAP[clr] ?? blue;

package/components/components/Loader/index.js

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