hrm_ui_lib 1.0.0

package/src/context/types.ts

@@ -0,0 +1,41 @@
+import { createContext } from 'react'
+import {
+  Control,
+  FieldValues,
+  UseFormRegister,
+  UseFormGetValues,
+  UseFormWatch,
+  UseFormReset,
+  UseFormClearErrors,
+  UseFormSetError,
+  UseFormTrigger,
+  UseFormGetFieldState,
+  UseFormUnregister
+} from 'react-hook-form'
+import { noop } from '../utils/helpers'
+
+export type TFormContextProps = {
+  register?: UseFormRegister<TFormData>
+  errors?: FieldErrors
+  setValue: TSetValue
+  control?: Control<FieldValues, unknown>
+  getValues?: UseFormGetValues<TFormData>
+  watch?: UseFormWatch<TFormData>
+  reset?: UseFormReset<TFormData>
+  isDirty?: boolean
+  clearErrors?: UseFormClearErrors<TFormData>
+  setError?: UseFormSetError<TFormData>
+  isSubmitted: boolean
+  isSubmitting: boolean
+  dirtyFields: TDirtyFields
+  trigger?: UseFormTrigger<TFormData>
+  getFieldState?: UseFormGetFieldState<TFormData>
+  unregister?: UseFormUnregister<TFormData>
+}
+
+export const FormContext = createContext<TFormContextProps>({
+  setValue: noop,
+  isSubmitted: false,
+  isSubmitting: false,
+  dirtyFields: {}
+})

package/src/helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { AnimatePresence, AnimatePresenceProps } from 'framer-motion'
+
+interface NewAnimatePresenceProps extends Omit<AnimatePresenceProps, 'children'> {
+  children: React.ReactNode
+}
+
+//  This component is for exit animation
+export function AnimatePresenceWrapper({
+  children,
+  initial = true
+}: {
+  children: React.ReactNode
+  initial?: boolean
+}): JSX.Element {
+  const NewAnimatePresence: React.FC<NewAnimatePresenceProps> = AnimatePresence
+
+  return <NewAnimatePresence initial={initial}>{children}</NewAnimatePresence>
+}

package/src/helperComponents/AnimatePresenceWrapper/index.ts

@@ -0,0 +1 @@
+export * from './AnimatePresenceWrapper'

package/src/helperComponents/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,20 @@
+import React, { type FC } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+export interface Props {
+  title?: string
+  className?: string
+  children: string | string[]
+  // https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/HEAD/AVAILABLE_LANGUAGES_PRISM.MD
+  language?: string
+}
+
+export const CodeBlock: FC<Props> = ({ title, children, language, className }) => (
+  <div className={className} style={{ margin: '10px 0' }}>
+    {title && <h3>{title}</h3>}
+    <SyntaxHighlighter language={language ?? 'js'} style={atomDark} wrapLines showLineNumbers>
+      {Array.isArray(children) ? children.map((child) => child.trim()) : children.trim()}
+    </SyntaxHighlighter>
+  </div>
+)

package/src/helperComponents/CodeBlock/index.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from './CodeBlock'
+export type { Props } from './CodeBlock'

package/src/helperComponents/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { TErrorMessageProps } from './types'
+import { Text } from '../../components/Text'
+import { IconDynamicComponent } from '../IconDynamicComponent'
+
+export const ErrorMessage = (props: TErrorMessageProps): JSX.Element => {
+  const { message, icon, dataId, className } = props
+  return (
+    <Text
+      className={`error-message ${className}`}
+      size="small"
+      type="danger"
+      dataId={dataId ? `${dataId}-error-message` : ''}
+    >
+      <>
+        {icon && (
+          <IconDynamicComponent componentName={icon} className="mr-4" size="xsmall" type="danger" />
+        )}
+        <span>{message}</span>
+      </>
+    </Text>
+  )
+}

package/src/helperComponents/ErrorMessage/index.ts

@@ -0,0 +1 @@
+export * from './ErrorMessage'

package/src/helperComponents/ErrorMessage/types.ts

@@ -0,0 +1,6 @@
+export interface TErrorMessageProps {
+  message?: string | JSX.Element
+  icon?: string
+  dataId?: string
+  className?: string
+}

