react-restyle-components 0.1.60 → 0.1.62

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

@@ -1,89 +0,0 @@
-/* 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

@@ -1,16 +0,0 @@
-/* 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

@@ -1,10 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.tsx

@@ -1,18 +0,0 @@
-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

@@ -1,182 +0,0 @@
-/* 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

@@ -1,55 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,190 +0,0 @@
-/* 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>
-    </>
-  );
-};