hrm_ui_lib 1.0.0

package/src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback, useRef, useState } from 'react'
+import { FileUploadMode, TFileUploadProps } from './types'
+import { Button } from '../Button'
+import { Label } from '../../helperComponents'
+import { UploadItems } from './UploadItems'
+import { FILE_UPLOAD_ERRORS } from '../../consts'
+import {
+  checkIsAllowedFileSize,
+  getFormattedValues,
+  checkIsAllowedTypes,
+  uniqueFiles
+} from '../../utils/helpers'
+import IconEditFilled from '../SVGIcons/IconEditFilled'
+import IconEdit from '../SVGIcons/IconEdit'
+import IconAttach from '../SVGIcons/IconAttach'
+
+export const FileUpload = (props: TFileUploadProps): JSX.Element | null => {
+  const {
+    allowedTypes = 'application/pdf, .png, .jpg, .jpeg, image/jpeg, image/png, image/jpg, text/plain, image/*, .pdf, .doc, .docx, application/vnd',
+    label,
+    getFiles,
+    removeFiles,
+    handleFileClick,
+    name,
+    setFieldValue,
+    toBase64,
+    required,
+    disabled,
+    buttonText,
+    withFilePreview = true,
+    multiple = true,
+    uploadedFiles,
+    value,
+    labelAddons,
+    onError,
+    fileAllowedSize,
+    mode = FileUploadMode.attach
+  } = props
+  const files = (value as File[]) || uploadedFiles || []
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isHovered, setHoverState] = useState(false)
+
+  const onMouseEnterOrLeave = () => setHoverState(!isHovered)
+
+  const onUploadClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click()
+    }
+  }
+
+  const updateInForm = useCallback(
+    (values: File[] | FileReader[] | null) => {
+      if (name && setFieldValue) {
+        setFieldValue(name, values as TFormValue)
+      }
+    },
+    [name, setFieldValue]
+  )
+
+  const setFiles = (selectedFiles: File[]) => {
+    const allowedFilesBySize = selectedFiles.filter((file) => {
+      return !(fileAllowedSize && !checkIsAllowedFileSize(fileAllowedSize, file.size))
+    })
+    const allowedFilesByExtension = selectedFiles.filter((file) => {
+      return !(allowedTypes && !checkIsAllowedTypes(allowedTypes, file.type))
+    })
+
+    if (allowedFilesByExtension.length !== selectedFiles.length) {
+      onError && onError(FILE_UPLOAD_ERRORS.type)
+      return
+    }
+    if (allowedFilesBySize.length !== selectedFiles.length) {
+      onError && onError(FILE_UPLOAD_ERRORS.size)
+      return
+    }
+    updateInForm(toBase64 ? getFormattedValues(selectedFiles) : selectedFiles)
+
+    if (getFiles) {
+      getFiles(selectedFiles)
+    }
+  }
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const fileList = event.target?.files as FileList
+      const fileArray = multiple ? Array.from(fileList) : [fileList[0]]
+
+      if (fileArray) {
+        const updatedFiles = uniqueFiles(multiple ? [...fileArray, ...files] : fileArray)
+        setFiles(updatedFiles)
+      }
+      if (fileInputRef.current) {
+        fileInputRef.current.value = ''
+      }
+    },
+    [files, multiple]
+  )
+
+  const handleFileRemove = useCallback(
+    (file: File, index: number) => {
+      if (files) {
+        const filteredFiles = files.filter((_, i) => i !== index)
+        updateInForm(filteredFiles)
+        if (removeFiles) {
+          removeFiles(file)
+        }
+      }
+    },
+    [files, removeFiles]
+  )
+
+  return (
+    <div className="file-upload">
+      <Label text={label} required={required} disabled={disabled} labelAddons={labelAddons} />
+      <div className="file-upload__inner">
+        <input
+          name={name}
+          type="file"
+          multiple={multiple}
+          className="hide"
+          ref={fileInputRef}
+          accept={allowedTypes}
+          onChange={handleChange}
+        />
+        {mode === FileUploadMode.edit && (
+          <div
+            className="edit__icon"
+            onMouseEnter={onMouseEnterOrLeave}
+            onMouseLeave={onMouseEnterOrLeave}
+            onClick={onUploadClick}
+          >
+            {isHovered ? (
+              <IconEditFilled size="xxsmall" type="secondary" />
+            ) : (
+              <IconEdit size="xxsmall" type="secondary" />
+            )}
+          </div>
+        )}
+        {mode === FileUploadMode.attach && (
+          <Button
+            type="secondary"
+            size="medium"
+            disabled={disabled}
+            iconProps={{ Component: IconAttach }}
+            onClick={onUploadClick}
+            buttonText={buttonText}
+          />
+        )}
+
+        <UploadItems
+          handleFileClick={handleFileClick}
+          onRemove={handleFileRemove}
+          files={files}
+          withFilePreview={withFilePreview}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/FileUpload/UploadItems.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Text } from '../Text'
+import { IUploadItemPropTypes } from './types'
+import { useFormProps } from '../../hooks'
+import { openFileInNewWindow } from '../../utils/helpers'
+import { ErrorMessage } from '../../helperComponents'
+import { Button } from '../Button'
+import IconDelete from '../SVGIcons/IconDelete'
+
+export const UploadItems = (props: IUploadItemPropTypes): JSX.Element => {
+  const { files, onRemove, withFilePreview, handleFileClick } = props
+  const { errors } = useFormProps()
+  const filesErrors = errors && errors.files && errors.files.length > 0
+
+  return (
+    <>
+      {files.map((file, index) => {
+        return (
+          <div
+            className={`upload-item mt-4 ${
+              filesErrors && errors.files[index]?.message ? 'upload-item--error' : ''
+            }`}
+            key={index}
+          >
+            <div className="upload-item__inner">
+              <div className="upload-item__content mb-2">
+                <div className="upload-item__content__inner pr-8">
+                  <Text
+                    size="small"
+                    lineHeight="medium"
+                    className="upload-item__text"
+                    onClick={(e) =>
+                      withFilePreview &&
+                      openFileInNewWindow({
+                        e,
+                        file,
+                        handleFileClick
+                      })
+                    }
+                  >
+                    {file.name}
+                  </Text>
+                  {filesErrors && <ErrorMessage message={errors.files[index]?.message} />}
+                </div>
+                <Button
+                  type="tertiary"
+                  size="small"
+                  iconProps={{ Component: IconDelete }}
+                  onClick={() => {
+                    onRemove(file, index)
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </>
+  )
+}

package/src/components/FileUpload/index.ts

@@ -0,0 +1,2 @@
+export * from './FileUpload'
+export * from './types'

package/src/components/FileUpload/types.ts

@@ -0,0 +1,37 @@
+import { FILE_UPLOAD_ERRORS } from '../../consts'
+
+export interface TFileUploadProps extends IFormCompProps {
+  allowedTypes?: string
+  label?: string | JSX.Element
+  buttonText?: string | JSX.Element
+  getFiles?: (files: File[]) => void
+  handleFileClick?: (file: File) => void
+  removeFiles?: (file: File) => void
+  toBase64?: boolean
+  required?: boolean
+  disabled?: boolean
+  isFileUploaded?: boolean
+  withFilePreview?: boolean
+  uploadedFiles?: File[]
+  multiple?: boolean
+  mode?: FileUploadMode
+  labelAddons?: JSX.Element
+  onError?: (errorType: FILE_UPLOAD_ERRORS) => void
+  fileAllowedSize?: number
+}
+
+export enum FileUploadMode {
+  edit = 'edit',
+  attach = 'attach'
+}
+
+export interface IUploadItemPropTypes {
+  name?: string
+  onRemove: (file: File, index: number) => void
+  fileType?: string
+  isFileUploaded?: boolean
+  error?: boolean
+  handleFileClick?: (file: File) => void
+  withFilePreview?: boolean
+  files: File[]
+}

package/src/components/FormContainer/FormContainer.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import classnames from 'classnames'
+import { FormContext } from '../../context'
+import { FormPropTypes } from './types'
+import { Button } from '../Button'
+
+export const FormContainer = (props: FormPropTypes): JSX.Element => {
+  const {
+    children,
+    className = '',
+    shouldUnregister,
+    shouldFocusError = true,
+    mode = 'onBlur',
+    initialValues,
+    validationScheme,
+    buttonConfigs,
+    formId,
+    onSubmit
+  } = props
+
+  const {
+    handleSubmit,
+    register,
+    setValue,
+    control,
+    formState,
+    getValues,
+    watch,
+    reset,
+    clearErrors,
+    setError,
+    trigger,
+    getFieldState,
+    unregister
+  } = useForm({
+    mode: mode,
+    resolver: yupResolver(validationScheme),
+    defaultValues: initialValues,
+
+    shouldFocusError: shouldFocusError,
+    shouldUnregister: shouldUnregister
+  })
+
+  const { errors, isDirty, isSubmitted, isSubmitting, dirtyFields } = formState
+
+  const customSubmit = (data: TFormData) => {
+    if (onSubmit) {
+      onSubmit(data, formState, dirtyFields)
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(customSubmit)}
+      id={formId}
+      className={classnames('form-container', className)}
+    >
+      <FormContext.Provider
+        value={{
+          trigger,
+          register,
+          errors,
+          control,
+          setValue,
+          getValues,
+          watch,
+          reset,
+          isDirty,
+          isSubmitted,
+          isSubmitting,
+          clearErrors,
+          setError,
+          dirtyFields,
+          getFieldState,
+          unregister
+        }}
+      >
+        <>
+          {children}
+          {buttonConfigs && (
+            <div className="form-container__buttons">
+              {buttonConfigs.map((buttonConfig, index) => {
+                return <Button {...buttonConfig} key={index} />
+              })}
+            </div>
+          )}
+        </>
+      </FormContext.Provider>
+    </form>
+  )
+}

package/src/components/FormContainer/index.ts

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

package/src/components/FormContainer/types.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react'
+import { FormState } from 'react-hook-form'
+import { AnyObjectSchema } from 'yup'
+import { ValidationMode } from 'react-hook-form/dist/types/form'
+import { TButtonPropTypes } from '../Button/types'
+
+export type TDirtyFields = Partial<Readonly<{ [x: string]: unknown }>>
+
+export interface FormPropTypes {
+  className?: string
+  onSubmit?: (data: TFormData, formState: FormState<TFormData>, dirtyFields?: TDirtyFields) => void
+  children?: ReactNode
+  validationScheme: AnyObjectSchema
+  initialValues: TFormData
+  buttonConfigs?: TButtonPropTypes[]
+  shouldUnregister?: boolean
+  shouldFocusError?: boolean
+  mode?: keyof ValidationMode
+  reValidateMode?: 'onChange' | 'onSubmit' | 'onBlur' | undefined
+  formId?: string
+}

package/src/components/FormField/FormField.tsx

@@ -0,0 +1,70 @@
+import React, { ReactElement, useContext } from 'react'
+import { ErrorMessage as ReactHookFormErrorMessage } from '@hookform/error-message'
+import { ErrorMessage } from '../../helperComponents'
+import { FormContext } from '../../context'
+import { Controller } from 'react-hook-form'
+import { TFormFieldPropTypes } from './types'
+import classnames from 'classnames'
+
+export const FormField = (props: TFormFieldPropTypes): ReactElement | null => {
+  const {
+    As,
+    name,
+    className = '',
+    dataId = '',
+    hideErrorMessage = false,
+    errorMessageIcon
+  } = props
+  const { register, errors, setValue, control } = useContext(FormContext)
+
+  if (!register) {
+    return null
+  }
+
+  const registerOptions = register(name)
+
+  return (
+    <div className={classnames('form-container__field', className, name)}>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field, fieldState }) => {
+          return (
+            <>
+              {As({
+                hasError: !!fieldState.error,
+                isValid: fieldState.isTouched && fieldState.isDirty && !fieldState.invalid,
+                dataId,
+                ...registerOptions,
+                setFieldValue: (data, name, options) =>
+                  setValue(data, name, {
+                    shouldValidate: true,
+                    shouldDirty: true,
+                    shouldTouch: true,
+                    ...options
+                  }),
+                ...field
+              })}
+              {!hideErrorMessage ? (
+                <ReactHookFormErrorMessage
+                  name={name}
+                  errors={errors}
+                  render={({ message }: { message: string }) => {
+                    return (
+                      <ErrorMessage
+                        dataId={dataId}
+                        message={message || ''}
+                        className="full-width"
+                        icon={errorMessageIcon}
+                      />
+                    )
+                  }}
+                />
+              ) : null}
+            </>
+          )
+        }}
+      />
+    </div>
+  )
+}

package/src/components/FormField/index.ts

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

package/src/components/FormField/types.ts

@@ -0,0 +1,8 @@
+export interface TFormFieldPropTypes {
+  As: (props: IFormCompProps) => JSX.Element
+  name: string
+  className?: string
+  dataId?: string
+  hideErrorMessage?: boolean
+  errorMessageIcon?: string
+}

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,33 @@
+import React, { ReactElement } from 'react'
+import { HeadingPropTypes } from './types'
+import { noop } from '../../utils/helpers'
+import classNames from 'classnames'
+
+export const Heading = (props: HeadingPropTypes): ReactElement => {
+  const {
+    children,
+    className = '',
+    size = 'small',
+    lineHeight = 'large',
+    type: As = 'h1',
+    weight = 'regular',
+    onClick = noop,
+    dataId = ''
+  } = props
+
+  return (
+    <As
+      dataid={dataId}
+      onClick={onClick}
+      className={classNames(
+        'heading',
+        size && `heading-${size}`,
+        weight,
+        lineHeight && `lh-${lineHeight}`,
+        className
+      )}
+    >
+      {children}
+    </As>
+  )
+}

package/src/components/Heading/index.ts

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

package/src/components/Heading/types.ts

@@ -0,0 +1,12 @@
+import { ElementType, ReactNode } from 'react'
+
+export interface HeadingPropTypes {
+  children?: ReactNode
+  type?: ElementType
+  size?: 'xsmall' | 'small' | 'standard' | 'medium' | 'large' | 'xlarge'
+  weight?: 'regular' | 'semibold' | 'bold' | 'bolder'
+  lineHeight?: 'xsmall' | 'small' | 'medium' | 'large'
+  className?: string
+  onClick?: (event: TClickEventType) => void
+  dataId?: string
+}

package/src/components/Image/Image.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { ImagePropTypes } from './types'
+
+export const Image = (props: ImagePropTypes): JSX.Element => {
+  const {
+    name,
+    imagePath = 'static/media/src/assets/images/image-placeholder.png',
+    isBackgroundImage,
+    backgroundSize,
+    className = '',
+    isFullWidth,
+    isFullHeight,
+    ratio
+  } = props
+
+  return isBackgroundImage ? (
+    <div
+      className={`image image--bg ${className}`}
+      style={{
+        backgroundImage: `${imagePath ? `url(${imagePath})` : ''}`,
+        backgroundSize: backgroundSize,
+        aspectRatio: ratio
+      }}
+    />
+  ) : (
+    <img
+      className={`image ${className}`}
+      src={imagePath}
+      alt={name}
+      style={{
+        aspectRatio: ratio,
+        width: isFullWidth ? '100%' : '',
+        height: isFullHeight ? '100%' : ''
+      }}
+    />
+  )
+}

package/src/components/Image/index.ts

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

package/src/components/Image/types.ts

@@ -0,0 +1,10 @@
+export interface ImagePropTypes {
+  name?: string
+  imagePath?: string
+  className?: string
+  isBackgroundImage?: boolean
+  backgroundSize?: 'cover' | 'contain'
+  isFullWidth?: boolean
+  isFullHeight?: boolean
+  ratio?: '1/1' | '2/1' | '3/1' | '4/3' | '16/9' | '1/1.618' | '2/3'
+}