hrm_ui_lib 1.0.0

package/src/stories/Status.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Popover, Status as _Status, Text } from '../index'
+import IconPerson from '../components/SVGIcons/IconPerson'
+import IconInfo from '../components/SVGIcons/IconInfo'
+import { StoryFn } from '@storybook/react'
+import { TStatusProps } from '../components/Status/types'
+
+export default {
+  title: 'Status',
+  component: _Status,
+  argTypes: {
+    type: {
+      options: [
+        'primary',
+        'disabled',
+        'brand',
+        'danger',
+        'warning',
+        'success',
+        'information',
+        'discovery'
+      ],
+      control: { type: 'radio' }
+    },
+    size: {
+      options: ['large', 'medium', 'small'],
+      control: { type: 'radio' }
+    }
+  }
+}
+
+const Template: StoryFn<TStatusProps> = (args) => {
+  return (
+    <>
+      <_Status {...args} type={'danger'}>
+        <Text type={'secondary'} size={'small'}>
+          Status subtext
+        </Text>
+      </_Status>
+      <_Status {...args} type={'information'}>
+        <Text type={'information'} size={'small'}>
+          Status subtext
+        </Text>
+      </_Status>
+    </>
+  )
+}
+
+export const Status = Template.bind({})
+
+Status.args = {
+  text: 'Status text',
+  type: 'primary',
+  size: 'large',
+  withCircle: true,
+  leftIconProps: {
+    Component: IconPerson
+  },
+  rightIconProps: (
+    <Popover
+      linkAddons={{ url: 'link', beforeLink: 'text before link' }}
+      id="beneficiary-tooltip"
+      text={'data'}
+      position="top-center"
+    >
+      <div id="beneficiary-tooltip">
+        <IconInfo type="information" size="xsmall" className={'ml-4 pointer'} />
+      </div>
+    </Popover>
+  )
+}

package/src/stories/Stepper.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Stepper as _Stepper } from '../index'
+
+export default {
+  title: 'Stepper',
+  component: _Stepper
+}
+
+const COMP1 = () => {
+  return <div>STEP1</div>
+}
+
+const COMP2 = () => {
+  return <div>STEP2</div>
+}
+const COMP3 = () => {
+  return <div>STEP3</div>
+}
+const COMP4 = () => {
+  return <div>STEP4</div>
+}
+
+const LIST = [COMP1, COMP2, COMP3, COMP4]
+
+const Template = () => {
+  return <_Stepper list={LIST} />
+}
+export const Stepper = Template.bind({})

package/src/stories/Switcher.stories.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { Switcher as _Switcher } from '../index'
+import IconInfo from '../components/SVGIcons/IconInfo'
+import { StoryFn } from '@storybook/react'
+import { TSwitcherProps } from '../components/Switcher/types'
+
+export default {
+  title: 'Switcher',
+  component: _Switcher,
+  argTypes: {
+    size: {
+      options: ['large', 'small'],
+      control: { type: 'radio' }
+    }
+  }
+}
+const ID = 'am_custom_switcher'
+
+const Template: StoryFn<TSwitcherProps> = (args) => {
+  const [isChecked, setIsChecked] = useState(false)
+  return <_Switcher {...args} selectedValue={isChecked} onClick={setIsChecked} id={ID} />
+}
+
+export const Switcher = Template.bind({})
+
+Switcher.args = {
+  size: 'small',
+  inlineType: false,
+  disabled: false,
+  label: 'label',
+  labelAddons: <IconInfo size={'xsmall'} type={'information'} className={'ml-4'} />
+}

package/src/stories/Tab.stories.tsx

