hrm_ui_lib 1.0.0

package/src/components/SideSheet/types.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react'
+import { TButtonPropTypes } from '../Button/types'
+
+export type TSideSheet = 'small' | 'large'
+
+export type TCheckboxInfo = {
+  label: string
+  isChecked: boolean
+}
+
+export interface TSideSheetPropTypes {
+  closeOnOutsideClick?: boolean
+  shouldRemoveCallback?: boolean
+  size?: TSideSheet
+  isLoading?: boolean
+  isOpen: boolean
+  onClose: (e?: TClickEventType | MouseEvent) => void
+  onSubmit?: (isCheckboxSelected: boolean) => void
+  position?: 'right' | 'left'
+  title?: string
+  footerButtons?: {
+    cancel: TButtonPropTypes
+    confirm: TButtonPropTypes
+    extraButton?: TButtonPropTypes
+  }
+  children?: ReactNode
+  className?: string
+  headerButtons?: {
+    close?: TButtonPropTypes
+    pin?: TButtonPropTypes
+    back?: TButtonPropTypes
+  }
+  scrollToTopOptions?: {
+    onPixel: number
+  }
+  checkboxInfo?: TCheckboxInfo
+}

package/src/components/Snackbar/Snackbar.tsx

@@ -0,0 +1,75 @@
+import React, { ReactElement } from 'react'
+import { ToastContainer, toast, Slide } from 'react-toastify'
+import type { ToastItem } from 'react-toastify'
+import { Text } from '../Text'
+import { Button } from '../Button'
+import { TSnackbarProps, TToastProps } from './types'
+import { DEFAULT_DURATION, ICONS_MAPPING, TYPE_MAPPING } from './consts'
+import { IconDynamicComponent } from '../../helperComponents'
+import 'react-toastify/dist/ReactToastify.css'
+
+const CustomToast = ({ actionProps, toastId, type = 'information', text }: TToastProps) => {
+  return (
+    <div data-id={`${type}-toast-message`} className="snackbar" key={toastId}>
+      <div className="snackbar__content">
+        <IconDynamicComponent
+          componentName={ICONS_MAPPING[type]}
+          type={TYPE_MAPPING[type]}
+          size="medium"
+        />
+        <Text
+          className="snackbar__text pl-16 pr-8"
+          type="primary"
+          size="standard"
+          weight="regular"
+          lineHeight="large"
+        >
+          {text}
+        </Text>
+      </div>
+
+      {actionProps ? (
+        <Button
+          size="small"
+          type="tertiary"
+          {...actionProps}
+          onClick={(e) => {
+            toast.dismiss(toastId)
+            actionProps?.onClick?.(e)
+          }}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+export const notify = (toastProps: TToastProps): void => {
+  const { toastId, closeSnackbar, actionProps, duration = DEFAULT_DURATION } = toastProps
+  toast(() => CustomToast(toastProps), {
+    bodyClassName: '__body',
+    className: '_container',
+    toastId,
+    autoClose: actionProps ? false : duration
+  })
+  toast.onChange((payload: ToastItem) => {
+    if (payload.status === 'removed') {
+      closeSnackbar?.(payload.id)
+    }
+  })
+}
+
+export const Snackbar = (props: TSnackbarProps): ReactElement => {
+  const { duration = 1000, position = 'bottom-center' } = props
+
+  return (
+    <ToastContainer
+      className={'snackbar-wrapper'}
+      theme="light"
+      hideProgressBar
+      transition={Slide}
+      position={position}
+      autoClose={duration}
+      closeButton={() => null}
+    />
+  )
+}

package/src/components/Snackbar/consts.ts

@@ -0,0 +1,17 @@
+import { TSVGIconType } from '../SVGIcons/types'
+
+export const TYPE_MAPPING: { [key: string]: TSVGIconType } = {
+  warning: 'warning',
+  success: 'success',
+  error: 'danger',
+  information: 'information'
+}
+
+export const ICONS_MAPPING: { [key: string]: string } = {
+  warning: 'warningFilled',
+  success: 'checkmarkCircleFilled',
+  error: 'errorCircleFilled',
+  information: 'infoFilled'
+}
+
+export const DEFAULT_DURATION = 6000

package/src/components/Snackbar/index.ts

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

package/src/components/Snackbar/types.ts

@@ -0,0 +1,22 @@
+import { TButtonPropTypes } from '../Button/types'
+
+export type TSnackbarTypes = 'success' | 'error' | 'warning' | 'information'
+
+export interface TToastProps {
+  duration?: number
+  type?: TSnackbarTypes
+  toastId: number | string
+  closeSnackbar?: (id: number | string) => void
+  text: string | JSX.Element
+  actionProps?: TButtonPropTypes
+}
+export interface TSnackbarProps extends IFormCompProps {
+  duration?: number
+  position:
+    | 'top-center'
+    | 'top-right'
+    | 'top-left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'bottom-left'
+}

package/src/components/Status/Status.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement } from 'react'
+import { Text } from '../Text'
+import { TStatusProps } from './types'
+import classNames from 'classnames'
+
+enum StatusTextSize {
+  large = 'standard',
+  medium = 'small',
+  small = 'xsmall'
+}
+
+export const Status = (props: TStatusProps): ReactElement => {
+  const {
+    type = 'primary',
+    size = 'large',
+    text = '',
+    children,
+    className = '',
+    leftIconProps,
+    rightIconProps,
+    withCircle = true,
+    dataId
+  } = props
+
+  return (
+    <div className={classNames(`status status--${size}`, className)}>
+      {leftIconProps?.Component ? (
+        <leftIconProps.Component size="xsmall" type={type} className="mr-6" {...leftIconProps} />
+      ) : null}
+      {withCircle && !leftIconProps?.Component ? (
+        <span
+          className={classNames('status__circle', 'mr-8', {
+            [`status__circle--${type}`]: true
+          })}
+        />
+      ) : null}
+      <div className="status__label">
+        <Text
+          dataId={`${dataId}-text`}
+          type={!withCircle ? type : 'primary'}
+          size={StatusTextSize[size]}
+        >
+          {text}
+        </Text>
+        {children}
+      </div>
+      {rightIconProps}
+    </div>
+  )
+}

package/src/components/Status/index.ts

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

package/src/components/Status/types.ts

@@ -0,0 +1,24 @@
+import { ReactElement, ReactNode } from 'react'
+import { ISVGIconProps } from '../SVGIcons/types'
+
+export type TStatusTypes =
+  | 'primary'
+  | 'disabled'
+  | 'brand'
+  | 'danger'
+  | 'warning'
+  | 'success'
+  | 'information'
+  | 'discovery'
+
+export interface TStatusProps extends IFormCompProps {
+  text?: string
+  children?: ReactNode
+  leftIconProps?: ISVGIconProps
+  rightIconProps?: ReactElement
+  type?: TStatusTypes
+  size?: 'large' | 'medium' | 'small'
+  className?: string
+  withCircle?: boolean
+  dataId?: string
+}

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react'
+import { TStepperProps } from './types'
+
+export const Stepper = (props: TStepperProps): JSX.Element => {
+  const { list, activeStep = 0, setActiveStep } = props
+
+  const [activeStepIndex, setActiveStepIndex] = useState(activeStep)
+
+  const decreaseStepIndex = () => {
+    let newIndex = activeStepIndex
+    --newIndex
+    setActiveStepIndex(newIndex)
+    if (setActiveStep) {
+      setActiveStep(newIndex)
+    }
+  }
+
+  const increaseStepIndex = () => {
+    let newIndex = activeStepIndex
+    ++newIndex
+    setActiveStepIndex(newIndex)
+    if (setActiveStep) {
+      setActiveStep(newIndex)
+    }
+  }
+
+  useEffect(() => {
+    if (activeStep && activeStep !== activeStepIndex) {
+      setActiveStepIndex(activeStep)
+    }
+  }, [activeStep, activeStepIndex])
+
+  const Content = list[activeStepIndex]
+
+  return (
+    <Content
+      activeStepIndex={activeStepIndex}
+      isNextDisabled={activeStepIndex === list.length - 1}
+      isPrevDisabled={activeStepIndex === 0}
+      prevHandler={decreaseStepIndex}
+      nextHandler={increaseStepIndex}
+      stepCount={list.length}
+    />
+  )
+}

package/src/components/Stepper/index.ts

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

package/src/components/Stepper/types.ts

@@ -0,0 +1,15 @@
+export interface TStepperContentWrapperProps {
+  isPrevDisabled: boolean
+  isNextDisabled: boolean
+  prevHandler: () => void
+  nextHandler: () => void
+  activeStepIndex: number
+  stepCount: number
+}
+declare type TComp = (props: TStepperContentWrapperProps) => JSX.Element
+
+export interface TStepperProps {
+  list: TComp[]
+  activeStep?: number
+  setActiveStep?: (step: number) => void
+}

package/src/components/Switcher/Switcher.tsx

@@ -0,0 +1,75 @@
+import React, { forwardRef } from 'react'
+import classnames from 'classnames'
+import { Label } from '../../helperComponents'
+import { TSwitcherProps } from './types'
+import IconCheckmark from '../SVGIcons/IconCheckmark'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Switcher = forwardRef((props: TSwitcherProps, ref): JSX.Element => {
+  const {
+    onClick,
+    id = '',
+    name,
+    value,
+    disabled,
+    label,
+    inlineType = false,
+    dataId,
+    size = 'large',
+    setFieldValue,
+    selectedValue,
+    className = '',
+    labelAddons
+  } = props
+  const isChecked = !!value || !!selectedValue
+
+  const changeHandler = () => {
+    if (name && setFieldValue) {
+      setFieldValue(name, !isChecked)
+    }
+
+    if (onClick) {
+      onClick(!isChecked)
+    }
+  }
+
+  return (
+    <div className={classnames('switcher', { 'switcher--inline': inlineType })}>
+      {label && (
+        <Label
+          text={label}
+          disabled={disabled}
+          labelAddons={labelAddons}
+          size={inlineType ? 'standard' : size}
+          className="switcher__label"
+        />
+      )}
+      <label
+        id={id}
+        className={classnames(
+          'controller',
+          'controller--switch',
+          `controller--switch-${size}`,
+          className,
+          { 'controller--disabled': disabled }
+        )}
+      >
+        <input
+          data-id={dataId}
+          type="checkbox"
+          tabIndex={0}
+          onChange={changeHandler}
+          checked={isChecked}
+          disabled={disabled}
+        />
+        <span className="controller__icon">
+          <span className="controller__icon__inner">
+            <IconCheckmark size="xsmall" className="controller__mark" />
+          </span>
+        </span>
+      </label>
+    </div>
+  )
+})
+
+Switcher.displayName = 'Switcher'

package/src/components/Switcher/index.ts

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

package/src/components/Switcher/types.ts

@@ -0,0 +1,11 @@
+export interface TSwitcherProps extends IFormCompProps {
+  onClick?: (isChecked: boolean) => void
+  className?: string
+  disabled?: boolean
+  selectedValue?: boolean
+  size?: 'large' | 'small'
+  inlineType?: boolean
+  id?: string
+  label?: string
+  labelAddons?: JSX.Element
+}

package/src/components/Tab/Tab.tsx

@@ -0,0 +1,29 @@
+import React, { ReactElement } from 'react'
+import { TTabProps } from './types'
+import { TabItem } from './TabItem'
+import classNames from 'classnames'
+
+export const Tab = (props: TTabProps): ReactElement => {
+  const { selectedValue, tabItems, onSelect, size, className, type = 'primary', ...rest } = props
+
+  return (
+    <div className={classNames('tabs-container', `tabs-container--${type}`, className)}>
+      {tabItems.map((tabInfo) => {
+        return (
+          <TabItem
+            size={type === 'secondary' ? 'medium' : size}
+            label={tabInfo.label}
+            badgeProps={tabInfo.badgeProps}
+            onClick={() => onSelect(tabInfo.value)}
+            key={tabInfo.value}
+            val={tabInfo.value}
+            isSelected={selectedValue === tabInfo.value}
+            dataId={tabInfo?.dataId || ''}
+            disabled={tabInfo.disabled}
+            {...rest}
+          />
+        )
+      })}
+    </div>
+  )
+}

package/src/components/Tab/TabItem.tsx

@@ -0,0 +1,61 @@
+import React, { MouseEvent } from 'react'
+import { Badge } from '../Badge'
+import { noop } from '../../utils/helpers'
+import { TTabItemProps } from './types'
+import classNames from 'classnames'
+
+export const TabItem = (props: TTabItemProps): JSX.Element | null => {
+  const {
+    size = 'large',
+    iconProps,
+    badgeProps,
+    label,
+    className = '',
+    disabled = false,
+    isSelected,
+    rightIconProps,
+    val,
+    onClick,
+    dataId
+  } = props
+
+  return (
+    <div
+      onClick={disabled ? noop : onClick}
+      className={classNames(
+        'tab',
+        { [`tab--${size}`]: size },
+        { 'tab--disabled': disabled },
+        { 'tab--selected': isSelected },
+        className
+      )}
+    >
+      {iconProps?.Component ? (
+        <iconProps.Component
+          className="tab__icon mr-8"
+          size={`${size == 'small' ? 'xsmall' : 'small'}`}
+          {...iconProps}
+        />
+      ) : null}
+      <span className="tab__label" data-id={dataId}>
+        {label}
+      </span>
+      {rightIconProps?.Component ? (
+        <rightIconProps.Component
+          onClick={(e: MouseEvent<unknown>) => {
+            if (rightIconProps?.action) {
+              e.stopPropagation()
+              rightIconProps?.action(val)
+            }
+          }}
+          className="tab__icon ml-8"
+          size={`${size == 'small' ? 'xsmall' : 'small'}`}
+          {...rightIconProps}
+        />
+      ) : null}
+      {badgeProps?.text ? (
+        <Badge className="tab__badge ml-8" size="small" type="secondary" {...badgeProps} />
+      ) : null}
+    </div>
+  )
+}

package/src/components/Tab/index.ts

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

package/src/components/Tab/types.ts

@@ -0,0 +1,51 @@
+import { TBadgeProps } from '../Badge/types'
+
+export type TTabItem = {
+  value: number | string
+  label: string | JSX.Element
+  dataId?: string
+  disabled?: boolean
+  badgeProps?: TBadgeProps
+  iconProps?: {
+    alignment?: string
+    Component?: TSVGIconComponent
+  }
+  rightIconProps?: {
+    name?: string
+    alignment?: string
+    action?: (value: string | number) => void
+    Component?: TSVGIconComponent
+  }
+}
+export interface TTabProps extends IFormCompProps {
+  tabItems: TTabItem[]
+  type?: 'primary' | 'secondary'
+  size?: 'large' | 'medium' | 'small'
+  className?: string
+  disabled?: boolean
+  selectedValue: number | string
+  onSelect: (value: string | number) => void
+}
+
+export type TTabItemProps = {
+  dataId?: string
+  label?: string | JSX.Element
+  size?: 'large' | 'medium' | 'small'
+  className?: string
+  iconProps?: {
+    name?: string
+    alignment?: string
+    Component?: TSVGIconComponent
+  }
+  rightIconProps?: {
+    name?: string
+    alignment?: string
+    action?: (value: string | number) => void
+    Component?: TSVGIconComponent
+  }
+  badgeProps?: TBadgeProps
+  val: string | number
+  disabled?: boolean
+  isSelected: boolean
+  onClick: () => void
+}

package/src/components/Table/Header.tsx

@@ -0,0 +1,86 @@
+import React, { ReactElement } from 'react'
+import { HeaderGroup, CellValue } from 'react-table'
+import classNames from 'classnames'
+import { calcColumnWidth, CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID } from './utils'
+import { Text } from '../Text'
+import IconArrowDown from '../SVGIcons/IconArrowDown'
+import IconArrowUp from '../SVGIcons/IconArrowUp'
+
+type Props = {
+  fixedHeader?: boolean
+  withSelect: boolean
+  tableWidth: number
+  headerGroup: HeaderGroup
+}
+
+export function Header({
+  headerGroup,
+  tableWidth,
+  withSelect,
+  fixedHeader = false
+}: Props): ReactElement {
+  return (
+    <tr
+      {...headerGroup.getHeaderGroupProps()}
+      className={classNames({ fixed_header: fixedHeader })}
+    >
+      {headerGroup.headers.map(
+        (
+          {
+            id,
+            minWidth,
+            maxWidth,
+            width,
+            widthInPercent,
+            getHeaderProps,
+            fixed,
+            columnProps,
+            render,
+            isSorted,
+            isSortedDesc,
+            getSortByToggleProps
+          }: CellValue,
+          i: number,
+          arr: CellValue[]
+        ) => {
+          const isSelection = id === CHECKBOX_HEADER_ID
+
+          const style = {
+            width: isSelection
+              ? CHECKBOX_DEFAULT_WIDTH
+              : calcColumnWidth(widthInPercent, tableWidth),
+            left: !isSelection && withSelect && fixed === 'left' ? CHECKBOX_DEFAULT_WIDTH : 0,
+            ...(!isSelection && minWidth ? { minWidth } : {}),
+            ...(!isSelection && maxWidth ? { maxWidth } : {}),
+            ...(!isSelection && width ? { width } : {})
+          }
+
+          return (
+            <th
+              key={i}
+              {...getHeaderProps(columnProps?.sortable ? getSortByToggleProps() : undefined)}
+              className={classNames({
+                fixed_column_left: fixed === 'left',
+                fixed_column_right: fixed === 'right',
+                fixed_checkbox: isSelection && arr[i + 1]?.fixed === 'left',
+                pointer: columnProps?.sortable
+              })}
+              style={style}
+            >
+              <div className="flexbox align-items--center">
+                <Text weight="bold" className="text-truncate">
+                  {render('Header')}
+                </Text>
+                {isSorted && isSortedDesc && <IconArrowDown size="xsmall" className="ml-4" />}
+                {isSorted && !isSortedDesc && <IconArrowUp size="xsmall" className="ml-4" />}
+                {!isSorted && columnProps?.sortable && (
+                  <IconArrowDown size="xsmall" className="ml-4 unsorted__icon" />
+                )}
+              </div>
+            </th>
+          )
+        }
+      )}
+    </tr>
+  )
+}

package/src/components/Table/IndeterminateCheckbox.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { ForwardedRef, forwardRef, useEffect, useRef } from 'react'
+import { Checkbox } from '../Checkbox'
+
+type IndeterminateCheckboxProps = {
+  indeterminate: boolean
+  checked: boolean
+  onChange: (e: { target: { checked: boolean } }) => void
+}
+
+export const IndeterminateCheckbox = forwardRef(
+  (
+    { indeterminate, checked, onChange }: IndeterminateCheckboxProps,
+    ref: ForwardedRef<HTMLInputElement>
+  ) => {
+    const defaultRef = useRef()
+    const resolvedRef: any = ref || defaultRef
+
+    useEffect(() => {
+      resolvedRef.current.indeterminate = indeterminate
+    }, [resolvedRef, indeterminate])
+
+    const handleChange = (v: boolean) => {
+      onChange({ target: { checked: v } })
+    }
+
+    return <Checkbox value={checked} onClick={handleChange} ref={resolvedRef} />
+  }
+)
+
+IndeterminateCheckbox.displayName = 'IndeterminateCheckbox'