hrm_ui_lib 1.0.0

package/src/components/Button/Button.tsx

@@ -0,0 +1,67 @@
+import React, { ReactElement } from 'react'
+import classnames from 'classnames'
+import { TButtonPropTypes } from './types'
+import { Loader } from '../../helperComponents'
+import { ICON_SIZE_MAPPING, ICON_TYPE_MAPPING, LITE_LOADER_TYPES } from './consts'
+
+export const Button = (props: TButtonPropTypes): ReactElement => {
+  const {
+    buttonText,
+    type = 'primary',
+    size = 'large',
+    className = '',
+    iconProps,
+    buttonActionType = 'button',
+    disabled,
+    isLoading,
+    formId,
+    dataId = '',
+    onClick,
+    refHandler = null,
+    children,
+    ...rest
+  } = props
+
+  const justIcon = !buttonText && !children && iconProps !== undefined
+
+  return (
+    <button
+      ref={refHandler}
+      data-id={dataId}
+      disabled={disabled}
+      type={buttonActionType}
+      className={classnames(
+        'btn',
+        `btn--${type}`,
+        `btn--${size}`,
+        {
+          'btn--icon': justIcon,
+          [`btn--icon-${iconProps?.alignment || 'left'}`]:
+            !isLoading && !justIcon && iconProps?.Component
+        },
+        className
+      )}
+      onClick={onClick}
+      form={formId}
+      {...rest}
+    >
+      {isLoading ? (
+        <Loader size={size} type={LITE_LOADER_TYPES.indexOf(type) === -1 ? 'dark' : 'lite'} />
+      ) : (
+        <>
+          {iconProps?.Component ? (
+            <iconProps.Component
+              size={ICON_SIZE_MAPPING[size]}
+              type={ICON_TYPE_MAPPING[iconProps.type || type]}
+              className="btn__icon"
+            />
+          ) : null}
+          {/* {buttonSecondaryText ? <span className="btn__text">{buttonSecondaryText}</span> : null} */}
+          {buttonText || children ? (
+            <span className="btn__text">{buttonText || children}</span>
+          ) : null}
+        </>
+      )}
+    </button>
+  )
+}

package/src/components/Button/consts.ts

@@ -0,0 +1,18 @@
+import { TSVGIconSize, TSVGIconType } from '../SVGIcons/types'
+
+export const LITE_LOADER_TYPES = ['primary', 'danger']
+
+export const ICON_SIZE_MAPPING: { [key: string]: TSVGIconSize } = {
+  large: 'small',
+  medium: 'small',
+  small: 'xsmall'
+}
+
+export const ICON_TYPE_MAPPING: { [key: string]: TSVGIconType } = {
+  primary: 'inverse',
+  secondary: 'secondary',
+  tertiary: 'primary',
+  danger: 'inverse',
+  text: 'selected',
+  link: 'selected'
+}

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -0,0 +1,24 @@
+import { ButtonHTMLAttributes, LegacyRef, PropsWithChildren, ReactElement } from 'react'
+import { TSVGIconType } from '../SVGIcons/types'
+
+export interface TButtonPropTypes
+  extends PropsWithChildren<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'>> {
+  id?: string
+  disabled?: boolean
+  buttonActionType?: 'submit' | 'button' | 'reset'
+  buttonText?: string | ReactElement
+  className?: string
+  type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'text' | 'link'
+  size?: 'small' | 'medium' | 'large'
+  isLoading?: boolean
+  iconProps?: {
+    size?: TIconSize
+    type?: TSVGIconType
+    alignment?: string
+    Component?: TSVGIconComponent
+  }
+  onClick?: (event: TClickEventType) => void
+  formId?: string
+  dataId?: string
+  refHandler?: LegacyRef<HTMLButtonElement> | undefined
+}

package/src/components/ButtonIcon/ButtonIcon.tsx