package/src/helperComponents/IconDynamicComponent/IconDynamicComponent.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement, Suspense } from 'react'
+import { IconComponentMapping } from './constants'
+
+interface IconDynamicComponentProps {
+  componentName: string
+  size?: string
+  type?: string
+  className?: string
+}
+
+export const IconDynamicComponent = ({
+  componentName,
+  size = 'small',
+  type = 'inverse',
+  className
+}: IconDynamicComponentProps): ReactElement | null => {
+  if (!componentName || !IconComponentMapping[componentName]) {
+    return null
+  }
+
+  // Dynamically load the component based on the componentName prop
+  const Component = IconComponentMapping[componentName]
+
+  return (
+    <Suspense fallback={null}>
+      <Component type={type} size={size} className={className} />
+    </Suspense>
+  )
+}
+
+export default IconDynamicComponent

package/src/helperComponents/IconDynamicComponent/constants.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { lazy } from 'react'
+
+export const IconComponentMapping: { [key: string]: any } = {
+  warningFilled: lazy((): any => import('../../components/SVGIcons/IconWarningFilled')),
+  checkmarkCircleFilled: lazy(
+    (): any => import('../../components/SVGIcons/IconCheckmarkCircleFilled')
+  ),
+  errorCircleFilled: lazy((): any => import('../../components/SVGIcons/IconErrorCircleFilled')),
+  infoFilled: lazy((): any => import('../../components/SVGIcons/IconInfoFilled')),
+  checkmark: lazy((): any => import('../../components/SVGIcons/IconCheckmark')),
+  subtract: lazy((): any => import('../../components/SVGIcons/IconSubtract')),
+  am: lazy((): any => import('../../components/SVGIcons/IconAm')),
+  ru: lazy((): any => import('../../components/SVGIcons/IconRu')),
+  us: lazy((): any => import('../../components/SVGIcons/IconGb'))
+}

package/src/helperComponents/IconDynamicComponent/index.ts

@@ -0,0 +1 @@
+export * from './IconDynamicComponent'

package/src/helperComponents/Label/Label.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { LabelPropTypes } from './types'
+import { Text } from '../../components/Text'
+
+export const Label: React.FC<LabelPropTypes> = (props: LabelPropTypes) => {
+  const {
+    text,
+    size = 'standard',
+    required = false,
+    disabled = false,
+    className = '',
+    labelAddons
+  } = props
+  if (!text) {
+    return null
+  }
+  return (
+    <Text
+      size={size}
+      weight={'semibold'}
+      type={disabled ? 'disabled' : 'primary'}
+      className={`label flexbox align-items--start mb-8 ${className}`}
+    >
+      <>
+        {text}
+        {required ? <sup>*</sup> : null}
+        {labelAddons}
+      </>
+    </Text>
+  )
+}

package/src/helperComponents/Label/index.ts

@@ -0,0 +1 @@
+export * from './Label'

package/src/helperComponents/Label/types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+export interface LabelPropTypes {
+  required?: boolean
+  disabled?: boolean
+  invalid?: boolean
+  text?: ReactNode
+  size?: 'xxsmall' | 'xsmall' | 'small' | 'standard' | 'medium' | 'large'
+  className?: string
+  labelAddons?: JSX.Element
+  dataId?: string
+}

package/src/helperComponents/Loader/Loader.tsx

@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react'
+import { LoaderProps } from './types'
+
+export const Loader = (props: LoaderProps): ReactElement => {
+  const { size = 'large', type = 'lite' } = props
+  return (
+    <div className={`loader loader--${type} loader--${size}`}>
+      <span className="loader__inner"></span>
+    </div>
+  )
+}

package/src/helperComponents/Loader/index.ts

@@ -0,0 +1 @@
+export * from './Loader'

package/src/helperComponents/Loader/types.ts

@@ -0,0 +1,4 @@
+export interface LoaderProps {
+  size?: 'small' | 'medium' | 'large'
+  type?: 'lite' | 'dark'
+}

package/src/helperComponents/OptionItem/OptionItem.tsx

