react-restyle-components 0.1.58 → 0.1.60

package/src/core-components/atoms/timer/timer.component.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import React, {useEffect, Ref, useState, useImperativeHandle} from 'react';
+import {TimerSVG} from '../../../library/assets/svg';
+
+interface TimerProps {
+  onClear: () => void;
+}
+
+// eslint-disable-next-line react/display-name
+export const Timer = React.forwardRef(
+  ({onClear}: TimerProps, ref: Ref<any>) => {
+    const width = 15;
+    const [minute, setMinute] = useState('00');
+    const [second, setSecond] = useState('10');
+
+    useEffect(() => {
+      const sec: number = parseInt(second);
+      const min: number = parseInt(minute);
+      const countDown = setInterval(() => {
+        if (min === 0 && sec === 0) {
+          setMinute('00');
+          setSecond('00');
+          clearInterval(countDown);
+          onClear && onClear();
+        } else {
+          let secondstTmp = (sec - 1).toString();
+          if (secondstTmp.length === 1) {
+            secondstTmp = '0'.concat(secondstTmp);
+          }
+          setSecond(secondstTmp);
+          if (sec === 0) {
+            setSecond('59');
+            const m = (min - 1).toString();
+            setMinute('0' + m);
+          }
+        }
+      }, 1000);
+      return () => {
+        clearInterval(countDown);
+      };
+    });
+
+    useImperativeHandle(ref, () => ({
+      updateState() {
+        setMinute('02');
+        setSecond('00');
+      },
+      resetTimer() {
+        // eslint-disable-next-line no-console
+        const sec: number = parseInt(second);
+        const min: number = parseInt(minute === '00' ? '02' : minute);
+        const countDown = setInterval(() => {
+          // eslint-disable-next-line no-console
+          if (min === 0 && sec === 0) {
+            setMinute('00');
+            setSecond('00');
+            clearInterval(countDown);
+            onClear && onClear();
+          } else {
+            let secondstTmp = (sec - 1).toString();
+            if (secondstTmp.length === 1) {
+              secondstTmp = '0'.concat(secondstTmp);
+            }
+            setSecond(secondstTmp);
+            if (sec === 0) {
+              setSecond('59');
+              const m = (min - 1).toString();
+              setMinute('0' + m);
+            }
+          }
+        }, 1000);
+        return () => {
+          clearInterval(countDown);
+        };
+      },
+    }));
+
+    return (
+      <div className="flex flex-row items-center">
+        <TimerSVG width={width} height={width} fill="#E7503D" />
+        <div className="ml-2 flex flex-row">
+          <span>{minute}:</span>
+          <span>{second}</span>
+        </div>
+      </div>
+    );
+  }
+);

package/src/core-components/atoms/timer/timer.test.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable testing-library/await-async-query */
+/* eslint-disable testing-library/prefer-screen-queries */
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {Timer as TimerComp} from './timer.component';
+
+it('render Timer correctly', () => {
+  const time = render(<TimerComp onClear={() => {}} />);
+  expect(time).toMatchSnapshot();
+});
+
+it('render Timer with minute correctly', () => {
+  const time = render(<TimerComp onClear={() => {}} />);
+  expect(time.findByText('minute')).toBeTruthy();
+});

package/src/core-components/atoms/tooltip/tooltip.component.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import {Tooltip} from './tooltip.component';
+
+describe('Tooltip component', () => {
+  it('render tooltip correctly', () => {
+    const tooltip = render(<Tooltip />);
+    expect(tooltip).toMatchSnapshot();
+  });
+});

package/src/core-components/atoms/tooltip/tooltip.component.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import * as Material from '@mui/material';
+
+interface TooltipProps {
+  tooltipText?: any;
+  position?: 'bottom' | 'left' | 'top';
+  className?: string;
+  children?: any;
+}
+
+export const Tooltip: React.FunctionComponent<TooltipProps> = ({
+  tooltipText,
+  position = 'bottom-start',
+  children,
+}) => {
+  const positionRef = React.useRef<{x: number; y: number}>({
+    x: 0,
+    y: 0,
+  });
+  const popperRef = React.useRef<any>(null);
+  const areaRef = React.useRef<HTMLDivElement>(null);
+
+  const handleMouseMove = (event: React.MouseEvent) => {
+    positionRef.current = {x: event.clientX, y: event.clientY};
+
+    if (popperRef.current != null) {
+      popperRef.current.update();
+    }
+  };
+  return (
+    <Material.Tooltip
+      title={tooltipText}
+      placement="bottom-start"
+      arrow
+      PopperProps={{
+        popperRef,
+        anchorEl: {
+          getBoundingClientRect: () => {
+            return new DOMRect(
+              positionRef.current.x,
+              areaRef.current!.getBoundingClientRect().y + 22,
+              0,
+              0
+            );
+          },
+        },
+      }}
+    >
+      <Material.Box ref={areaRef} onMouseMove={handleMouseMove}>
+        {children}
+      </Material.Box>
+    </Material.Tooltip>
+  );
+};