@@ -0,0 +1,39 @@
+import React, { ReactElement } from 'react'
+import classnames from 'classnames'
+import { TButtonIconPropTypes } from './types'
+import { Loader } from '../../helperComponents'
+
+export const ButtonIcon = (props: TButtonIconPropTypes): ReactElement => {
+  const {
+    size = 'medium',
+    className = '',
+    iconProps,
+    buttonActionType = 'button',
+    disabled,
+    isLoading,
+    formId,
+    dataId = '',
+    onClick,
+    refHandler = null,
+    ...rest
+  } = props
+
+  return (
+    <button
+      ref={refHandler}
+      data-id={dataId}
+      disabled={disabled}
+      type={buttonActionType}
+      className={classnames('btn-icon', `btn-icon--${size}`, className)}
+      onClick={onClick}
+      form={formId}
+      {...rest}
+    >
+      {isLoading ? (
+        <Loader size={size} type={'dark'} />
+      ) : (
+        <iconProps.Component size={size} type={disabled ? 'disabled' : 'tertiary'} />
+      )}
+    </button>
+  )
+}

package/src/components/ButtonIcon/index.ts

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

package/src/components/ButtonIcon/types.ts

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes, LegacyRef, PropsWithChildren } from 'react'
+
+export interface TButtonIconPropTypes
+  extends PropsWithChildren<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'>> {
+  id?: string
+  disabled?: boolean
+  buttonActionType?: 'submit' | 'button' | 'reset'
+  className?: string
+  size?: 'small' | 'medium' | 'large'
+  isLoading?: boolean
+  iconProps: {
+    Component: TSVGIconComponent
+  }
+  onClick?: (event: TClickEventType) => void
+  formId?: string
+  dataId?: string
+  refHandler?: LegacyRef<HTMLButtonElement> | undefined
+}

