react-restyle-components 0.1.60 → 0.1.62

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

@@ -1,120 +0,0 @@
-import React from 'react';
-import {render, fireEvent} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {
-  CheckBox,
-  Input,
-  Toggle,
-  MultilineInput,
-  Label,
-  InputDate,
-  InputFile,
-  InputRadio,
-  InputWrapper,
-} from './form.component';
-
-describe('Checkbox component', () => {
-  it('render checkbox correctly', () => {
-    const checkbox = render(<CheckBox />);
-    expect(checkbox).toMatchSnapshot();
-  });
-});
-
-describe('Input component', () => {
-  it('render input correctly', () => {
-    const inputComp = render(
-      <Input
-        type="text"
-        value="test"
-        onChange={(val) => jest.fn()}
-        onBlur={(value) => jest.fn()}
-        onKeyDown={(val) => jest.fn()}
-      />
-    );
-    const input = inputComp.getByTestId('INPT');
-    fireEvent.change(input, {target: {value: 'check'}});
-    userEvent.type(input, 'value');
-    fireEvent.blur(input);
-    fireEvent.keyDown(input, {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
-    });
-    fireEvent.keyPress(input, {key: 'Enter', keyCode: 13});
-
-    expect(input).toMatchSnapshot();
-  });
-});
-describe('Toggle component', () => {
-  it('render toggle correctly', () => {
-    const toggle = render(<Toggle />);
-    expect(toggle).toMatchSnapshot();
-  });
-});
-
-// describe('SelectOption component', () => {
-//   it('render selectOption correctly', () => {
-//     const select = render(
-//       <SelectOption key='test' onChange={value => jest.fn()} value='test' />,
-//     );
-//     const selectOption = select.getByTestId('SELECT');
-//     fireEvent.change(selectOption, {target: {value: 'check'}});
-//     userEvent.type(selectOption, 'value');
-//     expect(select).toMatchSnapshot();
-//   });
-// });
-describe('MultilineInput component', () => {
-  it('render multilineInput correctly', () => {
-    const multi = render(<MultilineInput />);
-    expect(multi).toMatchSnapshot();
-  });
-});
-
-// describe('Clock component', () => {
-//   it('render clock correctly', () => {
-//     const clock = render(
-//       <Clock value='2022-02-20' onChange={value => jest.fn()} />,
-//     );
-//     expect(clock).toMatchSnapshot();
-//   });
-// });
-describe('Label component', () => {
-  it('render label correctly', () => {
-    const label = render(<Label htmlFor="vsdvrf" />);
-    expect(label).toMatchSnapshot();
-  });
-});
-
-describe('InputDate component', () => {
-  it('render inputDate correctly', () => {
-    const inputDate = render(<InputDate />);
-    expect(inputDate).toMatchSnapshot();
-  });
-});
-// describe('InputDateTime component', () => {
-//   it('render inputDateTime correctly', () => {
-//     const inputDateTime = render(<InputDateTime />);
-//     expect(inputDateTime).toMatchSnapshot();
-//   });
-// });
-
-describe('InputFile component', () => {
-  it('render inputFile correctly', () => {
-    const inputFile = render(<InputFile />);
-    expect(inputFile).toMatchSnapshot();
-  });
-});
-describe('InputRadio component', () => {
-  it('render inputRadio correctly', () => {
-    const inputRadio = render(<InputRadio />);
-    expect(inputRadio).toMatchSnapshot();
-  });
-});
-
-describe('InputWrapper component', () => {
-  it('render inputWrapper correctly', () => {
-    const inputWrapper = render(<InputWrapper />);
-    expect(inputWrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,65 +0,0 @@
-import React, {Suspense} from 'react';
-import _ from 'lodash';
-import {Tooltip} from '../..';
-import loadable from '@loadable/component';
-import {IconBaseProps} from 'react-icons/lib';
-
-interface IconProps {
-  nameIcon: string;
-  propsIcon?: IconBaseProps;
-  tooltip?: string;
-  isDisable?: boolean;
-  onClick?: () => void;
-}
-
-let lib = 'md';
-export const Icon = ({
-  nameIcon,
-  propsIcon,
-  tooltip = '',
-  isDisable = false,
-  onClick,
-}: IconProps): JSX.Element => {
-  try {
-    const iconProps = {
-      ...propsIcon,
-      color: isDisable ? '#808080' : propsIcon?.color || '#ffffff',
-    };
-    const lib = nameIcon
-      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-      .split(' ')[0]
-      .toLocaleLowerCase();
-
-    let ElementIcon: any;
-    if (lib == 'md')
-      ElementIcon = loadable(() => import('react-icons/md'), {
-        resolveComponent: (el) =>
-          el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
-      });
-    else
-      ElementIcon = loadable(() => import('react-icons/fa'), {
-        resolveComponent: (el) =>
-          el[nameIcon] != null ? el[nameIcon] : el[Object.keys(el.default)[0]],
-      });
-
-    return (
-      <div
-        onClick={() => {
-          if (!isDisable) onClick && onClick();
-        }}
-      >
-        {!_.isEmpty(tooltip) ? (
-          <Tooltip tooltipText={tooltip}>
-            <ElementIcon {...iconProps} />
-          </Tooltip>
-        ) : (
-          <Suspense fallback={<div>Loading...</div>}>
-            <ElementIcon {...iconProps} />
-          </Suspense>
-        )}
-      </div>
-    );
-  } catch (error) {
-    return <></>;
-  }
-};

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Icon} from './icons.component';
-
-const meta: Meta<typeof Icon> = {
-  title: 'Design System/Atoms/Icon',
-  component: Icon,
-  tags: ['autodocs'],
-  parameters: {
-    componentSubtitle: `import { Icon } from 'react-restyle-components'`,
-  },
-};
-export default meta;
-type Story = StoryObj<typeof Icon>;
-
-export const Primary: Story = {
-  args: {
-    nameIcon: 'FaHistory',
-    propsIcon: {
-      color: '#000000',
-      size: 24,
-    },
-  },
-};

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import {render} from '@core-utils';
-import {Icon} from './icons.component';
-it('render Icon correctly', () => {
-  const icon = render(
-    <Icon
-      nameIcon="FaHistory"
-      propsIcon={{
-        color: '#000000',
-        size: 24,
-      }}
-    />
-  );
-  expect(icon).toMatchSnapshot();
-});

package/src/core-components/atoms/input/input-otp.component.tsx

@@ -1,107 +0,0 @@
-/* eslint-disable no-console */
-import React, {useEffect, useRef} from 'react';
-import './input-otp.styles.css';
-interface PinInputGridProps {
-  title?: string;
-  hasError?: boolean;
-  className?: string;
-  disable?: boolean;
-  blur?: any;
-  name?: string;
-  pin: Array<number | undefined>;
-
-  onPinChanged: (pinEntry: number | undefined, index: number) => void;
-}
-
-export const InputOtp: React.FC<PinInputGridProps> = ({
-  className,
-  pin,
-  onPinChanged,
-}) => {
-  const pinLength = 6;
-  const Pin_Min_Value = 0;
-  const Pin_Max_Value = 9;
-  const BACKSPACE_Key = 'Backspace';
-  const inputRefs = useRef<HTMLInputElement[]>([]);
-
-  useEffect(() => {
-    const ref = inputRefs.current[0];
-    if (ref) {
-      ref.focus();
-    }
-  }, []);
-
-  const changePinFocus = (pinIndex: number) => {
-    const ref = inputRefs.current[pinIndex];
-    if (ref) {
-      ref.focus();
-    }
-  };
-
-  const onChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    const value = event.target.value;
-    const pinNumber = Number(value.trim());
-
-    if (isNaN(pinNumber) || value.length === 0) {
-      return;
-    }
-
-    if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
-      onPinChanged(pinNumber, index);
-      if (index < pinLength - 1) {
-        changePinFocus(index + 1);
-      }
-    }
-  };
-
-  const onKeyDown = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    console.log({event, index});
-
-    const keyboardKeyCode = event.nativeEvent.code;
-    if (keyboardKeyCode != BACKSPACE_Key) return;
-
-    if (pin[index] === undefined) {
-      changePinFocus(index - 1);
-    } else {
-      onPinChanged(undefined, index);
-    }
-  };
-
-  return (
-    <div className={`${className} relative`}>
-      <div className="flex space-x-1 bg-background-secondary rounded-lg outline-offset-8">
-        {Array.from({length: pinLength}, (_, index) => (
-          <input
-            data-testid="onPinChanged"
-            className="pt-3 pb-2 block w-full px-0 text-5xl font-extrabold border-b-0 text-orange mt-0 bg-transparent text-center z-20 appearance-none focus:outline-none  font-nunitoSansRegular"
-            onKeyDown={(event) => onKeyDown(event, index)}
-            key={index}
-            onMouseUp={() => {
-              if (pin.join('').length <= 0) {
-                changePinFocus(0);
-              }
-            }}
-            onClick={() => {
-              if (pin.join('').length <= 0) {
-                onPinChanged(undefined, 0);
-              }
-            }}
-            ref={(el) => {
-              if (el) {
-                inputRefs.current[index] = el;
-              }
-            }}
-            onChange={(event) => onChange(event, index)}
-            value={pin[index] || ''}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/core-components/atoms/input/input-otp.styles.css

@@ -1,35 +0,0 @@
-.-z-1 {
-  z-index: -1;
-}
-
-.origin-0 {
-  transform-origin: 0%;
-}
-
-input:focus ~ label,
-input:not(:placeholder-shown) ~ label,
-textarea:focus ~ label,
-textarea:not(:placeholder-shown) ~ label,
-select:focus ~ label,
-select:not([value=""]):valid ~ label {
-  /* @apply transform; scale-75; -translate-y-6; */
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  --tw-scale-x: 0.75;
-  --tw-scale-y: 0.75;
-  --tw-translate-y: -1.5rem;
-}
-
-input:focus ~ label,
-select:focus ~ label {
-  /* @apply text-black; left-0; */
-  --tw-text-opacity: 1;
-  color: "#696969";
-  left: 0px;
-}

package/src/core-components/atoms/input/input-pin.component.tsx

@@ -1,144 +0,0 @@
-/* eslint-disable */
-import React, {useRef, useState} from 'react';
-import './input.styles.css';
-
-interface PinInputGridProps {
-  title: string;
-  hasError?: any;
-  errorMsg?: string;
-  defaultMsg?: string;
-  className?: string;
-  disable?: boolean;
-  name?: string;
-  defaultPin: Array<number | undefined>;
-  onPinChanged: (item: any, index: number) => void;
-}
-
-export const InputPin: React.FC<PinInputGridProps> = ({
-  title,
-  className,
-  defaultPin,
-  errorMsg,
-  defaultMsg,
-  hasError,
-  onPinChanged,
-}) => {
-  const pin = useRef<any>([]);
-  const [reload, setReload] = useState<boolean>(false);
-  const pinLength = 12;
-  const Pin_Min_Value = 0;
-  const Pin_Max_Value = 9;
-  const BACKSPACE_Key = 'Backspace';
-  const inputRefs = useRef<HTMLInputElement[]>([]);
-
-  const removeValuesFromArray = (valuesArray: string[], value: string) => {
-    const valueIndex = valuesArray.findIndex((entry) => entry === value);
-    if (valueIndex === -1) {
-      return;
-    }
-    valuesArray.splice(valueIndex, 1);
-  };
-
-  const changePinFocus = (pinIndex: number) => {
-    const ref = inputRefs.current[pinIndex];
-    if (ref) {
-      ref.focus();
-    }
-  };
-
-  const onChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    const previousValue = event.target.defaultValue;
-    const valueArray = event.target.value.split('');
-    const output = removeValuesFromArray(valueArray, previousValue);
-    const value = valueArray.pop();
-
-    if (!value) {
-      return;
-    }
-    const pinNumber = Number(value);
-
-    if (isNaN(pinNumber) || value.length === 0) {
-      return;
-    }
-    pin.current[pin.current?.length] = value;
-    setReload(!reload);
-    if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
-      onPinChanged(pin.current, index);
-      if (index < pinLength - 1) {
-        changePinFocus(index + 1);
-      }
-    }
-  };
-  const onKeyDown = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    const keyboardKeyCode = event.nativeEvent.code;
-    if (keyboardKeyCode != BACKSPACE_Key) return;
-    if (pin.current[index] !== undefined && keyboardKeyCode === BACKSPACE_Key) {
-      changePinFocus(index - 1);
-    }
-    if (pin.current[index] === undefined) {
-      changePinFocus(index - 1);
-    } else {
-      onPinChanged(undefined, index);
-    }
-  };
-
-  return (
-    <div className={`${className} relative`}>
-      <label className="duration-300  -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md">
-        {title}
-      </label>
-      <div className="flex  space-x-1">
-        {Array.from({length: pinLength}, (_, index) => (
-          <div className="flex space-x-1 max-w-full items-stretch" key={index}>
-            <input
-              data-testid="inputElementPin"
-              type="tel"
-              className="pb-2 block  w-4  px-0 mt-0 bg-transparent text-center border-0 border-b z-20 appearance-none rounded-none focus:outline-none  focus:ring-0 focus:border-gray-secondary border-gray-secondary font-nunitoSansRegular "
-              onKeyUp={(event) => onKeyDown(event, index)}
-              key={index}
-              onMouseUp={() => {
-                if (pin.current.join('').length <= 0) {
-                  changePinFocus(0);
-                }
-              }}
-              onClick={() => {
-                if (pin.current.join('').length <= 0) {
-                  onPinChanged(undefined, 0);
-                }
-              }}
-              ref={(el) => {
-                if (el) {
-                  inputRefs.current[index] = el;
-                }
-              }}
-              onChange={(event) => onChange(event, index)}
-              value={pin.current[index]?.toString() || ''}
-            />
-            <div className="invisible">
-              {(index + 1) % 4 === 0 ? 'ss' : null}
-            </div>
-          </div>
-        ))}
-      </div>
-      {hasError && hasError?.type !== 'required' && (
-        <span
-          className="text-sm text-red text-4xs font-nunitoSansRegular"
-          id="error"
-        >
-          {`${errorMsg || ''}`}
-        </span>
-      )}
-      {(!hasError || hasError?.type === 'required') && (
-        <span className="text-sm text-4xs font-nunitoSansRegular" id="error">
-          {`${defaultMsg || ''}`}
-        </span>
-      )}
-    </div>
-  );
-};

package/src/core-components/atoms/input/input-pin.stories.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {InputPin} from './input-pin.component';
-
-const meta: Meta<typeof InputPin> = {
-  title: 'Design System/Atoms/InputPin',
-  component: InputPin,
-  tags: ['autodocs'],
-  parameters: {
-    componentSubtitle: `import { InputPin } from 'react-restyle-components'`,
-  },
-};
-export default meta;
-type Story = StoryObj<typeof InputPin>;
-
-export const Primary: Story = {
-  args: {
-    title: 'Enter your Aadhaar Number',
-    hasError: true,
-    defaultPin: [],
-    onPinChanged: (item) => {
-      console.log({item});
-    },
-  },
-};

package/src/core-components/atoms/input/input-pin.test.tsx

@@ -1,30 +0,0 @@
-/* eslint-disable testing-library/render-result-naming-convention */
-import React from 'react';
-import {render} from '@core-utils';
-import {InputPin} from './input-pin.component';
-
-it('render InputOtp correctly without error', () => {
-  const pinInput = render(
-    <InputPin
-      title="Enter your Aadhaar Number"
-      hasError={false}
-      errorMsg="Uh oh! You’ve entered an invalid aadhaar number"
-      onPinChanged={() => jest.fn()}
-      defaultPin={[]}
-    />
-  );
-  expect(pinInput).toMatchSnapshot();
-});
-
-it('render InputOtp correctly with error', () => {
-  const pinInput = render(
-    <InputPin
-      title="Enter your Aadhaar Number"
-      hasError={true}
-      errorMsg="Uh oh! You’ve entered an invalid aadhaar number"
-      onPinChanged={() => jest.fn()}
-      defaultPin={[]}
-    />
-  );
-  expect(pinInput).toMatchSnapshot();
-});

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

@@ -1,74 +0,0 @@
-/* eslint-disable no-console */
-import React, {useState} from 'react';
-import './input.styles.css';
-
-interface InputProps {
-  title: string;
-  defaultValue: string;
-  hasError?: any;
-  errorMsg?: string;
-  defaultMsg?: string;
-  className?: string;
-  disable?: boolean;
-  inputStyle?: string;
-  autoComplete?: 'off' | 'on';
-  maxlength?: number;
-  onChange: (value: any) => void;
-  onBlur?: (value: any) => void;
-}
-
-export const Input = ({
-  title,
-  defaultValue,
-  className,
-  disable,
-  hasError,
-  errorMsg,
-  defaultMsg,
-  inputStyle,
-  autoComplete,
-  maxlength = 40,
-  onChange,
-  onBlur,
-}: InputProps) => {
-  const [value, setValue] = useState(defaultValue);
-
-  const onKeyUpValue = (event) => {
-    onChange(event.target.value);
-  };
-
-  return (
-    <div className={`${className} relative`}>
-      <input
-        data-testid="inputElement"
-        type="text"
-        name="name"
-        value={value}
-        placeholder=" "
-        disabled={disable}
-        className={`pt-3 pb-2 bg-transparent block w-full px-0 mt-0  rounded-none  border-0 border-b appearance-none focus:outline-none focus:ring-0 focus:border-gray-secondary border-gray-secondary font-nunitoSansRegular ${inputStyle}`}
-        onChange={(e) => {
-          setValue(e.target.value);
-          onChange && onChange(e.target.value);
-        }}
-        onKeyUp={onKeyUpValue}
-        onBlur={(e) => onBlur && onBlur(e.target.value)}
-        autoComplete={autoComplete}
-        maxLength={maxlength}
-      />
-      <label className="absolute duration-300 top-3 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md">
-        {title}
-      </label>
-      {hasError && hasError?.type !== 'required' && (
-        <span className="text-sm text-red text-4xs" id="error">
-          {`${errorMsg || ''}`}
-        </span>
-      )}
-      {(!hasError || hasError?.type === 'required') && (
-        <span className="text-sm text-4xs" id="error">
-          {`${defaultMsg || ''}`}
-        </span>
-      )}
-    </div>
-  );
-};

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Input} from './input.component';
-
-const meta: Meta<typeof Input> = {
-  title: 'Design System/Atoms/Input',
-  component: Input,
-  tags: ['autodocs'],
-};
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Primary: Story = {
-  args: {
-    className: 'mt-4',
-    title: 'Enter your Pan Number',
-    hasError: true,
-    defaultValue: '',
-    onChange: (item) => {
-      console.log({item});
-    },
-    onBlur: (item) => {
-      console.log({item});
-    },
-  },
-};