@@ -0,0 +1,77 @@
+import React, { ReactElement, useState } from 'react'
+import { Tab as _Tab } from '../index'
+import IconDismissCircle from '../components/SVGIcons/IconDismissCircle'
+import { StoryFn } from '@storybook/react'
+import { TTabProps } from '../components/Tab/types'
+import IconHome from '../components/SVGIcons/IconHome'
+import IconApple from '../components/SVGIcons/IconApple'
+
+export default {
+  title: 'Tab',
+  component: _Tab,
+  argTypes: {
+    type: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' }
+    },
+    size: {
+      options: ['large', 'medium', 'small'],
+      control: { type: 'radio' }
+    }
+  }
+}
+
+const Template: StoryFn<TTabProps> = (args) => {
+  const [selectedTab, onTabSelect] = useState(args.selectedValue)
+  return <_Tab {...args} selectedValue={selectedTab} onSelect={onTabSelect} />
+}
+
+export const Tab = Template.bind({})
+
+// @ts-ignore
+Tab.args = {
+  type: 'primary',
+  size: 'large',
+  tabItems: [
+    {
+      label: 'Prompt text 1',
+      value: 1,
+      disabled: false,
+      iconProps: {
+        Component: IconHome
+      },
+      rightIconProps: {
+        Component: IconDismissCircle,
+        action: (e: string | number) => {
+          // eslint-disable-next-line no-console
+          console.log(e, 'e')
+        }
+      },
+      badgeProps: {
+        text: '9',
+        type: 'primary'
+      }
+    },
+    {
+      label: 'Prompt text 2Prompt text 2',
+      value: 2,
+      iconProps: {
+        Component: IconApple
+      },
+      rightIconProps: {
+        Component: IconDismissCircle,
+        action: (e: string | number) => {
+          // eslint-disable-next-line no-console
+          console.log(e, 'e')
+        }
+      }
+    },
+    {
+      label: 'Prompt text 3',
+      value: 3,
+      iconProps: {
+        Component: IconApple
+      }
+    }
+  ]
+}

package/src/stories/Table.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Table as _Table } from '../index'
+import { TColumn, TTableProps, TTableState } from '../components/Table/types'
+import { StoryFn } from '@storybook/react'
+
+const data: any[] = [
+  {
+    user: 'Luke Skywalker',
+    age: 21,
+    id: 'fffffffsdf',
+    visits: [7, 8, 9],
+    progress: 'fdfsdfsdfsd',
+    status: 'Active'
+  },
+  ...Array(13).fill({
+    user: 'John Doe',
+    age: 30,
+    id: 'dsfsdf',
+    visits: [4, 5, 6],
+    progress: 'divv',
+    status: 'Active'
+  }),
+  {
+    user: 'John Doe',
+    age: 30,
+    id: 'dsfsdf',
+    visits: [4, 5, 6],
+    progress: 'divv',
+    status: 'Active'
+  },
+  {
+    user: 'Bruce wayne',
+    id: 'fffffffeeeee',
+    age: 29,
+    visits: [1, 2, 3],
+    progress: 'diff',
+    status: 'Active'
+  }
+]
+
+const Template: StoryFn<TTableProps> = (args) => {
+  const columns: TColumn[] = [
+    {
+      Header: 'User',
+      accessor: 'user',
+      fixed: 'left',
+      widthInPercent: 30,
+      width: 100
+    },
+    {
+      Header: 'Status',
+      accessor: 'status',
+      widthInPercent: 20
+    },
+    {
+      accessor: 'age',
+      Header: 'Age',
+      widthInPercent: 20,
+      minWidth: 100,
+      columnProps: {
+        sortable: true
+      }
+    },
+    {
+      Header: 'Profile Progress',
+      accessor: 'progress',
+      widthInPercent: 20
+    },
+    {
+      Header: 'Visits',
+      widthInPercent: 10,
+      accessor: 'visits',
+      fixed: 'right'
+    }
+  ]
+
+  const handleChange = (state: TTableState) => {
+    console.log(state)
+  }
+
+  return <_Table {...args} data={data} onChange={handleChange} columns={columns} />
+}
+
+export default {
+  title: 'Table',
+  component: _Table
+}
+
+export const Table = Template.bind({})
+
+Table.args = {
+  fixedHeader: { y: 500 },
+  withSelect: true,
+  data: [],
+  columns: []
+}