package/src/core-components/atoms/tooltip/tooltip.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Tooltip} from './tooltip.component';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Design System/Atoms/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { Tooltip } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/core-components/index.ts

@@ -0,0 +1,21 @@
+import * as Form from './atoms/form/form.component';
+export * from './atoms/buttons/buttons.component';
+export * from './atoms/check-box/checkBox.component';
+export * from './atoms/date-picker/date-picker.component';
+export * from './atoms/input/input-otp.component';
+export * from './atoms/input/input-pin.component';
+export * from './atoms/input/input.component';
+export * from './atoms/input-dropdown/input-dropdown.component';
+export * from './atoms/loader/loader.component';
+export * from './atoms/radio/radio.component';
+export * from './atoms/stepper/stepper.component';
+export * from './atoms/timer/timer.component';
+export * from './atoms/tooltip/tooltip.component';
+export * from './atoms/icons/icons.component';
+export * from './atoms/tabs/tabs.component';
+
+export * from './molecules/css-multiline-input/css-multiline-input.component';
+export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
+export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
+
+export {Form};

package/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {render} from '@core-utils';
+import {AutoCompleteFilterMultipleSelectMultipleFieldsDisplay} from './auto-complete-filter-multiple-select-multiple-fields-display.component';
+
+it('render AutoCompleteFilterMultipleSelectMultipleFieldsDisplay correctly', () => {
+  const autoCompleteFilterMultipleSelectMultipleFieldsDisplay = render(
+    <AutoCompleteFilterMultipleSelectMultipleFieldsDisplay
+      data={[]}
+      onUpdate={(item: any) => {
+        console.log({item});
+      }}
+      onSelect={(item: any) => {}}
+    />
+  );
+  expect(
+    autoCompleteFilterMultipleSelectMultipleFieldsDisplay
+  ).toMatchSnapshot();
+});

package/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable  */
+import React, {useState, useEffect, useRef} from 'react';
+import {Icon} from '../..';
+
+interface AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps {
+  uniqueField?: string;
+  loader?: boolean;
+  placeholder?: string;
+  data: any;
+  hasError?: boolean;
+  disable?: boolean;
+  isUpperCase?: boolean;
+  name?: string;
+  onFilter?: (value: string) => void;
+  onUpdate: (item: any) => void;
+  onSelect: (item: any) => any;
+  onBlur?: (e: any) => void;
+}
+
+export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({
+  uniqueField = '_id',
+  loader = false,
+  placeholder = 'Search...',
+  data,
+  hasError = false,
+  disable = false,
+  isUpperCase = false,
+  name,
+  onFilter,
+  onUpdate,
+  onSelect,
+  onBlur,
+}: AutoCompleteFilterMultipleSelectMultipleFieldsDisplayProps) => {
+  const [value, setValue] = useState<string>('');
+  const [options, setOptions] = useState<any[]>();
+  const [originalOptions, setOriginalOptions] = useState<any[]>();
+  const [isListOpen, setIsListOpen] = useState<boolean>(false);
+
+  const useOutsideAlerter = (ref) => {
+    useEffect(() => {
+      function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+          if (originalOptions && options) {
+            if (isListOpen) {
+              onUpdate && onUpdate(data.selected);
+            }
+          }
+          setIsListOpen(false);
+          setValue('');
+        }
+      }
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref, isListOpen]);
+  };
+
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef);
+  let count = 0;
+  const getSelectedItem = (selectedItem: any[], list: any[]) => {
+    if (count === 0) {
+      const finalList = list?.filter((item, index) => {
+        item.selected = false;
+        selectedItem && selectedItem.length > 0
+          ? selectedItem.find((sItem, index) => {
+              if (sItem[uniqueField] === item[uniqueField]) {
+                item.selected = true;
+              }
+            })
+          : (item.selected = false);
+        count++;
+        return item;
+      });
+      list = finalList;
+    }
+    return list;
+  };
+
+  useEffect(() => {
+    setOriginalOptions(getSelectedItem(data.selected, data.list));
+    setOptions(getSelectedItem(data.selected, data.list));
+  }, [data, data.selected]);
+
+  const onChange = (e) => {
+    const search = e.target.value;
+    setValue(search);
+    onFilter && onFilter(search);
+  };
+
+  const onKeyUp = (e) => {
+    const charCode = e.which ? e.which : e.keyCode;
+    if (charCode === 8) {
+      const search = e.target.value;
+      onFilter && onFilter(search);
+    }
+  };
+
+  return (
+    <>
+      <div ref={wrapperRef} className="w-full relative">
+        <div
+          className={`flex items-center leading-4 p-2 focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2 ${
+            hasError ? 'border-red' : 'border-gray-300'
+          } rounded-md`}
+        >
+          <input
+            placeholder={placeholder}
+            disabled={disable}
+            name={name}
+            value={
+              !isListOpen
+                ? `${(data.selected && data.selected.length) || 0} Items`
+                : isUpperCase
+                  ? value?.toUpperCase()
+                  : value
+            }
+            className={`w-full focus:outline-none bg-none`}
+            onKeyUp={onKeyUp}
+            onChange={onChange}
+            onClick={() => setIsListOpen(true)}
+            onBlur={(e) => onBlur && onBlur(e)}
+          />
+          {/* {loader && <Spinner animation="border" className="mr-2 h-4 w-4" />} */}
+          {isListOpen ? (
+            <Icon
+              nameIcon="FaChevronUp"
+              propsIcon={{
+                color: '#000000',
+                size: 22,
+              }}
+            />
+          ) : (
+            <Icon
+              nameIcon="FaChevronDown"
+              propsIcon={{
+                color: '#000000',
+                size: 22,
+              }}
+            />
+          )}
+        </div>
+
+        {options && isListOpen
+          ? options?.length > 0 && (
+              <div
+                className="mt-1  absolute bg-gray-100 p-2 rounded-sm z-500"
+                style={{zIndex: 80}}
+              >
+                <ul>
+                  {options?.map((item, index) => (
+                    <>
+                      <li
+                        key={index}
+                        className="text-gray-400 flex items-center"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={item.selected}
+                          onChange={() => onSelect(item)}
+                        />{' '}
+                        <label className="ml-2 mt-1 text-black">
+                          {data.displayKey
+                            .map(
+                              (key) =>
+                                `${item[key]}
+                              `
+                            )
+                            .join(' - ')}
+                        </label>
+                      </li>
+                    </>
+                  ))}
+                </ul>
+              </div>
+            )
+          : null}
+      </div>
+    </>
+  );
+};