@@ -0,0 +1,98 @@
+import React, { useCallback } from 'react'
+import { Checkbox } from '../../components/Checkbox'
+import { Avatar } from '../../components/Avatar'
+import { Tooltip } from '../../components/Tooltip'
+import { TSelectItemProps } from './types'
+import classNames from 'classnames'
+import { IconCheckmark } from '../../components/SVGIcons/IconCheckmark'
+
+export const OptionItem = (props: TSelectItemProps): JSX.Element => {
+  const {
+    data,
+    onClick,
+    disabled,
+    avatar,
+    isSelected,
+    labelLeftIconProps,
+    optionLeftIcon,
+    LabelRightIconComponent,
+    OptionRightIconComponent,
+    isCheckbox,
+    className = '',
+    tooltipAddons,
+    dataId = ''
+  } = props
+
+  const { label, meta, value } = data
+
+  const handleClick = useCallback(
+    (e: TClickEventType) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      if (disabled) {
+        return
+      }
+      onClick({ value, label })
+    },
+    [disabled, value, label, onClick]
+  )
+
+  const optionContent = (
+    <div
+      data-id={dataId}
+      id={`${value}`}
+      className={classNames(
+        'select__option',
+        {
+          'select__option--disabled': disabled
+        },
+        className
+      )}
+      onClick={handleClick}
+    >
+      {isCheckbox ? (
+        <Checkbox className="mr-8" selectedValue={isSelected} disabled={disabled} />
+      ) : null}
+      {!isCheckbox && isSelected ? (
+        <IconCheckmark size="xsmall" type={disabled ? 'disabled' : 'brand'} className="mr-8" />
+      ) : null}
+      <div className="select__option__inner">
+        {optionLeftIcon && optionLeftIcon.Component ? (
+          <optionLeftIcon.Component {...optionLeftIcon} size="small" className="mr-8" />
+        ) : null}
+        {avatar ? <Avatar size="xxsmall" imagePath={avatar} className="mr-4" /> : null}
+        {labelLeftIconProps?.Component ? (
+          <labelLeftIconProps.Component
+            size="xsmall"
+            type={disabled ? 'disabled' : 'primary'}
+            className="mr-4"
+            {...labelLeftIconProps}
+          />
+        ) : null}
+        <div className="select__option__content" data-id={dataId}>
+          <span className={`select__option__text pr-4 ${disabled ? 'color-disabled' : ''}`}>
+            {label}
+          </span>
+          {LabelRightIconComponent && LabelRightIconComponent(value)}
+
+          {meta ? (
+            <span className={`select__option__meta ${disabled ? 'color-disabled' : ''}`}>
+              {meta}
+            </span>
+          ) : null}
+        </div>
+      </div>
+      {OptionRightIconComponent && OptionRightIconComponent(value)}
+    </div>
+  )
+
+  return tooltipAddons ? (
+    <>
+      <Tooltip {...tooltipAddons} text={`${label}`} id={`${value}`} />
+      {optionContent}
+    </>
+  ) : (
+    optionContent
+  )
+}

package/src/helperComponents/OptionItem/index.ts

@@ -0,0 +1 @@
+export * from './OptionItem'