package/src/stories/Text.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Text as _Text } from '../index'
+import { StoryFn } from '@storybook/react'
+import { TextPropTypes } from '../components/Text/types'
+
+export default {
+  title: 'Text',
+  component: _Text,
+  argTypes: {
+    type: {
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'disabled',
+        'inverse',
+        'selected',
+        'brand',
+        'danger',
+        'warning',
+        'success',
+        'information',
+        'discovery'
+      ],
+      control: { type: 'radio' }
+    },
+    size: {
+      options: ['xxsmall', 'xsmall', 'small', 'standard', 'medium', 'large'],
+      control: { type: 'radio' }
+    },
+    as: {
+      options: ['p', 'span', 'div', 'h1'],
+      control: { type: 'radio' }
+    },
+    lineHeight: {
+      options: ['xsmall', 'small', 'medium', 'large'],
+      control: { type: 'radio' }
+    },
+    weight: {
+      options: ['regular', 'semibold', 'bold', 'bolder'],
+      control: { type: 'radio' }
+    }
+  }
+}
+
+const Template: StoryFn<TextPropTypes & { text: string }> = (args) => {
+  return (
+    <div style={{ padding: '20px', backgroundColor: `${args.type == 'inverse' ? '#919191' : ''}` }}>
+      <_Text {...args}>{args.text}</_Text>
+    </div>
+  )
+}
+
+export const Text = Template.bind({})
+Text.args = {
+  type: 'primary',
+  as: 'p',
+  size: 'standard',
+  lineHeight: 'large',
+  weight: 'regular',
+  text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
+}

package/src/stories/Textarea.stories.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { Textarea as _Textarea } from '../index'
+import IconInfo from '../components/SVGIcons/IconInfo'
+import { StoryFn } from '@storybook/react'
+import { TTextAreaTypeProps } from '../components/Textarea/types'
+
+type TChangeEventType = React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
+
+export default {
+  title: 'Textarea',
+  component: _Textarea
+}
+
+const Template: StoryFn<TTextAreaTypeProps> = (args) => {
+  const [value, setValue] = useState('')
+  const changeHandler = (e: TChangeEventType) => {
+    setValue(e.target.value)
+  }
+  return (
+    <div style={{ maxWidth: 300 }}>
+      <_Textarea {...args} currentValue={value} onChange={changeHandler} />
+    </div>
+  )
+}
+export const Textarea = Template.bind({})
+// @ts-ignore
+Textarea.args = {
+  label: 'Label',
+  disabled: false,
+  required: false,
+  placeHolder: 'Enter text',
+  helperText: 'This is your helper text',
+  successMessage: 'Success message',
+  error: 'Error message',
+  maxCount: 240,
+  labelAddons: <IconInfo size={'xsmall'} type={'information'} className={'ml-4'} />
+}

package/src/stories/Tooltip.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Tooltip as _Tooltip } from '../index'
+import { StoryFn } from '@storybook/react'
+import { TTooltipProps } from '../components/Tooltip/types'
+
+export default {
+  title: 'Tooltip',
+  component: _Tooltip,
+  argTypes: {
+    position: {
+      options: [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-left',
+        'bottom-center',
+        'bottom-right',
+        'middle-left',
+        'middle-right'
+      ],
+      control: { type: 'radio' }
+    },
+    size: {
+      options: ['large', 'small'],
+      control: { type: 'radio' }
+    }
+  }
+}
+
+const Template: StoryFn<TTooltipProps> = (args) => {
+  // const [elemRef, setelemRef] = useState<HTMLElement | null>(null)
+  return (
+    <div
+      style={{
+        backgroundColor: 'grey',
+        width: 100,
+        height: 100,
+        position: 'absolute',
+        top: 200,
+        left: 400
+      }}
+    >
+      <_Tooltip
+        {...args}
+        id="ooooo"
+        timer={1000}
+        // position="bottom-left"
+      />
+      <div id="ooooo">Hover on me</div>
+    </div>
+  )
+}
+
+export const Tooltip = Template.bind({})
+
+Tooltip.args = {
+  text: 'Prompt text Prompt text Prompt text Prompt text Prompt text Prompt text Prompt text Prompt text Prompt text Prompt text Prompt text Prompt text',
+  // position: 'top-right',
+  size: 'large'
+}

package/src/types.d.ts