package/src/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import type {Meta, StoryObj} from '@storybook/react';
+import {AutoCompleteFilterMultipleSelectMultipleFieldsDisplay} from './auto-complete-filter-multiple-select-multiple-fields-display.component';
+
+const meta: Meta<typeof AutoCompleteFilterMultipleSelectMultipleFieldsDisplay> =
+  {
+    title:
+      'Design System/Molecules/AutoCompleteFilterMultipleSelectMultipleFieldsDisplay',
+    component: AutoCompleteFilterMultipleSelectMultipleFieldsDisplay,
+    tags: ['autodocs'],
+    parameters: {
+      componentSubtitle: `import { AutoCompleteFilterMultipleSelectMultipleFieldsDisplay } from 'react-restyle-components'`,
+    },
+  };
+export default meta;
+type Story = StoryObj<
+  typeof AutoCompleteFilterMultipleSelectMultipleFieldsDisplay
+>;
+
+export const Primary: Story = {
+  args: {
+    data: {
+      list: [
+        {
+          _id: '66532a99bbfed4eea86eae23',
+          code: 82,
+          description: 'TEST1',
+          libraryCode: 'ABCD',
+        },
+        {
+          _id: '6652b6d8bcef7f713cb547d4',
+          code: 81,
+          description: 'TEST New',
+          libraryCode: 'TEST',
+        },
+      ],
+      selected: [
+        {
+          _id: '66532a99bbfed4eea86eae23',
+          code: 82,
+          description: 'TEST1',
+          libraryCode: 'ABCD',
+        },
+      ],
+      displayKey: ['libraryCode', 'description'],
+    },
+    onUpdate: (item) => {
+      console.log({item});
+    },
+    onSelect: (item) => {
+      console.log({item});
+    },
+  },
+};

package/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import {AutoCompleteFilterSingleSelectMultiFieldsDisplay} from './auto-complete-filter-single-select-multiple-fields-display.component';
+
+describe('AutoCompleteFilterSingleSelectMultiFieldsDisplay component', () => {
+  it('render autoCompleteFilterSingleSelectMultiFieldsDisplay correctly', () => {
+    const autoCompleteFilterSingleSelectMultiFieldsDisplay = render(
+      <AutoCompleteFilterSingleSelectMultiFieldsDisplay
+        data={{
+          list: [
+            {code: 'Lims', name: 'plus'},
+            {code: 'Lims', name: 'plus'},
+            {code: 'Lims', name: 'plus'},
+          ],
+          displayKey: ['name'],
+        }}
+        onSelect={() => jest.fn()}
+        onFilter={() => jest.fn()}
+      />
+    );
+    expect(autoCompleteFilterSingleSelectMultiFieldsDisplay).toMatchSnapshot();
+  });
+});

package/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx

@@ -0,0 +1,190 @@
+/* eslint-disable  */
+import React, {useState, useEffect, useRef} from 'react';
+import _ from 'lodash';
+import {Icon} from '../..';
+
+interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
+  loader?: boolean;
+  disable?: boolean;
+  displayValue?: string;
+  placeholder?: string;
+  data: any;
+  hasError?: boolean;
+  className?: string;
+  posstion?: string;
+  onFilter?: (item: any) => void;
+  onSelect?: (item: any) => any;
+  onBlur?: (item: any) => any;
+}
+
+export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({
+  disable = false,
+  loader = false,
+  displayValue = '',
+  placeholder = 'Search...',
+  data,
+  hasError = false,
+  className,
+  posstion = 'absolute',
+  onFilter,
+  onSelect,
+  onBlur,
+}: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => {
+  const [value, setValue] = useState<string>(displayValue);
+  const [options, setOptions] = useState<any[]>(data.list);
+  const [isListOpen, setIsListOpen] = useState<boolean>(false);
+  const [filterValue, setFilterValue] = useState<number>();
+
+  const useOutsideAlerter = (ref) => {
+    useEffect(() => {
+      function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+          setIsListOpen(false);
+          //setValue('');
+        }
+      }
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref, isListOpen]);
+  };
+
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef);
+
+  useEffect(() => {
+    setOptions(data.list);
+  }, [data]);
+
+  useEffect(() => {
+    setValue(displayValue);
+  }, [displayValue]);
+
+  const onChange = (e) => {
+    const search = e.target.value?.toUpperCase();
+    setValue(search);
+    setFilterValue(search);
+    onFilter && onFilter(search);
+  };
+
+  const onKeyUp = (e) => {
+    const charCode = e.which ? e.which : e.keyCode;
+    if (charCode === 8) {
+      const search = e.target.value;
+      onFilter && onFilter(search);
+    }
+  };
+
+  const onKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === 'Tab') {
+      if (options.length > 0) {
+        const selectedItem = options.find(
+          (item) => item.labId === Number(value)
+        );
+        if (selectedItem) {
+          setValue(
+            data.displayKey.map((key) => `${selectedItem[key]}`).join(' - ')
+          );
+          setIsListOpen(false);
+          onSelect && onSelect(selectedItem);
+        }
+      }
+    }
+  };
+
+  return (
+    <>
+      <div ref={wrapperRef} className="w-full relative">
+        <div
+          className={`flex items-center leading-4 p-2 focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2 ${
+            hasError ? 'border-red' : 'border-gray-300'
+          } rounded-md dark:text-black`}
+        >
+          <input
+            placeholder={placeholder}
+            value={value}
+            className={`${className} w-full focus:outline-none bg-none dark:text-black`}
+            onKeyUp={onKeyUp}
+            onChange={onChange}
+            onClick={() => setIsListOpen(true)}
+            disabled={disable}
+            onMouseDown={() => setValue('')}
+            onBlur={(e) => onBlur && onBlur(e)}
+            onKeyDown={onKeyDown}
+          />
+          {/* {loader && <Spinner animation="border" className="mr-2 h-4 w-4" />} */}
+          {isListOpen ? (
+            <Icon
+              nameIcon="FaChevronUp"
+              propsIcon={{
+                color: '#000000',
+                size: 22,
+              }}
+            />
+          ) : (
+            <Icon
+              nameIcon="FaChevronDown"
+              propsIcon={{
+                color: '#000000',
+                size: 22,
+              }}
+            />
+          )}
+        </div>
+
+        {options && isListOpen
+          ? options.length > 0 && (
+              <div
+                className={`mt-1 absolute  w-full bg-gray-100 p-2 rounded-sm `}
+                style={{
+                  zIndex: 500,
+                }}
+              >
+                <ul>
+                  {options?.map((item, index) => (
+                    <li
+                      key={index}
+                      className="text-gray-400 flex items-center"
+                      onClick={() => {
+                        setValue(
+                          data.displayKey
+                            .map((key) => `${item[key]}`)
+                            .join(' - ')
+                        );
+                        setIsListOpen(false);
+                        onSelect && onSelect(item);
+                      }}
+                    >
+                      {' '}
+                      <label
+                        className="ml-2 mt-1 text-black"
+                        style={{
+                          textOverflow: 'ellipsis',
+                          minWidth: 0,
+                          overflow: 'hidden',
+                          maxWidth: '334px',
+                          whiteSpace: 'nowrap',
+                        }}
+                        title={data.displayKey
+                          .map((key) => item[key])
+                          .join(' - ')}
+                      >
+                        {data.displayKey
+                          .map(
+                            (key) =>
+                              `${item[key]}
+                              `
+                          )
+                          .join(' - ')}
+                      </label>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )
+          : null}
+      </div>
+    </>
+  );
+};