package/src/helperComponents/OptionItem/types.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react'
+import { TTooltipProps } from '../../components/Tooltip/types'
+
+export type TSelectItemProps = {
+  isSelected?: boolean
+  data: TSelectOption
+  className?: string
+  onClick: (itemValue: TSelectedValue) => void
+  optionLeftIcon?: TSelectIconProps
+  labelLeftIconProps?: TSelectIconProps
+  OptionRightIconComponent?: (value: TItemValue) => ReactElement
+  LabelRightIconComponent?: (value: TItemValue) => ReactElement
+  avatar?: string
+  disabled?: boolean
+  isCheckbox?: boolean
+  tooltipAddons?: TTooltipProps
+  dataId?: string
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,6 @@
+export * from './Label'
+export * from './ErrorMessage'
+export * from './Loader'
+export * from './OptionItem'
+export * from './IconDynamicComponent'
+export * from './CodeBlock'

package/src/hooks/index.ts

@@ -0,0 +1,12 @@
+export * from './useGetElemSizes'
+export * from './useGetTooltipStyles'
+export * from './useGetElemPositions'
+export * from './useGetTooltipPosition'
+export * from './useHideOnScroll'
+export * from './useFormProps'
+export * from './useFormContext'
+export * from './useOnOutsideClick'
+export * from './useScreenSize'
+export * from './useHideBodyScroll'
+export * from './useGetHasBottomSpace'
+export * from './useFieldArray'

package/src/hooks/useChangePositionsOnScroll.tsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react'
+import { CUSTOM_SCROLL_NAME, CUSTOM_SCROLL_MESSAGE, DROPDOWN_AND_INPUT_GAP } from '../consts'
+
+export const useChangePositionsOnScroll = (
+  parentElement: HTMLElement | null,
+  childElement: HTMLElement | null,
+  hasBottomSpace = true
+): null => {
+  const positionElement = () => {
+    const elemDimensions = parentElement?.getBoundingClientRect()
+    const childElementDimensions = childElement?.getBoundingClientRect()
+
+    if (childElementDimensions && elemDimensions && childElement) {
+      if (hasBottomSpace) {
+        childElement.style.top = elemDimensions.bottom + 'px'
+      } else {
+        childElement.style.bottom =
+          window.innerHeight - elemDimensions.top + DROPDOWN_AND_INPUT_GAP + 'px'
+      }
+    }
+  }
+  useEffect(() => {
+    window.addEventListener('scroll', positionElement)
+  }, [positionElement])
+
+  useEffect(() => {
+    document.addEventListener(CUSTOM_SCROLL_NAME, (event: Event) => {
+      const customEvent = event as CustomEvent<string>
+      // Check the event type
+      if (customEvent.detail === CUSTOM_SCROLL_MESSAGE) {
+        positionElement()
+      }
+    })
+  }, [positionElement])
+
+  return null
+}

package/src/hooks/useDispatchEventOnScroll.tsx

@@ -0,0 +1,10 @@
+import { CUSTOM_SCROLL_MESSAGE, CUSTOM_SCROLL_NAME } from '../consts'
+
+export const useDispatchEventOnScroll = () => {
+  return (): void => {
+    const closeMenuEvent = new CustomEvent(CUSTOM_SCROLL_NAME, {
+      detail: CUSTOM_SCROLL_MESSAGE
+    })
+    document.dispatchEvent(closeMenuEvent)
+  }
+}

package/src/hooks/useFieldArray.ts

@@ -0,0 +1 @@
+export { useFieldArray } from 'react-hook-form'

package/src/hooks/useFormContext.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react'
+import { FormContext } from '../context'
+import { Control, FieldValues, UseFormRegister } from 'react-hook-form'
+
+type TFormContextProps = {
+  register?: UseFormRegister<TFormData> //TRegister | CallbackFnType
+  errors?: FieldErrors
+  setValue: TSetValue
+  control?: Control<FieldValues, unknown>
+}
+
+export const useFormContext = (): TFormContextProps => {
+  return useContext(FormContext)
+}

package/src/hooks/useFormProps.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+import { FormContext, TFormContextProps } from '../context'
+
+export const useFormProps = (): TFormContextProps => {
+  return useContext(FormContext)
+}

package/src/hooks/useGetElemPositions.ts

@@ -0,0 +1,28 @@
+type TPositionReturnTypes = {
+  left: number
+  top: number
+  bottom: number
+  right: number
+  x?: number
+  y?: number
+}
+
+export const useGetElemPositions = (elemRef: HTMLElement | null): TPositionReturnTypes => {
+  if (!elemRef || !elemRef.getBoundingClientRect) {
+    return {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0
+    }
+  }
+
+  const elemDimensions = elemRef.getBoundingClientRect()
+
+  return {
+    left: elemDimensions.left,
+    right: elemDimensions.right,
+    top: elemDimensions.top,
+    bottom: elemDimensions.bottom
+  }
+}

package/src/hooks/useGetElemSizes.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react'
+
+type TSizes = {
+  width: number
+  height: number
+  scrollHeight: number
+}
+
+interface TRef extends RefObject<HTMLElement> {
+  clientWidth: number
+  clientHeight: number
+  scrollHeight: number
+}
+
+export const useGetElemSizes = (elemRef: HTMLElement | TRef | null): TSizes => {
+  if (!elemRef) {
+    return {
+      width: 0,
+      height: 0,
+      scrollHeight: 0
+    }
+  }
+
+  return {
+    width: elemRef.clientWidth,
+    scrollHeight: elemRef.scrollHeight,
+    height: elemRef.clientHeight
+  }
+}

package/src/hooks/useGetHasBottomSpace.ts

@@ -0,0 +1,35 @@
+import { useGetElemPositions } from './useGetElemPositions'
+import { useGetElemSizes } from './useGetElemSizes'
+
+export const useGetHasTopSpace = ({
+  element,
+  input
+}: {
+  element: HTMLDivElement | null
+  input: HTMLElement | null
+}): boolean => {
+  const { height } = useGetElemSizes(element)
+
+  const { top: inputTop } = useGetElemPositions(input)
+  return inputTop > height
+}
+
+export const useGetHasBottomSpace = ({
+  element,
+  input
+}: {
+  element: HTMLDivElement | null
+  input: HTMLElement | null
+}): {
+  hasBottomSpace: boolean
+  bottomSpace: number
+} => {
+  const { height } = useGetElemSizes(element)
+
+  const { bottom: inputBottom } = useGetElemPositions(input)
+
+  return {
+    hasBottomSpace: height < window.innerHeight - inputBottom,
+    bottomSpace: window.innerHeight - inputBottom
+  }
+}

package/src/hooks/useGetTooltipPosition.ts

@@ -0,0 +1,81 @@
+import { useMemo } from 'react'
+import { useGetElemPositions } from './useGetElemPositions'
+import { useGetElemSizes } from './useGetElemSizes'
+
+const GAP = 20
+const ARROW_DISTANCE = 20
+
+export const useGetTooltipPosition = (info: TTooltipInfo): TTooltipPosition => {
+  const { initialPosition, elemRef, tooltipRef, hasTriangle = true } = info
+
+  const { left, top, bottom } = useGetElemPositions(elemRef)
+  const { width: tooltipWidth, height: tooltipHeight } = useGetElemSizes(tooltipRef)
+  const { width: itemWidth } = useGetElemSizes(elemRef)
+
+  // this is calculations for tooltip top/left/bottom/right positions
+  const calculatedPosition = useMemo(() => {
+    const hasTopSpace = tooltipHeight + GAP < top
+
+    const hasBottomSpace = tooltipHeight + GAP < window.innerHeight - bottom
+
+    const hasLeftSpace = tooltipWidth + GAP < left
+    const hasRightSpace = tooltipWidth + GAP < window.innerWidth - left
+    const hasMiddleRightSpace = tooltipWidth + GAP < window.innerWidth - left - itemWidth
+
+    if (!hasBottomSpace && !hasRightSpace && initialPosition.includes('bottom-right')) {
+      return initialPosition.replace('bottom-right', 'top-left')
+    }
+    if (!hasTopSpace && initialPosition.includes('top')) {
+      return initialPosition.replace('top', 'bottom')
+    }
+    if (!hasBottomSpace && initialPosition.includes('bottom')) {
+      return initialPosition.replace('bottom', 'top')
+    }
+    if (!hasLeftSpace && initialPosition.includes('left')) {
+      return initialPosition.replace('left', 'right')
+    }
+    if (!hasRightSpace && initialPosition.includes('right')) {
+      return initialPosition.replace('right', 'left')
+    }
+    if (!hasMiddleRightSpace && initialPosition.includes('middle-right')) {
+      return initialPosition.replace('right', 'left')
+    }
+
+    return initialPosition
+  }, [tooltipHeight, tooltipWidth, bottom, initialPosition])
+
+  // this is calculations for triangle position
+  const finalPosition = useMemo(() => {
+    const hasLeftSpace = tooltipWidth < left + ARROW_DISTANCE + GAP
+    const hasRightSpace = tooltipWidth + GAP < window.innerWidth - left
+
+    // in case of middle position we don't need to change triangle position
+    if (calculatedPosition.includes('middle')) {
+      return calculatedPosition
+    }
+
+    if (calculatedPosition.includes('right') && !hasLeftSpace) {
+      return calculatedPosition.replace('right', 'left')
+    }
+    if (calculatedPosition.includes('left') && !hasRightSpace) {
+      return calculatedPosition.replace('left', 'right')
+    }
+
+    if (calculatedPosition.includes('center')) {
+      const hasLeftHalfSpace = tooltipWidth / 2 < left + ARROW_DISTANCE + GAP
+      const hasRightHalfSpace = tooltipWidth / 2 + GAP < window.innerWidth - left
+      if (!hasLeftHalfSpace) {
+        return calculatedPosition.replace('center', 'left')
+      }
+      if (!hasRightHalfSpace) {
+        return calculatedPosition.replace('center', 'right')
+      }
+      return calculatedPosition
+    }
+    return calculatedPosition
+  }, [calculatedPosition, tooltipWidth, itemWidth, left])
+  if (!hasTriangle) {
+    return calculatedPosition as TTooltipPosition
+  }
+  return finalPosition as TTooltipPosition
+}