@@ -0,0 +1,192 @@
+declare type TIconSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
+
+declare type TColor =
+  | 'borderGray'
+  | 'labelGray'
+  | 'justWhite'
+  | 'textBlack'
+  | 'dropdownGray'
+  | 'inputWhite'
+  | 'inputBorderGray'
+  | 'inputBorderActive'
+  | 'inputBorderError'
+  | 'buttonGreen'
+  | 'secButtonBorderGray'
+  | 'iconGray'
+  | 'footerTextGray'
+  | 'footerUnderlineGray'
+  | 'darkGray'
+
+declare type CallbackFnType = () => void
+
+declare type TIconSizes = {
+  [size in TIconSize]: string
+}
+
+interface TCustomIcons {
+  [iconName: string]: () => string
+}
+
+declare type TCustomColors = {
+  [color: string]: string
+}
+
+interface HTMLInputEvent extends Event {
+  target: HTMLInputElement & EventTarget
+}
+
+declare type TFormData = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any
+}
+
+interface StringEventTarget extends EventTarget {
+  text: string
+}
+interface InputEvent extends EventTarget {
+  target: {
+    value: string
+    className?: string
+  }
+}
+interface MouseEvent extends EventTarget {
+  target: TextEventTarget | StringEventTarget
+}
+
+type FieldError = {
+  message: string
+}
+
+declare type FieldErrors = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined
+}
+
+interface RefObject<T> {
+  readonly current: T | null
+}
+
+declare type TSetValue = (name: string, value: unknown, config?: { [key: string]: unknown }) => void
+
+interface FileEventTarget extends EventTarget {
+  files: FileList
+}
+
+declare type TTextAreaEventType = ChangeEventHandler<HTMLTextAreaElement>
+
+declare type TCreateErrorFieldParams = {
+  errorMessage: string | undefined
+  name: string
+  errors: FieldErrors | undefined
+}
+
+declare type TImageMimeTypes =
+  | 'image/jpeg'
+  | 'image/jpg'
+  | 'image/png'
+  | 'image/heic'
+  | 'image/heif'
+  | 'application/pdf'
+
+declare type TItemValue = string | number | null
+declare type TSelectedValue = {
+  value: TItemValue
+  label: TItemLabel
+  optionLeftIcon?: TSelectIconProps
+}
+declare type TItemLabel = string | number
+
+declare type TClickHandler = (e: TClickEventType) => void
+
+declare type TSVGIconComponent = (props: ISVGIconProps) => ReactElement
+
+declare type TSelectIconProps = {
+  type?: TIconTypes
+  size?: TIconSize
+  className?: string
+  onClick?: TClickHandler
+  Component?: TSVGIconComponent
+}
+declare type TSelectOption = {
+  value: TItemValue
+  label: TItemLabel
+  meta?: string
+  disabled?: boolean
+  children?: TSelectOption[]
+  dataId?: string
+  optionLeftIcon?: TSelectIconProps
+}
+
+declare type TSelectOptions = TSelectOption[]
+
+declare type TSelectGroupOption = {
+  title: string
+  dataId?: string
+  data: TSelectOptions
+}
+
+declare type TSelectGroupOptions = TSelectGroupOption[]
+
+declare type TRangePickerValues = [Date | null, Date | null]
+
+declare type TClickEventType = React.MouseEvent<HTMLElement>
+declare type TChangeEventType =
+  | React.ChangeEvent<HTMLInputElement>
+  | React.ChangeEvent<HTMLTextAreaElement>
+
+declare type TFormValue =
+  | string
+  | number
+  | boolean
+  | TSelectOption
+  | TItemValue
+  | File[]
+  | FileReader[]
+  | Date
+  | TRangePickerValues
+  | null
+  | TItemValue[]
+  | TSelectedValue[]
+declare type TOnChange = (event: TChangeEventType) => void
+
+// Props which will pass FormField to component
+declare interface IFormCompProps {
+  hasError?: boolean
+  isValid?: boolean
+  value?: TFormValue
+  onChange?: TOnChange
+  dataId?: string
+  name?: string
+  setFieldValue?: (
+    name: string,
+    value: TFormValue,
+    shouldValidate?: { shouldValidate: boolean }
+  ) => void
+}
+
+declare type TRegister = (name: string) => {
+  onChange: TOnChange
+}
+
+declare type TTooltipPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'middle-left'
+  | 'middle-right'
+
+declare type TTooltipInfo = {
+  hasTriangle?: boolean
+  initialPosition: TTooltipPosition
+  elemRef: HTMLElement | null
+  tooltipRef: HTMLElement | null
+}
+
+declare type TCallBackFn = () => void
+
+declare type TDirtyFields = Partial<Readonly<{ [x: string]: unknown }>>
+
+declare module '*.svg'