package/src/components/CardBody/CardBody.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Text } from '../Text'
+import { Image } from '../Image'
+import { Button } from '../Button'
+import { TCardBodyProps } from './types'
+import classNames from 'classnames'
+
+export const CardBody = (props: TCardBodyProps): JSX.Element => {
+  const { title, description, buttonProps, className, illustration } = props
+
+  return (
+    <div className={classNames('card-body', className)}>
+      <div className={'card-body__image'}>
+        <Image imagePath={illustration} />
+      </div>
+      <Text size={'large'} weight="bolder" className={'mt-32'}>
+        {title}
+      </Text>
+      {description ? <Text className={'mt-12'}>{description}</Text> : null}
+      {buttonProps ? (
+        <div className="body__buttons mt-32">
+          <Button className="full-width" {...(buttonProps.primary || {})} />
+          <Button type="text" className="full-width mt-24" {...buttonProps.secondary} />
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/CardBody/index.ts

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

package/src/components/CardBody/types.ts

@@ -0,0 +1,12 @@
+import { TButtonPropTypes } from '../Button/types'
+
+export interface TCardBodyProps {
+  className?: string
+  title?: string
+  description?: string
+  buttonProps?: {
+    primary?: TButtonPropTypes
+    secondary: TButtonPropTypes
+  }
+  illustration?: string
+}

package/src/components/CardSelect/CardSelect.tsx

@@ -0,0 +1,73 @@
+import React, { ReactElement } from 'react'
+import { Text } from '../Text'
+import { TCardSelectProps } from './types'
+import classNames from 'classnames'
+import { CardAdditionalInfo, CardChips, CardDescription, CardInput } from './components'
+import { CARD_SELECT_TYPES } from '../../consts'
+import { Radio } from '../Radio'
+import { Image } from '../Image'
+
+export const CardSelect = (props: TCardSelectProps): ReactElement => {
+  const {
+    type = CARD_SELECT_TYPES.cardRadio,
+    title,
+    description,
+    inputProps,
+    chips = [],
+    disabled,
+    className,
+    additionalInfo,
+    handleChange,
+    name,
+    setFieldValue,
+    value,
+    cardValue,
+    illustration,
+    icon
+  } = props
+  const selected = cardValue === value
+  const cardSelectStyle = classNames(
+    `card-select ${disabled ? 'card-select--disabled' : selected ? 'card-select--selected' : ''}`,
+    className
+  )
+  const handleCardSelectValue = (selected: number | string) => {
+    if (name && setFieldValue) {
+      setFieldValue(name, selected, { shouldValidate: true })
+    }
+    handleChange?.(selected)
+  }
+
+  const handleCardSelect = () => {
+    if (cardValue) {
+      handleCardSelectValue(cardValue)
+    }
+  }
+
+  return (
+    <div className={cardSelectStyle} onClick={handleCardSelect}>
+      {illustration ? (
+        <div className={'card-select__image mr-16'}>
+          <Image imagePath={illustration} />
+        </div>
+      ) : icon && icon.Component ? (
+        <div className={'card-select__icon mr-16'}>
+          <icon.Component {...icon} />
+        </div>
+      ) : null}
+      <div className={'card-select__content'}>
+        <div className="flexbox justify-content--between align-items--start">
+          <Text type={disabled ? 'disabled' : 'primary'} size={'medium'} weight={'bold'}>
+            <>{title}</>
+          </Text>
+          {type === CARD_SELECT_TYPES.cardRadio ? (
+            <Radio name={name} isSelected={selected} disabled={disabled} className={'ml-16'} />
+          ) : null}
+        </div>
+        {chips.length ? <CardChips chips={chips} disabled={disabled} /> : null}
+        <CardInput inputProps={inputProps} disabled={disabled} />
+        <CardDescription description={description} disabled={disabled} />
+        <CardAdditionalInfo additionalInfo={additionalInfo} disabled={disabled} />
+      </div>
+    </div>
+  )
+}

package/src/components/CardSelect/CardSelectGroup.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { TCardSelectGroupProps } from './types'
+import { CardSelect } from './CardSelect'
+import classNames from 'classnames'
+
+export const CardSelectGroup = (props: TCardSelectGroupProps): JSX.Element => {
+  const { cards, name, handleChange, value, cardsGroupType, cardsGroupDisable, className } = props
+
+  return (
+    <div className={classNames('card-select-group', className)}>
+      {cards.map(
+        (
+          {
+            type,
+            illustration,
+            icon,
+            value: cardValue,
+            title,
+            description,
+            chips,
+            inputProps,
+            additionalInfo,
+            id,
+            disabled
+          },
+          index
+        ) => (
+          <CardSelect
+            className={'card-select-group__item'}
+            name={name}
+            key={id || index}
+            type={cardsGroupType || type}
+            title={title}
+            description={description}
+            chips={chips}
+            inputProps={inputProps}
+            handleChange={handleChange}
+            additionalInfo={additionalInfo}
+            cardValue={cardValue}
+            value={value}
+            illustration={illustration}
+            icon={icon}
+            disabled={cardsGroupDisable || disabled}
+          />
+        )
+      )}
+    </div>
+  )
+}

package/src/components/CardSelect/components/CardAdditionalInfo.tsx

@@ -0,0 +1,34 @@
+import { Divider } from '../../Divider'
+import { Text } from '../../Text'
+import React, { ReactElement } from 'react'
+import { TInfoList } from '../types'
+
+interface TCardAdditionalInfo {
+  additionalInfo?: TInfoList
+  disabled?: boolean
+}
+export const CardAdditionalInfo = (props: TCardAdditionalInfo): ReactElement | null => {
+  const { additionalInfo, disabled } = props
+  return additionalInfo?.length ? (
+    <>
+      <Divider type={'primary'} isHorizontal={true} className={'mt-16 mb-16'} />
+      <div className="card-select__list">
+        {additionalInfo.map(({ key, value, id }) => {
+          return (
+            <div
+              key={id}
+              className="card-select__list__item flexbox justify-content--between mt-12"
+            >
+              <Text type={disabled ? 'disabled' : 'secondary'} size={'small'} className={'pr-16'}>
+                {key}
+              </Text>
+              <Text type={disabled ? 'disabled' : 'primary'} weight={'semibold'}>
+                {value}
+              </Text>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  ) : null
+}

package/src/components/CardSelect/components/CardChips.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react'
+import { Chips } from '../../Chips'
+import { TChipsProps } from '../../Chips/types'
+
+interface TCardChips {
+  chips: TChipsProps[]
+  disabled?: boolean
+}
+export const CardChips = (props: TCardChips): ReactElement => {
+  const { chips, disabled } = props
+  return (
+    <div>
+      {chips.map((chip) => (
+        <Chips
+          {...chip}
+          key={chip.id}
+          disabled={disabled}
+          className={'mt-8 mr-8'}
+          onClick={chip.onClick}
+          withAction={chip.withAction}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/CardSelect/components/CardDescription.tsx

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react'
+import { Text } from '../../Text'
+
+interface TCardDescription {
+  description?: string
+  disabled?: boolean
+}
+export const CardDescription = (props: TCardDescription): ReactElement | null => {
+  const { description, disabled } = props
+  return description ? (
+    <Text type={disabled ? 'disabled' : 'secondary'} className={'mt-8'}>
+      <>{description}</>
+    </Text>
+  ) : null
+}

package/src/components/CardSelect/components/CardInput.tsx

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react'
+import { InputCustomProps } from '../../Input/types'
+import { Input } from '../../Input'
+
+interface TCardInput {
+  inputProps?: InputCustomProps
+  disabled?: boolean
+}
+export const CardInput = (props: TCardInput): ReactElement | null => {
+  const { inputProps, disabled } = props
+  return inputProps ? <Input {...inputProps} className={'mt-16'} disabled={disabled} /> : null
+}

package/src/components/CardSelect/components/index.ts

@@ -0,0 +1,4 @@
+export { CardChips } from './CardChips'
+export { CardInput } from './CardInput'
+export { CardDescription } from './CardDescription'
+export { CardAdditionalInfo } from './CardAdditionalInfo'

package/src/components/CardSelect/index.ts

@@ -0,0 +1,2 @@
+export { CardSelect } from './CardSelect'
+export { CardSelectGroup } from './CardSelectGroup'

package/src/components/CardSelect/types.ts

@@ -0,0 +1,39 @@
+import { InputCustomProps } from '../Input/types'
+import { TChipsProps } from '../Chips/types'
+import { CARD_SELECT_TYPES } from '../../consts'
+export interface TCardSelectProps extends IFormCompProps {
+  id?: number | string
+  type?: CARD_SELECT_TYPES
+  title: string
+  description: string
+  chips?: TChipsProps[]
+  inputProps?: InputCustomProps
+  className?: string
+  disabled?: boolean
+  handleCardSelectValue?: (isChecked: boolean) => void
+  dataId?: string
+  additionalInfo?: TInfoList
+  selectedCard?: number
+  value?: number | string
+  handleChange?: (selected: number | string) => void
+  isSelected?: boolean
+  cardValue?: number | string
+  illustration?: string
+  icon?: TSelectIconProps
+}
+export interface TCardSelectGroupProps extends IFormCompProps {
+  cards: TCardSelectProps[]
+  handleChange?: (selected: number | string) => void
+  value: number | string
+  cardsGroupDisable?: boolean
+  cardsGroupType?: CARD_SELECT_TYPES
+  className?: string
+}
+
+export type TInfoList = TInfoListItem[]
+
+export type TInfoListItem = {
+  key: string
+  value: string
+  id?: number | string
+}

package/src/components/Cards/CardItem.tsx

@@ -0,0 +1,45 @@
+import React, { ReactElement } from 'react'
+import { TCardItemProps } from './types'
+import { Text } from '../Text'
+import classNames from 'classnames'
+import { Image } from '../Image'
+export const CardItem = (props: TCardItemProps): ReactElement => {
+  const { title, icon, subtitleProps, children, className, image, disabled } = props
+
+  return (
+    <div className={classNames('card-item', className)}>
+      <div className={'card-item__left flexbox align-items--center'}>
+        {image ? (
+          <div className={'card-item__image flexbox align-items--center justify-content--center'}>
+            <Image imagePath={image} />
+          </div>
+        ) : icon && icon.Component ? (
+          <icon.Component {...icon} />
+        ) : null}
+        <div
+          className={`card-item__content text-truncate ${
+            (image || (icon && icon?.Component)) && 'pl-12'
+          }`}
+        >
+          <Text weight={'bold'}>{title}</Text>
+          <Text type={'tertiary'} className={'flexbox align-items--center mt-2'}>
+            <>
+              {subtitleProps?.subtitle}
+              {subtitleProps?.iconProps && subtitleProps.iconProps.Component ? (
+                <subtitleProps.iconProps.Component
+                  {...icon}
+                  size={'xsmall'}
+                  type={'tertiary'}
+                  className={'ml-6'}
+                />
+              ) : null}
+            </>
+          </Text>
+        </div>
+      </div>
+      {!disabled ? (
+        <div className={'card-item__right ml-12'}>{children ? children : null}</div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/Cards/index.tsx

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

package/src/components/Cards/types.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+type TSubtitleProps = {
+  subtitle?: string
+  iconProps?: TSelectIconProps
+}
+export interface TCardItemProps {
+  title?: string
+  subtitleProps?: TSubtitleProps
+  icon?: TSelectIconProps
+  children?: ReactNode
+  className?: string
+  image?: string
+  disabled?: boolean
+}